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

synapsenet-arena · May 2, 2024 · 5128ea3 · 5128ea3
1 parent f802964
commit 5128ea3
Show file tree

Hide file tree

Showing 12 changed files with 145 additions and 78 deletions.
diff --git a/.github/workflows/actions/task-cache/action.yaml b/.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 }}-
diff --git a/.github/workflows/ci-chromatic.yaml b/.github/workflows/ci-chromatic.yaml
diff --git a/.github/workflows/ci-front.yaml b/.github/workflows/ci-front.yaml
@@ -17,19 +17,37 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
+  front-sb-build:
+    runs-on: ubuntu-latest
+    env:
+      REACT_APP_SERVER_BASE_URL: http://localhost:3000
+    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
-      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
@@ -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: |
+          cd packages/twenty-front
+          touch .env
+          echo "REACT_APP_SERVER_BASE_URL: $REACT_APP_SERVER_BASE_URL" >> .env
+      - name: Publish to Chromatic
         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"
+          npx nx run twenty-front:chromatic:ci
   front-task:
     runs-on: ubuntu-latest
     strategy:

diff --git a/.gitignore b/.gitignore
@@ -26,3 +26,4 @@ storybook-static
 *.tsbuildinfo
 .eslintcache
 .cache
+.nyc_output
diff --git a/nx.json b/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": {

diff --git a/packages/twenty-front/package.json b/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"
   },

diff --git a/packages/twenty-front/project.json b/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:static:scope": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "STORYBOOK_SCOPE={args.scope} nx storybook:static twenty-front",
+        "scope": "all"
+      },
+      "configurations": {
+        "docs": { "scope": "ui-docs" },
+        "modules": { "scope": "modules" },
+        "pages": { "scope": "pages" }
+      }
+    },
     "storybook:test": {
       "options": {
-        "url": "http://localhost:6006"
+        "url": "http://localhost:6006",
+        "port": 6006
       },
       "configurations": {
-        "docs": { "env": { "STORYBOOK_SCOPE": "ui-docs" } },
-        "modules": { "env": { "STORYBOOK_SCOPE": "modules" } },
-        "pages": { "env": { "STORYBOOK_SCOPE": "pages" } }
+        "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": {}
       }
     }
   }

diff --git a/...ty-front/src/modules/activities/emails/right-drawer/components/RightDrawerEmailThread.tsx b/...ty-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 }) =>
         () => {

diff --git a/packages/twenty-front/src/modules/activities/hooks/usePrepareFindManyActivitiesQuery.ts b/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;
     });

diff --git a/...cord/record-field/meta-types/display/components/__stories__/PhoneFieldDisplay.stories.tsx b/...cord/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',

diff --git a/...t-record/record-field/meta-types/input/components/__stories__/PhoneFieldInput.stories.tsx b/...t-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',

diff --git a/packages/twenty-front/src/modules/ui/input/button/components/FloatingIconButton.tsx b/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 }) =>