refactor: folder structure

shiftpsh · shiftpsh · commit 438a5acd58c9 · 2022-05-19T14:09:54.000+09:00
diff --git a/example/src/stories/Button.stories.tsx b/example/src/stories/Button.stories.tsx
@@ -3,7 +3,7 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'
 import React from 'react'
 
 export default {
-  title: 'Button',
+  title: 'Components/Button',
   component: Button,
   argTypes: {
     children: {
diff --git a/example/src/stories/Card.stories.tsx b/example/src/stories/Card.stories.tsx
@@ -3,7 +3,7 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'
 import React from 'react'
 
 export default {
-  title: 'Card',
+  title: 'Components/Card',
   component: Card,
   argTypes: {
     children: {
diff --git a/example/src/stories/Chip.stories.tsx b/example/src/stories/Chip.stories.tsx
@@ -3,7 +3,7 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'
 import React from 'react'
 
 export default {
-  title: 'Chip',
+  title: 'Components/Chip',
   component: Chip,
   argTypes: {
     backgroundColor: {
diff --git a/example/src/stories/Collapse.stories.tsx b/example/src/stories/Collapse.stories.tsx
@@ -3,7 +3,7 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'
 import React from 'react'
 
 export default {
-  title: 'Collapse',
+  title: 'Components/Collapse',
   component: Collapse,
   argTypes: {
     shown: {
diff --git a/example/src/stories/Container.stories.tsx b/example/src/stories/Container.stories.tsx
@@ -3,7 +3,7 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'
 import React from 'react'
 
 export default {
-  title: 'Container',
+  title: 'Components/Container',
   component: Container,
   argTypes: {
     children: {
diff --git a/example/src/stories/Divider.stories.tsx b/example/src/stories/Divider.stories.tsx
@@ -3,7 +3,7 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'
 import React from 'react'
 
 export default {
-  title: 'Divider',
+  title: 'Components/Divider',
   component: Divider,
   argTypes: {
     margin: {
diff --git a/example/src/stories/EmptyStatePlaceholder.stories.tsx b/example/src/stories/EmptyStatePlaceholder.stories.tsx
@@ -3,7 +3,7 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'
 import React from 'react'
 
 export default {
-  title: 'EmptyStatePlaceholder',
+  title: 'Components/EmptyStatePlaceholder',
   component: EmptyStatePlaceholder,
   argTypes: {
     children: {
diff --git a/example/src/stories/Footer.stories.tsx b/example/src/stories/Footer.stories.tsx
@@ -3,7 +3,7 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'
 import React from 'react'
 
 export default {
-  title: 'Footer',
+  title: 'Components/Footer',
   component: Footer,
   argTypes: {
     children: {
diff --git a/example/src/stories/List/List.stories.tsx b/example/src/stories/List/List.stories.tsx
@@ -3,7 +3,7 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'
 import React from 'react'
 
 export default {
-  title: 'List',
+  title: 'Components/List/List',
   component: List,
   argTypes: {
     children: {
diff --git a/example/src/stories/List/ListItem.stories.tsx b/example/src/stories/List/ListItem.stories.tsx
@@ -3,7 +3,7 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'
 import React from 'react'
 
 export default {
-  title: 'ListItem',
+  title: 'Components/List/ListItem',
   component: ListItem,
   argTypes: {
     children: {
diff --git a/example/src/stories/NavBar.stories.tsx b/example/src/stories/NavBar.stories.tsx
@@ -3,7 +3,7 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'
 import React from 'react'
 
 export default {
-  title: 'NavBar',
+  title: 'Components/NavBar',
   component: NavBar,
   argTypes: {
     children: {
diff --git a/example/src/stories/PaginationItem.stories.tsx b/example/src/stories/PaginationItem.stories.tsx
@@ -3,7 +3,7 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'
 import React from 'react'
 
 export default {
-  title: 'PaginationItem',
+  title: 'Components/PaginationItem',
   component: PaginationItem,
   argTypes: {
     current: {
diff --git a/example/src/stories/Tab/Tab.stories.tsx b/example/src/stories/Tab/Tab.stories.tsx
@@ -3,7 +3,7 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'
 import React from 'react'
 
 export default {
-  title: 'Tab',
+  title: 'Components/Tab/Tab',
   component: Tab,
   argTypes: {
     current: {
@@ -42,4 +42,4 @@ const Template: ComponentStory<typeof Tab> = (args) => <Tab {...args} />
 export const Default = Template.bind({})
 Default.args = {
   children: 'Tab',
-}
+}
diff --git a/example/src/stories/Tab/Tabs.stories.tsx b/example/src/stories/Tab/Tabs.stories.tsx
@@ -3,7 +3,7 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'
 import React from 'react'
 
 export default {
-  title: 'Tabs',
+  title: 'Components/Tab/Tabs',
   component: Tabs,
   argTypes: {
     children: {
diff --git a/example/src/stories/Typo.stories.tsx b/example/src/stories/Typo.stories.tsx
@@ -3,7 +3,7 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'
 import React from 'react'
 
 export default {
-  title: 'Typo',
+  title: 'Components/Typo',
   component: Typo,
   argTypes: {
     children: {
diff --git a/src/components/List/List.tsx b/src/components/List/List.tsx
@@ -1,6 +1,6 @@
 import React, { ElementType } from 'react'
 import styled from 'styled-components'
-import { PC, PP, PR } from '../types/PolymorphicElementProps'
+import { PC, PP, PR } from '../../types/PolymorphicElementProps'
 
 const paddingMap = {
   none: 'padding: 0;',
diff --git a/src/components/List/ListItem.tsx b/src/components/List/ListItem.tsx
@@ -1,9 +1,9 @@
 import React, { ElementType } from 'react'
 import styled, { css, useTheme } from 'styled-components'
-import { PC, PP, PR } from '../types/PolymorphicElementProps'
-import { computeHoverColor, readableColor } from '../utils/color'
-import { cssClickable, cssVariables } from '../utils/styles'
-import { transparentHoverTemplate } from '../utils/variables'
+import { PC, PP, PR } from '../../types/PolymorphicElementProps'
+import { computeHoverColor, readableColor } from '../../utils/color'
+import { cssClickable, cssVariables } from '../../utils/styles'
+import { transparentHoverTemplate } from '../../utils/variables'
 
 export const listItemVariables = cssVariables(
   {
diff --git a/src/components/List/index.ts b/src/components/List/index.ts
@@ -0,0 +1,3 @@
+export * from './List'
+export * from './ListItem'
+
diff --git a/src/components/Table/Cell.tsx b/src/components/Table/Cell.tsx
@@ -0,0 +1,31 @@
+import React, { ElementType } from 'react'
+import styled from 'styled-components'
+import { PC, PP, PR } from '../../types/PolymorphicElementProps'
+
+const paddingMap = {
+  none: 'padding: 0;',
+  normal: 'padding: 16px;',
+  wide: 'padding: 32px;',
+}
+
+interface CellContainerProps {
+  padding: 'none' | 'normal' | 'wide'
+}
+
+const CellContainer = styled.td<CellContainerProps>`
+  display: table-cell;
+  border-bottom: ${({ theme }) => theme.styles.border()};
+  ${({ padding }) => paddingMap[padding]}
+`
+
+export interface CellProps {
+  padding?: 'none' | 'normal' | 'wide'
+}
+
+export const Cell: PC<'td', CellProps> = React.forwardRef(
+  <T extends ElementType>(props: PP<T, CellProps>, ref?: PR<T>) => {
+    const { padding = 'normal', as = 'td', ...rest } = props
+
+    return <CellContainer padding={padding} ref={ref} as={as} {...rest} />
+  }
+)
diff --git a/src/components/Table/index.ts b/src/components/Table/index.ts
@@ -0,0 +1,2 @@
+export * from './Cell';
+
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -8,10 +8,10 @@ export * from './Divider'
 export * from './EmptyStatePlaceholder'
 export * from './Footer'
 export * from './List'
-export * from './ListItem'
 export * from './NavBar'
 export * from './PaginationItem'
 export * from './Space'
 export * from './Tab'
+export * from './Table'
 export * from './Typo'
 
