@zohodesk/react-cli 0.0.1-beta.17 → 0.0.1-beta.170

package/templates/app/src/store/configureStore.prod.js

@@ -0,0 +1,26 @@
+import { createBrowserHistory } from "history";
+import { reduxRouter } from "@zohodesk/router-middleware";
+import { createStore, applyMiddleware, compose, combineReducers } from "redux";
+import { historyChange } from "../historyChange";
+import thunk from "redux-thunk";
+import rootReducer from "../reducers";
+
+const configureStore = preloadedState => {
+  let history = createBrowserHistory();
+
+  let { historyMiddleware, routing } = reduxRouter(
+    history,
+    getUrls(),
+    historyChange
+  );
+
+  let middleWare = compose(applyMiddleware(thunk, historyMiddleware));
+
+  return createStore(
+    combineReducers(Object.assign(rootReducer, { routing })),
+    preloadedState,
+    middleWare
+  );
+};
+
+export default configureStore;

package/templates/app/src/util/Common.js

@@ -0,0 +1,5 @@
+export const URL_PREFIX = '/app';
+
+export function generateAPITypes(prefix) {
+  return [`${prefix}_REQUEST`, `${prefix}_SUCCESS`, `${prefix}_FAILURE`];
+}

package/templates/app/src/util/RequestAPI.js

@@ -0,0 +1,132 @@
+/*$Id$*/
+export default function(url, header = null) {
+  let contentType = "json";
+  let core = {
+    ajax(method, url, args, payload, files, onProcess) {
+      let p = new Promise((resolve, reject) => {
+        let client = new XMLHttpRequest();
+        let uri = url;
+        var data = "";
+        if (args && (method === "POST" || method === "PUT")) {
+          let argcount = 0;
+          for (let key in args) {
+            if ({}.hasOwnProperty.call(args, key)) {
+              if (argcount++) {
+                data += "&";
+              }
+              data += `${encodeURIComponent(key)}=${encodeURIComponent(
+                args[key]
+              )}`;
+            }
+          }
+        }
+
+        client.upload.addEventListener("progress", onProcess);
+
+        client.open(method, uri);
+
+        if (header) {
+          Object.keys(header).forEach(key => {
+            client.setRequestHeader(key, header[key]);
+          });
+        }
+
+        if (files && files.constructor === new FormData().constructor) {
+          client.send(files);
+        } else if (files) {
+          var data = new FormData();
+          data.append("file", files[0]);
+          client.send(data);
+        } else if (payload) {
+          if (payload instanceof FormData) {
+            client.send(payload);
+          } else {
+            if (contentType == "json") {
+              client.setRequestHeader(
+                "Content-Type",
+                "application/json;charset=UTF-8"
+              );
+              client.send(JSON.stringify(payload));
+            } else {
+              client.setRequestHeader(
+                "Content-Type",
+                "application/x-www-form-urlencoded;charset=UTF-8"
+              );
+              let data = "";
+              let argcount = 0;
+              for (let key in payload) {
+                if ({}.hasOwnProperty.call(payload, key)) {
+                  if (argcount++) {
+                    data += "&";
+                  }
+                  data += `${encodeURIComponent(key)}=${encodeURIComponent(
+                    payload[key]
+                  )}`;
+                }
+              }
+              client.send(data);
+            }
+          }
+        } else {
+          client.setRequestHeader(
+            "Content-Type",
+            "application/x-www-form-urlencoded"
+          );
+          client.send(data);
+        }
+
+        client.onload = function() {
+          if (
+            this.status === 200 ||
+            this.status === 201 ||
+            this.status === 204
+          ) {
+            let response = this.response ? this.response : this.responseText;
+            if (response === "") {
+              resolve({ responseStatus: this.status }, () => percentComplete);
+            } else {
+              try {
+                resolve(JSON.parse(response));
+              } catch (e) {
+                resolve(response);
+              }
+            }
+          } else {
+            reject(this);
+          }
+        };
+
+        client.onerror = function() {
+          reject(this);
+        };
+      });
+      p.getProgress = () => p.progress;
+      return p;
+    }
+  };
+
+  return {
+    get() {
+      return core.ajax("GET", url);
+    },
+    patch(args, payload) {
+      return core.ajax("PATCH", url, args, payload);
+    },
+    post(args, payload) {
+      return core.ajax("POST", url, args, payload);
+    },
+    put(args, payload, files) {
+      return core.ajax("PUT", url, args, payload, files);
+    },
+    del() {
+      return core.ajax("DELETE", url);
+    },
+    attach(files, onProcess) {
+      return core.ajax("POST", url, {}, undefined, files, onProcess);
+    },
+    setContentType(type) {
+      contentType = type;
+      return this;
+    }
+  };
+}

package/templates/appold/README.md

@@ -0,0 +1,12 @@
+#Some useful command
+
+component development command
+npm run docs --server:componentPath=./src/components
+
+development mode useful command
+npm run start
+npm run start --server:prod=true
+
+
+production mode command
+npm run build

package/templates/appold/app/index.html

@@ -0,0 +1,8 @@
+<html>
+	<body>
+		<div id="react"></div>
+		<script src="/app/js/react.vendor.js"></script>
+		<script src="/app/js/vendor.js"></script>
+		<script src="/app/js/main.js"></script>
+	</body>
+</html>

package/templates/appold/app/properties/ApplicationResources_en_US.properties

@@ -0,0 +1 @@
+app.key=key

package/templates/appold/app/properties/i18nkeys.json

@@ -0,0 +1,3 @@
+{
+  "app.dynkey": "dynkey"
+}

package/templates/appold/docs/all.html

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta http-equiv="X-UA-Compatible" content="IE=edge">
+		<style type="text/css">
+			.comps
+			{
+				padding: 10px;
+				max-width: 100%;
+				margin-bottom: 10px;
+				border-bottom: 1px solid #f5f5f5;
+			}
+			.componentNameRed
+			{
+				color: red;
+			}
+			.propertyName
+			{
+				color:green;
+				margin-left: 10px;
+			}
+			.valueName
+			{
+				color:orange;
+				margin-right: 10px;
+			}
+			.example
+			{
+				padding: 20px 20px 20px 0px;
+				width: 100%;
+				box-sizing: border-box;
+				margin: 15px 0px;
+			}
+			.htmlTag
+			{
+				color: #999;
+				color: #676565;
+    			line-height: 25px;
+    			margin-bottom: 10px;
+    			font-size: 13px;
+			}
+			.textArea
+			{
+				min-width: 50%;
+			    outline: none;
+			    min-height: 100px;
+			    margin: 15px 0px;
+			    max-width: 90%;
+			}
+
+		</style>
+	</head>
+	<body>
+		<div id="react">
+
+    </div>
+
+		<script src="/docs/js/vendor.js" ></script>
+		<script src="/docs/js/main.js" ></script>
+		<script>
+		var React = Component.React;
+var ReactDOM = Component.ReactDOM;
+var Text__default = Component.Text__default;
+ReactDOM.render(React.createElement(Text__default), react);
+</script>
+
+
+	</body>
+</html>

package/templates/appold/mockapi/index.js

@@ -0,0 +1,13 @@
+var path = require('path');
+var fs = require('fs');
+
+function mockServer(app) {
+  var responseMapper = (url, file, type = 'application/json') => {
+    app.use(url, function(req, res) {
+      res.setHeader('Content-Type', type);
+      res.sendFile(path.join(__dirname, file));
+    });
+  };
+  responseMapper('/api/v1/tickets', 'tickets.json');
+}
+module.exports = mockServer;

package/templates/appold/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "testapp",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "clean": "react-cli clean build unittest coverage",
+    "docs":"react-cli docs",
+    "component":"react-cli build:component",
+    "component:umd":"react-cli build:component:umd",
+    "start": "react-cli start",
+    "build": "react-cli build",
+    "test": "npm run clean && react-cli test"
+  },
+  "author": "",
+  "license": "ISC"
+}

package/templates/appold/src/components/Text/Text.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+export default class Text extends React.Component {
+  render() {
+    return (
+      <div
+        data-testid="data"
+        onClick={this.props.onClick.bind(this, this.props.content)}
+      >
+        {this.props.content}
+      </div>
+    );
+  }
+}
+Text.propTypes = {
+  content: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired
+};
+if (__DOCS__) {
+  Text.docs = {
+    componentGroup: 'Atom'
+  };
+}

package/templates/appold/src/components/Text/__tests__/Text.spec.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import Text from '../Text';
+
+describe('Text component specification', () => {
+  it('should display text content', () => {
+    var renderedDOM = TestUtils.renderIntoDocument(
+      <Text content="vimal" onClick={() => {}} />
+    );
+    expect(
+      TestUtils.findRenderedComponentsWithTestid(
+        renderedDOM,
+        'data'
+      ).textContent.contains('vimal')
+    ).toBe(true);
+  });
+
+  it('should call onClick ', () => {
+    var mockfn = jest.fn();
+    var renderedDOM = TestUtils.renderIntoDocument(
+      <Text content="vimal" onClick={mockfn} />
+    );
+    var textEle = TestUtils.findRenderedComponentsWithTestid(
+      renderedDOM,
+      'data'
+    );
+    TestUtils.Simulate.click(textEle);
+    expect(mockfn.mock.calls.length).toBe(1);
+    expect(mockfn.mock.calls[0][0]).toBe('vimal1');
+  });
+});

package/templates/appold/src/components/Text/docs/Text__default.docs.js

@@ -0,0 +1,16 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Text from '../Text';
+export default class Text__default extends Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return <Text content="vimal" onClick={val => {}} />;
+  }
+}
+if (__DOCS__) {
+  Text__default.docs = {
+    componentGroup: 'Atom'
+  };
+}

package/templates/appold/src/components/docs.js

@@ -0,0 +1 @@
+export { default as Text__default } from './Text/docs/Text__default.docs';

package/templates/appold/src/components/index.js

@@ -0,0 +1,5 @@
+export { default as React } from 'react';
+export { default as ReactDOM } from 'react-dom';
+export { default as Text } from './Text/Text';
+
+export * from './docs';

package/templates/appold/src/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Text from './components/Text/Text';
+ReactDOM.render(
+  <Text content="vimalesan" onClick={v => {}} />,
+  document.getElementById('react')
+);
+if (!__DEVELOPMENT__) {
+  global.publicPath = function(chunkId) {
+    __webpack_public_path__ = `https://static${chunkId %
+      3}.tsi.zohocorpin.com:9090/app/`;
+  };
+}

package/templates/docs/all.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html dir="ltr">
 	<head>
 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
 		<link rel="stylesheet" href="./css/b.min.css">

package/templates/docs/component.html

@@ -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 = '';