@storybook/addon-docs 7.0.0-alpha.2 → 7.0.0-alpha.23

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 (103) hide show
  1. package/README.md +12 -13
  2. package/blocks.js +1 -1
  3. package/dist/cjs/DocsRenderer.js +52 -0
  4. package/dist/cjs/blocks/index.js +4 -352
  5. package/dist/cjs/index.js +13 -1
  6. package/dist/cjs/preset.js +19 -4
  7. package/dist/cjs/preview.js +6 -2
  8. package/dist/esm/DocsRenderer.js +34 -0
  9. package/dist/esm/blocks/index.js +1 -24
  10. package/dist/esm/index.js +2 -1
  11. package/dist/esm/preset.js +14 -2
  12. package/dist/esm/preview.js +6 -2
  13. package/dist/types/DocsRenderer.d.ts +8 -0
  14. package/dist/types/blocks/index.d.ts +1 -24
  15. package/dist/types/index.d.ts +1 -0
  16. package/dist/types/preset.d.ts +8 -2
  17. package/dist/types/preview.d.ts +1 -6
  18. package/package.json +25 -23
  19. package/web-components/README.md +1 -0
  20. package/LICENSE +0 -21
  21. package/dist/cjs/blocks/Anchor.js +0 -23
  22. package/dist/cjs/blocks/ArgsTable.js +0 -329
  23. package/dist/cjs/blocks/Canvas.js +0 -109
  24. package/dist/cjs/blocks/Description.js +0 -126
  25. package/dist/cjs/blocks/DocsContainer.js +0 -127
  26. package/dist/cjs/blocks/DocsContext.js +0 -25
  27. package/dist/cjs/blocks/DocsPage.js +0 -30
  28. package/dist/cjs/blocks/DocsStory.js +0 -68
  29. package/dist/cjs/blocks/Heading.js +0 -31
  30. package/dist/cjs/blocks/Meta.js +0 -50
  31. package/dist/cjs/blocks/Preview.js +0 -23
  32. package/dist/cjs/blocks/Primary.js +0 -39
  33. package/dist/cjs/blocks/Props.js +0 -29
  34. package/dist/cjs/blocks/Source.js +0 -179
  35. package/dist/cjs/blocks/SourceContainer.js +0 -67
  36. package/dist/cjs/blocks/Stories.js +0 -51
  37. package/dist/cjs/blocks/Story.js +0 -143
  38. package/dist/cjs/blocks/Subheading.js +0 -31
  39. package/dist/cjs/blocks/Subtitle.js +0 -39
  40. package/dist/cjs/blocks/Title.js +0 -44
  41. package/dist/cjs/blocks/Wrapper.js +0 -20
  42. package/dist/cjs/blocks/enhanceSource.js +0 -92
  43. package/dist/cjs/blocks/mdx.js +0 -234
  44. package/dist/cjs/blocks/types.js +0 -10
  45. package/dist/cjs/blocks/useStory.js +0 -37
  46. package/dist/cjs/blocks/utils.js +0 -40
  47. package/dist/cjs/manager.js +0 -20
  48. package/dist/esm/blocks/Anchor.js +0 -8
  49. package/dist/esm/blocks/ArgsTable.js +0 -292
  50. package/dist/esm/blocks/Canvas.js +0 -83
  51. package/dist/esm/blocks/Description.js +0 -107
  52. package/dist/esm/blocks/DocsContainer.js +0 -98
  53. package/dist/esm/blocks/DocsContext.js +0 -16
  54. package/dist/esm/blocks/DocsPage.js +0 -11
  55. package/dist/esm/blocks/DocsStory.js +0 -46
  56. package/dist/esm/blocks/Heading.js +0 -17
  57. package/dist/esm/blocks/Meta.js +0 -31
  58. package/dist/esm/blocks/Preview.js +0 -9
  59. package/dist/esm/blocks/Primary.js +0 -23
  60. package/dist/esm/blocks/Props.js +0 -14
  61. package/dist/esm/blocks/Source.js +0 -144
  62. package/dist/esm/blocks/SourceContainer.js +0 -44
  63. package/dist/esm/blocks/Stories.js +0 -30
  64. package/dist/esm/blocks/Story.js +0 -114
  65. package/dist/esm/blocks/Subheading.js +0 -17
  66. package/dist/esm/blocks/Subtitle.js +0 -23
  67. package/dist/esm/blocks/Title.js +0 -24
  68. package/dist/esm/blocks/Wrapper.js +0 -8
  69. package/dist/esm/blocks/enhanceSource.js +0 -87
  70. package/dist/esm/blocks/mdx.js +0 -203
  71. package/dist/esm/blocks/types.js +0 -2
  72. package/dist/esm/blocks/useStory.js +0 -27
  73. package/dist/esm/blocks/utils.js +0 -29
  74. package/dist/esm/manager.js +0 -16
  75. package/dist/types/blocks/Anchor.d.ts +0 -6
  76. package/dist/types/blocks/ArgsTable.d.ts +0 -33
  77. package/dist/types/blocks/Canvas.d.ts +0 -9
  78. package/dist/types/blocks/Description.d.ts +0 -20
  79. package/dist/types/blocks/DocsContainer.d.ts +0 -7
  80. package/dist/types/blocks/DocsContext.d.ts +0 -5
  81. package/dist/types/blocks/DocsPage.d.ts +0 -2
  82. package/dist/types/blocks/DocsStory.d.ts +0 -3
  83. package/dist/types/blocks/Heading.d.ts +0 -6
  84. package/dist/types/blocks/Meta.d.ts +0 -9
  85. package/dist/types/blocks/Preview.d.ts +0 -3
  86. package/dist/types/blocks/Primary.d.ts +0 -6
  87. package/dist/types/blocks/Props.d.ts +0 -3
  88. package/dist/types/blocks/Source.d.ts +0 -38
  89. package/dist/types/blocks/SourceContainer.d.ts +0 -14
  90. package/dist/types/blocks/Stories.d.ts +0 -7
  91. package/dist/types/blocks/Story.d.ts +0 -28
  92. package/dist/types/blocks/Subheading.d.ts +0 -3
  93. package/dist/types/blocks/Subtitle.d.ts +0 -6
  94. package/dist/types/blocks/Title.d.ts +0 -8
  95. package/dist/types/blocks/Wrapper.d.ts +0 -2
  96. package/dist/types/blocks/enhanceSource.d.ts +0 -3
  97. package/dist/types/blocks/mdx.d.ts +0 -20
  98. package/dist/types/blocks/types.d.ts +0 -13
  99. package/dist/types/blocks/useStory.d.ts +0 -5
  100. package/dist/types/blocks/utils.d.ts +0 -3
  101. package/dist/types/manager.d.ts +0 -1
  102. package/manager.js +0 -1
  103. package/register.js +0 -6
package/README.md CHANGED
@@ -37,7 +37,7 @@ Click on the `Docs` tab to see it:
37
37
  <img src="https://raw.githubusercontent.com/storybookjs/storybook/main/addons/docs/docs/media/docs-tab.png" width="100%" />
38
38
  </center>
39
39
 
40
- For more information on how it works, see the [`DocsPage` reference](https://github.com/storybookjs/storybook/tree/next/addons/docs/docs/docspage.md).
40
+ 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
41
 
42
42
  ## MDX
43
43
 
@@ -73,7 +73,7 @@ And here's how that's rendered in Storybook:
73
73
  <img src="https://raw.githubusercontent.com/storybookjs/storybook/main/addons/docs/docs/media/mdx-simple.png" width="100%" />
74
74
  </center>
75
75
 
76
- For more information on `MDX`, see the [`MDX` reference](https://github.com/storybookjs/storybook/tree/next/addons/docs/docs/mdx.md).
76
+ For more information on `MDX`, see the [`MDX` reference](https://github.com/storybookjs/storybook/blob/next/code/addons/docs/docs/mdx.md).
77
77
 
78
78
  ## Framework support
79
79
 
@@ -81,10 +81,9 @@ Storybook Docs supports all view layers that Storybook supports except for React
81
81
 
82
82
  [Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
83
83
 
84
-
85
84
  **Note:** `#` = WIP support
86
85
 
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)
86
+ 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
87
 
89
88
  ## Installation
90
89
 
@@ -109,7 +108,7 @@ module.exports = {
109
108
  };
110
109
  ```
111
110
 
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
111
+ 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
112
  configure Jest to transform MDX stories into something Storyshots can understand:
114
113
 
115
114
  Add the following to your Jest configuration:
@@ -125,12 +124,12 @@ Add the following to your Jest configuration:
125
124
 
126
125
  ### Be sure to check framework specific installation needs
127
126
 
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)
127
+ - [React](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/react) (covered here)
128
+ - [Vue](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/vue)
129
+ - [Angular](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/angular)
130
+ - [Ember](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/ember)
131
+ - [Web Components](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/web-components)
132
+ - [Common setup (all other frameworks)](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/common)
134
133
 
135
134
  ## Preset options
136
135
 
@@ -230,12 +229,12 @@ addParameters({
230
229
 
231
230
  ## TypeScript configuration
232
231
 
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).
232
+ 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
233
 
235
234
  ## More resources
236
235
 
237
236
  Want to learn more? Here are some more articles on Storybook Docs:
238
237
 
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)
238
+ - 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
239
  - 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
240
  - Example: [Storybook Design System](https://github.com/storybookjs/design-system)
package/blocks.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import deprecate from 'util-deprecate';
2
- import dedent from 'ts-dedent';
2
+ import { dedent } from 'ts-dedent';
3
3
 
4
4
  const warnBlocksImport = deprecate(
5
5
  () => {},
@@ -0,0 +1,52 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.defaultComponents = exports.DocsRenderer = void 0;
7
+
8
+ var _react = _interopRequireDefault(require("react"));
9
+
10
+ var _reactDom = _interopRequireDefault(require("react-dom"));
11
+
12
+ var _components = require("@storybook/components");
13
+
14
+ var _blocks = require("@storybook/blocks");
15
+
16
+ var _react2 = require("@mdx-js/react");
17
+
18
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
+
20
+ // TS doesn't like that we export a component with types that it doesn't know about (TS4203)
21
+ const defaultComponents = Object.assign({}, _components.components, {
22
+ code: _blocks.CodeOrSourceMdx,
23
+ a: _blocks.AnchorMdx
24
+ }, _blocks.HeadersMdx);
25
+ exports.defaultComponents = defaultComponents;
26
+
27
+ class DocsRenderer {
28
+ constructor() {
29
+ this.render = void 0;
30
+ this.unmount = void 0;
31
+
32
+ this.render = (context, docsParameter, element, callback) => {
33
+ // Use a random key to force the container to re-render each time we call `renderDocs`
34
+ // TODO: do we still need this? It was needed for angular (legacy) inline rendering:
35
+ // https://github.com/storybookjs/storybook/pull/16149
36
+ _reactDom.default.render( /*#__PURE__*/_react.default.createElement(_react2.MDXProvider, {
37
+ components: defaultComponents
38
+ }, /*#__PURE__*/_react.default.createElement(_blocks.Docs, {
39
+ key: Math.random(),
40
+ context: context,
41
+ docsParameter: docsParameter
42
+ })), element, callback);
43
+ };
44
+
45
+ this.unmount = element => {
46
+ _reactDom.default.unmountComponentAtNode(element);
47
+ };
48
+ }
49
+
50
+ }
51
+
52
+ exports.DocsRenderer = DocsRenderer;
@@ -3,364 +3,16 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- var _exportNames = {
7
- ColorPalette: true,
8
- ColorItem: true,
9
- IconGallery: true,
10
- IconItem: true,
11
- Typeset: true
12
- };
13
- Object.defineProperty(exports, "ColorItem", {
14
- enumerable: true,
15
- get: function () {
16
- return _components.ColorItem;
17
- }
18
- });
19
- Object.defineProperty(exports, "ColorPalette", {
20
- enumerable: true,
21
- get: function () {
22
- return _components.ColorPalette;
23
- }
24
- });
25
- Object.defineProperty(exports, "IconGallery", {
26
- enumerable: true,
27
- get: function () {
28
- return _components.IconGallery;
29
- }
30
- });
31
- Object.defineProperty(exports, "IconItem", {
32
- enumerable: true,
33
- get: function () {
34
- return _components.IconItem;
35
- }
36
- });
37
- Object.defineProperty(exports, "Typeset", {
38
- enumerable: true,
39
- get: function () {
40
- return _components.Typeset;
41
- }
42
- });
43
-
44
- var _components = require("@storybook/components");
45
-
46
- var _Anchor = require("./Anchor");
47
-
48
- Object.keys(_Anchor).forEach(function (key) {
49
- if (key === "default" || key === "__esModule") return;
50
- if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
51
- if (key in exports && exports[key] === _Anchor[key]) return;
52
- Object.defineProperty(exports, key, {
53
- enumerable: true,
54
- get: function () {
55
- return _Anchor[key];
56
- }
57
- });
58
- });
59
-
60
- var _ArgsTable = require("./ArgsTable");
61
-
62
- Object.keys(_ArgsTable).forEach(function (key) {
63
- if (key === "default" || key === "__esModule") return;
64
- if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
65
- if (key in exports && exports[key] === _ArgsTable[key]) return;
66
- Object.defineProperty(exports, key, {
67
- enumerable: true,
68
- get: function () {
69
- return _ArgsTable[key];
70
- }
71
- });
72
- });
73
-
74
- var _Canvas = require("./Canvas");
75
-
76
- Object.keys(_Canvas).forEach(function (key) {
77
- if (key === "default" || key === "__esModule") return;
78
- if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
79
- if (key in exports && exports[key] === _Canvas[key]) return;
80
- Object.defineProperty(exports, key, {
81
- enumerable: true,
82
- get: function () {
83
- return _Canvas[key];
84
- }
85
- });
86
- });
87
-
88
- var _Description = require("./Description");
89
-
90
- Object.keys(_Description).forEach(function (key) {
91
- if (key === "default" || key === "__esModule") return;
92
- if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
93
- if (key in exports && exports[key] === _Description[key]) return;
94
- Object.defineProperty(exports, key, {
95
- enumerable: true,
96
- get: function () {
97
- return _Description[key];
98
- }
99
- });
100
- });
101
-
102
- var _DocsContext = require("./DocsContext");
103
-
104
- Object.keys(_DocsContext).forEach(function (key) {
105
- if (key === "default" || key === "__esModule") return;
106
- if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
107
- if (key in exports && exports[key] === _DocsContext[key]) return;
108
- Object.defineProperty(exports, key, {
109
- enumerable: true,
110
- get: function () {
111
- return _DocsContext[key];
112
- }
113
- });
114
- });
115
-
116
- var _DocsPage = require("./DocsPage");
117
-
118
- Object.keys(_DocsPage).forEach(function (key) {
119
- if (key === "default" || key === "__esModule") return;
120
- if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
121
- if (key in exports && exports[key] === _DocsPage[key]) return;
122
- Object.defineProperty(exports, key, {
123
- enumerable: true,
124
- get: function () {
125
- return _DocsPage[key];
126
- }
127
- });
128
- });
129
-
130
- var _DocsContainer = require("./DocsContainer");
131
-
132
- Object.keys(_DocsContainer).forEach(function (key) {
133
- if (key === "default" || key === "__esModule") return;
134
- if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
135
- if (key in exports && exports[key] === _DocsContainer[key]) return;
136
- Object.defineProperty(exports, key, {
137
- enumerable: true,
138
- get: function () {
139
- return _DocsContainer[key];
140
- }
141
- });
142
- });
143
-
144
- var _DocsStory = require("./DocsStory");
145
-
146
- Object.keys(_DocsStory).forEach(function (key) {
147
- if (key === "default" || key === "__esModule") return;
148
- if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
149
- if (key in exports && exports[key] === _DocsStory[key]) return;
150
- Object.defineProperty(exports, key, {
151
- enumerable: true,
152
- get: function () {
153
- return _DocsStory[key];
154
- }
155
- });
156
- });
157
-
158
- var _Heading = require("./Heading");
159
-
160
- Object.keys(_Heading).forEach(function (key) {
161
- if (key === "default" || key === "__esModule") return;
162
- if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
163
- if (key in exports && exports[key] === _Heading[key]) return;
164
- Object.defineProperty(exports, key, {
165
- enumerable: true,
166
- get: function () {
167
- return _Heading[key];
168
- }
169
- });
170
- });
171
-
172
- var _Meta = require("./Meta");
173
-
174
- Object.keys(_Meta).forEach(function (key) {
175
- if (key === "default" || key === "__esModule") return;
176
- if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
177
- if (key in exports && exports[key] === _Meta[key]) return;
178
- Object.defineProperty(exports, key, {
179
- enumerable: true,
180
- get: function () {
181
- return _Meta[key];
182
- }
183
- });
184
- });
185
-
186
- var _Preview = require("./Preview");
187
-
188
- Object.keys(_Preview).forEach(function (key) {
189
- if (key === "default" || key === "__esModule") return;
190
- if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
191
- if (key in exports && exports[key] === _Preview[key]) return;
192
- Object.defineProperty(exports, key, {
193
- enumerable: true,
194
- get: function () {
195
- return _Preview[key];
196
- }
197
- });
198
- });
199
-
200
- var _Primary = require("./Primary");
201
-
202
- Object.keys(_Primary).forEach(function (key) {
203
- if (key === "default" || key === "__esModule") return;
204
- if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
205
- if (key in exports && exports[key] === _Primary[key]) return;
206
- Object.defineProperty(exports, key, {
207
- enumerable: true,
208
- get: function () {
209
- return _Primary[key];
210
- }
211
- });
212
- });
213
-
214
- var _Props = require("./Props");
215
-
216
- Object.keys(_Props).forEach(function (key) {
217
- if (key === "default" || key === "__esModule") return;
218
- if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
219
- if (key in exports && exports[key] === _Props[key]) return;
220
- Object.defineProperty(exports, key, {
221
- enumerable: true,
222
- get: function () {
223
- return _Props[key];
224
- }
225
- });
226
- });
227
-
228
- var _Source = require("./Source");
229
-
230
- Object.keys(_Source).forEach(function (key) {
231
- if (key === "default" || key === "__esModule") return;
232
- if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
233
- if (key in exports && exports[key] === _Source[key]) return;
234
- Object.defineProperty(exports, key, {
235
- enumerable: true,
236
- get: function () {
237
- return _Source[key];
238
- }
239
- });
240
- });
241
-
242
- var _SourceContainer = require("./SourceContainer");
243
-
244
- Object.keys(_SourceContainer).forEach(function (key) {
245
- if (key === "default" || key === "__esModule") return;
246
- if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
247
- if (key in exports && exports[key] === _SourceContainer[key]) return;
248
- Object.defineProperty(exports, key, {
249
- enumerable: true,
250
- get: function () {
251
- return _SourceContainer[key];
252
- }
253
- });
254
- });
255
-
256
- var _Stories = require("./Stories");
257
-
258
- Object.keys(_Stories).forEach(function (key) {
259
- if (key === "default" || key === "__esModule") return;
260
- if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
261
- if (key in exports && exports[key] === _Stories[key]) return;
262
- Object.defineProperty(exports, key, {
263
- enumerable: true,
264
- get: function () {
265
- return _Stories[key];
266
- }
267
- });
268
- });
269
-
270
- var _Story = require("./Story");
271
-
272
- Object.keys(_Story).forEach(function (key) {
273
- if (key === "default" || key === "__esModule") return;
274
- if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
275
- if (key in exports && exports[key] === _Story[key]) return;
276
- Object.defineProperty(exports, key, {
277
- enumerable: true,
278
- get: function () {
279
- return _Story[key];
280
- }
281
- });
282
- });
283
-
284
- var _Subheading = require("./Subheading");
285
-
286
- Object.keys(_Subheading).forEach(function (key) {
287
- if (key === "default" || key === "__esModule") return;
288
- if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
289
- if (key in exports && exports[key] === _Subheading[key]) return;
290
- Object.defineProperty(exports, key, {
291
- enumerable: true,
292
- get: function () {
293
- return _Subheading[key];
294
- }
295
- });
296
- });
297
-
298
- var _Subtitle = require("./Subtitle");
299
-
300
- Object.keys(_Subtitle).forEach(function (key) {
301
- if (key === "default" || key === "__esModule") return;
302
- if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
303
- if (key in exports && exports[key] === _Subtitle[key]) return;
304
- Object.defineProperty(exports, key, {
305
- enumerable: true,
306
- get: function () {
307
- return _Subtitle[key];
308
- }
309
- });
310
- });
311
-
312
- var _Title = require("./Title");
313
-
314
- Object.keys(_Title).forEach(function (key) {
315
- if (key === "default" || key === "__esModule") return;
316
- if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
317
- if (key in exports && exports[key] === _Title[key]) return;
318
- Object.defineProperty(exports, key, {
319
- enumerable: true,
320
- get: function () {
321
- return _Title[key];
322
- }
323
- });
324
- });
325
-
326
- var _Wrapper = require("./Wrapper");
327
-
328
- Object.keys(_Wrapper).forEach(function (key) {
329
- if (key === "default" || key === "__esModule") return;
330
- if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
331
- if (key in exports && exports[key] === _Wrapper[key]) return;
332
- Object.defineProperty(exports, key, {
333
- enumerable: true,
334
- get: function () {
335
- return _Wrapper[key];
336
- }
337
- });
338
- });
339
-
340
- var _types = require("./types");
341
-
342
- Object.keys(_types).forEach(function (key) {
343
- if (key === "default" || key === "__esModule") return;
344
- if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
345
- if (key in exports && exports[key] === _types[key]) return;
346
- Object.defineProperty(exports, key, {
347
- enumerable: true,
348
- get: function () {
349
- return _types[key];
350
- }
351
- });
352
- });
353
6
 
354
- var _mdx = require("./mdx");
7
+ var _blocks = require("@storybook/blocks");
355
8
 
356
- Object.keys(_mdx).forEach(function (key) {
9
+ Object.keys(_blocks).forEach(function (key) {
357
10
  if (key === "default" || key === "__esModule") return;
358
- if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
359
- if (key in exports && exports[key] === _mdx[key]) return;
11
+ if (key in exports && exports[key] === _blocks[key]) return;
360
12
  Object.defineProperty(exports, key, {
361
13
  enumerable: true,
362
14
  get: function () {
363
- return _mdx[key];
15
+ return _blocks[key];
364
16
  }
365
17
  });
366
18
  });
package/dist/cjs/index.js CHANGED
@@ -3,11 +3,21 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
+ var _exportNames = {
7
+ DocsRenderer: true
8
+ };
9
+ Object.defineProperty(exports, "DocsRenderer", {
10
+ enumerable: true,
11
+ get: function () {
12
+ return _DocsRenderer.DocsRenderer;
13
+ }
14
+ });
6
15
 
7
16
  var _blocks = require("./blocks");
8
17
 
9
18
  Object.keys(_blocks).forEach(function (key) {
10
19
  if (key === "default" || key === "__esModule") return;
20
+ if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
11
21
  if (key in exports && exports[key] === _blocks[key]) return;
12
22
  Object.defineProperty(exports, key, {
13
23
  enumerable: true,
@@ -15,4 +25,6 @@ Object.keys(_blocks).forEach(function (key) {
15
25
  return _blocks[key];
16
26
  }
17
27
  });
18
- });
28
+ });
29
+
30
+ var _DocsRenderer = require("./DocsRenderer");
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.storyIndexers = void 0;
6
+ exports.storyIndexers = exports.docs = void 0;
7
7
  exports.webpack = webpack;
8
8
 
9
9
  var _fsExtra = _interopRequireDefault(require("fs-extra"));
@@ -64,6 +64,7 @@ async function webpack(webpackConfig = {}, options) {
64
64
  transcludeMarkdown = false
65
65
  } = options;
66
66
  const mdxLoaderOptions = {
67
+ // whether to skip storybook files, useful for docs only mdx or md files
67
68
  skipCsf: true,
68
69
  remarkPlugins: [_remarkSlug.default, _remarkExternalLinks.default]
69
70
  };
@@ -116,7 +117,10 @@ async function webpack(webpackConfig = {}, options) {
116
117
  configureJSX
117
118
  })
118
119
  }, {
119
- loader: mdxLoader
120
+ loader: mdxLoader,
121
+ options: Object.assign({}, mdxLoaderOptions, {
122
+ skipCsf: false
123
+ })
120
124
  }]
121
125
  }, {
122
126
  test: /\.mdx$/,
@@ -155,8 +159,19 @@ const storyIndexers = async indexers => {
155
159
 
156
160
  return [{
157
161
  test: /(stories|story)\.mdx$/,
158
- indexer: mdxIndexer
162
+ indexer: mdxIndexer,
163
+ addDocsTemplate: true
159
164
  }, ...(indexers || [])];
160
165
  };
161
166
 
162
- exports.storyIndexers = storyIndexers;
167
+ exports.storyIndexers = storyIndexers;
168
+
169
+ const docs = docsOptions => {
170
+ return Object.assign({}, docsOptions, {
171
+ enabled: true,
172
+ defaultName: 'Docs',
173
+ docsPage: true
174
+ });
175
+ };
176
+
177
+ exports.docs = docs;
@@ -11,8 +11,12 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
11
11
 
12
12
  const parameters = {
13
13
  docs: {
14
- getContainer: async () => (await Promise.resolve().then(() => _interopRequireWildcard(require('./blocks')))).DocsContainer,
15
- getPage: async () => (await Promise.resolve().then(() => _interopRequireWildcard(require('./blocks')))).DocsPage
14
+ renderer: async () => {
15
+ const {
16
+ DocsRenderer
17
+ } = await Promise.resolve().then(() => _interopRequireWildcard(require('./DocsRenderer')));
18
+ return new DocsRenderer();
19
+ }
16
20
  }
17
21
  };
18
22
  exports.parameters = parameters;
@@ -0,0 +1,34 @@
1
+ import React from 'react';
2
+ import ReactDOM from 'react-dom';
3
+ import { components as htmlComponents } from '@storybook/components';
4
+ import { Docs, CodeOrSourceMdx, AnchorMdx, HeadersMdx } from '@storybook/blocks';
5
+ import { MDXProvider } from '@mdx-js/react'; // TS doesn't like that we export a component with types that it doesn't know about (TS4203)
6
+
7
+ export const defaultComponents = Object.assign({}, htmlComponents, {
8
+ code: CodeOrSourceMdx,
9
+ a: AnchorMdx
10
+ }, HeadersMdx);
11
+ export class DocsRenderer {
12
+ constructor() {
13
+ this.render = void 0;
14
+ this.unmount = void 0;
15
+
16
+ this.render = (context, docsParameter, element, callback) => {
17
+ // Use a random key to force the container to re-render each time we call `renderDocs`
18
+ // TODO: do we still need this? It was needed for angular (legacy) inline rendering:
19
+ // https://github.com/storybookjs/storybook/pull/16149
20
+ ReactDOM.render( /*#__PURE__*/React.createElement(MDXProvider, {
21
+ components: defaultComponents
22
+ }, /*#__PURE__*/React.createElement(Docs, {
23
+ key: Math.random(),
24
+ context: context,
25
+ docsParameter: docsParameter
26
+ })), element, callback);
27
+ };
28
+
29
+ this.unmount = element => {
30
+ ReactDOM.unmountComponentAtNode(element);
31
+ };
32
+ }
33
+
34
+ }
@@ -1,24 +1 @@
1
- export { ColorPalette, ColorItem, IconGallery, IconItem, Typeset } from '@storybook/components';
2
- export * from './Anchor';
3
- export * from './ArgsTable';
4
- export * from './Canvas';
5
- export * from './Description';
6
- export * from './DocsContext';
7
- export * from './DocsPage';
8
- export * from './DocsContainer';
9
- export * from './DocsStory';
10
- export * from './Heading';
11
- export * from './Meta';
12
- export * from './Preview';
13
- export * from './Primary';
14
- export * from './Props';
15
- export * from './Source';
16
- export * from './SourceContainer';
17
- export * from './Stories';
18
- export * from './Story';
19
- export * from './Subheading';
20
- export * from './Subtitle';
21
- export * from './Title';
22
- export * from './Wrapper';
23
- export * from './types';
24
- export * from './mdx';
1
+ export * from '@storybook/blocks';
package/dist/esm/index.js CHANGED
@@ -1 +1,2 @@
1
- export * from './blocks';
1
+ export * from './blocks';
2
+ export { DocsRenderer } from './DocsRenderer';