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

package/templates/app/mockapi/index.js

@@ -1,13 +1,18 @@
-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;
+const cors = require("cors");
+const fileUpload = require("express-fileupload");
+
+function mockServer(app) {
+  app.use(
+    fileUpload({
+      limits: { fileSize: 50 * 1024 * 1024 }
+    })
+  );
+  app.use(cors());
+
+  app.get("/app/sample/*", (req, res) => {
+    res.type("html");
+    res.sendFile(path.join(__dirname + "/../app/index.html"));
+  });
+}
+
+module.exports = mockServer;

package/templates/app/package.json

@@ -1,17 +1,37 @@
-{
-  "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"
-}
+{
+  "name": "sampleapp",
+  "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",
+    "lint": "react-cli lint"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@zohodesk/components": "^1.0.0-alpha-21",
+    "cors": "^2.8.5",
+    "redux-devtools": "^3.5.0",
+    "redux-devtools-dock-monitor": "^1.1.3",
+    "redux-devtools-log-monitor": "^1.4.0",
+    "redux-logger": "^3.0.6"
+  },
+  "react-cli": {
+    "app": {
+      "server": {
+        "hasMock": true
+      }
+    }
+  },
+  "devDependencies": {
+    "body-parser": "^1.19.0",
+    "express-fileupload": "^1.1.5"
+  }
+}

package/templates/app/src/actions/SampleActions/index.js

@@ -0,0 +1,37 @@
+import { generateAPITypes } from "../../util/Common";
+import requestAPI from "../../util/RequestAPI";
+
+export function getSampleList(isForce = true) {
+  return {
+    types: generateAPITypes("SAMPLE_LIST"),
+    shouldCallAPI: state => {
+      if (!isForce) {
+        const { sampleDataList = [] } = state;
+        return sampleDataList.length === 0;
+      }
+      return true;
+    },
+    callAPI: state =>
+      requestAPI(`${mockServerURL}/api/v1/sampleapi`, {})
+        .get()
+        .then(res => {
+          return res;
+        })
+  };
+}
+
+export function addSample(payload) {
+  return {
+    types: generateAPITypes("ADD_SAMPLE"),
+    callAPI: state => {
+      return new Promise((resolve, reject) => {
+        let url = `${mockServerURL}/api/v1/addSample`;
+        requestAPI(url, {})
+          .post("", payload)
+          .then(res => {
+            resolve(res);
+          });
+      });
+    }
+  };
+}

package/templates/app/src/actions/index.js

@@ -0,0 +1,65 @@
+import {
+  push as routerPush,
+  replace as routerReplace
+} from "redux-router-middleware";
+
+export function push(obj, isHref) {
+  //obj.pathname = isHref ? obj.pathname : URL_PREFIX + obj.pathname;
+  return (dispatch, getState) => {
+    let state = getState();
+    dispatch(routerPush(obj));
+  };
+}
+
+export function replace(obj) {
+  return (dispatch, getState) => {
+    let state = getState();
+    if (
+      !state.routing.location ||
+      obj.href !== state.routing.location.pathname
+    ) {
+      let locationState =
+        state.routing.location && state.routing.location.state;
+      if (!obj.state && locationState) {
+        obj.state = {};
+        Object.assign(obj.state, locationState);
+      }
+      dispatch(routerReplace(obj));
+    }
+  };
+}
+
+export function showAlert(data) {
+  return {
+    type: "ALERT_SHOW",
+    data
+  };
+}
+
+export function hideAlert() {
+  return {
+    type: "ALERT_HIDE"
+  };
+}
+
+export const alertAction = (() => {
+  let ob = { resolve: null, reject: null };
+  function showConfirmBox(data) {
+    return dispatch =>
+      new Promise((res, rej) => {
+        ob.resolve = () => {
+          dispatch(hideAlert());
+          res();
+        };
+        ob.reject = () => {
+          dispatch(hideAlert());
+          rej();
+        };
+        dispatch(showAlert(data));
+      });
+  }
+  return {
+    ob,
+    showConfirmBox
+  };
+})();

package/templates/app/src/appUrls.js

@@ -0,0 +1,19 @@
+import { URL_PREFIX } from "./util/Common";
+
+export default function getUrls(isDomainMapped) {
+  let urls = [
+    {
+      name: "root",
+      pattern: "/"
+    },
+    {
+      name: "sampleList",
+      pattern: "/sample"
+    }
+  ];
+
+  return urls.map(url => {
+    url.pattern = `${URL_PREFIX}${url.pattern}`;
+    return url;
+  });
+}

package/templates/app/src/components/Alert/Alert.js

@@ -0,0 +1,134 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import style from "./Alert.module.css";
+import {
+  TopbandFontIcon,
+  TicketsFontIcon,
+  CommonFontIcon,
+  Button
+} from "@zohodesk/components";
+
+import FreezeLayer from "../FreezeLayer/FreezeLayer";
+
+export default class Alert extends Component {
+  constructor(props) {
+    super(props);
+    this.documentKeyupHandler = this.documentKeyupHandler.bind(this);
+  }
+
+  componentDidMount() {
+    document.addEventListener("keyup", this.documentKeyupHandler);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener("keyup", this.documentKeyupHandler);
+  }
+
+  documentKeyupHandler(e = {}) {
+    e && e.preventDefault();
+    let { onSubmitClick, onCancelClick, isActive } = this.props;
+    if (e.keyCode === 27 && isActive) {
+      onCancelClick();
+    } else if (e.keyCode === 13 && isActive) {
+      onSubmitClick();
+    }
+  }
+
+  render() {
+    let {
+      onSubmitClick,
+      onCancelClick,
+      alertData,
+      isActive,
+      palette,
+      type
+    } = this.props;
+    let {
+      iconName,
+      iconSize,
+      title,
+      message,
+      confirmationMessage,
+      submitText,
+      cancelText,
+      isBoldIcon
+    } = alertData;
+    return (
+      <FreezeLayer
+        zIndex="7"
+        isActive={isActive}
+        animationName="fadeIn"
+        childAnimationName="scaleIn"
+        align="both"
+      >
+        <div className={`${style[palette]}`}>
+          <div className={style.container}>
+            <div className={style.header}>
+              <span className={style.icon}>
+                {iconName === "splitNew" ? (
+                  <TicketsFontIcon
+                    name={iconName}
+                    size="14"
+                    isBold={isBoldIcon}
+                  />
+                ) : iconName === "taskDemo" ? (
+                  <TopbandFontIcon
+                    name={iconName}
+                    size={iconSize ? iconSize : "15"}
+                    isBold={isBoldIcon}
+                  />
+                ) : (
+                  <CommonFontIcon
+                    name={iconName || ""}
+                    size={iconSize ? iconSize : "15"}
+                    isBold={isBoldIcon}
+                  />
+                )}
+              </span>
+              <span className={style.title}>{title}</span>
+            </div>
+            <div className={style.middle}>
+              <div dangerouslySetInnerHTML={{ __html: message }} />
+              {confirmationMessage && (
+                <div className={style.text}>{confirmationMessage}</div>
+              )}
+              <div className={style.footer}>
+                <span className={`${style.button}`}>
+                  <Button
+                    text={submitText}
+                    palette={
+                      palette === "success" ? "primaryFilled" : "dangerFilled"
+                    }
+                    onClick={onSubmitClick}
+                  />
+                </span>
+                {type === "confirmation" && (
+                  <span className={`${style.button}`}>
+                    <Button
+                      text={cancelText}
+                      palette="secondary"
+                      onClick={onCancelClick}
+                    />
+                  </span>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </FreezeLayer>
+    );
+  }
+}
+
+Alert.propTypes = {
+  alertData: PropTypes.object,
+  isActive: PropTypes.bool,
+  onCancelClick: PropTypes.func,
+  onSubmitClick: PropTypes.func,
+  palette: PropTypes.oneOf(["success", "danger"]),
+  type: PropTypes.oneOf(["alert", "confirmation"])
+};
+Alert.defaultProps = {
+  isActive: false,
+  palette: "danger"
+};

package/templates/app/src/components/Alert/Alert.module.css

@@ -0,0 +1,79 @@
+.container {
+  background-color: var(--zd_bg_pure);
+  border-radius: var(--zd_size2);
+  width: var(--zd_size430);
+}
+.header {
+  text-transform: capitalize;
+  padding: var(--zd_size12) var(--zd_size20);
+  box-shadow: 0 0 var(--zd_size3) 0 var(--zd_shadow_smoke36);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+.danger .header {
+  background-color: var(--zd_bg_danger5);
+  color: var(--zd_text_danger4);
+}
+.success .header {
+  background-color: var(--zd_bg_primarytrans2);
+  color: var(--zd_text_prime);
+}
+.icon {
+  margin-right: var(--zd_size10);
+  font-size: 0;
+}
+.danger .icon {
+  color: var(--zd_text_danger4);
+}
+.success .icon {
+  color: var(--zd_text_prime);
+}
+.title {
+  -webkit-box-flex: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  min-height: 0;
+  min-width: 0;
+  white-space: nowrap;
+  word-wrap: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: var(--zd_size15);
+}
+
+.middle {
+  padding: var(--zd_size30) var(--zd_size20) var(--zd_size20);
+  line-height: var(--zd_size25);
+  color: var(--zd_text_dark4);
+  font-size: var(--zd_size15);
+  word-break: break-word;
+}
+.text {
+  margin-top: var(--zd_size20);
+}
+.footer {
+  margin-top: var(--zd_size20);
+}
+
+.button {
+  margin-right: var(--zd_size20);
+  display: inline-block;
+}
+
+html[dir="rtl"] .button {
+  margin-right: 0;
+  margin-left: var(--zd_size20);
+}
+html[dir="rtl"] .icon {
+  margin-left: var(--zd_size10);
+  margin-right: 0;
+}

package/templates/app/src/components/FreezeLayer/FreezeLayer.css

@@ -0,0 +1,37 @@
+.container {
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  position: absolute;
+}
+.default {
+  background-color: rgba(0, 0, 0, 0.7);
+}
+.dark {
+  background-color: rgba(0, 0, 0, 0.9);
+}
+.darkLight {
+  background-color: var(--zd_bg_dark16);
+}
+.plain {
+  background-color: transparent;
+}
+.snow {
+  background-color: rgba(30, 38, 51, 0.4);
+}
+.index3 {
+  z-index: 3;
+}
+.index5 {
+  z-index: 5;
+}
+.index7 {
+  z-index: 7;
+}
+.index10 {
+  z-index: 10;
+}
+.delay {
+  transition-delay: 0.2s;
+}

package/templates/app/src/components/FreezeLayer/FreezeLayer.js

@@ -0,0 +1,84 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+
+import style from "./FreezeLayer.css";
+import { Container, Animation } from "@zohodesk/components";
+export default class FreezeLayer extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { isActive: props.isActive, isChildActive: false };
+    this.toggleChild = this.toggleChild.bind(this);
+  }
+
+  toggleChild() {
+    this.setState({ isChildActive: !this.state.isChildActive });
+  }
+
+  render() {
+    let {
+      children,
+      align,
+      childAnimationName,
+      palette,
+      onClick,
+      animationName,
+      zIndex,
+      isActive
+    } = this.props;
+    let { isChildActive } = this.state;
+    return (
+      <Animation
+        name={animationName}
+        isActive={isActive}
+        onExit={this.toggleChild}
+        onEntered={this.toggleChild}
+        delayClassName={childAnimationName ? style.delay : ""}
+        exitDuration={childAnimationName && 500}
+      >
+        <div
+          className={`
+              ${style.container} ${style[`index${zIndex}`]}  ${style[palette]}
+            `}
+          onClick={onClick ? onClick : null}
+        >
+          {children && (
+            <Container alignBox="row" align={align}>
+              {childAnimationName ? (
+                <Animation name={childAnimationName} isActive={isChildActive}>
+                  {children}
+                </Animation>
+              ) : (
+                children
+              )}
+            </Container>
+          )}
+        </div>
+      </Animation>
+    );
+  }
+}
+FreezeLayer.propTypes = {
+  align: PropTypes.oneOf(["horizontal", "vertical", "both"]),
+  animationName: PropTypes.oneOf([
+    "zoomIn",
+    "scaleIn",
+    "fadeIn",
+    "slideLeft",
+    "slideDown",
+    "skewIn",
+    "default",
+    "none"
+  ]),
+  childAnimationName: PropTypes.string,
+  children: PropTypes.node,
+  isActive: PropTypes.bool,
+  onClick: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
+  palette: PropTypes.oneOf(["dark", "default", "darkLight", "plain", "snow"]),
+  zIndex: PropTypes.oneOf(["3", "5", "7", "10"])
+};
+FreezeLayer.defaultProps = {
+  animationName: "default",
+  isActive: false,
+  palette: "default",
+  zIndex: "5"
+};

package/templates/app/src/components/Sample/Sample.module.css

@@ -0,0 +1,11 @@
+.addButtonContainer {
+  text-align: right;
+  padding: 10px;
+}
+.listContainer {
+  margin-top: 20px;
+  padding: 5px 0 10px 10px;
+}
+.listItem {
+  padding: 10px 0;
+}

package/templates/app/src/components/Sample/SampleList.js

@@ -0,0 +1,61 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { URL_PREFIX } from "../../util/Common";
+import { Button, Container, Box, Switch } from "@zohodesk/components";
+import Card, {
+  CardHeader,
+  CardContent
+} from "@zohodesk/components/lib/Card/Card";
+import style from "./Sample.module.css";
+
+/**
+ * BlockList
+ */
+class SampleList extends Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    let { samples = {} } = this.props;
+
+    samples = samples.map((sample, index) => {
+      const { id, name, status } = sample;
+      const url = `${URL_PREFIX}/block/${id}`;
+      const editUrl = `${URL_PREFIX}/block/${id}/edit`;
+
+      return (
+        <div key={id} className={style.listItem}>
+          {id}-{name}
+        </div>
+      );
+    });
+
+    if (samples.length === 0) {
+      samples = <div>There is no samples</div>;
+    }
+    return (
+      <Card isScrollAttribute={true}>
+        <CardHeader>
+          <div className={style.addButtonContainer}>
+            <Button
+              palette="primaryFilled"
+              size="medium"
+              text="Add Sample"
+              onClick={this.goAddForm}
+            />
+          </div>
+        </CardHeader>
+        <CardContent isScrollAttribute={true} scroll="vertical">
+          <div className={style.listContainer}>{samples}</div>
+        </CardContent>
+      </Card>
+    );
+  }
+}
+
+SampleList.propTypes = {
+  push: PropTypes.func,
+  samples: PropTypes.object
+};
+
+export default SampleList;

package/templates/app/src/components/Slider/Slider.css

@@ -0,0 +1,41 @@
+.container {
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
+  background-color: var(--zd_bg_pure);
+  right: 0;
+  top: 0;
+  bottom: 0;
+  position: absolute;
+  z-index: 5;
+  overflow: auto;
+}
+.xsmall {
+  width: 360px;
+}
+.small {
+  width: 410px;
+}
+.medium {
+  width: 660px;
+}
+.large {
+  width: 936px;
+}
+
+.close a,
+.close input,
+.close textarea,
+.close button,
+.close iframe {
+  display: none;
+}
+
+@media only screen and (max-width: 22.5em) {
+  .container {
+    width: 100%;
+  }
+}
+
+html[dir="rtl"] .container {
+  left: 0;
+  right: initial;
+}