From 5b599263818e52f272d333c4f9e40432e8106e41 Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Wed, 26 Oct 2022 13:24:10 +1100 Subject: [PATCH 1/2] Add tag annotation at all levels --- src/story.test.ts | 21 ++++++++++++++------- src/story.ts | 13 +++++++++++-- 2 files changed, 25 insertions(+), 9 deletions(-) diff --git a/src/story.test.ts b/src/story.test.ts index baedcfd..9fb60fd 100644 --- a/src/story.test.ts +++ b/src/story.test.ts @@ -33,6 +33,7 @@ const Button = (props: ButtonArgs) => 'Button'; const simple: XMeta = { title: 'simple', component: Button, + tags: ['foo', 'bar'], decorators: [(storyFn, context) => `withDecorator(${storyFn(context)})`], parameters: { a: () => null, b: NaN, c: Symbol('symbol') }, loaders: [() => Promise.resolve({ d: '3' })], @@ -43,6 +44,7 @@ const simple: XMeta = { const strict: XMeta = { title: 'simple', component: Button, + tags: ['foo', 'bar'], decorators: [(storyFn, context) => `withDecorator(${storyFn(context)})`], parameters: { a: () => null, b: NaN, c: Symbol('symbol') }, loaders: [() => Promise.resolve({ d: '3' })], @@ -56,7 +58,8 @@ const Simple: XStory = () => 'Simple'; const CSF1Story: XStory = () => 'Named Story'; CSF1Story.story = { name: 'Another name for story', - decorators: [(storyFn) => `Wrapped(${storyFn()}`], + tags: ['foo', 'bar'], + decorators: [storyFn => `Wrapped(${storyFn()}`], parameters: { a: [1, '2', {}], b: undefined, c: Button }, loaders: [() => Promise.resolve({ d: '3' })], args: { a: 1 }, @@ -64,24 +67,27 @@ CSF1Story.story = { const CSF2Story: XStory = () => 'Named Story'; CSF2Story.storyName = 'Another name for story'; -CSF2Story.decorators = [(storyFn) => `Wrapped(${storyFn()}`]; +CSF2Story.tags = ['foo', 'bar']; +CSF2Story.decorators = [storyFn => `Wrapped(${storyFn()}`]; CSF2Story.parameters = { a: [1, '2', {}], b: undefined, c: Button }; CSF2Story.loaders = [() => Promise.resolve({ d: '3' })]; CSF2Story.args = { a: 1 }; const CSF3Story: XStory = { - render: (args) => 'Named Story', + render: args => 'Named Story', name: 'Another name for story', - decorators: [(storyFn) => `Wrapped(${storyFn()}`], + tags: ['foo', 'bar'], + decorators: [storyFn => `Wrapped(${storyFn()}`], parameters: { a: [1, '2', {}], b: undefined, c: Button }, loaders: [() => Promise.resolve({ d: '3' })], args: { a: 1 }, }; const CSF3StoryStrict: XStory = { - render: (args) => 'Named Story', + render: args => 'Named Story', name: 'Another name for story', - decorators: [(storyFn) => `Wrapped(${storyFn()}`], + tags: ['foo', 'bar'], + decorators: [storyFn => `Wrapped(${storyFn()}`], parameters: { a: [1, '2', {}], b: undefined, c: Button }, loaders: [() => Promise.resolve({ d: '3' })], args: { x: '1' }, @@ -93,6 +99,7 @@ const CSF3StoryStrict: XStory = { }; const project: ProjectAnnotations = { + tags: ['foo', 'bar'], async runStep(label, play, context) { return play(context); }, @@ -113,7 +120,7 @@ test('ArgsFromMeta will infer correct args from render/loader/decorators', () => loader2: `${args.loaderArg2}`, }); - const renderer: ArgsStoryFn = (args) => `${args.theme}`; + const renderer: ArgsStoryFn = args => `${args.theme}`; const meta = { component: Button, diff --git a/src/story.ts b/src/story.ts index ee9bb3a..cb6ea90 100644 --- a/src/story.ts +++ b/src/story.ts @@ -11,6 +11,8 @@ export type StoryName = string; /** @deprecated */ export type StoryKind = ComponentTitle; +export type Tag = string; + export interface StoryIdentifier { componentId: ComponentId; title: ComponentTitle; @@ -21,6 +23,8 @@ export interface StoryIdentifier { name: StoryName; /** @deprecated */ story: StoryName; + + tags: Tag[]; } export type Parameters = { [name: string]: any }; @@ -168,6 +172,11 @@ export type StepRunner Promise; export type BaseAnnotations = { + /** + * Named tags for a story, used to filter stories in different contexts. + */ + tags?: Tag[]; + /** * Wrapper components or Storybook decorators that wrap a story. * @@ -290,12 +299,12 @@ export interface ComponentAnnotations; - + /** * Function that is executed after the story is rendered. */ play?: PlayFunction; -}; +} export type StoryAnnotations< TFramework extends AnyFramework = AnyFramework, From d2acbe4676016d25de33e9626312aab70dd7fbfe Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Wed, 26 Oct 2022 16:01:35 +1100 Subject: [PATCH 2/2] Don't allow tags at the project level (for now) --- src/story.test.ts | 1 - src/story.ts | 15 ++++++++++----- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/src/story.test.ts b/src/story.test.ts index 9fb60fd..3860d86 100644 --- a/src/story.test.ts +++ b/src/story.test.ts @@ -99,7 +99,6 @@ const CSF3StoryStrict: XStory = { }; const project: ProjectAnnotations = { - tags: ['foo', 'bar'], async runStep(label, play, context) { return play(context); }, diff --git a/src/story.ts b/src/story.ts index cb6ea90..2da4f8d 100644 --- a/src/story.ts +++ b/src/story.ts @@ -172,11 +172,6 @@ export type StepRunner Promise; export type BaseAnnotations = { - /** - * Named tags for a story, used to filter stories in different contexts. - */ - tags?: Tag[]; - /** * Wrapper components or Storybook decorators that wrap a story. * @@ -304,6 +299,11 @@ export interface ComponentAnnotations; + + /** + * Named tags for a story, used to filter stories in different contexts. + */ + tags?: Tag[]; } export type StoryAnnotations< @@ -326,6 +326,11 @@ export type StoryAnnotations< */ play?: PlayFunction; + /** + * Named tags for a story, used to filter stories in different contexts. + */ + tags?: Tag[]; + /** @deprecated */ story?: Omit, 'story'>; } & ({} extends TRequiredArgs ? { args?: TRequiredArgs } : { args: TRequiredArgs });