Setup chromatic

Author: garronej

.github/workflows/ci.yaml

@@ -36,6 +36,7 @@ jobs:
     - uses: bahmutov/npm-install@v1
     - run: yarn build
     - run: yarn test
+    - run: npx chromatic --exit-zero-on-changes
 
   deploy_storybook:
     runs-on: ubuntu-latest

package.json

@@ -23,7 +23,8 @@
         "grant_exec_perms": "node dist/bin/tools/grant_exec_perms",
         "storybook": "yarn build && yarn only-include-used-icons && start-storybook -p 6006",
         "build-storybook": "yarn build && yarn only-include-used-icons && build-storybook",
-        "only-include-used-icons": "node dist/bin/only-include-used-icons.js"
+        "only-include-used-icons": "node dist/bin/only-include-used-icons.js",
+        "chromatic": "npx chromatic"
     },
     "bin": {
         "copy-dsfr-to-public": "dist/bin/copy-dsfr-to-public.js",
@@ -42,7 +43,9 @@
             "pre-commit": "ts-node -T src/scripts/list-exports.ts && git add package.json && lint-staged -v"
         }
     },
-    "author": "u/garronej",
+    "author": {
+        "name": "u/garronej"
+    },
     "license": "MIT",
     "files": [
         "src/",
@@ -66,10 +69,10 @@
         "tsafe": "^1.6.0"
     },
     "devDependencies": {
-        "@gouvfr/dsfr": "1.9.0",
         "@babel/core": "^7.20.2",
         "@emotion/react": "^11.10.4",
         "@emotion/styled": "^11.10.4",
+        "@gouvfr/dsfr": "1.9.0",
         "@mui/icons-material": "^5.11.0",
         "@mui/material": "^5.11.0",
         "@storybook/addon-a11y": "^6.5.16",
@@ -90,6 +93,7 @@
         "@typescript-eslint/eslint-plugin": "^5.43.0",
         "@typescript-eslint/parser": "^5.43.0",
         "babel-loader": "^8.3.0",
+        "chromatic": "^6.17.2",
         "css": "^3.0.0",
         "eslint": "^7.26.0",
         "eslint-config-prettier": "^8.3.0",
@@ -163,5 +167,10 @@
         "./Badge": "./dist/Badge.js",
         "./Alert": "./dist/Alert.js",
         "./Accordion": "./dist/Accordion.js"
-    }
+    },
+    "bugs": {
+        "url": "https://github.com/codegouvfr/react-dsfr/issues"
+    },
+    "readme": "ERROR: No README data found!",
+    "_id": "@codegouvfr/react-dsfr@0.41.0"
 }

stories/intro.stories.mdx

@@ -19,5 +19,5 @@ import { useDarkMode } from "storybook-dark-mode";
     🇫🇷 <i><a href="https://www.systeme-de-design.gouv.fr/">French State Design System</a> React integration</i> 🇫🇷 
 
 This website documents the React components featured by [@codegouvfr/react-dsfr](https://github.com/codegouvfr/react-dsfr).  
-🏁 If you're just getting started heads over to the 👉[guides](https://react-dsfr.etalab.studio/)👈.
+🏁 If you're just getting started heads over to the 👉 [Guides](https://react-dsfr.etalab.studio/) 👈.
 </div>