@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.
@@ -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
- var anchorBlockIdFromId = function anchorBlockIdFromId(storyId) {
13
- return "anchor--".concat(storyId);
14
- };
12
+ const anchorBlockIdFromId = storyId => `anchor--${storyId}`;
15
13
 
16
14
  exports.anchorBlockIdFromId = anchorBlockIdFromId;
17
15
 
18
- var Anchor = function Anchor(_ref) {
19
- var storyId = _ref.storyId,
20
- children = _ref.children;
21
- return /*#__PURE__*/_react.default.createElement("div", {
22
- id: anchorBlockIdFromId(storyId)
23
- }, children);
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 _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
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 || _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; }
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
- 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; }
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("Unknown story: ".concat(storyId));
42
+ throw new Error(`Unknown story: ${storyId}`);
97
43
  }
98
44
 
99
45
  return context.getStoryContext(story);
100
46
  };
101
47
 
102
- var useArgs = function useArgs(storyId, context) {
103
- var channel = _addons.addons.getChannel();
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
- (0, _react.useEffect)(function () {
113
- var cb = function cb(changed) {
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 function () {
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
- var useGlobals = function useGlobals(storyId, context) {
140
- var channel = _addons.addons.getChannel();
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
- (0, _react.useEffect)(function () {
150
- var cb = function cb(changed) {
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 function () {
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
- var extractComponentArgTypes = function extractComponentArgTypes(component, _ref, include, exclude) {
163
- var id = _ref.id,
164
- storyById = _ref.storyById;
165
-
166
- var _storyById = storyById(id),
167
- parameters = _storyById.parameters;
168
-
169
- var _ref2 = parameters.docs || {},
170
- extractArgTypes = _ref2.extractArgTypes;
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
- var argTypes = extractArgTypes(component);
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
- var isShortcut = function isShortcut(value) {
112
+ const isShortcut = value => {
184
113
  return value && [_types.CURRENT_SELECTION, _types.PRIMARY_STORY].includes(value);
185
114
  };
186
115
 
187
- var getComponent = function getComponent() {
188
- var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
189
-
190
- var _ref3 = arguments.length > 1 ? arguments[1] : undefined,
191
- id = _ref3.id,
192
- storyById = _ref3.storyById;
193
-
194
- var _ref4 = props,
195
- of = _ref4.of;
196
- var _ref5 = props,
197
- story = _ref5.story;
198
-
199
- var _storyById2 = storyById(id),
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
- var addComponentTabs = function addComponentTabs(tabs, components, context, include, exclude, sort) {
216
- return Object.assign({}, tabs, (0, _mapValues.default)(components, function (comp) {
217
- return {
218
- rows: extractComponentArgTypes(comp, context, include, exclude),
219
- sort: sort
220
- };
221
- }));
222
- };
223
-
224
- var StoryTable = function StoryTable(props) {
225
- var context = (0, _react.useContext)(_DocsContext.DocsContext);
226
- var currentId = context.id,
227
- componentStories = context.componentStories;
228
- var storyName = props.story,
229
- component = props.component,
230
- subcomponents = props.subcomponents,
231
- showComponent = props.showComponent,
232
- include = props.include,
233
- exclude = props.exclude,
234
- sort = props.sort;
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
- var storyId;
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
- var primaryStory = componentStories()[0];
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
- var story = (0, _useStory.useStory)(storyId, context); // eslint-disable-next-line prefer-const
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
- var argTypes = (0, _store.filterArgTypes)(story.argTypes, include, exclude);
277
- var mainLabel = (0, _utils.getComponentName)(component) || 'Story';
278
-
279
- var tabs = _defineProperty({}, mainLabel, {
280
- rows: argTypes,
281
- args: args,
282
- globals: globals,
283
- updateArgs: updateArgs,
284
- resetArgs: resetArgs
285
- }); // Use the dynamically generated component tabs if there are no controls
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, _defineProperty({}, mainLabel, component), context, include, exclude);
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("Unexpected subcomponents array. Expected an object whose keys are tab labels and whose values are components.");
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
- var ComponentsTable = function ComponentsTable(props) {
324
- var context = (0, _react.useContext)(_DocsContext.DocsContext);
325
- var components = props.components,
326
- include = props.include,
327
- exclude = props.exclude,
328
- sort = props.sort;
329
- var tabs = addComponentTabs({}, components, context, include, exclude);
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
- var ArgsTable = function ArgsTable(props) {
339
- var context = (0, _react.useContext)(_DocsContext.DocsContext);
340
- var id = context.id,
341
- storyById = context.storyById;
342
-
343
- var _storyById3 = storyById(id),
344
- controls = _storyById3.parameters.controls,
345
- subcomponents = _storyById3.subcomponents;
346
-
347
- var _ref6 = props,
348
- include = _ref6.include,
349
- exclude = _ref6.exclude,
350
- components = _ref6.components,
351
- sortProp = _ref6.sort;
352
- var _ref7 = props,
353
- storyName = _ref7.story;
354
- var sort = sortProp || (controls === null || controls === void 0 ? void 0 : controls.sort);
355
- var main = getComponent(props, context);
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: subcomponents,
361
- sort: sort
287
+ subcomponents,
288
+ sort
362
289
  }));
363
290
  }
364
291
 
365
292
  if (!components && !subcomponents) {
366
- var mainProps;
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: components,
386
- sort: sort
312
+ components,
313
+ sort
387
314
  }));
388
315
  }
389
316
 
390
- var mainLabel = (0, _utils.getComponentName)(main);
317
+ const mainLabel = (0, _utils.getComponentName)(main);
391
318
  return /*#__PURE__*/_react.default.createElement(ComponentsTable, _extends({}, props, {
392
- components: Object.assign(_defineProperty({}, mainLabel, main), subcomponents),
319
+ components: Object.assign({
320
+ [mainLabel]: main
321
+ }, subcomponents),
393
322
  sort: sort
394
323
  }));
395
324
  };