IBX-10622: Added chromatic config (#45)

* IBX-10622: Added chromatic config

* IBX-10622: Added missing comma

* IBX-10622: Added temp worfklow on pull_request

* IBX-10622: Added fetch-depth

* IBX-10622: Removed temp workflow on pull_request

Author: katarzynazawada

.github/workflows/chromatic.yml

@@ -0,0 +1,23 @@
+name: "Visual tests"
+
+on: 
+    workflow_dispatch: ~
+
+jobs:
+  chromatic:
+    name: Run Chromatic
+    runs-on: 'ubuntu-24.04'
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+      - name: Install dependencies
+        run: yarn
+      - name: Run Chromatic
+        uses: chromaui/action@latest
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

.storybook/main.js

@@ -37,6 +37,7 @@ const config = {
             },
         },
         path.resolve(__dirname, '../src/storybook/addons/framework-selector/index.ts'),
+        '@chromatic-com/storybook',
     ],
     framework: {
         name: '@storybook/react-webpack5',

package.json

@@ -25,6 +25,7 @@
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
+    "@chromatic-com/storybook": "^4.1.1",
     "@ibexa/eslint-config": "https://github.com/ibexa/eslint-config-ibexa#~v2.0.0",
     "@ibexa/ts-config": "https://github.com/ibexa/ts-config-ibexa#~v1.1.0",
     "@storybook/addon-a11y": "^9.0.4",

stories/Icons.stories.tsx

@@ -48,6 +48,8 @@ const meta: Meta<typeof IconsList> = {
     component: IconsList,
     parameters: {
         layout: 'padded',
+        // Disables Chromatic's snapshotting on a component level
+        chromatic: { disableSnapshot: true },
     },
     tags: [],
 };