chore: 717 Add Chromatic and Storybook (#723)

* chore: 717 Add Chromatic and Storybook

* add comment

* update package.json

.github/workflows/push_tests.yml

@@ -84,7 +84,10 @@ jobs:
     runs-on: macos-latest
     timeout-minutes: 20
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
+        with:
+          # Chromatic needs full Git history graph
+          fetch-depth: 0
       - name: Set up Python 3.8
         uses: actions/setup-python@v1
         with:
@@ -106,10 +109,21 @@ jobs:
           make dev-env-server build-for-server-dev
           cd client
           npx playwright install
+
       - name: Smoke tests (without annotations feature)
         run: |
           cd client && make smoke-test
           ./node_modules/codecov/bin/codecov --yml=../.codecov.yml --root=../ --gcov-root=../ -C -F frontend,javascript,smokeTest
+
+      - name: Publish to Chromatic
+        uses: chromaui/action@latest
+        with:
+          # ⚠️ Make sure to configure a `CHROMATIC_PROJECT_TOKEN` repository secret
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          workingDir: ./client
+          # This is `npm run build-archive-storybook`
+          buildScriptName: "build-archive-storybook"
+
       - name: Upload FE test results as an artifact
         if: always()
         uses: actions/upload-artifact@v3

client/.storybook/main.ts

@@ -0,0 +1,23 @@
+import type { StorybookConfig } from "@storybook/react-webpack5";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {
+      builder: {
+        useSWC: true,
+      },
+    },
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

client/.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

client/__tests__/e2e/e2e.test.ts

@@ -7,7 +7,8 @@
  */
 
 /* eslint-disable no-await-in-loop -- await in loop is needed to emulate sequential user actions  */
-import { test, expect, Page } from "@playwright/test";
+import { Page } from "@playwright/test";
+import { test, expect } from "@chromatic-com/playwright";
 
 import { getElementCoordinates, tryUntil } from "./puppeteerUtils";
 import mockSetup from "./playwright.global.setup";

client/configuration/eslint/eslint.js

@@ -77,7 +77,9 @@ module.exports = {
     "spaced-comment": ["error", "always", { exceptions: ["*"] }],
     "no-param-reassign": "off",
     "object-curly-newline": ["error", { consistent: true }],
-    "react/prop-types": [0],
+    "react/prop-types": "off",
+    "react/require-default-props": "off",
+    "react/jsx-props-no-spreading": "off",
     "space-before-function-paren": "off",
     "@typescript-eslint/space-before-function-paren": "off",
     "function-paren-newline": "off",