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

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

@@ -0,0 +1,51 @@
+import { createBrowserHistory } from "history";
+import { reduxRouter } from "redux-router-middleware";
+import { createStore, applyMiddleware, compose, combineReducers } from "redux";
+import thunk from "redux-thunk";
+import promiseMiddleware from "../middleware/PromiseMiddleware";
+import rootReducer from "../reducers";
+
+//import logger from "redux-logger";
+//import { createLogger } from "redux-logger";
+import { createLogger } from "redux-logger";
+import DevTools from "../containers/DevTools";
+import getUrls from "../appUrls";
+import { historyChange } from "../historyChange";
+
+const configureStore = preloadedState => {
+  let history = createBrowserHistory();
+
+  let { historyMiddleware, routing } = reduxRouter(
+    history,
+    getUrls(),
+    historyChange
+  );
+
+  //console.log(createLogger);
+  let middleWare = compose(
+    applyMiddleware(
+      thunk,
+      promiseMiddleware,
+      historyMiddleware,
+      createLogger({ collapsed: true })
+    ),
+    DevTools.instrument()
+  );
+
+  const store = createStore(
+    combineReducers(Object.assign(rootReducer, { routing })),
+    preloadedState,
+    middleWare
+  );
+
+  if (module.hot) {
+    // Enable Webpack hot module replacement for reducers
+    module.hot.accept("../reducers", () => {
+      store.replaceReducer(rootReducer);
+    });
+  }
+
+  return store;
+};
+
+export default configureStore;

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

@@ -0,0 +1,5 @@
+/*if (process.env.NODE_ENV === "production") {
+  module.exports = require("./configureStore.prod");
+} else {*/
+module.exports = require("./configureStore.dev");
+//}

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">