diff --git a/packages/ui/components/table/TableExamples.tsx b/packages/ui/components/table/TableExamples.tsx new file mode 100644 index 0000000000..5b6616d45c --- /dev/null +++ b/packages/ui/components/table/TableExamples.tsx @@ -0,0 +1,83 @@ +import { Table } from "./Table"; +import { TableActions } from "./TableActions"; +import { + Table as TableNew, + TableHeader, + TableRow, + TableHead, + TableBody, + TableCell, + TableFooter, + TableCaption, +} from "./TableNew"; + +export const TableNewExampleComponent = () => ( + + + + Header Column 1 + Header Column 2 + + + + + Row 1, Cell 1 + Row 1, Cell 2 + + + Row 2, Cell 1 + Row 2, Cell 2 + + + + + Row 3(footer), Cell 1 + Row 3(footer), Cell 2 + + + Table Caption + +); + +export const TableExampleComponent = () => ( + + + + Title Column 1 + Title Column 2 + + + + + Row 1, Cell 1 + Row 1, Cell 2 + + + Row 2, Cell 1 + Row 2, Cell 2 + + + + + +
+); diff --git a/packages/ui/components/table/table.stories.mdx b/packages/ui/components/table/table.stories.mdx new file mode 100644 index 0000000000..175f5f2a5d --- /dev/null +++ b/packages/ui/components/table/table.stories.mdx @@ -0,0 +1,48 @@ +import { Canvas, Meta, Story } from "@storybook/addon-docs"; + +import { + Examples, + Example, + Title, + VariantsTable, + CustomArgsTable, + VariantRow, +} from "@calcom/storybook/components"; + +import { Table } from "./Table"; +import { TableExampleComponent } from "./TableExamples"; + + + + + +## Definition + +The `Table` component is a HTML table that utilizes Tailwind classes to enhance its styles. + +## Structure + +The `Table` component should be used with other table sub-components (present as object attributes) that follow the same pattern. +These components render common elements that are styled with Tailwind. These components include: + +- `Body` -> (`tbody`) +- `Header` -> (`thead`) +- `Row` -> (`tr`) +- `ColumnTitle` -> (`th`) +- `Cell` -> (`td`) + +<CustomArgsTable of={Table} /> + +<Title offset title="Table" suffix="Variants" /> + +<Canvas> + <Story name="Table"> + {(props) => ( + <VariantsTable titles={["Default"]} columnMinWidth={150}> + <VariantRow> + <TableExampleComponent /> + </VariantRow> + </VariantsTable> + )} + </Story> +</Canvas> diff --git a/packages/ui/components/table/table.test.tsx b/packages/ui/components/table/table.test.tsx index 39c3869832..6a38423ef1 100644 --- a/packages/ui/components/table/table.test.tsx +++ b/packages/ui/components/table/table.test.tsx @@ -2,9 +2,9 @@ import { fireEvent, render } from "@testing-library/react"; import { vi } from "vitest"; -import { Table, TableActions } from "@calcom/ui"; +import { TableActions } from "@calcom/ui"; -import { TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "./TableNew"; +import { TableNewExampleComponent } from "./TableExamples"; const mockActions = [ { @@ -21,31 +21,7 @@ const mockActions = [ describe("tests for Table component", () => { test("Should render Table component correctly", () => { - const { getByRole, getByText } = render( - <> - <Table> - <> - <TableHeader> - <TableRow> - <TableHead>Header Column 1</TableHead> - <TableHead>Header Column 2</TableHead> - </TableRow> - </TableHeader> - <TableBody> - <TableRow> - <TableCell>Row 1, Cell 1</TableCell> - <TableCell>Row 1, Cell 2</TableCell> - </TableRow> - <TableRow> - <TableCell>Row 2, Cell 1</TableCell> - <TableCell>Row 2, Cell 2</TableCell> - </TableRow> - </TableBody> - <TableCaption>Table Caption</TableCaption> - </> - </Table> - </> - ); + const { getByRole, getByText } = render(<TableNewExampleComponent />); const headerElement1 = getByRole("columnheader", { name: "Header Column 1" }); const headerElement2 = getByRole("columnheader", { name: "Header Column 2" }); diff --git a/packages/ui/components/table/tableNew.stories.mdx b/packages/ui/components/table/tableNew.stories.mdx new file mode 100644 index 0000000000..2399903168 --- /dev/null +++ b/packages/ui/components/table/tableNew.stories.mdx @@ -0,0 +1,50 @@ +import { Canvas, Meta, Story } from "@storybook/addon-docs"; + +import { + Examples, + Example, + Title, + VariantsTable, + CustomArgsTable, + VariantRow, +} from "@calcom/storybook/components"; + +import { TableNewExampleComponent } from "./TableExamples"; +import { Table } from "./TableNew"; + +<Meta title="UI/Table/TableNew" component={Table} /> + +<Title title="Table New" suffix="Brief" subtitle="Version 1.0 — Last Update: 21 Aug 2023" /> + +## Definition + +The `Table` component (from TableNew.tsx) is a HTML table that utilizes Tailwind classes to enhance its styles. + +## Structure + +The `Table` component should be used with other table sub-components (exported in the same file) that follow the same pattern. +These components render common elements that are styled with Tailwind. These components include: + +- `TableBody` -> (`tbody`) +- `TableHeader` -> (`thead`) +- `TableRow` -> (`tr`) +- `TableHead` -> (`th`) +- `TableCell` -> (`td`) +- `TableFooter` -> (`tfoot`) +- `TableCaption` -> (`caption`) + +<CustomArgsTable of={Table} /> + +<Title offset title="Table New" suffix="Variants" /> + +<Canvas> + <Story name="Table New"> + {(props) => ( + <VariantsTable titles={["Default"]} columnMinWidth={150}> + <VariantRow> + <TableNewExampleComponent /> + </VariantRow> + </VariantsTable> + )} + </Story> +</Canvas>