diff --git a/package.json b/package.json index 176a1597c..0ad1e2ef5 100644 --- 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 index 6c16a02a2..1cbc61a6f 100644 --- 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 index a5cb94351..f5c6f552f 100644 --- 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 { 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 index aa6a2d6e2..d07857135 100644 --- a/stories/charts/BarChart.stories.tsx +++ b/stories/charts/BarChart.stories.tsx @@ -7,7 +7,14 @@ const { meta, getStory } = getStoryFactory({ "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 index 90ebc8a31..1c523af96 100644 --- a/stories/charts/BarLineChart.stories.tsx +++ b/stories/charts/BarLineChart.stories.tsx @@ -7,7 +7,14 @@ const { meta, getStory } = getStoryFactory({ "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 index 6370d6601..07e653f02 100644 --- a/stories/charts/GaugeChart.stories.tsx +++ b/stories/charts/GaugeChart.stories.tsx @@ -7,7 +7,14 @@ const { meta, getStory } = getStoryFactory({ "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 index b46325439..b366ef217 100644 --- a/stories/charts/LineChart.stories.tsx +++ b/stories/charts/LineChart.stories.tsx @@ -7,7 +7,14 @@ const { meta, getStory } = getStoryFactory({ "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 index 4376f48fb..6f95b00bd 100644 --- a/stories/charts/MultiLineChart.stories.tsx +++ b/stories/charts/MultiLineChart.stories.tsx @@ -7,7 +7,14 @@ const { meta, getStory } = getStoryFactory({ "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 index c555d899d..9bfe94674 100644 --- a/stories/charts/PieChart.stories.tsx +++ b/stories/charts/PieChart.stories.tsx @@ -7,7 +7,14 @@ const { meta, getStory } = getStoryFactory({ "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 index 5df0aafbc..2e3971f6d 100644 --- a/stories/charts/RadarChart.stories.tsx +++ b/stories/charts/RadarChart.stories.tsx @@ -7,7 +7,14 @@ const { meta, getStory } = getStoryFactory({ "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 index 86f9dfc7d..e01d6e116 100644 --- a/stories/charts/ScatterChart.stories.tsx +++ b/stories/charts/ScatterChart.stories.tsx @@ -7,7 +7,14 @@ const { meta, getStory } = getStoryFactory({ "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 index 21ac21ed4..20741406a 100644 --- 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": {