@storybook/addon-docs 9.2.0-alpha.2 → 10.0.0-beta.0

package/vue3/README.md

@@ -1,152 +0,0 @@
-<center>
-  <img src="../docs/media/vue-hero.png" width="100%" />
-</center>
-
-<h1>Storybook Docs for Vue 3</h1>
-
-> migration guide: This page documents the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook.
-
-Storybook Docs transforms your Storybook stories into world-class component documentation. Storybook Docs for Vue 3 supports [DocsPage](../docs/docspage.md) for auto-generated docs, and [MDX](../docs/mdx.md) for rich long-form docs.
-
-To learn more about Storybook Docs, read the [general documentation](../README.md). To learn the Vue 3 specifics, read on!
-
-- [Installation](#installation)
-- [Preset options](#preset-options)
-- [DocsPage](#docspage)
-- [Props tables](#props-tables)
-- [MDX](#mdx)
-- [Inline Stories](#inline-stories)
-- [More resources](#more-resources)
-
-## Installation
-
-First add the package. Make sure that the versions for your `@storybook/*` packages match:
-
-```sh
-yarn add -D @storybook/addon-docs
-```
-
-Then add the following to your `.storybook/main.js` addons:
-
-```js
-export default {
-  addons: ['@storybook/addon-docs'],
-};
-```
-
-## Preset options
-
-The `addon-docs` preset for Vue has a configuration option that can be used to configure [`vue-docgen-api`](https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/packages/vue-docgen-api), a tool which extracts information from Vue components. Here's an example of how to use the preset with options for Vue app:
-
-```js
-import * as path from 'path';
-
-export default {
-  addons: [
-    {
-      name: '@storybook/addon-docs',
-      options: {
-        vueDocgenOptions: {
-          alias: {
-            '@': path.resolve(__dirname, '../'),
-          },
-        },
-      },
-    },
-  ],
-};
-```
-
-The `vueDocgenOptions` is an object for configuring `vue-docgen-api`. See [`vue-docgen-api`'s docs](https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/packages/vue-docgen-api#options-docgenoptions) for available configuration options.
-
-## DocsPage
-
-When you [install docs](#installation) you should get basic [DocsPage](../docs/docspage.md) documentation automagically for all your stories, available in the `Docs` tab of the Storybook UI.
-
-## Props tables
-
-Getting [Props tables](../docs/props-tables.md) for your components requires a few more steps. Docs for Vue relies on [`vue-docgen-loader`](https://github.com/pocka/vue-docgen-loader). It supports `props`, `events`, and `slots` as first class prop types.
-
-Finally, be sure to fill in the `component` field in your story metadata:
-
-```ts
-import { InfoButton } from './InfoButton.vue';
-
-export default {
-  title: 'InfoButton',
-  component: InfoButton,
-};
-```
-
-If you haven't upgraded from `storiesOf`, you can use a parameter to do the same thing:
-
-```ts
-import { storiesOf } from '@storybook/vue';
-import { InfoButton } from './InfoButton.vue';
-
-storiesOf('InfoButton', module)
-  .addParameters({ component: InfoButton })
-  .add( ... );
-```
-
-## MDX
-
-[MDX](../docs/mdx.md) is a convenient way to document your components in Markdown and embed documentation components, such as stories and props tables, inline.
-
-Docs has peer dependencies on `react`. If you want to write stories in MDX, you may need to add this dependency as well:
-
-```sh
-yarn add -D react
-```
-
-Then update your `.storybook/main.js` to make sure you load MDX files:
-
-```js
-export default {
-  stories: ['../src/stories/**/*.stories.@(js|mdx)'],
-};
-```
-
-Finally, you can create MDX files like this:
-
-```md
-import { Meta, Story, ArgsTable } from '@storybook/addon-docs';
-import { InfoButton } from './InfoButton.vue';
-
-<Meta title='InfoButton' component={InfoButton} />
-
-# InfoButton
-
-Some **markdown** description, or whatever you want.
-
-<Story name='basic' height='400px'>{{
-  components: { InfoButton },
-  template: '<info-button label="I\'m a button!"/>',
-}}</Story>
-
-## ArgsTable
-
-<ArgsTable of={InfoButton} />
-```
-
-Yes, it's redundant to declare `component` twice. [Coming soon](https://github.com/storybookjs/storybook/issues/8685).
-
-## Inline Stories
-
-Storybook Docs renders all Vue stories inline by default.
-
-However, you can render stories in an iframe, with a default height of `60px` (configurable using the `docs.story.iframeHeight` story parameter), by using the `docs.stories.inline` parameter.
-
-To do so for all stories, update `.storybook/preview.js`:
-
-```js
-export const parameters = { docs: { story: { inline: false } } };
-```
-
-## More resources
-
-Want to learn more? Here are some more articles on Storybook Docs:
-
-- References: [DocsPage](../docs/docspage.md) / [MDX](../docs/mdx.md) / [FAQ](../docs/faq.md) / [Recipes](../docs/recipes.md) / [Theming](../docs/theming.md) / [Props](../docs/props-tables.md)
-- Announcements: [Vision](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) / [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) / [MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc) / [Framework support](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea)
-- Example: [Storybook Design System](https://github.com/storybookjs/design-system)

package/web-components/README.md

@@ -1,131 +0,0 @@
-<h1>Storybook Docs for Web Components</h1>
-
-- [Installation](#installation)
-- [Props tables](#props-tables)
-- [Stories not inline](#stories-not-inline)
-- [More resources](#more-resources)
-
-## Installation
-
-- Be sure to check the [installation section of the general addon-docs page](../README.md) before proceeding.
-- Be sure to have a [custom-elements.json](./#custom-elementsjson) file.
-- Add to your `.storybook/preview.js`
-
-  ```js
-  import { setCustomElementsManifest } from '@storybook/web-components';
-  import customElements from '../custom-elements.json';
-  
-  setCustomElementsManifest(customElements);
-  ```
-
-- Add to your story files
-
-  ```js
-  export default {
-    title: 'Demo Card',
-    component: 'your-component-name', // which is also found in the `custom-elements.json`
-  };
-  ```
-
-## Props tables
-
-In order to get [Props tables](..docs/../../docs/props-tables.md) documentation for web-components you will need to have a [custom-elements.json](https://github.com/webcomponents/custom-elements-json) file.
-
-You can hand write it or better generate it. Depending on the web components sugar you are choosing your mileage may vary.
-
-Known analyzers that output `custom-elements.json` v1.0.0:
-
-- [@custom-elements-manifest/analyzer](https://github.com/open-wc/custom-elements-manifest)
-  - Supports Vanilla, LitElement, FASTElement, Stencil, Catalyst, Atomico
-
-Known analyzers that output older versions of `custom-elements.json`:
-
-- [web-component-analyzer](https://github.com/runem/web-component-analyzer)
-  - Supports LitElement, Polymer, Vanilla, (Stencil)
-- [stenciljs](https://stenciljs.com/)
-  - Supports Stencil (but does not have all metadata)
-
-To generate this file with Stencil, add `docs-vscode` to outputTargets in `stencil.config.ts`:
-
-```
-{
-  type: 'docs-vscode',
-  file: 'custom-elements.json'
-},
-```
-
-The file looks something like this:
-
-```json
-{
-  "schemaVersion": "1.0.0",
-  "readme": "",
-  "modules": [
-    {
-      "kind": "javascript-module",
-      "path": "src/my-element.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "MyElement",
-          "members": [
-            {
-              "kind": "field",
-              "name": "disabled"
-            },
-            {
-              "kind": "method",
-              "name": "fire"
-            }
-          ],
-          "events": [
-            {
-              "name": "disabled-changed",
-              "type": {
-                "text": "Event"
-              }
-            }
-          ],
-          "superclass": {
-            "name": "HTMLElement"
-          },
-          "tagName": "my-element"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "custom-element-definition",
-          "name": "my-element",
-          "declaration": {
-            "name": "MyElement",
-            "module": "src/my-element.js"
-          }
-        }
-      ]
-    }
-  ]
-}
-```
-
-For a full example see the [web-components-kitchen-sink/custom-elements.json](../../../examples/web-components-kitchen-sink/custom-elements.json).
-
-## Stories not inline
-
-Storybook Docs renders all web components stories inline by default.
-
-However, you can render stories in an iframe, with a default height of `60px` (configurable using the `docs.story.iframeHeight` story parameter), by using the `docs.stories.inline` parameter.
-
-To do so for all stories, update `.storybook/preview.js`:
-
-```js
-export const parameters = { docs: { story: { inline: false } } };
-```
-
-## More resources
-
-Want to learn more? Here are some more articles on Storybook Docs:
-
-- References: [DocsPage](../docs/docspage.md) / [MDX](../docs/mdx.md) / [FAQ](../docs/faq.md) / [Recipes](../docs/recipes.md) / [Theming](../docs/theming.md) / [Props](../docs/props-tables.md)
-- Announcements: [Vision](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) / [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) / [MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc) / [Framework support](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea)
-- Example: [Storybook Design System](https://github.com/storybookjs/design-system)

package/web-components/index.js

@@ -1 +0,0 @@
-module.exports = require('../dist/frameworks/common/index');