From b057271538c011f55ab4e1e313ded448cacebc0d Mon Sep 17 00:00:00 2001 From: KIM HYUNJUN <93kimhyunjun@gmail.com> Date: Wed, 10 Mar 2021 23:50:56 +0900 Subject: [PATCH] Feat/table re (#56) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * chore: 컴포넌트, 스타일 import * feat(ui-kit): 테이블 컴포넌트 추가 * chore: 린트 픽스 --- ui-kit/src/components/Table/TableBody.tsx | 13 +++++++++ ui-kit/src/components/Table/TableCell.tsx | 22 +++++++++++++++ ui-kit/src/components/Table/TableHead.tsx | 21 ++++++++++++++ ui-kit/src/components/Table/TableRow.tsx | 13 +++++++++ ui-kit/src/components/Table/index.tsx | 16 +++++++++++ ui-kit/src/index.ts | 1 + ui-kit/src/sass/components/_Table.scss | 30 ++++++++++++++++++++ ui-kit/src/sass/components/_index.scss | 1 + ui-kit/src/stories/Table.stories.tsx | 34 +++++++++++++++++++++++ 9 files changed, 151 insertions(+) create mode 100644 ui-kit/src/components/Table/TableBody.tsx create mode 100644 ui-kit/src/components/Table/TableCell.tsx create mode 100644 ui-kit/src/components/Table/TableHead.tsx create mode 100644 ui-kit/src/components/Table/TableRow.tsx create mode 100644 ui-kit/src/components/Table/index.tsx create mode 100644 ui-kit/src/sass/components/_Table.scss create mode 100644 ui-kit/src/stories/Table.stories.tsx diff --git a/ui-kit/src/components/Table/TableBody.tsx b/ui-kit/src/components/Table/TableBody.tsx new file mode 100644 index 00000000..e1c521c2 --- /dev/null +++ b/ui-kit/src/components/Table/TableBody.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import classnames from 'classnames'; +import { TableProps } from './index'; + +const TableBody = ({ children }: TableProps) => { + return ( + + {children} + + ); +}; + +export default TableBody; diff --git a/ui-kit/src/components/Table/TableCell.tsx b/ui-kit/src/components/Table/TableCell.tsx new file mode 100644 index 00000000..3c78d9f1 --- /dev/null +++ b/ui-kit/src/components/Table/TableCell.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import classnames from 'classnames'; +import { TableProps } from './index'; +import { useTableHeadContext } from './TableHead'; + +interface TableCellProps extends TableProps { + as?: 'th' | 'td'; +} + +const TableCell = ({ children, align = 'left', as }: TableCellProps) => { + const { variant } = useTableHeadContext(); + const isHeadCell = variant === 'head' ? 'th' : 'td'; + const Component = as ?? isHeadCell; + + return ( + + {children} + + ); +}; + +export default TableCell; diff --git a/ui-kit/src/components/Table/TableHead.tsx b/ui-kit/src/components/Table/TableHead.tsx new file mode 100644 index 00000000..9aea8007 --- /dev/null +++ b/ui-kit/src/components/Table/TableHead.tsx @@ -0,0 +1,21 @@ +import React, { createContext } from 'react'; +import { useContext } from 'react'; +import { TableProps } from './index'; + +const TableHeadContext = createContext({ variant: '' }); + +const TableHead = ({ children }: TableProps) => { + return ( + + + {children} + + + ); +}; + +export function useTableHeadContext() { + return useContext(TableHeadContext); +} + +export default TableHead; diff --git a/ui-kit/src/components/Table/TableRow.tsx b/ui-kit/src/components/Table/TableRow.tsx new file mode 100644 index 00000000..2906dfef --- /dev/null +++ b/ui-kit/src/components/Table/TableRow.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import classnames from 'classnames'; +import { TableProps } from './index'; + +const TableRow = ({ children }: TableProps) => { + return ( + + {children} + + ); +}; + +export default TableRow; diff --git a/ui-kit/src/components/Table/index.tsx b/ui-kit/src/components/Table/index.tsx new file mode 100644 index 00000000..5779ba2a --- /dev/null +++ b/ui-kit/src/components/Table/index.tsx @@ -0,0 +1,16 @@ +import React, { HTMLAttributes } from 'react'; +import classnames from 'classnames'; + +export interface TableProps extends Omit, 'align' | 'bgcolor'> { + align?: 'left' | 'center' | 'right'; +} + +const Table = ({ children }: TableProps) => { + return {children}
; +}; + +export default Table; +export { default as TableHead } from './TableHead'; +export { default as TableBody } from './TableBody'; +export { default as TableRow } from './TableRow'; +export { default as TableCell } from './TableCell'; diff --git a/ui-kit/src/index.ts b/ui-kit/src/index.ts index 4acd8b92..a14ea2b8 100644 --- a/ui-kit/src/index.ts +++ b/ui-kit/src/index.ts @@ -25,6 +25,7 @@ export { default as ProgressBar } from './components/ProgressBar'; export { default as Accordion } from './components/Accordion'; export { default as Tag } from './components/Tag'; export { default as Modal, ModalHeader, ModalContent, ModalFooter } from './components/Modal'; +export { default as Table, TableHead, TableBody, TableRow, TableCell } from './components/Table'; export { Portal } from './contexts/Portal'; export { useToast } from './contexts/Toast'; export { useSnackbar } from './contexts/Snackbar'; diff --git a/ui-kit/src/sass/components/_Table.scss b/ui-kit/src/sass/components/_Table.scss new file mode 100644 index 00000000..67177956 --- /dev/null +++ b/ui-kit/src/sass/components/_Table.scss @@ -0,0 +1,30 @@ +.lubycon-table { + word-break: break-all; + border-collapse: collapse; + color: get-color('gray100'); + + &__head { + background-color: get-color('gray20'); + } + &__body { + background-color: get-color('gray10'); + .lubycon-table__row:not(:last-child) { + border-bottom: 1px solid get-color('gray20'); + } + } + &__cell { + padding: 8px 20px; + } + + &--align { + &-left { + text-align: left; + } + &-center { + text-align: center; + } + &-right { + text-align: right; + } + } +} diff --git a/ui-kit/src/sass/components/_index.scss b/ui-kit/src/sass/components/_index.scss index dedba876..446b9147 100644 --- a/ui-kit/src/sass/components/_index.scss +++ b/ui-kit/src/sass/components/_index.scss @@ -20,3 +20,4 @@ @import './ProgressBar'; @import './Tag'; @import './Modal'; +@import './Table'; diff --git a/ui-kit/src/stories/Table.stories.tsx b/ui-kit/src/stories/Table.stories.tsx new file mode 100644 index 00000000..03578312 --- /dev/null +++ b/ui-kit/src/stories/Table.stories.tsx @@ -0,0 +1,34 @@ +import React from 'react'; +import { Meta } from '@storybook/react/types-6-0'; +import { Table, TableHead, TableBody, TableRow, TableCell } from 'src'; + +export default { + title: 'Lubycon UI Kit/Table', +} as Meta; + +const header = ['제목', '제목', '제목', '제목', '제목']; +const contents = ['내용', '내용을 입력하세요', '내용', '내용을 입력하세요', '내용']; +const iterator = [undefined, undefined, undefined, undefined, undefined, undefined]; + +export const Default = () => { + return ( + + + + {header.map((name, i) => ( + {name} + ))} + + + + {iterator.map((v, rowIdx) => ( + + {contents.map((content, contentIdx) => ( + {content} + ))} + + ))} + +
+ ); +};