@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.
- package/README.md +14 -77
- package/angular/index.js +1 -1
- package/dist/DocsRenderer-MHI45CTG.mjs +1 -0
- package/dist/chunk-HKSD7XQF.mjs +1 -0
- package/dist/chunk-WMY67HY3.mjs +1 -0
- package/dist/index.d.ts +11 -0
- package/dist/index.js +1 -0
- package/dist/index.mjs +1 -0
- package/dist/preset.d.ts +5 -0
- package/dist/preset.js +7 -0
- package/dist/preset.mjs +7 -0
- package/dist/preview.d.ts +3 -0
- package/dist/preview.js +1 -0
- package/dist/preview.mjs +1 -0
- package/jest-transform-mdx.js +4 -3
- package/jest.config.js +7 -0
- package/package.json +65 -38
- package/preset.js +1 -1
- package/preview.js +1 -1
- package/web-components/README.md +1 -0
- package/LICENSE +0 -21
- package/blocks.d.ts +0 -2
- package/blocks.js +0 -14
- package/dist/cjs/blocks/Anchor.js +0 -23
- package/dist/cjs/blocks/ArgsTable.js +0 -329
- package/dist/cjs/blocks/Canvas.js +0 -109
- package/dist/cjs/blocks/Description.js +0 -126
- package/dist/cjs/blocks/DocsContainer.js +0 -127
- package/dist/cjs/blocks/DocsContext.js +0 -25
- package/dist/cjs/blocks/DocsPage.js +0 -30
- package/dist/cjs/blocks/DocsStory.js +0 -68
- package/dist/cjs/blocks/Heading.js +0 -31
- package/dist/cjs/blocks/Meta.js +0 -50
- package/dist/cjs/blocks/Preview.js +0 -23
- package/dist/cjs/blocks/Primary.js +0 -39
- package/dist/cjs/blocks/Props.js +0 -29
- package/dist/cjs/blocks/Source.js +0 -179
- package/dist/cjs/blocks/SourceContainer.js +0 -67
- package/dist/cjs/blocks/Stories.js +0 -51
- package/dist/cjs/blocks/Story.js +0 -143
- package/dist/cjs/blocks/Subheading.js +0 -31
- package/dist/cjs/blocks/Subtitle.js +0 -39
- package/dist/cjs/blocks/Title.js +0 -44
- package/dist/cjs/blocks/Wrapper.js +0 -20
- package/dist/cjs/blocks/enhanceSource.js +0 -92
- package/dist/cjs/blocks/index.js +0 -366
- package/dist/cjs/blocks/mdx.js +0 -234
- package/dist/cjs/blocks/types.js +0 -10
- package/dist/cjs/blocks/useStory.js +0 -37
- package/dist/cjs/blocks/utils.js +0 -40
- package/dist/cjs/index.js +0 -18
- package/dist/cjs/manager.js +0 -20
- package/dist/cjs/preset.js +0 -162
- package/dist/cjs/preview.js +0 -18
- package/dist/cjs/shared.js +0 -22
- package/dist/esm/blocks/Anchor.js +0 -8
- package/dist/esm/blocks/ArgsTable.js +0 -292
- package/dist/esm/blocks/Canvas.js +0 -83
- package/dist/esm/blocks/Description.js +0 -107
- package/dist/esm/blocks/DocsContainer.js +0 -98
- package/dist/esm/blocks/DocsContext.js +0 -16
- package/dist/esm/blocks/DocsPage.js +0 -11
- package/dist/esm/blocks/DocsStory.js +0 -46
- package/dist/esm/blocks/Heading.js +0 -17
- package/dist/esm/blocks/Meta.js +0 -31
- package/dist/esm/blocks/Preview.js +0 -9
- package/dist/esm/blocks/Primary.js +0 -23
- package/dist/esm/blocks/Props.js +0 -14
- package/dist/esm/blocks/Source.js +0 -144
- package/dist/esm/blocks/SourceContainer.js +0 -44
- package/dist/esm/blocks/Stories.js +0 -30
- package/dist/esm/blocks/Story.js +0 -114
- package/dist/esm/blocks/Subheading.js +0 -17
- package/dist/esm/blocks/Subtitle.js +0 -23
- package/dist/esm/blocks/Title.js +0 -24
- package/dist/esm/blocks/Wrapper.js +0 -8
- package/dist/esm/blocks/enhanceSource.js +0 -87
- package/dist/esm/blocks/index.js +0 -24
- package/dist/esm/blocks/mdx.js +0 -203
- package/dist/esm/blocks/types.js +0 -2
- package/dist/esm/blocks/useStory.js +0 -27
- package/dist/esm/blocks/utils.js +0 -29
- package/dist/esm/index.js +0 -1
- package/dist/esm/manager.js +0 -16
- package/dist/esm/preset.js +0 -132
- package/dist/esm/preview.js +0 -6
- package/dist/esm/shared.js +0 -11
- package/dist/types/blocks/Anchor.d.ts +0 -6
- package/dist/types/blocks/ArgsTable.d.ts +0 -33
- package/dist/types/blocks/Canvas.d.ts +0 -9
- package/dist/types/blocks/Description.d.ts +0 -20
- package/dist/types/blocks/DocsContainer.d.ts +0 -7
- package/dist/types/blocks/DocsContext.d.ts +0 -5
- package/dist/types/blocks/DocsPage.d.ts +0 -2
- package/dist/types/blocks/DocsStory.d.ts +0 -3
- package/dist/types/blocks/Heading.d.ts +0 -6
- package/dist/types/blocks/Meta.d.ts +0 -9
- package/dist/types/blocks/Preview.d.ts +0 -3
- package/dist/types/blocks/Primary.d.ts +0 -6
- package/dist/types/blocks/Props.d.ts +0 -3
- package/dist/types/blocks/Source.d.ts +0 -38
- package/dist/types/blocks/SourceContainer.d.ts +0 -14
- package/dist/types/blocks/Stories.d.ts +0 -7
- package/dist/types/blocks/Story.d.ts +0 -28
- package/dist/types/blocks/Subheading.d.ts +0 -3
- package/dist/types/blocks/Subtitle.d.ts +0 -6
- package/dist/types/blocks/Title.d.ts +0 -8
- package/dist/types/blocks/Wrapper.d.ts +0 -2
- package/dist/types/blocks/enhanceSource.d.ts +0 -3
- package/dist/types/blocks/index.d.ts +0 -24
- package/dist/types/blocks/mdx.d.ts +0 -20
- package/dist/types/blocks/types.d.ts +0 -13
- package/dist/types/blocks/useStory.d.ts +0 -5
- package/dist/types/blocks/utils.d.ts +0 -3
- package/dist/types/index.d.ts +0 -1
- package/dist/types/manager.d.ts +0 -1
- package/dist/types/preset.d.ts +0 -12
- package/dist/types/preview.d.ts +0 -6
- package/dist/types/shared.d.ts +0 -24
- package/manager.js +0 -1
- package/mdx-compiler-plugin.js +0 -1
- package/register.js +0 -6
|
@@ -1,329 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.getComponent = exports.extractComponentArgTypes = exports.StoryTable = exports.ComponentsTable = exports.ArgsTable = void 0;
|
|
7
|
-
|
|
8
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
-
|
|
10
|
-
var _mapValues = _interopRequireDefault(require("lodash/mapValues"));
|
|
11
|
-
|
|
12
|
-
var _components = require("@storybook/components");
|
|
13
|
-
|
|
14
|
-
var _addons = require("@storybook/addons");
|
|
15
|
-
|
|
16
|
-
var _store = require("@storybook/store");
|
|
17
|
-
|
|
18
|
-
var _coreEvents = _interopRequireDefault(require("@storybook/core-events"));
|
|
19
|
-
|
|
20
|
-
var _DocsContext = require("./DocsContext");
|
|
21
|
-
|
|
22
|
-
var _types = require("./types");
|
|
23
|
-
|
|
24
|
-
var _utils = require("./utils");
|
|
25
|
-
|
|
26
|
-
var _Story = require("./Story");
|
|
27
|
-
|
|
28
|
-
var _useStory = require("./useStory");
|
|
29
|
-
|
|
30
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
31
|
-
|
|
32
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
33
|
-
|
|
34
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
35
|
-
|
|
36
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
37
|
-
|
|
38
|
-
const getContext = (storyId, context) => {
|
|
39
|
-
const story = context.storyById(storyId);
|
|
40
|
-
|
|
41
|
-
if (!story) {
|
|
42
|
-
throw new Error(`Unknown story: ${storyId}`);
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
return context.getStoryContext(story);
|
|
46
|
-
};
|
|
47
|
-
|
|
48
|
-
const useArgs = (storyId, context) => {
|
|
49
|
-
const channel = _addons.addons.getChannel();
|
|
50
|
-
|
|
51
|
-
const storyContext = getContext(storyId, context);
|
|
52
|
-
const [args, setArgs] = (0, _react.useState)(storyContext.args);
|
|
53
|
-
(0, _react.useEffect)(() => {
|
|
54
|
-
const cb = changed => {
|
|
55
|
-
if (changed.storyId === storyId) {
|
|
56
|
-
setArgs(changed.args);
|
|
57
|
-
}
|
|
58
|
-
};
|
|
59
|
-
|
|
60
|
-
channel.on(_coreEvents.default.STORY_ARGS_UPDATED, cb);
|
|
61
|
-
return () => channel.off(_coreEvents.default.STORY_ARGS_UPDATED, cb);
|
|
62
|
-
}, [storyId]);
|
|
63
|
-
const updateArgs = (0, _react.useCallback)(updatedArgs => channel.emit(_coreEvents.default.UPDATE_STORY_ARGS, {
|
|
64
|
-
storyId,
|
|
65
|
-
updatedArgs
|
|
66
|
-
}), [storyId]);
|
|
67
|
-
const resetArgs = (0, _react.useCallback)(argNames => channel.emit(_coreEvents.default.RESET_STORY_ARGS, {
|
|
68
|
-
storyId,
|
|
69
|
-
argNames
|
|
70
|
-
}), [storyId]);
|
|
71
|
-
return [args, updateArgs, resetArgs];
|
|
72
|
-
};
|
|
73
|
-
|
|
74
|
-
const useGlobals = (storyId, context) => {
|
|
75
|
-
const channel = _addons.addons.getChannel();
|
|
76
|
-
|
|
77
|
-
const storyContext = getContext(storyId, context);
|
|
78
|
-
const [globals, setGlobals] = (0, _react.useState)(storyContext.globals);
|
|
79
|
-
(0, _react.useEffect)(() => {
|
|
80
|
-
const cb = changed => {
|
|
81
|
-
setGlobals(changed.globals);
|
|
82
|
-
};
|
|
83
|
-
|
|
84
|
-
channel.on(_coreEvents.default.GLOBALS_UPDATED, cb);
|
|
85
|
-
return () => channel.off(_coreEvents.default.GLOBALS_UPDATED, cb);
|
|
86
|
-
}, []);
|
|
87
|
-
return [globals];
|
|
88
|
-
};
|
|
89
|
-
|
|
90
|
-
const extractComponentArgTypes = (component, {
|
|
91
|
-
id,
|
|
92
|
-
storyById
|
|
93
|
-
}, include, exclude) => {
|
|
94
|
-
const {
|
|
95
|
-
parameters
|
|
96
|
-
} = storyById(id);
|
|
97
|
-
const {
|
|
98
|
-
extractArgTypes
|
|
99
|
-
} = parameters.docs || {};
|
|
100
|
-
|
|
101
|
-
if (!extractArgTypes) {
|
|
102
|
-
throw new Error(_components.ArgsTableError.ARGS_UNSUPPORTED);
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
let argTypes = extractArgTypes(component);
|
|
106
|
-
argTypes = (0, _store.filterArgTypes)(argTypes, include, exclude);
|
|
107
|
-
return argTypes;
|
|
108
|
-
};
|
|
109
|
-
|
|
110
|
-
exports.extractComponentArgTypes = extractComponentArgTypes;
|
|
111
|
-
|
|
112
|
-
const isShortcut = value => {
|
|
113
|
-
return value && [_types.CURRENT_SELECTION, _types.PRIMARY_STORY].includes(value);
|
|
114
|
-
};
|
|
115
|
-
|
|
116
|
-
const getComponent = (props = {}, {
|
|
117
|
-
id,
|
|
118
|
-
storyById
|
|
119
|
-
}) => {
|
|
120
|
-
const {
|
|
121
|
-
of
|
|
122
|
-
} = props;
|
|
123
|
-
const {
|
|
124
|
-
story
|
|
125
|
-
} = props;
|
|
126
|
-
const {
|
|
127
|
-
component
|
|
128
|
-
} = storyById(id);
|
|
129
|
-
|
|
130
|
-
if (isShortcut(of) || isShortcut(story)) {
|
|
131
|
-
return component || null;
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
if (!of) {
|
|
135
|
-
throw new Error(_components.ArgsTableError.NO_COMPONENT);
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
return of;
|
|
139
|
-
};
|
|
140
|
-
|
|
141
|
-
exports.getComponent = getComponent;
|
|
142
|
-
|
|
143
|
-
const addComponentTabs = (tabs, components, context, include, exclude, sort) => Object.assign({}, tabs, (0, _mapValues.default)(components, comp => ({
|
|
144
|
-
rows: extractComponentArgTypes(comp, context, include, exclude),
|
|
145
|
-
sort
|
|
146
|
-
})));
|
|
147
|
-
|
|
148
|
-
const StoryTable = props => {
|
|
149
|
-
const context = (0, _react.useContext)(_DocsContext.DocsContext);
|
|
150
|
-
const {
|
|
151
|
-
id: currentId,
|
|
152
|
-
componentStories
|
|
153
|
-
} = context;
|
|
154
|
-
const {
|
|
155
|
-
story: storyName,
|
|
156
|
-
component,
|
|
157
|
-
subcomponents,
|
|
158
|
-
showComponent,
|
|
159
|
-
include,
|
|
160
|
-
exclude,
|
|
161
|
-
sort
|
|
162
|
-
} = props;
|
|
163
|
-
|
|
164
|
-
try {
|
|
165
|
-
let storyId;
|
|
166
|
-
|
|
167
|
-
switch (storyName) {
|
|
168
|
-
case _types.CURRENT_SELECTION:
|
|
169
|
-
{
|
|
170
|
-
storyId = currentId;
|
|
171
|
-
break;
|
|
172
|
-
}
|
|
173
|
-
|
|
174
|
-
case _types.PRIMARY_STORY:
|
|
175
|
-
{
|
|
176
|
-
const primaryStory = componentStories()[0];
|
|
177
|
-
storyId = primaryStory.id;
|
|
178
|
-
break;
|
|
179
|
-
}
|
|
180
|
-
|
|
181
|
-
default:
|
|
182
|
-
{
|
|
183
|
-
storyId = (0, _Story.lookupStoryId)(storyName, context);
|
|
184
|
-
}
|
|
185
|
-
}
|
|
186
|
-
|
|
187
|
-
const story = (0, _useStory.useStory)(storyId, context); // eslint-disable-next-line prefer-const
|
|
188
|
-
|
|
189
|
-
let [args, updateArgs, resetArgs] = useArgs(storyId, context);
|
|
190
|
-
const [globals] = useGlobals(storyId, context);
|
|
191
|
-
if (!story) return /*#__PURE__*/_react.default.createElement(_components.ArgsTable, {
|
|
192
|
-
isLoading: true,
|
|
193
|
-
updateArgs: updateArgs,
|
|
194
|
-
resetArgs: resetArgs
|
|
195
|
-
});
|
|
196
|
-
const argTypes = (0, _store.filterArgTypes)(story.argTypes, include, exclude);
|
|
197
|
-
const mainLabel = (0, _utils.getComponentName)(component) || 'Story';
|
|
198
|
-
let tabs = {
|
|
199
|
-
[mainLabel]: {
|
|
200
|
-
rows: argTypes,
|
|
201
|
-
args,
|
|
202
|
-
globals,
|
|
203
|
-
updateArgs,
|
|
204
|
-
resetArgs
|
|
205
|
-
}
|
|
206
|
-
}; // Use the dynamically generated component tabs if there are no controls
|
|
207
|
-
|
|
208
|
-
const storyHasArgsWithControls = argTypes && Object.values(argTypes).find(v => !!(v !== null && v !== void 0 && v.control));
|
|
209
|
-
|
|
210
|
-
if (!storyHasArgsWithControls) {
|
|
211
|
-
updateArgs = null;
|
|
212
|
-
resetArgs = null;
|
|
213
|
-
tabs = {};
|
|
214
|
-
}
|
|
215
|
-
|
|
216
|
-
if (component && (!storyHasArgsWithControls || showComponent)) {
|
|
217
|
-
tabs = addComponentTabs(tabs, {
|
|
218
|
-
[mainLabel]: component
|
|
219
|
-
}, context, include, exclude);
|
|
220
|
-
}
|
|
221
|
-
|
|
222
|
-
if (subcomponents) {
|
|
223
|
-
if (Array.isArray(subcomponents)) {
|
|
224
|
-
throw new Error(`Unexpected subcomponents array. Expected an object whose keys are tab labels and whose values are components.`);
|
|
225
|
-
}
|
|
226
|
-
|
|
227
|
-
tabs = addComponentTabs(tabs, subcomponents, context, include, exclude);
|
|
228
|
-
}
|
|
229
|
-
|
|
230
|
-
return /*#__PURE__*/_react.default.createElement(_components.TabbedArgsTable, {
|
|
231
|
-
tabs: tabs,
|
|
232
|
-
sort: sort
|
|
233
|
-
});
|
|
234
|
-
} catch (err) {
|
|
235
|
-
return /*#__PURE__*/_react.default.createElement(_components.ArgsTable, {
|
|
236
|
-
error: err.message
|
|
237
|
-
});
|
|
238
|
-
}
|
|
239
|
-
};
|
|
240
|
-
|
|
241
|
-
exports.StoryTable = StoryTable;
|
|
242
|
-
|
|
243
|
-
const ComponentsTable = props => {
|
|
244
|
-
const context = (0, _react.useContext)(_DocsContext.DocsContext);
|
|
245
|
-
const {
|
|
246
|
-
components,
|
|
247
|
-
include,
|
|
248
|
-
exclude,
|
|
249
|
-
sort
|
|
250
|
-
} = props;
|
|
251
|
-
const tabs = addComponentTabs({}, components, context, include, exclude);
|
|
252
|
-
return /*#__PURE__*/_react.default.createElement(_components.TabbedArgsTable, {
|
|
253
|
-
tabs: tabs,
|
|
254
|
-
sort: sort
|
|
255
|
-
});
|
|
256
|
-
};
|
|
257
|
-
|
|
258
|
-
exports.ComponentsTable = ComponentsTable;
|
|
259
|
-
|
|
260
|
-
const ArgsTable = props => {
|
|
261
|
-
const context = (0, _react.useContext)(_DocsContext.DocsContext);
|
|
262
|
-
const {
|
|
263
|
-
id,
|
|
264
|
-
storyById
|
|
265
|
-
} = context;
|
|
266
|
-
const {
|
|
267
|
-
parameters: {
|
|
268
|
-
controls
|
|
269
|
-
},
|
|
270
|
-
subcomponents
|
|
271
|
-
} = storyById(id);
|
|
272
|
-
const {
|
|
273
|
-
include,
|
|
274
|
-
exclude,
|
|
275
|
-
components,
|
|
276
|
-
sort: sortProp
|
|
277
|
-
} = props;
|
|
278
|
-
const {
|
|
279
|
-
story: storyName
|
|
280
|
-
} = props;
|
|
281
|
-
const sort = sortProp || (controls === null || controls === void 0 ? void 0 : controls.sort);
|
|
282
|
-
const main = getComponent(props, context);
|
|
283
|
-
|
|
284
|
-
if (storyName) {
|
|
285
|
-
return /*#__PURE__*/_react.default.createElement(StoryTable, _extends({}, props, {
|
|
286
|
-
component: main,
|
|
287
|
-
subcomponents,
|
|
288
|
-
sort
|
|
289
|
-
}));
|
|
290
|
-
}
|
|
291
|
-
|
|
292
|
-
if (!components && !subcomponents) {
|
|
293
|
-
let mainProps;
|
|
294
|
-
|
|
295
|
-
try {
|
|
296
|
-
mainProps = {
|
|
297
|
-
rows: extractComponentArgTypes(main, context, include, exclude)
|
|
298
|
-
};
|
|
299
|
-
} catch (err) {
|
|
300
|
-
mainProps = {
|
|
301
|
-
error: err.message
|
|
302
|
-
};
|
|
303
|
-
}
|
|
304
|
-
|
|
305
|
-
return /*#__PURE__*/_react.default.createElement(_components.ArgsTable, _extends({}, mainProps, {
|
|
306
|
-
sort: sort
|
|
307
|
-
}));
|
|
308
|
-
}
|
|
309
|
-
|
|
310
|
-
if (components) {
|
|
311
|
-
return /*#__PURE__*/_react.default.createElement(ComponentsTable, _extends({}, props, {
|
|
312
|
-
components,
|
|
313
|
-
sort
|
|
314
|
-
}));
|
|
315
|
-
}
|
|
316
|
-
|
|
317
|
-
const mainLabel = (0, _utils.getComponentName)(main);
|
|
318
|
-
return /*#__PURE__*/_react.default.createElement(ComponentsTable, _extends({}, props, {
|
|
319
|
-
components: Object.assign({
|
|
320
|
-
[mainLabel]: main
|
|
321
|
-
}, subcomponents),
|
|
322
|
-
sort: sort
|
|
323
|
-
}));
|
|
324
|
-
};
|
|
325
|
-
|
|
326
|
-
exports.ArgsTable = ArgsTable;
|
|
327
|
-
ArgsTable.defaultProps = {
|
|
328
|
-
of: _types.CURRENT_SELECTION
|
|
329
|
-
};
|
|
@@ -1,109 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.Canvas = void 0;
|
|
7
|
-
Object.defineProperty(exports, "SourceState", {
|
|
8
|
-
enumerable: true,
|
|
9
|
-
get: function () {
|
|
10
|
-
return _Source.SourceState;
|
|
11
|
-
}
|
|
12
|
-
});
|
|
13
|
-
|
|
14
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
15
|
-
|
|
16
|
-
var _react2 = require("@mdx-js/react");
|
|
17
|
-
|
|
18
|
-
var _csf = require("@storybook/csf");
|
|
19
|
-
|
|
20
|
-
var _components = require("@storybook/components");
|
|
21
|
-
|
|
22
|
-
var _DocsContext = require("./DocsContext");
|
|
23
|
-
|
|
24
|
-
var _SourceContainer = require("./SourceContainer");
|
|
25
|
-
|
|
26
|
-
var _Source = require("./Source");
|
|
27
|
-
|
|
28
|
-
var _useStory = require("./useStory");
|
|
29
|
-
|
|
30
|
-
var _types = require("./types");
|
|
31
|
-
|
|
32
|
-
const _excluded = ["withSource", "mdxSource", "children"];
|
|
33
|
-
|
|
34
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
35
|
-
|
|
36
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
37
|
-
|
|
38
|
-
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
39
|
-
|
|
40
|
-
const getPreviewProps = (_ref, docsContext, sourceContext) => {
|
|
41
|
-
let {
|
|
42
|
-
withSource,
|
|
43
|
-
mdxSource,
|
|
44
|
-
children
|
|
45
|
-
} = _ref,
|
|
46
|
-
props = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
47
|
-
|
|
48
|
-
const {
|
|
49
|
-
mdxComponentAnnotations,
|
|
50
|
-
mdxStoryNameToKey
|
|
51
|
-
} = docsContext;
|
|
52
|
-
let sourceState = withSource;
|
|
53
|
-
let isLoading = false;
|
|
54
|
-
|
|
55
|
-
if (sourceState === _Source.SourceState.NONE) {
|
|
56
|
-
return {
|
|
57
|
-
isLoading,
|
|
58
|
-
previewProps: props
|
|
59
|
-
};
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
if (mdxSource) {
|
|
63
|
-
return {
|
|
64
|
-
isLoading,
|
|
65
|
-
previewProps: Object.assign({}, props, {
|
|
66
|
-
withSource: (0, _Source.getSourceProps)({
|
|
67
|
-
code: decodeURI(mdxSource)
|
|
68
|
-
}, docsContext, sourceContext)
|
|
69
|
-
})
|
|
70
|
-
};
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
const childArray = Array.isArray(children) ? children : [children];
|
|
74
|
-
const storyChildren = childArray.filter(c => c.props && (c.props.id || c.props.name));
|
|
75
|
-
const targetIds = storyChildren.map(s => s.props.id || (0, _csf.toId)(mdxComponentAnnotations.id || mdxComponentAnnotations.title, (0, _csf.storyNameFromExport)(mdxStoryNameToKey[s.props.name])));
|
|
76
|
-
const sourceProps = (0, _Source.getSourceProps)({
|
|
77
|
-
ids: targetIds
|
|
78
|
-
}, docsContext, sourceContext);
|
|
79
|
-
if (!sourceState) sourceState = sourceProps.state;
|
|
80
|
-
const storyIds = targetIds.map(targetId => targetId === _types.CURRENT_SELECTION ? docsContext.id : targetId);
|
|
81
|
-
const stories = (0, _useStory.useStories)(storyIds, docsContext);
|
|
82
|
-
isLoading = stories.some(s => !s);
|
|
83
|
-
return {
|
|
84
|
-
isLoading,
|
|
85
|
-
previewProps: Object.assign({}, props, {
|
|
86
|
-
// pass through columns etc.
|
|
87
|
-
withSource: sourceProps,
|
|
88
|
-
isExpanded: sourceState === _Source.SourceState.OPEN
|
|
89
|
-
})
|
|
90
|
-
};
|
|
91
|
-
};
|
|
92
|
-
|
|
93
|
-
const Canvas = props => {
|
|
94
|
-
const docsContext = (0, _react.useContext)(_DocsContext.DocsContext);
|
|
95
|
-
const sourceContext = (0, _react.useContext)(_SourceContainer.SourceContext);
|
|
96
|
-
const {
|
|
97
|
-
isLoading,
|
|
98
|
-
previewProps
|
|
99
|
-
} = getPreviewProps(props, docsContext, sourceContext);
|
|
100
|
-
const {
|
|
101
|
-
children
|
|
102
|
-
} = props;
|
|
103
|
-
if (isLoading) return /*#__PURE__*/_react.default.createElement(_components.PreviewSkeleton, null);
|
|
104
|
-
return /*#__PURE__*/_react.default.createElement(_react2.MDXProvider, {
|
|
105
|
-
components: _components.resetComponents
|
|
106
|
-
}, /*#__PURE__*/_react.default.createElement(_components.Preview, previewProps, children));
|
|
107
|
-
};
|
|
108
|
-
|
|
109
|
-
exports.Canvas = Canvas;
|
|
@@ -1,126 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.getDescriptionProps = exports.DescriptionType = exports.Description = void 0;
|
|
7
|
-
|
|
8
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
-
|
|
10
|
-
var _components = require("@storybook/components");
|
|
11
|
-
|
|
12
|
-
var _docsTools = require("@storybook/docs-tools");
|
|
13
|
-
|
|
14
|
-
var _DocsContext = require("./DocsContext");
|
|
15
|
-
|
|
16
|
-
var _types = require("./types");
|
|
17
|
-
|
|
18
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
19
|
-
|
|
20
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
21
|
-
|
|
22
|
-
let DescriptionType;
|
|
23
|
-
exports.DescriptionType = DescriptionType;
|
|
24
|
-
|
|
25
|
-
(function (DescriptionType) {
|
|
26
|
-
DescriptionType["INFO"] = "info";
|
|
27
|
-
DescriptionType["NOTES"] = "notes";
|
|
28
|
-
DescriptionType["DOCGEN"] = "docgen";
|
|
29
|
-
DescriptionType["LEGACY_5_2"] = "legacy-5.2";
|
|
30
|
-
DescriptionType["AUTO"] = "auto";
|
|
31
|
-
})(DescriptionType || (exports.DescriptionType = DescriptionType = {}));
|
|
32
|
-
|
|
33
|
-
const getNotes = notes => notes && (typeof notes === 'string' ? notes : (0, _docsTools.str)(notes.markdown) || (0, _docsTools.str)(notes.text));
|
|
34
|
-
|
|
35
|
-
const getInfo = info => info && (typeof info === 'string' ? info : (0, _docsTools.str)(info.text));
|
|
36
|
-
|
|
37
|
-
const noDescription = component => null;
|
|
38
|
-
|
|
39
|
-
const getDescriptionProps = ({
|
|
40
|
-
of,
|
|
41
|
-
type,
|
|
42
|
-
markdown,
|
|
43
|
-
children
|
|
44
|
-
}, {
|
|
45
|
-
id,
|
|
46
|
-
storyById
|
|
47
|
-
}) => {
|
|
48
|
-
const {
|
|
49
|
-
component,
|
|
50
|
-
parameters
|
|
51
|
-
} = storyById(id);
|
|
52
|
-
|
|
53
|
-
if (children || markdown) {
|
|
54
|
-
return {
|
|
55
|
-
markdown: children || markdown
|
|
56
|
-
};
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
const {
|
|
60
|
-
notes,
|
|
61
|
-
info,
|
|
62
|
-
docs
|
|
63
|
-
} = parameters;
|
|
64
|
-
const {
|
|
65
|
-
extractComponentDescription = noDescription,
|
|
66
|
-
description
|
|
67
|
-
} = docs || {};
|
|
68
|
-
const target = of === _types.CURRENT_SELECTION ? component : of; // override component description
|
|
69
|
-
|
|
70
|
-
const componentDescriptionParameter = description === null || description === void 0 ? void 0 : description.component;
|
|
71
|
-
|
|
72
|
-
if (componentDescriptionParameter) {
|
|
73
|
-
return {
|
|
74
|
-
markdown: componentDescriptionParameter
|
|
75
|
-
};
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
switch (type) {
|
|
79
|
-
case DescriptionType.INFO:
|
|
80
|
-
return {
|
|
81
|
-
markdown: getInfo(info)
|
|
82
|
-
};
|
|
83
|
-
|
|
84
|
-
case DescriptionType.NOTES:
|
|
85
|
-
return {
|
|
86
|
-
markdown: getNotes(notes)
|
|
87
|
-
};
|
|
88
|
-
// FIXME: remove in 6.0
|
|
89
|
-
|
|
90
|
-
case DescriptionType.LEGACY_5_2:
|
|
91
|
-
return {
|
|
92
|
-
markdown: `
|
|
93
|
-
${getNotes(notes) || getInfo(info) || ''}
|
|
94
|
-
|
|
95
|
-
${extractComponentDescription(target) || ''}
|
|
96
|
-
`.trim()
|
|
97
|
-
};
|
|
98
|
-
|
|
99
|
-
case DescriptionType.DOCGEN:
|
|
100
|
-
case DescriptionType.AUTO:
|
|
101
|
-
default:
|
|
102
|
-
return {
|
|
103
|
-
markdown: extractComponentDescription(target, Object.assign({
|
|
104
|
-
component
|
|
105
|
-
}, parameters))
|
|
106
|
-
};
|
|
107
|
-
}
|
|
108
|
-
};
|
|
109
|
-
|
|
110
|
-
exports.getDescriptionProps = getDescriptionProps;
|
|
111
|
-
|
|
112
|
-
const DescriptionContainer = props => {
|
|
113
|
-
const context = (0, _react.useContext)(_DocsContext.DocsContext);
|
|
114
|
-
const {
|
|
115
|
-
markdown
|
|
116
|
-
} = getDescriptionProps(props, context);
|
|
117
|
-
return markdown ? /*#__PURE__*/_react.default.createElement(_components.Description, {
|
|
118
|
-
markdown: markdown
|
|
119
|
-
}) : null;
|
|
120
|
-
}; // since we are in the docs blocks, assume default description if for primary component story
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
exports.Description = DescriptionContainer;
|
|
124
|
-
DescriptionContainer.defaultProps = {
|
|
125
|
-
of: '.'
|
|
126
|
-
};
|
|
@@ -1,127 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.DocsContainer = void 0;
|
|
7
|
-
|
|
8
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
-
|
|
10
|
-
var _global = _interopRequireDefault(require("global"));
|
|
11
|
-
|
|
12
|
-
var _utilDeprecate = _interopRequireDefault(require("util-deprecate"));
|
|
13
|
-
|
|
14
|
-
var _tsDedent = _interopRequireDefault(require("ts-dedent"));
|
|
15
|
-
|
|
16
|
-
var _react2 = require("@mdx-js/react");
|
|
17
|
-
|
|
18
|
-
var _theming = require("@storybook/theming");
|
|
19
|
-
|
|
20
|
-
var _components = require("@storybook/components");
|
|
21
|
-
|
|
22
|
-
var _DocsContext = require("./DocsContext");
|
|
23
|
-
|
|
24
|
-
var _Anchor = require("./Anchor");
|
|
25
|
-
|
|
26
|
-
var _Story = require("./Story");
|
|
27
|
-
|
|
28
|
-
var _SourceContainer = require("./SourceContainer");
|
|
29
|
-
|
|
30
|
-
var _mdx = require("./mdx");
|
|
31
|
-
|
|
32
|
-
var _utils = require("./utils");
|
|
33
|
-
|
|
34
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
35
|
-
|
|
36
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
37
|
-
|
|
38
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
39
|
-
|
|
40
|
-
const {
|
|
41
|
-
document,
|
|
42
|
-
window: globalWindow
|
|
43
|
-
} = _global.default;
|
|
44
|
-
const defaultComponents = Object.assign({}, _components.components, {
|
|
45
|
-
code: _mdx.CodeOrSourceMdx,
|
|
46
|
-
a: _mdx.AnchorMdx
|
|
47
|
-
}, _mdx.HeadersMdx);
|
|
48
|
-
const warnOptionsTheme = (0, _utilDeprecate.default)(() => {}, (0, _tsDedent.default)`
|
|
49
|
-
Deprecated parameter: options.theme => docs.theme
|
|
50
|
-
|
|
51
|
-
https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/theming.md#storybook-theming
|
|
52
|
-
`);
|
|
53
|
-
|
|
54
|
-
const DocsContainer = ({
|
|
55
|
-
context,
|
|
56
|
-
children
|
|
57
|
-
}) => {
|
|
58
|
-
const {
|
|
59
|
-
id: storyId,
|
|
60
|
-
storyById
|
|
61
|
-
} = context;
|
|
62
|
-
const {
|
|
63
|
-
parameters: {
|
|
64
|
-
options = {},
|
|
65
|
-
docs = {}
|
|
66
|
-
}
|
|
67
|
-
} = storyById(storyId);
|
|
68
|
-
let themeVars = docs.theme;
|
|
69
|
-
|
|
70
|
-
if (!themeVars && options.theme) {
|
|
71
|
-
warnOptionsTheme();
|
|
72
|
-
themeVars = options.theme;
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
const theme = (0, _theming.ensure)(themeVars);
|
|
76
|
-
const allComponents = Object.assign({}, defaultComponents, docs.components);
|
|
77
|
-
(0, _react.useEffect)(() => {
|
|
78
|
-
let url;
|
|
79
|
-
|
|
80
|
-
try {
|
|
81
|
-
url = new URL(globalWindow.parent.location);
|
|
82
|
-
} catch (err) {
|
|
83
|
-
return;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
if (url.hash) {
|
|
87
|
-
const element = document.getElementById(url.hash.substring(1));
|
|
88
|
-
|
|
89
|
-
if (element) {
|
|
90
|
-
// Introducing a delay to ensure scrolling works when it's a full refresh.
|
|
91
|
-
setTimeout(() => {
|
|
92
|
-
(0, _utils.scrollToElement)(element);
|
|
93
|
-
}, 200);
|
|
94
|
-
}
|
|
95
|
-
} else {
|
|
96
|
-
const element = document.getElementById((0, _Anchor.anchorBlockIdFromId)(storyId)) || document.getElementById((0, _Story.storyBlockIdFromId)(storyId));
|
|
97
|
-
|
|
98
|
-
if (element) {
|
|
99
|
-
const allStories = element.parentElement.querySelectorAll('[id|="anchor-"]');
|
|
100
|
-
let scrollTarget = element;
|
|
101
|
-
|
|
102
|
-
if (allStories && allStories[0] === element) {
|
|
103
|
-
// Include content above first story
|
|
104
|
-
scrollTarget = document.getElementById('docs-root');
|
|
105
|
-
} // Introducing a delay to ensure scrolling works when it's a full refresh.
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
setTimeout(() => {
|
|
109
|
-
(0, _utils.scrollToElement)(scrollTarget, 'start');
|
|
110
|
-
}, 200);
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
|
-
}, [storyId]);
|
|
114
|
-
return /*#__PURE__*/_react.default.createElement(_DocsContext.DocsContext.Provider, {
|
|
115
|
-
value: context
|
|
116
|
-
}, /*#__PURE__*/_react.default.createElement(_SourceContainer.SourceContainer, null, /*#__PURE__*/_react.default.createElement(_theming.ThemeProvider, {
|
|
117
|
-
theme: theme
|
|
118
|
-
}, /*#__PURE__*/_react.default.createElement(_react2.MDXProvider, {
|
|
119
|
-
components: allComponents
|
|
120
|
-
}, /*#__PURE__*/_react.default.createElement(_components.DocsWrapper, {
|
|
121
|
-
className: "sbdocs sbdocs-wrapper"
|
|
122
|
-
}, /*#__PURE__*/_react.default.createElement(_components.DocsContent, {
|
|
123
|
-
className: "sbdocs sbdocs-content"
|
|
124
|
-
}, children))))));
|
|
125
|
-
};
|
|
126
|
-
|
|
127
|
-
exports.DocsContainer = DocsContainer;
|