npm - @zohodesk/react-cli - Versions diffs - 0.0.1-beta.16 → 0.0.1-beta.160 - Mend

@zohodesk/react-cli 0.0.1-beta.16 → 0.0.1-beta.160

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.

Files changed (226) hide show

package/.eslintignore +1 -0
package/.eslintrc.js +46 -3
package/CHANGELOG.md +5 -0
package/README.md +650 -0
package/bin/cli.js +134 -27
package/cert/cert.pem +37 -129
package/cert/key.pem +27 -27
package/cert/passphrase.pem +1 -0
package/files/eslintrc.js +62 -0
package/files/prettierrc.js +3 -0
package/lib/babel/cmjs-plugins-presets.js +16 -9
package/lib/babel/es-plugins-presets.js +26 -14
package/lib/common/getEntries.js +33 -24
package/lib/common/getPublicPathConfig.js +40 -0
package/lib/common/index.js +27 -13
package/lib/common/splitChunks.js +64 -26
package/lib/common/sslcertUpdater.js +59 -0
package/lib/common/templateParameters.js +25 -0
package/lib/configs/jest.config.js +18 -28
package/lib/configs/webpack.component.umd.config.js +31 -37
package/lib/configs/webpack.css.umd.config.js +44 -44
package/lib/configs/webpack.dev.config.js +113 -57
package/lib/configs/webpack.docs.config.js +104 -98
package/lib/configs/webpack.impact.config.js +116 -0
package/lib/configs/webpack.prod.config.js +154 -86
package/lib/hooks/docsProptypeHook.js +32 -38
package/lib/jest/commitedFilesResult.js +144 -71
package/lib/jest/coverageCollector.js +62 -29
package/lib/jest/jsonMaker.js +54 -0
package/lib/jest/preProcessors/cssPreprocessor.js +16 -18
package/lib/jest/preProcessors/jsPreprocessor.js +5 -6
package/lib/jest/preProcessors/otherFilesPreprocessor.js +5 -6
package/lib/jest/result.js +91 -41
package/lib/jest/run.js +74 -27
package/lib/jest/setup.js +103 -102
package/lib/loaderUtils/getCSSLoaders.js +77 -0
package/lib/loaderUtils/getDevJsLoaders.js +30 -23
package/lib/loaderUtils/index.js +14 -7
package/lib/loaders/docsLoader.js +15 -15
package/lib/loaders/docsPropsLoader.js +14 -17
package/lib/loaders/fileBountryLoader.js +17 -0
package/lib/loaders/fileLoader.js +47 -38
package/lib/loaders/scriptInstrumentLoader.js +21 -20
package/lib/loaders/selectorMappingLoader.js +75 -0
package/lib/loaders/workerLoader.js +136 -0
package/lib/middlewares/HMRMiddleware.js +59 -41
package/lib/middlewares/SSTMiddleware.js +21 -0
package/lib/pluginUtils/getDevPlugins.js +173 -26
package/lib/pluginUtils/getDocsPlugins.js +32 -17
package/lib/pluginUtils/getLibraryImactPlugins.js +23 -0
package/lib/pluginUtils/getLibraryPlugins.js +8 -10
package/lib/pluginUtils/getProdPlugins.js +238 -37
package/lib/pluginUtils/getServerPlugins.js +8 -11
package/lib/pluginUtils/getUMDCSSPlugins.js +11 -15
package/lib/pluginUtils/getUMDComponentPlugins.js +11 -15
package/lib/pluginUtils/index.js +36 -43
package/lib/plugins/CdnChangePlugin.js +77 -0
package/lib/plugins/CleanupStatsPlugin.js +28 -0
package/lib/plugins/EFCPlugin.js +211 -0
package/lib/plugins/EFCPlugin.md +6 -0
package/lib/plugins/I18NInjectIntoIndexPlugin.js +141 -0
package/lib/plugins/I18nSplitPlugin/I18nDebugPlugin.js +60 -0
package/lib/plugins/I18nSplitPlugin/I18nDependency.js +44 -0
package/lib/plugins/I18nSplitPlugin/I18nDownlodLogic.js +266 -0
package/lib/plugins/I18nSplitPlugin/I18nFilesEmitter.js +183 -0
package/lib/plugins/I18nSplitPlugin/I18nKeysIdentifer.js +100 -0
package/lib/plugins/I18nSplitPlugin/I18nSplit.md +86 -0
package/lib/plugins/I18nSplitPlugin/README.md +25 -0
package/lib/plugins/I18nSplitPlugin/index.js +185 -0
package/lib/plugins/I18nSplitPlugin/utils/collectI18nKeys.js +64 -0
package/lib/plugins/I18nSplitPlugin/utils/getI18nFileUrlPathTemplate.js +13 -0
package/lib/plugins/I18nSplitPlugin/utils/getI18nKeysFormModules.js +26 -0
package/lib/plugins/I18nSplitPlugin/utils/hashUtils.js +40 -0
package/lib/plugins/I18nSplitPlugin/utils/index.js +31 -0
package/lib/plugins/I18nSplitPlugin/utils/propertiesUtils.js +112 -0
package/lib/plugins/ManifestPlugin.js +52 -63
package/lib/plugins/ModuleStatsPlugin.js +98 -97
package/lib/plugins/OptimizeJSPlugin.js +24 -41
package/lib/plugins/PublicPathCallbackPlugin.js +63 -0
package/lib/plugins/PublicPathChangePlugin.js +187 -174
package/lib/plugins/ReportGeneratePlugin.js +181 -0
package/lib/plugins/RequireVariablePublicPlugin.js +30 -0
package/lib/plugins/ResourceHintsPlugin.js +53 -35
package/lib/plugins/RtlSplitPlugin/OverwriteCssPathForRTL.js +80 -0
package/lib/plugins/RtlSplitPlugin/RtlCssPlugin.js +82 -0
package/lib/plugins/RtlSplitPlugin/RtrSplit.md +30 -0
package/lib/plugins/RtlSplitPlugin/replaceCssDirTemplate.js +26 -0
package/lib/plugins/ScriptInstrumentPlugin.js +22 -37
package/lib/plugins/ServiceWorkerPlugin.js +107 -0
package/lib/plugins/ShadowDOMSupportPlugin.js +270 -0
package/lib/plugins/SourceMapHookPlugin.js +25 -31
package/lib/plugins/TPHashMappingPlugin.js +67 -0
package/lib/plugins/UglifyCSSPlugin.js +23 -30
package/lib/plugins/UnusedFilesFindPlugin.js +150 -97
package/lib/plugins/index.js +118 -55
package/lib/plugins/libraryImpactPlugin.js +190 -0
package/lib/plugins/webpackwatchrunplugin.js +26 -0
package/lib/postcss-plugins/ExcludeRTLPlugin.js +23 -0
package/lib/postcss-plugins/RTLSplitPlugin.js +138 -0
package/lib/schemas/index.js +463 -52
package/lib/servers/clusterHubServer.js +22 -26
package/lib/servers/docsServer.js +3 -5
package/lib/servers/docsServerCore.js +93 -85
package/lib/servers/helpServer.js +19 -21
package/lib/servers/httpsOptions.js +19 -0
package/lib/servers/impactServer.js +99 -92
package/lib/servers/mockserver.js +44 -0
package/lib/servers/nowatchserver.js +275 -0
package/lib/servers/scrServer.js +147 -0
package/lib/servers/server.js +118 -124
package/lib/servers/ssServer.js +107 -65
package/lib/sh/reportPublish.sh +16 -10
package/lib/templates/CoverageScriptTemplate.js +45 -18
package/lib/templates/WMSTemplate.js +17 -18
package/lib/templates/linterConstant.js +10 -0
package/lib/utils/babelPresets.js +12 -5
package/lib/utils/buildstats.html +148 -0
package/lib/utils/clean.js +12 -11
package/lib/utils/copy.js +13 -127
package/lib/utils/copyTimezones.js +21 -0
package/lib/utils/createEventStream.js +24 -19
package/lib/utils/cssClassNameGenerate.js +70 -0
package/lib/utils/cssURLReplacer.js +67 -54
package/lib/utils/dependencyPostPublish.js +42 -0
package/lib/utils/fileUtils.js +125 -0
package/lib/utils/folderIterator.js +47 -0
package/lib/utils/getComponents.js +126 -0
package/lib/utils/getCurrentBranch.js +11 -17
package/lib/utils/getDependenciesImpactList.js +151 -0
package/lib/utils/getHash.js +26 -0
package/lib/utils/getIp.js +20 -0
package/lib/utils/getOptions.js +55 -30
package/lib/utils/getServerURL.js +25 -8
package/lib/utils/index.js +259 -82
package/lib/utils/init.js +2 -2
package/lib/utils/initPreCommitHook.js +40 -31
package/lib/utils/jsonHelper.js +97 -0
package/lib/utils/libraryImpactConfig.js +63 -0
package/lib/utils/lint/addScripts.js +27 -0
package/lib/utils/lint/checkExistingConfig.js +67 -0
package/lib/utils/lint/copyConfigs.js +24 -0
package/lib/utils/lint/index.js +54 -0
package/lib/utils/lint/lintScripts.js +11 -0
package/lib/utils/lint/lintSetup.js +31 -0
package/lib/utils/lint/lintStagedPreCommitHook.js +7 -0
package/lib/utils/lint/question.js +30 -0
package/lib/utils/lintReporter.js +142 -0
package/lib/utils/mailSender.js +16 -25
package/lib/utils/pullOrigin.js +28 -0
package/lib/utils/reinstallDependencies.js +133 -0
package/lib/utils/removeAttributes.js +25 -23
package/lib/utils/repoClone.js +56 -63
package/lib/utils/request.js +64 -77
package/lib/utils/resultSchema.json +73 -0
package/lib/utils/rtl.js +42 -0
package/lib/utils/setEnvVariables.js +5 -6
package/lib/utils/ssTestHack.js +48 -0
package/lib/utils/switchBranch.js +28 -0
package/lib/utils/urlConcat.js +22 -0
package/package.json +92 -64
package/templates/app/.eslintrc.js +140 -0
package/templates/app/README.md +12 -12
package/templates/app/app/index.html +24 -8
package/templates/app/app/properties/ApplicationResources_en_US.properties +1 -1
package/templates/app/app/properties/i18nkeys.json +3 -3
package/templates/app/docs/all.html +69 -69
package/templates/app/mockapi/index.js +18 -13
package/templates/app/package.json +37 -17
package/templates/app/src/actions/SampleActions/index.js +37 -0
package/templates/app/src/actions/index.js +65 -0
package/templates/app/src/appUrls.js +19 -0
package/templates/app/src/components/Alert/Alert.js +134 -0
package/templates/app/src/components/Alert/Alert.module.css +79 -0
package/templates/app/src/components/FreezeLayer/FreezeLayer.css +37 -0
package/templates/app/src/components/FreezeLayer/FreezeLayer.js +84 -0
package/templates/app/src/components/Sample/Sample.module.css +11 -0
package/templates/app/src/components/Sample/SampleList.js +61 -0
package/templates/app/src/components/Slider/Slider.css +41 -0
package/templates/app/src/components/Slider/Slider.js +55 -0
package/templates/app/src/containers/AlertContainer/index.js +15 -0
package/templates/app/src/containers/AppContainer/index.js +96 -0
package/templates/app/src/containers/AppContainer/index.module.css +27 -0
package/templates/app/src/containers/CustomMatch/index.js +65 -0
package/templates/app/src/containers/DevTools/index.js +10 -0
package/templates/app/src/containers/Header/index.js +67 -0
package/templates/app/src/containers/Header/index.module.css +43 -0
package/templates/app/src/containers/Redirect/index.js +63 -0
package/templates/app/src/containers/Redirector/index.js +47 -0
package/templates/app/src/containers/SampleListContainer/ListContainer.js +42 -0
package/templates/app/src/containers/SampleListContainer/ListContainer.module.css +3 -0
package/templates/app/src/historyChange.js +5 -0
package/templates/app/src/index.html +10 -0
package/templates/app/src/index.js +24 -0
package/templates/app/src/middleware/PromiseMiddleware.js +59 -0
package/templates/app/src/reducers/alertData.js +11 -0
package/templates/app/src/reducers/index.js +6 -0
package/templates/app/src/reducers/samples.js +19 -0
package/templates/app/src/store/configureStore.dev.js +51 -0
package/templates/app/src/store/configureStore.js +5 -0
package/templates/app/src/store/configureStore.prod.js +26 -0
package/templates/app/src/util/Common.js +5 -0
package/templates/app/src/util/RequestAPI.js +132 -0
package/templates/appold/README.md +12 -0
package/templates/appold/app/index.html +8 -0
package/templates/appold/app/properties/ApplicationResources_en_US.properties +1 -0
package/templates/appold/app/properties/i18nkeys.json +3 -0
package/templates/appold/docs/all.html +69 -0
package/templates/appold/mockapi/index.js +13 -0
package/templates/{app → appold}/mockapi/tickets.json +0 -0
package/templates/appold/package.json +17 -0
package/templates/appold/src/components/Text/Text.css +0 -0
package/templates/appold/src/components/Text/Text.js +23 -0
package/templates/appold/src/components/Text/__tests__/Text.spec.js +30 -0
package/templates/appold/src/components/Text/docs/Text__default.docs.js +16 -0
package/templates/appold/src/components/docs.js +1 -0
package/templates/appold/src/components/index.js +5 -0
package/templates/appold/src/index.js +13 -0
package/templates/docs/all.html +1 -1
package/templates/docs/component.html +110 -69
package/templates/docs/components.html +221 -0
package/templates/docs/css/component.css +12 -14
package/templates/docs/css/componentTest.css +7 -0
package/templates/docs/css/style.css +150 -206
package/templates/docs/impactReportTemplate.html +154 -0
package/templates/docs/index.html +1482 -1336
package/templates/library/src/index.js +0 -0

package/templates/docs/component.html CHANGED Viewed

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html class="isRem">
+<html class="isRem" dir="ltr">
   <head>
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -17,20 +17,29 @@
       var ReactDOM = Component.ReactDOM;
       var React = Component.React;
       var ReactDOMServer = Component.ReactDOMServer;
       class RenderComponent extends React.Component {
         constructor(props) {
           super(props);
           this.state = {
             Components: Component,
-            selectedComponent:
-              location.hash != '' ? location.hash.substring(1) : null
+            isError:false,
+            selectedComponent:location.hash != '' ? location.hash.substring(1) : null,
+            componentList:window.componentList?window.componentList:Component
           };
           this.hashChange = this.hashChange.bind(this);
         }
         hashChange() {
+          let parentFrameNode = parent.document.getElementById('loadingText');
           this.setState({
             selectedComponent:
               location.hash != '' ? location.hash.substring(1) : null
+          },()=>{
+            if(this.error) {
+              location.reload();
+              parentFrameNode? parentFrameNode.style.display = 'block':parentFrameNode.style.display='none';
+              this.error = false;
+            }
           });
         }
@@ -43,85 +52,117 @@
         componentWillUnmount() {
           window.removeEventListener('hashchange', this.hashChange);
         }
+        componentDidCatch(){
+          this.error = true;
+          this.setState({isError:this.error})
+        }
         render() {
-          const { Components, selectedComponent } = this.state;
+          const { Components, selectedComponent,componentList} = this.state;
+          // var CLG=[]
+          // var complistGroup=Object.keys(componentList).map((item,i)=>{
+          //   if(Array.isArray(componentList[item].docs.testProps)){
+          //     CLG.push(item)
+          //   }
+          // })
+          let msg=componentList[selectedComponent]?'Sorry! for the inconvenience.':'Sorry! Request URL not found.'
           var ComponentClass =
-            selectedComponent && Components[selectedComponent];
+            selectedComponent && componentList[selectedComponent];
           var keysSingleAr =
             (ComponentClass &&
               ComponentClass.docs &&
               ComponentClass.docs.testProps &&
-              Object.keys(ComponentClass.docs.testProps)) ||
-            [];
-          return (
-            <div className="root" id="root">
-              {Components[selectedComponent] ? (
-                Array.isArray(ComponentClass.docs.testProps) ? (
-                  ComponentClass.docs.testProps.map((prop, i) => {
-                    return (
-                      <div className="comps">
-                        <ComponentClass {...prop} />
-                      </div>
-                    );
-                  })
-                ) : (
-                  <ComponentClass {...ComponentClass.docs.testProps} />
-                )
-              ) : (
-                <div className={'emptyState'}>
-                  <svg
-                    x="0px"
-                    y="0px"
-                    viewBox="0 0 512 512"
-                    style={{ enableBackground: 'new 0 0 512 512' }}
-                    xmlSpace="preserve"
-                    className={'smileIcon'}
-                  >
-                    <linearGradient
-                      id="SVGID_1_"
-                      gradientUnits="userSpaceOnUse"
-                      x1="256"
-                      y1="514"
-                      x2="256"
-                      y2="2"
-                      gradientTransform="matrix(1 0 0 -1 0 514)"
-                    >
-                      <stop offset="0" style={{ stopColor: '#2AF598' }} />
-                      <stop offset="1" style={{ stopColor: '#009EFD' }} />
-                    </linearGradient>
-                    <path
-                      style={{ fill: 'url(#SVGID_1_)' }}
-                      d="M344.354,381.58c-1.33-1.651-33.207-40.458-88.354-40.458
-      c-55.832,0-87.972,39.974-88.29,40.378l-31.42-24.756c1.79-2.271,44.687-55.622,119.71-55.622s117.92,53.352,119.71,55.622
-      L344.29,381.5L344.354,381.58z M437.02,437.02C485.371,388.668,512,324.38,512,256s-26.629-132.667-74.98-181.02
-      C388.667,26.629,324.38,0,256,0S123.333,26.629,74.98,74.98C26.629,123.333,0,187.62,0,256s26.629,132.668,74.98,181.02
-      C123.333,485.371,187.62,512,256,512S388.667,485.371,437.02,437.02z M472,256c0,119.103-96.897,216-216,216S40,375.103,40,256
-      S136.897,40,256,40S472,136.897,472,256z M168,212.122c17.673,0,32-14.327,32-32s-14.327-32-32-32s-32,14.327-32,32
-      S150.327,212.122,168,212.122z M344,212.122c17.673,0,32-14.327,32-32s-14.327-32-32-32s-32,14.327-32,32
-      S326.327,212.122,344,212.122z"
-                    />
-                  </svg>
-                  <div>Please click the components on left side menu bar</div>
-                </div>
-              )}
+              Object.keys(ComponentClass.docs.testProps)) || [];
+          var ErrorMessage=(
+            <div className={'emptyState'}>
+              <svg
+                x='0px'
+                y='0px'
+                viewBox='0 0 512 512'
+                style={{ enableBackground: 'new 0 0 512 512' }}
+                xmlSpace='preserve'
+                className={'smileIcon'}
+              >
+                <path
+                  style={{ fill: '#f00' }}
+                  d='M344.354,381.58c-1.33-1.651-33.207-40.458-88.354-40.458
+        c-55.832,0-87.972,39.974-88.29,40.378l-31.42-24.756c1.79-2.271,44.687-55.622,119.71-55.622s117.92,53.352,119.71,55.622
+        L344.29,381.5L344.354,381.58z M437.02,437.02C485.371,388.668,512,324.38,512,256s-26.629-132.667-74.98-181.02
+        C388.667,26.629,324.38,0,256,0S123.333,26.629,74.98,74.98C26.629,123.333,0,187.62,0,256s26.629,132.668,74.98,181.02
+        C123.333,485.371,187.62,512,256,512S388.667,485.371,437.02,437.02z M472,256c0,119.103-96.897,216-216,216S40,375.103,40,256
+        S136.897,40,256,40S472,136.897,472,256z M168,212.122c17.673,0,32-14.327,32-32s-14.327-32-32-32s-32,14.327-32,32
+        S150.327,212.122,168,212.122z M344,212.122c17.673,0,32-14.327,32-32s-14.327-32-32-32s-32,14.327-32,32
+        S326.327,212.122,344,212.122z'
+                />
+              </svg>
+              <div>{msg}</div>
             </div>
+          )
+          let renderElement = (
+            <React.Fragment>
+            {
+              this.state.isError || componentList[selectedComponent] ? (
+                <ComponentClass {...ComponentClass.docs.testProps} />
+              ) : ( ErrorMessage )
+            }
+              </React.Fragment>
           );
+          return   <div className='root'>{componentList._provider ? (
+            <componentList._provider>
+                {this.state.isError?ErrorMessage:renderElement}
+            </componentList._provider>
+          ) : (
+            this.state.isError?ErrorMessage:renderElement
+          )}</div>;
         }
       }
-      try {
-        ReactDOM.render(<RenderComponent />, react, () => {
-          let attr = document.createAttribute('id');
-          attr.value = 'check';
-          let node = document.createElement('DIV');
-          node.setAttributeNode(attr);
-          document.getElementById('root').appendChild(node);
-        });
-      } catch (e) {
-        console.log(e);
+      var compList;
+      var componentList= {};
+      var compGroupObj=function(comp,key,compGroup){
+        if (comp == 'React' || comp == 'ReactDOM' || comp =='renderToStaticMarkup') {
+          return;
+        }
+        if(comp=='default'){
+          componentList[key]=compGroup[comp]
+          return componentList
+        }
+        else{
+          componentList[comp]=compGroup[comp]
+          return componentList
+        }
       }
-    </script>
+      Promise.all(Object.keys(Component).map((key) => {
+        let componentKey=Component[key];
+        if (key == 'React' || key == 'ReactDOM' || key=='renderToStaticMarkup') {
+          return;
+        }
+        if(key == '_provider'){
+          return compGroupObj(key,null,Component)
+        }
+        try{
+          return(
+            componentKey && componentKey.then((res)=>{
+              Object.keys(res).forEach((comp)=>{
+                let compGroup=res[comp];
+                Object.keys(compGroup).forEach((comps)=>{
+                  compList=compGroupObj(comps,key,compGroup)
+                  return compList
+                })
+              })
+            })
+          )
+        }
+        catch(error){
+          return Component
+        }
+      })).then(()=>{
+        Object.keys(componentList).length>1?window.componentList=componentList:window.componentList=Component
+        ReactDOM.render(<RenderComponent  />, react);
+      })
+    </script>
     <script type="text/javascript">
       var err = null;
       var comName = '';

package/templates/docs/components.html ADDED Viewed

@@ -0,0 +1,221 @@
+<!DOCTYPE html>
+<html class="isRem" dir="ltr">
+  <head>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./css/component.css" />
+    <link rel="stylesheet" href="./css/componentTest.css" />
+    <link rel="stylesheet" href="/docs/css/main.css" />
+  </head>
+  <body>
+    <div id="react" class="ssTest appContainer"></div>
+    <div id="reactUserEdit"></div>
+    <script src="/docs/js/vendor.js" defer="true"></script>
+    <script src="/docs/js/main.js" defer="true"></script>
+    <script src="/docs/js/babel.min.js"></script>
+    <script type="text/babel">
+      var test = 'test';
+      var ReactDOM = Component.ReactDOM;
+      var React = Component.React;
+      var ReactDOMServer = Component.ReactDOMServer;
+      class RenderComponent extends React.Component {
+        constructor(props) {
+          super(props);
+          this.state = {
+            Components: Component,
+            isError: false,
+            selectedComponent:
+              location.hash != '' ? location.hash.substring(1) : null,
+            componentList: window.componentList
+              ? window.componentList
+              : Component,
+          };
+          this.hashChange = this.hashChange.bind(this);
+        }
+        hashChange() {
+          let parentFrameNode = parent.document.getElementById('loadingText');
+          this.setState(
+            {
+              selectedComponent:
+                location.hash != '' ? location.hash.substring(1) : null,
+            },
+            () => {
+              if (this.error) {
+                location.reload();
+                parentFrameNode
+                  ? (parentFrameNode.style.display = 'block')
+                  : (parentFrameNode.style.display = 'none');
+                this.error = false;
+              }
+            }
+          );
+        }
+        componentDidMount() {
+          window.addEventListener('hashchange', this.hashChange);
+          let parentFrameNode = parent.document.getElementById('loadingText');
+          if (parentFrameNode) parentFrameNode.style.display = 'none';
+        }
+        componentWillUnmount() {
+          window.removeEventListener('hashchange', this.hashChange);
+        }
+        componentDidCatch() {
+          this.error = true;
+          this.setState({ isError: this.error });
+        }
+        render() {
+          const { Components, selectedComponent, componentList } = this.state;
+          // var CLG=[]
+          // var complistGroup=Object.keys(componentList).map((item,i)=>{
+          //   if(Array.isArray(componentList[item].docs.testProps)){
+          //     CLG.push(item)
+          //   }
+          // })
+          let msg = componentList[selectedComponent]
+            ? 'Sorry! for the inconvenience.'
+            : 'Sorry! Request URL not found.';
+          var ComponentClass =
+            selectedComponent && componentList[selectedComponent];
+          var keysSingleAr =
+            (ComponentClass &&
+              ComponentClass.docs &&
+              ComponentClass.docs.testProps &&
+              Object.keys(ComponentClass.docs.testProps)) ||
+            [];
+          var ErrorMessage = (
+            <div className={'emptyState'}>
+              <svg
+                x='0px'
+                y='0px'
+                viewBox='0 0 512 512'
+                style={{ enableBackground: 'new 0 0 512 512' }}
+                xmlSpace='preserve'
+                className={'smileIcon'}
+              >
+                <path
+                  style={{ fill: '#f00' }}
+                  d='M344.354,381.58c-1.33-1.651-33.207-40.458-88.354-40.458
+        c-55.832,0-87.972,39.974-88.29,40.378l-31.42-24.756c1.79-2.271,44.687-55.622,119.71-55.622s117.92,53.352,119.71,55.622
+        L344.29,381.5L344.354,381.58z M437.02,437.02C485.371,388.668,512,324.38,512,256s-26.629-132.667-74.98-181.02
+        C388.667,26.629,324.38,0,256,0S123.333,26.629,74.98,74.98C26.629,123.333,0,187.62,0,256s26.629,132.668,74.98,181.02
+        C123.333,485.371,187.62,512,256,512S388.667,485.371,437.02,437.02z M472,256c0,119.103-96.897,216-216,216S40,375.103,40,256
+        S136.897,40,256,40S472,136.897,472,256z M168,212.122c17.673,0,32-14.327,32-32s-14.327-32-32-32s-32,14.327-32,32
+        S150.327,212.122,168,212.122z M344,212.122c17.673,0,32-14.327,32-32s-14.327-32-32-32s-32,14.327-32,32
+        S326.327,212.122,344,212.122z'
+                />
+              </svg>
+              <div>{msg}</div>
+            </div>
+          );
+          let renderElement = (
+            <div className='root' id='root'>
+              {this.state.isError || componentList[selectedComponent] ? (
+                <ComponentClass {...ComponentClass.docs.testProps} />
+              ) : (
+                ErrorMessage
+              )}
+            </div>
+          );
+          return componentList._provider ? (
+            <componentList._provider>
+              {this.state.isError ? ErrorMessage : renderElement}
+            </componentList._provider>
+          ) : this.state.isError ? (
+            ErrorMessage
+          ) : (
+            renderElement
+          );
+        }
+      }
+      var compList;
+      var componentList = {};
+      var compGroupObj = function (comp, key, compGroup) {
+        if (
+          comp == 'React' ||
+          comp == 'ReactDOM' ||
+          comp == 'renderToStaticMarkup'
+        ) {
+          return;
+        }
+        if (comp == 'default') {
+          componentList[key] = compGroup[comp];
+          return componentList;
+        } else {
+          componentList[comp] = compGroup[comp];
+          return componentList;
+        }
+      };
+      Promise.all(
+        Object.keys(Component).map((key) => {
+          let componentKey = Component[key];
+          if (
+            key == 'React' ||
+            key == 'ReactDOM' ||
+            key == 'renderToStaticMarkup'
+          ) {
+            return;
+          }
+          try {
+            return (
+              componentKey &&
+              componentKey.then((res) => {
+                Object.keys(res).forEach((comp) => {
+                  let compGroup = res[comp];
+                  Object.keys(compGroup).forEach((comps) => {
+                    compList = compGroupObj(comps, key, compGroup);
+                    return compList;
+                  });
+                });
+              })
+            );
+          } catch (error) {
+            return Component;
+          }
+        })
+      ).then(() => {
+        Object.keys(componentList).length > 1
+          ? (window.componentList = componentList)
+          : (window.componentList = Component);
+        ReactDOM.render(<RenderComponent />, react, () => {
+          let attr = document.createAttribute('id');
+          attr.value = 'check';
+          let node = document.createElement('DIV');
+          node.setAttributeNode(attr);
+          document.getElementById('root').appendChild(node);
+        });
+      });
+    </script>
+    <script type="text/javascript">
+      var err = null;
+      var comName = '';
+      var findErr = (window.onerror = function (e, line) {
+        err = e;
+        comName = window.location.hash.substr(1);
+      });
+      var funct = function () {
+        return { error: err, name: comName };
+      };
+      let hideCursorBlink = function (documentElement) {
+        var style = documentElement.createElement('style');
+        style.innerText =
+          '[contenteditable], input,textarea {color: transparent ! important; text-shadow: 0 0 0 black ! important;}';
+        documentElement.head.append(style);
+      };
+      let hideAllCursorBlink = function (documentElement) {
+        hideCursorBlink(documentElement);
+        var frameElements = documentElement.getElementsByTagName('iframe');
+        for (i = 0; i < frameElements.length; i++) {
+          if (frameElements[i].contentDocument) {
+            hideAllCursorBlink(frameElements[i].contentDocument);
+          }
+        }
+      };
+    </script>
+  </body>
+</html>

package/templates/docs/css/component.css CHANGED Viewed

@@ -1,9 +1,3 @@
-.ssTest *, .ssTest *:before, .ssTest *:after {
-  transition: all 0s !important;
-  transition-delay: 0s !important;
-  animation-delay: 0s !important;
-  animation-duration: 0s !important;
-}
 .comps {
   padding: 10px;
   max-width: 100%;
@@ -14,19 +8,20 @@
   height: 100vh;
   width: 100vw;
   display: flex;
-  flex-direction: row;
 }
 .root {
-  flex-grow: 1;
-  min-height: 0;
-  min-width: 0;
+	flex-grow: 1;
+	min-height: 0;
+	min-width: 0;
   overflow-y: auto;
 }
 .emptyState{
   display: flex;
   flex-direction: column;
-  align-items: center;justify-content: center;
+  align-items: center;
+  justify-content: center;
   height:100%;
+  width: 100%;
 }
 .smileIcon{
   width: 60px;
@@ -34,11 +29,14 @@
 }
 body {
   overflow: hidden;
+  margin: 0;
+}
+html.isRem{
+  font-size: 16px
 }
-html.isRem{font-size: 16px}
 @media only screen and (min-width: 100em) {
   html.isRem {
-    font-size: calc(100vw / 110);
+    font-size: calc(0.875em + 0.25 * (100vw - 28.75em) / 91.25);
+    font-size: -webkit-calc(87.5% + 0.25 * (100vw - 28.75em) / 91.25);
   }
 }

package/templates/docs/css/componentTest.css ADDED Viewed

@@ -0,0 +1,7 @@
+*, *:before,*:after {
+  transition: all 0s !important;
+  transition-delay: 0s !important;
+  animation-delay: 0s !important;
+  animation-duration: 0s !important;
+  opacity: 1 !important;
+}