diff --git a/frontend/src/components/v2/Table/Table.stories.tsx b/frontend/src/components/v2/Table/Table.stories.tsx new file mode 100644 index 0000000000..666d43ed46 --- /dev/null +++ b/frontend/src/components/v2/Table/Table.stories.tsx @@ -0,0 +1,41 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { Table, TableContainer, TBody, Td, Th, THead, Tr } from './Table'; + +const meta: Meta = { + title: 'Components/Table', + component: Table, + tags: ['v2'], + argTypes: {} +}; + +export default meta; +type Story = StoryObj; + +export const Basic: Story = { + render: (args) => ( + + + + + + + + + + + + + + + + + + + + + +
Head#1Head#2Head#3
Row#1Row#2Row#3
Row#1Row#2Row#3
+
+ ) +}; diff --git a/frontend/src/components/v2/Table/Table.tsx b/frontend/src/components/v2/Table/Table.tsx new file mode 100644 index 0000000000..c4d4c89b6d --- /dev/null +++ b/frontend/src/components/v2/Table/Table.tsx @@ -0,0 +1,93 @@ +import { ReactNode } from 'react'; +import { twMerge } from 'tailwind-merge'; + +export type TableContainerProps = { + children: ReactNode; + isRounded?: boolean; + className?: string; +}; + +export const TableContainer = ({ + children, + className, + isRounded = true +}: TableContainerProps): JSX.Element => ( +
+ {children} +
+); + +// main parent table +export type TableProps = { + className?: string; + children: ReactNode; +}; + +export const Table = ({ children, className }: TableProps): JSX.Element => ( + + {children} +
+); + +// table head +export type THeadProps = { + children: ReactNode; + className?: string; +}; + +export const THead = ({ children, className }: THeadProps): JSX.Element => ( + + {children} + +); + +// table rows +export type TrProps = { + children: ReactNode; + className?: string; +}; + +export const Tr = ({ children, className }: TrProps): JSX.Element => ( + {children} +); + +// table head columns +export type ThProps = { + children: ReactNode; + className?: string; +}; + +export const Th = ({ children, className }: ThProps): JSX.Element => ( + {children} +); + +// table body +export type TBodyProps = { + children: ReactNode; + className?: string; +}; + +export const TBody = ({ children, className }: TBodyProps): JSX.Element => ( + {children} +); + +// table body columns +export type TdProps = { + children: ReactNode; + className?: string; +}; + +export const Td = ({ children, className }: TdProps): JSX.Element => ( + {children} +); diff --git a/frontend/src/components/v2/Table/index.tsx b/frontend/src/components/v2/Table/index.tsx new file mode 100644 index 0000000000..ccf14665f6 --- /dev/null +++ b/frontend/src/components/v2/Table/index.tsx @@ -0,0 +1,10 @@ +export type { + TableContainerProps, + TableProps, + TBodyProps, + TdProps, + THeadProps, + ThProps, + TrProps +} from './Table'; +export { Table, TableContainer, TBody, Td, Th, THead, Tr } from './Table'; diff --git a/frontend/src/components/v2/index.tsx b/frontend/src/components/v2/index.tsx index 94fd40a2df..4371140473 100644 --- a/frontend/src/components/v2/index.tsx +++ b/frontend/src/components/v2/index.tsx @@ -10,4 +10,5 @@ export * from './Modal'; export * from './Select'; export * from './Spinner'; export * from './Switch'; +export * from './Table'; export * from './TextArea';