@zohodesk/react-cli 1.0.1-exp.1 → 1.0.2

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

@@ -1,11 +1,11 @@
-.addButtonContainer {
-  text-align: right;
-  padding: 10px;
-}
-.listContainer {
-  margin-top: 20px;
-  padding: 5px 0 10px 10px;
-}
-.listItem {
-  padding: 10px 0;
-}
+.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

@@ -1,61 +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;
+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

@@ -1,41 +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;
-}
+.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;
+}

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

@@ -1,55 +1,55 @@
-import React from "react";
-import PropTypes from "prop-types";
-import style from "./Slider.css";
-import FreezeLayer from "../FreezeLayer/FreezeLayer";
-
-import { Animation } from "@zohodesk/components";
-export default class Slider extends React.Component {
-  render() {
-    let { children, needFreeze, isActive, onClick, palette, size } = this.props;
-    return needFreeze ? (
-      <FreezeLayer
-        onClick={onClick}
-        isActive={isActive}
-        animationName="fadeIn"
-        childAnimationName="slideLeft"
-        palette={palette}
-      >
-        <div
-          className={`${style.container} ${isActive ? "" : style.close}  ${
-            style[size]
-          }`}
-          onClick={e => {
-            e.stopPropagation();
-          }}
-        >
-          {children}
-        </div>
-      </FreezeLayer>
-    ) : (
-      <Animation isActive={isActive} name="slideLeft">
-        <div
-          className={`${style.container} ${style[size]}`}
-          onClick={e => {
-            e.stopPropagation();
-          }}
-        >
-          {children}
-        </div>
-      </Animation>
-    );
-  }
-}
-Slider.propTypes = {
-  children: PropTypes.node,
-  isActive: PropTypes.bool,
-  needFreeze: PropTypes.bool,
-  onClick: PropTypes.func,
-  palette: PropTypes.oneOf(["dark", "default", "darkLight", "plain"]),
-  size: PropTypes.oneOf(["small", "xsmall", "medium", "large"])
-};
-Slider.defaultProps = {
-  isActive: false,
-  palette: "default",
-  size: "xsmall"
-};
+import React from "react";
+import PropTypes from "prop-types";
+import style from "./Slider.css";
+import FreezeLayer from "../FreezeLayer/FreezeLayer";
+
+import { Animation } from "@zohodesk/components";
+export default class Slider extends React.Component {
+  render() {
+    let { children, needFreeze, isActive, onClick, palette, size } = this.props;
+    return needFreeze ? (
+      <FreezeLayer
+        onClick={onClick}
+        isActive={isActive}
+        animationName="fadeIn"
+        childAnimationName="slideLeft"
+        palette={palette}
+      >
+        <div
+          className={`${style.container} ${isActive ? "" : style.close}  ${
+            style[size]
+          }`}
+          onClick={e => {
+            e.stopPropagation();
+          }}
+        >
+          {children}
+        </div>
+      </FreezeLayer>
+    ) : (
+      <Animation isActive={isActive} name="slideLeft">
+        <div
+          className={`${style.container} ${style[size]}`}
+          onClick={e => {
+            e.stopPropagation();
+          }}
+        >
+          {children}
+        </div>
+      </Animation>
+    );
+  }
+}
+Slider.propTypes = {
+  children: PropTypes.node,
+  isActive: PropTypes.bool,
+  needFreeze: PropTypes.bool,
+  onClick: PropTypes.func,
+  palette: PropTypes.oneOf(["dark", "default", "darkLight", "plain"]),
+  size: PropTypes.oneOf(["small", "xsmall", "medium", "large"])
+};
+Slider.defaultProps = {
+  isActive: false,
+  palette: "default",
+  size: "xsmall"
+};

package/templates/app/src/containers/AlertContainer/index.js

@@ -1,15 +1,15 @@
-import { connect } from "react-redux";
-import Alert from "../../components/Alert/Alert";
-import { alertAction } from "../../actions/index.js";
-
-function mapStateToProps() {
-  return {
-    onSubmitClick: alertAction.ob.resolve,
-    onCancelClick: alertAction.ob.reject
-  };
-}
-
-export default connect(
-  mapStateToProps,
-  {}
-)(Alert);
+import { connect } from "react-redux";
+import Alert from "../../components/Alert/Alert";
+import { alertAction } from "../../actions/index.js";
+
+function mapStateToProps() {
+  return {
+    onSubmitClick: alertAction.ob.resolve,
+    onCancelClick: alertAction.ob.reject
+  };
+}
+
+export default connect(
+  mapStateToProps,
+  {}
+)(Alert);

package/templates/app/src/containers/AppContainer/index.js

@@ -1,96 +1,96 @@
-import React from "react";
-import { PropTypes } from "prop-types";
-import { connect } from "react-redux";
-import CustomMatch from "../CustomMatch";
-import Redirector from "../Redirector";
-import { Container, Box } from "@zohodesk/components";
-import style from "./index.module.css";
-import Header from "../Header";
-import SampleListContainer from "../SampleListContainer/ListContainer";
-
-import { push, alertAction } from "../../actions";
-
-class AppContainer extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {};
-  }
-  componentDidMount() {
-    /*const { showConfirmBox } = this.props;
-
-    showConfirmBox({
-      type: "confirmation",
-      submitText: "Yes",
-      cancelText: "Cancel",
-      title: "Alert",
-      iconName: "notifiExclamation",
-      message: "Are you sure?",
-      isActive: true,
-      palette: "danger"
-    })
-      .then(() => {
-        logger.log("Suceess");
-      })
-      .catch(() => {
-        logger.log("Cancel");
-      });*/
-  }
-  render() {
-    const { alertData, paramMap = {} } = this.props;
-
-    return (
-      <Container
-        className={style.deskContainer}
-        onMouseOver={this.handleOver}
-        scroll="none"
-        tagName="div"
-      >
-        <Redirector />
-
-        <Box tagName="header">
-          <Header />
-        </Box>
-
-        <Box className={style.posrel} flexible tagName="section">
-          <Container
-            alignBox="row"
-            className={`${style.container}`}
-            tagName="section"
-          >
-            <Box className={""} flexible tagName="article" scroll="vertical">
-              <CustomMatch name="sampleList" isExactly>
-                <SampleListContainer />
-              </CustomMatch>
-            </Box>
-          </Container>
-
-          {alertData.isActive && (
-            <AlertContainer
-              alertData={alertData}
-              isActive={alertData.isActive}
-              palette={alertData.palette}
-              type={alertData.type}
-            />
-          )}
-        </Box>
-      </Container>
-    );
-  }
-}
-
-AppContainer.propTypes = {
-  push: PropTypes.func,
-  alertData: PropTypes.object,
-  paramMap: PropTypes.object,
-  showConfirmBox: PropTypes.func
-};
-
-const mapStateToProps = (state, ownProps) => {
-  const { alertData, routing } = state;
-  const { paramMap } = routing;
-  return { alertData, paramMap };
-};
-export default connect(
-  mapStateToProps,
-  { push, showConfirmBox: alertAction.showConfirmBox }
-)(AppContainer);
+import React from "react";
+import { PropTypes } from "prop-types";
+import { connect } from "react-redux";
+import CustomMatch from "../CustomMatch";
+import Redirector from "../Redirector";
+import { Container, Box } from "@zohodesk/components";
+import style from "./index.module.css";
+import Header from "../Header";
+import SampleListContainer from "../SampleListContainer/ListContainer";
+
+import { push, alertAction } from "../../actions";
+
+class AppContainer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+  componentDidMount() {
+    /*const { showConfirmBox } = this.props;
+
+    showConfirmBox({
+      type: "confirmation",
+      submitText: "Yes",
+      cancelText: "Cancel",
+      title: "Alert",
+      iconName: "notifiExclamation",
+      message: "Are you sure?",
+      isActive: true,
+      palette: "danger"
+    })
+      .then(() => {
+        logger.log("Suceess");
+      })
+      .catch(() => {
+        logger.log("Cancel");
+      });*/
+  }
+  render() {
+    const { alertData, paramMap = {} } = this.props;
+
+    return (
+      <Container
+        className={style.deskContainer}
+        onMouseOver={this.handleOver}
+        scroll="none"
+        tagName="div"
+      >
+        <Redirector />
+
+        <Box tagName="header">
+          <Header />
+        </Box>
+
+        <Box className={style.posrel} flexible tagName="section">
+          <Container
+            alignBox="row"
+            className={`${style.container}`}
+            tagName="section"
+          >
+            <Box className={""} flexible tagName="article" scroll="vertical">
+              <CustomMatch name="sampleList" isExactly>
+                <SampleListContainer />
+              </CustomMatch>
+            </Box>
+          </Container>
+
+          {alertData.isActive && (
+            <AlertContainer
+              alertData={alertData}
+              isActive={alertData.isActive}
+              palette={alertData.palette}
+              type={alertData.type}
+            />
+          )}
+        </Box>
+      </Container>
+    );
+  }
+}
+
+AppContainer.propTypes = {
+  push: PropTypes.func,
+  alertData: PropTypes.object,
+  paramMap: PropTypes.object,
+  showConfirmBox: PropTypes.func
+};
+
+const mapStateToProps = (state, ownProps) => {
+  const { alertData, routing } = state;
+  const { paramMap } = routing;
+  return { alertData, paramMap };
+};
+export default connect(
+  mapStateToProps,
+  { push, showConfirmBox: alertAction.showConfirmBox }
+)(AppContainer);

package/templates/app/src/containers/AppContainer/index.module.css

@@ -1,27 +1,27 @@
-.container,
-.rightPanel {
-  position: relative;
-}
-.leftPanel {
-  position: relative;
-  transition: width 0.3s ease, transform 0.3s ease;
-  will-change: width, transform;
-  background-color: #f4f6f9;
-}
-.open {
-  width: 13.75rem;
-}
-.leftPanelContainer {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.deskContainer {
-  height: 100vh;
-}
+.container,
+.rightPanel {
+  position: relative;
+}
+.leftPanel {
+  position: relative;
+  transition: width 0.3s ease, transform 0.3s ease;
+  will-change: width, transform;
+  background-color: #f4f6f9;
+}
+.open {
+  width: 13.75rem;
+}
+.leftPanelContainer {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.deskContainer {
+  height: 100vh;
+}