ci: added chromatic

Author: shairez

.github/actions/test/action.yml

@@ -6,6 +6,9 @@ inputs:
   github_token:
     description: GitHub token
     required: true
+  chromatic_token:
+    description: Chromatic token
+    required: true
 
 runs:
   using: composite
@@ -23,6 +26,13 @@ runs:
       shell: bash
       run: npx nx build headless
 
+    - name: Publish to Chromatic
+      uses: chromaui/action@v1
+      # Chromatic GitHub Action options
+      with:
+        # 👇 Chromatic projectToken, refer to the manage page to obtain it.
+        projectToken: ${{ inputs.github_token }}
+
     # - name: Build Daisy Theme
     #   shell: bash
     #   run: npx nx build daisy

.github/workflows/test.yml

@@ -28,3 +28,4 @@ jobs:
         uses: ./.github/actions/test
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
+          chromatic_token: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

package.json

@@ -11,7 +11,8 @@
     "commit": "git-cz",
     "format:fix": "pretty-quick --staged",
     "prepare": "husky install",
-    "test:headless": "nx component-test headless --watch"
+    "test:headless": "nx component-test headless --watch",
+    "story:headless": "nx build-storybook headless"
   },
   "devDependencies": {
     "@builder.io/qwik": "0.101.0",
@@ -51,6 +52,7 @@
     "all-contributors-cli": "^6.24.0",
     "autoprefixer": "^10.4.13",
     "axe-core": "4.6.3",
+    "chromatic": "6.17.3",
     "commitizen": "^4.3.0",
     "commitlint": "^17.4.3",
     "country-list-json": "1.1.0",

packages/headless/package.json

@@ -20,20 +20,7 @@
     "node": ">=16.0.0"
   },
   "private": false,
-  "scripts": {
-    "build": "qwik build",
-    "build.lib": "vite build --mode lib",
-    "build.types": "tsc --emitDeclarationOnly",
-    "dev": "vite --mode ssr",
-    "dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force",
-    "fmt": "prettier --write .",
-    "fmt.check": "prettier --check .",
-    "release": "np",
-    "start": "vite --open --mode ssr",
-    "qwik": "qwik",
-    "storybook1": "storybook dev -p 6006",
-    "build-storybook1": "storybook build"
-  },
+  "scripts": {},
   "dependencies": {
     "@floating-ui/dom": "1.0.10"
   }

packages/headless/project.json

@@ -93,6 +93,13 @@
         }
       }
     },
+    "test-storybook": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "pnpm test-storybook --url http://localhost:4400",
+        "cwd": "packages/headless"
+      }
+    },
     "component-test": {
       "executor": "@nrwl/cypress:cypress",
       "options": {

packages/headless/src/components/accordion/accordion.stories.tsx

@@ -14,14 +14,14 @@ type Story = StoryObj<AccordionProps>;
 export const Primary: Story = {
   render: () => (
     <Accordion>
-      <AccordionItem label="Item 1">This is a test</AccordionItem>
+      <AccordionItem label="Item 1">This is a test 1</AccordionItem>
     </Accordion>
   ),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
     await userEvent.click(canvas.getByText('Item 1'));
 
-    await expect(canvas.getByText('This is a test')).toBeInTheDocument();
+    await expect(canvas.getByText('This is a test 1')).toBeInTheDocument();
   },
 };