@storybook/addon-docs 0.0.0-pr-23609-sha-f47ef339

package/README.md

@@ -0,0 +1,181 @@
+<center>
+  <img src="https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/docs/docs/media/hero.png" width="100%" />
+</center>
+
+# Storybook Docs
+
+> migration guide: This page documents the method to configure Storybook introduced recently in 7.0.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.
+
+**DocsPage.** Out of the box, all your stories get a `DocsPage`. `DocsPage` is a zero-config aggregation of your component stories, text descriptions, docgen comments, props tables, and code examples into clean, readable pages.
+
+**MDX.** If you want more control, `MDX` allows you to write long-form markdown documentation and include stories in one file. You can also use it to write pure documentation pages and embed them inside your Storybook alongside your stories.
+
+Just like Storybook, Docs supports every major view layer including React, Vue, Angular, HTML, Web components, Svelte, and many more.
+
+Read on to learn more:
+
+- [Storybook Docs](#storybook-docs)
+  - [DocsPage](#docspage)
+  - [MDX](#mdx)
+  - [Framework support](#framework-support)
+  - [Installation](#installation)
+    - [Be sure to check framework specific installation needs](#be-sure-to-check-framework-specific-installation-needs)
+  - [Preset options](#preset-options)
+  - [TypeScript configuration](#typescript-configuration)
+  - [More resources](#more-resources)
+
+## DocsPage
+
+When you [install Docs](#installation), every story gets a `DocsPage`. `DocsPage` pulls information from your stories, components, source code, and story metadata to construct a sensible, zero-config default.
+
+Click on the `Docs` tab to see it:
+
+<center>
+  <img src="https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/docs/docs/media/docs-tab.png" width="100%" />
+</center>
+
+For more information on how it works, see the [`DocsPage` reference](https://github.com/storybookjs/storybook/blob/next/code/addons/docs/docs/docspage.md).
+
+## MDX
+
+`MDX` is a syntax for writing long-form documentation with stories side-by-side in the same file. In contrast to `DocsPage`, which provides smart documentation out of the box, `MDX` gives you full control over your component documentation.
+
+Here's an example file:
+
+<!-- prettier-ignore-start -->
+
+```md
+import { Meta, Story, Canvas } from '@storybook/blocks';
+import * as CheckboxStories from './Checkbox.stories';
+
+<Meta title="MDX/Checkbox" of={CheckboxStories} />
+
+# Checkbox
+
+With `MDX` we can include a story for `Checkbox` right in the middle of our
+markdown documentation.
+
+<Canvas>
+  <Story of={CheckboxStories.Unchecked} />
+</Canvas>
+```
+
+<!-- prettier-ignore-end -->
+
+And here's how that's rendered in Storybook:
+
+<center>
+  <img src="https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/docs/docs/media/mdx-simple.png" width="100%" />
+</center>
+
+For more information on `MDX`, see the [`MDX` reference](https://github.com/storybookjs/storybook/blob/next/code/addons/docs/docs/mdx.md).
+
+## Framework support
+
+Storybook Docs supports all view layers that Storybook supports except for React Native (currently). There are some framework-specific features as well, such as props tables and inline story rendering. The following page captures the current state of support:
+
+[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
+
+**Note:** `#` = WIP support
+
+Want to add enhanced features to your favorite framework? Check out this [dev guide](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/docs/multiframework.md)
+
+## Installation
+
+First add the package. Make sure that the versions for your `@storybook/*` packages match:
+
+```sh
+yarn add -D @storybook/addon-docs
+```
+
+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 add the following to your `.storybook/main.js`:
+
+```js
+export default {
+  stories: [
+    '../src/**/*.mdx', // 👈 Add this, to match your project's structure
+    '../src/**/*.stories.@(js|jsx|ts|tsx)',
+  ],
+  addons: [
+    '@storybook/addon-docs', // 👈 Also add this
+  ],
+};
+```
+
+If using in conjunction with the [storyshots add-on](https://github.com/storybookjs/storybook/blob/next/code/addons/storyshots-core/README.md), you will need to
+configure Jest to transform MDX stories into something Storyshots can understand:
+
+Add the following to your Jest configuration:
+
+```json
+{
+  "transform": {
+    "^.+\\.[tj]sx?$": "babel-jest",
+    "^.+\\.mdx$": "@storybook/addon-docs/jest-transform-mdx"
+  }
+}
+```
+
+### Be sure to check framework specific installation needs
+
+- [React](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/react) (covered here)
+- [Vue](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/vue)
+- [Angular](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/angular)
+- [Ember](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/ember)
+- [Web Components](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/web-components)
+- [Common setup (all other frameworks)](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/common)
+
+## Preset options
+
+The `addon-docs` preset has a few configuration options that can be used to configure its babel/webpack loading behavior. Here's an example of how to use the preset with options:
+
+```js
+export default {
+  addons: [
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        jsxOptions: {},
+        csfPluginOptions: null,
+        mdxPluginOptions: {},
+        transcludeMarkdown: true,
+      },
+    },
+  ],
+};
+```
+
+`jsxOptions` are options that will be passed to `@babel/preset-react` for `.md` and `.mdx` files.
+
+`csfPluginOptions` is an object for configuring `@storybook/csf-plugin`. When set to `null` it tells docs not to run the `csf-plugin` at all, which can be used as an optimization, or if you're already using `csf-plugin` in your `main.js`.
+
+The `transcludeMarkdown` option enables mdx files to import `.md` files and render them as a component.
+
+```mdx
+import { Meta } from '@storybook/addon-docs';
+import Changelog from '../CHANGELOG.md';
+
+<Meta title="Changelog" />
+
+<Changelog />
+```
+
+## TypeScript configuration
+
+As of SB6 [TypeScript is zero-config](https://storybook.js.org/docs/react/configure/typescript) and should work with SB Docs out of the box. For advanced configuration options, refer to the [Props documentation](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/docs/props-tables.md).
+
+## More resources
+
+Want to learn more? Here are some more articles on Storybook Docs:
+
+- References: [DocsPage](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/docs/docspage.md) / [MDX](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/docs/mdx.md) / [FAQ](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/docs/faq.md) / [Recipes](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/docs/recipes.md) / [Theming](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/docs/theming.md) / [Props](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/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/angular/README.md

@@ -0,0 +1,256 @@
+<center>
+  <img src="../docs/media/angular-hero.png" width="100%" />
+</center>
+
+<h1>Storybook Docs for Angular</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 Angular 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 Angular specifics, read on!
+
+- [Installation](#installation)
+- [DocsPage](#docspage)
+- [Props tables](#props-tables)
+  - [Automatic Compodoc setup](#automatic-compodoc-setup)
+- [Manual Compodoc setup](#manual-compodoc-setup)
+- [MDX](#mdx)
+- [IFrame height](#iframe-height)
+- [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` exports:
+
+```js
+export default {
+  addons: ['@storybook/addon-docs'],
+};
+```
+
+## 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 Angular relies on [Compodoc](https://compodoc.app/), the excellent API documentation tool. It supports `inputs`, `outputs`, `properties`, `methods`, `view/content child/children` as first class prop types.
+
+### Automatic Compodoc setup
+
+During `sb init`, you will be asked, whether you want to setup Compodoc for your project. Just answer the question with Yes. Compodoc is then ready to use!
+
+## Manual Compodoc setup
+
+You'll need to register Compodoc's `documentation.json` file in `.storybook/preview.ts`:
+
+```js
+import { setCompodocJson } from '@storybook/addon-docs/angular';
+import docJson from '../documentation.json';
+
+setCompodocJson(docJson);
+```
+
+Finally, to set up compodoc, you'll first need to install Compodoc:
+
+```sh
+yarn add -D @compodoc/compodoc
+```
+
+Then you'll need to configure Compodoc to generate a `documentation.json` file. Adding the following snippet to your `projects.<project>.architect.<storybook|build-storybook>` in the `angular.json` creates a metadata file `./documentation.json` each time you run storybook:
+
+```jsonc
+// angular.json
+{
+  "projects": {
+    "your-project": {
+      "architect": {
+        "storybook": {
+          ...,
+          "compodoc": true,
+          "compodocArgs": [
+            "-e",
+            "json",
+            "-d",
+            "." // the root folder of your project
+          ],
+        },
+        "build-storybook": {
+          ...,
+          "compodoc": true,
+          "compodocArgs": [
+            "-e",
+            "json",
+            "-d",
+            "." // the root folder of your project
+          ],
+        }
+      }
+    }
+  }
+}
+```
+
+Unfortunately, it's not currently possible to update this dynamically as you edit your components, but [there's an open issue](https://github.com/storybookjs/storybook/issues/8672) to support this with improvements to Compodoc.
+
+Finally, be sure to fill in the `component` field in your story metadata:
+
+```ts
+import { AppComponent } from './app.component';
+
+export default {
+  title: 'App Component',
+  component: AppComponent,
+};
+```
+
+If you haven't upgraded from `storiesOf`, you can use a parameter to do the same thing:
+
+```ts
+import { storiesOf } from '@storybook/angular';
+import { AppComponent } from './app.component';
+
+storiesOf('App Component', module)
+  .addParameters({ component: AppComponent })
+  .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/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+};
+```
+
+Finally, you can create MDX files like this:
+
+```md
+import { Meta, Story, ArgsTable } from '@storybook/addon-docs';
+import { AppComponent } from './app.component';
+
+<Meta title='App Component' component={AppComponent} />
+
+# App Component
+
+Some **markdown** description, or whatever you want.
+
+<Story name='basic' height='400px'>{{
+  component: AppComponent,
+  props: {},
+}}</Story>
+
+## ArgsTable
+
+<ArgsTable of={AppComponent} />
+```
+
+Yes, it's redundant to declare `component` twice. [Coming soon](https://github.com/storybookjs/storybook/issues/8673).
+
+Also, to use the `Props` doc block, you need to set up Compodoc, [as described above](#docspage).
+
+When you are using `template`, `moduleMetadata` and/or `addDecorators` with `storiesOf` then you can easily translate your story to MDX, too:
+
+```md
+import { Meta, Story, ArgsTable } from '@storybook/addon-docs';
+import { CheckboxComponent, RadioButtonComponent } from './my-components';
+import { moduleMetadata } from '@storybook/angular';
+
+<Meta title='Checkbox' decorators={[
+  moduleMetadata({
+    declarations: [CheckboxComponent]
+  })
+]} />
+
+# Basic Checkbox
+
+<Story name='basic check' height='400px'>{{
+  template: `
+    <div class="some-wrapper-with-padding">
+      <my-checkbox [checked]="checked">Some Checkbox</my-checkbox>
+    </div>
+  `,
+  props: {
+    checked: true
+  }
+}}</Story>
+
+# Basic Radiobutton
+
+<Story name='basic radio' height='400px'>{{
+  moduleMetadata: {
+    declarations: [RadioButtonComponent]
+  }
+  template: `
+    <div class="some-wrapper-with-padding">
+      <my-radio-btn [checked]="checked">Some Checkbox</my-radio-btn>
+    </div>
+  `,
+  props: {
+    checked: true
+  }
+}}</Story>
+```
+
+## IFrame height
+
+Storybook Docs renders all Angular stories inside IFrames, with a default height of `60px`. You can update this default globally, or modify the IFrame height locally per story in `DocsPage` and `MDX`.
+
+To update the global default, modify `.storybook/preview.ts`:
+
+```ts
+export const parameters = { docs: { story: { iframeHeight: '400px' } } };
+```
+
+For `DocsPage`, you need to update the parameter locally in a story:
+
+```ts
+export const basic = () => ...
+basic.parameters = {
+  docs: { story: { iframeHeight: '400px' } },
+}
+```
+
+And for `MDX` you can modify it as an attribute on the `Story` element:
+
+```md
+<Story name='basic' height='400px'>{...}</Story>
+```
+
+## Inline Stories
+
+Storybook Docs renders all Angular stories inline by default.
+
+However, you can render stories in an iframe, with a default height of `100px` (configurable using the `docs.story.iframeHeight` story parameter), by using the `docs.story.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/angular/index.d.ts

@@ -0,0 +1 @@
+export declare const setCompodocJson: (compodocJson: any) => void;

package/angular/index.js

@@ -0,0 +1,7 @@
+/* eslint-disable no-underscore-dangle */
+import { global } from '@storybook/global';
+
+export const setCompodocJson = (compodocJson) => {
+  // @ts-expect-error (Converted from ts-ignore)
+  global.__STORYBOOK_COMPODOC_JSON__ = compodocJson;
+};

package/common/README.md

@@ -0,0 +1,98 @@
+<h1>Storybook Docs Common Setup</h1>
+
+Storybook Docs transforms your Storybook stories into world-class component documentation. Docs supports [all web frameworks that Storybook supports](../README.md#framework-support).
+
+Popular frameworks like [React](../react/README.md)/[Vue](../vue/README.md)/[Angular](../angular/README.md)/[Ember](../ember/README.md)/[Web components](../web-components/README.md) have their own framework-specific optimizations and setup guides. This README documents the "common" setup for other frameworks that don't have any docs-specific optimizations.
+
+- [Installation](#installation)
+- [DocsPage](#docspage)
+- [MDX](#mdx)
+- [IFrame height](#iframe-height)
+- [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'],
+};
+```
+
+## 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.
+
+## 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';
+
+<Meta title='App Component' />
+
+# App Component
+
+Some **markdown** description, or whatever you want.
+
+<Story name='basic' height='400px'>{() => {
+return { ... }; // should match the typical story format for your framework
+}}</Story>
+```
+
+## IFrame height
+
+In the "common" setup, Storybook Docs renders stories inside `iframe`s, with a default height of `60px`. You can update this default globally, or modify the `iframe` height locally per story in `DocsPage` and `MDX`.
+
+To update the global default, modify `.storybook/preview.js`:
+
+```ts
+export const parameters = { docs: { story: { iframeHeight: '400px' } } };
+```
+
+For `DocsPage`, you need to update the parameter locally in a story:
+
+```ts
+export const basic = () => ...
+basic.parameters = {
+  docs: { story: { iframeHeight: '400px' } }
+}
+```
+
+And for `MDX` you can modify it, especially if you work with some components using fixed or sticky positions, as an attribute on the `Story` element:
+
+```md
+<Story name='basic' height='400px'>{...}</Story>
+```
+
+## 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/dist/DocsRenderer-3PUGWF3O.mjs

@@ -0,0 +1 @@
+export { DocsRenderer, defaultComponents } from './chunk-S4VUQJ4A.mjs';

package/dist/blocks.d.ts

@@ -0,0 +1,2 @@
+export * from '@storybook/blocks';
+import '@mdx-js/react';

package/dist/blocks.js

@@ -0,0 +1 @@
+"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to},__reExport=(target,mod,secondTarget)=>(__copyProps(target,mod,"default"),secondTarget&&__copyProps(secondTarget,mod,"default"));var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var blocks_exports={};module.exports=__toCommonJS(blocks_exports);var import_client_logger=require("@storybook/client-logger");__reExport(blocks_exports,require("@storybook/blocks"),module.exports);(0,import_client_logger.deprecate)("Import from '@storybook/addon-docs/blocks' is deprecated. Please import from '@storybook/blocks' instead.");0&&(module.exports={...require("@storybook/blocks")});

package/dist/blocks.mjs

@@ -0,0 +1,4 @@
+import { deprecate } from '@storybook/client-logger';
+export * from '@storybook/blocks';
+
+deprecate("Import from '@storybook/addon-docs/blocks' is deprecated. Please import from '@storybook/blocks' instead.");

package/dist/chunk-S4VUQJ4A.mjs

@@ -0,0 +1,7 @@
+import React, { Component } from 'react';
+import { renderElement, unmountElement } from '@storybook/react-dom-shim';
+import { CodeOrSourceMdx, AnchorMdx, HeadersMdx, Docs } from '@storybook/blocks';
+
+var defaultComponents={code:CodeOrSourceMdx,a:AnchorMdx,...HeadersMdx},ErrorBoundary=class extends Component{constructor(){super(...arguments);this.state={hasError:!1};}static getDerivedStateFromError(){return {hasError:!0}}componentDidCatch(err){let{showException}=this.props;showException(err);}render(){let{hasError}=this.state,{children}=this.props;return hasError?null:children}},DocsRenderer=class{constructor(){this.render=async(context,docsParameter,element)=>{let components={...defaultComponents,...docsParameter?.components},TDocs=Docs;return new Promise((resolve,reject)=>{import('@mdx-js/react').then(({MDXProvider})=>renderElement(React.createElement(ErrorBoundary,{showException:reject,key:Math.random()},React.createElement(MDXProvider,{components},React.createElement(TDocs,{context,docsParameter}))),element)).then(()=>resolve());})},this.unmount=element=>{unmountElement(element);};}};
+
+export { DocsRenderer, defaultComponents };

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+export * from '@storybook/blocks';
+import { Renderer, DocsRenderFunction } from '@storybook/types';
+
+declare class DocsRenderer<TRenderer extends Renderer> {
+    render: DocsRenderFunction<TRenderer>;
+    unmount: (element: HTMLElement) => void;
+    constructor();
+}
+
+export { DocsRenderer };

package/dist/index.js

@@ -0,0 +1 @@
+"use strict";var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to},__reExport=(target,mod,secondTarget)=>(__copyProps(target,mod,"default"),secondTarget&&__copyProps(secondTarget,mod,"default")),__toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var src_exports={};__export(src_exports,{DocsRenderer:()=>DocsRenderer});module.exports=__toCommonJS(src_exports);__reExport(src_exports,require("@storybook/blocks"),module.exports);var import_react=__toESM(require("react")),import_react_dom_shim=require("@storybook/react-dom-shim"),import_blocks=require("@storybook/blocks"),defaultComponents={code:import_blocks.CodeOrSourceMdx,a:import_blocks.AnchorMdx,...import_blocks.HeadersMdx},ErrorBoundary=class extends import_react.Component{constructor(){super(...arguments);this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(err){let{showException}=this.props;showException(err)}render(){let{hasError}=this.state,{children}=this.props;return hasError?null:children}},DocsRenderer=class{constructor(){this.render=async(context,docsParameter,element)=>{let components={...defaultComponents,...docsParameter==null?void 0:docsParameter.components},TDocs=import_blocks.Docs;return new Promise((resolve,reject)=>{import("@mdx-js/react").then(({MDXProvider})=>(0,import_react_dom_shim.renderElement)(import_react.default.createElement(ErrorBoundary,{showException:reject,key:Math.random()},import_react.default.createElement(MDXProvider,{components},import_react.default.createElement(TDocs,{context,docsParameter}))),element)).then(()=>resolve())})},this.unmount=element=>{(0,import_react_dom_shim.unmountElement)(element)}}};0&&(module.exports={DocsRenderer,...require("@storybook/blocks")});

package/dist/index.mjs

@@ -0,0 +1,2 @@
+export { DocsRenderer } from './chunk-S4VUQJ4A.mjs';
+export * from '@storybook/blocks';

package/dist/preset.d.ts

@@ -0,0 +1,8 @@
+import { StorybookConfig } from '@storybook/types';
+
+declare const addons: StorybookConfig['addons'];
+declare const webpackX: any;
+declare const storyIndexersX: any;
+declare const docsX: any;
+
+export { addons, docsX as docs, storyIndexersX as storyIndexers, webpackX as webpack };

package/dist/preset.js

@@ -0,0 +1,40 @@
+"use strict";var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var preset_exports={};__export(preset_exports,{addons:()=>addons,docs:()=>docsX,storyIndexers:()=>storyIndexersX,webpack:()=>webpackX});module.exports=__toCommonJS(preset_exports);var import_fs_extra=__toESM(require("fs-extra")),import_remark_slug=__toESM(require("remark-slug")),import_remark_external_links=__toESM(require("remark-external-links")),import_ts_dedent2=require("ts-dedent"),import_global=require("@storybook/global"),import_csf_tools=require("@storybook/csf-tools"),import_node_logger2=require("@storybook/node-logger");var import_node_logger=require("@storybook/node-logger"),import_ts_dedent=__toESM(require("ts-dedent"));function ensureReactPeerDeps(){try{require.resolve("react"),require.resolve("react-dom")}catch{import_node_logger.logger.error(import_ts_dedent.default`
+      Starting in 7.0, react and react-dom are now required peer dependencies of Storybook.
+      https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#react-peer-dependencies-required
+
+      It seems that you haven't run Storybook's CLI to upgrade to the latest version.
+      The upgrade command will install the required peer dependencies for you and will take 
+      care of other important auto migrations as well.
+
+      If you want to upgrade to the latest prerelease version, please run:
+
+      $ npx storybook@next upgrade --prerelease
+
+      Otherwise, please run:
+
+      $ npx storybook upgrade
+
+      If you do not want to use the upgrade commands, 
+      please install react and react-dom in your project manually.
+
+      npm:
+      $ npm add react react-dom --dev
+
+      yarn:
+      $ yarn add react react-dom --dev
+
+      pnpm:
+      $ pnpm add react react-dom --dev
+    `),process.exit(1)}}async function webpack(webpackConfig={},options){var _a,_b,_c;let{module:module2={}}=webpackConfig,{csfPluginOptions={},jsxOptions={},sourceLoaderOptions=null,configureJsx,mdxBabelOptions,mdxPluginOptions={}}=options,mdxLoaderOptions=await options.presets.apply("mdxLoaderOptions",{skipCsf:!0,...mdxPluginOptions,mdxCompileOptions:{providerImportSource:"@storybook/addon-docs/mdx-react-shim",...mdxPluginOptions.mdxCompileOptions,remarkPlugins:[import_remark_slug.default,import_remark_external_links.default].concat(((_a=mdxPluginOptions==null?void 0:mdxPluginOptions.mdxCompileOptions)==null?void 0:_a.remarkPlugins)??[])},jsxOptions});if(sourceLoaderOptions)throw new Error(import_ts_dedent2.dedent`
+      Addon-docs no longer uses source-loader in 7.0.
+
+      To update your configuration, please see migration instructions here:
+
+      https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#dropped-source-loader--storiesof-static-snippets
+    `);if(mdxBabelOptions||configureJsx)throw new Error(import_ts_dedent2.dedent`
+      Addon-docs no longer uses configureJsx or mdxBabelOptions in 7.0.
+
+      To update your configuration, please see migration instructions here:
+
+      https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#dropped-addon-docs-manual-babel-configuration
+    `);let mdxVersion=(_b=import_global.global.FEATURES)!=null&&_b.legacyMdx1?"MDX1":"MDX2";import_node_logger2.logger.info(`Addon-docs: using ${mdxVersion}`);let mdxLoader=(_c=import_global.global.FEATURES)!=null&&_c.legacyMdx1?require.resolve("@storybook/mdx1-csf/loader"):require.resolve("@storybook/mdx2-csf/loader");return{...webpackConfig,plugins:[...webpackConfig.plugins||[],...csfPluginOptions?[(await import("@storybook/csf-plugin")).webpack(csfPluginOptions)]:[]],module:{...module2,rules:[...module2.rules,{test:/(stories|story)\.mdx$/,use:[{loader:mdxLoader,options:{...mdxLoaderOptions,skipCsf:!1}}]},{test:/\.mdx$/,exclude:/(stories|story)\.mdx$/,use:[{loader:mdxLoader,options:mdxLoaderOptions}]}]}}}var storyIndexers=indexers=>[{test:/(stories|story)\.mdx$/,indexer:async(fileName,opts)=>{var _a;let code=(await import_fs_extra.default.readFile(fileName,"utf-8")).toString(),{compile}=(_a=import_global.global.FEATURES)!=null&&_a.legacyMdx1?await import("@storybook/mdx1-csf"):await import("@storybook/mdx2-csf");return code=await compile(code,{}),(0,import_csf_tools.loadCsf)(code,{...opts,fileName}).parse()}},...indexers||[]],docs=docsOptions=>({...docsOptions,defaultName:"Docs",autodocs:"tag"}),addons=[require.resolve("@storybook/react-dom-shim/dist/preset")],webpackX=webpack,storyIndexersX=storyIndexers,docsX=docs;ensureReactPeerDeps();0&&(module.exports={addons,docs,storyIndexers,webpack});

package/dist/preview.d.ts

@@ -0,0 +1,3 @@
+declare const parameters: any;
+
+export { parameters };