npm - @evershop/evershop - Versions diffs - 1.0.0-beta - Mend

@evershop/evershop 1.0.0-beta

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (976) hide show

package/src/lib/components/modal/Alert.scss ADDED Viewed

@@ -0,0 +1,73 @@
+.modal-overlay {
+    position: fixed;
+    top: 100%;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    display: flex;
+    justify-content: center;
+    z-index: 50;
+    background-color: rgba(17, 18, 19, 0.3);
+    -webkit-animation-duration: 0.25s;
+    animation-duration: 0.25s;
+    &.fadeIn {
+        top: 0;
+        -webkit-animation-name: fadeIn;
+        animation-name: fadeIn;
+    }
+    &.fadeOut {
+        top: 100%;
+        -webkit-animation-name: fadeOut;
+        animation-name: fadeOut;
+    }
+    .modal {
+        min-width: 50rem;
+        position: relative;
+        .modal-close-button {
+            position: absolute;
+            top: 1.5rem;
+            right: 1.5rem;
+        }
+    }
+}
+@-webkit-keyframes fadeIn {
+    0% {
+        top: 100%;
+        opacity: 0;
+    }
+    100% {
+        top: 0%;
+        opacity: 100;
+    }
+}
+@keyframes fadeIn {
+    0% {
+        top: 100%;
+        opacity: 0;
+    }
+    100% {
+        top: 0%;
+        opacity: 100;
+    }
+}
+@-webkit-keyframes fadeOut {
+    0% {
+        opacity: 100;
+        top: 0%;
+    }
+    100% {
+        opacity: 0;
+        top: 100%;
+    }
+}
+@keyframes fadeOut {
+    0% {
+        opacity: 100;
+        top: 0%;
+    }
+    100% {
+        opacity: 0;
+        top: 100%;
+    }
+}

package/src/lib/components/modal/useModal.js ADDED Viewed

@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+const useModal = () => {
+  const [isShowing, setIsShowing] = useState(false);
+  const [closing, setClosing] = useState(false);
+  React.useEffect(() => {
+    if (isShowing) setClosing(false);
+  }, [isShowing]);
+  function toggle() {
+    if (isShowing === false) setIsShowing(true);
+    else {
+      setClosing(true);
+    }
+  }
+  return {
+    isShowing,
+    close: () => { setIsShowing(false); setClosing(false); },
+    closing,
+    toggle
+  };
+};
+export { useModal };

package/src/lib/components/react/Head.js ADDED Viewed

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Area from '../Area';
+export default function Head() {
+  return ReactDOM.createPortal(
+    <Area id="head" noOuter={true} />,
+    document.getElementsByTagName('head')[0]
+  );
+}

package/src/lib/components/react/client/Client.js ADDED Viewed

@@ -0,0 +1,20 @@
+import React from 'react';
+import { AppProvider } from '../../../context/app';
+import Area from '../../Area';
+import Head from '../Head';
+import { createClient, Provider } from 'urql';
+import { Alert } from '../../modal/Alert';
+const client = createClient({
+  url: '/v1/graphql'
+});
+export const App = ({ children }) => <AppProvider value={window.eContext}>
+  <Provider value={client}>
+    <Alert>
+      <Head />
+      <Area id="body" className="wrapper" />
+    </Alert>
+  </Provider>
+  {children}
+</AppProvider>

package/src/lib/components/react/client/HotReload.js ADDED Viewed

@@ -0,0 +1,38 @@
+import React from 'react';
+import produce from 'immer';
+import axios from 'axios';
+import { useAppDispatch, useAppState } from '../../../context/app';
+export const HotReload = ({ hot }) => {
+  const [isRefreshing, setIsRefreshing] = React.useState(false);
+  const appContext = useAppState();
+  const appDispatch = useAppDispatch();
+  React.useEffect(() => {
+    hot.subscribe(async function (event) {
+      if (event.action === 'serverReloaded') {
+        setIsRefreshing(true);
+        let url = new URL(document.location);
+        url.searchParams.append('fashRefresh', 'true');
+        const response = await axios.get(url, {
+          validateStatus: function (status) {
+            return status >= 200 && status <= 500;
+          }
+        });
+        if (response.status < 300) {
+          appDispatch(produce(appContext, (draff) => {
+            // eslint-disable-next-line no-param-reassign
+            draff = response.data.eContext;
+            return draff;
+          }));
+        } else {
+          location.reload();
+        }
+      }
+    }
+    );
+  }, []);
+  return isRefreshing ? <div>Refreshing</div> : null;
+};

package/src/lib/components/react/client/Hydrate.js ADDED Viewed

@@ -0,0 +1,19 @@
+import React from 'react';
+import { AppProvider } from '../../../context/app';
+import { Alert } from '../../modal/Alert';
+import Area from '../../Area';
+import { createClient, Provider } from 'urql';
+const client = createClient({
+  url: '/v1/graphql'
+});
+export default function Hydrate() {
+  return <Provider value={client}>
+    <AppProvider value={window.eContext}>
+      <Alert>
+        <Area id="body" className="wrapper" />
+      </Alert>
+    </AppProvider>
+  </Provider>
+};

package/src/lib/components/react/client/Index.js ADDED Viewed

@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Area from '@evershop/evershop/src/lib/components/Area';
+import { App } from '@evershop/evershop/src/lib/components/react/client/Client';
+const hot = require('webpack-hot-middleware/client?path=/eHot&reload=true&overlay=true');
+import { HotReload } from '@evershop/evershop/src/lib/components/react/client/HotReload';
+/**render*/
+ReactDOM.render(<App><HotReload hot={hot} /></App>, document.getElementById('app'));
+if (module.hot) {
+  module.hot.accept();
+}

package/src/lib/components/react/getComponents.js ADDED Viewed

@@ -0,0 +1,15 @@
+import { useAppState } from '../../context/app';
+import { get } from '../../util/get';
+/* eslint-disable global-require */
+const { resolve } = require('path');
+const { CONSTANTS } = require('../../helpers');
+export function getComponents() {
+  const componentsPath = get(useAppState(), 'componentsPath');
+  if (!componentsPath) {
+    return {};
+  } else {
+    return require(resolve(CONSTANTS.ROOTPATH, '.evershop/build/', componentsPath));
+  }
+}

package/src/lib/components/react/server/Server.js ADDED Viewed

@@ -0,0 +1,38 @@
+/* eslint-disable react/no-danger */
+import PropTypes from 'prop-types';
+import React from 'react';
+import Area from '../../Area';
+import { Alert } from '../../modal/Alert';
+function ServerHtml({ css, js, appContext }) {
+  return (
+    <>
+      <head>
+        <meta charset="utf-8" />
+        <script dangerouslySetInnerHTML={{ __html: appContext }} />
+        {css.map(src => {
+          return <link href={src} rel="stylesheet"></link>
+        })}
+        <Area noOuter id="head" />
+      </head>
+      <body id="body">
+        <div id="app" className="bg-background">
+          <Alert>
+            <Area id="body" className="wrapper" />
+          </Alert>
+        </div>
+        {js.map(src => {
+          return <script src={src}></script>
+        })}
+      </body>
+    </>
+  );
+}
+ServerHtml.propTypes = {
+  js: PropTypes.arrayOf(PropTypes.string).isRequired,
+  js: PropTypes.arrayOf(PropTypes.string).isRequired,
+  appContext: PropTypes.string.isRequired
+};
+export default ServerHtml;

package/src/lib/components/react/server/render.js ADDED Viewed

@@ -0,0 +1,19 @@
+import React from 'react';
+import { inspect } from 'util';
+import ServerHtml from './Server';
+import { AppProvider } from '../../../context/app';
+import { renderToString } from 'react-dom/server';
+export function renderHtml(js, css, contextData) {
+  const source = renderToString(
+    <AppProvider value={contextData}>
+      <ServerHtml
+        js={js}
+        css={css}
+        appContext={`var eContext = ${inspect(contextData, { depth: 10, maxArrayLength: null })}`}
+      />
+    </AppProvider>
+  );
+  return `<!DOCTYPE html><html id="root">${source}</html>`;
+}

package/src/lib/components/redux/eventTypes.js ADDED Viewed

@@ -0,0 +1,18 @@
+export const INITIAL_PAGE_READY = "INITIAL_PAGE_READY";
+export const UPDATE_WIDGETS = "UPDATE_WIDGETS";
+export const FORM_FIELD_CREATED = "FORM_FIELD_CREATED";
+export const FORM_FIELD_UPDATED = "FORM_FIELD_UPDATED";
+export const FORM_FIELD_REMOVED = "FORM_FIELD_REMOVED";
+export const FORM_VALIDATED = "FORM_VALIDATED";
+export const FORM_SUBMIT = "FORM_SUBMIT";
+export const REQUEST_START = "REQUEST_START";
+export const REQUEST_END = "REQUEST_END";
+export const PAGINATION_UPDATED = "PAGINATION_UPDATED";
+export const FORM_LANGUAGE_CHANGED = "FORM_LANGUAGE_CHANGED";
+export const SET_ALERT = "SET_ALERT";
+export const ADD_ALERT = "ADD_ALERT";
+export const REMOVE_ALERT = "REMOVE_ALERT";
+export const ADD_APP_STATE = "ADD_APP_STATE";
+export const PRODUCT_COLLECTION_FILTER_CHANGED = "PRODUCT_COLLECTION_FILTER_CHANGED";
+export const ROOT_PRODUCT_COLLECTION_FILTER_DEFINED = "ROOT_PRODUCT_COLLECTION_FILTER_DEFINED";
+export const FILE_BROWSER_REQUESTED = "FILE_BROWSER_REQUESTED";

package/src/lib/components/redux/pageDataSlice.js ADDED Viewed

@@ -0,0 +1,20 @@
+import { createSlice } from '@reduxjs/toolkit'
+const initialState = window.eContext
+export const pageDataSlice = createSlice({
+  name: 'pageData',
+  initialState,
+  reducers: {
+    hotUpdate: (state, action) => {
+      // Replace the pageData with new response from the server
+      // This action will be triggered everytime the server is reloaded
+      // This is only for development
+      return action.payload.eContext;
+    }
+  },
+})
+export const { hotUpdate } = pageDataSlice.actions
+export default pageDataSlice.reducer

package/src/lib/components/redux/pageDataSliceSSR.js ADDED Viewed

@@ -0,0 +1,11 @@
+import { createSlice } from '@reduxjs/toolkit'
+export const pageDataSliceSSR = (initialState) => {
+  return createSlice({
+    name: 'pageData',
+    initialState,
+    reducers: {
+    },
+  })
+}

package/src/lib/components/redux/reducerRegistry.js ADDED Viewed

@@ -0,0 +1,62 @@
+import { ADD_ALERT, REQUEST_END, ADD_APP_STATE, REMOVE_ALERT, SET_ALERT } from './eventTypes.js'
+let _emitChange = null;
+let reducers = {
+  alerts: (state = [], action) => {
+    if (action.type === SET_ALERT) {
+      if (action.payload.alerts !== undefined) {
+        return action.payload.alerts.map((a) => { a['key'] = Math.random().toString(36).substr(2, 9); return a; });
+      }
+    }
+    if (action.type === ADD_ALERT) {
+      if (action.payload.alerts !== undefined) {
+        return state.concat(action.payload.alerts.map((a) => { a['key'] = Math.random().toString(36).substr(2, 9); return a; }));
+      }
+    }
+    if (action.type === REMOVE_ALERT) {
+      if (action.payload.key !== undefined) {
+        return state.filter((a, i) => a.key != action.payload.key);
+      }
+    }
+    return state;
+  },
+  appState: (state = [], action = {}) => {
+    if (action.type === ADD_APP_STATE) {
+      let newState = action.payload.appState;
+      if (newState !== undefined) {
+        return {
+          ...state,
+          ...newState
+        }
+      }
+    } else if (action.type === REQUEST_END) {
+      if (_.get(action.payload, 'data.appState') !== undefined) {
+        let newState = action.payload.data.appState;
+        return {
+          ...state,
+          ...newState
+        }
+      }
+    }
+    return state;
+  }
+};
+let ReducerRegistry = {};
+ReducerRegistry.getReducers = function () {
+  return { ...reducers };
+};
+ReducerRegistry.register = function (name, reducer) {
+  reducers = { ...reducers, [name]: reducer };
+  if (_emitChange) {
+    _emitChange(this.getReducers());
+  }
+};
+ReducerRegistry.setChangeListener = function (listener) {
+  _emitChange = listener;
+};
+export { ReducerRegistry }

package/src/lib/components/redux/store.js ADDED Viewed

@@ -0,0 +1,8 @@
+import { configureStore } from '@reduxjs/toolkit';
+import pageDataReducer from './pageDataSlice';
+export const store = configureStore({
+  reducer: {
+    pageData: pageDataReducer,
+  },
+})

package/src/lib/components/redux/storeSSR.js ADDED Viewed

@@ -0,0 +1,8 @@
+import { configureStore } from '@reduxjs/toolkit';
+import { pageDataSliceSSR } from './pageDataSliceSSR';
+export const createStoreSSR = (initialState) => configureStore({
+  reducer: {
+    pageData: pageDataSliceSSR(initialState).reducer,
+  },
+})

package/src/lib/context/app.js ADDED Viewed

@@ -0,0 +1,32 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+const AppStateContext = React.createContext();
+const AppContextDispatch = React.createContext();
+export function AppProvider({ value, children }) {
+  // React.useEffect(() => {
+  //   window.eContext = undefined;
+  // }, []);
+  const [data, setData] = React.useState(value);
+  return (
+    <AppContextDispatch.Provider value={setData}>
+      <AppStateContext.Provider value={data}>
+        {children}
+      </AppStateContext.Provider>
+    </AppContextDispatch.Provider>
+  );
+}
+AppProvider.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node
+  ]).isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
+  value: PropTypes.object.isRequired
+};
+export const useAppState = () => React.useContext(AppStateContext);
+export const useAppDispatch = () => React.useContext(AppContextDispatch);

package/src/lib/context/cart.js ADDED Viewed

@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types'
+import React from 'react';
+const CartContext = React.createContext();
+const CartContextDispatch = React.createContext();
+export function CartProvider({ id, children }) {
+  const [id, setId] = React.useState(undefined);
+  const getData = () => {
+    fetch()
+  };
+  return (
+    <CartContextDispatch.Provider value={getData}>
+      <CartContext.Provider value={id}>
+        {children}
+      </CartContext.Provider>
+    </CartContextDispatch.Provider>
+  );
+}
+CartProvider.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node
+  ]).isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
+  value: PropTypes.object.isRequired
+};
+export const useCartContext = () => React.useContext(CartContext);
+export const useCartContextDispatch = () => React.useContext(CartContextDispatch);

package/src/lib/context/checkout.js ADDED Viewed

@@ -0,0 +1,74 @@
+import PropTypes from 'prop-types';
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import { useCheckoutSteps } from './checkoutSteps';
+const Checkout = React.createContext();
+export function CheckoutProvider({ children, cartId, placeOrderAPI, getPaymentMethodAPI, checkoutSuccessUrl }) {
+  const steps = useCheckoutSteps();
+  const [paymentMethods, setPaymentMethods] = useState([]);
+  const [orderPlaced, setOrderPlaced] = useState(false);
+  const [orderId, setOrderId] = useState();
+  const [, setError] = useState(null);
+  useEffect(() => {
+    const placeOrder = async () => {
+      // If order is placed, do nothing
+      if (orderPlaced) return;
+      // If there is a incompleted step, do nothing
+      if (steps.length < 1 || steps.findIndex((s) => s.isCompleted === false) !== -1) return;
+      const response = await axios.post(
+        placeOrderAPI,
+        { cartId },
+      );
+      if (response.data.success === true) {
+        setOrderPlaced(true);
+        setOrderId(response.data.data.orderId);
+        setError(null);
+        // let redirectUrl = response.data.data.redirect || checkoutSuccessUrl;
+        // window.location.href = redirectUrl;
+      } else {
+        setError(response.data.message);
+      }
+    };
+    placeOrder();
+  }, [steps]);
+  const getPaymentMethods = async () => {
+    const response = await axios.get(
+      `${getPaymentMethodAPI}/${cartId}`,
+    );
+    if (response.data.success === true) {
+      setPaymentMethods(response.data.data.methods);
+    } else {
+      setPaymentMethods([]);
+    }
+  }
+  return (
+    <Checkout.Provider value={{
+      steps,
+      cartId,
+      orderPlaced,
+      orderId,
+      paymentMethods,
+      setPaymentMethods,
+      getPaymentMethods,
+      checkoutSuccessUrl
+    }}>
+      {children}
+    </Checkout.Provider>
+  );
+}
+CheckoutProvider.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node
+  ]).isRequired
+};
+export const useCheckout = () => React.useContext(Checkout);

package/src/lib/context/checkoutSteps.js ADDED Viewed

@@ -0,0 +1,75 @@
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+const Steps = React.createContext();
+const CheckoutStepsDispatch = React.createContext();
+export function CheckoutSteps({ children, value }) {
+  const [steps, setSteps] = useState(value);
+  const canStepDisplay = (step) => {
+    const checkoutSteps = [...steps].sort(
+      (a, b) => parseInt(a.sortOrder, 10) - parseInt(b.sortOrder, 10)
+    );
+    const index = checkoutSteps.findIndex((s) => s.id === step.id);
+    // check if all previous step is completed
+    if (!checkoutSteps.slice(0, index).every((s) => s.isCompleted === true)) return false;
+    if (index === steps.length - 1) return true; // last step
+    if (step.isCompleted !== true) return true; // completed step
+    return false;
+  };
+  /**
+   * Add a step to the checkout steps
+   * @param {Object} step { id, title, isCompleted, sortOrder, editable }}
+  */
+  const addStep = (step) => {
+    setSteps(previous => previous.concat([
+      step
+    ]));
+  };
+  const editStep = (stepId) => {
+    const index = steps.findIndex((s) => s.id === stepId);
+    setSteps(steps.map((s, i) => {
+      if (s.id === stepId)
+        return {
+          ...s, isCompleted: false
+        };
+      else {
+        if (i > index)
+          return {
+            ...s, isCompleted: false
+          };
+        else
+          return s;
+      }
+    }));
+  };
+  const completeStep = (stepId, preview) => {
+    setSteps(steps.map((s) => {
+      if (s.id === stepId) return { ...s, isCompleted: true, isEditing: false, preview: preview };
+      else return s;
+    }));
+  };
+  return (
+    <Steps.Provider value={steps}>
+      <CheckoutStepsDispatch.Provider value={{ canStepDisplay, editStep, completeStep, addStep }}>
+        {children}
+      </CheckoutStepsDispatch.Provider>
+    </Steps.Provider>
+  );
+}
+CheckoutSteps.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node
+  ]).isRequired
+};
+export const useCheckoutSteps = () => React.useContext(Steps);
+export const useCheckoutStepsDispatch = () => React.useContext(CheckoutStepsDispatch);

package/src/lib/helpers.js ADDED Viewed

@@ -0,0 +1,17 @@
+const path = require('path');
+// eslint-disable-next-line no-multi-assign
+const helpers = module.exports = exports = {};
+const rootPath = process.cwd();
+helpers.CONSTANTS = Object.freeze({
+  ROOTPATH: rootPath,
+  LIBPATH: path.resolve(__dirname),
+  MOLDULESPATH: path.resolve(__dirname, '..', 'modules'),
+  PUBLICPATH: path.resolve(rootPath, 'public'),
+  MEDIAPATH: path.resolve(rootPath, 'media'),
+  NODEMODULEPATH: path.resolve(rootPath, 'node_modules'),
+  THEMEPATH: path.resolve(rootPath, 'themes'),
+  CACHEPATH: path.resolve(rootPath, '.evershop'),
+  BUILDPATH: path.resolve(rootPath, '.evershop', 'build')
+});

package/src/lib/hooks/useWindowSize.js ADDED Viewed

@@ -0,0 +1,22 @@
+import { useEffect, useState } from 'react';
+const useWindowSize = () => {
+  const [size, setSize] = useState({});
+  useEffect(() => {
+    setSize({
+      width: window.innerWidth,
+      height: window.innerHeight
+    });
+    window.addEventListener('resize', () => {
+      setSize({
+        width: window.innerWidth,
+        height: window.innerHeight
+      });
+    });
+  }, []);
+  return size;
+};
+export { useWindowSize };