Skip to content

Commit de50134

Browse files
dangreendangreen
authored
refactor: add storybook (#769)
* refactor: add storybook * fix: events types * chore: components stories * fix: exports
1 parent 9c25a7b commit de50134

26 files changed

+8069
-165
lines changed

‎.lintstagedrc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
{
22
"src/**/*.{ts,tsx}": ["eslint", "prettier --write"],
3+
"stories/**/*.{ts,tsx}": ["eslint", "prettier --write"],
34
"test/**/*.{ts,tsx}": ["eslint", "prettier --write"]
45
}

‎.storybook/main.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
module.exports = {
2+
stories: [
3+
'../stories/*.tsx'
4+
],
5+
addons: [
6+
'@storybook/addon-docs',
7+
'@storybook/addon-controls',
8+
'@storybook/addon-actions',
9+
],
10+
}

‎.storybook/manager.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { addons } from '@storybook/addons';
2+
3+
import { theme } from './theme'
4+
5+
addons.setConfig({
6+
theme,
7+
panelPosition: 'right',
8+
})

‎.storybook/preview.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { configureActions } from '@storybook/addon-actions'
2+
3+
configureActions({
4+
depth: 5,
5+
})

‎.storybook/theme.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { create } from '@storybook/theming';
2+
3+
export const theme = create({
4+
base: 'light',
5+
brandTitle: 'react-chartjs-2',
6+
brandUrl: 'https://github.com/reactchartjs/react-chartjs-2',
7+
});

‎package.json

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,8 @@
2626
"emitDeclarations": "tsc --skipLibCheck --emitDeclarationOnly",
2727
"build": "rollup -c & yarn emitDeclarations",
2828
"prepublishOnly": "yarn build",
29-
"test:lint": "eslint 'src/**/*.{ts,tsx}' 'test/**/*.{ts,tsx}'",
29+
"start:storybook": "start-storybook -p 6006 --ci",
30+
"test:lint": "eslint 'src/**/*.{ts,tsx}' 'stories/**/*.{ts,tsx}' 'test/**/*.{ts,tsx}'",
3031
"test:unit": "jest -c jest.config.json",
3132
"test:build": "yarn build",
3233
"test:size": "size-limit",
@@ -44,13 +45,20 @@
4445
"react": "^16.8.0 || ^17.0.0"
4546
},
4647
"devDependencies": {
48+
"@babel/core": "^7.15.8",
4749
"@rollup/plugin-node-resolve": "^13.0.5",
4850
"@size-limit/preset-big-lib": "^6.0.3",
51+
"@storybook/addon-actions": "^6.3.12",
52+
"@storybook/addon-controls": "^6.3.12",
53+
"@storybook/addon-docs": "^6.3.12",
54+
"@storybook/addons": "^6.3.12",
55+
"@storybook/react": "^6.3.12",
4956
"@swc/core": "^1.2.95",
5057
"@swc/helpers": "^0.2.13",
5158
"@swc/jest": "^0.2.4",
5259
"@testing-library/jest-dom": "^5.5.0",
5360
"@testing-library/react": "^12.1.2",
61+
"@types/faker": "^5.5.8",
5462
"@types/jest": "^27.0.2",
5563
"@types/lodash": "^4.14.150",
5664
"@types/react": "^17.0.28",
@@ -68,6 +76,7 @@
6876
"eslint-plugin-prettier": "^4.0.0",
6977
"eslint-plugin-promise": "^5.1.0",
7078
"eslint-plugin-react": "^7.17.0",
79+
"faker": "^5.5.3",
7180
"gh-pages": "^3.2.3",
7281
"jest": "^27.2.5",
7382
"jest-canvas-mock": "^2.2.0",
@@ -80,7 +89,8 @@
8089
"rollup-plugin-swc": "^0.2.0",
8190
"simple-git-hooks": "^2.6.1",
8291
"size-limit": "^6.0.3",
83-
"typescript": "^4.4.3"
92+
"typescript": "^4.4.3",
93+
"webpack": "^5.58.2"
8494
},
8595
"files": [
8696
"dist"

‎src/index.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { forwardRef } from 'react';
2-
import Chart, { defaults } from 'chart.js/auto';
2+
import Chart from 'chart.js/auto';
3+
import { defaults } from 'chart.js';
34

45
import { Props } from './types';
56
import ChartComponent from './chart';

‎src/types.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,15 +19,15 @@ export interface Props extends CanvasHTMLAttributes<HTMLCanvasElement> {
1919
fallbackContent?: ReactNode;
2020
plugins?: Plugin[];
2121
getDatasetAtEvent?: (
22-
dataset: Array<{}>,
22+
dataset: InteractionItem[],
2323
event: MouseEvent<HTMLCanvasElement>
2424
) => void;
2525
getElementAtEvent?: (
2626
element: InteractionItem[],
2727
event: MouseEvent<HTMLCanvasElement>
2828
) => void;
2929
getElementsAtEvent?: (
30-
elements: Array<{}>,
30+
elements: InteractionItem[],
3131
event: MouseEvent<HTMLCanvasElement>
3232
) => void;
3333
}

‎stories/Bar.data.ts

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
import {
2+
months,
3+
colorRed,
4+
colorRed05,
5+
colorGreen,
6+
colorBlue,
7+
colorBlue05,
8+
numbers,
9+
} from './data';
10+
11+
export const verticalOptions = {
12+
responsive: true,
13+
plugins: {
14+
legend: {
15+
position: 'top',
16+
},
17+
title: {
18+
display: true,
19+
text: 'Chart.js Bar Chart',
20+
},
21+
},
22+
};
23+
24+
export const verticalData = {
25+
labels: months,
26+
datasets: [
27+
{
28+
label: 'Dataset 1',
29+
data: numbers(),
30+
borderColor: colorRed,
31+
backgroundColor: colorRed05,
32+
},
33+
{
34+
label: 'Dataset 2',
35+
data: numbers(),
36+
borderColor: colorBlue,
37+
backgroundColor: colorBlue05,
38+
},
39+
],
40+
};
41+
42+
export const horizontalOptions = {
43+
indexAxis: 'y',
44+
// Elements options apply to all of the options unless overridden in a dataset
45+
// In this case, we are setting the border of each horizontal bar to be 2px wide
46+
elements: {
47+
bar: {
48+
borderWidth: 2,
49+
},
50+
},
51+
responsive: true,
52+
plugins: {
53+
legend: {
54+
position: 'right',
55+
},
56+
title: {
57+
display: true,
58+
text: 'Chart.js Horizontal Bar Chart',
59+
},
60+
},
61+
};
62+
63+
export const horizontalData = verticalData;
64+
65+
export const stackedOptions = {
66+
plugins: {
67+
title: {
68+
display: true,
69+
text: 'Chart.js Bar Chart - Stacked',
70+
},
71+
},
72+
responsive: true,
73+
scales: {
74+
x: {
75+
stacked: true,
76+
},
77+
y: {
78+
stacked: true,
79+
},
80+
},
81+
};
82+
83+
export const stackedData = {
84+
labels: months,
85+
datasets: [
86+
{
87+
label: 'Dataset 1',
88+
data: numbers(),
89+
backgroundColor: colorRed,
90+
},
91+
{
92+
label: 'Dataset 2',
93+
data: numbers(),
94+
backgroundColor: colorBlue,
95+
},
96+
{
97+
label: 'Dataset 3',
98+
data: numbers(),
99+
backgroundColor: colorGreen,
100+
},
101+
],
102+
};
103+
104+
export const groupedOptions = {
105+
plugins: {
106+
title: {
107+
display: true,
108+
text: 'Chart.js Bar Chart - Stacked',
109+
},
110+
},
111+
responsive: true,
112+
interaction: {
113+
intersect: false,
114+
},
115+
scales: {
116+
x: {
117+
stacked: true,
118+
},
119+
y: {
120+
stacked: true,
121+
},
122+
},
123+
};
124+
125+
export const groupedData = {
126+
labels: months,
127+
datasets: [
128+
{
129+
label: 'Dataset 1',
130+
data: numbers(),
131+
backgroundColor: colorRed,
132+
stack: 'Stack 0',
133+
},
134+
{
135+
label: 'Dataset 2',
136+
data: numbers(),
137+
backgroundColor: colorBlue,
138+
stack: 'Stack 0',
139+
},
140+
{
141+
label: 'Dataset 3',
142+
data: numbers(),
143+
backgroundColor: colorGreen,
144+
stack: 'Stack 1',
145+
},
146+
],
147+
};

‎stories/Bar.tsx

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import React from 'react';
2+
import { Bar } from '../src';
3+
import * as data from './Bar.data';
4+
5+
export default {
6+
title: 'Components/Bar',
7+
component: Bar,
8+
parameters: {
9+
layout: 'centered',
10+
},
11+
args: {
12+
width: 500,
13+
height: 400,
14+
},
15+
};
16+
17+
export const Vertical = args => <Bar {...args} />;
18+
19+
Vertical.args = {
20+
data: data.verticalData,
21+
options: data.verticalOptions,
22+
};
23+
24+
export const Horizontal = args => <Bar {...args} />;
25+
26+
Horizontal.args = {
27+
data: data.horizontalData,
28+
options: data.horizontalOptions,
29+
};
30+
31+
export const Stacked = args => <Bar {...args} />;
32+
33+
Stacked.args = {
34+
data: data.stackedData,
35+
options: data.stackedOptions,
36+
};
37+
38+
export const Grouped = args => <Bar {...args} />;
39+
40+
Grouped.args = {
41+
data: data.groupedData,
42+
options: data.groupedOptions,
43+
};

0 commit comments

Comments
 (0)