fix: fix storybook build script not found by Chromatic (#5235)

.github/workflows/actions/task-cache/action.yaml

@@ -24,6 +24,6 @@ runs:
         path: |
           .cache
           .nx/cache
-        key: tasks-cache-${{ inputs.tag }}-${{ steps.tasks-key.outputs.key }}${{ inputs.suffix }}-${{ github.sha }}
+        key: tasks-cache-${{ github.ref_name }}-${{ inputs.tag }}-${{ steps.tasks-key.outputs.key }}${{ inputs.suffix }}-${{ github.sha }}
         restore-keys: |
-          tasks-cache-${{ inputs.tag }}-${{ steps.tasks-key.outputs.key }}${{ inputs.suffix }}-
+          tasks-cache-${{ github.ref_name }}-${{ inputs.tag }}-${{ steps.tasks-key.outputs.key }}${{ inputs.suffix }}-

.github/workflows/ci-chromatic.yaml

@@ -1,39 +0,0 @@
-name: 'CI Chromatic'
-
-on:
-  push:
-    branches:
-      - main
-    paths:
-      - 'package.json'
-      - 'packages/twenty-front/**'
-  pull_request:
-    types: [labeled]
-    paths:
-      - 'package.json'
-      - 'packages/twenty-front/**'
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
-
-jobs:
-  chromatic-deployment:
-    if: contains(github.event.pull_request.labels.*.name, 'run-chromatic') || github.event_name == 'push'
-    runs-on: ubuntu-latest
-    env:
-      REACT_APP_SERVER_BASE_URL: http://127.0.0.1:3000
-      CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-      - name: Install dependencies
-        uses: ./.github/workflows/actions/yarn-install
-      - name: Front / Write .env
-        run: |
-          cd packages/twenty-front
-          touch .env
-          echo "REACT_APP_SERVER_BASE_URL: $REACT_APP_SERVER_BASE_URL" >> .env
-      - name: Publish to Chromatic
-        run: |
-          npx nx run twenty-front:chromatic:ci

.github/workflows/ci-front.yaml

@@ -17,19 +17,37 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
-  front-sb-test:
-    runs-on: ci-8-cores
-    strategy:
-      matrix:
-        storybook_scope: [pages, modules]
+  front-sb-build:
+    runs-on: ubuntu-latest
     env:
       REACT_APP_SERVER_BASE_URL: http://localhost:3000
-      STORYBOOK_SCOPE: ${{ matrix.storybook_scope }}
     steps:
       - name: Cancel Previous Runs
         uses: styfle/cancel-workflow-action@0.11.0
         with:
           access_token: ${{ github.token }}
+      - name: Fetch local actions
+        uses: actions/checkout@v4
+      - name: Install dependencies
+        uses: ./.github/workflows/actions/yarn-install
+      - name: Front / Restore Storybook Task Cache
+        uses: ./.github/workflows/actions/task-cache
+        with:
+          tag: scope:frontend
+          tasks: storybook:build
+      - name: Front / Write .env
+        run: npx nx reset:env twenty-front
+      - name: Front / Build storybook
+        run: npx nx storybook:build twenty-front
+  front-sb-test:
+    runs-on: ci-8-cores
+    needs: front-sb-build
+    strategy:
+      matrix:
+        storybook_scope: [pages, modules]
+    env:
+      REACT_APP_SERVER_BASE_URL: http://localhost:3000
+    steps:
       - name: Fetch local actions
         uses: actions/checkout@v4
       - name: Install dependencies
@@ -41,14 +59,36 @@ jobs:
         with:
           tag: scope:frontend
           tasks: storybook:build
-          suffix: _${{ matrix.storybook_scope }}
       - name: Front / Write .env
         run: npx nx reset:env twenty-front
       - name: Run storybook tests
+        run: npx nx storybook:test twenty-front --configuration=ci --scope=${{ matrix.storybook_scope }}
+  front-chromatic-deployment:
+    if: contains(github.event.pull_request.labels.*.name, 'run-chromatic') || github.event_name == 'push'
+    needs: front-sb-build
+    runs-on: ubuntu-latest
+    env:
+      REACT_APP_SERVER_BASE_URL: http://127.0.0.1:3000
+      CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Install dependencies
+        uses: ./.github/workflows/actions/yarn-install
+      - name: Front / Restore Storybook Task Cache
+        uses: ./.github/workflows/actions/task-cache
+        with:
+          tag: scope:frontend
+          tasks: storybook:build
+      - name: Front / Write .env
         run: |
-          npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
-            "npx nx storybook:static twenty-front" \
-            "npx wait-on tcp:6006 && npx nx storybook:test twenty-front"
+          cd packages/twenty-front
+          touch .env
+          echo "REACT_APP_SERVER_BASE_URL: $REACT_APP_SERVER_BASE_URL" >> .env
+      - name: Publish to Chromatic
+        run: |
+          npx nx run twenty-front:chromatic:ci
   front-task:
     runs-on: ubuntu-latest
     strategy:

.gitignore

@@ -26,3 +26,4 @@ storybook-static
 *.tsbuildinfo
 .eslintcache
 .cache
+.nyc_output

nx.json

@@ -112,19 +112,38 @@
     "storybook:test": {
       "executor": "nx:run-commands",
       "options": {
-        "cwd": "{projectRoot}",
         "commands": [
-          "test-storybook --url {options.url} --maxWorkers=3 --coverage",
-          "nyc report --reporter=lcov --reporter=text-summary -t coverage/storybook --report-dir coverage/storybook --check-coverage"
+          "test-storybook -c {args.configDir} --url {args.url} --maxWorkers=3 --coverage",
+          "nyc report --reporter=lcov --reporter=text-summary -t {args.coverageDir} --report-dir {args.coverageDir} --check-coverage"
         ],
-        "parallel": false
+        "parallel": false,
+        "configDir": "{projectRoot}/.storybook",
+        "coverageDir": "{projectRoot}/coverage/storybook",
+        "url": "http://localhost:6006",
+        "port": 6006
+      },
+      "configurations": {
+        "ci": {
+          "commands": [
+            {
+              "prefix": "[SB]",
+              "command": "nx storybook:static {projectName} --port={args.port}",
+              "forwardAllArgs": false
+            },
+            {
+              "command": "npx wait-on tcp:{args.port} && nx storybook:test {projectName}",
+              "forwardAllArgs": false
+            }
+          ],
+          "parallel": true
+        }
       }
     },
     "chromatic": {
       "executor": "nx:run-commands",
       "options": {
         "cwd": "{projectRoot}",
-        "command": "cross-var chromatic --project-token=$CHROMATIC_PROJECT_TOKEN --build-script-name=storybook:build --exit-zero-on-changes={args.ci}",
+        "command": "cross-var chromatic --project-token=$CHROMATIC_PROJECT_TOKEN --build-script-name=build-storybook --exit-zero-on-changes={args.ci}",
         "ci": false
       },
       "configurations": {

packages/twenty-front/package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "build": "npx vite build && sh ./scripts/inject-runtime-env.sh",
     "build:sourcemaps": "VITE_BUILD_SOURCEMAP=true NODE_OPTIONS=--max-old-space-size=4096 npx nx build",
+    "build-storybook": "cd ../.. && npx nx storybook:build twenty-front",
     "start:prod": "NODE_ENV=production npx vite --host",
     "tsup": "npx tsup"
   },

packages/twenty-front/project.json

@@ -60,23 +60,74 @@
     },
     "test": {},
     "storybook:build": {},
+    "storybook:build:scope": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "STORYBOOK_SCOPE={args.scope} nx storybook:build twenty-front",
+        "scope": "all"
+      },
+      "configurations": {
+        "docs": { "scope": "ui-docs" },
+        "modules": { "scope": "modules" },
+        "pages": { "scope": "pages" }
+      }
+    },
     "storybook:dev": {
       "options": { "port": 6006 }
     },
+    "storybook:dev:scope": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "STORYBOOK_SCOPE={args.scope} nx storybook:dev twenty-front",
+        "scope": "all"
+      },
+      "configurations": {
+        "docs": { "scope": "ui-docs" },
+        "modules": { "scope": "modules" },
+        "pages": { "scope": "pages" }
+      }
+    },
     "storybook:static": {
       "options": {
         "buildTarget": "twenty-front:storybook:build",
         "port": 6006
       }
     },
-    "storybook:test": {
+    "storybook:static:scope": {
+      "executor": "nx:run-commands",
       "options": {
-        "url": "http://localhost:6006"
+        "command": "STORYBOOK_SCOPE={args.scope} nx storybook:static twenty-front",
+        "scope": "all"
       },
       "configurations": {
-        "docs": { "env": { "STORYBOOK_SCOPE": "ui-docs" } },
-        "modules": { "env": { "STORYBOOK_SCOPE": "modules" } },
-        "pages": { "env": { "STORYBOOK_SCOPE": "pages" } }
+        "docs": { "scope": "ui-docs" },
+        "modules": { "scope": "modules" },
+        "pages": { "scope": "pages" }
+      }
+    },
+    "storybook:test": {
+      "options": {
+        "url": "http://localhost:6006",
+        "port": 6006
+      },
+      "configurations": {
+        "ci": {
+          "commands": [
+            {
+              "prefix": "[SB]",
+              "command": "nx storybook:static {projectName} --port={args.port}",
+              "forwardAllArgs": false
+            },
+            {
+              "command": "STORYBOOK_SCOPE={args.scope} npx wait-on tcp:{args.port} && nx storybook:test {projectName}",
+              "forwardAllArgs": false
+            }
+          ],
+          "parallel": true
+        },
+        "docs": { "scope": "ui-docs" },
+        "modules": { "scope": "modules" },
+        "pages": { "scope": "pages" }
       }
     },
     "graphql:generate": {
@@ -96,15 +147,8 @@
       }
     },
     "chromatic": {
-      "executor": "nx:run-commands",
-      "options": {
-        "cwd": "{projectRoot}",
-        "command": "cross-var chromatic --project-token=$CHROMATIC_PROJECT_TOKEN --build-script-name=storybook:build"
-      },
       "configurations": {
-        "ci": {
-          "args": ["--exit-zero-on-changes"]
-        }
+        "ci": {}
       }
     }
   }

packages/twenty-front/src/modules/activities/emails/right-drawer/components/RightDrawerEmailThread.tsx

@@ -43,7 +43,7 @@ export const RightDrawerEmailThread = () => {
 
   useRegisterClickOutsideListenerCallback({
     callbackId:
-      'EmailThreadClickOutsideCallBack-' + thread.id ?? 'no-thread-id',
+      'EmailThreadClickOutsideCallBack-' + (thread.id ?? 'no-thread-id'),
     callbackFunction: useRecoilCallback(
       ({ set }) =>
         () => {

packages/twenty-front/src/modules/activities/hooks/usePrepareFindManyActivitiesQuery.ts

@@ -97,9 +97,7 @@ export const usePrepareFindManyActivitiesQuery = () => {
     };
 
     const filteredActivities = [
-      ...activities.filter(
-        (activity) => !shouldActivityBeExcluded?.(activity) ?? true,
-      ),
+      ...activities.filter((activity) => !shouldActivityBeExcluded?.(activity)),
     ].sort((a, b) => {
       return a.createdAt > b.createdAt ? -1 : 1;
     });

packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/PhoneFieldDisplay.stories.tsx

@@ -31,7 +31,7 @@ const meta: Meta = {
           fieldDefinition: {
             fieldMetadataId: 'phone',
             label: 'Phone',
-            type: FieldMetadataType.Text,
+            type: FieldMetadataType.Phone,
             iconName: 'IconPhone',
             metadata: {
               fieldName: 'phone',

packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/PhoneFieldInput.stories.tsx

@@ -45,7 +45,7 @@ const PhoneFieldInputWithContext = ({
         fieldDefinition={{
           fieldMetadataId: 'phone',
           label: 'Phone',
-          type: FieldMetadataType.Text,
+          type: FieldMetadataType.Phone,
           iconName: 'IconPhone',
           metadata: {
             fieldName: 'phone',

packages/twenty-front/src/modules/ui/input/button/components/FloatingIconButton.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useTheme } from '@emotion/react';
+import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { IconComponent } from 'twenty-ui';
 
@@ -87,10 +87,13 @@ const StyledButton = styled.button<
     `;
   }}
 
-  &:hover {
-    background: ${({ theme, isActive }) =>
-      !!isActive ?? theme.background.transparent.lighter};
-  }
+  ${({ theme, isActive }) =>
+    isActive &&
+    css`
+      &:hover {
+        background: ${theme.background.transparent.lighter};
+      }
+    `}
 
   &:active {
     background: ${({ theme, disabled }) =>