Merge pull request #61 from storybookjs/add-sample-docs

Add sample documentation template to README

README.md

@@ -100,6 +100,121 @@ 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.
+
+To get started, replace this README with the content in this sample template, modeled after how essential addons (like [Actions](https://storybook.js.org/docs/essentials/actions)) are documented. Then update the content to describe your addon.
+
+### Sample documentation template
+
+````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 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