➕(react) add Chromatic support

We need to be able to run some visual testing during our releases,
Chromatic is the best choice for Storybook.

.gitignore

@@ -29,3 +29,5 @@ vite.config.ts.timestamp-*
 env.d
 .turbo
 ghpages-output
+
+packages/react/chromatic.config.json

packages/react/.storybook/main.ts

@@ -20,6 +20,7 @@ const config: StorybookConfig = {
         },
       },
     },
+    "@chromatic-com/storybook"
   ],
 
   framework: {

packages/react/chromatic.config.json.dist

@@ -0,0 +1,5 @@
+{
+  "projectId": "<PROJECT ID>",
+  "zip": true,
+  "storybookBaseDir": "packages/react"
+}

packages/react/package.json

@@ -52,6 +52,7 @@
     "@react-stately/calendar": "3.4.4",
     "@react-stately/datepicker": "3.9.2",
     "@tanstack/react-table": "8.13.2",
+    "chromatic": "11.2.0",
     "classnames": "2.5.1",
     "downshift": "8.4.0",
     "react": "18.2.0",
@@ -68,6 +69,7 @@
     "@babel/plugin-proposal-decorators": "7.24.0",
     "@babel/plugin-proposal-export-default-from": "7.23.3",
     "@babel/preset-typescript": "7.23.3",
+    "@chromatic-com/storybook": "1.2.22",
     "@faker-js/faker": "8.4.1",
     "@hookform/resolvers": "3.3.4",
     "@openfun/cunningham-tokens": "*",