UNPKG

19.3 kBJavaScriptView Raw
1function _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); }
2
3function _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; }
4
5function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
6
7function _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."); }
8
9function _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; }
10
11function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
12
13function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
14
15function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
16
17function _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); }
18
19function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
20
21function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
22
23function _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; }
24
25function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
26
27function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
28
29function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
30
31function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
32
33function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
34
35function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
36
37function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
38
39function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
40
41function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
42
43function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
44
45import "core-js/modules/es.array.concat.js";
46import "core-js/modules/es.object.to-string.js";
47import "core-js/modules/web.dom-collections.for-each.js";
48import "core-js/modules/es.object.assign.js";
49import "core-js/modules/es.array.map.js";
50import "core-js/modules/es.array.filter.js";
51import "core-js/modules/es.object.entries.js";
52import "core-js/modules/es.object.get-prototype-of.js";
53import "core-js/modules/es.reflect.construct.js";
54import "core-js/modules/es.symbol.js";
55import "core-js/modules/es.symbol.description.js";
56import "core-js/modules/es.symbol.iterator.js";
57import "core-js/modules/es.array.iterator.js";
58import "core-js/modules/es.string.iterator.js";
59import "core-js/modules/web.dom-collections.iterator.js";
60import "core-js/modules/es.array.from.js";
61import "core-js/modules/es.array.slice.js";
62import "core-js/modules/es.function.name.js";
63import "core-js/modules/es.regexp.exec.js";
64import React, { Component, Fragment, useCallback, useContext, useEffect, useMemo, useRef } from 'react';
65import mergeWith from 'lodash/mergeWith';
66import { STORY_CHANGED, SHARED_STATE_CHANGED, SHARED_STATE_SET, SET_STORIES } from '@storybook/core-events';
67import { createContext } from './context';
68import Store from './store';
69import getInitialState from './initial-state';
70import { isGroup, isRoot, isStory } from './lib/stories';
71import * as provider from './modules/provider';
72import * as addons from './modules/addons';
73import * as channel from './modules/channel';
74import * as notifications from './modules/notifications';
75import * as settings from './modules/settings';
76import * as releaseNotes from './modules/release-notes';
77import * as stories from './modules/stories';
78import * as refs from './modules/refs';
79import * as layout from './modules/layout';
80import * as shortcuts from './modules/shortcuts';
81import * as url from './modules/url';
82import * as version from './modules/versions';
83import * as globals from './modules/globals';
84var ActiveTabs = layout.ActiveTabs;
85export { default as merge } from './lib/merge';
86export { ActiveTabs };
87var ManagerContext = createContext({
88 api: undefined,
89 state: getInitialState({})
90});
91// This is duplicated from @storybook/client-api for the reasons mentioned in lib-addons/types.js
92export var combineParameters = function combineParameters() {
93 for (var _len = arguments.length, parameterSets = new Array(_len), _key = 0; _key < _len; _key++) {
94 parameterSets[_key] = arguments[_key];
95 }
96
97 return mergeWith.apply(void 0, [{}].concat(parameterSets, [function (objValue, srcValue) {
98 // Treat arrays as scalars:
99 if (Array.isArray(srcValue)) return srcValue;
100 return undefined;
101 }]));
102};
103
104var ManagerProvider = /*#__PURE__*/function (_Component) {
105 _inherits(ManagerProvider, _Component);
106
107 var _super = _createSuper(ManagerProvider);
108
109 function ManagerProvider(props) {
110 var _this;
111
112 _classCallCheck(this, ManagerProvider);
113
114 _this = _super.call(this, props);
115 _this.api = {};
116 _this.modules = void 0;
117
118 _this.initModules = function () {
119 // Now every module has had a chance to set its API, call init on each module which gives it
120 // a chance to do things that call other modules' APIs.
121 _this.modules.forEach(function (_ref) {
122 var init = _ref.init;
123
124 if (init) {
125 init();
126 }
127 });
128 };
129
130 var location = props.location,
131 path = props.path,
132 refId = props.refId,
133 _props$viewMode = props.viewMode,
134 viewMode = _props$viewMode === void 0 ? props.docsMode ? 'docs' : 'story' : _props$viewMode,
135 singleStory = props.singleStory,
136 storyId = props.storyId,
137 docsMode = props.docsMode,
138 navigate = props.navigate;
139 var store = new Store({
140 getState: function getState() {
141 return _this.state;
142 },
143 setState: function setState(stateChange, callback) {
144 return _this.setState(stateChange, callback);
145 }
146 });
147 var routeData = {
148 location: location,
149 path: path,
150 viewMode: viewMode,
151 singleStory: singleStory,
152 storyId: storyId,
153 refId: refId
154 }; // Initialize the state to be the initial (persisted) state of the store.
155 // This gives the modules the chance to read the persisted state, apply their defaults
156 // and override if necessary
157
158 var docsModeState = {
159 layout: {
160 showToolbar: false,
161 showPanel: false
162 },
163 ui: {
164 docsMode: true
165 }
166 };
167 _this.state = store.getInitialState(getInitialState(Object.assign({}, routeData, docsMode ? docsModeState : null)));
168 var apiData = {
169 navigate: navigate,
170 store: store,
171 provider: props.provider
172 };
173 _this.modules = [provider, channel, addons, layout, notifications, settings, releaseNotes, shortcuts, stories, refs, globals, url, version].map(function (m) {
174 return m.init(Object.assign({}, routeData, apiData, {
175 state: _this.state,
176 fullAPI: _this.api
177 }));
178 }); // Create our initial state by combining the initial state of all modules, then overlaying any saved state
179
180 var state = getInitialState.apply(void 0, [_this.state].concat(_toConsumableArray(_this.modules.map(function (m) {
181 return m.state;
182 })))); // Get our API by combining the APIs exported by each module
183
184 var api = Object.assign.apply(Object, [_this.api, {
185 navigate: navigate
186 }].concat(_toConsumableArray(_this.modules.map(function (m) {
187 return m.api;
188 }))));
189 _this.state = state;
190 _this.api = api;
191 return _this;
192 }
193
194 _createClass(ManagerProvider, [{
195 key: "shouldComponentUpdate",
196 value: function shouldComponentUpdate(nextProps, nextState) {
197 var prevState = this.state;
198 var prevProps = this.props;
199
200 if (prevState !== nextState) {
201 return true;
202 }
203
204 if (prevProps.path !== nextProps.path) {
205 return true;
206 }
207
208 return false;
209 }
210 }, {
211 key: "render",
212 value: function render() {
213 var children = this.props.children;
214 var value = {
215 state: this.state,
216 api: this.api
217 };
218 return /*#__PURE__*/React.createElement(EffectOnMount, {
219 effect: this.initModules
220 }, /*#__PURE__*/React.createElement(ManagerContext.Provider, {
221 value: value
222 }, /*#__PURE__*/React.createElement(ManagerConsumer, null, children)));
223 }
224 }], [{
225 key: "getDerivedStateFromProps",
226 value: function getDerivedStateFromProps(props, state) {
227 if (state.path !== props.path) {
228 return Object.assign({}, state, {
229 location: props.location,
230 path: props.path,
231 refId: props.refId,
232 // if its a docsOnly page, even the 'story' view mode is considered 'docs'
233 viewMode: (props.docsMode && props.viewMode) === 'story' ? 'docs' : props.viewMode,
234 storyId: props.storyId
235 });
236 }
237
238 return null;
239 }
240 }]);
241
242 return ManagerProvider;
243}(Component);
244
245ManagerProvider.displayName = "ManagerProvider";
246ManagerProvider.displayName = 'Manager';
247
248// EffectOnMount exists to work around a bug in Reach Router where calling
249// navigate inside of componentDidMount (as could happen when we call init on any
250// of our modules) does not cause Reach Router's LocationProvider to update with
251// the correct path. Calling navigate inside on an effect does not have the
252// same problem. See https://github.com/reach/router/issues/404
253var EffectOnMount = function EffectOnMount(_ref2) {
254 var children = _ref2.children,
255 effect = _ref2.effect;
256 React.useEffect(effect, []);
257 return children;
258};
259
260var defaultFilter = function defaultFilter(c) {
261 return c;
262};
263
264function ManagerConsumer(_ref3) {
265 var _ref3$filter = _ref3.filter,
266 filter = _ref3$filter === void 0 ? defaultFilter : _ref3$filter,
267 children = _ref3.children;
268 var c = useContext(ManagerContext);
269 var renderer = useRef(children);
270 var filterer = useRef(filter);
271
272 if (typeof renderer.current !== 'function') {
273 return /*#__PURE__*/React.createElement(Fragment, null, renderer.current);
274 }
275
276 var data = filterer.current(c);
277 var l = useMemo(function () {
278 return _toConsumableArray(Object.entries(data).reduce(function (acc, keyval) {
279 return acc.concat(keyval);
280 }, []));
281 }, [c.state]);
282 return useMemo(function () {
283 var Child = renderer.current;
284 return /*#__PURE__*/React.createElement(Child, data);
285 }, l);
286}
287
288export function useStorybookState() {
289 var _useContext = useContext(ManagerContext),
290 state = _useContext.state;
291
292 return state;
293}
294export function useStorybookApi() {
295 var _useContext2 = useContext(ManagerContext),
296 api = _useContext2.api;
297
298 return api;
299}
300export { ManagerConsumer as Consumer, ManagerProvider as Provider, isGroup, isRoot, isStory };
301
302function orDefault(fromStore, defaultState) {
303 if (typeof fromStore === 'undefined') {
304 return defaultState;
305 }
306
307 return fromStore;
308}
309
310export var useChannel = function useChannel(eventMap) {
311 var deps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
312 var api = useStorybookApi();
313 useEffect(function () {
314 Object.entries(eventMap).forEach(function (_ref4) {
315 var _ref5 = _slicedToArray(_ref4, 2),
316 type = _ref5[0],
317 listener = _ref5[1];
318
319 return api.on(type, listener);
320 });
321 return function () {
322 Object.entries(eventMap).forEach(function (_ref6) {
323 var _ref7 = _slicedToArray(_ref6, 2),
324 type = _ref7[0],
325 listener = _ref7[1];
326
327 return api.off(type, listener);
328 });
329 };
330 }, deps);
331 return api.emit;
332};
333export function useStoryPrepared(storyId) {
334 var api = useStorybookApi();
335 return api.isPrepared(storyId);
336}
337export function useParameter(parameterKey, defaultValue) {
338 var api = useStorybookApi();
339 var result = api.getCurrentParameter(parameterKey);
340 return orDefault(result, defaultValue);
341}
342// cache for taking care of HMR
343var addonStateCache = {}; // shared state
344
345export function useSharedState(stateId, defaultState) {
346 var api = useStorybookApi();
347 var existingState = api.getAddonState(stateId);
348 var state = orDefault(existingState, addonStateCache[stateId] ? addonStateCache[stateId] : defaultState);
349
350 var setState = function setState(s, options) {
351 // set only after the stories are loaded
352 if (addonStateCache[stateId]) {
353 addonStateCache[stateId] = s;
354 }
355
356 api.setAddonState(stateId, s, options);
357 };
358
359 var allListeners = useMemo(function () {
360 var _stateChangeHandlers, _stateInitializationH;
361
362 var stateChangeHandlers = (_stateChangeHandlers = {}, _defineProperty(_stateChangeHandlers, "".concat(SHARED_STATE_CHANGED, "-client-").concat(stateId), function client(s) {
363 return setState(s);
364 }), _defineProperty(_stateChangeHandlers, "".concat(SHARED_STATE_SET, "-client-").concat(stateId), function client(s) {
365 return setState(s);
366 }), _stateChangeHandlers);
367 var stateInitializationHandlers = (_stateInitializationH = {}, _defineProperty(_stateInitializationH, SET_STORIES, function () {
368 var currentState = api.getAddonState(stateId);
369
370 if (currentState) {
371 addonStateCache[stateId] = currentState;
372 api.emit("".concat(SHARED_STATE_SET, "-manager-").concat(stateId), currentState);
373 } else if (addonStateCache[stateId]) {
374 // this happens when HMR
375 setState(addonStateCache[stateId]);
376 api.emit("".concat(SHARED_STATE_SET, "-manager-").concat(stateId), addonStateCache[stateId]);
377 } else if (defaultState !== undefined) {
378 // if not HMR, yet the defaults are from the manager
379 setState(defaultState); // initialize addonStateCache after first load, so its available for subsequent HMR
380
381 addonStateCache[stateId] = defaultState;
382 api.emit("".concat(SHARED_STATE_SET, "-manager-").concat(stateId), defaultState);
383 }
384 }), _defineProperty(_stateInitializationH, STORY_CHANGED, function () {
385 var currentState = api.getAddonState(stateId);
386
387 if (currentState !== undefined) {
388 api.emit("".concat(SHARED_STATE_SET, "-manager-").concat(stateId), currentState);
389 }
390 }), _stateInitializationH);
391 return Object.assign({}, stateChangeHandlers, stateInitializationHandlers);
392 }, [stateId]);
393 var emit = useChannel(allListeners);
394 return [state, function (newStateOrMerger, options) {
395 setState(newStateOrMerger, options);
396 emit("".concat(SHARED_STATE_CHANGED, "-manager-").concat(stateId), newStateOrMerger);
397 }];
398}
399export function useAddonState(addonId, defaultState) {
400 return useSharedState(addonId, defaultState);
401}
402export function useArgs() {
403 var _useStorybookApi = useStorybookApi(),
404 getCurrentStoryData = _useStorybookApi.getCurrentStoryData,
405 updateStoryArgs = _useStorybookApi.updateStoryArgs,
406 resetStoryArgs = _useStorybookApi.resetStoryArgs;
407
408 var data = getCurrentStoryData();
409 var args = isStory(data) ? data.args : {};
410 var updateArgs = useCallback(function (newArgs) {
411 return updateStoryArgs(data, newArgs);
412 }, [data, updateStoryArgs]);
413 var resetArgs = useCallback(function (argNames) {
414 return resetStoryArgs(data, argNames);
415 }, [data, resetStoryArgs]);
416 return [args, updateArgs, resetArgs];
417}
418export function useGlobals() {
419 var api = useStorybookApi();
420 return [api.getGlobals(), api.updateGlobals];
421}
422export function useGlobalTypes() {
423 return useStorybookApi().getGlobalTypes();
424}
425
426function useCurrentStory() {
427 var _useStorybookApi2 = useStorybookApi(),
428 getCurrentStoryData = _useStorybookApi2.getCurrentStoryData;
429
430 return getCurrentStoryData();
431}
432
433export function useArgTypes() {
434 var _useCurrentStory;
435
436 return ((_useCurrentStory = useCurrentStory()) === null || _useCurrentStory === void 0 ? void 0 : _useCurrentStory.argTypes) || {};
437}
\No newline at end of file