feat: add storybook

Author: K4ST0R

.storybook/main.js

@@ -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",

package.json

@@ -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"
     },
@@ -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",

src/Chart/BarChart.tsx

@@ -1,3 +1,4 @@
+"use client";
 import React from "react";
 import { symToStr } from "tsafe/symToStr";
 import "@gouvfr/dsfr-chart/BarChart/bar-chart.common";
@@ -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");

src/Chart/BarLineChart.tsx

@@ -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,
@@ -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");

src/Chart/GaugeChart.tsx

@@ -1,3 +1,4 @@
+"use client";
 import React from "react";
 import { symToStr } from "tsafe/symToStr";
 import "@gouvfr/dsfr-chart/GaugeChart/gauge-chart.common";
@@ -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"

src/Chart/LineChart.tsx

@@ -1,3 +1,4 @@
+"use client";
 import React from "react";
 import { symToStr } from "tsafe/symToStr";
 import "@gouvfr/dsfr-chart/LineChart/line-chart.common";
@@ -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"

src/Chart/MultiLineChart.tsx

@@ -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,
@@ -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;
         }
     }
 }
@@ -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 });
 

src/Chart/PieChart.tsx

@@ -1,3 +1,4 @@
+"use client";
 import React from "react";
 import { symToStr } from "tsafe/symToStr";
 import "@gouvfr/dsfr-chart/PieChart/pie-chart.common";
@@ -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"

src/Chart/RadarChart.tsx

@@ -1,3 +1,4 @@
+"use client";
 import React from "react";
 import { symToStr } from "tsafe/symToStr";
 import "@gouvfr/dsfr-chart/RadarChart/radar-chart.common";
@@ -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"

src/Chart/ScatterChart.tsx

@@ -1,3 +1,4 @@
+"use client";
 import React from "react";
 import { symToStr } from "tsafe/symToStr";
 import "@gouvfr/dsfr-chart/ScatterChart/scatter-chart.common";
@@ -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"