Fix storybook build cache and logs (#14130)

This commit is contained in:
Lucas Bordeau
2025-08-28 14:46:43 +02:00
committed by GitHub
parent dec2239ae7
commit 85e6fe8849
23 changed files with 101 additions and 61 deletions
@@ -25,7 +25,7 @@ runs:
uses: actions/cache/restore@v4
id: restore-cache
with:
key: ${{ steps.cache-primary-key-builder.outputs.CACHE_PRIMARY_KEY_PREFIX }}-${{ github.sha }}
key: ${{ steps.cache-primary-key-builder.outputs.CACHE_PRIMARY_KEY_PREFIX }}-${{ github.sha }}
restore-keys: ${{ steps.cache-primary-key-builder.outputs.CACHE_PRIMARY_KEY_PREFIX }}-
path: |
.cache
+5 -9
View File
@@ -11,7 +11,8 @@ concurrency:
cancel-in-progress: true
env:
STORYBOOK_BUILD_CACHE_KEY: storybook-build-depot-ubuntu-24.04-8-runner
STORYBOOK_BUILD_CACHE_KEY_FOR_RESTORE_ACTION: storybook-build-depot-ubuntu-24.04-8-runner
STORYBOOK_BUILD_CACHE_KEY_FOR_SAVE_ACTION: v3-storybook-build-depot-ubuntu-24.04-8-runner-${{ github.ref_name }}-${{ github.sha }}
jobs:
changed-files-check:
@@ -23,7 +24,7 @@ jobs:
packages/twenty-ui/**
packages/twenty-shared/**
front-sb-build:
needs: [changed-files-check]
needs: changed-files-check
if: needs.changed-files-check.outputs.any_changed == 'true'
timeout-minutes: 30
runs-on: depot-ubuntu-24.04-8
@@ -42,11 +43,6 @@ jobs:
uses: ./.github/workflows/actions/yarn-install
- name: Diagnostic disk space issue
run: df -h
- name: Restore storybook build cache
id: restore-storybook-build-cache
uses: ./.github/workflows/actions/restore-cache
with:
key: ${{ env.STORYBOOK_BUILD_CACHE_KEY }}
- name: Front / Write .env
run: npx nx reset:env twenty-front
- name: Front / Build storybook
@@ -54,7 +50,7 @@ jobs:
- name: Save storybook build cache
uses: ./.github/workflows/actions/save-cache
with:
key: ${{ steps.restore-storybook-build-cache.outputs.cache-primary-key }}
key: ${{ env.STORYBOOK_BUILD_CACHE_KEY_FOR_SAVE_ACTION }}
front-sb-test:
timeout-minutes: 30
runs-on: depot-ubuntu-24.04-8
@@ -79,7 +75,7 @@ jobs:
- name: Restore storybook build cache
uses: ./.github/workflows/actions/restore-cache
with:
key: ${{ env.STORYBOOK_BUILD_CACHE_KEY }}
key: ${{ env.STORYBOOK_BUILD_CACHE_KEY_FOR_RESTORE_ACTION }}
- name: Front / Write .env
run: npx nx reset:env twenty-front
- name: Run storybook tests
+1
View File
@@ -73,6 +73,7 @@ const config: StorybookConfig = {
'react-dom/client': 'react-dom/profiling',
},
},
logLevel: 'warn',
});
},
@@ -90,8 +90,6 @@ const preview: Preview = {
tokenPair: `{%22accessOrWorkspaceAgnosticToken%22:{%22token%22:%22${mockedUserJWT}%22%2C%22expiresAt%22:%222023-07-18T15:06:40.704Z%22%2C%22__typename%22:%22AuthToken%22}%2C%22refreshToken%22:{%22token%22:%22${mockedUserJWT}%22%2C%22expiresAt%22:%222023-10-15T15:06:41.558Z%22%2C%22__typename%22:%22AuthToken%22}%2C%22__typename%22:%22AuthTokenPair%22}`,
},
},
tags: ['autodocs'],
};
export default preview;
@@ -12,4 +12,10 @@ export default {
* @see https://jestjs.io/docs/configuration
*/
testTimeout: 5 * MINUTES_IN_MS,
modulePathIgnorePatterns: [
"<rootDir>/.nx/cache/*",
"<rootDir>/packages/twenty-server/dist/*",
"<rootDir>/packages/twenty-front/dist/*",
"<rootDir>/packages/twenty-ui/dist/*"
],
};
@@ -0,0 +1,9 @@
import type { TestRunnerConfig } from '@storybook/test-runner';
const config: TestRunnerConfig = {
tags: {
exclude: ['no-tests'],
},
};
export default config;
+1 -1
View File
@@ -51,7 +51,7 @@ const jestConfig = {
},
moduleNameMapper: {
'\\.(jpg|jpeg|png|gif|webp|svg|svg\\?react)$':
'<rootDir>/__mocks__/imageMock.js',
'<rootDir>/__mocks__/imageMockFront.js',
'\\.css$': '<rootDir>/__mocks__/styleMock.js',
...pathsToModuleNameMapper(tsConfig.compilerOptions.paths, {
prefix: '<rootDir>/../../',
@@ -22,6 +22,7 @@ const meta: Meta<PageDecoratorArgs> = {
msw: graphqlMocks,
prefetchLoadingSetDelay: 1000,
},
tags: ['no-tests'],
};
export default meta;
@@ -1,6 +1,6 @@
import { getOperationName } from '@apollo/client/utilities';
import { expect, within } from '@storybook/test';
import { type Meta, type StoryObj } from '@storybook/react';
import { expect, within } from '@storybook/test';
import { HttpResponse, graphql, http } from 'msw';
import { GET_PUBLIC_WORKSPACE_DATA_BY_DOMAIN } from '@/auth/graphql/queries/getPublicWorkspaceDataByDomain';
@@ -70,6 +70,7 @@ const meta: Meta<PageDecoratorArgs> = {
parameters: {
msw: graphqlMocks,
},
tags: ['no-tests'],
};
export default meta;
@@ -32,6 +32,7 @@ export const useReorderRecordGroups = ({
const visibleRecordGroupIdsFamilySelector = useRecoilComponentCallbackState(
visibleRecordGroupIdsComponentFamilySelector,
viewBarId,
);
const { saveViewGroups } = useSaveCurrentViewGroups();
@@ -1,9 +1,10 @@
import { type Meta, type StoryObj } from '@storybook/react';
import { SettingsAccountsCalendarChannelsGeneral } from '@/settings/accounts/components/SettingsAccountsCalendarChannelsGeneral';
import { ComponentDecorator } from 'twenty-ui/testing';
import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
import { ComponentDecorator } from 'twenty-ui/testing';
const meta: Meta<typeof SettingsAccountsCalendarChannelsGeneral> = {
title:
@@ -13,6 +14,7 @@ const meta: Meta<typeof SettingsAccountsCalendarChannelsGeneral> = {
ComponentDecorator,
ObjectMetadataItemsDecorator,
SnackBarDecorator,
I18nFrontDecorator,
],
};
+41 -40
View File
@@ -9,8 +9,8 @@ import { visualizer } from 'rollup-plugin-visualizer';
import {
defineConfig,
loadEnv,
searchForWorkspaceRoot,
type PluginOption,
searchForWorkspaceRoot,
} from 'vite';
import checker from 'vite-plugin-checker';
import svgr from 'vite-plugin-svgr';
@@ -46,7 +46,7 @@ export default defineConfig(({ command, mode }) => {
// Please don't increase this limit for main index chunk
// If it gets too big then find modules in the code base
// that can be loaded lazily, there are more!
const MAIN_CHUNK_SIZE_LIMIT = 4.7 * 1024 * 1024; // 4.7MB for main index chunk
const MAIN_CHUNK_SIZE_LIMIT = 4.8 * 1024 * 1024; // 4.7MB for main index chunk
const OTHER_CHUNK_SIZE_LIMIT = 5 * 1024 * 1024; // 5MB for other chunks
const checkers: Checkers = {
@@ -119,44 +119,45 @@ export default defineConfig(({ command, mode }) => {
configPath: path.resolve(__dirname, './lingui.config.ts'),
}),
checker(checkers),
// TODO: fix this, we have to restrict the include to only the components that are using linaria
// Otherwise the build will fail because wyw tries to include emotion styled components
wyw({
include: [
'**/CurrencyDisplay.tsx',
'**/EllipsisDisplay.tsx',
'**/ContactLink.tsx',
'**/BooleanDisplay.tsx',
'**/LinksDisplay.tsx',
'**/RoundedLink.tsx',
'**/OverflowingTextWithTooltip.tsx',
'**/Chip.tsx',
'**/Tag.tsx',
'**/MultiSelectFieldDisplay.tsx',
'**/RatingInput.tsx',
'**/RecordTableCellContainer.tsx',
'**/RecordTableCellDisplayContainer.tsx',
'**/Avatar.tsx',
'**/RecordTableBodyDroppable.tsx',
'**/RecordTableCellBaseContainer.tsx',
'**/RecordTableCellTd.tsx',
'**/RecordTableTd.tsx',
'**/RecordTableHeaderDragDropColumn.tsx',
'**/ActorDisplay.tsx',
'**/BooleanDisplay.tsx',
'**/CurrencyDisplay.tsx',
'**/TextDisplay.tsx',
'**/EllipsisDisplay.tsx',
'**/AvatarChip.tsx',
'**/URLDisplay.tsx',
'**/EmailsDisplay.tsx',
'**/PhonesDisplay.tsx',
'**/MultiSelectDisplay.tsx',
],
babelOptions: {
presets: ['@babel/preset-typescript', '@babel/preset-react'],
},
}),
{
...wyw({
include: [
'**/CurrencyDisplay.tsx',
'**/EllipsisDisplay.tsx',
'**/ContactLink.tsx',
'**/BooleanDisplay.tsx',
'**/LinksDisplay.tsx',
'**/RoundedLink.tsx',
'**/OverflowingTextWithTooltip.tsx',
'**/Chip.tsx',
'**/Tag.tsx',
'**/MultiSelectFieldDisplay.tsx',
'**/RatingInput.tsx',
'**/RecordTableCellContainer.tsx',
'**/RecordTableCellDisplayContainer.tsx',
'**/Avatar.tsx',
'**/RecordTableBodyDroppable.tsx',
'**/RecordTableCellBaseContainer.tsx',
'**/RecordTableCellTd.tsx',
'**/RecordTableTd.tsx',
'**/RecordTableHeaderDragDropColumn.tsx',
'**/ActorDisplay.tsx',
'**/BooleanDisplay.tsx',
'**/CurrencyDisplay.tsx',
'**/TextDisplay.tsx',
'**/EllipsisDisplay.tsx',
'**/AvatarChip.tsx',
'**/URLDisplay.tsx',
'**/EmailsDisplay.tsx',
'**/PhonesDisplay.tsx',
'**/MultiSelectDisplay.tsx',
],
babelOptions: {
presets: ['@babel/preset-typescript', '@babel/preset-react'],
},
}),
enforce: 'pre',
},
visualizer({
open: true,
gzipSize: true,
+1 -1
View File
@@ -27,7 +27,7 @@ const jestConfig = {
*/
'/^@/(.*)$/': './src/$1',
'\\.(jpg|jpeg|png|gif|webp|svg|svg\\?react)$':
'<rootDir>/__mocks__/imageMock.js',
'<rootDir>/__mocks__/imageMockShared.js',
},
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
extensionsToTreatAsEsm: ['.ts', '.tsx'],
+1
View File
@@ -58,6 +58,7 @@ export default defineConfig(() => {
],
},
},
logLevel: 'warn'
};
});
@@ -0,0 +1,21 @@
import { getJestConfig } from '@storybook/test-runner';
const MINUTES_IN_MS = 60 * 1000;
/**
* @type {import('@jest/types').Config.InitialOptions}
*/
export default {
// The default configuration comes from @storybook/test-runner
...getJestConfig(),
/** Add your own overrides below
* @see https://jestjs.io/docs/configuration
*/
testTimeout: 5 * MINUTES_IN_MS,
modulePathIgnorePatterns: [
'<rootDir>/.nx/cache/*',
'<rootDir>/packages/twenty-server/dist/*',
'<rootDir>/packages/twenty-front/dist/*',
'<rootDir>/packages/twenty-ui/dist/*',
],
};
@@ -0,0 +1 @@
export default 'test-file-stub';
+1 -1
View File
@@ -27,7 +27,7 @@ const jestConfig = {
],
},
moduleNameMapper: {
'\\.(jpg|jpeg|png|gif|webp|svg|svg)$': '<rootDir>/__mocks__/imageMock.js',
'\\.(jpg|jpeg|png|gif|webp|svg|svg)$': '<rootDir>/__mocks__/imageMockUi.js',
...pathsToModuleNameMapper(tsConfig.compilerOptions.paths, {
prefix: '<rootDir>/',
}),
+1
View File
@@ -46,6 +46,7 @@
},
"files": [
"dist",
"assets",
"accessibility",
"assets",
"components",
@@ -1,12 +1,12 @@
import { type Meta, type StoryObj } from '@storybook/react';
import { ComponentDecorator } from '@ui/testing';
import { IconBuildingSkyscraper, IconUser } from '@ui/display';
import { ComponentDecorator, RecoilRootDecorator } from '@ui/testing';
import { AvatarChip } from '../AvatarChip';
const meta: Meta<typeof AvatarChip> = {
title: 'UI/Components/AvatarChip',
component: AvatarChip,
decorators: [ComponentDecorator],
decorators: [ComponentDecorator, RecoilRootDecorator],
};
export default meta;
@@ -107,7 +107,7 @@ export const ArraySimple: Story = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
const node = await canvas.findByText('[3]');
const node = await canvas.findByText('3');
expect(node).toBeVisible();
},
+1 -1
View File
@@ -95,7 +95,6 @@ export default defineConfig(({ command }) => {
},
}),
],
// Configuration for building your library.
// See: https://vitejs.dev/guide/build.html#library-mode
build: {
@@ -142,5 +141,6 @@ export default defineConfig(({ command }) => {
],
},
},
logLevel: 'error',
};
});