fbredius/storybook

Storybook for Ember relies on [@storybook/ember-cli-storybook addon](https://github.com/storybookjs/ember-cli-storybook), to extract documentation comments from your component source files. If you're using Storybook with Ember, you should already have this addon installed, and you will just need to enable it by adding the following config block in your `ember-cli-build.js` file:

```js
let app = new EmberApp(defaults, {
  '@storybook/ember-cli-storybook': {
    enableAddonDocsIntegration: true,
  },
});
```

Now, running the ember-cli server will generate a JSON documentation file at `/dist/storybook-docgen/index.json`. Since generation of this file is tied into the ember-cli build, it will get regenerated every time component files are saved. For details on documenting your components, check out the examples in the addon that powers the generation [ember-cli-addon-docs-yuidoc](https://github.com/ember-learn/ember-cli-addon-docs-yuidoc#documenting-components).

Storybook uses this file to auto-generate the `ArgTypes` for your component based on docgen information created by [ember-cli-addon-docs-yuidoc](https://github.com/ember-learn/ember-cli-addon-docs-yuidoc#documenting-components).

You'll need to register that in `.storybook/preview.js`:

```js
import { setJSONDoc } from '@storybook/addon-docs/ember';
import docJson from '../dist/storybook-docgen/index.json';
setJSONDoc(docJson);
```

Finally, to use auto-detected controls with Ember, you must fill in the `component` field in your story metadata:

```ts
export default {
  title: 'Button',
  component: 'button', // name of your button component from docgen-json file (index.js)
};
```