diff --git a/.github/workflows/ci-front.yaml b/.github/workflows/ci-front.yaml index 0d9a5b4dc6..c13fca662b 100644 --- a/.github/workflows/ci-front.yaml +++ b/.github/workflows/ci-front.yaml @@ -133,7 +133,7 @@ jobs: run: npx nx reset:env twenty-front - name: Run storybook tests if: steps.changed-files.outputs.any_changed == 'true' - run: npx nx storybook:serve-and-test:static:performance twenty-front + run: npx nx run twenty-front:storybook:serve-and-test:static:performance front-chromatic-deployment: if: contains(github.event.pull_request.labels.*.name, 'run-chromatic') || github.event_name == 'push' needs: front-sb-build diff --git a/nx.json b/nx.json index 0030428ee9..19c6f5462c 100644 --- a/nx.json +++ b/nx.json @@ -108,7 +108,6 @@ "storybook:build": { "executor": "nx:run-commands", "cache": true, - "dependsOn": ["^build"], "inputs": ["^default", "excludeTests"], "outputs": ["{projectRoot}/{options.output-dir}"], "options": { @@ -192,16 +191,7 @@ "executor": "nx:run-commands", "options": { "commands": [ - "npx concurrently --kill-others --success=first -n SB,TEST 'nx storybook:serve:static {projectName} --port={args.port}' 'npx wait-on tcp:{args.port} && nx storybook:test {projectName} --port={args.port}'" - ], - "port": 6006 - } - }, - "storybook:serve-and-test:static:performance": { - "executor": "nx:run-commands", - "options": { - "commands": [ - "npx concurrently --kill-others --success=first -n SB,TEST 'nx storybook:serve:dev {projectName} --configuration=performance --port={args.port}' 'npx wait-on tcp:{args.port} && nx storybook:test:no-coverage {projectName} --port={args.port} --configuration=performance'" + "npx concurrently --kill-others --success=first -n SB,TEST 'nx storybook:serve:static {projectName} --port={args.port} --configuration={args.performance}' 'npx wait-on tcp:{args.port} && nx storybook:test {projectName} --port={args.port} --configuration={args.scope}'" ], "port": 6006 } diff --git a/packages/twenty-front/.storybook/main.ts b/packages/twenty-front/.storybook/main.ts index 8b65348c4b..04dd231aaa 100644 --- a/packages/twenty-front/.storybook/main.ts +++ b/packages/twenty-front/.storybook/main.ts @@ -50,7 +50,11 @@ const config: StorybookConfig = { const { mergeConfig } = await import('vite'); return mergeConfig(config, { - // Add dependencies to pre-optimization + resolve: { + alias: { + 'react-dom/client': 'react-dom/profiling', + }, + }, }); }, }; diff --git a/packages/twenty-front/project.json b/packages/twenty-front/project.json index 245fde1fac..ad72457839 100644 --- a/packages/twenty-front/project.json +++ b/packages/twenty-front/project.json @@ -70,6 +70,12 @@ "storybook:build": { "options": { "env": { "NODE_OPTIONS": "--max_old_space_size=6500" } + }, + "configurations": { + "docs": { "env": { "STORYBOOK_SCOPE": "ui-docs" } }, + "modules": { "env": { "STORYBOOK_SCOPE": "modules" } }, + "pages": { "env": { "STORYBOOK_SCOPE": "pages" } }, + "performance": { "env": { "STORYBOOK_SCOPE": "performance" } } } }, "storybook:serve:dev": { @@ -82,7 +88,13 @@ } }, "storybook:serve:static": { - "options": { "port": 6006 } + "options": { "port": 6006 }, + "configurations": { + "docs": { "env": { "STORYBOOK_SCOPE": "ui-docs" } }, + "modules": { "env": { "STORYBOOK_SCOPE": "modules" } }, + "pages": { "env": { "STORYBOOK_SCOPE": "pages" } }, + "performance": { "env": { "STORYBOOK_SCOPE": "performance" } } + } }, "storybook:coverage": { "configurations": { @@ -104,9 +116,6 @@ }, "storybook:serve-and-test:static": { "options": { - "commands": [ - "npx concurrently --kill-others --success=first -n SB,TEST 'nx storybook:serve:static {projectName} --port={args.port}' 'npx wait-on tcp:{args.port} && nx storybook:test {projectName} --port={args.port} --configuration={args.scope}'" - ], "port": 6006 }, "configurations": { @@ -116,15 +125,6 @@ "performance": { "scope": "performance" } } }, - "storybook:serve-and-test:static:performance": {}, - "storybook:test:no-coverage": { - "configurations": { - "docs": { "env": { "STORYBOOK_SCOPE": "ui-docs" } }, - "modules": { "env": { "STORYBOOK_SCOPE": "modules" } }, - "pages": { "env": { "STORYBOOK_SCOPE": "pages" } }, - "performance": { "env": { "STORYBOOK_SCOPE": "performance" } } - } - }, "graphql:generate": { "executor": "nx:run-commands", "defaultConfiguration": "data", diff --git a/packages/twenty-front/src/modules/ui/input/components/EntityTitleDoubleTextInput.tsx b/packages/twenty-front/src/modules/ui/input/components/EntityTitleDoubleTextInput.tsx index fc16739743..9bffbf8c1f 100644 --- a/packages/twenty-front/src/modules/ui/input/components/EntityTitleDoubleTextInput.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/EntityTitleDoubleTextInput.tsx @@ -1,10 +1,10 @@ -import { ChangeEvent } from 'react'; import styled from '@emotion/styled'; +import { ChangeEvent } from 'react'; import { StyledTextInput as UIStyledTextInput } from '@/ui/field/input/components/TextInput'; -import { ComputeNodeDimensions } from '@/ui/utilities/dimensions/components/ComputeNodeDimensions'; import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope'; +import { ComputeNodeDimensions } from 'twenty-ui'; import { InputHotkeyScope } from '../types/InputHotkeyScope'; export type EntityTitleDoubleTextInputProps = { diff --git a/packages/twenty-front/src/testing/profiling/components/ProfilingReporter.tsx b/packages/twenty-front/src/testing/profiling/components/ProfilingReporter.tsx index 91c6e26e3d..6d4ecb0149 100644 --- a/packages/twenty-front/src/testing/profiling/components/ProfilingReporter.tsx +++ b/packages/twenty-front/src/testing/profiling/components/ProfilingReporter.tsx @@ -1,5 +1,5 @@ -import { useMemo } from 'react'; import styled from '@emotion/styled'; +import { useMemo } from 'react'; import { useRecoilState } from 'recoil'; import { PROFILING_REPORTER_DIV_ID } from '~/testing/profiling/constants/ProfilingReporterDivId'; diff --git a/packages/twenty-front/src/modules/ui/utilities/dimensions/components/ComputeNodeDimensions.tsx b/packages/twenty-ui/src/utilities/dimensions/components/ComputeNodeDimensions.tsx similarity index 96% rename from packages/twenty-front/src/modules/ui/utilities/dimensions/components/ComputeNodeDimensions.tsx rename to packages/twenty-ui/src/utilities/dimensions/components/ComputeNodeDimensions.tsx index 2d3acb3f0f..49e84b79fb 100644 --- a/packages/twenty-front/src/modules/ui/utilities/dimensions/components/ComputeNodeDimensions.tsx +++ b/packages/twenty-ui/src/utilities/dimensions/components/ComputeNodeDimensions.tsx @@ -1,7 +1,6 @@ -import { ReactNode, useLayoutEffect, useRef, useState } from 'react'; import styled from '@emotion/styled'; - -import { isDefined } from '~/utils/isDefined'; +import { isDefined } from '@ui/utilities'; +import { ReactNode, useLayoutEffect, useRef, useState } from 'react'; type ComputeNodeDimensionsProps = { children: ( diff --git a/packages/twenty-ui/src/utilities/index.ts b/packages/twenty-ui/src/utilities/index.ts index 0def2683ee..377997ec33 100644 --- a/packages/twenty-ui/src/utilities/index.ts +++ b/packages/twenty-ui/src/utilities/index.ts @@ -5,9 +5,10 @@ export * from './animation/components/AnimatedFadeOut'; export * from './animation/components/AnimatedTextWord'; export * from './animation/components/AnimatedTranslation'; export * from './color/utils/stringToHslColor'; -export * from './getDisplayValueByUrlType'; +export * from './dimensions/components/ComputeNodeDimensions'; export * from './image/getImageAbsoluteURI'; export * from './isDefined'; export * from './screen-size/hooks/useScreenSize'; export * from './state/utils/createState'; export * from './types/Nullable'; +export * from './utils/getDisplayValueByUrlType'; diff --git a/packages/twenty-ui/src/utilities/getDisplayValueByUrlType.ts b/packages/twenty-ui/src/utilities/utils/getDisplayValueByUrlType.ts similarity index 94% rename from packages/twenty-ui/src/utilities/getDisplayValueByUrlType.ts rename to packages/twenty-ui/src/utilities/utils/getDisplayValueByUrlType.ts index 2325d96c38..577906adaf 100644 --- a/packages/twenty-ui/src/utilities/getDisplayValueByUrlType.ts +++ b/packages/twenty-ui/src/utilities/utils/getDisplayValueByUrlType.ts @@ -1,5 +1,5 @@ import { LinkType } from '@ui/navigation/link'; -import { isDefined } from './isDefined'; +import { isDefined } from '../isDefined'; type getUrlDisplayValueByUrlTypeProps = { type: LinkType;