Skip to content

Commit 963cdf6

Browse files
K4ST0RK4ST0R
committed
feat: add storybook
1 parent f4f5ed7 commit 963cdf6

27 files changed

+937
-203
lines changed

‎.storybook/main.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ module.exports = {
22
"stories": [
33
"../stories/*.stories.mdx",
44
"../stories/*.stories.@(ts|tsx)",
5-
"../stories/blocks/*.stories.@(ts|tsx)"
5+
"../stories/blocks/*.stories.@(ts|tsx)",
6+
"../stories/charts/*.stories.@(ts|tsx)"
67
],
78
"addons": [
89
"@storybook/addon-links",

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@
6363
],
6464
"homepage": "https://github.com/codegouvfr/react-dsfr",
6565
"dependencies": {
66+
"@gouvfr/dsfr-chart": "^1.0.0",
6667
"tsafe": "^1.7.2",
6768
"yargs-parser": "^21.1.1"
6869
},
@@ -71,7 +72,6 @@
7172
"@emotion/react": "^11.10.4",
7273
"@emotion/styled": "^11.10.4",
7374
"@gouvfr/dsfr": "1.12.1",
74-
"@gouvfr/dsfr-chart": "^1.0.0",
7575
"@mui/icons-material": "^5.14.18",
7676
"@mui/material": "^5.14.18",
7777
"@storybook/addon-a11y": "^6.5.16",

‎src/Chart/BarChart.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
"use client";
12
import React from "react";
23
import { symToStr } from "tsafe/symToStr";
34
import "@gouvfr/dsfr-chart/BarChart/bar-chart.common";
@@ -33,7 +34,7 @@ export type BarChartBaseProps = {
3334

3435
export type BarChartProps = BarChartBaseProps & BaseChartProps;
3536

36-
/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/components-chart> */
37+
/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/charts-barchart> */
3738
export const BarChart = chartWrapper((props: BarChartBaseProps) => {
3839
return <bar-chart {...stringifyObjectValue(props)} />;
3940
}, "bar-chart");

‎src/Chart/BarLineChart.tsx

+6-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1+
"use client";
12
import React from "react";
23
import { symToStr } from "tsafe/symToStr";
3-
import "@gouvfr/dsfr-chart/BarLineChart/bar-line-chart.common";
4-
import "@gouvfr/dsfr-chart/BarLineChart/bar-line-chart.css";
4+
import "@gouvfr/dsfr-chart/BarLineChart/barline-chart.common";
5+
import "@gouvfr/dsfr-chart/BarLineChart/barline-chart.css";
56
import {
67
chartWrapper,
78
IntrinsicGraphType,
@@ -26,15 +27,15 @@ declare global {
2627

2728
export type BarLineChartBaseProps = {
2829
ybar: number[];
29-
name: [string, string];
30+
name?: [string, string];
3031
horizontal?: boolean;
31-
stacked: boolean;
32+
stacked?: boolean;
3233
} & Omit<ChartProps, "name"> &
3334
ChartLineProps;
3435

3536
export type BarLineChartProps = BarLineChartBaseProps & BaseChartProps;
3637

37-
/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/components-chart> */
38+
/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/charts-barlinechart> */
3839
export const BarLineChart = chartWrapper((props: BarLineChartBaseProps) => {
3940
return <bar-line-chart {...stringifyObjectValue(props)} />;
4041
}, "bar-line-chart");

‎src/Chart/GaugeChart.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
"use client";
12
import React from "react";
23
import { symToStr } from "tsafe/symToStr";
34
import "@gouvfr/dsfr-chart/GaugeChart/gauge-chart.common";
@@ -27,7 +28,7 @@ export type GaugeChartBaseProps = {
2728

2829
export type GaugeChartProps = GaugeChartBaseProps & BaseChartProps;
2930

30-
/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/components-chart> */
31+
/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/charts-gaugechart> */
3132
export const GaugeChart = chartWrapper(
3233
(props: GaugeChartBaseProps) => <gauge-chart {...stringifyObjectValue(props)} />,
3334
"gauge-chart"

‎src/Chart/LineChart.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
"use client";
12
import React from "react";
23
import { symToStr } from "tsafe/symToStr";
34
import "@gouvfr/dsfr-chart/LineChart/line-chart.common";
@@ -25,7 +26,7 @@ export type LineChartBaseProps = ChartProps & ChartLineProps;
2526

2627
export type LineChartProps = LineChartBaseProps & BaseChartProps;
2728

28-
/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/components-chart> */
29+
/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/charts-linechart> */
2930
export const LineChart = chartWrapper(
3031
(props: LineChartBaseProps) => <line-chart {...stringifyObjectValue(props)} />,
3132
"line-chart"

‎src/Chart/MultiLineChart.tsx

+7-6
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1+
"use client";
12
import React from "react";
23
import { symToStr } from "tsafe/symToStr";
3-
import "@gouvfr/dsfr-chart/MultiLineChart/multi-line-chart.common";
4-
import "@gouvfr/dsfr-chart/MultiLineChart/multi-line-chart.css";
4+
import "@gouvfr/dsfr-chart/MultiLineChart/multiline-chart.common";
5+
import "@gouvfr/dsfr-chart/MultiLineChart/multiline-chart.css";
56
import {
67
chartWrapper,
78
IntrinsicGraphType,
@@ -16,7 +17,7 @@ declare global {
1617
namespace JSX {
1718
interface IntrinsicElements {
1819
// https://github.com/GouvernementFR/dsfr-chart/blob/v1.0.0/src/components/MultiLineChart.vue#L74
19-
"multi-line-chart": IntrinsicGraphType & IntrinsicGraphLineType;
20+
"multiline-chart": IntrinsicGraphType & IntrinsicGraphLineType;
2021
}
2122
}
2223
}
@@ -25,10 +26,10 @@ export type MultiLineChartBaseProps = MultiChartProps & ChartLineProps;
2526

2627
export type MultiLineChartProps = MultiLineChartBaseProps & BaseChartProps;
2728

28-
/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/components-chart> */
29+
/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/charts-multilinechart> */
2930
export const MultiLineChart = chartWrapper(
30-
(props: MultiLineChartBaseProps) => <multi-line-chart {...stringifyObjectValue(props)} />,
31-
"multi-line-chart"
31+
(props: MultiLineChartBaseProps) => <multiline-chart {...stringifyObjectValue(props)} />,
32+
"multiline-chart"
3233
);
3334
MultiLineChart.displayName = symToStr({ MultiLineChart });
3435

‎src/Chart/PieChart.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
"use client";
12
import React from "react";
23
import { symToStr } from "tsafe/symToStr";
34
import "@gouvfr/dsfr-chart/PieChart/pie-chart.common";
@@ -27,7 +28,7 @@ export type PieChartBaseProps = {
2728

2829
export type PieChartProps = PieChartBaseProps & BaseChartProps;
2930

30-
/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/components-chart> */
31+
/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/charts-piechart> */
3132
export const PieChart = chartWrapper(
3233
(props: PieChartBaseProps) => <pie-chart {...stringifyObjectValue(props)} />,
3334
"pie-chart"

‎src/Chart/RadarChart.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
"use client";
12
import React from "react";
23
import { symToStr } from "tsafe/symToStr";
34
import "@gouvfr/dsfr-chart/RadarChart/radar-chart.common";
@@ -23,7 +24,7 @@ export type RadarChartBaseProps = MultiChartProps;
2324

2425
export type RadarChartProps = RadarChartBaseProps & BaseChartProps;
2526

26-
/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/components-chart> */
27+
/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/charts-radarchart> */
2728
export const RadarChart = chartWrapper(
2829
(props: RadarChartBaseProps) => <radar-chart {...stringifyObjectValue(props)} />,
2930
"radar-chart"

‎src/Chart/ScatterChart.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
"use client";
12
import React from "react";
23
import { symToStr } from "tsafe/symToStr";
34
import "@gouvfr/dsfr-chart/ScatterChart/scatter-chart.common";
@@ -32,7 +33,7 @@ type ScatterChartBaseProps = {
3233

3334
export type ScatterChartProps = ScatterChartBaseProps & BaseChartProps;
3435

35-
/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/components-chart> */
36+
/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/charts-radarchart> */
3637
export const ScatterChart = chartWrapper(
3738
(props: ScatterChartBaseProps) => <scatter-chart {...stringifyObjectValue(props)} />,
3839
"scatter-chart"

‎stories/Chart.stories.tsx

-25
This file was deleted.

‎stories/charts/BarChart.stories.tsx

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { BarChart, type BarChartProps } from "../../dist/Chart/BarChart";
2+
import { getStoryFactory } from "../getStory";
3+
import { sectionName } from "./sectionName";
4+
5+
const { meta, getStory } = getStoryFactory<BarChartProps>({
6+
sectionName: sectionName,
7+
"wrappedComponent": { BarChart },
8+
"description": `
9+
- [See DSFR documentation](https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants-beta/graphiques-charts/)
10+
- [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/Chart/BarChart.tsx)`,
11+
"argTypes": {
12+
"x": {
13+
"description": "Array of value for the x axis"
14+
},
15+
"y": {
16+
"description": "Array of value for the y axis"
17+
},
18+
"name": { "description": "Array of name", control: "object" },
19+
"color": { "description": "Array of color", control: "object" },
20+
"horizontal": {
21+
"control": { "type": "boolean" }
22+
},
23+
"stacked": {
24+
"control": { "type": "boolean" }
25+
},
26+
"hline": { "description": "Array of horizontal lines to add", control: "object" },
27+
"hlinename": { "description": "Name of the horizontal lines", control: "object" },
28+
"vline": { "description": "Array of vertical lines to add", control: "object" },
29+
"vlinename": { "description": "Name of the vertical lines", control: "object" },
30+
"vlinecolor": { "description": "Color of the horizontal lines", control: "object" },
31+
"hlinecolor": { "description": "Color of the vertical lines", control: "object" }
32+
},
33+
"disabledProps": ["lang"]
34+
});
35+
36+
export default meta;
37+
38+
export const Default = getStory({
39+
"x": [
40+
["A", "B"],
41+
["A", "B"]
42+
],
43+
"y": [
44+
[100, 50],
45+
[20, 10]
46+
]
47+
});

‎stories/charts/BarLineChart.stories.tsx

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { BarLineChart, type BarLineChartProps } from "../../dist/Chart/BarLineChart";
2+
import { getStoryFactory } from "../getStory";
3+
import { sectionName } from "./sectionName";
4+
5+
const { meta, getStory } = getStoryFactory<BarLineChartProps>({
6+
sectionName: sectionName,
7+
"wrappedComponent": { BarLineChart },
8+
"description": `
9+
- [See DSFR documentation](https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants-beta/graphiques-charts/)
10+
- [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/Chart/BarChart.tsx)`,
11+
"argTypes": {
12+
"x": {
13+
"description": "Array of value for the x axis"
14+
},
15+
"y": {
16+
"description": "Array of value for the y axis"
17+
},
18+
"ybar": {
19+
"description": "Array of value for the x axis to create the bars"
20+
},
21+
"name": { "description": "Array of name", control: "object" },
22+
"color": { "description": "Array of color", control: "object" },
23+
"hline": { "description": "Array of horizontal lines to add", control: "object" },
24+
"hlinename": { "description": "Name of the horizontal lines", control: "object" },
25+
"vline": { "description": "Array of vertical lines to add", control: "object" },
26+
"vlinename": { "description": "Name of the vertical lines", control: "object" },
27+
"vlinecolor": { "description": "Color of the horizontal lines", control: "object" },
28+
"hlinecolor": { "description": "Color of the vertical lines", control: "object" }
29+
},
30+
"disabledProps": ["lang"]
31+
});
32+
33+
export default meta;
34+
35+
export const Default = getStory({
36+
"x": [1, 2, 3],
37+
"y": [30, 10, 20],
38+
"ybar": [20, 15, 12]
39+
});

‎stories/charts/GaugeChart.stories.tsx

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { GaugeChart, type GaugeChartProps } from "../../dist/Chart/GaugeChart";
2+
import { getStoryFactory } from "../getStory";
3+
import { sectionName } from "./sectionName";
4+
5+
const { meta, getStory } = getStoryFactory<GaugeChartProps>({
6+
sectionName: sectionName,
7+
"wrappedComponent": { GaugeChart },
8+
"description": `
9+
- [See DSFR documentation](https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants-beta/graphiques-charts/)
10+
- [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/Chart/BarChart.tsx)`,
11+
"argTypes": {
12+
"value": {
13+
"description": "Current value"
14+
},
15+
"init": {
16+
"description": "Base value"
17+
},
18+
"target": {
19+
"description": "Target value"
20+
},
21+
"color": {
22+
"description": "Color"
23+
}
24+
},
25+
"disabledProps": ["lang"]
26+
});
27+
28+
export default meta;
29+
30+
export const Default = getStory({
31+
value: 16,
32+
init: 10,
33+
target: 20,
34+
color: "blue-france"
35+
});

‎stories/charts/LineChart.stories.tsx

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { LineChart, type LineChartProps } from "../../dist/Chart/LineChart";
2+
import { getStoryFactory } from "../getStory";
3+
import { sectionName } from "./sectionName";
4+
5+
const { meta, getStory } = getStoryFactory<LineChartProps>({
6+
sectionName: sectionName,
7+
"wrappedComponent": { LineChart },
8+
"description": `
9+
- [See DSFR documentation](https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants-beta/graphiques-charts/)
10+
- [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/Chart/BarChart.tsx)`,
11+
"argTypes": {
12+
"x": {
13+
"description": "Array of value for the x axis"
14+
},
15+
"y": {
16+
"description": "Array of value for the y axis"
17+
},
18+
"name": { "description": "Array of name", control: "object" },
19+
"color": { "description": "Array of color", control: "object" },
20+
"hline": { "description": "Array of horizontal lines to add", control: "object" },
21+
"hlinename": { "description": "Name of the horizontal lines", control: "object" },
22+
"vline": { "description": "Array of vertical lines to add", control: "object" },
23+
"vlinename": { "description": "Name of the vertical lines", control: "object" },
24+
"vlinecolor": { "description": "Color of the horizontal lines", control: "object" },
25+
"hlinecolor": { "description": "Color of the vertical lines", control: "object" }
26+
},
27+
"disabledProps": ["lang"]
28+
});
29+
30+
export default meta;
31+
32+
export const Default = getStory({
33+
x: [1, 2, 3],
34+
y: [10, 20, 30]
35+
});

0 commit comments

Comments
 (0)