@storybook/addon-docs 7.0.0-alpha.5 → 7.0.0-alpha.51

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (122) hide show
  1. package/README.md +14 -77
  2. package/angular/index.js +1 -1
  3. package/dist/DocsRenderer-MHI45CTG.mjs +1 -0
  4. package/dist/chunk-HKSD7XQF.mjs +1 -0
  5. package/dist/chunk-WMY67HY3.mjs +1 -0
  6. package/dist/index.d.ts +11 -0
  7. package/dist/index.js +1 -0
  8. package/dist/index.mjs +1 -0
  9. package/dist/preset.d.ts +5 -0
  10. package/dist/preset.js +7 -0
  11. package/dist/preset.mjs +7 -0
  12. package/dist/preview.d.ts +3 -0
  13. package/dist/preview.js +1 -0
  14. package/dist/preview.mjs +1 -0
  15. package/jest-transform-mdx.js +4 -3
  16. package/jest.config.js +7 -0
  17. package/package.json +65 -38
  18. package/preset.js +1 -1
  19. package/preview.js +1 -1
  20. package/web-components/README.md +1 -0
  21. package/LICENSE +0 -21
  22. package/blocks.d.ts +0 -2
  23. package/blocks.js +0 -14
  24. package/dist/cjs/blocks/Anchor.js +0 -23
  25. package/dist/cjs/blocks/ArgsTable.js +0 -329
  26. package/dist/cjs/blocks/Canvas.js +0 -109
  27. package/dist/cjs/blocks/Description.js +0 -126
  28. package/dist/cjs/blocks/DocsContainer.js +0 -127
  29. package/dist/cjs/blocks/DocsContext.js +0 -25
  30. package/dist/cjs/blocks/DocsPage.js +0 -30
  31. package/dist/cjs/blocks/DocsStory.js +0 -68
  32. package/dist/cjs/blocks/Heading.js +0 -31
  33. package/dist/cjs/blocks/Meta.js +0 -50
  34. package/dist/cjs/blocks/Preview.js +0 -23
  35. package/dist/cjs/blocks/Primary.js +0 -39
  36. package/dist/cjs/blocks/Props.js +0 -29
  37. package/dist/cjs/blocks/Source.js +0 -179
  38. package/dist/cjs/blocks/SourceContainer.js +0 -67
  39. package/dist/cjs/blocks/Stories.js +0 -51
  40. package/dist/cjs/blocks/Story.js +0 -143
  41. package/dist/cjs/blocks/Subheading.js +0 -31
  42. package/dist/cjs/blocks/Subtitle.js +0 -39
  43. package/dist/cjs/blocks/Title.js +0 -44
  44. package/dist/cjs/blocks/Wrapper.js +0 -20
  45. package/dist/cjs/blocks/enhanceSource.js +0 -92
  46. package/dist/cjs/blocks/index.js +0 -366
  47. package/dist/cjs/blocks/mdx.js +0 -234
  48. package/dist/cjs/blocks/types.js +0 -10
  49. package/dist/cjs/blocks/useStory.js +0 -37
  50. package/dist/cjs/blocks/utils.js +0 -40
  51. package/dist/cjs/index.js +0 -18
  52. package/dist/cjs/manager.js +0 -20
  53. package/dist/cjs/preset.js +0 -162
  54. package/dist/cjs/preview.js +0 -18
  55. package/dist/cjs/shared.js +0 -22
  56. package/dist/esm/blocks/Anchor.js +0 -8
  57. package/dist/esm/blocks/ArgsTable.js +0 -292
  58. package/dist/esm/blocks/Canvas.js +0 -83
  59. package/dist/esm/blocks/Description.js +0 -107
  60. package/dist/esm/blocks/DocsContainer.js +0 -98
  61. package/dist/esm/blocks/DocsContext.js +0 -16
  62. package/dist/esm/blocks/DocsPage.js +0 -11
  63. package/dist/esm/blocks/DocsStory.js +0 -46
  64. package/dist/esm/blocks/Heading.js +0 -17
  65. package/dist/esm/blocks/Meta.js +0 -31
  66. package/dist/esm/blocks/Preview.js +0 -9
  67. package/dist/esm/blocks/Primary.js +0 -23
  68. package/dist/esm/blocks/Props.js +0 -14
  69. package/dist/esm/blocks/Source.js +0 -144
  70. package/dist/esm/blocks/SourceContainer.js +0 -44
  71. package/dist/esm/blocks/Stories.js +0 -30
  72. package/dist/esm/blocks/Story.js +0 -114
  73. package/dist/esm/blocks/Subheading.js +0 -17
  74. package/dist/esm/blocks/Subtitle.js +0 -23
  75. package/dist/esm/blocks/Title.js +0 -24
  76. package/dist/esm/blocks/Wrapper.js +0 -8
  77. package/dist/esm/blocks/enhanceSource.js +0 -87
  78. package/dist/esm/blocks/index.js +0 -24
  79. package/dist/esm/blocks/mdx.js +0 -203
  80. package/dist/esm/blocks/types.js +0 -2
  81. package/dist/esm/blocks/useStory.js +0 -27
  82. package/dist/esm/blocks/utils.js +0 -29
  83. package/dist/esm/index.js +0 -1
  84. package/dist/esm/manager.js +0 -16
  85. package/dist/esm/preset.js +0 -132
  86. package/dist/esm/preview.js +0 -6
  87. package/dist/esm/shared.js +0 -11
  88. package/dist/types/blocks/Anchor.d.ts +0 -6
  89. package/dist/types/blocks/ArgsTable.d.ts +0 -33
  90. package/dist/types/blocks/Canvas.d.ts +0 -9
  91. package/dist/types/blocks/Description.d.ts +0 -20
  92. package/dist/types/blocks/DocsContainer.d.ts +0 -7
  93. package/dist/types/blocks/DocsContext.d.ts +0 -5
  94. package/dist/types/blocks/DocsPage.d.ts +0 -2
  95. package/dist/types/blocks/DocsStory.d.ts +0 -3
  96. package/dist/types/blocks/Heading.d.ts +0 -6
  97. package/dist/types/blocks/Meta.d.ts +0 -9
  98. package/dist/types/blocks/Preview.d.ts +0 -3
  99. package/dist/types/blocks/Primary.d.ts +0 -6
  100. package/dist/types/blocks/Props.d.ts +0 -3
  101. package/dist/types/blocks/Source.d.ts +0 -38
  102. package/dist/types/blocks/SourceContainer.d.ts +0 -14
  103. package/dist/types/blocks/Stories.d.ts +0 -7
  104. package/dist/types/blocks/Story.d.ts +0 -28
  105. package/dist/types/blocks/Subheading.d.ts +0 -3
  106. package/dist/types/blocks/Subtitle.d.ts +0 -6
  107. package/dist/types/blocks/Title.d.ts +0 -8
  108. package/dist/types/blocks/Wrapper.d.ts +0 -2
  109. package/dist/types/blocks/enhanceSource.d.ts +0 -3
  110. package/dist/types/blocks/index.d.ts +0 -24
  111. package/dist/types/blocks/mdx.d.ts +0 -20
  112. package/dist/types/blocks/types.d.ts +0 -13
  113. package/dist/types/blocks/useStory.d.ts +0 -5
  114. package/dist/types/blocks/utils.d.ts +0 -3
  115. package/dist/types/index.d.ts +0 -1
  116. package/dist/types/manager.d.ts +0 -1
  117. package/dist/types/preset.d.ts +0 -12
  118. package/dist/types/preview.d.ts +0 -6
  119. package/dist/types/shared.d.ts +0 -24
  120. package/manager.js +0 -1
  121. package/mdx-compiler-plugin.js +0 -1
  122. package/register.js +0 -6
package/README.md CHANGED
@@ -23,7 +23,6 @@ Read on to learn more:
23
23
  - [Installation](#installation)
24
24
  - [Be sure to check framework specific installation needs](#be-sure-to-check-framework-specific-installation-needs)
25
25
  - [Preset options](#preset-options)
26
- - [Manual configuration](#manual-configuration)
27
26
  - [TypeScript configuration](#typescript-configuration)
28
27
  - [More resources](#more-resources)
29
28
 
@@ -37,7 +36,7 @@ Click on the `Docs` tab to see it:
37
36
  <img src="https://raw.githubusercontent.com/storybookjs/storybook/main/addons/docs/docs/media/docs-tab.png" width="100%" />
38
37
  </center>
39
38
 
40
- For more information on how it works, see the [`DocsPage` reference](https://github.com/storybookjs/storybook/tree/next/addons/docs/docs/docspage.md).
39
+ For more information on how it works, see the [`DocsPage` reference](https://github.com/storybookjs/storybook/blob/next/code/addons/docs/docs/docspage.md).
41
40
 
42
41
  ## MDX
43
42
 
@@ -73,7 +72,7 @@ And here's how that's rendered in Storybook:
73
72
  <img src="https://raw.githubusercontent.com/storybookjs/storybook/main/addons/docs/docs/media/mdx-simple.png" width="100%" />
74
73
  </center>
75
74
 
76
- For more information on `MDX`, see the [`MDX` reference](https://github.com/storybookjs/storybook/tree/next/addons/docs/docs/mdx.md).
75
+ For more information on `MDX`, see the [`MDX` reference](https://github.com/storybookjs/storybook/blob/next/code/addons/docs/docs/mdx.md).
77
76
 
78
77
  ## Framework support
79
78
 
@@ -81,10 +80,9 @@ Storybook Docs supports all view layers that Storybook supports except for React
81
80
 
82
81
  [Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
83
82
 
84
-
85
83
  **Note:** `#` = WIP support
86
84
 
87
- Want to add enhanced features to your favorite framework? Check out this [dev guide](https://github.com/storybookjs/storybook/tree/next/addons/docs/docs/multiframework.md)
85
+ 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)
88
86
 
89
87
  ## Installation
90
88
 
@@ -109,7 +107,7 @@ module.exports = {
109
107
  };
110
108
  ```
111
109
 
112
- If using in conjunction with the [storyshots add-on](https://github.com/storybookjs/storybook/blob/next/addons/storyshots/storyshots-core/README.md), you will need to
110
+ If using in conjunction with the [storyshots add-on](https://github.com/storybookjs/storybook/blob/next/code/addons/storyshots/storyshots-core/README.md), you will need to
113
111
  configure Jest to transform MDX stories into something Storyshots can understand:
114
112
 
115
113
  Add the following to your Jest configuration:
@@ -125,12 +123,12 @@ Add the following to your Jest configuration:
125
123
 
126
124
  ### Be sure to check framework specific installation needs
127
125
 
128
- - [React](https://github.com/storybookjs/storybook/tree/next/addons/docs/react) (covered here)
129
- - [Vue](https://github.com/storybookjs/storybook/tree/next/addons/docs/vue)
130
- - [Angular](https://github.com/storybookjs/storybook/tree/next/addons/docs/angular)
131
- - [Ember](https://github.com/storybookjs/storybook/tree/next/addons/docs/ember)
132
- - [Web Components](https://github.com/storybookjs/storybook/tree/next/addons/docs/web-components)
133
- - [Common setup (all other frameworks)](https://github.com/storybookjs/storybook/tree/next/addons/docs/common)
126
+ - [React](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/react) (covered here)
127
+ - [Vue](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/vue)
128
+ - [Angular](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/angular)
129
+ - [Ember](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/ember)
130
+ - [Web Components](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/web-components)
131
+ - [Common setup (all other frameworks)](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/common)
134
132
 
135
133
  ## Preset options
136
134
 
@@ -144,7 +142,7 @@ module.exports = {
144
142
  options: {
145
143
  configureJSX: true,
146
144
  babelOptions: {},
147
- sourceLoaderOptions: null,
145
+ csfPluginOptions: null,
148
146
  transcludeMarkdown: true,
149
147
  },
150
148
  },
@@ -154,7 +152,7 @@ module.exports = {
154
152
 
155
153
  The `configureJSX` option is useful when you're writing your docs in MDX and your project's babel config isn't already set up to handle JSX files. `babelOptions` is a way to further configure the babel processor when you're using `configureJSX`.
156
154
 
157
- `sourceLoaderOptions` is an object for configuring `@storybook/source-loader`. When set to `null` it tells docs not to run the `source-loader` at all, which can be used as an optimization, or if you're already using `source-loader` in your `main.js`.
155
+ `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`.
158
156
 
159
157
  The `transcludeMarkdown` option enables mdx files to import `.md` files and render them as a component.
160
158
 
@@ -167,75 +165,14 @@ import Changelog from '../CHANGELOG.md';
167
165
  <Changelog />
168
166
  ```
169
167
 
170
- ## Manual configuration
171
-
172
- We recommend using the preset, which should work out of the box. If you don't want to use the preset, and prefer to configure "the long way" add the following configuration to `.storybook/main.js` (see comments inline for explanation):
173
-
174
- ```js
175
- const createCompiler = require('@storybook/addon-docs/mdx-compiler-plugin');
176
-
177
- module.exports = {
178
- // 1. register the docs panel (as opposed to '@storybook/addon-docs' which
179
- // will configure everything with a preset)
180
- addons: ['@storybook/addon-docs/register'],
181
- // 2. manually configure webpack, since you're not using the preset
182
- webpackFinal: async (config) => {
183
- config.module.rules.push({
184
- // 2a. Load `.stories.mdx` / `.story.mdx` files as CSF and generate
185
- // the docs page from the markdown
186
- test: /\.(stories|story)\.mdx$/,
187
- use: [
188
- {
189
- // Need to add babel-loader as dependency: `yarn add -D babel-loader`
190
- loader: require.resolve('babel-loader'),
191
- // may or may not need this line depending on your app's setup
192
- options: {
193
- plugins: ['@babel/plugin-transform-react-jsx'],
194
- },
195
- },
196
- {
197
- loader: '@mdx-js/loader',
198
- options: {
199
- compilers: [createCompiler({})],
200
- },
201
- },
202
- ],
203
- });
204
- // 2b. Run `source-loader` on story files to show their source code
205
- // automatically in `DocsPage` or the `Source` doc block.
206
- config.module.rules.push({
207
- test: /\.(stories|story)\.[tj]sx?$/,
208
- loader: require.resolve('@storybook/source-loader'),
209
- exclude: [/node_modules/],
210
- enforce: 'pre',
211
- });
212
- return config;
213
- },
214
- };
215
- ```
216
-
217
- You'll also need to set up the docs parameter in `.storybook/preview.js`. This includes the `DocsPage` for rendering the page, a container, and various configuration options, such as `extractComponentDescription` for manually extracting a component description:
218
-
219
- ```js
220
- import { addParameters } from '@storybook/react';
221
- import { DocsPage, DocsContainer } from '@storybook/addon-docs';
222
-
223
- addParameters({
224
- docs: {
225
- container: DocsContainer,
226
- page: DocsPage,
227
- },
228
- });
229
- ```
230
-
231
168
  ## TypeScript configuration
232
169
 
233
- 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/addons/docs/docs/props-tables.md).
170
+ 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).
234
171
 
235
172
  ## More resources
236
173
 
237
174
  Want to learn more? Here are some more articles on Storybook Docs:
238
175
 
239
- - References: [DocsPage](https://github.com/storybookjs/storybook/tree/next/addons/docs/docs/docspage.md) / [MDX](https://github.com/storybookjs/storybook/tree/next/addons/docs/docs/mdx.md) / [FAQ](https://github.com/storybookjs/storybook/tree/next/addons/docs/docs/faq.md) / [Recipes](https://github.com/storybookjs/storybook/tree/next/addons/docs/docs/recipes.md) / [Theming](https://github.com/storybookjs/storybook/tree/next/addons/docs/docs/theming.md) / [Props](https://github.com/storybookjs/storybook/tree/next/addons/docs/docs/props-tables.md)
176
+ - 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)
240
177
  - 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)
241
178
  - Example: [Storybook Design System](https://github.com/storybookjs/design-system)
package/angular/index.js CHANGED
@@ -2,6 +2,6 @@
2
2
  /* global window */
3
3
 
4
4
  export const setCompodocJson = (compodocJson) => {
5
- // @ts-ignore
5
+ // @ts-expect-error (Converted from ts-ignore)
6
6
  window.__STORYBOOK_COMPODOC_JSON__ = compodocJson;
7
7
  };
@@ -0,0 +1 @@
1
+ import{a,b}from"./chunk-WMY67HY3.mjs";import"./chunk-HKSD7XQF.mjs";export{b as DocsRenderer,a as defaultComponents};
@@ -0,0 +1 @@
1
+ var d=(a=>typeof require!="undefined"?require:typeof Proxy!="undefined"?new Proxy(a,{get:(b,c)=>(typeof require!="undefined"?require:b)[c]}):a)(function(a){if(typeof require!="undefined")return require.apply(this,arguments);throw new Error('Dynamic require of "'+a+'" is not supported')});export{d as a};
@@ -0,0 +1 @@
1
+ import r from"react";import t from"react-dom";import{components as p}from"@storybook/components";import{Docs as c,CodeOrSourceMdx as i,AnchorMdx as u,HeadersMdx as a}from"@storybook/blocks";import{MDXProvider as M}from"@mdx-js/react";var l={...p,code:i,a:u,...a},n=class{constructor(){this.render=(e,o,m,s)=>{let d={...l,...o?.components};t.render(r.createElement(M,{components:d},r.createElement(c,{key:Math.random(),context:e,docsParameter:o})),m,s)},this.unmount=e=>{t.unmountComponentAtNode(e)}}};export{l as a,n as b};
@@ -0,0 +1,11 @@
1
+ export * from '@storybook/blocks';
2
+ import { Renderer } from '@storybook/types';
3
+ import { DocsRenderFunction } from '@storybook/preview-web';
4
+
5
+ declare class DocsRenderer<TRenderer extends Renderer> {
6
+ render: DocsRenderFunction<TRenderer>;
7
+ unmount: (element: HTMLElement) => void;
8
+ constructor();
9
+ }
10
+
11
+ export { DocsRenderer };
package/dist/index.js ADDED
@@ -0,0 +1 @@
1
+ var R=Object.create;var d=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var C=Object.getPrototypeOf,T=Object.prototype.hasOwnProperty;var b=(e,o)=>{for(var r in o)d(e,r,{get:o[r],enumerable:!0})},s=(e,o,r,p)=>{if(o&&typeof o=="object"||typeof o=="function")for(let t of v(o))!T.call(e,t)&&t!==r&&d(e,t,{get:()=>o[t],enumerable:!(p=y(o,t))||p.enumerable});return e},i=(e,o,r)=>(s(e,o,"default"),r&&s(r,o,"default")),f=(e,o,r)=>(r=e!=null?R(C(e)):{},s(o||!e||!e.__esModule?d(r,"default",{value:e,enumerable:!0}):r,e)),h=e=>s(d({},"__esModule",{value:!0}),e);var m={};b(m,{DocsRenderer:()=>c});module.exports=h(m);i(m,require("@storybook/blocks"),module.exports);var u=f(require("react")),x=f(require("react-dom")),M=require("@storybook/components"),n=require("@storybook/blocks"),l=require("@mdx-js/react"),a={...M.components,code:n.CodeOrSourceMdx,a:n.AnchorMdx,...n.HeadersMdx},c=class{constructor(){this.render=(o,r,p,t)=>{let D={...a,...r==null?void 0:r.components};x.default.render(u.default.createElement(l.MDXProvider,{components:D},u.default.createElement(n.Docs,{key:Math.random(),context:o,docsParameter:r})),p,t)},this.unmount=o=>{x.default.unmountComponentAtNode(o)}}};0&&(module.exports={DocsRenderer});
package/dist/index.mjs ADDED
@@ -0,0 +1 @@
1
+ import{b as r}from"./chunk-WMY67HY3.mjs";import"./chunk-HKSD7XQF.mjs";export*from"@storybook/blocks";export{r as DocsRenderer};
@@ -0,0 +1,5 @@
1
+ declare const webpackX: any;
2
+ declare const storyIndexersX: any;
3
+ declare const docsX: any;
4
+
5
+ export { docsX as docs, storyIndexersX as storyIndexers, webpackX as webpack };
package/dist/preset.js ADDED
@@ -0,0 +1,7 @@
1
+ var I=Object.create;var u=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,$=Object.prototype.hasOwnProperty;var X=(e,r)=>{for(var o in r)u(e,o,{get:r[o],enumerable:!0})},y=(e,r,o,t)=>{if(r&&typeof r=="object"||typeof r=="function")for(let s of L(r))!$.call(e,s)&&s!==o&&u(e,s,{get:()=>r[s],enumerable:!(t=w(r,s))||t.enumerable});return e};var i=(e,r,o)=>(o=e!=null?I(S(e)):{},y(r||!e||!e.__esModule?u(o,"default",{value:e,enumerable:!0}):o,e)),h=e=>y(u({},"__esModule",{value:!0}),e);var v={};X(v,{docs:()=>q,storyIndexers:()=>j,webpack:()=>_});module.exports=h(v);var g=i(require("fs-extra")),b=i(require("remark-slug")),x=i(require("remark-external-links")),k=require("ts-dedent"),O=require("@storybook/csf-tools");function m({mdxBabelOptions:e,configureJSX:r}){let o=(e==null?void 0:e.plugins)||[],t=o.filter(a=>{let l=Array.isArray(a)?a[0]:a;return typeof l=="string"?!l.includes("plugin-transform-react-jsx"):!0}),s=[require.resolve("@babel/plugin-transform-react-jsx"),{pragma:"React.createElement",pragmaFrag:"React.Fragment"}],n=r?[...t,s]:o;return{babelrc:!1,configFile:!1,...e,plugins:n}}async function A(e={},r){let o=await r.presets.apply("babelLoaderRef"),{module:t={}}=e,{mdxBabelOptions:s,configureJSX:n=!0,csfPluginOptions:a={},sourceLoaderOptions:l=null,transcludeMarkdown:P=!1}=r,d={skipCsf:!0,remarkPlugins:[b.default,x.default]};if(l)throw new Error(k.dedent`
2
+ Addon-docs no longer uses source-loader in 7.0.
3
+
4
+ To update your configuration, please see migration instructions here:
5
+
6
+ https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#dropped-source-loader--storiesof-static-snippets
7
+ `);let c=require.resolve("@storybook/mdx2-csf/loader"),p=t.rules||[];return P&&(p=[...p.filter(C=>{var f;return((f=C.test)==null?void 0:f.toString())!=="/\\.md$/"}),{test:/\.md$/,use:[{loader:o,options:m({mdxBabelOptions:s,configureJSX:n})},{loader:c,options:d}]}]),{...e,plugins:[...e.plugins||[],...a?[require("@storybook/csf-plugin").webpack(a)]:[]],module:{...t,rules:[...p,{test:/(stories|story)\.mdx$/,use:[{loader:o,options:m({mdxBabelOptions:s,configureJSX:n})},{loader:c,options:{...d,skipCsf:!1}}]},{test:/\.mdx$/,exclude:/(stories|story)\.mdx$/,use:[{loader:o,options:m({mdxBabelOptions:s,configureJSX:n})},{loader:c,options:d}]}]}}}var F=e=>[{test:/(stories|story)\.mdx$/,indexer:async(o,t)=>{let s=(await g.default.readFile(o,"utf-8")).toString(),{compile:n}=await import("@storybook/mdx2-csf");return s=await n(s,{}),(0,O.loadCsf)(s,{...t,fileName:o}).parse()}},...e||[]],R=e=>({...e,enabled:!0,defaultName:"Docs",docsPage:!0}),_=A,j=F,q=R;0&&(module.exports={docs,storyIndexers,webpack});
@@ -0,0 +1,7 @@
1
+ import{a as l}from"./chunk-HKSD7XQF.mjs";import y from"fs-extra";import g from"remark-slug";import b from"remark-external-links";import{dedent as x}from"ts-dedent";import{loadCsf as O}from"@storybook/csf-tools";function p({mdxBabelOptions:e,configureJSX:a}){let o=e?.plugins||[],t=o.filter(n=>{let i=Array.isArray(n)?n[0]:n;return typeof i=="string"?!i.includes("plugin-transform-react-jsx"):!0}),r=[l.resolve("@babel/plugin-transform-react-jsx"),{pragma:"React.createElement",pragmaFrag:"React.Fragment"}],s=a?[...t,r]:o;return{babelrc:!1,configFile:!1,...e,plugins:s}}async function k(e={},a){let o=await a.presets.apply("babelLoaderRef"),{module:t={}}=e,{mdxBabelOptions:r,configureJSX:s=!0,csfPluginOptions:n={},sourceLoaderOptions:i=null,transcludeMarkdown:m=!1}=a,d={skipCsf:!0,remarkPlugins:[g,b]};if(i)throw new Error(x`
2
+ Addon-docs no longer uses source-loader in 7.0.
3
+
4
+ To update your configuration, please see migration instructions here:
5
+
6
+ https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#dropped-source-loader--storiesof-static-snippets
7
+ `);let u=l.resolve("@storybook/mdx2-csf/loader"),c=t.rules||[];return m&&(c=[...c.filter(f=>f.test?.toString()!=="/\\.md$/"),{test:/\.md$/,use:[{loader:o,options:p({mdxBabelOptions:r,configureJSX:s})},{loader:u,options:d}]}]),{...e,plugins:[...e.plugins||[],...n?[l("@storybook/csf-plugin").webpack(n)]:[]],module:{...t,rules:[...c,{test:/(stories|story)\.mdx$/,use:[{loader:o,options:p({mdxBabelOptions:r,configureJSX:s})},{loader:u,options:{...d,skipCsf:!1}}]},{test:/\.mdx$/,exclude:/(stories|story)\.mdx$/,use:[{loader:o,options:p({mdxBabelOptions:r,configureJSX:s})},{loader:u,options:d}]}]}}}var P=e=>[{test:/(stories|story)\.mdx$/,indexer:async(o,t)=>{let r=(await y.readFile(o,"utf-8")).toString(),{compile:s}=await import("@storybook/mdx2-csf");return r=await s(r,{}),O(r,{...t,fileName:o}).parse()}},...e||[]],C=e=>({...e,enabled:!0,defaultName:"Docs",docsPage:!0}),X=k,h=P,j=C;export{j as docs,h as storyIndexers,X as webpack};
@@ -0,0 +1,3 @@
1
+ declare const parameters: any;
2
+
3
+ export { parameters };
@@ -0,0 +1 @@
1
+ var R=Object.create;var m=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var T=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var h=(e,o)=>()=>(e&&(o=e(e=0)),o);var i=(e,o)=>{for(var n in o)m(e,n,{get:o[n],enumerable:!0})},u=(e,o,n,s)=>{if(o&&typeof o=="object"||typeof o=="function")for(let t of C(o))!b.call(e,t)&&t!==n&&m(e,t,{get:()=>o[t],enumerable:!(s=v(o,t))||s.enumerable});return e};var a=(e,o,n)=>(n=e!=null?R(T(e)):{},u(o||!e||!e.__esModule?m(n,"default",{value:e,enumerable:!0}):n,e)),w=e=>u(m({},"__esModule",{value:!0}),e);var l={};i(l,{DocsRenderer:()=>c,defaultComponents:()=>M});var p,d,x,r,y,M,c,f=h(()=>{p=a(require("react")),d=a(require("react-dom")),x=require("@storybook/components"),r=require("@storybook/blocks"),y=require("@mdx-js/react"),M={...x.components,code:r.CodeOrSourceMdx,a:r.AnchorMdx,...r.HeadersMdx},c=class{constructor(){this.render=(o,n,s,t)=>{let D={...M,...n==null?void 0:n.components};d.default.render(p.default.createElement(y.MDXProvider,{components:D},p.default.createElement(r.Docs,{key:Math.random(),context:o,docsParameter:n})),s,t)},this.unmount=o=>{d.default.unmountComponentAtNode(o)}}}});var k={};i(k,{parameters:()=>H});module.exports=w(k);var H={docs:{renderer:async()=>{let{DocsRenderer:e}=await Promise.resolve().then(()=>(f(),l));return new e}}};0&&(module.exports={parameters});
@@ -0,0 +1 @@
1
+ import"./chunk-HKSD7XQF.mjs";var r={docs:{renderer:async()=>{let{DocsRenderer:e}=await import("./DocsRenderer-MHI45CTG.mjs");return new e}}};export{r as parameters};
@@ -2,15 +2,16 @@ const path = require('path');
2
2
  const { ScriptTransformer } = require('@jest/transform');
3
3
  const { dedent } = require('ts-dedent');
4
4
 
5
- const { compileSync } = require('@storybook/mdx1-csf');
5
+ const { compile } = require('@storybook/mdx2-csf');
6
6
 
7
7
  module.exports = {
8
- process(src, filename, config, { instrument }) {
8
+ async processAsync(src, filename, config, { instrument }) {
9
+ const code = await compile(src, { skipCsf: false });
9
10
  const result = dedent`
10
11
  /* @jsx mdx */
11
12
  import React from 'react'
12
13
  import { mdx } from '@mdx-js/react'
13
- ${compileSync(src, { filepath: filename })}
14
+ ${code}
14
15
  `;
15
16
 
16
17
  const extension = path.extname(filename);
package/jest.config.js ADDED
@@ -0,0 +1,7 @@
1
+ const path = require('path');
2
+ const baseConfig = require('../../jest.config.browser');
3
+
4
+ module.exports = {
5
+ ...baseConfig,
6
+ displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
7
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@storybook/addon-docs",
3
- "version": "7.0.0-alpha.5",
3
+ "version": "7.0.0-alpha.51",
4
4
  "description": "Document component usage and properties in Markdown",
5
5
  "keywords": [
6
6
  "addon",
@@ -24,9 +24,44 @@
24
24
  "url": "https://opencollective.com/storybook"
25
25
  },
26
26
  "license": "MIT",
27
- "main": "dist/cjs/index.js",
28
- "module": "dist/esm/index.js",
29
- "types": "dist/types/index.d.ts",
27
+ "exports": {
28
+ ".": {
29
+ "require": "./dist/index.js",
30
+ "import": "./dist/index.mjs",
31
+ "types": "./dist/index.d.ts"
32
+ },
33
+ "./preview": {
34
+ "require": "./dist/preview.js",
35
+ "import": "./dist/preview.mjs",
36
+ "types": "./dist/preview.d.ts"
37
+ },
38
+ "./preset": {
39
+ "require": "./dist/preset.js",
40
+ "import": "./dist/preset.mjs",
41
+ "types": "./dist/preset.d.ts"
42
+ },
43
+ "./dist/preview": {
44
+ "require": "./dist/preview.js",
45
+ "import": "./dist/preview.mjs",
46
+ "types": "./dist/preview.d.ts"
47
+ },
48
+ "./dist/preset": {
49
+ "require": "./dist/preset.js",
50
+ "import": "./dist/preset.mjs",
51
+ "types": "./dist/preset.d.ts"
52
+ },
53
+ "./svelte/HOC.svelte": "./svelte/HOC.svelte",
54
+ "./ember": "./ember/index.js",
55
+ "./ember/index.js": "./ember/index.js",
56
+ "./angular": "./angular/index.js",
57
+ "./angular/index.js": "./angular/index.js",
58
+ "./web-components/index.js": "./web-components/index.js",
59
+ "./jest-transform-mdx": "./jest-transform-mdx.js",
60
+ "./package.json": "./package.json"
61
+ },
62
+ "main": "dist/index.js",
63
+ "module": "dist/index.mjs",
64
+ "types": "dist/index.d.ts",
30
65
  "files": [
31
66
  "dist/**/*",
32
67
  "angular/**/*",
@@ -45,52 +80,37 @@
45
80
  "!__testfixtures__"
46
81
  ],
47
82
  "scripts": {
48
- "prepare": "node ../../scripts/prepare.js"
83
+ "check": "../../../scripts/node_modules/.bin/tsc --noEmit",
84
+ "prep": "../../../scripts/prepare/bundle.ts"
49
85
  },
50
86
  "dependencies": {
51
- "@babel/plugin-transform-react-jsx": "^7.12.12",
52
- "@babel/preset-env": "^7.12.11",
53
- "@jest/transform": "^26.6.2",
54
- "@mdx-js/react": "^1.6.22",
55
- "@storybook/addons": "7.0.0-alpha.5",
56
- "@storybook/api": "7.0.0-alpha.5",
57
- "@storybook/components": "7.0.0-alpha.5",
58
- "@storybook/core-common": "7.0.0-alpha.5",
59
- "@storybook/core-events": "7.0.0-alpha.5",
60
- "@storybook/csf": "0.0.2--canary.4566f4d.1",
61
- "@storybook/csf-tools": "7.0.0-alpha.5",
62
- "@storybook/docs-tools": "7.0.0-alpha.5",
63
- "@storybook/mdx1-csf": "^0.0.1",
64
- "@storybook/node-logger": "7.0.0-alpha.5",
65
- "@storybook/postinstall": "7.0.0-alpha.5",
66
- "@storybook/preview-web": "7.0.0-alpha.5",
67
- "@storybook/source-loader": "7.0.0-alpha.5",
68
- "@storybook/store": "7.0.0-alpha.5",
69
- "@storybook/theming": "7.0.0-alpha.5",
70
- "babel-loader": "^8.2.5",
71
- "core-js": "^3.8.2",
72
- "fast-deep-equal": "^3.1.3",
87
+ "@babel/plugin-transform-react-jsx": "^7.19.0",
88
+ "@jest/transform": "^29.3.1",
89
+ "@mdx-js/react": "^2.1.5",
90
+ "@storybook/blocks": "7.0.0-alpha.51",
91
+ "@storybook/components": "7.0.0-alpha.51",
92
+ "@storybook/csf-plugin": "7.0.0-alpha.51",
93
+ "@storybook/csf-tools": "7.0.0-alpha.51",
94
+ "@storybook/mdx2-csf": "next",
95
+ "@storybook/node-logger": "7.0.0-alpha.51",
96
+ "@storybook/postinstall": "7.0.0-alpha.51",
97
+ "@storybook/preview-web": "7.0.0-alpha.51",
98
+ "@storybook/types": "7.0.0-alpha.51",
99
+ "fs-extra": "^9.0.1",
73
100
  "global": "^4.4.0",
74
- "lodash": "^4.17.21",
75
101
  "remark-external-links": "^8.0.0",
76
102
  "remark-slug": "^6.0.0",
77
- "ts-dedent": "^2.0.0",
78
- "util-deprecate": "^1.0.2"
103
+ "ts-dedent": "^2.0.0"
79
104
  },
80
105
  "devDependencies": {
81
- "@babel/core": "^7.12.10",
82
- "@storybook/mdx2-csf": "^0.0.3",
83
- "@types/util-deprecate": "^1.0.0"
106
+ "@babel/core": "^7.20.2",
107
+ "typescript": "^4.9.3"
84
108
  },
85
109
  "peerDependencies": {
86
- "@storybook/mdx2-csf": "^0.0.3",
87
110
  "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
88
111
  "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
89
112
  },
90
113
  "peerDependenciesMeta": {
91
- "@storybook/mdx2-csf": {
92
- "optional": true
93
- },
94
114
  "react": {
95
115
  "optional": true
96
116
  },
@@ -101,7 +121,14 @@
101
121
  "publishConfig": {
102
122
  "access": "public"
103
123
  },
104
- "gitHead": "3dd46982823b34d9f37be917b6247631081feff7",
124
+ "bundler": {
125
+ "entries": [
126
+ "./src/index.ts",
127
+ "./src/preset.ts",
128
+ "./src/preview.ts"
129
+ ]
130
+ },
131
+ "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded",
105
132
  "storybook": {
106
133
  "displayName": "Docs",
107
134
  "icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png",
package/preset.js CHANGED
@@ -1 +1 @@
1
- module.exports = require('./dist/cjs/preset');
1
+ module.exports = require('./dist/preset');
package/preview.js CHANGED
@@ -1 +1 @@
1
- export * from './dist/esm/preview';
1
+ export * from './dist/preview';
@@ -39,6 +39,7 @@ Known analyzers that output `custom-elements.json` v1.0.0:
39
39
  - Supports Vanilla, LitElement, FASTElement, Stencil, Catalyst, Atomico
40
40
 
41
41
  Known analyzers that output older versions of `custom-elements.json`:
42
+
42
43
  - [web-component-analyzer](https://github.com/runem/web-component-analyzer)
43
44
  - Supports LitElement, Polymer, Vanilla, (Stencil)
44
45
  - [stenciljs](https://stenciljs.com/)
package/LICENSE DELETED
@@ -1,21 +0,0 @@
1
- The MIT License (MIT)
2
-
3
- Copyright (c) 2017 Kadira Inc. <hello@kadira.io>
4
-
5
- Permission is hereby granted, free of charge, to any person obtaining a copy
6
- of this software and associated documentation files (the "Software"), to deal
7
- in the Software without restriction, including without limitation the rights
8
- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
- copies of the Software, and to permit persons to whom the Software is
10
- furnished to do so, subject to the following conditions:
11
-
12
- The above copyright notice and this permission notice shall be included in
13
- all copies or substantial portions of the Software.
14
-
15
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
- FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
18
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21
- THE SOFTWARE.
package/blocks.d.ts DELETED
@@ -1,2 +0,0 @@
1
- export { ColorPalette, ColorItem, IconGallery, IconItem, Typeset } from '@storybook/components';
2
- export * from './dist/types/blocks/index.d';
package/blocks.js DELETED
@@ -1,14 +0,0 @@
1
- import deprecate from 'util-deprecate';
2
- import dedent from 'ts-dedent';
3
-
4
- const warnBlocksImport = deprecate(
5
- () => {},
6
- dedent`
7
- Importing from '@storybook/addon-docs/blocks' is deprecated, import directly from '@storybook/addon-docs' instead:
8
-
9
- https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-scoped-blocks-imports
10
- `
11
- );
12
- warnBlocksImport();
13
-
14
- export * from './dist/esm/blocks';
@@ -1,23 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.anchorBlockIdFromId = exports.Anchor = void 0;
7
-
8
- var _react = _interopRequireDefault(require("react"));
9
-
10
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
-
12
- const anchorBlockIdFromId = storyId => `anchor--${storyId}`;
13
-
14
- exports.anchorBlockIdFromId = anchorBlockIdFromId;
15
-
16
- const Anchor = ({
17
- storyId,
18
- children
19
- }) => /*#__PURE__*/_react.default.createElement("div", {
20
- id: anchorBlockIdFromId(storyId)
21
- }, children);
22
-
23
- exports.Anchor = Anchor;