Skip to content

Commit

Permalink
feat: add storybook
Browse files Browse the repository at this point in the history
  • Loading branch information
K4ST0R committed Sep 7, 2024
1 parent f4f5ed7 commit 963cdf6
Show file tree
Hide file tree
Showing 27 changed files with 937 additions and 203 deletions.
3 changes: 2 additions & 1 deletion .storybook/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@ module.exports = {
"stories": [
"../stories/*.stories.mdx",
"../stories/*.stories.@(ts|tsx)",
"../stories/blocks/*.stories.@(ts|tsx)"
"../stories/blocks/*.stories.@(ts|tsx)",
"../stories/charts/*.stories.@(ts|tsx)"
],
"addons": [
"@storybook/addon-links",
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@
],
"homepage": "https://github.com/codegouvfr/react-dsfr",
"dependencies": {
"@gouvfr/dsfr-chart": "^1.0.0",
"tsafe": "^1.7.2",
"yargs-parser": "^21.1.1"
},
Expand All @@ -71,7 +72,6 @@
"@emotion/react": "^11.10.4",
"@emotion/styled": "^11.10.4",
"@gouvfr/dsfr": "1.12.1",
"@gouvfr/dsfr-chart": "^1.0.0",
"@mui/icons-material": "^5.14.18",
"@mui/material": "^5.14.18",
"@storybook/addon-a11y": "^6.5.16",
Expand Down
3 changes: 2 additions & 1 deletion src/Chart/BarChart.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
"use client";
import React from "react";
import { symToStr } from "tsafe/symToStr";
import "@gouvfr/dsfr-chart/BarChart/bar-chart.common";
Expand Down Expand Up @@ -33,7 +34,7 @@ export type BarChartBaseProps = {

export type BarChartProps = BarChartBaseProps & BaseChartProps;

/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/components-chart> */
/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/charts-barchart> */
export const BarChart = chartWrapper((props: BarChartBaseProps) => {
return <bar-chart {...stringifyObjectValue(props)} />;
}, "bar-chart");
Expand Down
11 changes: 6 additions & 5 deletions src/Chart/BarLineChart.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
"use client";
import React from "react";
import { symToStr } from "tsafe/symToStr";
import "@gouvfr/dsfr-chart/BarLineChart/bar-line-chart.common";
import "@gouvfr/dsfr-chart/BarLineChart/bar-line-chart.css";
import "@gouvfr/dsfr-chart/BarLineChart/barline-chart.common";
import "@gouvfr/dsfr-chart/BarLineChart/barline-chart.css";
import {
chartWrapper,
IntrinsicGraphType,
Expand All @@ -26,15 +27,15 @@ declare global {

export type BarLineChartBaseProps = {
ybar: number[];
name: [string, string];
name?: [string, string];
horizontal?: boolean;
stacked: boolean;
stacked?: boolean;
} & Omit<ChartProps, "name"> &
ChartLineProps;

export type BarLineChartProps = BarLineChartBaseProps & BaseChartProps;

/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/components-chart> */
/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/charts-barlinechart> */
export const BarLineChart = chartWrapper((props: BarLineChartBaseProps) => {
return <bar-line-chart {...stringifyObjectValue(props)} />;
}, "bar-line-chart");
Expand Down
3 changes: 2 additions & 1 deletion src/Chart/GaugeChart.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
"use client";
import React from "react";
import { symToStr } from "tsafe/symToStr";
import "@gouvfr/dsfr-chart/GaugeChart/gauge-chart.common";
Expand Down Expand Up @@ -27,7 +28,7 @@ export type GaugeChartBaseProps = {

export type GaugeChartProps = GaugeChartBaseProps & BaseChartProps;

/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/components-chart> */
/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/charts-gaugechart> */
export const GaugeChart = chartWrapper(
(props: GaugeChartBaseProps) => <gauge-chart {...stringifyObjectValue(props)} />,
"gauge-chart"
Expand Down
3 changes: 2 additions & 1 deletion src/Chart/LineChart.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
"use client";
import React from "react";
import { symToStr } from "tsafe/symToStr";
import "@gouvfr/dsfr-chart/LineChart/line-chart.common";
Expand Down Expand Up @@ -25,7 +26,7 @@ export type LineChartBaseProps = ChartProps & ChartLineProps;

export type LineChartProps = LineChartBaseProps & BaseChartProps;

/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/components-chart> */
/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/charts-linechart> */
export const LineChart = chartWrapper(
(props: LineChartBaseProps) => <line-chart {...stringifyObjectValue(props)} />,
"line-chart"
Expand Down
13 changes: 7 additions & 6 deletions src/Chart/MultiLineChart.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
"use client";
import React from "react";
import { symToStr } from "tsafe/symToStr";
import "@gouvfr/dsfr-chart/MultiLineChart/multi-line-chart.common";
import "@gouvfr/dsfr-chart/MultiLineChart/multi-line-chart.css";
import "@gouvfr/dsfr-chart/MultiLineChart/multiline-chart.common";
import "@gouvfr/dsfr-chart/MultiLineChart/multiline-chart.css";
import {
chartWrapper,
IntrinsicGraphType,
Expand All @@ -16,7 +17,7 @@ declare global {
namespace JSX {
interface IntrinsicElements {
// https://github.com/GouvernementFR/dsfr-chart/blob/v1.0.0/src/components/MultiLineChart.vue#L74
"multi-line-chart": IntrinsicGraphType & IntrinsicGraphLineType;
"multiline-chart": IntrinsicGraphType & IntrinsicGraphLineType;
}
}
}
Expand All @@ -25,10 +26,10 @@ export type MultiLineChartBaseProps = MultiChartProps & ChartLineProps;

export type MultiLineChartProps = MultiLineChartBaseProps & BaseChartProps;

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

Expand Down
3 changes: 2 additions & 1 deletion src/Chart/PieChart.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
"use client";
import React from "react";
import { symToStr } from "tsafe/symToStr";
import "@gouvfr/dsfr-chart/PieChart/pie-chart.common";
Expand Down Expand Up @@ -27,7 +28,7 @@ export type PieChartBaseProps = {

export type PieChartProps = PieChartBaseProps & BaseChartProps;

/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/components-chart> */
/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/charts-piechart> */
export const PieChart = chartWrapper(
(props: PieChartBaseProps) => <pie-chart {...stringifyObjectValue(props)} />,
"pie-chart"
Expand Down
3 changes: 2 additions & 1 deletion src/Chart/RadarChart.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
"use client";
import React from "react";
import { symToStr } from "tsafe/symToStr";
import "@gouvfr/dsfr-chart/RadarChart/radar-chart.common";
Expand All @@ -23,7 +24,7 @@ export type RadarChartBaseProps = MultiChartProps;

export type RadarChartProps = RadarChartBaseProps & BaseChartProps;

/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/components-chart> */
/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/charts-radarchart> */
export const RadarChart = chartWrapper(
(props: RadarChartBaseProps) => <radar-chart {...stringifyObjectValue(props)} />,
"radar-chart"
Expand Down
3 changes: 2 additions & 1 deletion src/Chart/ScatterChart.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
"use client";
import React from "react";
import { symToStr } from "tsafe/symToStr";
import "@gouvfr/dsfr-chart/ScatterChart/scatter-chart.common";
Expand Down Expand Up @@ -32,7 +33,7 @@ type ScatterChartBaseProps = {

export type ScatterChartProps = ScatterChartBaseProps & BaseChartProps;

/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/components-chart> */
/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/charts-radarchart> */
export const ScatterChart = chartWrapper(
(props: ScatterChartBaseProps) => <scatter-chart {...stringifyObjectValue(props)} />,
"scatter-chart"
Expand Down
25 changes: 0 additions & 25 deletions stories/Chart.stories.tsx

This file was deleted.

47 changes: 47 additions & 0 deletions stories/charts/BarChart.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import { BarChart, type BarChartProps } from "../../dist/Chart/BarChart";
import { getStoryFactory } from "../getStory";
import { sectionName } from "./sectionName";

const { meta, getStory } = getStoryFactory<BarChartProps>({
sectionName: sectionName,
"wrappedComponent": { BarChart },
"description": `
- [See DSFR documentation](https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants-beta/graphiques-charts/)
- [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/Chart/BarChart.tsx)`,
"argTypes": {
"x": {
"description": "Array of value for the x axis"
},
"y": {
"description": "Array of value for the y axis"
},
"name": { "description": "Array of name", control: "object" },
"color": { "description": "Array of color", control: "object" },
"horizontal": {
"control": { "type": "boolean" }
},
"stacked": {
"control": { "type": "boolean" }
},
"hline": { "description": "Array of horizontal lines to add", control: "object" },
"hlinename": { "description": "Name of the horizontal lines", control: "object" },
"vline": { "description": "Array of vertical lines to add", control: "object" },
"vlinename": { "description": "Name of the vertical lines", control: "object" },
"vlinecolor": { "description": "Color of the horizontal lines", control: "object" },
"hlinecolor": { "description": "Color of the vertical lines", control: "object" }
},
"disabledProps": ["lang"]
});

export default meta;

export const Default = getStory({
"x": [
["A", "B"],
["A", "B"]
],
"y": [
[100, 50],
[20, 10]
]
});
39 changes: 39 additions & 0 deletions stories/charts/BarLineChart.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import { BarLineChart, type BarLineChartProps } from "../../dist/Chart/BarLineChart";
import { getStoryFactory } from "../getStory";
import { sectionName } from "./sectionName";

const { meta, getStory } = getStoryFactory<BarLineChartProps>({
sectionName: sectionName,
"wrappedComponent": { BarLineChart },
"description": `
- [See DSFR documentation](https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants-beta/graphiques-charts/)
- [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/Chart/BarChart.tsx)`,
"argTypes": {
"x": {
"description": "Array of value for the x axis"
},
"y": {
"description": "Array of value for the y axis"
},
"ybar": {
"description": "Array of value for the x axis to create the bars"
},
"name": { "description": "Array of name", control: "object" },
"color": { "description": "Array of color", control: "object" },
"hline": { "description": "Array of horizontal lines to add", control: "object" },
"hlinename": { "description": "Name of the horizontal lines", control: "object" },
"vline": { "description": "Array of vertical lines to add", control: "object" },
"vlinename": { "description": "Name of the vertical lines", control: "object" },
"vlinecolor": { "description": "Color of the horizontal lines", control: "object" },
"hlinecolor": { "description": "Color of the vertical lines", control: "object" }
},
"disabledProps": ["lang"]
});

export default meta;

export const Default = getStory({
"x": [1, 2, 3],
"y": [30, 10, 20],
"ybar": [20, 15, 12]
});
35 changes: 35 additions & 0 deletions stories/charts/GaugeChart.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import { GaugeChart, type GaugeChartProps } from "../../dist/Chart/GaugeChart";
import { getStoryFactory } from "../getStory";
import { sectionName } from "./sectionName";

const { meta, getStory } = getStoryFactory<GaugeChartProps>({
sectionName: sectionName,
"wrappedComponent": { GaugeChart },
"description": `
- [See DSFR documentation](https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants-beta/graphiques-charts/)
- [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/Chart/BarChart.tsx)`,
"argTypes": {
"value": {
"description": "Current value"
},
"init": {
"description": "Base value"
},
"target": {
"description": "Target value"
},
"color": {
"description": "Color"
}
},
"disabledProps": ["lang"]
});

export default meta;

export const Default = getStory({
value: 16,
init: 10,
target: 20,
color: "blue-france"
});
35 changes: 35 additions & 0 deletions stories/charts/LineChart.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import { LineChart, type LineChartProps } from "../../dist/Chart/LineChart";
import { getStoryFactory } from "../getStory";
import { sectionName } from "./sectionName";

const { meta, getStory } = getStoryFactory<LineChartProps>({
sectionName: sectionName,
"wrappedComponent": { LineChart },
"description": `
- [See DSFR documentation](https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants-beta/graphiques-charts/)
- [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/Chart/BarChart.tsx)`,
"argTypes": {
"x": {
"description": "Array of value for the x axis"
},
"y": {
"description": "Array of value for the y axis"
},
"name": { "description": "Array of name", control: "object" },
"color": { "description": "Array of color", control: "object" },
"hline": { "description": "Array of horizontal lines to add", control: "object" },
"hlinename": { "description": "Name of the horizontal lines", control: "object" },
"vline": { "description": "Array of vertical lines to add", control: "object" },
"vlinename": { "description": "Name of the vertical lines", control: "object" },
"vlinecolor": { "description": "Color of the horizontal lines", control: "object" },
"hlinecolor": { "description": "Color of the vertical lines", control: "object" }
},
"disabledProps": ["lang"]
});

export default meta;

export const Default = getStory({
x: [1, 2, 3],
y: [10, 20, 30]
});
Loading

0 comments on commit 963cdf6

Please sign in to comment.