public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore: add Table in storybook (CALCOM-10760) (#10869) 

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>
pull/10929/head^2
GitStart-Cal.com 2023-08-24 18:07:57 +08:00 committed by GitHub
parent 5503d9d432
commit 874ad29676
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 184 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
packages/ui/components/table/TableExamples.tsx Normal file
View File

@ -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 = () => (
<TableNew>
<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>
<TableFooter>
<TableRow>
<TableCell>Row 3(footer), Cell 1</TableCell>
<TableCell>Row 3(footer), Cell 2</TableCell>
</TableRow>
</TableFooter>
<TableCaption>Table Caption</TableCaption>
</TableNew>
);
export const TableExampleComponent = () => (
<Table>
<Table.Header>
<Table.Row>
<Table.ColumnTitle>Title Column 1</Table.ColumnTitle>
<Table.ColumnTitle>Title Column 2</Table.ColumnTitle>
</Table.Row>
</Table.Header>
<Table.Body>
<Table.Row>
<Table.Cell>Row 1, Cell 1</Table.Cell>
<Table.Cell>Row 1, Cell 2</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>Row 2, Cell 1</Table.Cell>
<Table.Cell>Row 2, Cell 2</Table.Cell>
</Table.Row>
<Table.Row>
<TableActions
actions={[
{
id: "action1",
label: "Action 1",
href: "#1",
},
{
id: "action2",
label: "Action 2",
actions: [
{
id: "action3",
label: "Action 3",
href: "#nested-action",
},
],
},
]}
/>
</Table.Row>
</Table.Body>
</Table>
);

48
packages/ui/components/table/table.stories.mdx Normal file
View File

@ -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";
<Meta title="UI/Table/Table" component={Table} />
<Title title="Table" suffix="Brief" subtitle="Version 1.0 — Last Update: 21 Aug 2023" />
## 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>

30
packages/ui/components/table/table.test.tsx
View File

@ -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" });

50
packages/ui/components/table/tableNew.stories.mdx Normal file
View File

@ -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>