Create synapse-admin using 'rekit create --sass synapse-admin'

Change-Id: I14a94754264c83faffb7fea5099d37c97e60b07a

src/Root.js

@@ -0,0 +1,57 @@
+/* This is the Root component mainly initializes Redux and React Router. */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Provider } from 'react-redux';
+import { Switch, Route } from 'react-router-dom';
+import { ConnectedRouter } from 'react-router-redux';
+import history from './common/history';
+
+function renderRouteConfigV3(routes, contextPath) {
+  // Resolve route config object in React Router v3.
+  const children = []; // children component list
+
+  const renderRoute = (item, routeContextPath) => {
+    let newContextPath;
+    if (/^\//.test(item.path)) {
+      newContextPath = item.path;
+    } else {
+      newContextPath = `${routeContextPath}/${item.path}`;
+    }
+    newContextPath = newContextPath.replace(/\/+/g, '/');
+    if (item.component && item.childRoutes) {
+      const childRoutes = renderRouteConfigV3(item.childRoutes, newContextPath);
+      children.push(
+        <Route
+          key={newContextPath}
+          render={props => <item.component {...props}>{childRoutes}</item.component>}
+          path={newContextPath}
+        />
+      );
+    } else if (item.component) {
+      children.push(<Route key={newContextPath} component={item.component} path={newContextPath} exact />);
+    } else if (item.childRoutes) {
+      item.childRoutes.forEach(r => renderRoute(r, newContextPath));
+    }
+  };
+
+  routes.forEach(item => renderRoute(item, contextPath));
+
+  // Use Switch so that only the first matched route is rendered.
+  return <Switch>{children}</Switch>;
+}
+
+export default class Root extends React.Component {
+  static propTypes = {
+    store: PropTypes.object.isRequired,
+    routeConfig: PropTypes.array.isRequired,
+  };
+  render() {
+    const children = renderRouteConfigV3(this.props.routeConfig, '/');
+    return (
+      <Provider store={this.props.store}>
+        <ConnectedRouter history={history}>{children}</ConnectedRouter>
+      </Provider>
+    );
+  }
+}

src/common/configStore.js

@@ -0,0 +1,44 @@
+import { createStore, applyMiddleware, compose } from 'redux';
+import thunk from 'redux-thunk';
+import { routerMiddleware } from 'react-router-redux';
+import history from './history';
+import rootReducer from './rootReducer';
+
+const router = routerMiddleware(history);
+
+// NOTE: Do not change middleares delaration pattern since rekit plugins may register middlewares to it.
+const middlewares = [
+  thunk,
+  router,
+];
+
+let devToolsExtension = f => f;
+
+/* istanbul ignore if  */
+if (process.env.NODE_ENV === 'development') {
+  const { createLogger } = require('redux-logger');
+
+  const logger = createLogger({ collapsed: true });
+  middlewares.push(logger);
+
+  if (window.devToolsExtension) {
+    devToolsExtension = window.devToolsExtension();
+  }
+}
+
+export default function configureStore(initialState) {
+  const store = createStore(rootReducer, initialState, compose(
+    applyMiddleware(...middlewares),
+    devToolsExtension
+  ));
+
+  /* istanbul ignore if  */
+  if (module.hot) {
+    // Enable Webpack hot module replacement for reducers
+    module.hot.accept('./rootReducer', () => {
+      const nextRootReducer = require('./rootReducer').default; // eslint-disable-line
+      store.replaceReducer(nextRootReducer);
+    });
+  }
+  return store;
+}

src/common/history.js

@@ -0,0 +1,5 @@
+import createHistory from 'history/createBrowserHistory';
+
+// A singleton history object for easy API navigation
+const history = createHistory();
+export default history;

src/common/rootReducer.js

@@ -0,0 +1,19 @@
+import { combineReducers } from 'redux';
+import { routerReducer } from 'react-router-redux';
+import homeReducer from '../features/home/redux/reducer';
+import commonReducer from '../features/common/redux/reducer';
+import examplesReducer from '../features/examples/redux/reducer';
+
+// NOTE 1: DO NOT CHANGE the 'reducerMap' name and the declaration pattern.
+// This is used for Rekit cmds to register new features, remove features, etc.
+// NOTE 2: always use the camel case of the feature folder name as the store branch name
+// So that it's easy for others to understand it and Rekit could manage them.
+
+const reducerMap = {
+  router: routerReducer,
+  home: homeReducer,
+  common: commonReducer,
+  examples: examplesReducer,
+};
+
+export default combineReducers(reducerMap);

src/common/routeConfig.js

@@ -0,0 +1,44 @@
+import { App } from '../features/home';
+import { PageNotFound } from '../features/common';
+import homeRoute from '../features/home/route';
+import commonRoute from '../features/common/route';
+import examplesRoute from '../features/examples/route';
+import _ from 'lodash';
+
+// NOTE: DO NOT CHANGE the 'childRoutes' name and the declaration pattern.
+// This is used for Rekit cmds to register routes config for new features, and remove config when remove features, etc.
+const childRoutes = [
+  homeRoute,
+  commonRoute,
+  examplesRoute,
+];
+
+const routes = [{
+  path: '/',
+  component: App,
+  childRoutes: [
+    ...childRoutes,
+    { path: '*', name: 'Page not found', component: PageNotFound },
+  ].filter(r => r.component || (r.childRoutes && r.childRoutes.length > 0)),
+}];
+
+// Handle isIndex property of route config:
+//  Dupicate it and put it as the first route rule.
+function handleIndexRoute(route) {
+  if (!route.childRoutes || !route.childRoutes.length) {
+    return;
+  }
+
+  const indexRoute = _.find(route.childRoutes, (child => child.isIndex));
+  if (indexRoute) {
+    const first = { ...indexRoute };
+    first.path = '';
+    first.exact = true;
+    first.autoIndexRoute = true; // mark it so that the simple nav won't show it.
+    route.childRoutes.unshift(first);
+  }
+  route.childRoutes.forEach(handleIndexRoute);
+}
+
+routes.forEach(handleIndexRoute);
+export default routes;

src/features/common/PageNotFound.js

@@ -0,0 +1,11 @@
+import React, { PureComponent } from 'react';
+
+export default class PageNotFound extends PureComponent {
+  render() {
+    return (
+      <div className="common-page-not-found">
+        Page not found.
+      </div>
+    );
+  }
+}

src/features/common/PageNotFound.scss

@@ -0,0 +1,5 @@
+@import '../../styles/mixins';
+
+.common-page-not-found {
+  color: red;
+}

src/features/common/index.js

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

src/features/common/redux/initialState.js

@@ -0,0 +1,12 @@
+// Initial state is the place you define all initial values for the Redux store of the feature.
+// In the 'standard' way, initialState is defined in reducers: http://redux.js.org/docs/basics/Reducers.html
+// But when application grows, there will be multiple reducers files, it's not intuitive what data is managed by the whole store.
+// So Rekit extracts the initial state definition into a separate module so that you can have
+// a quick view about what data is used for the feature, at any time.
+
+// NOTE: initialState constant is necessary so that Rekit could auto add initial state when creating async actions.
+
+const initialState = {
+};
+
+export default initialState;

src/features/common/redux/reducer.js

@@ -0,0 +1,24 @@
+// This is the root reducer of the feature. It is used for:
+//   1. Load reducers from each action in the feature and process them one by one.
+//      Note that this part of code is mainly maintained by Rekit, you usually don't need to edit them.
+//   2. Write cross-topic reducers. If a reducer is not bound to some specific action.
+//      Then it could be written here.
+// Learn more from the introduction of this approach:
+// https://medium.com/@nate_wang/a-new-approach-for-managing-redux-actions-91c26ce8b5da.
+
+import initialState from './initialState';
+
+const reducers = [
+];
+
+export default function reducer(state = initialState, action) {
+  let newState;
+  switch (action.type) {
+    // Handle cross-topic actions here
+    default:
+      newState = state;
+      break;
+  }
+  /* istanbul ignore next */
+  return reducers.reduce((s, r) => r(s, action), newState);
+}

src/features/common/route.js

@@ -0,0 +1,9 @@
+// This is the JSON way to define React Router rules in a Rekit app.
+// Learn more from: http://rekit.js.org/docs/routing.html
+
+export default {
+  path: 'common',
+  name: 'Common',
+  childRoutes: [
+  ],
+};

src/features/common/style.scss

@@ -0,0 +1 @@
+@import '../../styles/mixins';

src/features/examples/CounterPage.js

@@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import * as actions from './redux/actions';
+
+export class CounterPage extends Component {
+  static propTypes = {
+    examples: PropTypes.object.isRequired,
+    actions: PropTypes.object.isRequired,
+  };
+
+  render() {
+    return (
+      <div className="examples-counter-page">
+        <h1>Counter</h1>
+        <p>This is simple counter demo to show how Redux sync actions work.</p>
+        <button className="btn-minus-one" onClick={this.props.actions.counterMinusOne} disabled={this.props.examples.count === 0}>
+          -
+        </button>
+        <span>{this.props.examples.count}</span>
+        <button className="btn-plus-one" onClick={this.props.actions.counterPlusOne}>+</button>
+        <button className="btn-reset" onClick={this.props.actions.counterReset}>
+          Reset
+        </button>
+      </div>
+    );
+  }
+}
+
+/* istanbul ignore next */
+function mapStateToProps(state) {
+  return {
+    examples: state.examples,
+  };
+}
+
+/* istanbul ignore next */
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators({ ...actions }, dispatch),
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(CounterPage);

src/features/examples/CounterPage.scss

@@ -0,0 +1,18 @@
+@import '../../styles/mixins';
+
+.examples-counter-page {
+  color: #555;
+  h1 {
+    margin-top: 0px;
+    font-size: 28px;
+  }
+  span {
+    padding: 0 10px;
+    display: inline-block;
+    min-width: 30px;
+    text-align: center;
+  }
+  button.btn-reset {
+    margin-left: 15px;
+  }
+}

src/features/examples/Layout.js

@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { SidePanel } from './';
+
+export default class Layout extends Component {
+  static propTypes = {
+    children: PropTypes.node,
+  };
+
+  render() {
+    return (
+      <div className="examples-layout">
+        <SidePanel />
+        <div className="examples-page-container">
+          {this.props.children}
+        </div>
+      </div>
+    );
+  }
+}

src/features/examples/Layout.scss

@@ -0,0 +1,9 @@
+@import '../../styles/mixins';
+
+.examples-layout {
+  .examples-page-container {
+    padding: 40px 30px 0 300px;
+    min-width: 400px;
+    max-width: 800px;
+  }
+}

src/features/examples/RedditListPage.js

@@ -0,0 +1,57 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import { fetchRedditList } from './redux/actions';
+
+export class RedditListPage extends Component {
+  static propTypes = {
+    examples: PropTypes.object.isRequired,
+    actions: PropTypes.object.isRequired,
+  };
+
+  render() {
+    const { fetchRedditListPending, redditList, fetchRedditListError } = this.props.examples;
+    const { fetchRedditList } = this.props.actions;
+
+    return (
+      <div className="examples-reddit-list-page">
+        <h1>Reddit API Usage</h1>
+        <p>This demo shows how to use Redux async actions to fetch data from Reddit's REST API.</p>
+        <button className="btn-fetch-reddit" disabled={fetchRedditListPending} onClick={fetchRedditList}>
+          {fetchRedditListPending ? 'Fetching...' : 'Fetch reactjs topics'}
+        </button>
+        {fetchRedditListError && (
+          <div className="fetch-list-error">Failed to load: {fetchRedditListError.toString()}</div>
+        )}
+        {redditList.length > 0 ? (
+          <ul className="examples-reddit-list">
+            {redditList.map(item => (
+              <li key={item.data.id}>
+                <a href={item.data.url}>{item.data.title}</a>
+              </li>
+            ))}
+          </ul>
+        ) : (
+          <div className="no-items-tip">No items yet.</div>
+        )}
+      </div>
+    );
+  }
+}
+
+/* istanbul ignore next */
+function mapStateToProps(state) {
+  return {
+    examples: state.examples,
+  };
+}
+
+/* istanbul ignore next */
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators({ fetchRedditList }, dispatch),
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(RedditListPage);

src/features/examples/RedditListPage.scss

@@ -0,0 +1,24 @@
+@import '../../styles/mixins';
+
+.examples-reddit-list-page {
+  color: #555;
+  h1 {
+    margin-top: 0px;
+    font-size: 28px;
+  }
+  a {
+    color: #2db7f5;
+    text-decoration: none;
+    &:hover {
+      color: #f90;
+    }
+  }
+  .fetch-list-error {
+    display: block;
+    margin-top: 20px;
+    color: red;
+  }
+  .no-items-tip {
+    margin-top: 15px;
+  }
+}

src/features/examples/SidePanel.js

@@ -0,0 +1,54 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import * as actions from './redux/actions';
+
+export class SidePanel extends Component {
+  static propTypes = {
+    examples: PropTypes.object.isRequired,
+    actions: PropTypes.object.isRequired,
+  };
+
+  render() {
+    return (
+      <div className="examples-side-panel">
+        <ul>
+          <li>
+            <Link to="/examples">Welcome</Link>
+          </li>
+          <li>
+            <Link to="/examples/counter">Counter Demo</Link>
+          </li>
+          <li>
+            <Link to="/examples/reddit">Reddit API Demo</Link>
+          </li>
+          <li>
+            <Link to="/">Back to start page</Link>
+          </li>
+        </ul>
+        <div className="memo">
+          This is a Rekit feature that contains some examples for you to quick learn how Rekit works. To remove it just
+          delete the feature.
+        </div>
+      </div>
+    );
+  }
+}
+
+/* istanbul ignore next */
+function mapStateToProps(state) {
+  return {
+    examples: state.examples,
+  };
+}
+
+/* istanbul ignore next */
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators({ ...actions }, dispatch),
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(SidePanel);

src/features/examples/SidePanel.scss

@@ -0,0 +1,46 @@
+@import '../../styles/mixins';
+
+.examples-side-panel {
+  position: fixed;
+  box-sizing: border-box;
+  overflow: auto;
+  top: 0;
+  left: 0;
+  margin: 0;
+  padding: 40px;
+  width: 260px;
+  height: 100%;
+  background-color: #f7f7f7;
+  ul,
+  li {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+  li {
+    padding: 8px;
+  }
+
+  a {
+    color: #2db7f5;
+    text-decoration: none;
+    &:hover {
+      color: #f90;
+    }
+  }
+
+  .memo {
+    &:before {
+      content: ' ';
+      display: block;
+      height: 2px;
+      width: 60px;
+      margin-bottom: 10px;
+      background-color: #ddd;
+    }
+    font-size: 13px;
+    margin-top: 40px;
+    line-height: 150%;
+    color: #aaa;
+  }
+}

src/features/examples/WelcomePage.js

@@ -0,0 +1,57 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import rekitLogo from '../../images/rekit-logo.svg';
+import * as actions from './redux/actions';
+
+export class WelcomePage extends Component {
+  static propTypes = {
+    examples: PropTypes.object.isRequired,
+    actions: PropTypes.object.isRequired,
+  };
+
+  render() {
+    return (
+      <div className="examples-welcome-page">
+        <a href="http://github.com/supnate/rekit">
+          <img src={rekitLogo} className="app-logo" alt="logo" />
+        </a>
+        <h1>Welcome to Rekit!</h1>
+        <p>
+          Contratulations! You have created your Rekit app successfully! Seeing this page means everything works well
+          now.
+        </p>
+        <p>
+          By default <a href="https://github.com/supnate/rekit">Rekit Studio</a> is also started at{' '}
+          <a href="http://localhost:6076">http://localhost:6076</a> to manage the project.
+        </p>
+        <p>
+          This is an example feature showing about how to layout the container, how to use Redux and React Router. If
+          you want to remove all sample code, just delete the feature from Rekit Studio. Alternatively you can run&nbsp;
+          <code>rekit remove feature examples</code> by command line under the project folder.
+        </p>
+        <p>
+          To learn more about how to get started, you can visit:{' '}
+          <a href="http://rekit.js.org/docs/get-started.html">Get started</a>
+        </p>
+      </div>
+    );
+  }
+}
+
+/* istanbul ignore next */
+function mapStateToProps(state) {
+  return {
+    examples: state.examples,
+  };
+}
+
+/* istanbul ignore next */
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators({ ...actions }, dispatch),
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(WelcomePage);

src/features/examples/WelcomePage.scss

@@ -0,0 +1,36 @@
+@import '../../styles/mixins';
+
+.examples-welcome-page {
+  line-height: 160%;
+  position: relative;
+  color: #555;
+
+  a {
+    color: #2db7f5;
+    text-decoration: none;
+    &:hover {
+      color: #f90;
+    }
+  }
+
+  .app-logo {
+    position: absolute;
+    top: -14px;
+    left: 0px;
+    width: 50px;
+  }
+
+  h1 {
+    padding-left: 60px;
+    margin-bottom: 40px;
+    font-size: 28px;
+  }
+
+  h3 {
+    margin-top: 20px;
+  }
+
+  code {
+    font-size: 14px;
+  }
+}

src/features/examples/index.js

@@ -0,0 +1,5 @@
+export { default as SidePanel } from './SidePanel';
+export { default as WelcomePage } from './WelcomePage';
+export { default as CounterPage } from './CounterPage';
+export { default as RedditListPage } from './RedditListPage';
+export { default as Layout } from './Layout';

src/features/examples/redux/actions.js

@@ -0,0 +1,4 @@
+export { counterPlusOne } from './counterPlusOne';
+export { counterMinusOne } from './counterMinusOne';
+export { counterReset } from './counterReset';
+export { fetchRedditList, dismissFetchRedditListError } from './fetchRedditList';

src/features/examples/redux/constants.js

@@ -0,0 +1,7 @@
+export const EXAMPLES_COUNTER_PLUS_ONE = 'EXAMPLES_COUNTER_PLUS_ONE';
+export const EXAMPLES_COUNTER_MINUS_ONE = 'EXAMPLES_COUNTER_MINUS_ONE';
+export const EXAMPLES_COUNTER_RESET = 'EXAMPLES_COUNTER_RESET';
+export const EXAMPLES_FETCH_REDDIT_LIST_BEGIN = 'EXAMPLES_FETCH_REDDIT_LIST_BEGIN';
+export const EXAMPLES_FETCH_REDDIT_LIST_SUCCESS = 'EXAMPLES_FETCH_REDDIT_LIST_SUCCESS';
+export const EXAMPLES_FETCH_REDDIT_LIST_FAILURE = 'EXAMPLES_FETCH_REDDIT_LIST_FAILURE';
+export const EXAMPLES_FETCH_REDDIT_LIST_DISMISS_ERROR = 'EXAMPLES_FETCH_REDDIT_LIST_DISMISS_ERROR';

src/features/examples/redux/counterMinusOne.js

@@ -0,0 +1,24 @@
+// Rekit uses a new approach to organizing actions and reducers. That is
+// putting related actions and reducers in one file. See more at:
+// https://medium.com/@nate_wang/a-new-approach-for-managing-redux-actions-91c26ce8b5da
+
+import { EXAMPLES_COUNTER_MINUS_ONE } from './constants';
+
+export function counterMinusOne() {
+  return {
+    type: EXAMPLES_COUNTER_MINUS_ONE,
+  };
+}
+
+export function reducer(state, action) {
+  switch (action.type) {
+    case EXAMPLES_COUNTER_MINUS_ONE:
+      return {
+        ...state,
+        count: state.count - 1,
+      };
+
+    default:
+      return state;
+  }
+}

src/features/examples/redux/counterPlusOne.js

@@ -0,0 +1,24 @@
+// Rekit uses a new approach to organizing actions and reducers. That is
+// putting related actions and reducers in one file. See more at:
+// https://medium.com/@nate_wang/a-new-approach-for-managing-redux-actions-91c26ce8b5da
+
+import { EXAMPLES_COUNTER_PLUS_ONE } from './constants';
+
+export function counterPlusOne() {
+  return {
+    type: EXAMPLES_COUNTER_PLUS_ONE,
+  };
+}
+
+export function reducer(state, action) {
+  switch (action.type) {
+    case EXAMPLES_COUNTER_PLUS_ONE:
+      return {
+        ...state,
+        count: state.count + 1,
+      };
+
+    default:
+      return state;
+  }
+}

src/features/examples/redux/counterReset.js

@@ -0,0 +1,24 @@
+// Rekit uses a new approach to organizing actions and reducers. That is
+// putting related actions and reducers in one file. See more at:
+// https://medium.com/@nate_wang/a-new-approach-for-managing-redux-actions-91c26ce8b5da
+
+import { EXAMPLES_COUNTER_RESET } from './constants';
+
+export function counterReset() {
+  return {
+    type: EXAMPLES_COUNTER_RESET,
+  };
+}
+
+export function reducer(state, action) {
+  switch (action.type) {
+    case EXAMPLES_COUNTER_RESET:
+      return {
+        ...state,
+        count: 0,
+      };
+
+    default:
+      return state;
+  }
+}

src/features/examples/redux/fetchRedditList.js

@@ -0,0 +1,97 @@
+import axios from 'axios';
+import {
+  EXAMPLES_FETCH_REDDIT_LIST_BEGIN,
+  EXAMPLES_FETCH_REDDIT_LIST_SUCCESS,
+  EXAMPLES_FETCH_REDDIT_LIST_FAILURE,
+  EXAMPLES_FETCH_REDDIT_LIST_DISMISS_ERROR,
+} from './constants';
+
+// Rekit uses redux-thunk for async actions by default: https://github.com/gaearon/redux-thunk
+// If you prefer redux-saga, you can use rekit-plugin-redux-saga: https://github.com/supnate/rekit-plugin-redux-saga
+export function fetchRedditList(args = {}) {
+  return dispatch => {
+    // optionally you can have getState as the second argument
+    dispatch({
+      type: EXAMPLES_FETCH_REDDIT_LIST_BEGIN,
+    });
+
+    // Return a promise so that you could control UI flow without states in the store.
+    // For example: after submit a form, you need to redirect the page to another when succeeds or show some errors message if fails.
+    // It's hard to use state to manage it, but returning a promise allows you to easily achieve it.
+    // e.g.: handleSubmit() { this.props.actions.submitForm(data).then(()=> {}).catch(() => {}); }
+    const promise = new Promise((resolve, reject) => {
+      // doRequest is a placeholder Promise. You should replace it with your own logic.
+      // See the real-word example at:  https://github.com/supnate/rekit/blob/master/src/features/home/redux/fetchRedditReactjsList.js
+      // args.error here is only for test coverage purpose.
+      const doRequest = axios.get('http://www.reddit.com/r/reactjs.json');
+
+      doRequest.then(
+        res => {
+          dispatch({
+            type: EXAMPLES_FETCH_REDDIT_LIST_SUCCESS,
+            data: res.data,
+          });
+          resolve(res);
+        },
+        // Use rejectHandler as the second argument so that render errors won't be caught.
+        err => {
+          dispatch({
+            type: EXAMPLES_FETCH_REDDIT_LIST_FAILURE,
+            data: { error: err },
+          });
+          reject(err);
+        }
+      );
+    });
+
+    return promise;
+  };
+}
+
+// Async action saves request error by default, this method is used to dismiss the error info.
+// If you don't want errors to be saved in Redux store, just ignore this method.
+export function dismissFetchRedditListError() {
+  return {
+    type: EXAMPLES_FETCH_REDDIT_LIST_DISMISS_ERROR,
+  };
+}
+
+export function reducer(state, action) {
+  switch (action.type) {
+    case EXAMPLES_FETCH_REDDIT_LIST_BEGIN:
+      // Just after a request is sent
+      return {
+        ...state,
+        fetchRedditListPending: true,
+        fetchRedditListError: null,
+      };
+
+    case EXAMPLES_FETCH_REDDIT_LIST_SUCCESS:
+      // The request is success
+      return {
+        ...state,
+        redditList: action.data.data.children,
+
+        fetchRedditListPending: false,
+        fetchRedditListError: null,
+      };
+
+    case EXAMPLES_FETCH_REDDIT_LIST_FAILURE:
+      // The request is failed
+      return {
+        ...state,
+        fetchRedditListPending: false,
+        fetchRedditListError: action.data.error,
+      };
+
+    case EXAMPLES_FETCH_REDDIT_LIST_DISMISS_ERROR:
+      // Dismiss the request failure error
+      return {
+        ...state,
+        fetchRedditListError: null,
+      };
+
+    default:
+      return state;
+  }
+}

src/features/examples/redux/initialState.js

@@ -0,0 +1,15 @@
+// Initial state is the place you define all initial values for the Redux store of the feature.
+// In the 'standard' way, initialState is defined in reducers: http://redux.js.org/docs/basics/Reducers.html
+// But when application grows, there will be multiple reducers files, it's not intuitive what data is managed by the whole store.
+// So Rekit extracts the initial state definition into a separate module so that you can have
+// a quick view about what data is used for the feature, at any time.
+
+// NOTE: initialState constant is necessary so that Rekit could auto add initial state when creating async actions.
+const initialState = {
+  count: 0,
+  redditList: [],
+  fetchRedditListPending: false,
+  fetchRedditListError: null,
+};
+
+export default initialState;

src/features/examples/redux/reducer.js

@@ -0,0 +1,31 @@
+// This is the root reducer of the feature. It is used for:
+//   1. Load reducers from each action in the feature and process them one by one.
+//      Note that this part of code is mainly maintained by Rekit, you usually don't need to edit them.
+//   2. Write cross-topic reducers. If a reducer is not bound to some specific action.
+//      Then it could be written here.
+// Learn more from the introduction of this approach:
+// https://medium.com/@nate_wang/a-new-approach-for-managing-redux-actions-91c26ce8b5da.
+
+import initialState from './initialState';
+import { reducer as counterPlusOneReducer } from './counterPlusOne';
+import { reducer as counterMinusOneReducer } from './counterMinusOne';
+import { reducer as counterResetReducer } from './counterReset';
+import { reducer as fetchRedditListReducer } from './fetchRedditList';
+
+const reducers = [
+  counterPlusOneReducer,
+  counterMinusOneReducer,
+  counterResetReducer,
+  fetchRedditListReducer,
+];
+
+export default function reducer(state = initialState, action) {
+  let newState;
+  switch (action.type) {
+    // Handle cross-topic actions here
+    default:
+      newState = state;
+      break;
+  }
+  return reducers.reduce((s, r) => r(s, action), newState);
+}

src/features/examples/route.js

@@ -0,0 +1,20 @@
+// This is the JSON way to define React Router rules in a Rekit app.
+// Learn more from: http://rekit.js.org/docs/routing.html
+
+import {
+  WelcomePage,
+  CounterPage,
+  RedditListPage,
+  Layout,
+} from './';
+
+export default {
+  path: 'examples',
+  name: 'Examples',
+  component: Layout,
+  childRoutes: [
+    { path: '', name: 'Welcome page', component: WelcomePage },
+    { path: 'counter', name: 'Counter page', component: CounterPage },
+    { path: 'reddit', name: 'Reddit list page', component: RedditListPage },
+  ],
+};

src/features/examples/style.scss

@@ -0,0 +1,6 @@
+@import '../../styles/mixins';
+@import './SidePanel';
+@import './WelcomePage';
+@import './CounterPage';
+@import './RedditListPage';
+@import './Layout';

src/features/home/App.js

@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+/*
+  This is the root component of your app. Here you define the overall layout
+  and the container of the react router.
+  You should adjust it according to the requirement of your app.
+*/
+export default class App extends Component {
+  static propTypes = {
+    children: PropTypes.node,
+  };
+
+  static defaultProps = {
+    children: '',
+  };
+
+  render() {
+    return (
+      <div className="home-app">
+        <div className="page-container">{this.props.children}</div>
+      </div>
+    );
+  }
+}

src/features/home/App.scss

@@ -0,0 +1,4 @@
+@import '../../styles/mixins';
+
+.home-app {
+}

src/features/home/DefaultPage.js

@@ -0,0 +1,80 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import { Link } from 'react-router-dom';
+import reactLogo from '../../images/react-logo.svg';
+import rekitLogo from '../../images/rekit-logo.svg';
+import * as actions from './redux/actions';
+
+export class DefaultPage extends Component {
+  static propTypes = {
+    home: PropTypes.object.isRequired,
+    actions: PropTypes.object.isRequired,
+  };
+
+  render() {
+    return (
+      <div className="home-default-page">
+        <header className="app-header">
+          <img src={reactLogo} className="app-logo" alt="logo" />
+          <img src={rekitLogo} className="rekit-logo" alt="logo" />
+          <h1 className="app-title">Welcome to React</h1>
+        </header>
+        <div className="app-intro">
+          <h3>To get started:</h3>
+          <ul>
+            <li>
+              Edit component{' '}
+              <a
+                href="http://localhost:6076/element/src%2Ffeatures%2Fhome%2FDefaultPage.js/code"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                src/features/home/DefaultPage.js
+              </a>{' '}
+              for this page.
+            </li>
+            <li>
+              Edit component{' '}
+              <a
+                href="http://localhost:6076/element/src%2Ffeatures%2Fhome%2FApp.js/code"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                src/features/home/App.js
+              </a>{' '}
+              for the root container layout.
+            </li>
+            <li>
+              To see examples, access:&nbsp;
+              <Link to="/examples">/examples</Link>
+            </li>
+            <li>
+              Rekit Studio is running at:&nbsp;
+              <a href="http://localhost:6076/" target="_blank" rel="noopener noreferrer">
+                http://localhost:6076/
+              </a>.
+            </li>
+          </ul>
+        </div>
+      </div>
+    );
+  }
+}
+
+/* istanbul ignore next */
+function mapStateToProps(state) {
+  return {
+    home: state.home,
+  };
+}
+
+/* istanbul ignore next */
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators({ ...actions }, dispatch),
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(DefaultPage);

src/features/home/DefaultPage.scss

@@ -0,0 +1,77 @@
+@import '../../styles/mixins';
+
+.home-default-page {
+  text-align: center;
+  .app {
+    text-align: center;
+  }
+
+  .app-logo {
+    animation: app-logo-spin infinite 10s linear;
+    height: 80px;
+  }
+
+  .rekit-logo {
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    opacity: 0.08;
+    height: 190px;
+  }
+
+  .app-header {
+    background-color: #222;
+    height: 150px;
+    padding: 20px;
+    color: white;
+    overflow: hidden;
+    position: relative;
+  }
+
+  .app-title {
+    font-size: 1.5em;
+  }
+
+  .app-intro {
+    font-size: large;
+  }
+
+  ul,
+  li {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  ul {
+    margin-top: 20px;
+  }
+  li {
+    margin-top: 10px;
+  }
+
+  a {
+    color: #0288d1;
+    text-decoration: none;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  p.memo {
+    width: 500px;
+    color: #999;
+    font-size: 12px;
+    line-height: 150%;
+    margin: auto;
+  }
+
+  @keyframes app-logo-spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}

src/features/home/index.js

@@ -0,0 +1,2 @@
+export { default as App } from './App';
+export { default as DefaultPage } from './DefaultPage';

src/features/home/redux/initialState.js

@@ -0,0 +1,4 @@
+const initialState = {
+};
+
+export default initialState;

src/features/home/redux/reducer.js

@@ -0,0 +1,16 @@
+import initialState from './initialState';
+
+const reducers = [
+];
+
+export default function reducer(state = initialState, action) {
+  let newState;
+  switch (action.type) {
+    // Handle cross-topic actions here
+    default:
+      newState = state;
+      break;
+  }
+  /* istanbul ignore next */
+  return reducers.reduce((s, r) => r(s, action), newState);
+}

src/features/home/route.js

@@ -0,0 +1,15 @@
+import {
+  DefaultPage,
+} from './';
+
+export default {
+  path: '/',
+  name: 'Home',
+  childRoutes: [
+    { path: 'default-page',
+      name: 'Default page',
+      component: DefaultPage,
+      isIndex: true,
+    },
+  ],
+};

src/features/home/style.scss

@@ -0,0 +1,3 @@
+@import '../../styles/mixins';
+@import './App';
+@import './DefaultPage';

src/images/react-logo.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
+    <g fill="#61DAFB">
+        <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
+        <circle cx="420.9" cy="296.5" r="45.7"/>
+        <path d="M520.5 78.1z"/>
+    </g>
+</svg>

src/images/rekit-logo.svg

@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="507px" height="508px" viewBox="0 0 507 508" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
+    <title>Group</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#40C1C5" offset="0%"></stop>
+            <stop stop-color="#79D8DD" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
+            <stop stop-color="#A46E46" offset="0%"></stop>
+            <stop stop-color="#CA8F6B" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-3">
+            <stop stop-color="#F08036" offset="0%"></stop>
+            <stop stop-color="#FAA881" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-4">
+            <stop stop-color="#FBC233" offset="0%"></stop>
+            <stop stop-color="#FEDB67" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group" transform="translate(253.321158, 254.321158) rotate(45.000000) translate(-253.321158, -254.321158) translate(2.321158, 2.821158)">
+            <path d="M340.717172,467.819581 C380.254364,429.329041 441.615845,371.356861 441.615845,315.632062 C441.615845,259.907264 396.44197,214.733389 340.717172,214.733389 C284.992373,214.733389 239.818498,259.907264 239.818498,315.632062 C239.818498,371.356861 301.773607,429.329041 340.717172,467.819581 Z" id="Oval" fill="url(#linearGradient-1)" transform="translate(340.717172, 341.276485) scale(1, -1) rotate(45.000000) translate(-340.717172, -341.276485) "></path>
+            <path d="M160.1003,466.687889 C199.285347,428.540172 260.1003,371.084332 260.1003,315.855857 C260.1003,260.627382 215.328775,215.855857 160.1003,215.855857 C104.871825,215.855857 60.1003,260.627382 60.1003,315.855857 C60.1003,371.084332 121.503594,428.540172 160.1003,466.687889 Z" id="Oval" fill="url(#linearGradient-2)" transform="translate(160.100300, 341.271873) scale(-1, -1) rotate(45.000000) translate(-160.100300, -341.271873) "></path>
+            <path d="M340.171573,285.417818 C379.35662,247.270101 440.171573,189.814261 440.171573,134.585786 C440.171573,79.3573115 395.400048,34.5857864 340.171573,34.5857864 C284.943098,34.5857864 240.171573,79.3573115 240.171573,134.585786 C240.171573,189.814261 301.574866,247.270101 340.171573,285.417818 Z" id="Oval" fill="url(#linearGradient-3)" transform="translate(340.171573, 160.001802) rotate(45.000000) translate(-340.171573, -160.001802) "></path>
+            <path d="M159.707107,286.124924 C198.892154,247.977208 259.707107,190.521368 259.707107,135.292893 C259.707107,80.0644182 214.935582,35.2928932 159.707107,35.2928932 C104.478632,35.2928932 59.7071068,80.0644182 59.7071068,135.292893 C59.7071068,190.521368 121.1104,247.977208 159.707107,286.124924 Z" id="Oval" fill="url(#linearGradient-4)" transform="translate(159.707107, 160.708909) scale(-1, 1) rotate(45.000000) translate(-159.707107, -160.708909) "></path>
+        </g>
+    </g>
+</svg>

src/index.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { AppContainer } from 'react-hot-loader';
+import { render } from 'react-dom';
+import configStore from './common/configStore';
+import routeConfig from './common/routeConfig';
+import Root from './Root';
+
+const store = configStore();
+
+function renderApp(app) {
+  render(
+    <AppContainer>
+      {app}
+    </AppContainer>,
+    document.getElementById('root')
+  );
+}
+
+renderApp(<Root store={store} routeConfig={routeConfig} />);
+
+// Hot Module Replacement API
+/* istanbul ignore if  */
+if (module.hot) {
+  module.hot.accept('./common/routeConfig', () => {
+    const nextRouteConfig = require('./common/routeConfig').default; // eslint-disable-line
+    renderApp(<Root store={store} routeConfig={nextRouteConfig} />);
+  });
+  module.hot.accept('./Root', () => {
+    const nextRoot = require('./Root').default; // eslint-disable-line
+    renderApp(<Root store={store} routeConfig={routeConfig} />);
+  });
+}

src/logo.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
+    <g fill="#61DAFB">
+        <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
+        <circle cx="420.9" cy="296.5" r="45.7"/>
+        <path d="M520.5 78.1z"/>
+    </g>
+</svg>

src/styles/global.scss

@@ -0,0 +1,9 @@
+@import './mixins';
+
+// Here you put all global css rules.
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+}

src/styles/index.scss

@@ -0,0 +1,5 @@
+// index is the entry for all styles.
+@import './global';
+@import '../features/home/style';
+@import '../features/common/style';
+@import '../features/examples/style';