Skip to content

Commit

Permalink
feat(local only storybook): add local story stubs for FiltersList, ad…
Browse files Browse the repository at this point in the history
…d documentation for local-dev tag in storybook/README.md
  • Loading branch information
ByronDWall committed Sep 12, 2024
1 parent 7aba900 commit dba7e6d
Show file tree
Hide file tree
Showing 3 changed files with 52 additions and 0 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { Meta, Markdown } from '@storybook/blocks';
import ReadMe from './../README.md?raw'

<Meta tags={['local-dev']} title="components/Filters/FiltersList/Readme" />

<Markdown>{ReadMe}</Markdown>
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import type { Meta, StoryObj } from '@storybook/react';
import FiltersList from './filters-list';

const meta: Meta<typeof FiltersList> = {
title: 'components/Filters/FiltersList',
component: FiltersList,
tags: ['local-dev'],
argTypes: {
label: {
control: 'text',
},
},
};
export default meta;

type Story = StoryObj<typeof FiltersList>;

export const BasicExample: Story = {
args: {
label: 'A list of filters',
},
};
24 changes: 24 additions & 0 deletions storybook/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,30 @@ yarn start

This will open storybook in your browser. You can now start adding new components or modifying existing ones.

### Using Storybook as a component playground for local development

When building a new component, storybook can be used to provide a "component playground" that builds a story that is only displayed while running storybook locally. This can be very useful for quick iteration and debugging.

In order to specify that a story should only be available locally, add a `'local-dev'` tag to the `tags` option in the story's `meta` configuration.

For example

```tsx
import type { Meta, StoryObj } from '@storybook/react';

const meta: Meta<typeof ExampleComponent> = {
...
tags: ['local-dev'],
...
};

...

export default meta;
```

When the component is ready to be released, remove the `local-dev` tag for the story in order for it to show up in the production storybook documentation.

## Creating a build

To create a storybook production-build, run the following command:
Expand Down

0 comments on commit dba7e6d

Please sign in to comment.