Skip to content

Commit 351355f

Browse files
rwieruchrwieruch
committed
docs(storybook): export raw with vite
1 parent 2930c3e commit 351355f

File tree

282 files changed

+14613
-12473
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

282 files changed

+14613
-12473
lines changed

‎.storybook/main.js

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ const path = require('path');
22

33
module.exports = {
44
stories: ['./stories/**/*.@(js|jsx|ts|tsx|mdx)'],
5-
addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
5+
addons: ['@storybook/addon-docs', '@storybook/addon-links'],
66
staticDirs: ['./static'],
77

88
// due to storybook composition, chakra shows up as stories
@@ -13,25 +13,24 @@ module.exports = {
1313
framework: '@storybook/react',
1414
core: {
1515
builder: '@storybook/builder-vite',
16+
disableTelemetry: true,
1617
},
1718

1819
async viteFinal(config, { configType }) {
1920
// `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
2021
// You can change the configuration based on that.
2122
// 'PRODUCTION' is used when building the static version of storybook.
2223

23-
// chakra + framer motion is not working with storybook
24-
// https://github.com/framer/motion/issues/1307#issuecomment-966827629
25-
// config.module.rules.push({
26-
// type: 'javascript/auto',
27-
// test: /\.mjs$/,
28-
// include: /node_modules/,
29-
// });
30-
3124
// chakra does not show styles in storybook
3225
// https://github.com/storybookjs/storybook/issues/13114#issuecomment-846464338
3326
return {
3427
...config,
28+
build: {
29+
...config.build,
30+
// https://github.com/storybookjs/builder-vite/issues/409
31+
// https://github.com/vitejs/vite/issues/2433
32+
sourcemap: false,
33+
},
3534
resolve: {
3635
...config.resolve,
3736
alias: [

‎.storybook/stories/.DS_Store

0 Bytes
Binary file not shown.

‎.storybook/stories/ClientVsServer/Client/base.jsx

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
import * as React from 'react';
2+
import axios from 'axios';
3+
4+
import {
5+
Table,
6+
Header,
7+
HeaderRow,
8+
Body,
9+
Row,
10+
HeaderCell,
11+
Cell,
12+
useCustom,
13+
} from '@table-library/react-table-library/table';
14+
import { useTheme } from '@table-library/react-table-library/theme';
15+
import { CellTree, useTree, TreeExpandClickTypes } from '@table-library/react-table-library/tree';
16+
import {
17+
CellSelect,
18+
HeaderCellSelect,
19+
useRowSelect,
20+
} from '@table-library/react-table-library/select';
21+
import { useSort, HeaderCellSort } from '@table-library/react-table-library/sort';
22+
import { usePagination } from '@table-library/react-table-library/pagination';
23+
24+
import { nodes } from '../../data';
25+
26+
const Component = () => {
27+
const data = {
28+
nodes,
29+
};
30+
31+
const theme = useTheme({
32+
Table: `
33+
--data-table-library_grid-template-columns: 24px repeat(5, minmax(0, 1fr));
34+
`,
35+
});
36+
37+
const tree = useTree(
38+
data,
39+
{
40+
onChange: onTreeChange,
41+
},
42+
{
43+
clickType: TreeExpandClickTypes.ButtonClick,
44+
treeYLevel: 1,
45+
},
46+
);
47+
48+
const select = useRowSelect(data, {
49+
onChange: onSelectChange,
50+
});
51+
52+
const sort = useSort(
53+
data,
54+
{
55+
onChange: onSortChange,
56+
},
57+
{
58+
sortFns: {
59+
TASK: (array) => array.sort((a, b) => a.name.localeCompare(b.name)),
60+
DEADLINE: (array) => array.sort((a, b) => a.deadline - b.deadline),
61+
TYPE: (array) => array.sort((a, b) => a.type.localeCompare(b.type)),
62+
COMPLETE: (array) => array.sort((a, b) => a.isComplete - b.isComplete),
63+
TASKS: (array) => array.sort((a, b) => (a.nodes || []).length - (b.nodes || []).length),
64+
},
65+
},
66+
);
67+
68+
const pagination = usePagination(data, {
69+
state: {
70+
page: 0,
71+
size: 5,
72+
},
73+
onChange: onPaginationChange,
74+
});
75+
76+
function onTreeChange(action, state) {
77+
console.log(action, state);
78+
}
79+
80+
function onSelectChange(action, state) {
81+
console.log(action, state);
82+
}
83+
84+
function onSortChange(action, state) {
85+
console.log(action, state);
86+
}
87+
88+
function onPaginationChange(action, state) {
89+
console.log(action, state);
90+
}
91+
92+
return (
93+
<>
94+
<Table
95+
data={data}
96+
theme={theme}
97+
layout={{ custom: true }}
98+
tree={tree}
99+
select={select}
100+
sort={sort}
101+
pagination={pagination}
102+
>
103+
{(tableList) => (
104+
<>
105+
<Header>
106+
<HeaderRow>
107+
<HeaderCellSelect />
108+
<HeaderCellSort resize sortKey="TASK">
109+
Task
110+
</HeaderCellSort>
111+
<HeaderCellSort resize sortKey="DEADLINE">
112+
Deadline
113+
</HeaderCellSort>
114+
<HeaderCellSort resize sortKey="TYPE">
115+
Type
116+
</HeaderCellSort>
117+
<HeaderCellSort resize sortKey="COMPLETE">
118+
Complete
119+
</HeaderCellSort>
120+
<HeaderCellSort resize sortKey="TASKS">
121+
Tasks
122+
</HeaderCellSort>
123+
</HeaderRow>
124+
</Header>
125+
126+
<Body>
127+
{tableList.map((item) => (
128+
<Row key={item.id} item={item}>
129+
<CellSelect item={item} />
130+
<CellTree item={item}>{item.name}</CellTree>
131+
<Cell>
132+
{item.deadline.toLocaleDateString('en-US', {
133+
year: 'numeric',
134+
month: '2-digit',
135+
day: '2-digit',
136+
})}
137+
</Cell>
138+
<Cell>{item.type}</Cell>
139+
<Cell>{item.isComplete.toString()}</Cell>
140+
<Cell>{item.nodes?.length}</Cell>
141+
</Row>
142+
))}
143+
</Body>
144+
</>
145+
)}
146+
</Table>
147+
148+
<div
149+
style={{
150+
fontSize: '14px',
151+
padding: '12px',
152+
display: 'flex',
153+
justifyContent: 'space-between',
154+
alignItems: 'center',
155+
}}
156+
>
157+
<span>Total Pages: {pagination.state.getTotalPages(data.nodes)}</span>
158+
159+
<span>
160+
Page:{' '}
161+
{pagination.state.getPages(data.nodes).map((_, index) => (
162+
<button
163+
key={index}
164+
type="button"
165+
style={{
166+
fontWeight: pagination.state.page === index ? 'bold' : 'normal',
167+
}}
168+
onClick={() => pagination.fns.onSetPage(index)}
169+
>
170+
{index + 1}
171+
</button>
172+
))}
173+
</span>
174+
</div>
175+
</>
176+
);
177+
};
178+
179+
export default Component;

‎.storybook/stories/ClientVsServer/Client/index.story.jsx

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import {
2+
Table,
3+
Header,
4+
HeaderRow,
5+
Body,
6+
Row,
7+
HeaderCell,
8+
Cell,
9+
} from '@table-library/react-table-library/table';
10+
11+
import { createStories, createStory } from '../../create-story';
12+
13+
import BaseComponent from './base';
14+
import BaseCode from './base?raw';
15+
16+
createStories('Client vs Server', [createStory('Client-Side', BaseComponent, BaseCode)], Table, {
17+
Header,
18+
HeaderRow,
19+
Body,
20+
Row,
21+
HeaderCell,
22+
});

0 commit comments

Comments
 (0)