@storybook/addon-docs 7.0.0-alpha.1 → 7.0.0-alpha.4
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/dist/cjs/blocks/Anchor.js +7 -10
- package/dist/cjs/blocks/ArgsTable.js +134 -205
- package/dist/cjs/blocks/Canvas.js +38 -73
- package/dist/cjs/blocks/Description.js +41 -68
- package/dist/cjs/blocks/DocsContainer.js +40 -68
- package/dist/cjs/blocks/DocsContext.js +1 -1
- package/dist/cjs/blocks/DocsPage.js +3 -5
- package/dist/cjs/blocks/DocsStory.js +18 -28
- package/dist/cjs/blocks/Heading.js +5 -9
- package/dist/cjs/blocks/Meta.js +11 -33
- package/dist/cjs/blocks/Preview.js +4 -10
- package/dist/cjs/blocks/Primary.js +11 -39
- package/dist/cjs/blocks/Props.js +4 -10
- package/dist/cjs/blocks/Source.js +62 -80
- package/dist/cjs/blocks/SourceContainer.js +19 -68
- package/dist/cjs/blocks/Stories.js +16 -47
- package/dist/cjs/blocks/Story.js +60 -180
- package/dist/cjs/blocks/Subheading.js +5 -9
- package/dist/cjs/blocks/Subtitle.js +15 -35
- package/dist/cjs/blocks/Title.js +12 -36
- package/dist/cjs/blocks/Wrapper.js +7 -8
- package/dist/cjs/blocks/enhanceSource.js +30 -67
- package/dist/cjs/blocks/index.js +28 -34
- package/dist/cjs/blocks/mdx.js +85 -96
- package/dist/cjs/blocks/types.js +2 -2
- package/dist/cjs/blocks/useStory.js +16 -101
- package/dist/cjs/blocks/utils.js +4 -25
- package/dist/cjs/index.js +1 -7
- package/dist/cjs/manager.js +9 -15
- package/dist/cjs/preset.js +120 -288
- package/dist/cjs/preview.js +5 -103
- package/dist/cjs/shared.js +5 -5
- package/dist/esm/blocks/Story.js +21 -73
- package/dist/types/blocks/Story.d.ts +2 -2
- package/package.json +15 -15
|
@@ -9,18 +9,15 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
9
9
|
|
|
10
10
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
11
|
|
|
12
|
-
|
|
13
|
-
return "anchor--".concat(storyId);
|
|
14
|
-
};
|
|
12
|
+
const anchorBlockIdFromId = storyId => `anchor--${storyId}`;
|
|
15
13
|
|
|
16
14
|
exports.anchorBlockIdFromId = anchorBlockIdFromId;
|
|
17
15
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
};
|
|
16
|
+
const Anchor = ({
|
|
17
|
+
storyId,
|
|
18
|
+
children
|
|
19
|
+
}) => /*#__PURE__*/_react.default.createElement("div", {
|
|
20
|
+
id: anchorBlockIdFromId(storyId)
|
|
21
|
+
}, children);
|
|
25
22
|
|
|
26
23
|
exports.Anchor = Anchor;
|
|
@@ -1,50 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
|
-
|
|
5
|
-
require("core-js/modules/es.symbol.js");
|
|
6
|
-
|
|
7
|
-
require("core-js/modules/es.symbol.description.js");
|
|
8
|
-
|
|
9
|
-
require("core-js/modules/es.symbol.iterator.js");
|
|
10
|
-
|
|
11
|
-
require("core-js/modules/es.array.iterator.js");
|
|
12
|
-
|
|
13
|
-
require("core-js/modules/es.string.iterator.js");
|
|
14
|
-
|
|
15
|
-
require("core-js/modules/web.dom-collections.iterator.js");
|
|
16
|
-
|
|
17
|
-
require("core-js/modules/es.array.slice.js");
|
|
18
|
-
|
|
19
|
-
require("core-js/modules/es.function.name.js");
|
|
20
|
-
|
|
21
|
-
require("core-js/modules/es.array.from.js");
|
|
22
|
-
|
|
23
|
-
require("core-js/modules/es.regexp.exec.js");
|
|
24
|
-
|
|
25
|
-
require("core-js/modules/es.weak-map.js");
|
|
26
|
-
|
|
27
|
-
require("core-js/modules/es.object.get-own-property-descriptor.js");
|
|
28
|
-
|
|
29
3
|
Object.defineProperty(exports, "__esModule", {
|
|
30
4
|
value: true
|
|
31
5
|
});
|
|
32
6
|
exports.getComponent = exports.extractComponentArgTypes = exports.StoryTable = exports.ComponentsTable = exports.ArgsTable = void 0;
|
|
33
7
|
|
|
34
|
-
require("core-js/modules/es.array.includes.js");
|
|
35
|
-
|
|
36
|
-
require("core-js/modules/es.string.includes.js");
|
|
37
|
-
|
|
38
|
-
require("core-js/modules/es.object.assign.js");
|
|
39
|
-
|
|
40
|
-
require("core-js/modules/es.array.sort.js");
|
|
41
|
-
|
|
42
|
-
require("core-js/modules/es.array.find.js");
|
|
43
|
-
|
|
44
|
-
require("core-js/modules/es.object.to-string.js");
|
|
45
|
-
|
|
46
|
-
require("core-js/modules/es.object.values.js");
|
|
47
|
-
|
|
48
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
49
9
|
|
|
50
10
|
var _mapValues = _interopRequireDefault(require("lodash/mapValues"));
|
|
@@ -69,135 +29,103 @@ var _useStory = require("./useStory");
|
|
|
69
29
|
|
|
70
30
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
71
31
|
|
|
72
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function
|
|
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); }
|
|
73
33
|
|
|
74
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null ||
|
|
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; }
|
|
75
35
|
|
|
76
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); }
|
|
77
37
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
81
|
-
|
|
82
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
83
|
-
|
|
84
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
85
|
-
|
|
86
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
87
|
-
|
|
88
|
-
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
89
|
-
|
|
90
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
91
|
-
|
|
92
|
-
var getContext = function getContext(storyId, context) {
|
|
93
|
-
var story = context.storyById(storyId);
|
|
38
|
+
const getContext = (storyId, context) => {
|
|
39
|
+
const story = context.storyById(storyId);
|
|
94
40
|
|
|
95
41
|
if (!story) {
|
|
96
|
-
throw new Error(
|
|
42
|
+
throw new Error(`Unknown story: ${storyId}`);
|
|
97
43
|
}
|
|
98
44
|
|
|
99
45
|
return context.getStoryContext(story);
|
|
100
46
|
};
|
|
101
47
|
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
var storyContext = getContext(storyId, context);
|
|
106
|
-
|
|
107
|
-
var _useState = (0, _react.useState)(storyContext.args),
|
|
108
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
109
|
-
args = _useState2[0],
|
|
110
|
-
setArgs = _useState2[1];
|
|
48
|
+
const useArgs = (storyId, context) => {
|
|
49
|
+
const channel = _addons.addons.getChannel();
|
|
111
50
|
|
|
112
|
-
(
|
|
113
|
-
|
|
51
|
+
const storyContext = getContext(storyId, context);
|
|
52
|
+
const [args, setArgs] = (0, _react.useState)(storyContext.args);
|
|
53
|
+
(0, _react.useEffect)(() => {
|
|
54
|
+
const cb = changed => {
|
|
114
55
|
if (changed.storyId === storyId) {
|
|
115
56
|
setArgs(changed.args);
|
|
116
57
|
}
|
|
117
58
|
};
|
|
118
59
|
|
|
119
60
|
channel.on(_coreEvents.default.STORY_ARGS_UPDATED, cb);
|
|
120
|
-
return
|
|
121
|
-
return channel.off(_coreEvents.default.STORY_ARGS_UPDATED, cb);
|
|
122
|
-
};
|
|
123
|
-
}, [storyId]);
|
|
124
|
-
var updateArgs = (0, _react.useCallback)(function (updatedArgs) {
|
|
125
|
-
return channel.emit(_coreEvents.default.UPDATE_STORY_ARGS, {
|
|
126
|
-
storyId: storyId,
|
|
127
|
-
updatedArgs: updatedArgs
|
|
128
|
-
});
|
|
129
|
-
}, [storyId]);
|
|
130
|
-
var resetArgs = (0, _react.useCallback)(function (argNames) {
|
|
131
|
-
return channel.emit(_coreEvents.default.RESET_STORY_ARGS, {
|
|
132
|
-
storyId: storyId,
|
|
133
|
-
argNames: argNames
|
|
134
|
-
});
|
|
61
|
+
return () => channel.off(_coreEvents.default.STORY_ARGS_UPDATED, cb);
|
|
135
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]);
|
|
136
71
|
return [args, updateArgs, resetArgs];
|
|
137
72
|
};
|
|
138
73
|
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
var storyContext = getContext(storyId, context);
|
|
143
|
-
|
|
144
|
-
var _useState3 = (0, _react.useState)(storyContext.globals),
|
|
145
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
146
|
-
globals = _useState4[0],
|
|
147
|
-
setGlobals = _useState4[1];
|
|
74
|
+
const useGlobals = (storyId, context) => {
|
|
75
|
+
const channel = _addons.addons.getChannel();
|
|
148
76
|
|
|
149
|
-
(
|
|
150
|
-
|
|
77
|
+
const storyContext = getContext(storyId, context);
|
|
78
|
+
const [globals, setGlobals] = (0, _react.useState)(storyContext.globals);
|
|
79
|
+
(0, _react.useEffect)(() => {
|
|
80
|
+
const cb = changed => {
|
|
151
81
|
setGlobals(changed.globals);
|
|
152
82
|
};
|
|
153
83
|
|
|
154
84
|
channel.on(_coreEvents.default.GLOBALS_UPDATED, cb);
|
|
155
|
-
return
|
|
156
|
-
return channel.off(_coreEvents.default.GLOBALS_UPDATED, cb);
|
|
157
|
-
};
|
|
85
|
+
return () => channel.off(_coreEvents.default.GLOBALS_UPDATED, cb);
|
|
158
86
|
}, []);
|
|
159
87
|
return [globals];
|
|
160
88
|
};
|
|
161
89
|
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
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 || {};
|
|
171
100
|
|
|
172
101
|
if (!extractArgTypes) {
|
|
173
102
|
throw new Error(_components.ArgsTableError.ARGS_UNSUPPORTED);
|
|
174
103
|
}
|
|
175
104
|
|
|
176
|
-
|
|
105
|
+
let argTypes = extractArgTypes(component);
|
|
177
106
|
argTypes = (0, _store.filterArgTypes)(argTypes, include, exclude);
|
|
178
107
|
return argTypes;
|
|
179
108
|
};
|
|
180
109
|
|
|
181
110
|
exports.extractComponentArgTypes = extractComponentArgTypes;
|
|
182
111
|
|
|
183
|
-
|
|
112
|
+
const isShortcut = value => {
|
|
184
113
|
return value && [_types.CURRENT_SELECTION, _types.PRIMARY_STORY].includes(value);
|
|
185
114
|
};
|
|
186
115
|
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
component = _storyById2.component;
|
|
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);
|
|
201
129
|
|
|
202
130
|
if (isShortcut(of) || isShortcut(story)) {
|
|
203
131
|
return component || null;
|
|
@@ -212,29 +140,29 @@ var getComponent = function getComponent() {
|
|
|
212
140
|
|
|
213
141
|
exports.getComponent = getComponent;
|
|
214
142
|
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
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;
|
|
235
163
|
|
|
236
164
|
try {
|
|
237
|
-
|
|
165
|
+
let storyId;
|
|
238
166
|
|
|
239
167
|
switch (storyName) {
|
|
240
168
|
case _types.CURRENT_SELECTION:
|
|
@@ -245,7 +173,7 @@ var StoryTable = function StoryTable(props) {
|
|
|
245
173
|
|
|
246
174
|
case _types.PRIMARY_STORY:
|
|
247
175
|
{
|
|
248
|
-
|
|
176
|
+
const primaryStory = componentStories()[0];
|
|
249
177
|
storyId = primaryStory.id;
|
|
250
178
|
break;
|
|
251
179
|
}
|
|
@@ -256,38 +184,28 @@ var StoryTable = function StoryTable(props) {
|
|
|
256
184
|
}
|
|
257
185
|
}
|
|
258
186
|
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
var _useArgs = useArgs(storyId, context),
|
|
262
|
-
_useArgs2 = _slicedToArray(_useArgs, 3),
|
|
263
|
-
args = _useArgs2[0],
|
|
264
|
-
updateArgs = _useArgs2[1],
|
|
265
|
-
resetArgs = _useArgs2[2];
|
|
266
|
-
|
|
267
|
-
var _useGlobals = useGlobals(storyId, context),
|
|
268
|
-
_useGlobals2 = _slicedToArray(_useGlobals, 1),
|
|
269
|
-
globals = _useGlobals2[0];
|
|
187
|
+
const story = (0, _useStory.useStory)(storyId, context); // eslint-disable-next-line prefer-const
|
|
270
188
|
|
|
189
|
+
let [args, updateArgs, resetArgs] = useArgs(storyId, context);
|
|
190
|
+
const [globals] = useGlobals(storyId, context);
|
|
271
191
|
if (!story) return /*#__PURE__*/_react.default.createElement(_components.ArgsTable, {
|
|
272
192
|
isLoading: true,
|
|
273
193
|
updateArgs: updateArgs,
|
|
274
194
|
resetArgs: resetArgs
|
|
275
195
|
});
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
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
|
|
286
207
|
|
|
287
|
-
|
|
288
|
-
var storyHasArgsWithControls = argTypes && Object.values(argTypes).find(function (v) {
|
|
289
|
-
return !!(v !== null && v !== void 0 && v.control);
|
|
290
|
-
});
|
|
208
|
+
const storyHasArgsWithControls = argTypes && Object.values(argTypes).find(v => !!(v !== null && v !== void 0 && v.control));
|
|
291
209
|
|
|
292
210
|
if (!storyHasArgsWithControls) {
|
|
293
211
|
updateArgs = null;
|
|
@@ -296,12 +214,14 @@ var StoryTable = function StoryTable(props) {
|
|
|
296
214
|
}
|
|
297
215
|
|
|
298
216
|
if (component && (!storyHasArgsWithControls || showComponent)) {
|
|
299
|
-
tabs = addComponentTabs(tabs,
|
|
217
|
+
tabs = addComponentTabs(tabs, {
|
|
218
|
+
[mainLabel]: component
|
|
219
|
+
}, context, include, exclude);
|
|
300
220
|
}
|
|
301
221
|
|
|
302
222
|
if (subcomponents) {
|
|
303
223
|
if (Array.isArray(subcomponents)) {
|
|
304
|
-
throw new Error(
|
|
224
|
+
throw new Error(`Unexpected subcomponents array. Expected an object whose keys are tab labels and whose values are components.`);
|
|
305
225
|
}
|
|
306
226
|
|
|
307
227
|
tabs = addComponentTabs(tabs, subcomponents, context, include, exclude);
|
|
@@ -320,13 +240,15 @@ var StoryTable = function StoryTable(props) {
|
|
|
320
240
|
|
|
321
241
|
exports.StoryTable = StoryTable;
|
|
322
242
|
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
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);
|
|
330
252
|
return /*#__PURE__*/_react.default.createElement(_components.TabbedArgsTable, {
|
|
331
253
|
tabs: tabs,
|
|
332
254
|
sort: sort
|
|
@@ -335,35 +257,40 @@ var ComponentsTable = function ComponentsTable(props) {
|
|
|
335
257
|
|
|
336
258
|
exports.ComponentsTable = ComponentsTable;
|
|
337
259
|
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
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);
|
|
356
283
|
|
|
357
284
|
if (storyName) {
|
|
358
285
|
return /*#__PURE__*/_react.default.createElement(StoryTable, _extends({}, props, {
|
|
359
286
|
component: main,
|
|
360
|
-
subcomponents
|
|
361
|
-
sort
|
|
287
|
+
subcomponents,
|
|
288
|
+
sort
|
|
362
289
|
}));
|
|
363
290
|
}
|
|
364
291
|
|
|
365
292
|
if (!components && !subcomponents) {
|
|
366
|
-
|
|
293
|
+
let mainProps;
|
|
367
294
|
|
|
368
295
|
try {
|
|
369
296
|
mainProps = {
|
|
@@ -382,14 +309,16 @@ var ArgsTable = function ArgsTable(props) {
|
|
|
382
309
|
|
|
383
310
|
if (components) {
|
|
384
311
|
return /*#__PURE__*/_react.default.createElement(ComponentsTable, _extends({}, props, {
|
|
385
|
-
components
|
|
386
|
-
sort
|
|
312
|
+
components,
|
|
313
|
+
sort
|
|
387
314
|
}));
|
|
388
315
|
}
|
|
389
316
|
|
|
390
|
-
|
|
317
|
+
const mainLabel = (0, _utils.getComponentName)(main);
|
|
391
318
|
return /*#__PURE__*/_react.default.createElement(ComponentsTable, _extends({}, props, {
|
|
392
|
-
components: Object.assign(
|
|
319
|
+
components: Object.assign({
|
|
320
|
+
[mainLabel]: main
|
|
321
|
+
}, subcomponents),
|
|
393
322
|
sort: sort
|
|
394
323
|
}));
|
|
395
324
|
};
|