Skip to content

Commit

Permalink
Add sample documentation template to README
Browse files Browse the repository at this point in the history
  • Loading branch information
kylegach committed Jan 6, 2024
1 parent af25db6 commit cd7479a
Showing 1 changed file with 109 additions and 0 deletions.
109 changes: 109 additions & 0 deletions README.md
Expand Up @@ -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<typeof Button> = {
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
Expand Down

0 comments on commit cd7479a

Please sign in to comment.