diff --git a/README.md b/README.md index 2e9e761..5247640 100644 --- a/README.md +++ b/README.md @@ -100,6 +100,115 @@ An exception to this rule is if you are using React to inject UI into the previe Storybook addons are listed in the [catalog](https://storybook.js.org/addons) and distributed via npm. The catalog is populated by querying npm's registry for Storybook-specific metadata in `package.json`. This project has been configured with sample data. Learn more about available options in the [Addon metadata docs](https://storybook.js.org/docs/react/addons/addon-catalog#addon-metadata). +## Documentation + +To help the community use your addon and understand its capabilities, please document it thoroughly. + +Here's a sample template, modeled after how essential addons (like [Actions](https://storybook.js.org/docs/essentials/actions)) are documented: + +````md +# My Addon + +## Installation + +First, install the package. + +```sh +npm install --save-dev my-addon +``` + +Then, register it as an addon in `.storybook/main.js`. + +```js +// .storybook/main.ts + +// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) +import type { StorybookConfig } from '@storybook/your-framework'; + +const config: StorybookConfig = { + // ...rest of config + addons: [ + '@storybook/addon-essentials' + 'my-addon', // 👈 register the addon here + ], +}; + +export default config; +``` + +## Usage + +The primary way to use this addon is to define the `exampleParameter` parameter. You can do this at the component level, as below, to affect all stories in the file, or you can do it for a single story. + +```js +// Button.stories.ts + +// Replace your-framework with the name of your framework +import type { Meta } from '@storybook/your-framework'; + +import { Button } from './Button'; + +const meta: Meta = { + component: Button, + parameters: { + myAddon: { + exampleParameter: true, + // See API section below for available parameters + } + } +}; + +export default meta; +``` + +Another way to use the addon is... + +## API + +### Parameters + +This addon contributes the following parameters to Storybook, under the `myAddon` namespace: + +#### `disable` + +Type: `boolean` + +Disable this addon's behavior. This parameter is most useful to allow overriding at more specific levels. For example, if this parameter is set to true at the project level, it could then be re-enabled by setting it to false at the meta (component) or story level. + +### Options + +When registering this addon, you can configure it with the following options, which are passed when registering the addon, like so: + +```ts +// .storybook/main.ts + +// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) +import type { StorybookConfig } from '@storybook/your-framework'; + +const config: StorybookConfig = { + // ...rest of config + addons: [ + '@storybook/essentials', + { + name: 'my-addon', + options: { + // 👈 options for my-addon go here + }, + }, + ], +}; + +export default config; +``` + +#### `useExperimentalBehavior` + +Type: `boolean` + +Enable experimental behavior to... + +```` + ## Release Management ### Setup