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

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

@@ -0,0 +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);

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

@@ -0,0 +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;
+}

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

@@ -0,0 +1,65 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import PropTypes from "prop-types";
+import { replace } from "../../actions";
+class CustomMatch extends Component {
+  render() {
+    let { children, isMatch } = this.props;
+    return (isMatch && React.Children.only(children)) || null;
+  }
+}
+
+export default connect(
+  (state, props) => {
+    let isMatch;
+    if (Array.isArray(props.names)) {
+      isMatch = props.names.some(urlObj => {
+        let { name, module, isExactly } = urlObj || {};
+        const { paramMap = {}, urls } = state.routing;
+        let url = urls[name] || {};
+
+        let { moduleName } = paramMap;
+        if ((isExactly && url.match === 2) || (!isExactly && url.match)) {
+          isMatch = true;
+          return module ? moduleName === module : isMatch;
+        }
+        return false;
+      });
+    } else {
+      let url = state.routing.urls[props.name];
+      if (url) {
+        isMatch =
+          (props.isExactly && url.match === 2) ||
+          (!props.isExactly && url.match);
+        if (isMatch && Array.isArray(props.module)) {
+          let modules = props.module;
+          isMatch = modules.some(module => {
+            return state.routing.paramMap.moduleName === module;
+          });
+        } else if (isMatch && props.module) {
+          isMatch = state.routing.paramMap.moduleName === props.module;
+        }
+      }
+    }
+    isMatch =
+      !isMatch && props.orMapStateMatch
+        ? props.orMapStateMatch(state)
+        : isMatch;
+    return {
+      isMatch: isMatch ? true : false,
+      isAuthenticate: props.checkAuthenticate
+        ? props.checkAuthenticate(state)
+        : true
+    };
+  },
+  { replace }
+)(CustomMatch);
+
+CustomMatch.defaultProps = {
+  isExactly: false
+};
+CustomMatch.propTypes = {
+  children: PropTypes.element,
+  isExactly: PropTypes.bool,
+  isMatch: PropTypes.bool
+};

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

@@ -0,0 +1,10 @@
+import React from "react";
+import { createDevTools } from "redux-devtools";
+import LogMonitor from "redux-devtools-log-monitor";
+import DockMonitor from "redux-devtools-dock-monitor";
+
+export default createDevTools(
+  <DockMonitor toggleVisibilityKey="ctrl-h" changePositionKey="ctrl-w">
+    <LogMonitor />
+  </DockMonitor>
+);

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

@@ -0,0 +1,67 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import style from "./index.module.css";
+import { push, alertAction } from "../../actions";
+
+import { URL_PREFIX } from "../../util/Common";
+
+class Header extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      tabs: [
+        {
+          url: `${URL_PREFIX}/sample`,
+          name: "Sample",
+          apiName: "sample",
+          id: "1"
+        }
+      ],
+      selectedTab: "sample"
+    };
+    this.changeTab = this.changeTab.bind(this);
+  }
+  changeTab(e) {
+    e.preventDefault();
+    let { push } = this.props;
+
+    push({ pathname: e.target.getAttribute("href") });
+  }
+  render() {
+    let { tabs, selectedTab } = this.state;
+    const { topbar, menuUl, menuli, menuliActive, menuLink } = style;
+
+    tabs = tabs.map((tab, index) => {
+      const { apiName, url, name } = tab;
+
+      const tabClass =
+        selectedTab === apiName ? menuli + " " + menuliActive : menuli;
+      return (
+        <li className={tabClass} key={index}>
+          <a href={url} className={menuLink} onClick={this.changeTab}>
+            {name}
+          </a>
+        </li>
+      );
+    });
+    return (
+      <div className={topbar}>
+        <ul className={menuUl}>{tabs}</ul>
+      </div>
+    );
+  }
+}
+
+Header.propTypes = {
+  push: PropTypes.func
+};
+
+const mapStateToProps = (state, ownProps) => {
+  return {};
+};
+
+export default connect(
+  mapStateToProps,
+  { push, showConfirmBox: alertAction.showConfirmBox }
+)(Header);

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

@@ -0,0 +1,43 @@
+.topbar {
+  min-height: 45px;
+  background: #1e2633;
+
+  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.25);
+  width: 100%;
+  z-index: 5;
+  color: #fff;
+}
+
+:global ul,
+:global li {
+  padding: 0;
+  margin: 0;
+}
+
+.menuUl {
+  list-style: none;
+}
+
+.menuli {
+  float: left;
+  box-sizing: border-box;
+  cursor: pointer;
+  position: relative;
+  font-size: 12px;
+  letter-spacing: 0.6px;
+  text-transform: uppercase;
+}
+
+.menuliActive {
+  background: #4b515c;
+}
+
+.menuLink {
+  padding: 17px 14px 15px;
+  float: left;
+  line-height: 13px;
+  color: #fff;
+  max-width: 110px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

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

@@ -0,0 +1,63 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { replace } from "../../actions";
+class Redirect extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return null;
+  }
+
+  componentDidMount() {
+    if (this.props.isMatch) {
+      this.props.replace(this.props.to(this.props.location));
+    }
+  }
+
+  componentDidUpdate() {
+    if (this.props.isMatch) {
+      this.props.replace(this.props.to(this.props.location));
+    }
+  }
+}
+
+Redirect.propTypes = {
+  from: PropTypes.shape({
+    name: PropTypes.string,
+    module: PropTypes.string
+  }),
+  to: PropTypes.func
+};
+function mapStateToProps(state, props) {
+  let url = state.routing.urls[props.from.name];
+
+  if (url && url.match == 2) {
+    let { module } = props.from;
+    if (props.from.module) {
+      if (state.routing.paramMap.moduleName == props.from.module) {
+        return {
+          isMatch: true,
+          location: state.routing.location
+        };
+      }
+      return {
+        isMatch: false
+      };
+    }
+    return {
+      isMatch: true
+    };
+  }
+  return {
+    isMatch: false,
+    location: state.routing.location
+  };
+}
+
+export default connect(
+  mapStateToProps,
+  { replace }
+)(Redirect);

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

@@ -0,0 +1,47 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+
+import Redirect from "../Redirect";
+
+class Redirector extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let { urls } = this.props;
+    return (
+      <div style={{ display: "none" }}>
+        {urls.map((url, i) => (
+          <Redirect
+            key={`redirect${i}`}
+            from={{ name: url.name, module: url.module }}
+            to={location =>
+              Object.assign({}, location, {
+                pathname: `${url.pathname}`
+              })
+            }
+          />
+        ))}
+      </div>
+    );
+  }
+}
+
+Redirector.propTypes = {
+  urls: PropTypes.array.isRequired
+};
+
+function mapStateToProps(state, props) {
+  const urls = [
+    {
+      name: "sampleList",
+      module: "sample",
+      pathname: `${state.routing.location.pathname}/sample`
+    }
+  ];
+
+  return { urls };
+}
+export default connect(mapStateToProps)(Redirector);

package/templates/app/src/containers/SampleListContainer/ListContainer.js

@@ -0,0 +1,42 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { push, alertAction } from "../../actions";
+import { getSampleList } from "../../actions/SampleActions";
+import style from "./ListContainer.module.css";
+import SampleList from "../../components/Sample/SampleList";
+
+class ListContainer extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  componentDidMount() {
+    const { getSampleList } = this.props;
+    getSampleList().then(res => {});
+  }
+  render() {
+    const { samples = [] } = this.props;
+    return (
+      <div className={style.container}>
+        <SampleList samples={samples} />
+      </div>
+    );
+  }
+}
+
+ListContainer.propTypes = {
+  push: PropTypes.func,
+  getSampleList: PropTypes.func,
+  samples: PropTypes.array.isRequired
+};
+
+const mapStateToProps = (state, ownProps) => {
+  const { samples = [] } = state;
+  return { samples };
+};
+
+export default connect(
+  mapStateToProps,
+  { push, getSampleList }
+)(ListContainer);

package/templates/app/src/containers/SampleListContainer/ListContainer.module.css

@@ -0,0 +1,3 @@
+.container {
+  padding: 20px;
+}

package/templates/app/src/historyChange.js

@@ -0,0 +1,5 @@
+export const historyChange = (routing, res, { getState, dispatch }) => {
+  let state = getState();
+
+  res();
+};

package/templates/app/src/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8" />
+    <title></title>
+  </head>
+  <body>
+    <div id="container"></div>
+  </body>
+</html>

package/templates/app/src/index.js

@@ -0,0 +1,24 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { Provider } from "react-redux";
+import { ConnectI18NProvider } from "fz-i18n";
+import configureStore from "./store/configureStore";
+import AppContainer from "./containers/AppContainer";
+
+const store = configureStore();
+setTimeout(() => {
+  ReactDOM.render(
+    <Provider store={store}>
+      <ConnectI18NProvider
+        direction={document.getElementsByTagName("html")[0].dir}
+        i18n={() => {}}
+        permission={{}}
+        timeZone={state => ""}
+        license={""}
+      >
+        <AppContainer />
+      </ConnectI18NProvider>
+    </Provider>,
+    document.getElementById("container")
+  );
+}, 1);

package/templates/app/src/middleware/PromiseMiddleware.js

@@ -0,0 +1,59 @@
+export default function promiseMiddleware({ dispatch, getState }) {
+  return function(next) {
+    return function(action) {
+      const { types, callAPI, shouldCallAPI = () => true, payload } = action;
+      if (!types) {
+        // Normal action: pass it o
+        return next(action);
+      }
+
+      if (
+        !Array.isArray(types) ||
+        types.length !== 3 ||
+        !types.every(type => typeof type === 'string')
+      ) {
+        throw new Error('Expected an array of three string types.');
+      }
+
+      if (typeof callAPI !== 'function') {
+        throw new Error('Expected fetch to be a function.');
+      }
+
+      if (!shouldCallAPI(getState())) {
+        return Promise.resolve();
+      }
+      const [requestType, successType, failureType] = types;
+
+      dispatch({
+        type: requestType,
+        data: typeof payload === 'function' ? payload(getState()) : payload
+      });
+      return callAPI(getState(), getState).then(
+        response => {
+          let action = dispatch(
+            Object.assign(
+              {},
+              {
+                data: response,
+                type: successType
+              }
+            )
+          );
+          return action;
+        },
+        error => {
+          dispatch(
+            Object.assign(
+              {},
+              {
+                data: error,
+                type: failureType
+              }
+            )
+          );
+          throw error;
+        }
+      );
+    };
+  };
+}

package/templates/app/src/reducers/alertData.js

@@ -0,0 +1,11 @@
+export const alertData = (state = {}, { type, data }) => {
+  switch (type) {
+    case "ALERT_SHOW":
+      return data;
+    case "ALERT_HIDE":
+      return {};
+
+    default:
+  }
+  return state;
+};

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

@@ -0,0 +1,6 @@
+import { samples } from "./samples";
+import { alertData } from "./alertData";
+
+const reducers = { samples, alertData };
+
+export default reducers;

package/templates/app/src/reducers/samples.js

@@ -0,0 +1,19 @@
+function samples(state = [], { data, type }) {
+  switch (type) {
+    case "SAMPLE_LIST_SUCCESS": {
+      return data;
+      break;
+    }
+
+    case "ADD_SAMPLE_SUCCESS": {
+      let newState = Object.assign({}, state);
+      return [...state, ...[data]];
+      break;
+    }
+
+    default:
+      return state;
+  }
+}
+
+export { samples };

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");
+//}