@ebay/muse-lib-react 1.3.0

package/src/common/routeConfig.js

@@ -0,0 +1,135 @@
+import React from 'react';
+import plugin from 'js-plugin';
+import { App, Homepage } from '../features/home';
+import { PageNotFound } from '../features/common';
+import homeRoute from '../features/home/route';
+import commonRoute from '../features/common/route';
+import _ from 'lodash';
+import subAppRoute from '../features/sub-app/route';
+
+// 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, subAppRoute];
+
+// 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);
+}
+
+const normalizeRoutes = routes => {
+  const byId = {};
+  const arr = [...routes];
+  const hasParent = [];
+
+  // traverse routes recursively
+  while (arr.length > 0) {
+    const r = arr.shift();
+    // allow a route point to a parent
+    if (r?.id) {
+      byId[r.id] = r;
+    }
+    if (r.childRoutes) {
+      _.forEachRight([...r.childRoutes], (cr, i) => {
+        // Support path as an array by expanding it to multiple rules
+        if (_.isArray(cr?.path)) {
+          r.childRoutes.splice(
+            i,
+            1,
+            ...cr.path.map(p => {
+              return { ...r, path: p };
+            }),
+          );
+        }
+      });
+      arr.push(...r.childRoutes);
+      [...r.childRoutes].forEach(cr => {
+        // if a route has parent, move it to the correct parent
+        if (cr?.path?.startsWith('/')) {
+          // If it's an absolute path, move it to the top level
+          _.pull(r.childRoutes, cr);
+          routes.unshift(cr);
+        } else if (cr.parent) {
+          hasParent.push(cr);
+          _.pull(r.childRoutes, cr);
+        }
+      });
+    }
+  }
+
+  // for all routes which have parents, put them in the correct childRoutes
+  hasParent.forEach(r => {
+    const parentId = r.parent;
+    if (byId[parentId]) {
+      if (!byId[parentId].childRoutes) byId[parentId].childRoutes = [];
+      byId[parentId].childRoutes.unshift(r);
+    } else {
+      console.warn(`Warning: no parent route found with id ${parentId}.`, r);
+    }
+  });
+};
+
+const routeConfig = () => {
+  const newChildRoutes = [...childRoutes];
+  // Get routes from plugins
+  plugin.invoke('!route').forEach(route => {
+    newChildRoutes.push(..._.castArray(route));
+  });
+
+  // Generate the root route '/'
+  const museGlobal = window.MUSE_GLOBAL || {};
+
+  // Find the homepage
+  let homepage = Homepage;
+  const homepagePlugins = plugin.getPlugins('home.homepage');
+  if (homepagePlugins.length === 1) {
+    homepage = homepagePlugins[0].home.homepage;
+  } else if (homepagePlugins.length > 1) {
+    const definedHomepagePlugin = _.find(homepagePlugins, { name: museGlobal.homepage });
+    if (definedHomepagePlugin) homepage = definedHomepagePlugin.home.homepage;
+    else {
+      homepage = () => (
+        <div style={{ color: 'red', padding: '20px' }}>
+          Failed to show homepage: multiple homepages found from:{' '}
+          {homepagePlugins.map(p => p.name).join(', ')}. You should load only one plugin which
+          defines homepage.
+        </div>
+      );
+    }
+  }
+
+  newChildRoutes.unshift({
+    path: '',
+    component: homepage,
+  });
+
+  const routes = [
+    {
+      path: '/',
+      component: App,
+      childRoutes: [
+        ..._.cloneDeep(newChildRoutes),
+        { path: '*', name: 'Page not found', component: PageNotFound },
+      ].filter(r => r.component || r.render || (r.childRoutes && r.childRoutes.length > 0)),
+    },
+  ];
+  routes.forEach(handleIndexRoute);
+
+  // Handle parent routes
+  normalizeRoutes(routes[0].childRoutes);
+
+  return routes;
+};
+export default routeConfig;

package/src/common/store.js

@@ -0,0 +1,21 @@
+import configStore from './configStore';
+
+export default {
+  store: null,
+  getStore() {
+    if (!this.store) this.store = configStore();
+    return this.store;
+  },
+  getState() {
+    return this.getStore().getState();
+  },
+  dispatch(action) {
+    return this.getStore().dispatch(action);
+  },
+  subscribe(listener) {
+    return this.getStore().subscribe(listener);
+  },
+  replaceReducer(reducer) {
+    return this.getStore().replaceReducer(reducer);
+  },
+};

package/src/features/common/ErrorBoundary.js

@@ -0,0 +1,24 @@
+import React, { Component } from 'react';
+
+export default class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error) {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true };
+  }
+
+  render() {
+    if (this.state.hasError) {
+      // You can render any custom fallback UI
+      return (
+        <div className="common-error-boundary">{this.props.message || 'Something went wrong.'}</div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

package/src/features/common/ErrorBoundary.less

@@ -0,0 +1,6 @@
+@import '../../styles/mixins';
+
+.common-error-boundary {
+  color: red;
+  padding: 20px;
+}

package/src/features/common/Nodes.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { extendArray } from './utils';
+
+/**
+ * A component that renders a list of nodes with ability to extend the list.
+ * @param {Array} items - The list of nodes to render.
+ */
+export default function Nodes({ items = [], extName = 'items', extBase, extArgs }) {
+  extendArray(items, extName, extBase, extArgs);
+  const nodes = [];
+  items.filter(Boolean).forEach(n => {
+    let node;
+    if (n.render) node = n.render();
+    else if (n.content) node = n.content;
+    else if (n.component) node = <n.component key={n.key} {...n.props} />;
+    nodes.push(node);
+  });
+
+  return nodes;
+}

package/src/features/common/PageNotFound.js

@@ -0,0 +1,3 @@
+export default function PageNotFound() {
+  return <div className="common-page-not-found">Page not found.</div>;
+}

package/src/features/common/PageNotFound.less

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

package/src/features/common/index.js

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

package/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;

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

package/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: [
+  ],
+};

package/src/features/common/style.less

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

package/src/features/common/useExtPoint.js

@@ -0,0 +1,28 @@
+import { useState, useCallback } from 'react';
+import jsPlugin from 'js-plugin';
+import _ from 'lodash';
+
+// allow use hooks in ext points
+// TODO: it always flatten items, which may not be what we want?
+export default function useExtPoint(extPointName, extArgs) {
+  const components = jsPlugin.invoke('!' + extPointName, extArgs);
+
+  const [values, setValues] = useState([]);
+  const handleCallback = useCallback(
+    value => {
+      setValues(_.flatten([...values, value]));
+    },
+    [values],
+  );
+
+  return {
+    extNode: (
+      <>
+        {components.map((Comp, index) => {
+          return <Comp key={index} callback={handleCallback} {...extArgs} />;
+        })}
+      </>
+    ),
+    values,
+  };
+}

package/src/features/common/utils.js

@@ -0,0 +1,20 @@
+import jsPlugin from 'js-plugin';
+import _ from 'lodash';
+
+/**
+ * @description Make an array extensible by js plugins.
+ * @param {*} arr
+ * @param {*} extName
+ * @param {*} extBase
+ * @param  {...any} args
+ */
+export const extendArray = (arr, extName, extBase, ...args) => {
+  const capitalName = extName.charAt(0).toUpperCase() + extName.slice(1);
+  jsPlugin.invoke(`${extBase}.preProcess${capitalName}`, ...args);
+  const items = _.flatten(jsPlugin.invoke(`${extBase}.get${capitalName}`, ...args));
+  arr.push(...items);
+  jsPlugin.invoke(`${extBase}.process${capitalName}`, ...args);
+  jsPlugin.invoke(`${extBase}.postProcess${capitalName}`, ...args);
+  jsPlugin.sort(arr);
+  return arr;
+};

package/src/features/home/App.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import plugin from 'js-plugin';
+import useParentRouteChange from '../sub-app/hooks/useParentRouteChange';
+
+export default function App({ children }) {
+  // home.rootComponent is used to define some global placeholder for something like Modals, Drawers, etc.
+  const rootComponentPlugins = plugin.getPlugins('rootComponent');
+
+  // home.mainLayout is used to define the main layout component
+  const layouts = plugin.invoke('!home.mainLayout');
+  useParentRouteChange();
+  if (layouts.length > 1) {
+    const ids = plugin.getPlugins('home.mainLayout').map(p => p.name);
+    return (
+      <div style={{ color: 'red', margin: '20px' }}>
+        Error: multiple layouts found from plugins: {ids.join(', ')}. Each application should only
+        have one main layout.
+      </div>
+    );
+  }
+  const Layout = layouts[0];
+  const ele = Layout ? <Layout>{children}</Layout> : children;
+  return (
+    <div className="home-app muse-app">
+      <div className="muse-app_main-page-container">{ele}</div>
+      <div className="muse-app_plugin-root-placeholder">
+        {rootComponentPlugins.map(p => (
+          <p.rootComponent key={p.name} />
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/features/home/App.less

@@ -0,0 +1,11 @@
+@import '../../styles/mixins';
+
+.home-app.muse-app {
+  .muse-app_plugin-root-placeholder {
+    position: absolute;
+    top: 0;
+    height: 0;
+    width: 0;
+    left: -8000px;
+  }
+}

package/src/features/home/Homepage.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import logo from '../../images/logo.png';
+
+export default function Homepage() {
+  return (
+    <div className="home-homepage">
+      <header className="app-header">
+        <img src={logo} className="app-logo" alt="logo" />
+        <h1 className="app-title">Welcome to Muse!</h1>
+      </header>
+      <div className="app-intro">
+        <p className="memo">This is the default homepage of a Muse application.</p>
+        <h3>To get started:</h3>
+        <ul>
+          <li>
+            <a href="https://go/muse">Read docs</a> for Muse.
+          </li>
+          <li>
+            Join the slack channel{' '}
+            <a href="https://ebay-eng.slack.com/archives/C0194Q1V8G1">#muse</a>.
+          </li>
+          <li>
+            <a href="https://pages.github.corp.ebay.com/muse/muse-site/docs/get-started/first-plugin">
+              Create a plugin
+            </a>{' '}
+            and{' '}
+            <a href="https://pages.github.corp.ebay.com/muse/muse-site/docs/get-started/customize-layout">
+              define the layout/homepage
+            </a>{' '}
+            for the application.
+          </li>
+          <li>
+            <a href="https://pages.github.corp.ebay.com/muse/muse-site/docs/muse-management/plugin-management#build-a-plugin">
+              Build
+            </a>{' '}
+            and{' '}
+            <a href="https://pages.github.corp.ebay.com/muse/muse-site/docs/muse-management/plugin-management#deploy-a-plugin">
+              deploy
+            </a>{' '}
+            the Muse plugin to the application.
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+}

package/src/features/home/Homepage.less

@@ -0,0 +1,63 @@
+@import '../../styles/mixins';
+
+.home-homepage {
+  text-align: center;
+  min-width: 600px;
+
+  .app {
+    text-align: center;
+  }
+
+  .app-logo {
+    height: 80px;
+  }
+
+  .app-header {
+    padding: 40px 20px 20px 20px;
+  }
+
+  h3 {    
+    font-size: 20px;
+    font-weight: bold;
+  }
+
+  .app-title {
+    font-size: 26px;
+    margin-top: 10px;
+  }
+
+  .app-intro {
+    font-size: 16px;
+  }
+
+  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 {
+    color: #999;
+    line-height: 150%;
+
+    font-style: italic;
+    font-size: 14px;
+    margin: 20px auto;
+  }
+}

package/src/features/home/index.js

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

package/src/features/home/redux/initialState.js

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

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

package/src/features/home/route.js

@@ -0,0 +1,6 @@
+export default {
+  path: 'home',
+  name: 'Home',
+  childRoutes: [
+  ],
+};

package/src/features/home/style.less

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

package/src/features/sub-app/C2SProxyFailed.js

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export default function C2SProxyFailed() {
+  return (
+    <div className="sub-app-c-2-s-proxy-failed">
+      <h3>Error: failed to detect c2s proxy.</h3>
+      <p>This page needs c2s proxy, please config it and refresh the page.</p>
+    </div>
+  );
+};

package/src/features/sub-app/C2SProxyFailed.less

@@ -0,0 +1,19 @@
+@import '../../styles/mixins';
+
+.sub-app-c-2-s-proxy-failed {
+  position: absolute;
+  color: orange;
+  line-height: 150%;
+  margin: auto;
+  left: 50%;
+  margin-left: -300px;
+  top: 40%;
+  width: 600px;
+  padding: 20px;
+  border-radius: 4px;
+  border: 1px solid orange;
+
+  h3 {
+    color: orange;
+  }
+}