-
- {plugins.map(({ route, navTitle }, index) => (
-
- {title || "Reaction Admin"}
- Welcome {viewer && viewer.primaryEmailAddress}
-
- {plugins.map(({ MainComponent, route }, index) => (
-
+
+
);
}
-Dashboard.propTypes = {
- plugins: PropTypes.arrayOf(PropTypes.object),
- title: PropTypes.string
-};
-
export default Dashboard;
diff --git a/package/src/Dashboard/Dashboard.test.js b/package/src/Dashboard/Dashboard.test.js
index be72a9f..b66c382 100644
--- a/package/src/Dashboard/Dashboard.test.js
+++ b/package/src/Dashboard/Dashboard.test.js
@@ -1,5 +1,9 @@
+/* eslint-disable react/display-name */
+/* eslint-disable react/prop-types */
+/* eslint-disable react/no-multi-comp */
import React from "react";
import { render } from "../test-utils";
+import { registerRoute } from "../lib/core/routes";
import Dashboard from "./Dashboard";
jest.mock("../hooks/useAuth", () => ({
@@ -12,21 +16,21 @@ jest.mock("../hooks/useAuth", () => ({
})
}));
-const mockPlugins = [
- {
- route: "/test-1",
- navTitle: "Test 1",
- // eslint-disable-next-line react/display-name
- MainComponent: () => (Route Test 1)
- }
-];
+jest.mock("../ShopLogo", () => ({
+ __esModule: true,
+ default: () => null
+}));
+
+registerRoute({
+ group: "navigation",
+ path: "/test",
+ navigationItemTitle: "Test",
+ MainComponent: () => (Main Component)
+});
-test("should be true", () => {
+test("should render the Dashboard component with a single route", () => {
const { asFragment } = render((
-
+
+
+
-
+
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default NavigationDrawer;
diff --git a/package/src/NavigationDrawer/index.js b/package/src/NavigationDrawer/index.js
new file mode 100644
index 0000000..1bcc2d9
--- /dev/null
+++ b/package/src/NavigationDrawer/index.js
@@ -0,0 +1 @@
+export { default } from "./NavigationDrawer";
diff --git a/package/src/Profile/Profile.js b/package/src/Profile/Profile.js
new file mode 100644
index 0000000..ec85e0b
--- /dev/null
+++ b/package/src/Profile/Profile.js
@@ -0,0 +1,22 @@
+import React from "react";
+import { Box } from "@material-ui/core";
+import Blocks from "../Blocks";
+
+/**
+ * @summary Profile React component
+ * @param {Object} props React props
+ * @return {React.Node} React node
+ */
+export default function ProfileMenu() {
+ return (
+
+ {(blocks) =>
+ blocks.map((block, index) => (
+
+ {block}
+
+ ))
+ }
+
+ );
+}
diff --git a/package/src/Profile/index.js b/package/src/Profile/index.js
new file mode 100644
index 0000000..2623c86
--- /dev/null
+++ b/package/src/Profile/index.js
@@ -0,0 +1 @@
+export { default } from "./Profile";
diff --git a/package/src/ProfileMenu/ProfileMenu.js b/package/src/ProfileMenu/ProfileMenu.js
new file mode 100644
index 0000000..d7300f7
--- /dev/null
+++ b/package/src/ProfileMenu/ProfileMenu.js
@@ -0,0 +1,61 @@
+import React, { Fragment, useState } from "react";
+import PropTypes from "prop-types";
+import { useHistory } from "react-router-dom";
+import i18next from "i18next";
+import ButtonBase from "@material-ui/core/ButtonBase";
+import Menu from "@material-ui/core/Menu";
+import MenuItem from "@material-ui/core/MenuItem";
+import {
+ Avatar
+} from "@material-ui/core";
+import useAuth from "../hooks/useAuth";
+
+/**
+ * @summary ProfileMenu React component
+ * @param {Object} props React props
+ * @return {React.Node} React node
+ */
+function ProfileMenu(props) {
+ const { logout, viewer } = useAuth();
+ const history = useHistory();
+ const [menuAnchorEl, setMenuAnchorEl] = useState(null);
+
+ if (!viewer) return null;
+
+ return (
+
+ {
+ setMenuAnchorEl(event.currentTarget);
+ }}
+ >
+
+
+
+
+ );
+}
+
+ProfileMenu.propTypes = {
+ logout: PropTypes.func,
+ viewer: PropTypes.object
+};
+
+export default ProfileMenu;
diff --git a/package/src/ProfileMenu/index.js b/package/src/ProfileMenu/index.js
new file mode 100644
index 0000000..66e00e5
--- /dev/null
+++ b/package/src/ProfileMenu/index.js
@@ -0,0 +1 @@
+export { default } from "./ProfileMenu";
diff --git a/package/src/Routes/Routes.js b/package/src/Routes/Routes.js
new file mode 100644
index 0000000..dddf35a
--- /dev/null
+++ b/package/src/Routes/Routes.js
@@ -0,0 +1,71 @@
+import React, { useContext } from "react";
+import PropTypes from "prop-types";
+import { Switch, Route } from "react-router-dom";
+import Helmet from "react-helmet";
+import i18next from "i18next";
+import UIContext from "../context/UIContext";
+import useMediaQuery from "../hooks/useMediaQuery";
+import ContentLayout from "../ContentLayout";
+
+/**
+ * Operator routes
+ * @param {Object} props ComponentProps
+ * @returns {Object} An object containing filtered routes
+ */
+function Routes({
+ DefaultLayoutComponent = ContentLayout,
+ isExactMatch,
+ routes
+}) {
+ const isMobile = useMediaQuery("mobile");
+ const uiContext = useContext(UIContext);
+
+ return (
+
+ {routes.map((route) => (
+ {
+ const title = i18next.t(route.navigationItemLabel);
+
+ if (route.LayoutComponent === null) {
+ return (
+ <>
+
+
+ );
+ }}
+ {...route.props}
+ />
+ ))}
+
+ );
+}
+
+Routes.propTypes = {
+ DefaultLayoutComponent: PropTypes.element,
+ isExactMatch: PropTypes.bool,
+ routes: PropTypes.arrayOf(PropTypes.shape({
+ path: PropTypes.string,
+ props: PropTypes.object
+ }))
+};
+
+export default Routes;
diff --git a/package/src/Routes/index.js b/package/src/Routes/index.js
new file mode 100644
index 0000000..029bd89
--- /dev/null
+++ b/package/src/Routes/index.js
@@ -0,0 +1 @@
+export { default } from "./Routes";
diff --git a/package/src/SettingsDashboard/SettingsDashboard.js b/package/src/SettingsDashboard/SettingsDashboard.js
new file mode 100644
index 0000000..81b42ea
--- /dev/null
+++ b/package/src/SettingsDashboard/SettingsDashboard.js
@@ -0,0 +1,43 @@
+import React from "react";
+import i18next from "i18next";
+import { Switch, Route } from "react-router-dom";
+import { Container, Box } from "@material-ui/core";
+import useRoutes from "../hooks/useRoutes";
+import AppBar from "../AppBar";
+import ContentLayoutTwoColumn from "../ContentLayoutTwoColumn";
+import SettingsMenu from "../SettingsMenu";
+
+/**
+ * @name SettingsDashboard
+ * @returns {React.component} a functional React component
+ */
+export default function SettingsDashboard() {
+ const settingsRoutes = useRoutes({ groups: ["settings"] });
+ return (
+
+
+ }
+ DetailComponent={
+
+
+ {
+ settingsRoutes.map((settingRoute) => (
+
+
+ }
+ />
+ );
+}
diff --git a/package/src/SettingsDashboard/index.js b/package/src/SettingsDashboard/index.js
new file mode 100644
index 0000000..4306e76
--- /dev/null
+++ b/package/src/SettingsDashboard/index.js
@@ -0,0 +1 @@
+export { default } from "./SettingsDashboard";
diff --git a/package/src/SettingsMenu/SettingsMenu.js b/package/src/SettingsMenu/SettingsMenu.js
new file mode 100644
index 0000000..5ed271c
--- /dev/null
+++ b/package/src/SettingsMenu/SettingsMenu.js
@@ -0,0 +1,76 @@
+import React from "react";
+import i18next from "i18next";
+import {
+ List,
+ ListItem,
+ ListItemText,
+ makeStyles
+} from "@material-ui/core";
+import { useHistory, useRouteMatch } from "react-router-dom";
+import useRoutes from "../hooks/useRoutes";
+
+const useStyles = makeStyles((theme) => ({
+ listItemRoot: {
+ "paddingTop": theme.spacing(1),
+ "paddingBottom": theme.spacing(1),
+ "paddingLeft": theme.spacing(4),
+ "marginBottom": 2,
+ "&$focusVisible": {
+ color: theme.palette.colors.coolGrey500,
+ fontWeight: theme.typography.fontWeightSemiBold,
+ backgroundColor: theme.palette.colors.darkBlue100
+ },
+ "&$selected, &$selected:hover": {
+ color: theme.palette.colors.coolGrey500,
+ fontWeight: theme.typography.fontWeightSemiBold,
+ backgroundColor: theme.palette.colors.darkBlue100
+ }
+ },
+ listItemButton: {
+ "borderRadius": theme.shape.borderRadius,
+ "&:hover": {
+ textDecoration: "none",
+ backgroundColor: theme.palette.colors.darkBlue100
+ }
+ },
+ /* Pseudo-class applied to the `component`'s `focusVisibleClassName` prop if `button={true}`. */
+ focusVisible: {},
+ /* Pseudo-class applied to the root element if `selected={true}`. */
+ selected: {}
+}));
+
+/**
+ * @summary A list settings for a shop
+ * @returns {Node} React node
+ */
+export default function SettingsMenu() {
+ const classes = useStyles();
+ const history = useHistory();
+ const routeMatch = useRouteMatch("/settings/:setting");
+ const settingsRoutes = useRoutes({ groups: ["settings"] });
+
+ return (
+ 
+ {shouldShowShopName &&
+
+ Reaction Commerce
+
+ }
+
+ );
+ }
+
+ const customLogoFromUpload = shop.brandAssets && shop.brandAssets.navbarBrandImage && shop.brandAssets.navbarBrandImage.large;
+ const customLogoFromUrlInput = shop.shopLogoUrls && shop.shopLogoUrls.primaryShopLogoUrl;
+
+ return (
+
+
+ 
+ {shouldShowShopName &&
+
+ {shop.name}
+
+ }
+
+
+ );
+}
+
+ShopLogo.propTypes = {
+ linkTo: PropTypes.string,
+ shopId: PropTypes.string,
+ shouldShowShopName: PropTypes.bool,
+ size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+
+ShopLogo.defaultProps = {
+ linkTo: "/",
+ shouldShowShopName: false,
+ size: 60
+};
+
+export default ShopLogo;
diff --git a/package/src/ShopLogo/index.js b/package/src/ShopLogo/index.js
new file mode 100644
index 0000000..feecf17
--- /dev/null
+++ b/package/src/ShopLogo/index.js
@@ -0,0 +1 @@
+export { default } from "./ShopLogo";
diff --git a/package/src/context/UIContext.js b/package/src/context/UIContext.js
new file mode 100644
index 0000000..7f42907
--- /dev/null
+++ b/package/src/context/UIContext.js
@@ -0,0 +1,13 @@
+import { createContext } from "react";
+
+export default createContext({
+ isDetailDrawerOpen: false,
+ isMobile: false,
+ isNavigationDrawerOpen: true,
+ onCloseDetailDrawer: () => { },
+ onCloseNavigationDrawer: () => { },
+ onToggleDetailDrawer: () => { },
+ onToggleNavigationDrawer: () => { },
+ setDetailDrawerOpen: () => { },
+ setNavigationDrawerOpen: () => { }
+});
diff --git a/package/src/graphql/queries/primaryShopId.graphql b/package/src/graphql/queries/primaryShopId.graphql
new file mode 100644
index 0000000..adcac48
--- /dev/null
+++ b/package/src/graphql/queries/primaryShopId.graphql
@@ -0,0 +1,3 @@
+query getPrimaryShopId {
+ primaryShopId
+}
\ No newline at end of file
diff --git a/package/src/graphql/queries/shop.graphql b/package/src/graphql/queries/shop.graphql
new file mode 100644
index 0000000..875aab5
--- /dev/null
+++ b/package/src/graphql/queries/shop.graphql
@@ -0,0 +1,29 @@
+query getShop($id: ID!) {
+ shop(id: $id) {
+ _id
+ brandAssets {
+ navbarBrandImageId
+ navbarBrandImage {
+ large
+ }
+ }
+ defaultParcelSize {
+ height
+ length
+ weight
+ width
+ }
+ language
+ name
+ shopLogoUrls {
+ primaryShopLogoUrl
+ }
+ storefrontUrls {
+ storefrontHomeUrl
+ storefrontLoginUrl
+ storefrontOrderUrl
+ storefrontOrdersUrl
+ storefrontAccountProfileUrl
+ }
+ }
+}
\ No newline at end of file
diff --git a/package/src/hooks/useCurrentShop.js b/package/src/hooks/useCurrentShop.js
new file mode 100644
index 0000000..19b665d
--- /dev/null
+++ b/package/src/hooks/useCurrentShop.js
@@ -0,0 +1,29 @@
+import { useLazyQuery } from "@apollo/react-hooks";
+import shopQuery from "../graphql/queries/shop.graphql";
+import useCurrentShopId from "./useCurrentShopId.js";
+
+/**
+ * React Hook that gets the globally current shop
+ * @return {Object} Object with `shop` and `shopId` props
+ */
+export default function useCurrentShop() {
+ const { currentShopId: shopId } = useCurrentShopId();
+
+ const [getShop, { called, data, loading, refetch }] = useLazyQuery(shopQuery, {
+ fetchPolicy: "network-only"
+ });
+
+ // Wait until we're sure we have a shop ID to call the query
+ if (shopId && !called) {
+ getShop({
+ variables: { id: shopId }
+ });
+ }
+
+ return {
+ isLoadingShop: loading,
+ refetchShop: refetch,
+ shop: data && data.shop,
+ shopId
+ };
+}
diff --git a/package/src/hooks/useCurrentShopId.js b/package/src/hooks/useCurrentShopId.js
new file mode 100644
index 0000000..ac4d497
--- /dev/null
+++ b/package/src/hooks/useCurrentShopId.js
@@ -0,0 +1,20 @@
+import { useQuery } from "@apollo/react-hooks";
+import primaryShopIdQuery from "../graphql/queries/primaryShopId.graphql";
+
+/**
+ * React Hook that gets the current shop ID
+ * @return {Array} [currentShopId]
+ */
+export default function useCurrentShopId() {
+ let currentShopId = null;
+ const { data, loading } = useQuery(primaryShopIdQuery);
+
+ if (data && data.primaryShopId) {
+ currentShopId = data.primaryShopId;
+ }
+
+ return {
+ currentShopId,
+ isLoadingCurrentShopId: loading
+ };
+}
diff --git a/package/src/hooks/useMediaQuery.js b/package/src/hooks/useMediaQuery.js
new file mode 100644
index 0000000..f21faa1
--- /dev/null
+++ b/package/src/hooks/useMediaQuery.js
@@ -0,0 +1,20 @@
+import { useMediaQuery as useMediaQueryMui } from "@material-ui/core";
+
+/**
+ * Media query hook. Wraps the mui hook `useMediaQuery` with some additional options.
+ * @param {String} breakpoint Breakpoint name. `mobile|tablet|desktop|xs|sm|md|lg`
+ * @param {Options} options Options
+ * @returns {Boolean} Whether the breakpoint is active
+ */
+export default function useMediaQuery(breakpoint = "mobile", options) {
+ return useMediaQueryMui((theme) => {
+ if (breakpoint === "mobile") {
+ return theme.breakpoints.down("sm", options);
+ } else if (breakpoint === "tablet") {
+ return theme.breakpoints.down("md", options);
+ } else if (breakpoint === "desktop") {
+ return theme.breakpoints.up("md", options);
+ }
+ return theme.breakpoints.up(breakpoint, options);
+ });
+}
diff --git a/package/src/hooks/useRoutes.js b/package/src/hooks/useRoutes.js
new file mode 100644
index 0000000..5ee9c42
--- /dev/null
+++ b/package/src/hooks/useRoutes.js
@@ -0,0 +1,42 @@
+import { useMemo } from "react";
+import { routes } from "../lib/core/routes";
+
+export const defaultRouteSort = (routeA, routeB) => (
+ (routeA.priority || Number.MAX_SAFE_INTEGER) - (routeB.priority || Number.MAX_SAFE_INTEGER)
+);
+
+/**
+ * Operator routes hook
+ * @param {Object} options Options
+ * @param {Object} [options.LayoutComponent] LayoutComponent override
+ * @param {Object} [options.group] Filter routes by group name
+ * @param {Object} [options.filter] Custom filter
+ * @param {Object} [options.sort] Route sort function
+ * @returns {Array} An array containing filtered routes
+ */
+export default function useRoutes(options = {}) {
+ const {
+ groups,
+ filter,
+ sort = defaultRouteSort
+ } = options;
+
+ const memoizedRoutes = useMemo(() => {
+ let filteredRoutes;
+ if (Array.isArray(groups)) {
+ filteredRoutes = routes.filter(({ group: routeGroup }) => groups.includes(routeGroup));
+ } else if (filter) {
+ filteredRoutes = routes.filter(filter);
+ } else {
+ filteredRoutes = routes;
+ }
+
+ if (sort) {
+ filteredRoutes = filteredRoutes.sort(sort);
+ }
+
+ return filteredRoutes;
+ }, [filter, groups, sort]);
+
+ return memoizedRoutes;
+}
diff --git a/package/src/index.js b/package/src/index.js
index f4fd11d..ea0f47c 100644
--- a/package/src/index.js
+++ b/package/src/index.js
@@ -5,4 +5,13 @@ export { Reaction } from "./lib/core/reaction";
// Export React components
export { default as App } from "./App";
+export { default as AppBar } from "./AppBar";
+export { default as Blocks } from "./Blocks";
export { default as Dashboard } from "./Dashboard";
+export { default as ContentLayout } from "./ContentLayout";
+export { default as GenericErrorBoundary } from "./GenericErrorBoundary";
+export { default as NavigationDrawer } from "./NavigationDrawer";
+export { default as ProfileMenu } from "./ProfileMenu";
+export { default as Routes } from "./Routes";
+export { default as ShopLogo } from "./ShopLogo";
+export { default as UIContext } from "./context/UIContext";
diff --git a/package/src/lib/core/blocks.js b/package/src/lib/core/blocks.js
new file mode 100644
index 0000000..26be096
--- /dev/null
+++ b/package/src/lib/core/blocks.js
@@ -0,0 +1,157 @@
+import Logger from "../../utils/logger";
+
+export const BlocksTable = {}; // storage for separate elements of each block
+export const BlockComponents = {};
+
+/**
+ * @example // Register a component and container(s) with a name.
+ * // The raw component can then be extended or replaced.
+ *
+ * // Structure of a component in the list:
+ *
+ * BlocksTable.MyComponent = {
+ * name: 'MyComponent',
+ * hocs: [fn1, fn2],
+ * rawComponent: React.Component
+ * }
+ * @name registerComponent
+ * @method
+ * @memberof Components/Helpers
+ * @param {Object} options The name of the component to register.
+ * @param {Object} options.name The name of the component to register.
+ * @param {Object} options.Component The name of the component to register.
+ * @param {Object} options.region The name of the component to register.
+ * @param {Object} options.priority The name of the component to register.
+ * @param {Object} options.priority The name of the component to register.
+ * @param {React.Component} rawComponent Interchangeable/extendable component.
+ * @param {Function|Array} hocs The HOCs to wrap around the raw component.
+ *
+ * @returns {React.Component} returns the final wrapped component
+ */
+export function registerBlock(options) {
+ const {
+ name,
+ Component,
+ region,
+ priority
+ } = options;
+
+ if (!region) {
+ throw new Error("A region is required for registerBlock");
+ }
+
+ if (!name) {
+ throw new Error("A name is required for registerBlock");
+ }
+
+ if (!Component) {
+ throw new Error("A component is required for registerBlock");
+ }
+
+ if (!BlocksTable[region]) {
+ BlocksTable[region] = {};
+ }
+
+ // store the component in the table
+ BlocksTable[region][name] = {
+ name,
+ Component,
+ region,
+ priority
+ };
+}
+
+/**
+ * @name getBlock
+ * @method
+ * @summary Get a block registered with registerBlock({ name, component, hocs, region }).
+ * @param {String} regionName The name of region the block belongs to.
+ * @param {String} blockName The name of the block.
+ * @returns {Function|React.Component} A (wrapped) React component
+ * @memberof Components/Helpers
+ */
+export function getBlock(regionName, blockName) {
+ const block = BlocksTable[regionName][blockName];
+
+ if (!block) {
+ throw new Error(`Block ${blockName} in region ${regionName} not registered.`);
+ }
+
+ return block.Component;
+}
+
+/**
+ * @name getBlocks
+ * @method
+ * @summary Get a component registered with registerComponent(name, component, ...hocs).
+ * @param {String} regionName The name of the region to get.
+ * @returns {Function|React.Component} A (wrapped) React component
+ * @memberof Components/Helpers
+ */
+export function getBlocks(regionName) {
+ const region = BlocksTable[regionName];
+
+ if (!region) {
+ Logger.warn(`No blocks available for region named ${regionName}.`);
+ return null;
+ }
+
+ const blocks = Object
+ .values(region)
+ .sort((blockA, blockB) => blockA.priority - blockB.priority)
+ .map(({ Component }) => Component);
+
+ return blocks;
+}
+
+/**
+ * @name replaceBlock
+ * @method
+ * @summary Replace a Reaction component with a new component and optionally add one or more higher order components.
+ * This function keeps track of the previous HOCs and wraps the new HOCs around previous ones
+ * @param {Object} options Object containing block information
+ * @param {String} options.region The region of the block that will be replaced
+ * @param {String} options.block The name of the block that will be replaced
+ * @param {React.Component} options.component Interchangeable/extendable component.
+ * @returns {Function|React.Component} A component callable with Components[name]
+ * @memberof Components/Helpers
+ */
+export function replaceBlock({ region, block, Component }) {
+ const previousBlock = BlocksTable[region][block];
+
+ if (!previousBlock) {
+ throw new Error(`Block '${block}' of region ${region} not found. Use registerComponent to create it.`);
+ }
+
+ return registerBlock({
+ name: block,
+ region,
+ Component
+ });
+}
+
+/**
+ * @name getBlockComponent
+ * @method
+ * @summary Get the Component registered within a block
+ * @param {String} regionName The name of the block region.
+ * @param {String} blockName The name of the block component to get.
+ * @returns {Function|React.Component} A React component
+ * @memberof Components/Helpers
+ */
+export const getBlockComponent = (regionName, blockName) => BlocksTable[regionName][blockName].Component;
+
+/**
+ * @name loadRegisteredBlocks
+ * @method
+ * @summary Populate the final BlockComponents object with the contents of the lookup table.
+ * This should only be called once on app startup.
+ * @returns {Object} An object containing all of the registered blocks by region
+ * @memberof Components/Helpers
+ **/
+export function loadRegisteredBlocks() {
+ Object.keys(BlocksTable).forEach((regionName) => {
+ BlockComponents[regionName] = getBlocks(regionName);
+ });
+ return BlockComponents;
+}
diff --git a/package/src/lib/core/i18n.js b/package/src/lib/core/i18n.js
new file mode 100644
index 0000000..b13069b
--- /dev/null
+++ b/package/src/lib/core/i18n.js
@@ -0,0 +1,58 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import i18nextBrowserLanguageDetector from "i18next-browser-languagedetector";
+import i18nextSprintfPostProcessor from "i18next-sprintf-postprocessor";
+import i18nextFetch from "i18next-fetch-backend";
+import i18nextMultiLoadBackendAdapter from "i18next-multiload-backend-adapter";
+
+const configuredI18n = i18n
+ .use(initReactI18next) // passes i18n down to react-i18next
+ // https://github.com/i18next/i18next-browser-languageDetector
+ // Sets initial language to load based on `lng` query string
+ // with various fallbacks.
+ .use(i18nextBrowserLanguageDetector)
+ // https://github.com/i18next/i18next-sprintf-postProcessor
+ // key: 'Hello %(users[0].name)s, %(users[1].name)s and %(users[2].name)s',
+ // i18next.t('key2', { postProcess: 'sprintf', sprintf: { users: [{name: 'Dolly'}, {name: 'Molly'}, {name: 'Polly'}] } });
+ // --> 'Hello Dolly, Molly and Polly'
+ .use(i18nextSprintfPostProcessor)
+ // https://github.com/perrin4869/i18next-fetch-backend
+ // This uses `fetch` to load resources from the backend based on `backend`
+ // config object below.
+ .use(i18nextMultiLoadBackendAdapter);
+
+/**
+ * Init i18next
+ * @returns {undefined}
+ */
+export async function initI18next({ i18nBaseUrl, fallbackLng = "en" }) {
+ // Reaction does not have a predefined list of namespaces. Any API plugin can
+ // add any namespaces. So we must first get the list of namespaces from the API.
+ const namespaceResponse = await fetch(`${i18nBaseUrl}/locales/namespaces.json`);
+ const allTranslationNamespaces = await namespaceResponse.json();
+
+ await configuredI18n.init({
+ backend: {
+ backend: i18nextFetch,
+ backendOption: {
+ allowMultiLoading: true,
+ loadPath: `${i18nBaseUrl}/locales/resources.json?lng={{lng}}&ns={{ns}}`
+ }
+ },
+ debug: false,
+ detection: {
+ // We primarily set language according to `navigator.language`,
+ // which is supported in all modern browsers and can be changed
+ // in the browser settings. This is the same list that browsers
+ // send in the `Accept-Language` header.
+ //
+ // For ease of testing translations, we also support `lng`
+ // query string to override the browser setting.
+ order: ["querystring", "navigator"]
+ },
+ ns: allTranslationNamespaces,
+ defaultNS: "core", // reaction "core" is the default namespace
+ fallbackNS: allTranslationNamespaces,
+ fallbackLng
+ });
+}
diff --git a/package/src/lib/core/plugins.js b/package/src/lib/core/plugins.js
index 7f213f8..b8c25c7 100644
--- a/package/src/lib/core/plugins.js
+++ b/package/src/lib/core/plugins.js
@@ -1,3 +1,6 @@
+import { registerRoute, registerSetting } from "./routes";
+import { registerBlock, replaceBlock } from "./blocks";
+
export const plugins = [];
/**
@@ -6,5 +9,10 @@ export const plugins = [];
* @returns {undefined} no return
*/
export function registerPlugin(plugin) {
- plugins.push(plugin());
+ plugins.push(plugin({
+ registerRoute,
+ registerSetting,
+ registerBlock,
+ replaceBlock
+ }));
}
diff --git a/package/src/lib/core/reaction.js b/package/src/lib/core/reaction.js
index b977f81..16a1ffb 100644
--- a/package/src/lib/core/reaction.js
+++ b/package/src/lib/core/reaction.js
@@ -1,30 +1,70 @@
import React from "react";
import ReactDOM from "react-dom";
+import SettingsIcon from "mdi-material-ui/Settings";
import initApollo from "../graphql/initApollo";
+import SettingsDashboard from "../../SettingsDashboard";
+import Profile from "../../Profile";
import { getOidcProps } from "./authentication";
import { plugins } from "./plugins";
+import { registerRoute } from "./routes";
+import { initI18next } from "./i18n";
+import { loadRegisteredBlocks } from "./blocks";
/**
* The starting point for the web-app
* @param {Object} props Props and config for the app
* @returns {undefined} no return
*/
-export function Reaction(props) {
+export async function Reaction(props) {
const {
config: {
PUBLIC_GRAPHQL_API_URL,
+ PUBLIC_I18N_BASE_URL,
+ PUBLIC_I18N_FALLBACK_LANGUAGE,
PUBLIC_OIDC_CLIENT_ID,
PUBLIC_OIDC_URL,
PUBLIC_ROOT_URL
},
AppComponent,
DashboardComponent,
- dashboardComponentProps
+ SettingsDashboardComponent = SettingsDashboard,
+ dashboardComponentProps,
+ settingsRouteProps,
+ shouldShowSettingsInNavigation = true
} = props;
// Initialize apollo client to be used for the ApolloProvider in the AppComponent
const apolloClient = initApollo({ graphqlApiUrl: PUBLIC_GRAPHQL_API_URL });
+ // Init i18next
+ await initI18next({
+ i18nBaseUrl: PUBLIC_I18N_BASE_URL,
+ fallbackLng: PUBLIC_I18N_FALLBACK_LANGUAGE
+ });
+
+ // Load registered blocks
+ loadRegisteredBlocks();
+
+ if (shouldShowSettingsInNavigation) {
+ registerRoute({
+ group: "navigation",
+ priority: 9999,
+ path: "/settings/:setting?",
+ href: "/settings/shop",
+ LayoutComponent: null,
+ MainComponent: SettingsDashboardComponent,
+ IconComponent: SettingsIcon,
+ navigationItemLabel: "admin.settings.settingsLabel",
+ ...settingsRouteProps
+ });
+ }
+
+ // Register a profile page
+ registerRoute({
+ path: "/profile",
+ MainComponent: Profile
+ });
+
// Create OIDC props to be used on the AuthenticationProvider in the AppComponent
const authenticationProviderProps = getOidcProps({
oidcClientId: PUBLIC_OIDC_CLIENT_ID,
diff --git a/package/src/lib/core/routes.js b/package/src/lib/core/routes.js
new file mode 100644
index 0000000..6703d5e
--- /dev/null
+++ b/package/src/lib/core/routes.js
@@ -0,0 +1,45 @@
+export const routes = [];
+export const defaultRouteGroups = {
+ navigation: "navigation",
+ settings: "settings"
+};
+
+/**
+ * @name registerRoute
+ * @summary Registers new route for the admin UI.
+ * @param {Object} route - The route
+ * @param {String} route.path - The URL path for this route
+ * @param {Node|String} route.MainComponent - A react component to render in
+ * the main content area or the name of a Blaze template that has been registered
+ * by a package.
+ * @param {Node} route.IconComponent - A React component that renders the menu icon for this route
+ * @param {String} route.navigationItemLabel - The i18n key for this route, i.e. "admin.dashboard.ordersLabel"
+ * @returns {undefined}
+ */
+export function registerRoute(route) {
+ routes.push({
+ priority: -1,
+ ...route
+ });
+}
+
+/**
+ * @name registerSetting
+ * @summary Registers new route for specifically for settings.
+ * @param {Object} route - The route
+ * @param {String} route.path - The URL path for this route
+ * @param {Node|String} route.MainComponent - A react component to render in
+ * the main content area or the name of a Blaze template that has been registered
+ * by a package.
+ * @param {Node} route.IconComponent - A React component that renders the menu icon for this route
+ * @param {String} route.navigationItemLabel - The i18n key for this route, i.e. "admin.dashboard.ordersLabel"
+ * @returns {undefined}
+ */
+export function registerSetting(route) {
+ routes.push({
+ ...route,
+ path: `/settings/${route.name}`,
+ href: `/settings/${route.name || route.href || route.path}`,
+ group: defaultRouteGroups.settings
+ });
+}
diff --git a/package/src/test-utils/index.js b/package/src/test-utils/index.js
index c5bac1f..3649571 100644
--- a/package/src/test-utils/index.js
+++ b/package/src/test-utils/index.js
@@ -6,8 +6,26 @@ import { ThemeProvider } from "@material-ui/core";
import { MemoryRouter } from "react-router-dom";
import { MockedProvider } from "@apollo/react-testing";
import { defaultTheme } from "@reactioncommerce/catalyst";
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
import apolloMocks from "./apolloMocks";
+i18n
+ .use(initReactI18next)
+ .init({
+ resources: {
+ en: {
+ translation: {}
+ }
+ },
+ lng: "en",
+ fallbackLng: "en",
+
+ interpolation: {
+ escapeValue: false
+ }
+ });
+
/**
* Component that wraps components with mock providers during testing.
* @return {Component} - Component wrapped with mock providers
diff --git a/package/src/utils/logger.js b/package/src/utils/logger.js
new file mode 100644
index 0000000..1d59b6c
--- /dev/null
+++ b/package/src/utils/logger.js
@@ -0,0 +1,20 @@
+/* eslint-disable no-console */
+/*
+ * configure bunyan logging module for reaction client
+ * See: https://github.com/trentm/node-bunyan#levels
+ * client we'll cofigure WARN as default
+ */
+const levels = ["FATAL", "ERROR", "WARN", "INFO", "DEBUG", "TRACE"];
+
+// set stdout log level
+let level = process.env.REACTION_LOG_LEVEL || "WARN";
+
+level = level.toUpperCase();
+
+if (!levels.includes(level)) {
+ level = "WARN";
+}
+
+const Logger = console.log;
+
+export default Logger;
diff --git a/public/locales/en-en.json b/public/locales/en-en.json
new file mode 100644
index 0000000..e69de29
diff --git a/public/reaction-logo-circular.svg b/public/reaction-logo-circular.svg
new file mode 100644
index 0000000..b9130f9
--- /dev/null
+++ b/public/reaction-logo-circular.svg
@@ -0,0 +1,38 @@
+
+
+
diff --git a/src/config.js b/src/config.js
index 12725ed..f0f88d0 100644
--- a/src/config.js
+++ b/src/config.js
@@ -4,7 +4,9 @@ const config = {
PUBLIC_GRAPHQL_API_URL: process.env.PUBLIC_GRAPHQL_API_URL,
PUBLIC_OIDC_CLIENT_ID: process.env.PUBLIC_OIDC_CLIENT_ID,
PUBLIC_OIDC_URL: process.env.PUBLIC_OIDC_URL,
- PUBLIC_ROOT_URL: process.env.PUBLIC_ROOT_URL
+ PUBLIC_ROOT_URL: process.env.PUBLIC_ROOT_URL,
+ PUBLIC_I18N_BASE_URL: process.env.PUBLIC_I18N_BASE_URL,
+ PUBLIC_I18N_FALLBACK_LANGUAGE: process.env.PUBLIC_I18N_FALLBACK_LANGUAGE
};
export default envalid.cleanEnv(config, {
@@ -12,6 +14,15 @@ export default envalid.cleanEnv(config, {
desc: "A URL that is accessible from browsers and accepts GraphQL POST requests over HTTP",
example: "http://localhost:3000/graphql"
}),
+ PUBLIC_I18N_BASE_URL: envalid.str({
+ desc: "A URL that has /locales/namespaces.json and /locales/resources.json endpoints for loading translations",
+ example: "http://localhost:3000"
+ }),
+ PUBLIC_I18N_FALLBACK_LANGUAGE: envalid.str({
+ default: "en",
+ desc: "The language to fallback on in case of a failure to detect or load the preferred language",
+ example: "en"
+ }),
PUBLIC_OIDC_CLIENT_ID: envalid.str({
default: "reaction-admin-core",
desc: "The OAuth2 client ID to use for authentication flows from the browser",
diff --git a/src/index.html b/src/index.html
index f33f731..bc3722b 100644
--- a/src/index.html
+++ b/src/index.html
@@ -3,6 +3,8 @@
Reaction Admin
+
diff --git a/src/index.js b/src/index.js
index 0092f48..af45366 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,22 +1,22 @@
+/* eslint-disable react/display-name */
/* eslint-disable react/no-multi-comp */
-import React from "react";
import { Reaction, registerPlugin, App } from "../package/src";
import config from "./config";
+import ExamplePluginProducts from "./plugins/ExamplePluginProducts";
+import ExamplePluginTags from "./plugins/ExamplePluginTags";
+import ExampleLayouts from "./plugins/ExampleLayouts";
-// Register fake plugins for testing
-registerPlugin(() => ({
- route: "/test-1",
- navTitle: "Test 1",
- // eslint-disable-next-line react/display-name
- MainComponent: () => (Route Test 1)
-}));
-
-registerPlugin(() => ({
- route: "/test-2",
- navTitle: "Test 2",
- // eslint-disable-next-line react/display-name
- MainComponent: () => (Route Test 2)
-}));
+/**
+ * Register plugins for testing.
+ *
+ * In a real application, plugins can either live locally in the project,
+ * or installed as NPM packages and registered here.
+ *
+ * For this sample application, the plugins are all local.
+ */
+registerPlugin(ExamplePluginProducts);
+registerPlugin(ExamplePluginTags);
+registerPlugin(ExampleLayouts);
// Configure and "start" the Reaction webapp
Reaction({
diff --git a/src/plugins/ExampleLayouts/index.js b/src/plugins/ExampleLayouts/index.js
new file mode 100644
index 0000000..2a2a90a
--- /dev/null
+++ b/src/plugins/ExampleLayouts/index.js
@@ -0,0 +1,62 @@
+/* eslint-disable react/display-name */
+/* eslint-disable react/no-multi-comp */
+import React from "react";
+import TagIcon from "mdi-material-ui/Tag";
+import { Card, CardContent } from "@material-ui/core";
+
+/**
+ * Register sample tags plugin
+ * @param {Object} params Params provided by `registerPlugin`
+ * @returns {undefined}
+ */
+export default function ({ registerRoute }) {
+ // Register routes
+ registerRoute({
+ path: "/layout-standard",
+ group: "navigation",
+ navigationItemLabel: "Standard Layout",
+ IconComponent: TagIcon,
+ MainComponent: () => (
+
+
+ Standard layout is centered with a max-width.
+
+
+ )
+ });
+
+ registerRoute({
+ path: "/layout-wide",
+ group: "navigation",
+ navigationItemLabel: "Wide Layout",
+ layoutComponentProps: {
+ size: "wide"
+ },
+ IconComponent: TagIcon,
+ MainComponent: () => (
+
+
+ Wide layout is full width including padding on the leading and trailing edges of the view.
+
+
+ )
+ });
+
+ registerRoute({
+ path: "/layout-full",
+ group: "navigation",
+ navigationItemLabel: "Full Layout",
+ layoutComponentProps: {
+ size: "full"
+ },
+ IconComponent: TagIcon,
+ MainComponent: () => (
+
+
+ Full layout if full width with padding on the leading and trailing edges of the view.
+ The "Full" layout doesn't scroll.
+
+
+ )
+ });
+}
diff --git a/src/plugins/ExamplePluginProducts/index.js b/src/plugins/ExamplePluginProducts/index.js
new file mode 100644
index 0000000..7c9a798
--- /dev/null
+++ b/src/plugins/ExamplePluginProducts/index.js
@@ -0,0 +1,72 @@
+/* eslint-disable react/display-name */
+/* eslint-disable react/no-multi-comp */
+import React from "react";
+import FolderIcon from "mdi-material-ui/Folder";
+import { Card, CardContent, Box } from "@material-ui/core";
+
+// Normally imported like `import { Blocks } from "@reactioncommerce/admin-core";`
+import { Blocks } from "../../../package/src";
+
+/**
+ * Register sample products plugin
+ * @param {Object} params Params provided by `registerPlugin`
+ * @returns {undefined}
+ */
+export default function ({ registerRoute, registerSetting, registerBlock }) {
+ // Register routes
+ registerRoute({
+ path: "/products",
+ group: "navigation",
+ navigationItemLabel: "Products (sample)",
+ IconComponent: FolderIcon,
+ MainComponent: () => (
+
+ {(blocks) =>
+ blocks.map((block, index) => (
+
+ {block}
+
+ ))
+ }
+
+ )
+ });
+
+ // Register settings
+ registerSetting({
+ name: "products",
+ navigationItemLabel: "Products",
+ MainComponent: () => (
+
+
+ Product plugin settings
+
+
+ )
+ });
+
+ // Register blocks
+ registerBlock({
+ name: "ProductDetails",
+ region: "ProductDetailMain",
+ Component: () => (
+
+
+ "Product Details" Block registered in "Products" plugin
+
+
+ )
+ });
+
+ registerBlock({
+ name: "ProductMedia",
+ region: "ProductDetailMain",
+ Component: () => (
+
+
+ "Product Media" Block registered in "Products" plugin
+
+
+ )
+ });
+}
diff --git a/src/plugins/ExamplePluginTags/index.js b/src/plugins/ExamplePluginTags/index.js
new file mode 100644
index 0000000..47728bb
--- /dev/null
+++ b/src/plugins/ExamplePluginTags/index.js
@@ -0,0 +1,52 @@
+/* eslint-disable react/display-name */
+/* eslint-disable react/no-multi-comp */
+import React from "react";
+import TagIcon from "mdi-material-ui/Tag";
+import { Card, CardContent } from "@material-ui/core";
+
+/**
+ * Register sample tags plugin
+ * @param {Object} params Params provided by `registerPlugin`
+ * @returns {undefined}
+ */
+export default function ({ registerRoute, registerSetting, registerBlock }) {
+ // Register routes
+ registerRoute({
+ path: "/tags",
+ group: "navigation",
+ navigationItemLabel: "Tags (sample)",
+ IconComponent: TagIcon,
+ MainComponent: () => (
+
+
+ Display Tags
+
+
+ )
+ });
+
+ registerSetting({
+ name: "tags",
+ navigationItemLabel: "Tags",
+ MainComponent: () => (
+
+
+ Setting for tags
+
+
+ )
+ });
+
+ // Register blocks
+ registerBlock({
+ name: "ProductTags",
+ region: "ProductDetailMain",
+ Component: () => (
+
+
+ "Product Tags" Block registered in "Tags" plugin
+
+
+ )
+ });
+}
-
+
+
+
+
`;
diff --git a/package/src/GenericErrorBoundary/GenericErrorBoundary.js b/package/src/GenericErrorBoundary/GenericErrorBoundary.js
new file mode 100644
index 0000000..43807fe
--- /dev/null
+++ b/package/src/GenericErrorBoundary/GenericErrorBoundary.js
@@ -0,0 +1,36 @@
+import { Component } from "react";
+import PropTypes from "prop-types";
+import Logger from "../utils/logger";
+
+class GenericErrorBoundary extends Component {
+ static getDerivedStateFromError() {
+ // Update state so the next render will show the fallback UI.
+ return { hasError: true };
+ }
+
+ static propTypes = {
+ children: PropTypes.node,
+ fallbackComponent: PropTypes.node
+ }
+
+ constructor(props) {
+ super(props);
+ this.state = { hasError: false };
+ }
+
+ componentDidCatch(error, info) {
+ Logger.error(info, error);
+ }
+
+ render() {
+ const { children, fallbackComponent } = this.props;
+ if (this.state.hasError) {
+ // Render the fallback if there's an error
+ return fallbackComponent;
+ }
+
+ return children;
+ }
+}
+
+export default GenericErrorBoundary;
diff --git a/package/src/GenericErrorBoundary/index.js b/package/src/GenericErrorBoundary/index.js
new file mode 100644
index 0000000..c515153
--- /dev/null
+++ b/package/src/GenericErrorBoundary/index.js
@@ -0,0 +1 @@
+export { default } from "./GenericErrorBoundary";
diff --git a/package/src/NavigationDrawer/NavigationDrawer.js b/package/src/NavigationDrawer/NavigationDrawer.js
new file mode 100644
index 0000000..4a51062
--- /dev/null
+++ b/package/src/NavigationDrawer/NavigationDrawer.js
@@ -0,0 +1,179 @@
+import React, { useContext } from "react";
+import { useHistory, useRouteMatch } from "react-router-dom";
+import {
+ AppBar,
+ Box,
+ Drawer,
+ Fab,
+ Hidden,
+ List,
+ ListItem,
+ ListItemIcon,
+ ListItemText,
+ Toolbar,
+ makeStyles
+} from "@material-ui/core";
+import CloseIcon from "mdi-material-ui/Close";
+import { useTranslation } from "react-i18next";
+import ShopLogo from "../ShopLogo";
+import UIContext from "../context/UIContext";
+import useRoutes from "../hooks/useRoutes";
+
+const useStyles = makeStyles((theme) => ({
+ closeButton: {
+ "color": theme.palette.colors.white,
+ "backgroundColor": theme.palette.colors.darkBlue500,
+ "&:hover": {
+ "backgroundColor": theme.palette.colors.darkBlue600,
+ // Reset on touch devices, it doesn't add specificity
+ "@media (hover: none)": {
+ backgroundColor: theme.palette.colors.darkBlue500
+ }
+ }
+ },
+ icon: {
+ minWidth: 32,
+ display: "flex",
+ justifyContent: "center",
+ marginRight: theme.spacing(2),
+ color: theme.palette.colors.coolGrey300
+ },
+ iconActive: {
+ color: theme.palette.text.active
+ },
+ toolbar: {
+ paddingLeft: theme.spacing(2),
+ paddingRight: theme.spacing(2)
+ },
+ listItemRoot: {
+ "paddingLeft": theme.spacing(2),
+ "paddingRight": theme.spacing(2),
+ "&$focusVisible": {
+ color: theme.palette.text.secondaryActive,
+ fontWeight: theme.typography.fontWeightSemiBold,
+ backgroundColor: theme.palette.colors.darkBlue600
+ },
+ "&$selected, &$selected:hover": {
+ color: theme.palette.text.secondaryActive,
+ fontWeight: theme.typography.fontWeightSemiBold,
+ backgroundColor: theme.palette.colors.darkBlue600
+ },
+ "&$selected $icon, &$selected:hover $icon": {
+ color: theme.palette.text.active
+ }
+ },
+ listItemText: {
+ paddingLeft: 0,
+ fontSize: theme.typography.fontSize,
+ lineHeight: 1.5,
+ letterSpacing: 0.5,
+ color: theme.palette.colors.black15
+ },
+ listItemButton: {
+ "borderRadius": theme.shape.borderRadius,
+ "&:hover": {
+ textDecoration: "none",
+ backgroundColor: theme.palette.colors.darkBlue600
+ }
+ },
+ /* Pseudo-class applied to the `component`'s `focusVisibleClassName` prop if `button={true}`. */
+ focusVisible: {},
+ /* Pseudo-class applied to the root element if `selected={true}`. */
+ selected: {}
+}));
+
+/**
+ * Navigation Drawer component
+ * @returns {React.Component} NavigationDrawer component
+ */
+function NavigationDrawer() {
+ const classes = useStyles();
+ const history = useHistory();
+ const routeMatch = useRouteMatch("/:any");
+ const primaryRoutes = useRoutes({ groups: ["navigation"] });
+ const { t } = useTranslation();
+ const {
+ isMobile,
+ isNavigationDrawerOpen,
+ onCloseNavigationDrawer
+ } = useContext(UIContext);
+
+ let drawerProps = {
+ classes: {
+ paper: classes.drawerPaper
+ },
+ open: true,
+ variant: "persistent"
+ };
+
+ if (isMobile) {
+ drawerProps = {
+ variant: "temporary",
+ anchor: "left",
+ open: isNavigationDrawerOpen,
+ onClose: onCloseNavigationDrawer,
+ ModalProps: {
+ keepMounted: true // Better open performance on mobile.
+ }
+ };
+ }
+
+ return (
+
+
+
+
+
-
-
- Test App -
-- Welcome -
--
+ {primaryRoutes.map(({
+ IconComponent,
+ href,
+ path,
+ navigationItemLabel
+ }) => (
+
-
+ {settingsRoutes && Array.isArray(settingsRoutes) && settingsRoutes.map((setting) => (
+