#300: Make dsfr-chart an optional dev depencency

codegouvfr · Sep 9, 2024 · 0c93902 · totakoko · Sep 9, 2024 · garronej
1 parent bc2c2be
commit 0c93902
Show file tree

Hide file tree

Showing 12 changed files with 82 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -63,11 +63,19 @@
     ],
     "homepage": "https://github.com/codegouvfr/react-dsfr",
     "dependencies": {
-        "@gouvfr/dsfr-chart": "^1.0.0",
         "tsafe": "^1.7.2",
         "yargs-parser": "^21.1.1"
     },
+    "peerDependencies": {
+        "@gouvfr/dsfr-chart": "^1.0.0"
+    },
+    "peerDependenciesMeta": {
+        "@gouvfr/dsfr-chart": {
+            "optional": true
+        }
+    },
     "devDependencies": {
+        "@gouvfr/dsfr-chart": "^1.0.0",
         "@babel/core": "^7.20.2",
         "@emotion/react": "^11.10.4",
         "@emotion/styled": "^11.10.4",

diff --git a/src/Chart/BarChart.tsx b/src/Chart/BarChart.tsx
@@ -41,3 +41,5 @@ export const BarChart = chartWrapper((props: BarChartBaseProps) => {
 BarChart.displayName = symToStr({ BarChart });
 
 export default BarChart;
+
+// Just so that the icon is included: "fr-icon-arrow-go-back-fill"
diff --git a/src/bin/only-include-used-icons.ts b/src/bin/only-include-used-icons.ts
@@ -336,6 +336,12 @@ async function getCommandContext(args: string[]): Promise<CommandContext> {
                             return false;
                         }
 
+                        console.log(relativeDirPath);
+
+                        if (parsedPackageJson["name"] === "@gouvfr/dsfr-chart") {
+                            return false;
+                        }
+
                         for (const packageName of [
                             CODEGOUV_REACT_DSFR,
                             "@gouvfr/dsfr",

diff --git a/stories/charts/BarChart.stories.tsx b/stories/charts/BarChart.stories.tsx
@@ -7,7 +7,14 @@ const { meta, getStory } = getStoryFactory<BarChartProps>({
     "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)`,
+- [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/Chart/BarChart.tsx)  
+
+To use this component you need to add \`@gouvfr/dsfr-chart\` to your dependencies.  
+
+Note for Next users: Chart components are not SSR compatible. You need to import them dynamically with [\`next/dynamic\`](https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#nextdynamic).  
+You can find an example [here](https://github.com/codegouvfr/react-dsfr/blob/bc2c2be290b09684711c53176b7a379cebed08a8/test/integration/next-appdir/app/dsfr-chart/page.tsx#L8-L9).  
+
+`,
     "argTypes": {
         "x": {
             "description": "Array of value for the x axis"

diff --git a/stories/charts/BarLineChart.stories.tsx b/stories/charts/BarLineChart.stories.tsx
@@ -7,7 +7,14 @@ const { meta, getStory } = getStoryFactory<BarLineChartProps>({
     "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)`,
+- [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/Chart/BarChart.tsx)
+
+To use this component you need to add \`@gouvfr/dsfr-chart\` to your dependencies.  
+
+Note for Next users: Chart components are not SSR compatible. You need to import them dynamically with [\`next/dynamic\`](https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#nextdynamic).  
+You can find an example [here](https://github.com/codegouvfr/react-dsfr/blob/bc2c2be290b09684711c53176b7a379cebed08a8/test/integration/next-appdir/app/dsfr-chart/page.tsx#L8-L9).  
+
+`,
     "argTypes": {
         "x": {
             "description": "Array of value for the x axis"

diff --git a/stories/charts/GaugeChart.stories.tsx b/stories/charts/GaugeChart.stories.tsx
@@ -7,7 +7,14 @@ const { meta, getStory } = getStoryFactory<GaugeChartProps>({
     "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)`,
+- [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/Chart/BarChart.tsx)
+
+To use this component you need to add \`@gouvfr/dsfr-chart\` to your dependencies.  
+
+Note for Next users: Chart components are not SSR compatible. You need to import them dynamically with [\`next/dynamic\`](https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#nextdynamic).  
+You can find an example [here](https://github.com/codegouvfr/react-dsfr/blob/bc2c2be290b09684711c53176b7a379cebed08a8/test/integration/next-appdir/app/dsfr-chart/page.tsx#L8-L9).  
+
+`,
     "argTypes": {
         "value": {
             "description": "Current value"

diff --git a/stories/charts/LineChart.stories.tsx b/stories/charts/LineChart.stories.tsx
@@ -7,7 +7,14 @@ const { meta, getStory } = getStoryFactory<LineChartProps>({
     "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)`,
+- [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/Chart/BarChart.tsx)
+
+To use this component you need to add \`@gouvfr/dsfr-chart\` to your dependencies.  
+
+Note for Next users: Chart components are not SSR compatible. You need to import them dynamically with [\`next/dynamic\`](https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#nextdynamic).  
+You can find an example [here](https://github.com/codegouvfr/react-dsfr/blob/bc2c2be290b09684711c53176b7a379cebed08a8/test/integration/next-appdir/app/dsfr-chart/page.tsx#L8-L9).  
+
+`,
     "argTypes": {
         "x": {
             "description": "Array of value for the x axis"

diff --git a/stories/charts/MultiLineChart.stories.tsx b/stories/charts/MultiLineChart.stories.tsx
@@ -7,7 +7,14 @@ const { meta, getStory } = getStoryFactory<MultiLineChartProps>({
     "wrappedComponent": { MultiLineChart },
     "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)`,
+- [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/Chart/BarChart.tsx)
+
+To use this component you need to add \`@gouvfr/dsfr-chart\` to your dependencies.  
+
+Note for Next users: Chart components are not SSR compatible. You need to import them dynamically with [\`next/dynamic\`](https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#nextdynamic).  
+You can find an example [here](https://github.com/codegouvfr/react-dsfr/blob/bc2c2be290b09684711c53176b7a379cebed08a8/test/integration/next-appdir/app/dsfr-chart/page.tsx#L8-L9).  
+
+`,
     "argTypes": {
         "x": {
             "description": "Array of value for the x axis"

diff --git a/stories/charts/PieChart.stories.tsx b/stories/charts/PieChart.stories.tsx
@@ -7,7 +7,14 @@ const { meta, getStory } = getStoryFactory<PieChartProps>({
     "wrappedComponent": { PieChart },
     "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)`,
+- [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/Chart/BarChart.tsx)
+
+To use this component you need to add \`@gouvfr/dsfr-chart\` to your dependencies.  
+
+Note for Next users: Chart components are not SSR compatible. You need to import them dynamically with [\`next/dynamic\`](https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#nextdynamic).  
+You can find an example [here](https://github.com/codegouvfr/react-dsfr/blob/bc2c2be290b09684711c53176b7a379cebed08a8/test/integration/next-appdir/app/dsfr-chart/page.tsx#L8-L9).  
+
+`,
     "argTypes": {
         "x": {
             "description": "Array of value for the x axis"

diff --git a/stories/charts/RadarChart.stories.tsx b/stories/charts/RadarChart.stories.tsx
@@ -7,7 +7,14 @@ const { meta, getStory } = getStoryFactory<RadarChartProps>({
     "wrappedComponent": { RadarChart },
     "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)`,
+- [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/Chart/BarChart.tsx)
+
+To use this component you need to add \`@gouvfr/dsfr-chart\` to your dependencies.  
+
+Note for Next users: Chart components are not SSR compatible. You need to import them dynamically with [\`next/dynamic\`](https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#nextdynamic).  
+You can find an example [here](https://github.com/codegouvfr/react-dsfr/blob/bc2c2be290b09684711c53176b7a379cebed08a8/test/integration/next-appdir/app/dsfr-chart/page.tsx#L8-L9).  
+
+`,
     "argTypes": {
         "x": {
             "description": "Array of value for the x axis"

diff --git a/stories/charts/ScatterChart.stories.tsx b/stories/charts/ScatterChart.stories.tsx
@@ -7,7 +7,14 @@ const { meta, getStory } = getStoryFactory<ScatterChartProps>({
     "wrappedComponent": { ScatterChart },
     "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)`,
+- [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/Chart/BarChart.tsx)
+
+To use this component you need to add \`@gouvfr/dsfr-chart\` to your dependencies.  
+
+Note for Next users: Chart components are not SSR compatible. You need to import them dynamically with [\`next/dynamic\`](https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#nextdynamic).  
+You can find an example [here](https://github.com/codegouvfr/react-dsfr/blob/bc2c2be290b09684711c53176b7a379cebed08a8/test/integration/next-appdir/app/dsfr-chart/page.tsx#L8-L9).  
+
+`,
     "argTypes": {
         "x": {
             "description": "Array of value for the x axis"

diff --git a/test/integration/next-appdir/package.json b/test/integration/next-appdir/package.json
@@ -25,6 +25,7 @@
         "@mui/x-date-pickers": "^6.18.2",
         "dayjs": "^1.11.7",
         "@mui/x-data-grid": "^6.18.2",
+        "@gouvfr/dsfr-chart": "^1.0.0",
         "@codegouvfr/react-dsfr": "file:../../../dist"
     },
     "devDependencies": {
Original file line number	Diff line number	Diff line change
Expand Up		@@ -41,3 +41,5 @@ export const BarChart = chartWrapper((props: BarChartBaseProps) => {
		BarChart.displayName = symToStr({ BarChart });

		export default BarChart;

		// Just so that the icon is included: "fr-icon-arrow-go-back-fill"