Skip to content

Commit

Permalink
Merge pull request #52 from ComponentDriven/tom/sb-827-add-basic-stor…
Browse files Browse the repository at this point in the history
…y-tags-to-csf

Add tags annotation at all levels
  • Loading branch information
tmeasday authored Oct 27, 2022
2 parents d2c3fd1 + d2acbe4 commit 4e6d1e3
Show file tree
Hide file tree
Showing 2 changed files with 29 additions and 9 deletions.
20 changes: 13 additions & 7 deletions src/story.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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' })],
Expand All @@ -43,6 +44,7 @@ const simple: XMeta = {
const strict: XMeta<ButtonArgs> = {
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' })],
Expand All @@ -56,32 +58,36 @@ 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 },
};

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<ButtonArgs> = {
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' },
Expand Down Expand Up @@ -113,7 +119,7 @@ test('ArgsFromMeta will infer correct args from render/loader/decorators', () =>
loader2: `${args.loaderArg2}`,
});

const renderer: ArgsStoryFn<XFramework, { theme: string }> = (args) => `${args.theme}`;
const renderer: ArgsStoryFn<XFramework, { theme: string }> = args => `${args.theme}`;

const meta = {
component: Button,
Expand Down
18 changes: 16 additions & 2 deletions src/story.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ export type StoryName = string;
/** @deprecated */
export type StoryKind = ComponentTitle;

export type Tag = string;

export interface StoryIdentifier {
componentId: ComponentId;
title: ComponentTitle;
Expand All @@ -21,6 +23,8 @@ export interface StoryIdentifier {
name: StoryName;
/** @deprecated */
story: StoryName;

tags: Tag[];
}

export type Parameters = { [name: string]: any };
Expand Down Expand Up @@ -290,12 +294,17 @@ export interface ComponentAnnotations<TFramework extends AnyFramework = AnyFrame
* By defining them each component will have its tab in the args table.
*/
subcomponents?: Record<string, TFramework['component']>;

/**
* Function that is executed after the story is rendered.
*/
play?: PlayFunction<TFramework, TArgs>;
};

/**
* Named tags for a story, used to filter stories in different contexts.
*/
tags?: Tag[];
}

export type StoryAnnotations<
TFramework extends AnyFramework = AnyFramework,
Expand All @@ -317,6 +326,11 @@ export type StoryAnnotations<
*/
play?: PlayFunction<TFramework, TArgs>;

/**
* Named tags for a story, used to filter stories in different contexts.
*/
tags?: Tag[];

/** @deprecated */
story?: Omit<StoryAnnotations<TFramework, TArgs>, 'story'>;
} & ({} extends TRequiredArgs ? { args?: TRequiredArgs } : { args: TRequiredArgs });
Expand Down

0 comments on commit 4e6d1e3

Please sign in to comment.