1 | "use strict";
|
2 |
|
3 | function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _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.object.to-string.js");
|
10 |
|
11 | require("core-js/modules/es.symbol.iterator.js");
|
12 |
|
13 | require("core-js/modules/es.string.iterator.js");
|
14 |
|
15 | require("core-js/modules/es.array.iterator.js");
|
16 |
|
17 | require("core-js/modules/web.dom-collections.iterator.js");
|
18 |
|
19 | require("core-js/modules/es.array.slice.js");
|
20 |
|
21 | require("core-js/modules/es.function.name.js");
|
22 |
|
23 | require("core-js/modules/es.array.from.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 | Object.defineProperty(exports, "__esModule", {
|
30 | value: true
|
31 | });
|
32 | exports.ArgsTable = exports.ComponentsTable = exports.StoryTable = exports.getComponent = exports.extractComponentArgTypes = void 0;
|
33 |
|
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.find.js");
|
41 |
|
42 | require("core-js/modules/es.object.values.js");
|
43 |
|
44 | var _react = _interopRequireWildcard(require("react"));
|
45 |
|
46 | var _mapValues = _interopRequireDefault(require("lodash/mapValues"));
|
47 |
|
48 | var _components = require("@storybook/components");
|
49 |
|
50 | var _addons = require("@storybook/addons");
|
51 |
|
52 | var _store = require("@storybook/store");
|
53 |
|
54 | var _coreEvents = _interopRequireDefault(require("@storybook/core-events"));
|
55 |
|
56 | var _DocsContext = require("./DocsContext");
|
57 |
|
58 | var _types = require("./types");
|
59 |
|
60 | var _utils = require("./utils");
|
61 |
|
62 | var _Story = require("./Story");
|
63 |
|
64 | var _useStory = require("./useStory");
|
65 |
|
66 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
67 |
|
68 | function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
|
69 |
|
70 | function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }
|
71 |
|
72 | function _extends() { _extends = Object.assign || 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); }
|
73 |
|
74 | function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
75 |
|
76 | function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
77 |
|
78 | 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."); }
|
79 |
|
80 | 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); }
|
81 |
|
82 | 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; }
|
83 |
|
84 | function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_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; }
|
85 |
|
86 | function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
87 |
|
88 | var useArgs = function useArgs(storyId, context) {
|
89 | var channel = _addons.addons.getChannel();
|
90 |
|
91 | var story = context.storyById(storyId);
|
92 |
|
93 | if (!story) {
|
94 | throw new Error("Unknown story: ".concat(storyId));
|
95 | }
|
96 |
|
97 | var storyContext = context.getStoryContext(story);
|
98 |
|
99 | var _useState = (0, _react.useState)(storyContext.args),
|
100 | _useState2 = _slicedToArray(_useState, 2),
|
101 | args = _useState2[0],
|
102 | setArgs = _useState2[1];
|
103 |
|
104 | (0, _react.useEffect)(function () {
|
105 | var cb = function cb(changed) {
|
106 | if (changed.storyId === storyId) {
|
107 | setArgs(changed.args);
|
108 | }
|
109 | };
|
110 |
|
111 | channel.on(_coreEvents.default.STORY_ARGS_UPDATED, cb);
|
112 | return function () {
|
113 | return channel.off(_coreEvents.default.STORY_ARGS_UPDATED, cb);
|
114 | };
|
115 | }, [storyId]);
|
116 | var updateArgs = (0, _react.useCallback)(function (updatedArgs) {
|
117 | return channel.emit(_coreEvents.default.UPDATE_STORY_ARGS, {
|
118 | storyId: storyId,
|
119 | updatedArgs: updatedArgs
|
120 | });
|
121 | }, [storyId]);
|
122 | var resetArgs = (0, _react.useCallback)(function (argNames) {
|
123 | return channel.emit(_coreEvents.default.RESET_STORY_ARGS, {
|
124 | storyId: storyId,
|
125 | argNames: argNames
|
126 | });
|
127 | }, [storyId]);
|
128 | return [args, updateArgs, resetArgs];
|
129 | };
|
130 |
|
131 | var extractComponentArgTypes = function extractComponentArgTypes(component, _ref, include, exclude) {
|
132 | var id = _ref.id,
|
133 | storyById = _ref.storyById;
|
134 |
|
135 | var _storyById = storyById(id),
|
136 | parameters = _storyById.parameters;
|
137 |
|
138 | var _ref2 = parameters.docs || {},
|
139 | extractArgTypes = _ref2.extractArgTypes;
|
140 |
|
141 | if (!extractArgTypes) {
|
142 | throw new Error(_components.ArgsTableError.ARGS_UNSUPPORTED);
|
143 | }
|
144 |
|
145 | var argTypes = extractArgTypes(component);
|
146 | argTypes = (0, _store.filterArgTypes)(argTypes, include, exclude);
|
147 | return argTypes;
|
148 | };
|
149 |
|
150 | exports.extractComponentArgTypes = extractComponentArgTypes;
|
151 |
|
152 | var isShortcut = function isShortcut(value) {
|
153 | return value && [_types.CURRENT_SELECTION, _types.PRIMARY_STORY].includes(value);
|
154 | };
|
155 |
|
156 | var getComponent = function getComponent() {
|
157 | var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
158 |
|
159 | var _ref3 = arguments.length > 1 ? arguments[1] : undefined,
|
160 | id = _ref3.id,
|
161 | storyById = _ref3.storyById;
|
162 |
|
163 | var _ref4 = props,
|
164 | of = _ref4.of;
|
165 | var _ref5 = props,
|
166 | story = _ref5.story;
|
167 |
|
168 | var _storyById2 = storyById(id),
|
169 | component = _storyById2.component;
|
170 |
|
171 | if (isShortcut(of) || isShortcut(story)) {
|
172 | return component || null;
|
173 | }
|
174 |
|
175 | if (!of) {
|
176 | throw new Error(_components.ArgsTableError.NO_COMPONENT);
|
177 | }
|
178 |
|
179 | return of;
|
180 | };
|
181 |
|
182 | exports.getComponent = getComponent;
|
183 |
|
184 | var addComponentTabs = function addComponentTabs(tabs, components, context, include, exclude, sort) {
|
185 | return Object.assign({}, tabs, (0, _mapValues.default)(components, function (comp) {
|
186 | return {
|
187 | rows: extractComponentArgTypes(comp, context, include, exclude),
|
188 | sort: sort
|
189 | };
|
190 | }));
|
191 | };
|
192 |
|
193 | var StoryTable = function StoryTable(props) {
|
194 | var context = (0, _react.useContext)(_DocsContext.DocsContext);
|
195 | var currentId = context.id,
|
196 | componentStories = context.componentStories;
|
197 | var storyName = props.story,
|
198 | component = props.component,
|
199 | subcomponents = props.subcomponents,
|
200 | showComponent = props.showComponent,
|
201 | include = props.include,
|
202 | exclude = props.exclude,
|
203 | sort = props.sort;
|
204 |
|
205 | try {
|
206 | var storyId;
|
207 |
|
208 | switch (storyName) {
|
209 | case _types.CURRENT_SELECTION:
|
210 | {
|
211 | storyId = currentId;
|
212 | break;
|
213 | }
|
214 |
|
215 | case _types.PRIMARY_STORY:
|
216 | {
|
217 | var primaryStory = componentStories()[0];
|
218 | storyId = primaryStory.id;
|
219 | break;
|
220 | }
|
221 |
|
222 | default:
|
223 | {
|
224 | storyId = (0, _Story.lookupStoryId)(storyName, context);
|
225 | }
|
226 | }
|
227 |
|
228 | var story = (0, _useStory.useStory)(storyId, context);
|
229 |
|
230 | var _useArgs = useArgs(storyId, context),
|
231 | _useArgs2 = _slicedToArray(_useArgs, 3),
|
232 | args = _useArgs2[0],
|
233 | updateArgs = _useArgs2[1],
|
234 | resetArgs = _useArgs2[2];
|
235 |
|
236 | if (!story) return _react.default.createElement(_components.ArgsTable, {
|
237 | isLoading: true,
|
238 | updateArgs: updateArgs,
|
239 | resetArgs: resetArgs
|
240 | });
|
241 | var argTypes = (0, _store.filterArgTypes)(story.argTypes, include, exclude);
|
242 | var mainLabel = (0, _utils.getComponentName)(component) || 'Story';
|
243 |
|
244 | var tabs = _defineProperty({}, mainLabel, {
|
245 | rows: argTypes,
|
246 | args: args,
|
247 | updateArgs: updateArgs,
|
248 | resetArgs: resetArgs
|
249 | });
|
250 |
|
251 |
|
252 | var storyHasArgsWithControls = argTypes && Object.values(argTypes).find(function (v) {
|
253 | return !!(v !== null && v !== void 0 && v.control);
|
254 | });
|
255 |
|
256 | if (!storyHasArgsWithControls) {
|
257 | updateArgs = null;
|
258 | resetArgs = null;
|
259 | tabs = {};
|
260 | }
|
261 |
|
262 | if (component && (!storyHasArgsWithControls || showComponent)) {
|
263 | tabs = addComponentTabs(tabs, _defineProperty({}, mainLabel, component), context, include, exclude);
|
264 | }
|
265 |
|
266 | if (subcomponents) {
|
267 | if (Array.isArray(subcomponents)) {
|
268 | throw new Error("Unexpected subcomponents array. Expected an object whose keys are tab labels and whose values are components.");
|
269 | }
|
270 |
|
271 | tabs = addComponentTabs(tabs, subcomponents, context, include, exclude);
|
272 | }
|
273 |
|
274 | return _react.default.createElement(_components.TabbedArgsTable, {
|
275 | tabs: tabs,
|
276 | sort: sort
|
277 | });
|
278 | } catch (err) {
|
279 | return _react.default.createElement(_components.ArgsTable, {
|
280 | error: err.message
|
281 | });
|
282 | }
|
283 | };
|
284 |
|
285 | exports.StoryTable = StoryTable;
|
286 |
|
287 | var ComponentsTable = function ComponentsTable(props) {
|
288 | var context = (0, _react.useContext)(_DocsContext.DocsContext);
|
289 | var components = props.components,
|
290 | include = props.include,
|
291 | exclude = props.exclude,
|
292 | sort = props.sort;
|
293 | var tabs = addComponentTabs({}, components, context, include, exclude);
|
294 | return _react.default.createElement(_components.TabbedArgsTable, {
|
295 | tabs: tabs,
|
296 | sort: sort
|
297 | });
|
298 | };
|
299 |
|
300 | exports.ComponentsTable = ComponentsTable;
|
301 |
|
302 | var ArgsTable = function ArgsTable(props) {
|
303 | var context = (0, _react.useContext)(_DocsContext.DocsContext);
|
304 | var id = context.id,
|
305 | storyById = context.storyById;
|
306 |
|
307 | var _storyById3 = storyById(id),
|
308 | controls = _storyById3.parameters.controls,
|
309 | subcomponents = _storyById3.subcomponents;
|
310 |
|
311 | var _ref6 = props,
|
312 | include = _ref6.include,
|
313 | exclude = _ref6.exclude,
|
314 | components = _ref6.components,
|
315 | sortProp = _ref6.sort;
|
316 | var _ref7 = props,
|
317 | storyName = _ref7.story;
|
318 | var sort = sortProp || (controls === null || controls === void 0 ? void 0 : controls.sort);
|
319 | var main = getComponent(props, context);
|
320 |
|
321 | if (storyName) {
|
322 | return _react.default.createElement(StoryTable, _extends({}, props, {
|
323 | component: main,
|
324 | subcomponents: subcomponents,
|
325 | sort: sort
|
326 | }));
|
327 | }
|
328 |
|
329 | if (!components && !subcomponents) {
|
330 | var mainProps;
|
331 |
|
332 | try {
|
333 | mainProps = {
|
334 | rows: extractComponentArgTypes(main, context, include, exclude)
|
335 | };
|
336 | } catch (err) {
|
337 | mainProps = {
|
338 | error: err.message
|
339 | };
|
340 | }
|
341 |
|
342 | return _react.default.createElement(_components.ArgsTable, _extends({}, mainProps, {
|
343 | sort: sort
|
344 | }));
|
345 | }
|
346 |
|
347 | if (components) {
|
348 | return _react.default.createElement(ComponentsTable, _extends({}, props, {
|
349 | components: components,
|
350 | sort: sort
|
351 | }));
|
352 | }
|
353 |
|
354 | var mainLabel = (0, _utils.getComponentName)(main);
|
355 | return _react.default.createElement(ComponentsTable, _extends({}, props, {
|
356 | components: Object.assign(_defineProperty({}, mainLabel, main), subcomponents),
|
357 | sort: sort
|
358 | }));
|
359 | };
|
360 |
|
361 | exports.ArgsTable = ArgsTable;
|
362 | ArgsTable.defaultProps = {
|
363 | of: _types.CURRENT_SELECTION
|
364 | }; |
\ | No newline at end of file |