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.symbol.iterator.js");
|
10 |
|
11 | require("core-js/modules/es.array.slice.js");
|
12 |
|
13 | require("core-js/modules/es.array.from.js");
|
14 |
|
15 | require("core-js/modules/es.weak-map.js");
|
16 |
|
17 | require("core-js/modules/es.object.get-own-property-descriptor.js");
|
18 |
|
19 | Object.defineProperty(exports, "__esModule", {
|
20 | value: true
|
21 | });
|
22 | exports.Story = exports.getStoryProps = exports.getStoryId = exports.lookupStoryId = exports.storyBlockIdFromId = void 0;
|
23 |
|
24 | require("core-js/modules/es.function.name.js");
|
25 |
|
26 | require("core-js/modules/es.object.assign.js");
|
27 |
|
28 | require("core-js/modules/es.promise.js");
|
29 |
|
30 | require("core-js/modules/es.object.to-string.js");
|
31 |
|
32 | require("core-js/modules/es.string.iterator.js");
|
33 |
|
34 | require("core-js/modules/es.array.iterator.js");
|
35 |
|
36 | require("core-js/modules/web.dom-collections.iterator.js");
|
37 |
|
38 | require("core-js/modules/es.array.concat.js");
|
39 |
|
40 | var _react = _interopRequireWildcard(require("react"));
|
41 |
|
42 | var _react2 = require("@mdx-js/react");
|
43 |
|
44 | var _global = _interopRequireDefault(require("global"));
|
45 |
|
46 | var _components = require("@storybook/components");
|
47 |
|
48 | var _csf = require("@storybook/csf");
|
49 |
|
50 | var _addons = require("@storybook/addons");
|
51 |
|
52 | var _coreEvents = _interopRequireDefault(require("@storybook/core-events"));
|
53 |
|
54 | var _types = require("./types");
|
55 |
|
56 | var _DocsContext = require("./DocsContext");
|
57 |
|
58 | var _useStory = require("./useStory");
|
59 |
|
60 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
61 |
|
62 | function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
|
63 |
|
64 | 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; }
|
65 |
|
66 | function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
67 |
|
68 | 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."); }
|
69 |
|
70 | 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); }
|
71 |
|
72 | 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; }
|
73 |
|
74 | 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; }
|
75 |
|
76 | function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
77 |
|
78 | var storyBlockIdFromId = function storyBlockIdFromId(storyId) {
|
79 | return "story--".concat(storyId);
|
80 | };
|
81 |
|
82 | exports.storyBlockIdFromId = storyBlockIdFromId;
|
83 |
|
84 | var lookupStoryId = function lookupStoryId(storyName, _ref) {
|
85 | var mdxStoryNameToKey = _ref.mdxStoryNameToKey,
|
86 | mdxComponentAnnotations = _ref.mdxComponentAnnotations;
|
87 | return (0, _csf.toId)(mdxComponentAnnotations.id || mdxComponentAnnotations.title, (0, _csf.storyNameFromExport)(mdxStoryNameToKey[storyName]));
|
88 | };
|
89 |
|
90 | exports.lookupStoryId = lookupStoryId;
|
91 |
|
92 | var getStoryId = function getStoryId(props, context) {
|
93 | var _ref2 = props,
|
94 | id = _ref2.id;
|
95 | var _ref3 = props,
|
96 | name = _ref3.name;
|
97 | var inputId = id === _types.CURRENT_SELECTION ? context.id : id;
|
98 | return inputId || lookupStoryId(name, context);
|
99 | };
|
100 |
|
101 | exports.getStoryId = getStoryId;
|
102 |
|
103 | var getStoryProps = function getStoryProps(_ref4, story, context, onStoryFnCalled) {
|
104 | var height = _ref4.height,
|
105 | inline = _ref4.inline;
|
106 | var storyName = story.name,
|
107 | parameters = story.parameters;
|
108 | var _parameters$docs = parameters.docs,
|
109 | docs = _parameters$docs === void 0 ? {} : _parameters$docs;
|
110 |
|
111 | if (docs.disable) {
|
112 | return null;
|
113 | }
|
114 |
|
115 |
|
116 | var _docs$inlineStories = docs.inlineStories,
|
117 | inlineStories = _docs$inlineStories === void 0 ? false : _docs$inlineStories,
|
118 | _docs$iframeHeight = docs.iframeHeight,
|
119 | iframeHeight = _docs$iframeHeight === void 0 ? 100 : _docs$iframeHeight,
|
120 | prepareForInline = docs.prepareForInline;
|
121 | var storyIsInline = typeof inline === 'boolean' ? inline : inlineStories;
|
122 |
|
123 | if (storyIsInline && !prepareForInline) {
|
124 | throw new Error("Story '".concat(storyName, "' is set to render inline, but no 'prepareForInline' function is implemented in your docs configuration!"));
|
125 | }
|
126 |
|
127 | var boundStoryFn = function boundStoryFn() {
|
128 | var storyResult = story.unboundStoryFn(Object.assign({}, context.getStoryContext(story), {
|
129 | loaded: {},
|
130 | abortSignal: undefined,
|
131 | canvasElement: undefined
|
132 | }));
|
133 |
|
134 |
|
135 |
|
136 |
|
137 | onStoryFnCalled();
|
138 | return storyResult;
|
139 | };
|
140 |
|
141 | return Object.assign({
|
142 | inline: storyIsInline,
|
143 | id: story.id,
|
144 | height: height || (storyIsInline ? undefined : iframeHeight),
|
145 | title: storyName
|
146 | }, storyIsInline && {
|
147 | parameters: parameters,
|
148 | storyFn: function storyFn() {
|
149 | return prepareForInline(boundStoryFn, context.getStoryContext(story));
|
150 | }
|
151 | });
|
152 | };
|
153 |
|
154 | exports.getStoryProps = getStoryProps;
|
155 |
|
156 | function makeGate() {
|
157 | var open;
|
158 | var gate = new Promise(function (r) {
|
159 | open = r;
|
160 | });
|
161 | return [gate, open];
|
162 | }
|
163 |
|
164 | var Story = function Story(props) {
|
165 | var context = (0, _react.useContext)(_DocsContext.DocsContext);
|
166 |
|
167 | var channel = _addons.addons.getChannel();
|
168 |
|
169 | var storyRef = (0, _react.useRef)();
|
170 | var storyId = getStoryId(props, context);
|
171 | var story = (0, _useStory.useStory)(storyId, context);
|
172 |
|
173 | var _useState = (0, _react.useState)(true),
|
174 | _useState2 = _slicedToArray(_useState, 2),
|
175 | showLoader = _useState2[0],
|
176 | setShowLoader = _useState2[1];
|
177 |
|
178 | (0, _react.useEffect)(function () {
|
179 | var cleanup;
|
180 |
|
181 | if (story && storyRef.current) {
|
182 | var componentId = story.componentId,
|
183 | id = story.id,
|
184 | title = story.title,
|
185 | name = story.name;
|
186 | var renderContext = {
|
187 | componentId: componentId,
|
188 | title: title,
|
189 | kind: title,
|
190 | id: id,
|
191 | name: name,
|
192 | story: name,
|
193 |
|
194 | showMain: function showMain() {},
|
195 | showError: function showError() {},
|
196 | showException: function showException() {}
|
197 | };
|
198 | cleanup = context.renderStoryToElement({
|
199 | story: story,
|
200 | renderContext: renderContext,
|
201 | element: storyRef.current,
|
202 | viewMode: 'docs'
|
203 | });
|
204 | setShowLoader(false);
|
205 | }
|
206 |
|
207 | return function () {
|
208 | return cleanup && cleanup();
|
209 | };
|
210 | }, [story]);
|
211 |
|
212 | var _makeGate = makeGate(),
|
213 | _makeGate2 = _slicedToArray(_makeGate, 2),
|
214 | storyFnRan = _makeGate2[0],
|
215 | onStoryFnRan = _makeGate2[1];
|
216 |
|
217 | var _makeGate3 = makeGate(),
|
218 | _makeGate4 = _slicedToArray(_makeGate3, 2),
|
219 | rendered = _makeGate4[0],
|
220 | onRendered = _makeGate4[1];
|
221 |
|
222 | (0, _react.useEffect)(onRendered);
|
223 |
|
224 | if (!story) {
|
225 | return _react.default.createElement(_components.StorySkeleton, null);
|
226 | }
|
227 |
|
228 | var storyProps = getStoryProps(props, story, context, onStoryFnRan);
|
229 |
|
230 | if (!storyProps) {
|
231 | return null;
|
232 | }
|
233 |
|
234 | if (storyProps.inline) {
|
235 | var _global$FEATURES;
|
236 |
|
237 |
|
238 |
|
239 |
|
240 | if (!(_global.default !== null && _global.default !== void 0 && (_global$FEATURES = _global.default.FEATURES) !== null && _global$FEATURES !== void 0 && _global$FEATURES.modernInlineRender)) {
|
241 |
|
242 |
|
243 |
|
244 |
|
245 |
|
246 |
|
247 |
|
248 | Promise.all([storyFnRan, rendered]).then(function () {
|
249 | channel.emit(_coreEvents.default.STORY_RENDERED, storyId);
|
250 | });
|
251 | } else {
|
252 |
|
253 | var htmlContents = "<span></span>";
|
254 |
|
255 | var height = storyProps.height;
|
256 | return _react.default.createElement("div", {
|
257 | id: storyBlockIdFromId(story.id)
|
258 | }, _react.default.createElement(_react2.MDXProvider, {
|
259 | components: _components.resetComponents
|
260 | }, height ? _react.default.createElement("style", null, "#story--".concat(story.id, " { min-height: ").concat(height, "; transform: translateZ(0); overflow: auto }")) : null, showLoader && _react.default.createElement(_components.StorySkeleton, null), _react.default.createElement("div", {
|
261 | ref: storyRef,
|
262 | "data-name": story.name,
|
263 | dangerouslySetInnerHTML: {
|
264 | __html: htmlContents
|
265 | }
|
266 | })));
|
267 | }
|
268 | }
|
269 |
|
270 | return _react.default.createElement("div", {
|
271 | id: storyBlockIdFromId(story.id)
|
272 | }, _react.default.createElement(_react2.MDXProvider, {
|
273 | components: _components.resetComponents
|
274 | }, _react.default.createElement(_components.Story, storyProps)));
|
275 | };
|
276 |
|
277 | exports.Story = Story;
|
278 | Story.defaultProps = {
|
279 | children: null,
|
280 | name: null
|
281 | }; |
\ | No newline at end of file |