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

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 }) =>