1 | "use strict";
|
2 |
|
3 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
4 |
|
5 | Object.defineProperty(exports, "__esModule", {
|
6 | value: true
|
7 | });
|
8 | exports.default = void 0;
|
9 | exports.generateComponentExamples = generateComponentExamples;
|
10 |
|
11 | var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
12 |
|
13 | var _nanoid = require("nanoid");
|
14 |
|
15 | var _generatePropCombinations = require("./generatePropCombinations");
|
16 |
|
17 | var _react = _interopRequireDefault(require("react"));
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 |
|
24 |
|
25 |
|
26 |
|
27 |
|
28 |
|
29 |
|
30 |
|
31 |
|
32 |
|
33 |
|
34 |
|
35 |
|
36 |
|
37 |
|
38 |
|
39 |
|
40 |
|
41 |
|
42 |
|
43 |
|
44 |
|
45 |
|
46 |
|
47 |
|
48 |
|
49 |
|
50 |
|
51 |
|
52 | function generateComponentExamples(Component, config) {
|
53 | const sectionProp = config.sectionProp,
|
54 | excludeProps = config.excludeProps,
|
55 | filter = config.filter;
|
56 | const PROPS_CACHE = [];
|
57 | const sections = [];
|
58 | const maxExamples = config.maxExamples ? config.maxExamples : 500;
|
59 | let exampleCount = 0;
|
60 | let propValues = {};
|
61 |
|
62 | const getParameters = page => {
|
63 | const examples = page.examples;
|
64 | const index = page.index;
|
65 | let parameters = {};
|
66 |
|
67 | if (typeof config.getParameters === 'function') {
|
68 | parameters = { ...config.getParameters({
|
69 | examples,
|
70 | index
|
71 | })
|
72 | };
|
73 | }
|
74 |
|
75 | return parameters;
|
76 | };
|
77 | |
78 |
|
79 |
|
80 |
|
81 |
|
82 |
|
83 |
|
84 | const mergeComponentPropsFromConfig = props => {
|
85 | let componentProps = props;
|
86 |
|
87 |
|
88 |
|
89 |
|
90 |
|
91 |
|
92 |
|
93 | if (typeof config.getComponentProps === 'function') {
|
94 | componentProps = { ...componentProps,
|
95 | ...config.getComponentProps(props)
|
96 | };
|
97 | }
|
98 |
|
99 | return componentProps;
|
100 | };
|
101 |
|
102 | const getExampleProps = props => {
|
103 | let exampleProps = {};
|
104 |
|
105 | if (typeof config.getExampleProps === 'function') {
|
106 | exampleProps = { ...config.getExampleProps(props)
|
107 | };
|
108 | }
|
109 |
|
110 | return exampleProps;
|
111 | };
|
112 |
|
113 | const addPage = section => {
|
114 | const page = {
|
115 | examples: [],
|
116 | index: section.pages.length
|
117 | };
|
118 | section.pages.push(page);
|
119 | return page;
|
120 | };
|
121 |
|
122 | const addExample = (sectionName, example) => {
|
123 | let section = sections.find(section => section.sectionName === sectionName);
|
124 |
|
125 | if (!section) {
|
126 | section = {
|
127 | sectionName: sectionName,
|
128 | propName: sectionProp,
|
129 | propValue: sectionName,
|
130 | pages: []
|
131 | };
|
132 | sections.push(section);
|
133 | }
|
134 |
|
135 | let page = section.pages[section.pages.length - 1];
|
136 | let maxExamplesPerPage = config.maxExamplesPerPage;
|
137 |
|
138 | if (typeof maxExamplesPerPage === 'function') {
|
139 | maxExamplesPerPage = maxExamplesPerPage(sectionName);
|
140 | }
|
141 |
|
142 | if (!page) {
|
143 | page = addPage(section);
|
144 | } else if (maxExamplesPerPage && page.examples.length % maxExamplesPerPage === 0 && page.examples.length > 0) {
|
145 | page = addPage(section);
|
146 | }
|
147 |
|
148 | page.examples.push(example);
|
149 | };
|
150 |
|
151 |
|
152 | const fastSerialize = props => {
|
153 | const strArr = [];
|
154 | objToString(props, strArr);
|
155 | return strArr.join('');
|
156 | };
|
157 |
|
158 | const objToString = (currObject, currString) => {
|
159 | if (!currObject) {
|
160 | return;
|
161 | }
|
162 |
|
163 | if ( _react.default.isValidElement(currObject)) {
|
164 | currString.push(JSON.stringify(currObject));
|
165 | } else if (typeof currObject === 'object') {
|
166 | for (const _ref of Object.entries(currObject)) {
|
167 | var _ref2 = (0, _slicedToArray2.default)(_ref, 2);
|
168 |
|
169 | const key = _ref2[0];
|
170 | const value = _ref2[1];
|
171 | currString.push(key);
|
172 | objToString(value, currString);
|
173 | }
|
174 | } else {
|
175 | currString.push(currObject);
|
176 | }
|
177 | };
|
178 |
|
179 | const maybeAddExample = props => {
|
180 | const componentProps = mergeComponentPropsFromConfig(props);
|
181 | const ignore = typeof filter === 'function' ? filter(componentProps) : false;
|
182 |
|
183 | if (ignore) {
|
184 | return;
|
185 | }
|
186 |
|
187 | const propsString = fastSerialize(componentProps);
|
188 |
|
189 | if (!PROPS_CACHE.includes(propsString)) {
|
190 | const key = (0, _nanoid.nanoid)();
|
191 | const exampleProps = getExampleProps(props);
|
192 | exampleCount++;
|
193 |
|
194 | if (exampleCount < maxExamples) {
|
195 | PROPS_CACHE.push(propsString);
|
196 | let sectionName = 'Examples';
|
197 |
|
198 | if (sectionProp && componentProps[sectionProp]) {
|
199 | sectionName = componentProps[sectionProp];
|
200 | }
|
201 |
|
202 | addExample(sectionName, {
|
203 | Component,
|
204 | componentProps,
|
205 | exampleProps,
|
206 | key
|
207 | });
|
208 | }
|
209 | }
|
210 | };
|
211 |
|
212 | if (isEmpty(config.propValues)) {
|
213 | maybeAddExample({});
|
214 | } else {
|
215 | if (Array.isArray(excludeProps)) {
|
216 | ;
|
217 | Object.keys(config.propValues).forEach(propName => {
|
218 | if (!excludeProps.includes(propName)) {
|
219 | propValues[propName] = config.propValues[propName];
|
220 | }
|
221 | });
|
222 | } else {
|
223 | propValues = config.propValues;
|
224 | }
|
225 |
|
226 |
|
227 | console.info(`Generating examples for ${Component.displayName} (${Object.keys(propValues).length} props):`, propValues);
|
228 |
|
229 |
|
230 | const combos = (0, _generatePropCombinations.generatePropCombinations)(propValues).filter(Boolean);
|
231 | let index = 0;
|
232 |
|
233 | while (index < combos.length && exampleCount < maxExamples) {
|
234 | const combo = combos[index];
|
235 |
|
236 | if (combo) {
|
237 | maybeAddExample(combo);
|
238 | index++;
|
239 | }
|
240 | }
|
241 | }
|
242 |
|
243 | if (exampleCount >= maxExamples) {
|
244 | console.error(`Too many examples for ${Component.displayName}! Add a filter to the config.`);
|
245 | }
|
246 |
|
247 |
|
248 | console.info(`Generated ${exampleCount} examples for ${Component.displayName}`);
|
249 | sections.forEach(_ref3 => {
|
250 | let pages = _ref3.pages;
|
251 | pages.forEach(page => {
|
252 |
|
253 | page.parameters = getParameters(page);
|
254 | });
|
255 | });
|
256 | return sections;
|
257 | }
|
258 |
|
259 | function isEmpty(obj) {
|
260 | if (typeof obj !== 'object') return true;
|
261 |
|
262 | for (const key in obj) {
|
263 | if (Object.hasOwnProperty.call(obj, key)) return false;
|
264 | }
|
265 |
|
266 | return true;
|
267 | }
|
268 |
|
269 | var _default = generateComponentExamples;
|
270 | exports.default = _default; |
\ | No newline at end of file |