Skip to content

Commit a8d3fe5

Browse files
author
Nikolai Lopin
committed
docs: migrate Table docs to csf3
1 parent de07c95 commit a8d3fe5

File tree

6 files changed

+109
-110
lines changed

6 files changed

+109
-110
lines changed

‎src/components/Table/docs/ActiveRowTable.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ const data = [
3737
}
3838
];
3939

40-
export const ActiveRowTable: FC = () => {
40+
export const ActiveRowTable: FC = args => {
4141
const [selectedRows, setSelectedRows] = useState<number[]>([2]);
4242

4343
const updateSelectedRows = id => (event: ChangeEvent<HTMLInputElement>) => {
@@ -61,7 +61,7 @@ export const ActiveRowTable: FC = () => {
6161
};
6262

6363
return (
64-
<Table rowStyle="lines" rowSize="small">
64+
<Table rowStyle="lines" rowSize="small" {...args}>
6565
<thead>
6666
<TableRow>
6767
<TableHeaderCell>

‎src/components/Table/docs/DefaultTable.tsx

Lines changed: 0 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -49,36 +49,6 @@ export const DefaultTable: FC = (args: TableProps) => (
4949
</Button>
5050
</TableCell>
5151
</TableRow>
52-
<TableRow>
53-
<TableCell>
54-
31 January 2020 - 02:48
55-
<br />
56-
<Text fontSize={0} weak>
57-
No activity yet
58-
</Text>
59-
</TableCell>
60-
<TableCell scope="row">Marc Berg</TableCell>
61-
<TableCell>
62-
<Label variant="success">Active</Label>
63-
</TableCell>
64-
<TableCell>
65-
<Box display="flex" alignItems="center">
66-
<PhoneIcon size={18} color={Colors.ACTION_BLUE_900} />
67-
&nbsp;+4915139912828
68-
</Box>
69-
</TableCell>
70-
<TableCell>
71-
<Box display="flex" alignItems="center">
72-
<EnvelopeIcon size={18} color={Colors.ACTION_BLUE_900} />
73-
&nbsp;[email protected]
74-
</Box>
75-
</TableCell>
76-
<TableCell>
77-
<Button variant="secondary" size="small">
78-
...
79-
</Button>
80-
</TableCell>
81-
</TableRow>
8252
<TableRow>
8353
<TableCell>
8454
27 February 2020 - 16:02

‎src/components/Table/docs/SkeletonTable.tsx

Lines changed: 1 addition & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -19,22 +19,6 @@ const data = [
1919
status: <Label>New</Label>,
2020
emailAddress: '[email protected]'
2121
},
22-
{
23-
id: 2,
24-
date: randomDate().toDateString(),
25-
activity: '13 Trips',
26-
name: 'Jonathan Roolf',
27-
status: <Label variant="success">Active</Label>,
28-
emailAddress: '[email protected]'
29-
},
30-
{
31-
id: 3,
32-
date: randomDate().toDateString(),
33-
activity: 'No Activity',
34-
name: 'John Doe',
35-
status: <Label variant="danger">Fraud</Label>,
36-
emailAddress: '[email protected]'
37-
},
3822
{
3923
id: 4,
4024
date: randomDate().toDateString(),
@@ -75,7 +59,7 @@ export const SkeletonTable: FC = () => {
7559
</TableRow>
7660
</thead>
7761
<tbody>
78-
{loading && [0, 1, 2, 3, 4].map(key => <TableRowSkeleton key={key} columns={6} />)}
62+
{loading && [0, 1, 2].map(key => <TableRowSkeleton key={key} columns={6} />)}
7963
{!loading &&
8064
data.map(entry => (
8165
<TableRow key={entry.id}>

‎src/components/Table/docs/Table.stories.tsx

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import React from 'react';
2+
import { Meta, StoryObj } from '@storybook/react';
3+
import { Table } from '../components/Table';
4+
import { DefaultTable } from './DefaultTable';
5+
import { ActiveRowTable } from './ActiveRowTable';
6+
import { ComplexDataTable } from './ComplexDataTable';
7+
import { SkeletonTable } from './SkeletonTable';
8+
import { SortableTable } from './SortableTable';
9+
import { SortableTableDefault } from './SortableTableDefault';
10+
11+
const meta: Meta<typeof Table> = {
12+
title: 'Components/Table',
13+
component: Table,
14+
argTypes: {
15+
rowStyle: {
16+
control: 'radio',
17+
options: ['zebra', 'striped', 'lines']
18+
},
19+
rowSize: {
20+
control: 'radio',
21+
options: ['large', 'normal', 'small']
22+
},
23+
columnSpace: {
24+
control: 'radio',
25+
options: ['normal', 'small']
26+
}
27+
}
28+
};
29+
30+
export default meta;
31+
32+
type TableStory = StoryObj<typeof Table>;
33+
34+
export const Default: TableStory = {
35+
render: DefaultTable
36+
};
37+
38+
export const WithActiveRow: TableStory = {
39+
render: ActiveRowTable
40+
};
41+
42+
export const WithComplexData: TableStory = {
43+
decorators: [
44+
Story => (
45+
<div style={{ maxWidth: '100%', overflowX: 'auto' }}>
46+
<Story />
47+
</div>
48+
)
49+
],
50+
render: ComplexDataTable
51+
};
52+
53+
export const WithSkeletonLoader: TableStory = {
54+
render: SkeletonTable
55+
};
56+
57+
export const WithSortableTable: TableStory = {
58+
render: SortableTable
59+
};
60+
61+
export const WithDefaultSortedTable: TableStory = {
62+
render: SortableTableDefault
63+
};

‎src/components/Table/docs/Table.stories.mdx renamed to ‎src/components/Table/docs/Table.storybook.mdx

Lines changed: 15 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,23 @@
1-
import { Canvas, Story, ArgsTable, Meta, Unstyled } from '@storybook/blocks';
2-
import { DefaultTable } from './DefaultTable';
3-
import { ActiveRowTable } from './ActiveRowTable';
4-
import { ComplexDataTable } from './ComplexDataTable';
5-
import { SkeletonTable } from './SkeletonTable';
6-
import { SortableTable } from './SortableTable';
7-
import { SortableTableDefault } from './SortableTableDefault';
1+
import { Story, ArgTypes, ArgsTable, Meta, Primary } from '@storybook/blocks';
82
import { StyledSystemLinks } from '../../../docs/StyledSystemLinks';
93
import { TableRow } from '../components/TableRow';
10-
import { Table } from '../components/Table';
114
import { TableRowSkeleton } from '../components/TableRowSkeleton';
125
import { TableSortableHeaderCell } from '../components/TableSortableHeaderCell';
6+
import * as TableStories from './Table.stories';
137

148
# Table
159

16-
<Meta
17-
title="Components/Table"
18-
component={Table}
19-
argTypes={{
20-
rowStyle: {
21-
control: {
22-
type: 'radio',
23-
options: ['zebra', 'striped', 'lines']
24-
}
25-
}
26-
}}
27-
/>
10+
<Meta of={TableStories} />
2811

2912
Tables are used to render tabular data in a basic grid, making it easier for people to scan it. Tables are comprised of cells, columns, and rows.
3013

14+
<Primary />
15+
3116
## Properties
3217

3318
### Table
3419

35-
<ArgsTable of={Table} />
20+
<ArgTypes of={TableStories} />
3621

3722
<StyledSystemLinks component="Table" supportedProps={['margin', 'width', 'height']} />
3823

@@ -55,56 +40,29 @@ Tables are used to render tabular data in a basic grid, making it easier for peo
5540
### TableSortableHeaderCell
5641

5742
<ArgsTable of={TableSortableHeaderCell} />
58-
<br />
59-
60-
## Stories
6143

62-
<Canvas>
63-
<Story name="Default" args={{}}>
64-
{DefaultTable.bind({})}
65-
</Story>
66-
</Canvas>
44+
## Usage
6745

6846
☝️ Tables are not width 100% by default, if required, you must set `width: 100%` to the `Table` Component.
6947
To better understand some of the props in the above table, an in-depth guide of accessible tables can be found at the [a11y-101 article](https://a11y-101.com/development/tables).
7048

71-
## Active Row
49+
### Active Row
7250

7351
To highlight an active (or selected) row, you can add set `active` to true on the `TableRow` component. This will mark
7452
the row as active and change the background color.
7553

76-
<Unstyled>
77-
<ActiveRowTable />
78-
</Unstyled>
79-
80-
```jsx
81-
<TableRow active={true}>
82-
<TableCell>
83-
<Checkbox checked={true} />
84-
</TableCell>
85-
<TableCell>Alex Ponomarenko</TableCell>
86-
<TableCell>a.ponomarenko@mytaxi.com</TableCell>
87-
<TableCell>Booker</TableCell>
88-
<TableCell>Product</TableCell>
89-
</TableRow>
90-
```
54+
<Story of={TableStories.WithActiveRow} />
9155

92-
## Complex Data
56+
### Complex Data
9357

9458
When dealing with complex data, it is possible to use up to two lines of text in one row. Keep in mind, that the smallest row size
95-
will not work when you have multiple lines in one cells.
59+
will not work when you have multiple lines in one cell.
9660

97-
<Unstyled>
98-
<div style={{ maxWidth: '100%', overflowX: 'auto' }}>
99-
<ComplexDataTable />
100-
</div>
101-
</Unstyled>
61+
<Story of={TableStories.WithComplexData} />
10262

10363
## Loading State
10464

105-
<Unstyled>
106-
<SkeletonTable />
107-
</Unstyled>
65+
<Story of={TableStories.WithSkeletonLoader} />
10866

10967
```jsx
11068
<Table rowStyle="zebra">
@@ -138,9 +96,7 @@ const { sortBy, setSortBy } = useSortBy();
13896

13997
### Example
14098

141-
<Unstyled>
142-
<SortableTable />
143-
</Unstyled>
99+
<Story of={TableStories.WithSortableTable} />
144100

145101
> Check the example [code](https://github.com/freenowtech/wave/blob/main/src/components/Table/docs/SortableTable.tsx).
146102
@@ -152,8 +108,6 @@ Sometimes the data will already be received sorted by default according to one o
152108
const { sortBy, setSortBy } = useSortBy('id', 'ASC');
153109
```
154110

155-
<Unstyled>
156-
<SortableTableDefault />
157-
</Unstyled>
111+
<Story of={TableStories.WithDefaultSortedTable} />
158112

159113
> Check the example [code](https://github.com/freenowtech/wave/blob/main/src/components/Table/docs/SortableTableDefault.tsx).

‎src/components/Table/docs/TableRow.stories.tsx

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { Meta, StoryObj } from '@storybook/react';
2+
import React from 'react';
3+
import { TableRow } from '../components/TableRow';
4+
import { TableCell } from '../components/TableCell';
5+
import { Checkbox } from '../../Checkbox/Checkbox';
6+
7+
const meta: Meta<typeof TableRow> = {
8+
title: 'Components/Table/TableRow',
9+
component: TableRow
10+
};
11+
12+
export default meta;
13+
14+
type TableRowStory = StoryObj<typeof TableRow>;
15+
16+
export const Default: TableRowStory = {
17+
render: args => (
18+
<TableRow {...args}>
19+
<TableCell>
20+
<Checkbox />
21+
</TableCell>
22+
<TableCell>Alex Ponomarenko</TableCell>
23+
<TableCell>[email protected]</TableCell>
24+
<TableCell>Booker</TableCell>
25+
<TableCell>Product</TableCell>
26+
</TableRow>
27+
)
28+
};

0 commit comments

Comments
 (0)