From 18dad97975bc7e39199e2741d2c6706d267aac3b Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Thu, 26 Jan 2023 13:30:45 +0100 Subject: [PATCH 01/14] fix canvas.withToolbar parameter in autodocs --- code/ui/blocks/src/blocks/DocsStory.tsx | 7 ++++++- code/ui/blocks/src/blocks/Primary.tsx | 4 +--- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/code/ui/blocks/src/blocks/DocsStory.tsx b/code/ui/blocks/src/blocks/DocsStory.tsx index 1c9599667ac..69964eb8e75 100644 --- a/code/ui/blocks/src/blocks/DocsStory.tsx +++ b/code/ui/blocks/src/blocks/DocsStory.tsx @@ -10,12 +10,17 @@ import { useOf } from './useOf'; export const DocsStory: FC = ({ of, expanded = true, - withToolbar = false, __forceInitialArgs = false, __primary = false, }) => { const { story } = useOf(of || 'story', ['story']); + // use withToolbar from parameters or default to true in autodocs + const withToolbar = + story.parameters.docs?.canvas?.withToolbar === undefined + ? true + : story.parameters.docs.canvas.withToolbar; + return ( {expanded && ( diff --git a/code/ui/blocks/src/blocks/Primary.tsx b/code/ui/blocks/src/blocks/Primary.tsx index 1a4e3667245..6a5ff1069f6 100644 --- a/code/ui/blocks/src/blocks/Primary.tsx +++ b/code/ui/blocks/src/blocks/Primary.tsx @@ -22,7 +22,5 @@ export const Primary: FC = ({ name }) => { } const storyId = name && docsContext.storyIdByName(name); const story = docsContext.storyById(storyId); - return story ? ( - - ) : null; + return story ? : null; }; From 653052fc8bc8fe9aa78dc2de68593cf54e13aa2f Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Thu, 26 Jan 2023 23:46:17 +0100 Subject: [PATCH 02/14] make headers in MDX unstyled components --- code/ui/blocks/src/blocks/Unstyled.mdx | 16 ++++++++++++++++ code/ui/blocks/src/blocks/mdx.tsx | 15 ++++++--------- code/ui/blocks/src/components/DocsPage.tsx | 2 -- 3 files changed, 22 insertions(+), 11 deletions(-) diff --git a/code/ui/blocks/src/blocks/Unstyled.mdx b/code/ui/blocks/src/blocks/Unstyled.mdx index 4e66f71287b..c50246fd791 100644 --- a/code/ui/blocks/src/blocks/Unstyled.mdx +++ b/code/ui/blocks/src/blocks/Unstyled.mdx @@ -8,11 +8,19 @@ However sometimes you might want some of your content to not have these styles a ```md import { Unstyled } from '@storybook/blocks'; +# This heading will be styled + +

So will this subheading

+ > This block quote will be styled ... and so will this paragraph. + # This heading will not be styled + +

Neither will this subheading

+ > This block quote will not be styled ... neither will this paragraph, nor the following component: @@ -22,11 +30,19 @@ import { Unstyled } from '@storybook/blocks'; Yields: +# This heading will be styled + +

So will this subheading

+ > This block quote will be styled ... and so will this paragraph. + # This heading will not be styled + +

Neither will this subheading

+ > This block quote will not be styled ... neither will this paragraph, nor the following component: diff --git a/code/ui/blocks/src/blocks/mdx.tsx b/code/ui/blocks/src/blocks/mdx.tsx index 1f62dab2bc1..2870b543b7c 100644 --- a/code/ui/blocks/src/blocks/mdx.tsx +++ b/code/ui/blocks/src/blocks/mdx.tsx @@ -1,7 +1,7 @@ import type { FC, SyntheticEvent } from 'react'; import React, { useContext } from 'react'; import { NAVIGATE_URL } from '@storybook/core-events'; -import { Code, components } from '@storybook/components'; +import { Code, components, nameSpaceClassNames } from '@storybook/components'; import { global } from '@storybook/global'; import { styled } from '@storybook/theming'; import { Source } from '../components'; @@ -120,13 +120,12 @@ export const AnchorMdx: FC = (props) => { return ; }; -const SUPPORTED_MDX_HEADERS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']; +const SUPPORTED_MDX_HEADERS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const; const OcticonHeaders = SUPPORTED_MDX_HEADERS.reduce( (acc, headerType) => ({ ...acc, - // @ts-expect-error (Converted from ts-ignore) - [headerType]: styled(components[headerType])({ + [headerType]: styled(headerType)({ '& svg': { visibility: 'hidden', }, @@ -213,12 +212,10 @@ export const HeaderMdx: FC = (props) => { ); } - - // @ts-expect-error (Converted from ts-ignore) - const Header = components[as]; - // Make sure it still work if "remark-slug" plugin is not present. - return
; + const Component = as as React.ElementType; + const { as: omittedAs, ...withoutAs } = props; + return ; }; export const HeadersMdx = SUPPORTED_MDX_HEADERS.reduce( diff --git a/code/ui/blocks/src/components/DocsPage.tsx b/code/ui/blocks/src/components/DocsPage.tsx index e81b1da2f9e..c7a2fd36951 100644 --- a/code/ui/blocks/src/components/DocsPage.tsx +++ b/code/ui/blocks/src/components/DocsPage.tsx @@ -121,8 +121,6 @@ export const DocsContent = styled.div(({ theme }) => { return { maxWidth: 1000, width: '100%', - - ...reset, [toGlobalSelector('a')]: { ...reset, fontSize: 'inherit', From 1cd89031acf740b1fe8f5c9cc343ffaf3397b4ed Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Fri, 27 Jan 2023 00:26:04 +0100 Subject: [PATCH 03/14] improve withToolbar logic --- code/ui/blocks/src/blocks/DocsStory.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/code/ui/blocks/src/blocks/DocsStory.tsx b/code/ui/blocks/src/blocks/DocsStory.tsx index 69964eb8e75..6d8d82842a3 100644 --- a/code/ui/blocks/src/blocks/DocsStory.tsx +++ b/code/ui/blocks/src/blocks/DocsStory.tsx @@ -17,9 +17,9 @@ export const DocsStory: FC = ({ // use withToolbar from parameters or default to true in autodocs const withToolbar = - story.parameters.docs?.canvas?.withToolbar === undefined - ? true - : story.parameters.docs.canvas.withToolbar; + story.parameters.docs?.canvas?.withToolbar !== undefined + ? story.parameters.docs.canvas.withToolbar + : true; return ( From df8fbe3b90ed87d5f8ee4aae5fc7566d37110c8e Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Fri, 27 Jan 2023 00:26:44 +0100 Subject: [PATCH 04/14] add stories for Primary and Stories --- code/ui/blocks/src/blocks/Primary.stories.tsx | 21 +++++++++++++++++++ code/ui/blocks/src/blocks/Stories.stories.tsx | 21 +++++++++++++++++++ .../examples/StoriesParameters.stories.tsx | 18 ++++++++++++++++ 3 files changed, 60 insertions(+) create mode 100644 code/ui/blocks/src/blocks/Primary.stories.tsx create mode 100644 code/ui/blocks/src/blocks/Stories.stories.tsx create mode 100644 code/ui/blocks/src/examples/StoriesParameters.stories.tsx diff --git a/code/ui/blocks/src/blocks/Primary.stories.tsx b/code/ui/blocks/src/blocks/Primary.stories.tsx new file mode 100644 index 00000000000..bf494329b92 --- /dev/null +++ b/code/ui/blocks/src/blocks/Primary.stories.tsx @@ -0,0 +1,21 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Primary } from './Primary'; + +const meta = { + component: Primary, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + parameters: { + relativeCsfPaths: ['../examples/Button.stories'], + }, +}; +export const WithoutToolbar: Story = { + parameters: { + relativeCsfPaths: ['../examples/StoriesParameters.stories'], + }, +}; diff --git a/code/ui/blocks/src/blocks/Stories.stories.tsx b/code/ui/blocks/src/blocks/Stories.stories.tsx new file mode 100644 index 00000000000..e69a0fb1bbb --- /dev/null +++ b/code/ui/blocks/src/blocks/Stories.stories.tsx @@ -0,0 +1,21 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Stories } from './Stories'; + +const meta = { + component: Stories, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + parameters: { + relativeCsfPaths: ['../examples/Button.stories'], + }, +}; +export const WithoutToolbar: Story = { + parameters: { + relativeCsfPaths: ['../examples/StoriesParameters.stories'], + }, +}; diff --git a/code/ui/blocks/src/examples/StoriesParameters.stories.tsx b/code/ui/blocks/src/examples/StoriesParameters.stories.tsx new file mode 100644 index 00000000000..154eae88fec --- /dev/null +++ b/code/ui/blocks/src/examples/StoriesParameters.stories.tsx @@ -0,0 +1,18 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { EmptyExample } from './EmptyExample'; + +const meta = { + title: 'examples/Stories for the Stories and Primary Block', + component: EmptyExample, +} satisfies Meta; +export default meta; + +type Story = StoryObj; + +export const WithoutToolbar: Story = { + parameters: { docs: { canvas: { withToolbar: false } } }, +}; + +export const SecondStory: Story = {}; +export const ThirdStory: Story = {}; From 58c65443e0d914ae594520e1d7b700e130d5de18 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Fri, 27 Jan 2023 00:39:16 +0100 Subject: [PATCH 05/14] Support unattached Canvas without story children --- code/ui/blocks/src/blocks/Source.tsx | 10 ++++++++-- .../blocks/internal/InternalCanvas.stories.tsx | 17 +++++++++++++++++ 2 files changed, 25 insertions(+), 2 deletions(-) diff --git a/code/ui/blocks/src/blocks/Source.tsx b/code/ui/blocks/src/blocks/Source.tsx index f63d497af04..e0d58c80dc1 100644 --- a/code/ui/blocks/src/blocks/Source.tsx +++ b/code/ui/blocks/src/blocks/Source.tsx @@ -114,10 +114,16 @@ export const useSourceProps = ( const resolved = docsContext.resolveOf(props.of, ['story']); stories = [resolved.story]; } else if (stories.length === 0) { - stories = [docsContext.storyById()]; + try { + const primaryStory = docsContext.storyById(); + stories = [primaryStory]; + } catch (error) { + // if it fails to get the primary story it's most likely because the doc is unattached + stories = []; + } } - const sourceParameters = (stories[0].parameters.docs?.source || {}) as SourceParameters; + const sourceParameters = (stories[0]?.parameters.docs?.source || {}) as SourceParameters; let { code } = props; // We will fall back to `sourceParameters.code`, but per story below let format = props.format ?? sourceParameters.format; const language = props.language ?? sourceParameters.language ?? 'jsx'; diff --git a/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx b/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx index c34fe085bc3..6f28f564798 100644 --- a/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx +++ b/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx @@ -50,6 +50,23 @@ export const BasicStoryChildUnattached: Story = { parameters: { attached: false }, }; +export const NoStoryChildrenUnattached: Story = { + parameters: { attached: false }, + render: (args) => { + return ( + +

This is a plain paragraph, no stories

+ + ); + }, +}; +export const NoStoryChildrenUnattachedWithMDXSource: Story = { + ...NoStoryChildrenUnattached, + args: { + mdxSource: `const customStaticSource = true;`, + }, +}; + export const WithSourceOpen: Story = { args: { withSource: SourceState.OPEN, From f2685dbfed7813cff1ea54522ad7985577d48ce7 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Fri, 27 Jan 2023 00:45:08 +0100 Subject: [PATCH 06/14] fix type error --- code/ui/blocks/src/components/DocsPage.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/code/ui/blocks/src/components/DocsPage.tsx b/code/ui/blocks/src/components/DocsPage.tsx index c7a2fd36951..f4d9c72a288 100644 --- a/code/ui/blocks/src/components/DocsPage.tsx +++ b/code/ui/blocks/src/components/DocsPage.tsx @@ -70,6 +70,7 @@ export const Subtitle = styled.h2(withReset, ({ theme }) => ({ color: transparentize(0.25, theme.color.defaultText), })); +// @ts-expect-error don't know why it doesn't accept our returned styles. if we add `...{}` anywhere to the returned object it stops erroring export const DocsContent = styled.div(({ theme }) => { const reset = { fontFamily: theme.typography.fonts.base, From 979c18694c3585630aeed8820ef5e218846fd026 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Fri, 27 Jan 2023 09:18:51 +0100 Subject: [PATCH 07/14] improve withToolbar logic Co-authored-by: Tom Coleman --- code/ui/blocks/src/blocks/DocsStory.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/code/ui/blocks/src/blocks/DocsStory.tsx b/code/ui/blocks/src/blocks/DocsStory.tsx index 6d8d82842a3..2a62cdab117 100644 --- a/code/ui/blocks/src/blocks/DocsStory.tsx +++ b/code/ui/blocks/src/blocks/DocsStory.tsx @@ -16,10 +16,7 @@ export const DocsStory: FC = ({ const { story } = useOf(of || 'story', ['story']); // use withToolbar from parameters or default to true in autodocs - const withToolbar = - story.parameters.docs?.canvas?.withToolbar !== undefined - ? story.parameters.docs.canvas.withToolbar - : true; + const withToolbar = story.parameters.docs?.canvas?.withToolbar ?? true; return ( From d441a0be1e475725b93228ded9dd081ad0d8f625 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Fri, 27 Jan 2023 20:58:47 +0100 Subject: [PATCH 08/14] fix toolbar appearing in Stories --- code/ui/blocks/src/blocks/DocsStory.tsx | 3 ++- code/ui/blocks/src/blocks/Primary.tsx | 4 +++- code/ui/blocks/src/blocks/Stories.stories.tsx | 8 +++++++- code/ui/blocks/src/examples/StoriesParameters.stories.tsx | 4 +++- 4 files changed, 15 insertions(+), 4 deletions(-) diff --git a/code/ui/blocks/src/blocks/DocsStory.tsx b/code/ui/blocks/src/blocks/DocsStory.tsx index 2a62cdab117..70960447402 100644 --- a/code/ui/blocks/src/blocks/DocsStory.tsx +++ b/code/ui/blocks/src/blocks/DocsStory.tsx @@ -10,13 +10,14 @@ import { useOf } from './useOf'; export const DocsStory: FC = ({ of, expanded = true, + withToolbar: withToolbarProp = false, __forceInitialArgs = false, __primary = false, }) => { const { story } = useOf(of || 'story', ['story']); // use withToolbar from parameters or default to true in autodocs - const withToolbar = story.parameters.docs?.canvas?.withToolbar ?? true; + const withToolbar = story.parameters.docs?.canvas?.withToolbar ?? withToolbarProp; return ( diff --git a/code/ui/blocks/src/blocks/Primary.tsx b/code/ui/blocks/src/blocks/Primary.tsx index 6a5ff1069f6..7583200f72c 100644 --- a/code/ui/blocks/src/blocks/Primary.tsx +++ b/code/ui/blocks/src/blocks/Primary.tsx @@ -22,5 +22,7 @@ export const Primary: FC = ({ name }) => { } const storyId = name && docsContext.storyIdByName(name); const story = docsContext.storyById(storyId); - return story ? : null; + return story ? ( + + ) : null; }; diff --git a/code/ui/blocks/src/blocks/Stories.stories.tsx b/code/ui/blocks/src/blocks/Stories.stories.tsx index e69a0fb1bbb..86837645c1f 100644 --- a/code/ui/blocks/src/blocks/Stories.stories.tsx +++ b/code/ui/blocks/src/blocks/Stories.stories.tsx @@ -14,7 +14,13 @@ export const Default: Story = { relativeCsfPaths: ['../examples/Button.stories'], }, }; -export const WithoutToolbar: Story = { +export const WithoutPrimary: Story = { + args: { includePrimary: false }, + parameters: { + relativeCsfPaths: ['../examples/Button.stories'], + }, +}; +export const DifferentToolbars: Story = { parameters: { relativeCsfPaths: ['../examples/StoriesParameters.stories'], }, diff --git a/code/ui/blocks/src/examples/StoriesParameters.stories.tsx b/code/ui/blocks/src/examples/StoriesParameters.stories.tsx index 154eae88fec..731291ad75f 100644 --- a/code/ui/blocks/src/examples/StoriesParameters.stories.tsx +++ b/code/ui/blocks/src/examples/StoriesParameters.stories.tsx @@ -14,5 +14,7 @@ export const WithoutToolbar: Story = { parameters: { docs: { canvas: { withToolbar: false } } }, }; -export const SecondStory: Story = {}; +export const WithToolbar: Story = { + parameters: { docs: { canvas: { withToolbar: true } } }, +}; export const ThirdStory: Story = {}; From 16eb6966d2b0769fcac89fc80a9a1f1bd0712eec Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Fri, 27 Jan 2023 23:16:46 +0100 Subject: [PATCH 09/14] fix __forceInitialArgs to not update source --- code/ui/blocks/src/blocks/Canvas.tsx | 31 ++++++++--- code/ui/blocks/src/blocks/DocsStory.tsx | 9 +++- code/ui/blocks/src/blocks/Source.tsx | 22 +++++--- code/ui/blocks/src/blocks/SourceContainer.tsx | 7 +-- code/ui/blocks/src/blocks/Stories.tsx | 2 +- .../internal/InternalCanvas.stories.tsx | 52 ++++++++++++++++++- code/ui/blocks/src/blocks/types.ts | 2 +- 7 files changed, 102 insertions(+), 23 deletions(-) diff --git a/code/ui/blocks/src/blocks/Canvas.tsx b/code/ui/blocks/src/blocks/Canvas.tsx index c6bf9c1b7f7..20d6e0a6aa0 100644 --- a/code/ui/blocks/src/blocks/Canvas.tsx +++ b/code/ui/blocks/src/blocks/Canvas.tsx @@ -1,3 +1,4 @@ +/* eslint-disable no-underscore-dangle */ /* eslint-disable react/destructuring-assignment */ import React, { Children, useContext } from 'react'; import type { FC, ReactElement, ReactNode } from 'react'; @@ -89,7 +90,11 @@ type CanvasProps = Pick; + story?: Pick; + /** + * @see {StoryProps['__forceInitialArgs']} + */ + __forceInitial?: StoryProps['__forceInitialArgs']; }; const useDeprecatedPreviewProps = ( @@ -114,11 +119,13 @@ const useDeprecatedPreviewProps = ( const stories = useStories(storyIds, docsContext); const isLoading = stories.some((s) => !s); - const sourceProps = useSourceProps( - mdxSource ? { code: decodeURI(mdxSource), of: props.of } : { ids: storyIds, of: props.of }, + const sourceProps = useSourceProps({ + props: mdxSource + ? { code: decodeURI(mdxSource), of: props.of } + : { ids: storyIds, of: props.of }, docsContext, - sourceContext - ); + sourceContext, + }); if (withSource === SourceState.NONE) { return { isLoading, previewProps: props }; } @@ -175,7 +182,12 @@ export const Canvas: FC = (props) => { } } try { - sourceProps = useSourceProps({ ...source, of }, docsContext, sourceContext); + sourceProps = useSourceProps({ + props: { ...source, of }, + docsContext, + sourceContext, + __forceInitialCode: props.__forceInitial, + }); } catch (error) { if (!children) { hookError = error; @@ -232,7 +244,12 @@ export const Canvas: FC = (props) => { className={className} layout={layout} > - + ); }; diff --git a/code/ui/blocks/src/blocks/DocsStory.tsx b/code/ui/blocks/src/blocks/DocsStory.tsx index 70960447402..ab2c195c572 100644 --- a/code/ui/blocks/src/blocks/DocsStory.tsx +++ b/code/ui/blocks/src/blocks/DocsStory.tsx @@ -11,7 +11,7 @@ export const DocsStory: FC = ({ of, expanded = true, withToolbar: withToolbarProp = false, - __forceInitialArgs = false, + __forceInitial = false, __primary = false, }) => { const { story } = useOf(of || 'story', ['story']); @@ -27,7 +27,12 @@ export const DocsStory: FC = ({ )} - + ); }; diff --git a/code/ui/blocks/src/blocks/Source.tsx b/code/ui/blocks/src/blocks/Source.tsx index e0d58c80dc1..a1dc54153f0 100644 --- a/code/ui/blocks/src/blocks/Source.tsx +++ b/code/ui/blocks/src/blocks/Source.tsx @@ -64,7 +64,7 @@ const getStorySource = (storyId: StoryId, sourceContext: SourceContextProps): So const { sources } = sourceContext; // source rendering is async so source is unavailable at the start of the render cycle, // so we fail gracefully here without warning - return sources?.[storyId] || { code: '' }; + return sources?.[storyId] || { code: '', initialCode: '' }; }; const getSnippet = ( @@ -97,11 +97,17 @@ const getSnippet = ( type SourceStateProps = { state: SourceState }; type PureSourceProps = ComponentProps; -export const useSourceProps = ( - props: SourceProps, - docsContext: DocsContextProps, - sourceContext: SourceContextProps -): PureSourceProps & SourceStateProps => { +export const useSourceProps = ({ + props, + docsContext, + sourceContext, + __forceInitialCode = false, +}: { + props: SourceProps; + docsContext: DocsContextProps; + sourceContext: SourceContextProps; + __forceInitialCode?: boolean; +}): PureSourceProps & SourceStateProps => { const storyIds = props.ids || (props.id ? [props.id] : []); const storiesFromIds = useStories(storyIds, docsContext); if (!storiesFromIds.every(Boolean)) { @@ -137,7 +143,7 @@ export const useSourceProps = ( // Take the format from the first story format = source.format ?? story.parameters.docs?.source?.format ?? false; } - return getSnippet(source.code, story, props.type); + return getSnippet(__forceInitialCode ? source.initialCode : source.code, story, props.type); }) .join('\n\n'); } @@ -164,6 +170,6 @@ export const useSourceProps = ( export const Source: FC = (props) => { const sourceContext = useContext(SourceContext); const docsContext = useContext(DocsContext); - const { state, ...sourceProps } = useSourceProps(props, docsContext, sourceContext); + const { state, ...sourceProps } = useSourceProps({ props, docsContext, sourceContext }); return ; }; diff --git a/code/ui/blocks/src/blocks/SourceContainer.tsx b/code/ui/blocks/src/blocks/SourceContainer.tsx index ffc78191de2..89fc911375a 100644 --- a/code/ui/blocks/src/blocks/SourceContainer.tsx +++ b/code/ui/blocks/src/blocks/SourceContainer.tsx @@ -11,6 +11,7 @@ import type { StoryId } from '@storybook/types'; export interface SourceItem { code: string; format?: SyntaxHighlighterFormatTypes; + initialCode: string; } export type StorySources = Record; @@ -27,18 +28,18 @@ export const SourceContainer: FC<{ channel: Channel }> = ({ children, channel }) useEffect(() => { const handleSnippetRendered = ( id: StoryId, - newSource: string, + newCode: string, format: SyntaxHighlighterFormatTypes = false ) => { // optimization: if the source is the same, ignore the incoming event - if (sources[id] && sources[id].code === newSource) { + if (sources[id] && sources[id].code === newCode) { return; } setSources((current) => { const newSources = { ...current, - [id]: { code: newSource, format }, + [id]: { code: newCode, format, initialCode: current[id]?.initialCode || newCode }, }; if (!deepEqual(current, newSources)) { diff --git a/code/ui/blocks/src/blocks/Stories.tsx b/code/ui/blocks/src/blocks/Stories.tsx index 4accadb42ee..0fa31fd16b9 100644 --- a/code/ui/blocks/src/blocks/Stories.tsx +++ b/code/ui/blocks/src/blocks/Stories.tsx @@ -24,7 +24,7 @@ export const Stories: FC = ({ title, includePrimary = true }) => { {title} {stories.map( (story) => - story && + story && )} ); diff --git a/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx b/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx index 6f28f564798..276f1495041 100644 --- a/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx +++ b/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx @@ -2,12 +2,19 @@ /// ; 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 type { PlayFunctionContext, WebRenderer } from '@storybook/types'; +import { STORY_ARGS_UPDATED, UPDATE_STORY_ARGS, RESET_STORY_ARGS } from '@storybook/core-events'; +import type { Channel } from '@storybook/channels'; import { Canvas, SourceState } from '../Canvas'; import { Story as StoryComponent } from '../Story'; import * as ButtonStories from '../../examples/Button.stories'; import * as CanvasParameterStories from '../../examples/CanvasParameters.stories'; +import type { DocsContextProps } from '../DocsContext'; +import { SourceContainer } from '../SourceContainer'; + +const channel = (window as any).__STORYBOOK_ADDONS_CHANNEL__ as Channel; const meta: Meta = { component: Canvas, @@ -15,6 +22,13 @@ const meta: Meta = { theme: 'light', relativeCsfPaths: ['../examples/Button.stories', '../examples/CanvasParameters.stories'], }, + decorators: [ + (Story) => ( + + + + ), + ], render: (args) => { return ( @@ -208,3 +222,39 @@ export const MixedChildrenStories: Story = { expect(canvas.queryAllByText(/Headline for /i)).toHaveLength(2); }, }; + +export const ForceInitial: Story = { + args: { + of: ButtonStories.Primary, + __forceInitial: true, + sourceState: 'shown', + }, + render: (args) => , + // test that it ignores updated args by emitting an arg update and assert that it isn't reflected in the story nor source + play: async ({ args, canvasElement, loaded }: PlayFunctionContext) => { + const docsContext = loaded.docsContext as DocsContextProps; + const { + story: { id: storyId }, + } = docsContext.resolveOf(args.of, ['story']); + + // expect Button once in story, twice in Source, and 'true' in source + await waitFor(() => expect(within(canvasElement).getAllByText('Button')).toHaveLength(3)); + + const updatedPromise = new Promise((resolve) => { + channel.once(STORY_ARGS_UPDATED, resolve); + }); + await channel.emit(UPDATE_STORY_ARGS, { + storyId, + updatedArgs: { label: 'Updated' }, + }); + await updatedPromise; + + // expect no changes + await waitFor(() => expect(within(canvasElement).getAllByText('Button')).toHaveLength(3)); + + await channel.emit(RESET_STORY_ARGS, { storyId }); + await new Promise((resolve) => { + channel.once(STORY_ARGS_UPDATED, resolve); + }); + }, +}; diff --git a/code/ui/blocks/src/blocks/types.ts b/code/ui/blocks/src/blocks/types.ts index 8a8dba5bfbc..ab2d9f7e89e 100644 --- a/code/ui/blocks/src/blocks/types.ts +++ b/code/ui/blocks/src/blocks/types.ts @@ -10,6 +10,6 @@ export type DocsStoryProps = { of: ModuleExport; expanded?: boolean; withToolbar?: boolean; - __forceInitialArgs?: boolean; + __forceInitial?: boolean; __primary?: boolean; }; From ca22df8e72e1100962c60e674136f09c6c1ee635 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Sat, 28 Jan 2023 00:46:09 +0100 Subject: [PATCH 10/14] Revert "fix __forceInitialArgs to not update source" This reverts commit 16eb6966d2b0769fcac89fc80a9a1f1bd0712eec. --- code/ui/blocks/src/blocks/Canvas.tsx | 31 +++-------- code/ui/blocks/src/blocks/DocsStory.tsx | 9 +--- code/ui/blocks/src/blocks/Source.tsx | 22 +++----- code/ui/blocks/src/blocks/SourceContainer.tsx | 7 ++- code/ui/blocks/src/blocks/Stories.tsx | 2 +- .../internal/InternalCanvas.stories.tsx | 52 +------------------ code/ui/blocks/src/blocks/types.ts | 2 +- 7 files changed, 23 insertions(+), 102 deletions(-) diff --git a/code/ui/blocks/src/blocks/Canvas.tsx b/code/ui/blocks/src/blocks/Canvas.tsx index 20d6e0a6aa0..c6bf9c1b7f7 100644 --- a/code/ui/blocks/src/blocks/Canvas.tsx +++ b/code/ui/blocks/src/blocks/Canvas.tsx @@ -1,4 +1,3 @@ -/* eslint-disable no-underscore-dangle */ /* eslint-disable react/destructuring-assignment */ import React, { Children, useContext } from 'react'; import type { FC, ReactElement, ReactNode } from 'react'; @@ -90,11 +89,7 @@ type CanvasProps = Pick; - /** - * @see {StoryProps['__forceInitialArgs']} - */ - __forceInitial?: StoryProps['__forceInitialArgs']; + story?: Pick; }; const useDeprecatedPreviewProps = ( @@ -119,13 +114,11 @@ const useDeprecatedPreviewProps = ( const stories = useStories(storyIds, docsContext); const isLoading = stories.some((s) => !s); - const sourceProps = useSourceProps({ - props: mdxSource - ? { code: decodeURI(mdxSource), of: props.of } - : { ids: storyIds, of: props.of }, + const sourceProps = useSourceProps( + mdxSource ? { code: decodeURI(mdxSource), of: props.of } : { ids: storyIds, of: props.of }, docsContext, - sourceContext, - }); + sourceContext + ); if (withSource === SourceState.NONE) { return { isLoading, previewProps: props }; } @@ -182,12 +175,7 @@ export const Canvas: FC = (props) => { } } try { - sourceProps = useSourceProps({ - props: { ...source, of }, - docsContext, - sourceContext, - __forceInitialCode: props.__forceInitial, - }); + sourceProps = useSourceProps({ ...source, of }, docsContext, sourceContext); } catch (error) { if (!children) { hookError = error; @@ -244,12 +232,7 @@ export const Canvas: FC = (props) => { className={className} layout={layout} > - + ); }; diff --git a/code/ui/blocks/src/blocks/DocsStory.tsx b/code/ui/blocks/src/blocks/DocsStory.tsx index ab2c195c572..70960447402 100644 --- a/code/ui/blocks/src/blocks/DocsStory.tsx +++ b/code/ui/blocks/src/blocks/DocsStory.tsx @@ -11,7 +11,7 @@ export const DocsStory: FC = ({ of, expanded = true, withToolbar: withToolbarProp = false, - __forceInitial = false, + __forceInitialArgs = false, __primary = false, }) => { const { story } = useOf(of || 'story', ['story']); @@ -27,12 +27,7 @@ export const DocsStory: FC = ({ )} - + ); }; diff --git a/code/ui/blocks/src/blocks/Source.tsx b/code/ui/blocks/src/blocks/Source.tsx index 9a0d83833e8..4957ad5aa55 100644 --- a/code/ui/blocks/src/blocks/Source.tsx +++ b/code/ui/blocks/src/blocks/Source.tsx @@ -64,7 +64,7 @@ const getStorySource = (storyId: StoryId, sourceContext: SourceContextProps): So const { sources } = sourceContext; // source rendering is async so source is unavailable at the start of the render cycle, // so we fail gracefully here without warning - return sources?.[storyId] || { code: '', initialCode: '' }; + return sources?.[storyId] || { code: '' }; }; const getSnippet = ( @@ -97,17 +97,11 @@ const getSnippet = ( type SourceStateProps = { state: SourceState }; type PureSourceProps = ComponentProps; -export const useSourceProps = ({ - props, - docsContext, - sourceContext, - __forceInitialCode = false, -}: { - props: SourceProps; - docsContext: DocsContextProps; - sourceContext: SourceContextProps; - __forceInitialCode?: boolean; -}): PureSourceProps & SourceStateProps => { +export const useSourceProps = ( + props: SourceProps, + docsContext: DocsContextProps, + sourceContext: SourceContextProps +): PureSourceProps & SourceStateProps => { const storyIds = props.ids || (props.id ? [props.id] : []); const storiesFromIds = useStories(storyIds, docsContext); if (!storiesFromIds.every(Boolean)) { @@ -143,7 +137,7 @@ export const useSourceProps = ({ // Take the format from the first story format = source.format ?? story.parameters.docs?.source?.format ?? false; } - return getSnippet(__forceInitialCode ? source.initialCode : source.code, story, props.type); + return getSnippet(source.code, story, props.type); }) .join('\n\n'); } @@ -170,6 +164,6 @@ export const useSourceProps = ({ export const Source: FC = (props) => { const sourceContext = useContext(SourceContext); const docsContext = useContext(DocsContext); - const { state, ...sourceProps } = useSourceProps({ props, docsContext, sourceContext }); + const { state, ...sourceProps } = useSourceProps(props, docsContext, sourceContext); return ; }; diff --git a/code/ui/blocks/src/blocks/SourceContainer.tsx b/code/ui/blocks/src/blocks/SourceContainer.tsx index 89fc911375a..ffc78191de2 100644 --- a/code/ui/blocks/src/blocks/SourceContainer.tsx +++ b/code/ui/blocks/src/blocks/SourceContainer.tsx @@ -11,7 +11,6 @@ import type { StoryId } from '@storybook/types'; export interface SourceItem { code: string; format?: SyntaxHighlighterFormatTypes; - initialCode: string; } export type StorySources = Record; @@ -28,18 +27,18 @@ export const SourceContainer: FC<{ channel: Channel }> = ({ children, channel }) useEffect(() => { const handleSnippetRendered = ( id: StoryId, - newCode: string, + newSource: string, format: SyntaxHighlighterFormatTypes = false ) => { // optimization: if the source is the same, ignore the incoming event - if (sources[id] && sources[id].code === newCode) { + if (sources[id] && sources[id].code === newSource) { return; } setSources((current) => { const newSources = { ...current, - [id]: { code: newCode, format, initialCode: current[id]?.initialCode || newCode }, + [id]: { code: newSource, format }, }; if (!deepEqual(current, newSources)) { diff --git a/code/ui/blocks/src/blocks/Stories.tsx b/code/ui/blocks/src/blocks/Stories.tsx index 0fa31fd16b9..4accadb42ee 100644 --- a/code/ui/blocks/src/blocks/Stories.tsx +++ b/code/ui/blocks/src/blocks/Stories.tsx @@ -24,7 +24,7 @@ export const Stories: FC = ({ title, includePrimary = true }) => { {title} {stories.map( (story) => - story && + story && )} ); diff --git a/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx b/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx index 276f1495041..6f28f564798 100644 --- a/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx +++ b/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx @@ -2,19 +2,12 @@ /// ; import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; -import { userEvent, waitFor, within } from '@storybook/testing-library'; +import { userEvent, within } from '@storybook/testing-library'; import { expect } from '@storybook/jest'; -import type { PlayFunctionContext, WebRenderer } from '@storybook/types'; -import { STORY_ARGS_UPDATED, UPDATE_STORY_ARGS, RESET_STORY_ARGS } from '@storybook/core-events'; -import type { Channel } from '@storybook/channels'; import { Canvas, SourceState } from '../Canvas'; import { Story as StoryComponent } from '../Story'; import * as ButtonStories from '../../examples/Button.stories'; import * as CanvasParameterStories from '../../examples/CanvasParameters.stories'; -import type { DocsContextProps } from '../DocsContext'; -import { SourceContainer } from '../SourceContainer'; - -const channel = (window as any).__STORYBOOK_ADDONS_CHANNEL__ as Channel; const meta: Meta = { component: Canvas, @@ -22,13 +15,6 @@ const meta: Meta = { theme: 'light', relativeCsfPaths: ['../examples/Button.stories', '../examples/CanvasParameters.stories'], }, - decorators: [ - (Story) => ( - - - - ), - ], render: (args) => { return ( @@ -222,39 +208,3 @@ export const MixedChildrenStories: Story = { expect(canvas.queryAllByText(/Headline for /i)).toHaveLength(2); }, }; - -export const ForceInitial: Story = { - args: { - of: ButtonStories.Primary, - __forceInitial: true, - sourceState: 'shown', - }, - render: (args) => , - // test that it ignores updated args by emitting an arg update and assert that it isn't reflected in the story nor source - play: async ({ args, canvasElement, loaded }: PlayFunctionContext) => { - const docsContext = loaded.docsContext as DocsContextProps; - const { - story: { id: storyId }, - } = docsContext.resolveOf(args.of, ['story']); - - // expect Button once in story, twice in Source, and 'true' in source - await waitFor(() => expect(within(canvasElement).getAllByText('Button')).toHaveLength(3)); - - const updatedPromise = new Promise((resolve) => { - channel.once(STORY_ARGS_UPDATED, resolve); - }); - await channel.emit(UPDATE_STORY_ARGS, { - storyId, - updatedArgs: { label: 'Updated' }, - }); - await updatedPromise; - - // expect no changes - await waitFor(() => expect(within(canvasElement).getAllByText('Button')).toHaveLength(3)); - - await channel.emit(RESET_STORY_ARGS, { storyId }); - await new Promise((resolve) => { - channel.once(STORY_ARGS_UPDATED, resolve); - }); - }, -}; diff --git a/code/ui/blocks/src/blocks/types.ts b/code/ui/blocks/src/blocks/types.ts index ab2d9f7e89e..8a8dba5bfbc 100644 --- a/code/ui/blocks/src/blocks/types.ts +++ b/code/ui/blocks/src/blocks/types.ts @@ -10,6 +10,6 @@ export type DocsStoryProps = { of: ModuleExport; expanded?: boolean; withToolbar?: boolean; - __forceInitial?: boolean; + __forceInitialArgs?: boolean; __primary?: boolean; }; From 99865535871b4dd641a5de0b9a8190359955014d Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Mon, 30 Jan 2023 00:25:40 +0100 Subject: [PATCH 11/14] allow Canvas without story children --- code/ui/blocks/src/blocks/Source.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/code/ui/blocks/src/blocks/Source.tsx b/code/ui/blocks/src/blocks/Source.tsx index 4957ad5aa55..9ca2f0230db 100644 --- a/code/ui/blocks/src/blocks/Source.tsx +++ b/code/ui/blocks/src/blocks/Source.tsx @@ -118,8 +118,7 @@ export const useSourceProps = ( // Always fall back to the primary story for source parameters, even if code is set. stories = [docsContext.storyById()]; } catch (err) { - // You are allowed to use unattached. - if (!props.code) throw err; + // You are allowed to use and unattached. } } From 5a764fed4da053fab6291eca018874a2110ca104 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Mon, 30 Jan 2023 09:05:05 +0100 Subject: [PATCH 12/14] fix addon docs e2e test --- code/e2e-tests/addon-docs.spec.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/code/e2e-tests/addon-docs.spec.ts b/code/e2e-tests/addon-docs.spec.ts index 1e50e443379..f3f5f9edbf1 100644 --- a/code/e2e-tests/addon-docs.spec.ts +++ b/code/e2e-tests/addon-docs.spec.ts @@ -60,10 +60,11 @@ test.describe('addon-docs', () => { // The `` block should render the "Basic" story, and the `` block should // render both the "Basic" and "Another" story const root = sbPage.previewRoot(); - const stories = root.locator('.sbdocs-h3'); + const stories = root.locator('.sb-story button'); - await expect(await stories.count()).toBe(2); + await expect(await stories.count()).toBe(3); await expect(stories.first()).toHaveText('Basic'); + await expect(stories.nth(1)).toHaveText('Basic'); await expect(stories.last()).toHaveText('Another'); }); }); From feee9a91cb11928c0c181b2d64cb1ddb45443e94 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Mon, 30 Jan 2023 10:38:02 +0100 Subject: [PATCH 13/14] add Empty Unattached story to Source block --- code/ui/blocks/src/blocks/Source.stories.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/code/ui/blocks/src/blocks/Source.stories.tsx b/code/ui/blocks/src/blocks/Source.stories.tsx index 00a9ea2d374..9a72a816c54 100644 --- a/code/ui/blocks/src/blocks/Source.stories.tsx +++ b/code/ui/blocks/src/blocks/Source.stories.tsx @@ -83,6 +83,10 @@ export const CodeUnattached: Story = { parameters: { attached: false }, }; +export const EmptyUnattached: Story = { + parameters: { attached: false }, +}; + export const CodeParameters: Story = { args: { of: ParametersStories.Code }, }; From 3d1e8939178ed3ac028499536b6fe280c1941065 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Wed, 1 Feb 2023 21:17:13 +0100 Subject: [PATCH 14/14] add docs styles to block stories --- code/ui/blocks/src/blocks/Anchor.stories.tsx | 3 +++ code/ui/blocks/src/blocks/ArgTypes.stories.tsx | 1 + code/ui/blocks/src/blocks/Canvas.stories.tsx | 1 + code/ui/blocks/src/blocks/Controls.stories.tsx | 1 + code/ui/blocks/src/blocks/Description.stories.tsx | 1 + code/ui/blocks/src/blocks/Markdown.stories.tsx | 1 + code/ui/blocks/src/blocks/Primary.stories.tsx | 3 +++ code/ui/blocks/src/blocks/Source.stories.tsx | 1 + code/ui/blocks/src/blocks/Stories.stories.tsx | 1 + code/ui/blocks/src/blocks/Story.stories.tsx | 1 + code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx | 1 + .../blocks/src/blocks/internal/InternalDescription.stories.tsx | 1 + code/ui/blocks/src/blocks/internal/InternalSource.stories.tsx | 1 + code/ui/blocks/src/blocks/internal/InternalStory.stories.tsx | 1 + 14 files changed, 18 insertions(+) diff --git a/code/ui/blocks/src/blocks/Anchor.stories.tsx b/code/ui/blocks/src/blocks/Anchor.stories.tsx index 41e7e9da304..bc940993573 100644 --- a/code/ui/blocks/src/blocks/Anchor.stories.tsx +++ b/code/ui/blocks/src/blocks/Anchor.stories.tsx @@ -3,6 +3,9 @@ import { Anchor } from './Anchor'; const meta = { component: Anchor, + parameters: { + docsStyles: true, + }, } as Meta; export default meta; diff --git a/code/ui/blocks/src/blocks/ArgTypes.stories.tsx b/code/ui/blocks/src/blocks/ArgTypes.stories.tsx index 5248a56a8e3..5176d59621b 100644 --- a/code/ui/blocks/src/blocks/ArgTypes.stories.tsx +++ b/code/ui/blocks/src/blocks/ArgTypes.stories.tsx @@ -8,6 +8,7 @@ const meta: Meta = { component: ArgTypes, parameters: { relativeCsfPaths: ['../examples/ArgTypesParameters.stories'], + docsStyles: true, }, }; export default meta; diff --git a/code/ui/blocks/src/blocks/Canvas.stories.tsx b/code/ui/blocks/src/blocks/Canvas.stories.tsx index ccc50895e53..2fedb7e97b5 100644 --- a/code/ui/blocks/src/blocks/Canvas.stories.tsx +++ b/code/ui/blocks/src/blocks/Canvas.stories.tsx @@ -25,6 +25,7 @@ const meta: Meta = { />`, }, }, + docsStyles: true, }, decorators: SourceStoriesMeta.decorators, }; diff --git a/code/ui/blocks/src/blocks/Controls.stories.tsx b/code/ui/blocks/src/blocks/Controls.stories.tsx index ff8b6e9409a..d8da8fabb0b 100644 --- a/code/ui/blocks/src/blocks/Controls.stories.tsx +++ b/code/ui/blocks/src/blocks/Controls.stories.tsx @@ -7,6 +7,7 @@ const meta: Meta = { component: Controls, parameters: { relativeCsfPaths: ['../examples/ControlsParameters.stories'], + docsStyles: true, }, }; export default meta; diff --git a/code/ui/blocks/src/blocks/Description.stories.tsx b/code/ui/blocks/src/blocks/Description.stories.tsx index 29c74356122..0e940c37cf5 100644 --- a/code/ui/blocks/src/blocks/Description.stories.tsx +++ b/code/ui/blocks/src/blocks/Description.stories.tsx @@ -16,6 +16,7 @@ const meta: Meta = { // workaround for https://github.com/storybookjs/storybook/issues/20505 docs: { source: { type: 'code' } }, attached: false, + docsStyles: true, }, }; export default meta; diff --git a/code/ui/blocks/src/blocks/Markdown.stories.tsx b/code/ui/blocks/src/blocks/Markdown.stories.tsx index 5d12484fa80..13d7b0e707a 100644 --- a/code/ui/blocks/src/blocks/Markdown.stories.tsx +++ b/code/ui/blocks/src/blocks/Markdown.stories.tsx @@ -5,6 +5,7 @@ import mdContent from '../examples/Markdown-content.md?raw'; export default { component: MarkdownComponent, + parameters: { docsStyles: true }, }; export const Markdown = { diff --git a/code/ui/blocks/src/blocks/Primary.stories.tsx b/code/ui/blocks/src/blocks/Primary.stories.tsx index bf494329b92..42977ff6c9e 100644 --- a/code/ui/blocks/src/blocks/Primary.stories.tsx +++ b/code/ui/blocks/src/blocks/Primary.stories.tsx @@ -3,6 +3,9 @@ import { Primary } from './Primary'; const meta = { component: Primary, + parameters: { + docsStyles: true, + }, } satisfies Meta; export default meta; diff --git a/code/ui/blocks/src/blocks/Source.stories.tsx b/code/ui/blocks/src/blocks/Source.stories.tsx index 9a72a816c54..d9bd1d747b5 100644 --- a/code/ui/blocks/src/blocks/Source.stories.tsx +++ b/code/ui/blocks/src/blocks/Source.stories.tsx @@ -18,6 +18,7 @@ const meta: Meta = { code: `const emitted = 'source';`, }, }, + docsStyles: true, }, decorators: [ (Story, { parameters: { snippets = {} } }) => ( diff --git a/code/ui/blocks/src/blocks/Stories.stories.tsx b/code/ui/blocks/src/blocks/Stories.stories.tsx index 86837645c1f..9462f5f2a2d 100644 --- a/code/ui/blocks/src/blocks/Stories.stories.tsx +++ b/code/ui/blocks/src/blocks/Stories.stories.tsx @@ -3,6 +3,7 @@ import { Stories } from './Stories'; const meta = { component: Stories, + parameters: { docsStyles: true }, } satisfies Meta; export default meta; diff --git a/code/ui/blocks/src/blocks/Story.stories.tsx b/code/ui/blocks/src/blocks/Story.stories.tsx index e2603bc170c..d41017be55a 100644 --- a/code/ui/blocks/src/blocks/Story.stories.tsx +++ b/code/ui/blocks/src/blocks/Story.stories.tsx @@ -9,6 +9,7 @@ const meta: Meta = { component: StoryBlock, parameters: { relativeCsfPaths: ['../examples/Button.stories', '../examples/StoryParameters.stories'], + docsStyles: true, }, }; export default meta; diff --git a/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx b/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx index 6f28f564798..fb0f444720c 100644 --- a/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx +++ b/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx @@ -14,6 +14,7 @@ const meta: Meta = { parameters: { theme: 'light', relativeCsfPaths: ['../examples/Button.stories', '../examples/CanvasParameters.stories'], + docsStyles: true, }, render: (args) => { return ( diff --git a/code/ui/blocks/src/blocks/internal/InternalDescription.stories.tsx b/code/ui/blocks/src/blocks/internal/InternalDescription.stories.tsx index 2e164aff001..da4c8772894 100644 --- a/code/ui/blocks/src/blocks/internal/InternalDescription.stories.tsx +++ b/code/ui/blocks/src/blocks/internal/InternalDescription.stories.tsx @@ -7,6 +7,7 @@ const meta: Meta = { component: Description, parameters: { relativeCsfPaths: ['../examples/Button.stories'], + docsStyles: true, }, args: { of: Button, diff --git a/code/ui/blocks/src/blocks/internal/InternalSource.stories.tsx b/code/ui/blocks/src/blocks/internal/InternalSource.stories.tsx index 0c6c7e7926b..618507195e4 100644 --- a/code/ui/blocks/src/blocks/internal/InternalSource.stories.tsx +++ b/code/ui/blocks/src/blocks/internal/InternalSource.stories.tsx @@ -7,6 +7,7 @@ const meta: Meta = { parameters: { relativeCsfPaths: ['../examples/Button.stories'], attached: false, + docsStyles: true, }, }; diff --git a/code/ui/blocks/src/blocks/internal/InternalStory.stories.tsx b/code/ui/blocks/src/blocks/internal/InternalStory.stories.tsx index e3352c25b63..dc13391aa8d 100644 --- a/code/ui/blocks/src/blocks/internal/InternalStory.stories.tsx +++ b/code/ui/blocks/src/blocks/internal/InternalStory.stories.tsx @@ -8,6 +8,7 @@ const meta: Meta = { component: StoryBlock, parameters: { relativeCsfPaths: ['../examples/Button.stories'], + docsStyles: true, }, }; export default meta;