@zohodesk/react-cli 0.0.1-exp.175.1 → 0.0.1-exp.176.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (250) hide show
  1. package/.eslintignore +7 -7
  2. package/.eslintrc.js +180 -180
  3. package/.prettierrc +6 -6
  4. package/README.md +1025 -1028
  5. package/bin/cli.js +482 -482
  6. package/cert/Tsicsezwild-22-23.crt +37 -37
  7. package/cert/Tsicsezwild-22-23.key +27 -27
  8. package/docs/CustomChunks.md +26 -26
  9. package/docs/DevStart.md +18 -18
  10. package/docs/HoverActive.md +12 -12
  11. package/docs/InstallNode.md +28 -28
  12. package/docs/SelectorWeight.md +6 -0
  13. package/docs/TODOS.md +10 -10
  14. package/docs/ValueReplacer.md +60 -60
  15. package/docs/VariableConversion.md +719 -678
  16. package/docs/warnings_while_install.txt +35 -35
  17. package/files/eslintrc.js +62 -62
  18. package/files/prettierrc.js +3 -3
  19. package/lib/babel/cmjs-plugins-presets.js +4 -0
  20. package/lib/babel/es-plugins-presets.js +4 -0
  21. package/lib/common/getEntries.js +10 -0
  22. package/lib/common/getPublicPathConfig.js +6 -0
  23. package/lib/common/index.js +5 -0
  24. package/lib/common/splitChunks.js +13 -2
  25. package/lib/common/sslcertUpdater.js +17 -6
  26. package/lib/common/templateParameters.js +2 -0
  27. package/lib/common/testPattern.js +21 -10
  28. package/lib/common/valueReplacer.js +15 -0
  29. package/lib/configs/jest.config.js +9 -0
  30. package/lib/configs/libAlias.js +2 -4
  31. package/lib/configs/webpack.component.umd.config.js +5 -0
  32. package/lib/configs/webpack.css.umd.config.js +13 -5
  33. package/lib/configs/webpack.dev.config.js +36 -2
  34. package/lib/configs/webpack.docs.config.js +21 -1
  35. package/lib/configs/webpack.impact.config.js +19 -1
  36. package/lib/configs/webpack.prod.config.js +37 -3
  37. package/lib/hooks/docsProptypeHook.js +7 -3
  38. package/lib/jest/commitedFilesResult.js +45 -3
  39. package/lib/jest/coverageCollector.js +11 -0
  40. package/lib/jest/jsonMaker.js +6 -0
  41. package/lib/jest/preProcessors/cssPreprocessor.js +8 -0
  42. package/lib/jest/preProcessors/jsPreprocessor.js +2 -0
  43. package/lib/jest/preProcessors/otherFilesPreprocessor.js +3 -0
  44. package/lib/jest/result.js +22 -0
  45. package/lib/jest/run.js +17 -6
  46. package/lib/jest/setup.js +57 -5
  47. package/lib/loaderUtils/configsAssetsLoaders.js +44 -34
  48. package/lib/loaderUtils/getCSSLoaders.js +35 -20
  49. package/lib/loaderUtils/getDevJsLoaders.js +8 -0
  50. package/lib/loaderUtils/index.js +3 -0
  51. package/lib/loaderUtils/windowsModification.js +11 -0
  52. package/lib/loaders/docsLoader.js +7 -0
  53. package/lib/loaders/docsPropsLoader.js +7 -3
  54. package/lib/loaders/fileBountryLoader.js +2 -0
  55. package/lib/loaders/fileLoader.js +22 -11
  56. package/lib/loaders/scriptInstrumentLoader.js +13 -5
  57. package/lib/loaders/selectorMappingLoader.js +25 -7
  58. package/lib/loaders/workerLoader.js +29 -13
  59. package/lib/middlewares/HMRMiddleware.js +26 -13
  60. package/lib/middlewares/SSTMiddleware.js +3 -0
  61. package/lib/pluginUtils/configHtmlWebpackPlugins.js +9 -3
  62. package/lib/pluginUtils/getDevPlugins.js +68 -22
  63. package/lib/pluginUtils/getDocsPlugins.js +10 -1
  64. package/lib/pluginUtils/getLibraryImactPlugins.js +5 -4
  65. package/lib/pluginUtils/getLibraryPlugins.js +5 -0
  66. package/lib/pluginUtils/getProdPlugins.js +77 -28
  67. package/lib/pluginUtils/getServerPlugins.js +5 -0
  68. package/lib/pluginUtils/getUMDCSSPlugins.js +7 -0
  69. package/lib/pluginUtils/getUMDComponentPlugins.js +7 -0
  70. package/lib/pluginUtils/index.js +8 -0
  71. package/lib/plugins/CdnChangePlugin.js +14 -0
  72. package/lib/plugins/CleanupStatsPlugin.js +5 -0
  73. package/lib/plugins/EFCPlugin.js +34 -23
  74. package/lib/plugins/EFCPlugin.md +6 -6
  75. package/lib/plugins/EFCTemplatePlugin.js +32 -23
  76. package/lib/plugins/I18NInjectIntoIndexPlugin.js +38 -12
  77. package/lib/plugins/I18nSplitPlugin/I18nDebugPlugin.js +17 -12
  78. package/lib/plugins/I18nSplitPlugin/I18nDependency.js +10 -4
  79. package/lib/plugins/I18nSplitPlugin/I18nDownlodLogic.js +77 -46
  80. package/lib/plugins/I18nSplitPlugin/I18nFilesEmitter.js +59 -44
  81. package/lib/plugins/I18nSplitPlugin/I18nKeysIdentifer.js +30 -21
  82. package/lib/plugins/I18nSplitPlugin/I18nSplit.md +95 -95
  83. package/lib/plugins/I18nSplitPlugin/README.md +25 -25
  84. package/lib/plugins/I18nSplitPlugin/index.js +80 -70
  85. package/lib/plugins/I18nSplitPlugin/utils/collectI18nKeys.js +12 -2
  86. package/lib/plugins/I18nSplitPlugin/utils/getI18nFileUrlPathTemplate.js +1 -0
  87. package/lib/plugins/I18nSplitPlugin/utils/getI18nKeysFormModules.js +5 -0
  88. package/lib/plugins/I18nSplitPlugin/utils/hashUtils.js +6 -0
  89. package/lib/plugins/I18nSplitPlugin/utils/index.js +4 -0
  90. package/lib/plugins/I18nSplitPlugin/utils/propertiesUtils.js +20 -2
  91. package/lib/plugins/ManifestPlugin.js +17 -0
  92. package/lib/plugins/ModuleStatsPlugin.js +23 -0
  93. package/lib/plugins/OptimizeJSPlugin.js +7 -0
  94. package/lib/plugins/PublicPathCallbackPlugin.js +10 -0
  95. package/lib/plugins/PublicPathChangePlugin.js +36 -4
  96. package/lib/plugins/ReportGeneratePlugin.js +30 -4
  97. package/lib/plugins/RequireVariablePublicPlugin.js +6 -0
  98. package/lib/plugins/ResourceHintsPlugin.js +27 -20
  99. package/lib/plugins/RtlSplitPlugin/OverwriteCssPathForRTL.js +17 -12
  100. package/lib/plugins/RtlSplitPlugin/RtlCssPlugin.js +22 -15
  101. package/lib/plugins/RtlSplitPlugin/RtrSplit.md +30 -30
  102. package/lib/plugins/RtlSplitPlugin/replaceCssDirTemplate.js +5 -2
  103. package/lib/plugins/ScriptInstrumentPlugin.js +7 -0
  104. package/lib/plugins/SelectorPlugin.js +97 -0
  105. package/lib/plugins/ServiceWorkerPlugin.js +29 -13
  106. package/lib/plugins/ShadowDOMSupportPlugin.js +40 -3
  107. package/lib/plugins/SourceMapHookPlugin.js +9 -0
  108. package/lib/plugins/TPHashMappingPlugin.js +19 -5
  109. package/lib/plugins/UglifyCSSPlugin.js +9 -0
  110. package/lib/plugins/UnusedFilesFindPlugin.js +35 -2
  111. package/lib/plugins/VariableConversionCollector.js +322 -0
  112. package/lib/plugins/composeCommonPlugin.js +30 -0
  113. package/lib/plugins/index.js +19 -0
  114. package/lib/plugins/libraryImpactPlugin.js +32 -0
  115. package/lib/plugins/webpackwatchrunplugin.js +5 -0
  116. package/lib/postcss-plugins/ExcludePlugin.js +4 -0
  117. package/lib/postcss-plugins/RTLSplitPlugin.js +37 -24
  118. package/lib/postcss-plugins/ValueReplacer.js +6 -9
  119. package/lib/postcss-plugins/__test__/hoverActivePlugin.spec.js +3 -0
  120. package/lib/postcss-plugins/__test__/test1Input.css +38 -38
  121. package/lib/postcss-plugins/__test__/test1Output.css +38 -38
  122. package/lib/postcss-plugins/hoverActivePlugin.js +69 -33
  123. package/lib/postcss-plugins/variableModificationPlugin/ErrorHandler.js +42 -13
  124. package/lib/postcss-plugins/variableModificationPlugin/index.js +216 -141
  125. package/lib/postcss-plugins/variableModifier.js +20 -13
  126. package/lib/schemas/index.js +23 -4
  127. package/lib/servers/clusterHubServer.js +10 -0
  128. package/lib/servers/devBuild.js +24 -13
  129. package/lib/servers/docsServer.js +2 -0
  130. package/lib/servers/docsServerCore.js +21 -0
  131. package/lib/servers/getCliPath.js +9 -0
  132. package/lib/servers/helpServer.js +5 -0
  133. package/lib/servers/httpsOptions.js +4 -0
  134. package/lib/servers/impactServer.js +34 -2
  135. package/lib/servers/mockserver.js +9 -0
  136. package/lib/servers/nowatchserver.js +34 -12
  137. package/lib/servers/scrServer.js +20 -13
  138. package/lib/servers/server.js +35 -7
  139. package/lib/servers/ssServer.js +16 -0
  140. package/lib/sh/pre-commit.sh +34 -34
  141. package/lib/sh/reportPublish.sh +45 -45
  142. package/lib/templates/CoverageScriptTemplate.js +14 -0
  143. package/lib/templates/WMSTemplate.js +12 -6
  144. package/lib/utils/babelPresets.js +2 -0
  145. package/lib/utils/buildstats.html +148 -148
  146. package/lib/utils/clean.js +8 -2
  147. package/lib/utils/copy.js +6 -0
  148. package/lib/utils/copyTimezones.js +8 -0
  149. package/lib/utils/createEventStream.js +4 -0
  150. package/lib/utils/cssClassNameGenerate.js +19 -3
  151. package/lib/utils/cssURLReplacer.js +25 -0
  152. package/lib/utils/dependencyPostPublish.js +9 -0
  153. package/lib/utils/fileUtils.js +26 -0
  154. package/lib/utils/folderIterator.js +10 -0
  155. package/lib/utils/getComponents.js +21 -0
  156. package/lib/utils/getCurrentBranch.js +5 -0
  157. package/lib/utils/getDependenciesImpactList.js +21 -0
  158. package/lib/utils/getHash.js +7 -0
  159. package/lib/utils/getIp.js +2 -0
  160. package/lib/utils/getOptions.js +39 -14
  161. package/lib/utils/getServerURL.js +7 -0
  162. package/lib/utils/index.js +47 -2
  163. package/lib/utils/init.js +1 -0
  164. package/lib/utils/initPreCommitHook.js +29 -6
  165. package/lib/utils/jsonHelper.js +19 -2
  166. package/lib/utils/libraryImpactConfig.js +2 -0
  167. package/lib/utils/lint/addScripts.js +5 -2
  168. package/lib/utils/lint/checkExistingConfig.js +12 -3
  169. package/lib/utils/lint/copyConfigs.js +3 -0
  170. package/lib/utils/lint/index.js +9 -0
  171. package/lib/utils/lint/lintScripts.js +1 -0
  172. package/lib/utils/lint/lintSetup.js +4 -3
  173. package/lib/utils/lint/lintStagedPreCommitHook.js +1 -0
  174. package/lib/utils/lint/question.js +7 -0
  175. package/lib/utils/lintReporter.js +20 -0
  176. package/lib/utils/mailSender.js +7 -0
  177. package/lib/utils/pullOrigin.js +4 -0
  178. package/lib/utils/reinstallDependencies.js +28 -0
  179. package/lib/utils/removeAttributes.js +7 -0
  180. package/lib/utils/repoClone.js +27 -2
  181. package/lib/utils/request.js +12 -0
  182. package/lib/utils/resultSchema.json +73 -73
  183. package/lib/utils/rtl.js +16 -4
  184. package/lib/utils/setEnvVariables.js +2 -0
  185. package/lib/utils/ssTestHack.js +10 -0
  186. package/lib/utils/switchBranch.js +4 -0
  187. package/lib/utils/urlConcat.js +4 -0
  188. package/lib/utils/useExitCleanup.js +10 -9
  189. package/npm8.md +9 -9
  190. package/package.json +146 -146
  191. package/postpublish.js +6 -6
  192. package/templates/app/.eslintrc.js +140 -140
  193. package/templates/app/README.md +12 -12
  194. package/templates/app/app/index.html +24 -24
  195. package/templates/app/app/properties/ApplicationResources_en_US.properties +1 -1
  196. package/templates/app/app/properties/i18nkeys.json +3 -3
  197. package/templates/app/docs/all.html +69 -69
  198. package/templates/app/mockapi/index.js +18 -18
  199. package/templates/app/package.json +37 -37
  200. package/templates/app/src/actions/SampleActions/index.js +37 -37
  201. package/templates/app/src/actions/index.js +65 -65
  202. package/templates/app/src/appUrls.js +19 -19
  203. package/templates/app/src/components/Alert/Alert.js +134 -134
  204. package/templates/app/src/components/Alert/Alert.module.css +79 -79
  205. package/templates/app/src/components/FreezeLayer/FreezeLayer.css +37 -37
  206. package/templates/app/src/components/FreezeLayer/FreezeLayer.js +84 -84
  207. package/templates/app/src/components/Sample/Sample.module.css +11 -11
  208. package/templates/app/src/components/Sample/SampleList.js +61 -61
  209. package/templates/app/src/components/Slider/Slider.css +41 -41
  210. package/templates/app/src/components/Slider/Slider.js +55 -55
  211. package/templates/app/src/containers/AlertContainer/index.js +15 -15
  212. package/templates/app/src/containers/AppContainer/index.js +96 -96
  213. package/templates/app/src/containers/AppContainer/index.module.css +27 -27
  214. package/templates/app/src/containers/CustomMatch/index.js +65 -65
  215. package/templates/app/src/containers/DevTools/index.js +10 -10
  216. package/templates/app/src/containers/Header/index.js +67 -67
  217. package/templates/app/src/containers/Header/index.module.css +43 -43
  218. package/templates/app/src/containers/Redirect/index.js +63 -63
  219. package/templates/app/src/containers/Redirector/index.js +47 -47
  220. package/templates/app/src/containers/SampleListContainer/ListContainer.js +42 -42
  221. package/templates/app/src/containers/SampleListContainer/ListContainer.module.css +3 -3
  222. package/templates/app/src/historyChange.js +5 -5
  223. package/templates/app/src/index.html +10 -10
  224. package/templates/app/src/index.js +24 -24
  225. package/templates/app/src/middleware/PromiseMiddleware.js +59 -59
  226. package/templates/app/src/reducers/alertData.js +11 -11
  227. package/templates/app/src/reducers/index.js +6 -6
  228. package/templates/app/src/reducers/samples.js +19 -19
  229. package/templates/app/src/store/configureStore.dev.js +51 -51
  230. package/templates/app/src/store/configureStore.js +5 -5
  231. package/templates/app/src/store/configureStore.prod.js +26 -26
  232. package/templates/app/src/util/Common.js +5 -5
  233. package/templates/app/src/util/RequestAPI.js +132 -132
  234. package/templates/docs/all.html +249 -249
  235. package/templates/docs/component.html +178 -178
  236. package/templates/docs/components.html +221 -221
  237. package/templates/docs/css/b.min.css +6 -6
  238. package/templates/docs/css/component.css +42 -42
  239. package/templates/docs/css/componentTest.css +6 -6
  240. package/templates/docs/css/hopscotch.css +585 -585
  241. package/templates/docs/css/style.css +1022 -1022
  242. package/templates/docs/impactReportTemplate.html +154 -154
  243. package/templates/docs/index.html +1501 -1501
  244. package/templates/docs/js/active-line.js +72 -72
  245. package/templates/docs/js/b.min.js +7 -7
  246. package/templates/docs/js/codemirror.js +9680 -9680
  247. package/templates/docs/js/designTokens.js +334 -334
  248. package/templates/docs/js/j.min.js +4 -4
  249. package/templates/docs/js/javascript.js +874 -874
  250. package/templates/docs/js/matchbrackets.js +145 -145
package/templates/docs/all.html CHANGED
@@ -1,249 +1,249 @@
1
- <!DOCTYPE html>
2
- <html dir="ltr">
3
- <head>
4
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
5
- <link rel="stylesheet" href="./css/b.min.css">
6
- <style>
7
- body {
8
- position: relative;
9
- }
10
- ul.nav-pills {
11
- top: 20px;
12
- position: fixed;
13
- }
14
- p{
15
- font-size: 18px;
16
- }
17
- .container{
18
- width:100%;
19
- background-color: #473425;
20
- }
21
- .source,.html{
22
- cursor:pointer;
23
- margin:10px;
24
- color:blue;
25
- font-size:15px;
26
- }
27
- #componentInfo{
28
- background:white;
29
- }
30
- .component{
31
- padding:30px 15px;
32
- border-bottom: 2px solid #dddbda;
33
- }
34
- </style>
35
- <script src="./js/j.min.js"></script>
36
- <script src="./js/b.min.js"></script>
37
- </head>
38
- <body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
39
-
40
- <div class="container">
41
- <div class="row">
42
- <nav class="col-sm-2" id="myScrollspy">
43
-
44
-
45
-
46
- <ul class="nav nav-pills nav-stacked" id="componentMenu">
47
-
48
- </ul>
49
-
50
- </nav>
51
- <div class="col-sm-10" id="componentInfo">
52
-
53
- </div>
54
- </div>
55
- </div>
56
-
57
-
58
-
59
-
60
- <script src="/docs/js/vendor.js" ></script>
61
- <script src="/docs/js/main.js" ></script>
62
-
63
- <script>
64
- function toggle(id, type) {
65
- if (type == 'source') {
66
- document.getElementById(id + '_html').style.display = 'none';
67
- } else {
68
- document.getElementById(id + '_source').style.display = 'none';
69
- }
70
- var x = document.getElementById(id + '_' + type);
71
- if (x.style.display === 'none') {
72
- x.style.display = 'block';
73
- } else {
74
- x.style.display = 'none';
75
- }
76
- }
77
- function process(str) {
78
- var div = document.createElement('div');
79
- div.innerHTML = str.trim();
80
-
81
- return format(div, 0).innerHTML;
82
- }
83
-
84
- function format(node, level) {
85
- var indentBefore = new Array(level++ + 1).join(' '),
86
- indentAfter = new Array(level - 1).join(' '),
87
- textNode;
88
-
89
- for (var i = 0; i < node.children.length; i++) {
90
- textNode = document.createTextNode('\n' + indentBefore);
91
- node.insertBefore(textNode, node.children[i]);
92
-
93
- format(node.children[i], level);
94
-
95
- if (node.lastElementChild == node.children[i]) {
96
- textNode = document.createTextNode('\n' + indentAfter);
97
- node.appendChild(textNode);
98
- }
99
- }
100
-
101
- return node;
102
- }
103
- var test = 'test';
104
- var ReactDOM = Component.ReactDOM;
105
- var React = Component.React;
106
- var renderToStaticMarkup = Component.renderToStaticMarkup;
107
-
108
- // class RenderComponent extends React.Component {
109
- // constructor(props) {
110
- // super(props);
111
- // }
112
- // render() {
113
- // var { Components } = this.props;
114
- //
115
- // return (
116
- // <div>
117
- // {Object.keys(Components).map(ComponentName => {
118
- // if (
119
- // ComponentName == 'React' ||
120
- // ComponentName == 'ReactDOM' ||
121
- // ComponentName.indexOf('__') == -1
122
- // ) {
123
- // return 'test';
124
- // }
125
- //
126
- // var Component = Components[ComponentName];
127
- // console.dir(Component);
128
- //
129
- // return (
130
- // <div>
131
- // <div><Component /></div>
132
- // <div>{ComponentName}</div>
133
- // </div>
134
- // );
135
- // })}
136
- // </div>
137
- // );
138
- // }
139
- // }
140
-
141
- var baseComponent = {};
142
- var baseComponentState = {};
143
- Object.keys(Component).forEach(c => {
144
- var componentObj = Component[c];
145
- if (c.indexOf('__') != -1) {
146
- if (baseComponentState[c.split('__')[0]]) {
147
- baseComponentState[c.split('__')[0]].push(c);
148
- } else {
149
- baseComponentState[c.split('__')[0]] = [c];
150
- }
151
- } else if (
152
- componentObj.docs &&
153
- componentObj.docs.external &&
154
- (componentObj.docs.componentGroup == 'Atom' ||
155
- componentObj.docs.componentGroup == 'Molecule' ||
156
- componentObj.docs.componentGroup == 'Organism')
157
- ) {
158
- baseComponent[c] = componentObj;
159
- }
160
- });
161
- console.log(baseComponent);
162
- console.log(baseComponentState);
163
- var str = Object.keys(baseComponent)
164
- .sort()
165
- .reduce((result, componentKey) => {
166
- return `${result}<li><a href="#${componentKey}" class="menuItem">${componentKey}</a></li>`;
167
- }, '');
168
-
169
- var getComponentState = componentKey => {
170
- var result = '';
171
- baseComponentState[componentKey].forEach(ckey => {
172
- result += `<div><span onClick="toggle('${ckey}','source')" class="source">Source</span><span onClick="toggle('${ckey}',
173
- 'html')" class="html">html</span><pre id="${ckey +
174
- '_source'}" style="display:none"></pre><pre id="${ckey +
175
- '_html'}" style="display:none"></pre><div id="${ckey}"></div></div>`;
176
- setTimeout(() => {
177
- ReactDOM.render(
178
- React.createElement(Component[ckey]),
179
- document.getElementById(ckey)
180
- );
181
- document.getElementById(ckey + '_source').innerText =
182
- Component[ckey].docs.source;
183
- document.getElementById(ckey + '_html').innerText = process(
184
- renderToStaticMarkup(React.createElement(Component[ckey]))
185
- );
186
- }, 100);
187
- });
188
- return result;
189
- };
190
- var componentInfo = Object.keys(baseComponent)
191
- .sort()
192
- .reduce((result, componentKey) => {
193
- return `${result}<div id="${componentKey}" class="component">
194
- <h1>${componentKey}</h1>
195
- <p>
196
- ${baseComponent[componentKey].docs.description || 'No description'}
197
- </p>
198
- <h4>PropTypes</h4>
199
- <table class="table table-striped">
200
- <tr><th>PropsName</th><th>type</th><th>isRequired</th></th>
201
- ${Object.keys(baseComponent[componentKey].propTypes).sort()
202
- .map(pKey => {
203
- var pObj = baseComponent[componentKey].propTypes[pKey];
204
- return `<tr>
205
- <td>
206
- ${pKey}
207
- </td>
208
-
209
- <td>
210
-
211
- ${pObj.hookType}
212
-
213
- </td><td>
214
-
215
- ${pObj.isRequired ? '' : 'true'}
216
-
217
- </td></tr>`;
218
- })
219
- .join('')}
220
- </table>
221
- <h4>State</h4>
222
- ${getComponentState(componentKey)}
223
- ${baseComponent[componentKey].docs.additionDescription ? `<h4>More Information about component</h4><p>${baseComponent[componentKey].docs.additionDescription}</p>`:""}
224
-
225
- </div>`;
226
- }, '');
227
-
228
- document.getElementById('componentMenu').innerHTML = str;
229
- document.getElementById('componentInfo').innerHTML = componentInfo;
230
- // var html = Object.keys(Component).reduce((res, cName) => {
231
- // return `${res} <div><div id="${cName}"></div><div>${cName}</div></div>`;
232
- // });
233
- // document.getElementById('react').innerHTML = html;
234
- // Object.keys(Component).forEach(cName => {
235
- // if (cName == 'React' || cName == 'ReactDOM') {
236
- // return;
237
- // }
238
- // var C = Component[cName];
239
- // try {
240
- // ReactDOM.render(<C />, document.getElementById(cName));
241
- // } catch (e) {
242
- // console.log('Error render', cName);
243
- // }
244
- // });
245
- </script>
246
-
247
-
248
- </body>
249
- </html>
1
+ <!DOCTYPE html>
2
+ <html dir="ltr">
3
+ <head>
4
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
5
+ <link rel="stylesheet" href="./css/b.min.css">
6
+ <style>
7
+ body {
8
+ position: relative;
9
+ }
10
+ ul.nav-pills {
11
+ top: 20px;
12
+ position: fixed;
13
+ }
14
+ p{
15
+ font-size: 18px;
16
+ }
17
+ .container{
18
+ width:100%;
19
+ background-color: #473425;
20
+ }
21
+ .source,.html{
22
+ cursor:pointer;
23
+ margin:10px;
24
+ color:blue;
25
+ font-size:15px;
26
+ }
27
+ #componentInfo{
28
+ background:white;
29
+ }
30
+ .component{
31
+ padding:30px 15px;
32
+ border-bottom: 2px solid #dddbda;
33
+ }
34
+ </style>
35
+ <script src="./js/j.min.js"></script>
36
+ <script src="./js/b.min.js"></script>
37
+ </head>
38
+ <body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
39
+
40
+ <div class="container">
41
+ <div class="row">
42
+ <nav class="col-sm-2" id="myScrollspy">
43
+
44
+
45
+
46
+ <ul class="nav nav-pills nav-stacked" id="componentMenu">
47
+
48
+ </ul>
49
+
50
+ </nav>
51
+ <div class="col-sm-10" id="componentInfo">
52
+
53
+ </div>
54
+ </div>
55
+ </div>
56
+
57
+
58
+
59
+
60
+ <script src="/docs/js/vendor.js" ></script>
61
+ <script src="/docs/js/main.js" ></script>
62
+
63
+ <script>
64
+ function toggle(id, type) {
65
+ if (type == 'source') {
66
+ document.getElementById(id + '_html').style.display = 'none';
67
+ } else {
68
+ document.getElementById(id + '_source').style.display = 'none';
69
+ }
70
+ var x = document.getElementById(id + '_' + type);
71
+ if (x.style.display === 'none') {
72
+ x.style.display = 'block';
73
+ } else {
74
+ x.style.display = 'none';
75
+ }
76
+ }
77
+ function process(str) {
78
+ var div = document.createElement('div');
79
+ div.innerHTML = str.trim();
80
+
81
+ return format(div, 0).innerHTML;
82
+ }
83
+
84
+ function format(node, level) {
85
+ var indentBefore = new Array(level++ + 1).join(' '),
86
+ indentAfter = new Array(level - 1).join(' '),
87
+ textNode;
88
+
89
+ for (var i = 0; i < node.children.length; i++) {
90
+ textNode = document.createTextNode('\n' + indentBefore);
91
+ node.insertBefore(textNode, node.children[i]);
92
+
93
+ format(node.children[i], level);
94
+
95
+ if (node.lastElementChild == node.children[i]) {
96
+ textNode = document.createTextNode('\n' + indentAfter);
97
+ node.appendChild(textNode);
98
+ }
99
+ }
100
+
101
+ return node;
102
+ }
103
+ var test = 'test';
104
+ var ReactDOM = Component.ReactDOM;
105
+ var React = Component.React;
106
+ var renderToStaticMarkup = Component.renderToStaticMarkup;
107
+
108
+ // class RenderComponent extends React.Component {
109
+ // constructor(props) {
110
+ // super(props);
111
+ // }
112
+ // render() {
113
+ // var { Components } = this.props;
114
+ //
115
+ // return (
116
+ // <div>
117
+ // {Object.keys(Components).map(ComponentName => {
118
+ // if (
119
+ // ComponentName == 'React' ||
120
+ // ComponentName == 'ReactDOM' ||
121
+ // ComponentName.indexOf('__') == -1
122
+ // ) {
123
+ // return 'test';
124
+ // }
125
+ //
126
+ // var Component = Components[ComponentName];
127
+ // console.dir(Component);
128
+ //
129
+ // return (
130
+ // <div>
131
+ // <div><Component /></div>
132
+ // <div>{ComponentName}</div>
133
+ // </div>
134
+ // );
135
+ // })}
136
+ // </div>
137
+ // );
138
+ // }
139
+ // }
140
+
141
+ var baseComponent = {};
142
+ var baseComponentState = {};
143
+ Object.keys(Component).forEach(c => {
144
+ var componentObj = Component[c];
145
+ if (c.indexOf('__') != -1) {
146
+ if (baseComponentState[c.split('__')[0]]) {
147
+ baseComponentState[c.split('__')[0]].push(c);
148
+ } else {
149
+ baseComponentState[c.split('__')[0]] = [c];
150
+ }
151
+ } else if (
152
+ componentObj.docs &&
153
+ componentObj.docs.external &&
154
+ (componentObj.docs.componentGroup == 'Atom' ||
155
+ componentObj.docs.componentGroup == 'Molecule' ||
156
+ componentObj.docs.componentGroup == 'Organism')
157
+ ) {
158
+ baseComponent[c] = componentObj;
159
+ }
160
+ });
161
+ console.log(baseComponent);
162
+ console.log(baseComponentState);
163
+ var str = Object.keys(baseComponent)
164
+ .sort()
165
+ .reduce((result, componentKey) => {
166
+ return `${result}<li><a href="#${componentKey}" class="menuItem">${componentKey}</a></li>`;
167
+ }, '');
168
+
169
+ var getComponentState = componentKey => {
170
+ var result = '';
171
+ baseComponentState[componentKey].forEach(ckey => {
172
+ result += `<div><span onClick="toggle('${ckey}','source')" class="source">Source</span><span onClick="toggle('${ckey}',
173
+ 'html')" class="html">html</span><pre id="${ckey +
174
+ '_source'}" style="display:none"></pre><pre id="${ckey +
175
+ '_html'}" style="display:none"></pre><div id="${ckey}"></div></div>`;
176
+ setTimeout(() => {
177
+ ReactDOM.render(
178
+ React.createElement(Component[ckey]),
179
+ document.getElementById(ckey)
180
+ );
181
+ document.getElementById(ckey + '_source').innerText =
182
+ Component[ckey].docs.source;
183
+ document.getElementById(ckey + '_html').innerText = process(
184
+ renderToStaticMarkup(React.createElement(Component[ckey]))
185
+ );
186
+ }, 100);
187
+ });
188
+ return result;
189
+ };
190
+ var componentInfo = Object.keys(baseComponent)
191
+ .sort()
192
+ .reduce((result, componentKey) => {
193
+ return `${result}<div id="${componentKey}" class="component">
194
+ <h1>${componentKey}</h1>
195
+ <p>
196
+ ${baseComponent[componentKey].docs.description || 'No description'}
197
+ </p>
198
+ <h4>PropTypes</h4>
199
+ <table class="table table-striped">
200
+ <tr><th>PropsName</th><th>type</th><th>isRequired</th></th>
201
+ ${Object.keys(baseComponent[componentKey].propTypes).sort()
202
+ .map(pKey => {
203
+ var pObj = baseComponent[componentKey].propTypes[pKey];
204
+ return `<tr>
205
+ <td>
206
+ ${pKey}
207
+ </td>
208
+
209
+ <td>
210
+
211
+ ${pObj.hookType}
212
+
213
+ </td><td>
214
+
215
+ ${pObj.isRequired ? '' : 'true'}
216
+
217
+ </td></tr>`;
218
+ })
219
+ .join('')}
220
+ </table>
221
+ <h4>State</h4>
222
+ ${getComponentState(componentKey)}
223
+ ${baseComponent[componentKey].docs.additionDescription ? `<h4>More Information about component</h4><p>${baseComponent[componentKey].docs.additionDescription}</p>`:""}
224
+
225
+ </div>`;
226
+ }, '');
227
+
228
+ document.getElementById('componentMenu').innerHTML = str;
229
+ document.getElementById('componentInfo').innerHTML = componentInfo;
230
+ // var html = Object.keys(Component).reduce((res, cName) => {
231
+ // return `${res} <div><div id="${cName}"></div><div>${cName}</div></div>`;
232
+ // });
233
+ // document.getElementById('react').innerHTML = html;
234
+ // Object.keys(Component).forEach(cName => {
235
+ // if (cName == 'React' || cName == 'ReactDOM') {
236
+ // return;
237
+ // }
238
+ // var C = Component[cName];
239
+ // try {
240
+ // ReactDOM.render(<C />, document.getElementById(cName));
241
+ // } catch (e) {
242
+ // console.log('Error render', cName);
243
+ // }
244
+ // });
245
+ </script>
246
+
247
+
248
+ </body>
249
+ </html>