From ffa44b5df09d389c40039d7b4a76db30c8a2e7ff Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Fri, 11 Nov 2022 13:29:51 +0100 Subject: [PATCH 1/9] canvas stories --- code/ui/.storybook/main.ts | 24 +++- code/ui/blocks/src/blocks/Canvas.stories.tsx | 83 ++++++++++++ code/ui/blocks/src/blocks/Canvas.tsx | 66 ++++----- code/ui/blocks/src/blocks/Source.tsx | 7 +- .../internal/InternalCanvas.stories.tsx | 127 ++++++++++++++++++ code/ui/blocks/src/blocks/internal/README.md | 8 ++ 6 files changed, 272 insertions(+), 43 deletions(-) create mode 100644 code/ui/blocks/src/blocks/Canvas.stories.tsx create mode 100644 code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx create mode 100644 code/ui/blocks/src/blocks/internal/README.md diff --git a/code/ui/.storybook/main.ts b/code/ui/.storybook/main.ts index 526d46fabfb3..0c7c19bc1c7a 100644 --- a/code/ui/.storybook/main.ts +++ b/code/ui/.storybook/main.ts @@ -18,7 +18,29 @@ const allStories = [ titlePrefix: '@storybook-blocks', }, ]; -const blocksOnlyStories = ['../blocks/src/@(blocks|controls)/**/*.@(mdx|stories.@(tsx|ts|jsx|js))']; + +/** + * match all stories in blocks/src/blocks and blocks/src/controls EXCEPT blocks/src/blocks/internal + * Examples: + * + * src/blocks/Canvas.stories.tsx - MATCH + * src/blocks/internal/InternalCanvas.stories.tsx - IGNORED, internal stories + * src/blocks/internal/nested/InternalCanvas.stories.tsx - IGNORED, internal stories + * + * src/blocks/Canvas.tsx - IGNORED, not story + * src/blocks/nested/Canvas.stories.tsx - MATCH + * src/blocks/nested/deep/Canvas.stories.tsx - MATCH + * + * src/controls/Boolean.stories.tsx - MATCH + * src/controls/Boolean.tsx - IGNORED, not story + * + * src/components/ColorPalette.stories.tsx - MATCH + * src/components/ColorPalette.tsx - IGNORED, not story + */ +const blocksOnlyStories = [ + '../blocks/src/@(blocks|controls)/!(internal)/**/*.@(mdx|stories.@(tsx|ts|jsx|js))', + '../blocks/src/@(blocks|controls)/*.@(mdx|stories.@(tsx|ts|jsx|js))', +]; const config: StorybookConfig = { stories: isBlocksOnly ? blocksOnlyStories : allStories, diff --git a/code/ui/blocks/src/blocks/Canvas.stories.tsx b/code/ui/blocks/src/blocks/Canvas.stories.tsx new file mode 100644 index 000000000000..54f13a1e5c05 --- /dev/null +++ b/code/ui/blocks/src/blocks/Canvas.stories.tsx @@ -0,0 +1,83 @@ +import React from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; +import { Canvas } from './Canvas'; +import { Story as StoryComponent } from './Story'; +import * as BooleanStories from '../controls/Boolean.stories'; + +const meta: Meta = { + component: Canvas, + parameters: { + relativeCsfPaths: ['../controls/Boolean.stories'], + }, + render: (args) => { + return ( + + + + ); + }, +}; +export default meta; + +type Story = StoryObj; + +export const BasicStory: Story = {}; + +export const WithSourceOpen: Story = { + args: { + withSource: 'open', + }, +}; +export const WithSourceClosed: Story = { + args: { + withSource: 'closed', + }, +}; + +// TODO: what is the purpose of mdxSource exactly? +export const WithMdxSource: Story = { + name: 'With MDX Source', + args: { + withSource: 'open', + mdxSource: `const thisIsCustomSource = true; +if (isSyntaxHighlighted) { + console.log('syntax highlighting is working'); +}`, + }, +}; + +export const WithoutSource: Story = { + args: { + withSource: 'none', + }, +}; + +export const WithToolbar: Story = { + args: { + withToolbar: true, + }, +}; +export const WithAdditionalActions: Story = { + args: { + additionalActions: [ + { + title: 'Open in GitHub', + onClick: () => { + window.open( + 'https://github.com/storybookjs/storybook/blob/next/code/ui/blocks/src/controls/Boolean.stories.tsx', + '_blank' + ); + }, + }, + { + title: 'Go to documentation', + onClick: () => { + window.open( + 'https://storybook.js.org/docs/react/essentials/controls#annotation', + '_blank' + ); + }, + }, + ], + }, +}; diff --git a/code/ui/blocks/src/blocks/Canvas.tsx b/code/ui/blocks/src/blocks/Canvas.tsx index 239bca9c8a79..a6977df4aa2f 100644 --- a/code/ui/blocks/src/blocks/Canvas.tsx +++ b/code/ui/blocks/src/blocks/Canvas.tsx @@ -1,5 +1,5 @@ -import type { FC, ReactElement, ReactNode, ReactNodeArray } from 'react'; -import React, { useContext } from 'react'; +import React, { Children, useContext } from 'react'; +import type { FC, ReactElement, ReactNode } from 'react'; import type { Framework } from '@storybook/types'; import type { PreviewProps as PurePreviewProps } from '../components'; import { Preview as PurePreview, PreviewSkeleton } from '../components'; @@ -7,62 +7,52 @@ import type { DocsContextProps } from './DocsContext'; import { DocsContext } from './DocsContext'; import type { SourceContextProps } from './SourceContainer'; import { SourceContext } from './SourceContainer'; -import { getSourceProps, SourceState } from './Source'; +import { useSourceProps, SourceState } from './Source'; import { useStories } from './useStory'; export { SourceState }; -type CanvasProps = PurePreviewProps & { +type CanvasProps = Omit & { withSource?: SourceState; mdxSource?: string; }; -const getPreviewProps = ( +const usePreviewProps = ( { withSource, mdxSource, children, ...props }: CanvasProps & { children?: ReactNode }, docsContext: DocsContextProps, sourceContext: SourceContextProps ) => { - let sourceState = withSource; - let isLoading = false; - if (sourceState === SourceState.NONE) { - return { isLoading, previewProps: props }; - } - if (mdxSource) { - return { - isLoading, - previewProps: { - ...props, - withSource: getSourceProps({ code: decodeURI(mdxSource) }, docsContext, sourceContext), - isExpanded: sourceState === SourceState.OPEN, - }, - }; - } - const childArray: ReactNodeArray = Array.isArray(children) ? children : [children]; - const storyChildren = childArray.filter( - (c: ReactElement) => c.props && (c.props.id || c.props.name || c.props.of) - ) as ReactElement[]; - const targetIds = storyChildren.map(({ props: { id, of, name } }) => { - if (id) return id; - if (of) return docsContext.storyIdByModuleExport(of); + /* + get all story IDs by traversing through the children, + filter out any non-story children (e.g. text nodes) + and then get the id from each story depending on available props + */ + const storyIds = (Children.toArray(children) as ReactElement[]) + .filter((c) => c.props && (c.props.id || c.props.name || c.props.of)) + .map(({ props: { id, of, name } }) => { + if (id) return id; + if (of) return docsContext.storyIdByModuleExport(of); - return docsContext.storyIdByName(name); - }); - - const sourceProps = getSourceProps({ ids: targetIds }, docsContext, sourceContext); - if (!sourceState) sourceState = sourceProps.state; - const storyIds = targetIds.map((targetId) => { - return targetId; - }); + return docsContext.storyIdByName(name); + }); const stories = useStories(storyIds, docsContext); - isLoading = stories.some((s) => !s); + const isLoading = stories.some((s) => !s); + const sourceProps = useSourceProps( + mdxSource ? { code: decodeURI(mdxSource) } : { ids: storyIds }, + docsContext, + sourceContext + ); + if (withSource === SourceState.NONE) { + return { isLoading, previewProps: props }; + } return { isLoading, previewProps: { ...props, // pass through columns etc. withSource: sourceProps, - isExpanded: sourceState === SourceState.OPEN, + isExpanded: (withSource || sourceProps.state) === SourceState.OPEN, }, }; }; @@ -70,7 +60,7 @@ const getPreviewProps = ( export const Canvas: FC = (props) => { const docsContext = useContext(DocsContext); const sourceContext = useContext(SourceContext); - const { isLoading, previewProps } = getPreviewProps(props, docsContext, sourceContext); + const { isLoading, previewProps } = usePreviewProps(props, docsContext, sourceContext); const { children } = props; if (isLoading) return ; diff --git a/code/ui/blocks/src/blocks/Source.tsx b/code/ui/blocks/src/blocks/Source.tsx index eb578b48085a..6b6454515bd9 100644 --- a/code/ui/blocks/src/blocks/Source.tsx +++ b/code/ui/blocks/src/blocks/Source.tsx @@ -89,7 +89,7 @@ const getSnippet = (snippet: string, story?: Store_Story): string => { type SourceStateProps = { state: SourceState }; type PureSourceProps = ComponentProps; -export const getSourceProps = ( +export const useSourceProps = ( props: SourceProps, docsContext: DocsContextProps, sourceContext: SourceContextProps @@ -100,8 +100,7 @@ export const getSourceProps = ( const singleProps = props as SingleSourceProps; const multiProps = props as MultiSourceProps; - let source = codeProps.code; // prefer user-specified code - let { format } = codeProps; // prefer user-specified code + let { format, code: source } = codeProps; // prefer user-specified code const targetIds = multiProps.ids || [singleProps.id || primaryId]; const storyIds = targetIds.map((targetId) => { @@ -151,6 +150,6 @@ export const getSourceProps = ( export const Source: FC = (props) => { const sourceContext = useContext(SourceContext); const docsContext = useContext(DocsContext); - const sourceProps = getSourceProps(props, docsContext, sourceContext); + const sourceProps = useSourceProps(props, docsContext, sourceContext); return ; }; diff --git a/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx b/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx new file mode 100644 index 000000000000..24afb9a39f0a --- /dev/null +++ b/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx @@ -0,0 +1,127 @@ +/// ; +/// ; +import React from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; +import { userEvent, within } from '@storybook/testing-library'; +import { expect } from '@storybook/jest'; +import { Canvas } from '../Canvas'; +import { Story as StoryComponent } from '../Story'; +import * as BooleanStories from '../../controls/Boolean.stories'; + +const meta: Meta = { + title: 'Blocks/Internal/Canvas', + component: Canvas, + parameters: { + relativeCsfPaths: ['../controls/Boolean.stories'], + }, + render: (args) => { + return ( + + + + ); + }, +}; +export default meta; + +type Story = StoryObj; + +const expectAmountOfStoriesInSource = + (amount: number): Story['play'] => + async ({ canvasElement }) => { + // TODO: it's bad that we have to resort to querySelector here, our markup isn't very accessible + + // Arrange - find the story element + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + const story = within(canvasElement.querySelector('.docs-story')!); + + // Act - click button to show code + await userEvent.click(story.getByText('Show code')); + + // Arrange - find the story element + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + const source = within(canvasElement.querySelector('pre')!); + // Assert - check that the correct amount of stories' source is shown + const booleanControlNodes = await source.findAllByText('BooleanControl'); + expect(booleanControlNodes).toHaveLength(amount); + }; + +export const MultipleChildren: Story = { + render: (args) => { + return ( + + + + + ); + }, + play: expectAmountOfStoriesInSource(2), +}; + +export const MultipleChildrenColumns: Story = { + args: { + isColumn: true, + }, + render: (args) => { + return ( + + + + + ); + }, + play: expectAmountOfStoriesInSource(2), +}; + +export const MultipleChildrenThreeColumns: Story = { + args: { + columns: 3, + }, + render: (args) => { + return ( + + + + + + + + + + + + ); + }, + play: expectAmountOfStoriesInSource(9), +}; + +export const MixedChildrenStories: Story = { + args: { isColumn: true }, + render: (args) => { + return ( + +

Headline for Boolean Controls true

+ +

Headline for Boolean Controls undefined

+ + + ); + }, + play: async (args) => { + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + await expectAmountOfStoriesInSource(2)!(args); + + // Arrange - find canvas element + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + const story = within(args.canvasElement.querySelector('.docs-story')!); + // Assert - find two headlines + expect(story.queryAllByText(/Headline for Boolean Controls/i)).toHaveLength(2); + + // Arrange - find source code element + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + const source = within(args.canvasElement.querySelector('pre')!); + + // Assert - headlines are not in source code + expect(source.queryByText(/Headline for Boolean Controls/i)).not.toBeInTheDocument(); + }, +}; diff --git a/code/ui/blocks/src/blocks/internal/README.md b/code/ui/blocks/src/blocks/internal/README.md new file mode 100644 index 000000000000..cad12d8f0a00 --- /dev/null +++ b/code/ui/blocks/src/blocks/internal/README.md @@ -0,0 +1,8 @@ +# Internal `@storybook/blocks` Stories + +This directory contains stories that are not suitable for public documentation, but that we still want to keep to ensure things don't break. + +Some blocks have deprecated features that users shouldn't use moving forward, and these internal stories represents those. +That way we can still test them and ensure the features work, until they are removed for good. + +This directory is not part of the (public) Blocks Storybook, but are included in the full UI Storybook. From 9be25a194654bc83696beb4bff663156335a8564 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Fri, 11 Nov 2022 22:48:18 +0100 Subject: [PATCH 2/9] make canvas interaction tests more robust --- .../internal/InternalCanvas.stories.tsx | 43 ++++++++----------- scripts/.eslintrc.js | 7 +++ 2 files changed, 25 insertions(+), 25 deletions(-) diff --git a/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx b/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx index 24afb9a39f0a..926f1aa3bacc 100644 --- a/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx +++ b/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx @@ -2,7 +2,7 @@ /// ; import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; -import { userEvent, within } from '@storybook/testing-library'; +import { userEvent, waitFor, within } from '@storybook/testing-library'; import { expect } from '@storybook/jest'; import { Canvas } from '../Canvas'; import { Story as StoryComponent } from '../Story'; @@ -29,21 +29,23 @@ type Story = StoryObj; const expectAmountOfStoriesInSource = (amount: number): Story['play'] => async ({ canvasElement }) => { - // TODO: it's bad that we have to resort to querySelector here, our markup isn't very accessible + const canvas = within(canvasElement); - // Arrange - find the story element - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - const story = within(canvasElement.querySelector('.docs-story')!); + // Arrange - find the "Show code" button + let showCodeButton = canvas.getByText('Show code'); + await waitFor(() => { + showCodeButton = canvas.getByText('Show code'); + expect(showCodeButton).toBeInTheDocument(); + }); // Act - click button to show code - await userEvent.click(story.getByText('Show code')); + await userEvent.click(showCodeButton); - // Arrange - find the story element - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - const source = within(canvasElement.querySelector('pre')!); // Assert - check that the correct amount of stories' source is shown - const booleanControlNodes = await source.findAllByText('BooleanControl'); - expect(booleanControlNodes).toHaveLength(amount); + await waitFor(async () => { + const booleanControlNodes = await canvas.findAllByText('BooleanControl'); + expect(booleanControlNodes).toHaveLength(amount); + }); }; export const MultipleChildren: Story = { @@ -108,20 +110,11 @@ export const MixedChildrenStories: Story = { ); }, play: async (args) => { - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - await expectAmountOfStoriesInSource(2)!(args); + // this function will also expand the source code + await expectAmountOfStoriesInSource(2)(args); + const canvas = within(args.canvasElement); - // Arrange - find canvas element - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - const story = within(args.canvasElement.querySelector('.docs-story')!); - // Assert - find two headlines - expect(story.queryAllByText(/Headline for Boolean Controls/i)).toHaveLength(2); - - // Arrange - find source code element - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - const source = within(args.canvasElement.querySelector('pre')!); - - // Assert - headlines are not in source code - expect(source.queryByText(/Headline for Boolean Controls/i)).not.toBeInTheDocument(); + // Assert - only find two headlines, those in the story, and none in the source code + expect(canvas.queryAllByText(/Headline for Boolean Controls/i)).toHaveLength(2); }, }; diff --git a/scripts/.eslintrc.js b/scripts/.eslintrc.js index 0ac9b62a302a..18ba9dc28dd3 100644 --- a/scripts/.eslintrc.js +++ b/scripts/.eslintrc.js @@ -28,5 +28,12 @@ module.exports = { 'import/extensions': ['error', 'always'], }, }, + { + files: ['*.stories.*'], + rules: { + // allow expect in stories + 'jest/no-standalone-expect': ['off'], + }, + }, ], }; From 8a6690632c6421e988d301037b25711750db18c0 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Fri, 11 Nov 2022 23:22:08 +0100 Subject: [PATCH 3/9] fix lint --- .../interactions/src/components/InteractionsPanel.stories.tsx | 1 - code/addons/interactions/template/stories/basics.stories.ts | 1 - 2 files changed, 2 deletions(-) diff --git a/code/addons/interactions/src/components/InteractionsPanel.stories.tsx b/code/addons/interactions/src/components/InteractionsPanel.stories.tsx index f55d28944c5a..179023b84906 100644 --- a/code/addons/interactions/src/components/InteractionsPanel.stories.tsx +++ b/code/addons/interactions/src/components/InteractionsPanel.stories.tsx @@ -1,4 +1,3 @@ -/* eslint-disable jest/no-standalone-expect */ import React from 'react'; import type { StoryObj, Meta } from '@storybook/react'; import { CallStates } from '@storybook/instrumenter'; diff --git a/code/addons/interactions/template/stories/basics.stories.ts b/code/addons/interactions/template/stories/basics.stories.ts index 57af27cc34fa..9a1919e748c9 100644 --- a/code/addons/interactions/template/stories/basics.stories.ts +++ b/code/addons/interactions/template/stories/basics.stories.ts @@ -1,4 +1,3 @@ -/* eslint-disable jest/no-standalone-expect */ import globalThis from 'global'; import { within, From 2941d9266fb79a2049572c1f9ce7405436afa0f9 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Tue, 15 Nov 2022 10:40:42 +0100 Subject: [PATCH 4/9] fix eslint config syntax --- scripts/.eslintrc.js | 1 + 1 file changed, 1 insertion(+) diff --git a/scripts/.eslintrc.js b/scripts/.eslintrc.js index 5a1714dbf083..fe8ebf3eb80c 100644 --- a/scripts/.eslintrc.js +++ b/scripts/.eslintrc.js @@ -33,6 +33,7 @@ module.exports = { rules: { // allow expect in stories 'jest/no-standalone-expect': ['off'], + }, }, { files: [ From 99dea360b0713657a70a3766143d80913b1968a0 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Tue, 15 Nov 2022 12:25:50 +0100 Subject: [PATCH 5/9] try without the Turbosnap Vite plugin --- code/package.json | 2 +- code/ui/.storybook/main.ts | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/code/package.json b/code/package.json index e69db64de779..624f534f8128 100644 --- a/code/package.json +++ b/code/package.json @@ -81,7 +81,7 @@ "storybook:blocks:chromatic": "BLOCKS_ONLY=true yarn storybook:ui:chromatic --project-token=${CHROMATIC_TOKEN_STORYBOOK_BLOCKS:-MISSING_PROJECT_TOKEN}", "storybook:ui": "NODE_OPTIONS=\"--preserve-symlinks --preserve-symlinks-main\" ./lib/cli/bin/index.js dev --port 6006 --config-dir ./ui/.storybook --no-manager-cache", "storybook:ui:build": "NODE_OPTIONS=\"--preserve-symlinks --preserve-symlinks-main\" ./lib/cli/bin/index.js build --config-dir ./ui/.storybook", - "storybook:ui:chromatic": "yarn chromatic --build-script-name storybook:ui:build --storybook-config-dir ./ui/.storybook --storybook-base-dir ./code/ui --project-token=${CHROMATIC_TOKEN_STORYBOOK_UI:-MISSING_PROJECT_TOKEN} --only-changed --exit-zero-on-changes --exit-once-uploaded", + "storybook:ui:chromatic": "yarn chromatic --build-script-name storybook:ui:build --storybook-config-dir ./ui/.storybook --storybook-base-dir ./code/ui --project-token=${CHROMATIC_TOKEN_STORYBOOK_UI:-MISSING_PROJECT_TOKEN} --exit-zero-on-changes --exit-once-uploaded", "task": "cd .. && yarn task", "test": "NODE_OPTIONS=--max_old_space_size=4096 jest --config ./jest.config.js", "test:cli": "npm --prefix lib/cli run test" diff --git a/code/ui/.storybook/main.ts b/code/ui/.storybook/main.ts index 0c7c19bc1c7a..18e6e3fca635 100644 --- a/code/ui/.storybook/main.ts +++ b/code/ui/.storybook/main.ts @@ -56,14 +56,14 @@ const config: StorybookConfig = { core: { disableTelemetry: true, }, - viteFinal: (vite, { configType }) => ({ - ...vite, + viteFinal: (viteConfig, { configType }) => ({ + ...viteConfig, plugins: [ - ...(vite.plugins || []), + ...(viteConfig.plugins || []), csfPlugin({}), - configType === 'PRODUCTION' ? pluginTurbosnap({ rootDir: vite.root || '' }) : [], + // configType === 'PRODUCTION' ? pluginTurbosnap({ rootDir: viteConfig.root || '' }) : [], ], - optimizeDeps: { ...vite.optimizeDeps, force: true }, + optimizeDeps: { ...viteConfig.optimizeDeps, force: true }, }), }; From 45ad9e8df1d2edf51facb9ffbe04a8a225bd49bf Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Wed, 16 Nov 2022 13:46:51 +0100 Subject: [PATCH 6/9] fix deepscan error --- code/ui/.storybook/main.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/ui/.storybook/main.ts b/code/ui/.storybook/main.ts index 18e6e3fca635..50c6f8716d2a 100644 --- a/code/ui/.storybook/main.ts +++ b/code/ui/.storybook/main.ts @@ -1,5 +1,5 @@ import { vite as csfPlugin } from '@storybook/csf-plugin'; -import pluginTurbosnap from 'vite-plugin-turbosnap'; +// import pluginTurbosnap from 'vite-plugin-turbosnap'; import type { StorybookConfig } from '../../frameworks/react-vite/dist'; const isBlocksOnly = process.env.BLOCKS_ONLY === 'true'; From 1745efcfcbab9dd076315e573e8787f8fb546ee2 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Wed, 16 Nov 2022 14:08:32 +0100 Subject: [PATCH 7/9] upgrade CI image for internal chromatic --- .circleci/config.yml | 2 +- code/ui/.storybook/main.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index e3a418f84f1c..a4e6e9c50a4a 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -403,7 +403,7 @@ jobs: - report-workflow-on-failure chromatic-internal-storybooks: executor: - class: medium + class: medium+ name: sb_node_16_browsers steps: # switched this to the CircleCI helper to get the full git history for TurboSnap diff --git a/code/ui/.storybook/main.ts b/code/ui/.storybook/main.ts index 50c6f8716d2a..62affdded356 100644 --- a/code/ui/.storybook/main.ts +++ b/code/ui/.storybook/main.ts @@ -1,5 +1,5 @@ import { vite as csfPlugin } from '@storybook/csf-plugin'; -// import pluginTurbosnap from 'vite-plugin-turbosnap'; +import pluginTurbosnap from 'vite-plugin-turbosnap'; import type { StorybookConfig } from '../../frameworks/react-vite/dist'; const isBlocksOnly = process.env.BLOCKS_ONLY === 'true'; @@ -61,7 +61,7 @@ const config: StorybookConfig = { plugins: [ ...(viteConfig.plugins || []), csfPlugin({}), - // configType === 'PRODUCTION' ? pluginTurbosnap({ rootDir: viteConfig.root || '' }) : [], + configType === 'PRODUCTION' ? pluginTurbosnap({ rootDir: viteConfig.root || '' }) : [], ], optimizeDeps: { ...viteConfig.optimizeDeps, force: true }, }), From 56777b9b5de1f361253336c6bf3b613295788974 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Wed, 16 Nov 2022 14:09:32 +0100 Subject: [PATCH 8/9] enable turbosnap for internal sb --- code/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/package.json b/code/package.json index 71d61def0758..0aba4dca7f39 100644 --- a/code/package.json +++ b/code/package.json @@ -81,7 +81,7 @@ "storybook:blocks:chromatic": "BLOCKS_ONLY=true yarn storybook:ui:chromatic --project-token=${CHROMATIC_TOKEN_STORYBOOK_BLOCKS:-MISSING_PROJECT_TOKEN}", "storybook:ui": "NODE_OPTIONS=\"--preserve-symlinks --preserve-symlinks-main\" ./lib/cli/bin/index.js dev --port 6006 --config-dir ./ui/.storybook --no-manager-cache", "storybook:ui:build": "NODE_OPTIONS=\"--preserve-symlinks --preserve-symlinks-main\" ./lib/cli/bin/index.js build --config-dir ./ui/.storybook", - "storybook:ui:chromatic": "yarn chromatic --build-script-name storybook:ui:build --storybook-config-dir ./ui/.storybook --storybook-base-dir ./code/ui --project-token=${CHROMATIC_TOKEN_STORYBOOK_UI:-MISSING_PROJECT_TOKEN} --exit-zero-on-changes --exit-once-uploaded", + "storybook:ui:chromatic": "yarn chromatic --build-script-name storybook:ui:build --storybook-config-dir ./ui/.storybook --storybook-base-dir ./code/ui --project-token=${CHROMATIC_TOKEN_STORYBOOK_UI:-MISSING_PROJECT_TOKEN} --only-changed --exit-zero-on-changes --exit-once-uploaded", "task": "cd .. && yarn task", "test": "NODE_OPTIONS=--max_old_space_size=4096 jest --config ./jest.config.js", "test:cli": "npm --prefix lib/cli run test" From c2b8465b3a2525feeab54374e3b5ea96fe6013fe Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Wed, 16 Nov 2022 14:22:28 +0100 Subject: [PATCH 9/9] fix typecheck error in jest addon --- code/addons/jest/src/shared.test.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/code/addons/jest/src/shared.test.ts b/code/addons/jest/src/shared.test.ts index e051f4563f61..1dd102378c41 100644 --- a/code/addons/jest/src/shared.test.ts +++ b/code/addons/jest/src/shared.test.ts @@ -27,7 +27,6 @@ describe('defineJestParameter', () => { }); test('returns null if filename is a module ID that cannot be inferred from', () => { - // @ts-expect-error (Converted from ts-ignore) expect(defineJestParameter({ fileName: 1234 })).toBeNull(); }); });