@evershop/evershop 1.0.0-beta.4 → 1.0.0-beta.5

package/README.md

@@ -1,10 +1,15 @@
 <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
 <p align="center">
-  <h1 align="center">Lightweight And Extendable React E-commerce Platform</h1>
+<img width="60" height="68" alt="EverShop Logo" src="https://evershop.io/img/logo.png"/>
 </p>
 <p align="center">
-    <a href="https://evershop.io/docs/development/getting-started/introduction">Documentation</a>
+  <h1 align="center">EverShop</h1>
 </p>
+<h4 align="center">
+    <a href="https://evershop.io/docs/development/getting-started/introduction">Documentation</a> |
+    <a href="https://demo.evershop.io/">Demo</a>
+</h4>
+
 <p align="center">
   <img src="https://github.com/nodeonline/nodejscart/actions/workflows/build.yml/badge.svg" alt="Github Action">
   <a href="https://discord.gg/GSzt7dt7RM">

package/bin/build/index.js

@@ -2,12 +2,12 @@ const { existsSync, rmSync, mkdirSync } = require('fs');
 const path = require('path');
 const { Componee } = require('../../src/lib/componee/Componee');
 const { CONSTANTS } = require('../../src/lib/helpers');
+const { loadModuleRoutes } = require('../../src/lib/router/loadModuleRoutes');
 const { getRoutes } = require('../../src/lib/router/Router');
 const { isBuildRequired } = require('../../src/lib/webpack/isBuildRequired');
 const { getEnabledExtensions } = require('../extension');
 const { buildEntry } = require('../lib/buildEntry');
 const { buildTailwind } = require('../lib/buildTailWind');
-const { loadModuleRoutes } = require('../lib/loadModuleRoutes');
 const { getCoreModules } = require('../lib/loadModules');
 const { compile } = require('./complie');
 

package/bin/install/index.js

@@ -5,7 +5,7 @@ const path = require('path');
 const { red, green } = require('kleur');
 const ora = require('ora');
 const boxen = require('boxen');
-const mysql = require('mysql');
+const mysql = require('mysql2');
 const { execute } = require('@evershop/mysql-query-builder');
 const { prompt } = require('enquirer');
 const { CONSTANTS } = require('../../src/lib/helpers');

package/bin/lib/addDefaultMiddlewareFuncs.js

@@ -32,6 +32,9 @@ exports.addDefaultMiddlewareFuncs = function addDefaultMiddlewareFuncs(app, rout
         case 'DELETE':
           app.delete(r.path, currentRouteMiddleware);
           break;
+        case 'PATCH':
+          app.patch(r.path, currentRouteMiddleware);
+          break;
         default:
           app.get(r.path, currentRouteMiddleware);
           break;

package/bin/lib/app.js

@@ -6,7 +6,7 @@ const { getModuleMiddlewares } = require('../../src/lib/middleware');
 const { getRoutes } = require('../../src/lib/router/Router');
 const { getCoreModules } = require('./loadModules');
 const { addDefaultMiddlewareFuncs } = require('./addDefaultMiddlewareFuncs');
-const { loadModuleRoutes } = require('./loadModuleRoutes');
+const { loadModuleRoutes } = require('../../src/lib/router/loadModuleRoutes');
 const { Handler } = require('../../src/lib/middleware/Handler');
 const { getEnabledExtensions } = require('../extension');
 
@@ -53,11 +53,34 @@ module.exports.createApp = () => {
   /** Hack for 'no route' case*/
   routes.push({
     id: 'noRoute',
-    path: '/*'
+    path: '/*',
+    method: ['GET', 'POST', 'PUT', 'DELETE', 'PATCH']
   });
 
   routes.forEach((route) => {
-    app.all(route.path, Handler.middleware());
+    //app.all(route.path, Handler.middleware());
+    route.method.forEach((method) => {
+      switch (method.toUpperCase()) {
+        case 'GET':
+          app.get(route.path, Handler.middleware());
+          break;
+        case 'POST':
+          app.post(route.path, Handler.middleware());
+          break;
+        case 'PUT':
+          app.put(route.path, Handler.middleware());
+          break;
+        case 'DELETE':
+          app.delete(route.path, Handler.middleware());
+          break;
+        case 'PATCH':
+          app.patch(route.path, Handler.middleware());
+          break;
+        default:
+          app.get(route.path, Handler.middleware());
+          break;
+      }
+    });
   })
 
   return app;

package/bin/lib/startUp.js

@@ -15,22 +15,6 @@ const server = http.createServer(app);
 
 module.exports.start = async function start(cb) {
   const modules = [...getCoreModules(), ...getEnabledExtensions()];
-  // /** Loading front-end components */
-  // modules.forEach((module) => {
-  //   try {
-  //     // Load components
-  //     Componee.loadModuleComponents(module);
-  //   } catch (e) {
-  //     console.log(e);
-  //     process.exit(0);
-  //   }
-  // });
-
-  /** Build the components */
-  // if (isDevelopmentMode()) {
-  //   const routes = getRoutes();
-  //   await createComponents(routes.filter((r) => isBuildRequired(r)), true);
-  // }
 
   /** Migration */
   try {

package/bin/lib/watch/watchMF.js

@@ -8,9 +8,7 @@ module.exports.watchMF = function (event, path) {
   if (!path.includes(normalize('pages/admin')) &&
     !path.includes(normalize('pages/frontStore')) &&
     !path.includes(normalize('pages/global')) &&
-    !path.includes(normalize('api/admin')) &&
-    !path.includes(normalize('api/frontStore')) &&
-    !path.includes(normalize('api/global'))
+    !path.includes(normalize('api/'))
   ) {
     return;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@evershop/evershop",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.5",
   "description": "The React Ecommerce platform. Built with React and MySQL. Open-source and free. Fast and customizable.",
   "files": [
     "bin",
@@ -31,8 +31,9 @@
   "bugs": {
     "url": "https://github.com/evershopcommerce/evershop/issues"
   },
-  "homepage": "https://github.com/evershopcommerce/evershop",
+  "homepage": "http://evershop.io/",
   "dependencies": {
+    "@babel/core": "^7.20.12",
     "@babel/preset-env": "^7.16.4",
     "@babel/preset-react": "^7.16.0",
     "@evershop/mysql-query-builder": "^1.3.7",
@@ -45,6 +46,8 @@
     "@shopify/draggable": "^1.0.0-beta.8",
     "@stripe/react-stripe-js": "^1.5.0",
     "@stripe/stripe-js": "^1.18.0",
+    "ajv": "^8.11.2",
+    "ajv-formats": "^2.1.1",
     "axios": "^0.21.1",
     "babel-loader": "^8.2.3",
     "bcrypt": "^5.0.1",
@@ -69,12 +72,12 @@
     "immer": "^9.0.3",
     "is-object": "^1.0.2",
     "json5": "^2.2.1",
-    "jsonwebtoken": "^8.5.1",
+    "jsonwebtoken": "^9.0.0",
     "kleur": "3.0.3",
     "luxon": "^2.0.2",
     "mini-css-extract-plugin": "^2.6.1",
     "multer": "^1.4.2",
-    "mysql": "^2.18.1",
+    "mysql2": "^2.3.3",
     "node-sass": "^7.0.1",
     "npm": "^8.18.0",
     "ora": "^5.4.1",
@@ -86,6 +89,7 @@
     "pubsub-js": "^1.9.3",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-fast-compare": "^3.2.0",
     "react-select": "^5.4.0",
     "react-toastify": "^6.2.0",
     "recharts": "^2.0.9",

package/src/lib/babel/config.js

@@ -3,11 +3,11 @@ module.exports = {
   presets: [
     '@babel/preset-react',
     [
-      "@babel/preset-env",
+      '@babel/preset-env',
       {
-        "exclude": ["@babel/plugin-transform-regenerator", "@babel/plugin-transform-async-to-generator"]
+        exclude: ['@babel/plugin-transform-regenerator', '@babel/plugin-transform-async-to-generator']
       }
     ]
   ],
   ignore: ['node_modules']
-}
+};

package/src/lib/babel/index.js

@@ -1,2 +1,2 @@
 const config = require('./config');
-require('@babel/register')(config);
+require('@babel/register')(config);

package/src/lib/bundlee.js

@@ -90,8 +90,7 @@ module.exports = async (request, response, route) => {
   // eslint-disable-next-line no-param-reassign
   route.__BUILDING__ = true;
 
-  if (existsSync(path.resolve(CONSTANTS.ROOTPATH, './.evershop/build', scopePath)))
-    await rmdir(path.resolve(CONSTANTS.ROOTPATH, './.evershop/build', scopePath), { recursive: true });
+  if (existsSync(path.resolve(CONSTANTS.ROOTPATH, './.evershop/build', scopePath))) await rmdir(path.resolve(CONSTANTS.ROOTPATH, './.evershop/build', scopePath), { recursive: true });
 
   const components = JSON.parse(JSON.stringify(getComponentsByRoute(route.id))) || {};
   Object.keys(components).forEach((area) => {
@@ -156,7 +155,7 @@ module.exports = async (request, response, route) => {
 
   await writeFile(path.resolve(CONSTANTS.ROOTPATH, '.evershop/build', scopePath, `${hash}.css`), cssOutput.styles);
 
-  if (!response.context.bundleJs || route.id === "notFound") {
+  if (!response.context.bundleJs || route.id === 'notFound') {
     if (request.isAdmin === true) {
       response.context.bundleJs = buildUrl('adminStaticAsset', [`${scopePath}/${hash}.js`]);
       response.context.bundleCss = buildUrl('adminStaticAsset', [`${scopePath}/${hash}.css`]);

package/src/lib/componee/Componee.js

@@ -11,12 +11,13 @@ class Componee {
   static components = {
     frontStore: {},
     admin: {}
-  }
+  };
 
   static currentScope;
+
   static currentModule;
 
-  static componentsByModule = {}
+  static componentsByModule = {};
 
   static addComponent(scope, route, id, areaId, source, props, sortOrder) {
     const data = {
@@ -103,9 +104,9 @@ class Componee {
     let components = [];
     const modules = [...getCoreModules(), ...getEnabledExtensions()];
     modules.forEach((module) => {
-      const pagePath = route.isAdmin ?
-        path.resolve(module.path, 'pages/admin', route.id) :
-        path.resolve(module.path, 'pages/frontStore', route.id);
+      const pagePath = route.isAdmin
+        ? path.resolve(module.path, 'pages/admin', route.id)
+        : path.resolve(module.path, 'pages/frontStore', route.id);
 
       components = [...components, ...scanForComponents(pagePath)];
     });
@@ -121,7 +122,7 @@ class Componee {
     } else {
       return null;
     }
-  };
+  }
 
   static rebuild() {
     this.components = {
@@ -130,8 +131,8 @@ class Componee {
     };
 
     Object.keys(this.componentsByModule).forEach((modulePath) => {
-      const siteComponents = this.componentsByModule[modulePath]['frontStore'] || {};
-      const adminComponents = this.componentsByModule[modulePath]['admin'] || {};
+      const siteComponents = this.componentsByModule[modulePath].frontStore || {};
+      const adminComponents = this.componentsByModule[modulePath].admin || {};
       this.addComponents('frontStore', siteComponents);
       this.addComponents('admin', adminComponents);
     });
@@ -151,4 +152,4 @@ class Componee {
 }
 
 module.exports = exports;
-exports.Componee = Componee;
+exports.Componee = Componee;

package/src/lib/componee/scanForComponents.js

@@ -8,7 +8,5 @@ module.exports = exports = {};
 exports.scanForComponents = function scanForComponents(path) {
   return readdirSync(resolve(path), { withFileTypes: true })
     .filter((dirent) => dirent.isFile() && /.js$/.test(dirent.name) && /^[A-Z]/.test(dirent.name[0]))
-    .map((dirent) => {
-      return resolve(path, dirent.name);
-    });
+    .map((dirent) => resolve(path, dirent.name));
 };

package/src/lib/components/Area.js

@@ -36,8 +36,8 @@ function Area(props) {
     <WrapperComponent {...areaWrapperProps}>
       {areaComponents.map((w, index) => {
         const C = w.component.default;
-        const id = w.id;
-        const propsMap = context.propsMap;
+        const { id } = w;
+        const { propsMap } = context;
         const propsData = context.graphqlResponse;
         const propKeys = propsMap[id] || [];
         const componentProps = propKeys.reduce((acc, map) => {

package/src/lib/components/BundleCss.js

@@ -6,7 +6,7 @@ import { get } from '../util/get';
 export default function BundleCSS() {
   const src = get(useAppState(), 'bundleCss');
   if (!src) {
-    return null
+    return null;
   } else {
     return <Link rel="stylesheet" href={src} />;
   }

package/src/lib/components/LoadingBar.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { useAppState } from '../context/app';
+import './LoadingBar.scss';
+
+const LoadingBar = function () {
+  const { fetching } = useAppState();
+  const [width, setWidth] = React.useState(0);
+  const widthRef = React.useRef(0);
+
+  React.useEffect(() => {
+    widthRef.current = width;
+    if (fetching === true) {
+      // Random number between 1 and 3
+      const step = Math.random() * (3 - 1) + 1;
+      // Random number between 85 and 95
+      const peak = Math.random() * (95 - 85) + 85;
+      if (widthRef.current < peak) {
+        const timer = setTimeout(() => setWidth(widthRef.current + step), 0);
+        return () => clearTimeout(timer);
+      }
+    } else if (widthRef.current === 100) {
+      setWidth(0);
+      widthRef.current = 0;
+    } else if (widthRef.current !== 0) setWidth(100);
+  });
+
+  return (
+    <div
+      className="loading-bar"
+      style={{ width: `${width}%`, display: fetching === true ? 'block' : 'none' }}
+    />
+  );
+};
+
+export default LoadingBar;

package/src/lib/components/LoadingBar.scss

@@ -0,0 +1,14 @@
+.loading-bar {
+    background: #058C8C;
+    height: 4px;
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    -webkit-transition: width 1.5s;
+    -moz-transition: width 1.5s;
+    -o-transition: width 1.5s;
+    transition: width 1.5s;
+    width: 0%;
+    z-index: 1001;
+}

package/src/lib/components/form/Field.js

@@ -16,6 +16,24 @@ import { useFormContext } from './Form';
 import { FORM_FIELD_UPDATED } from '../../util/events';
 import './Field.scss';
 import { Password } from './fields/Password';
+import isEqual from 'react-fast-compare';
+
+const useMemoizeArgs = (args, equalityFunc) => {
+  const ref = React.useRef();
+  const prevArgs = ref.current;
+  const argsAreEqual =
+    prevArgs !== undefined &&
+    args.length === prevArgs.length &&
+    args.every((v, i) => equalityFunc(v, prevArgs[i]));
+
+  React.useEffect(() => {
+    if (!argsAreEqual) {
+      ref.current = args;
+    }
+  });
+
+  return argsAreEqual ? prevArgs : args;
+};
 
 export function Field(props) {
   const {
@@ -40,14 +58,14 @@ export function Field(props) {
   React.useEffect(() => {
     setFieldValue(value);
     context.updateField(name, value, validationRules);
-  }, [value]);
+  }, useMemoizeArgs([value], isEqual));
 
   React.useEffect(() => {
     if (field) setFieldValue(field.value);
   }, [field]);
 
   React.useEffect(() => {
-    PubSub.publishSync(FORM_FIELD_UPDATED, { name: name, value: fieldValue });
+    PubSub.publishSync(FORM_FIELD_UPDATED, { name, value: fieldValue });
   }, [fieldValue]);
 
   const onChangeFunc = (newValue) => {

package/src/lib/components/form/Form.js

@@ -16,7 +16,7 @@ export function Form(props) {
     id,
     action,
     method,
-    isJSON,
+    isJSON = true,
     onStart,
     onComplete,
     onError,
@@ -30,6 +30,7 @@ export function Form(props) {
   const [fields, setFields] = React.useState([]);
   const formRef = React.useRef();
   const [loading, setLoading] = useState(false);
+  const [state, setState] = useState('initialized');
 
   const addField = (name, value, validationRules = []) => {
     setFields((previous) => previous.concat({ name, value, validationRules }));
@@ -88,6 +89,7 @@ export function Form(props) {
 
   const submit = async (e) => {
     e.preventDefault();
+    setState('submitting');
     try {
       PubSub.publishSync(FORM_SUBMIT, { props });
       const errors = validate();
@@ -101,11 +103,10 @@ export function Form(props) {
           {
             method,
             body: isJSON === true ? JSON.stringify(serializeForm(formData.entries())) : formData,
-            headers: Object.assign({
-              'X-Requested-With': 'XMLHttpRequest'
-            },
-              isJSON === true ? { 'Content-Type': 'application/json' } : {}
-            )
+            headers: {
+              'X-Requested-With': 'XMLHttpRequest',
+              ...(isJSON === true ? { 'Content-Type': 'application/json' } : {})
+            }
           }
         );
 
@@ -122,7 +123,9 @@ export function Form(props) {
         if (onSuccess) {
           await onSuccess(responseJson);
         }
+        setState('submitSuccess');
       } else {
+        setState('validateFailed');
         if (onValidationError) {
           await onValidationError();
         }
@@ -136,12 +139,14 @@ export function Form(props) {
         }
       }
     } catch (error) {
+      setState('submitFailed');
       if (onError) {
         await onError(error);
       }
-      throw error
+      throw error;
     } finally {
       setLoading(false);
+      setState('submitted');
       if (onComplete) {
         await onComplete();
       }
@@ -152,10 +157,10 @@ export function Form(props) {
   return (
     <FormContext.Provider
       value={{
-        fields, addField, updateField, removeField, ...props
+        fields, addField, updateField, removeField, state, ...props
       }}
     >
-      <FormDispatch.Provider value={{ submit }}>
+      <FormDispatch.Provider value={{ submit, validate }}>
         <form
           ref={formRef}
           id={id}

package/src/lib/components/form/fields/Checkbox.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import Error from './Error';
-import './../Field.scss';
+import '../Field.scss';
 
 function CheckedIcon() {
   return (

package/src/lib/components/form/fields/Ckeditor.js

@@ -6,7 +6,7 @@ import React from 'react';
 import { TextArea } from './Textarea';
 import Button from '../Button';
 import { Input } from './Input';
-import './../Field.scss';
+import '../Field.scss';
 
 function File({ file, select }) {
   const className = file.isSelected === true ? 'selected' : '';

package/src/lib/components/form/fields/Date.js

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import flatpickr from './Flatpickr';
 import Error from './Error';
-import './../Field.scss';
+import '../Field.scss';
 
 const Date = React.forwardRef((props, ref) => {
   const {

package/src/lib/components/form/fields/DateTime.js

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import flatpickr from './Flatpickr';
 import Error from './Error';
-import './../Field.scss';
+import '../Field.scss';
 
 const DateTime = React.forwardRef((props, ref) => {
   const {

package/src/lib/components/form/fields/Input.js

@@ -2,7 +2,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import Error from './Error';
-import './../Field.scss';
+import '../Field.scss';
 
 const inputProps = function buidProps(props) {
   const obj = {};

package/src/lib/components/form/fields/MultiSelect.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import Error from './Error';
-import './../Field.scss';
+import '../Field.scss';
 
 const MultiSelect = React.forwardRef((props, ref) => {
   const {
@@ -19,7 +19,7 @@ const MultiSelect = React.forwardRef((props, ref) => {
           defaultValue={value}
           onChange={(e) => { if (onChange) onChange.call(window, e); }}
           ref={ref}
-          multiple={true}
+          multiple
         >
           <option value="" disabled>Please select</option>
           {options && options.map(

package/src/lib/components/form/fields/Password.js

@@ -2,7 +2,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import Error from './Error';
-import './../Field.scss';
+import '../Field.scss';
 
 const inputProps = function buidProps(props) {
   const obj = {};

package/src/lib/components/form/fields/Radio.js

@@ -2,7 +2,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import Error from './Error';
-import './../Field.scss';
+import '../Field.scss';
 
 function CheckedIcon() {
   return <span className="radio-checked"><span /></span>;

package/src/lib/components/form/fields/Select.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import Error from './Error';
-import './../Field.scss';
+import '../Field.scss';
 
 const Select = React.forwardRef((props, ref) => {
   const {
@@ -25,12 +25,11 @@ const Select = React.forwardRef((props, ref) => {
           value={_value}
           onChange={(e) => {
             if (onChange) {
-              onChange.call(window, e)
+              onChange.call(window, e);
             } else {
               setValue(e.target.value);
             }
-          }
-          }
+          }}
           ref={ref}
         >
           <option value="" disabled>Please select</option>

package/src/lib/components/form/fields/Textarea.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import Error from './Error';
-import './../Field.scss';
+import '../Field.scss';
 
 function TextArea({
   name, value, label, onChange, error, instruction, placeholder

package/src/lib/components/form/validator.js

@@ -2,8 +2,7 @@ const validator = {};
 const rules = {
   email: {
     handler(value) {
-      if (value === null || value === undefined || value === '')
-        return true;
+      if (value === null || value === undefined || value === '') return true;
       // eslint-disable-next-line no-useless-escape
       const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
       return re.test(String(value).toLowerCase());
@@ -12,8 +11,7 @@ const rules = {
   },
   number: {
     handler(value) {
-      if (value === null || value === undefined || value === '')
-        return true;
+      if (value === null || value === undefined || value === '') return true;
       return /^-?[0-9]+$/.test(value);
     },
     errorMessage: 'Invalid number'

package/src/lib/components/grid/headers/Dropdown.js

@@ -2,7 +2,9 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { Select } from '../../form/fields/Select';
 
-export default function DropdownColumnHeader({ title, id, options = [], currentFilters = [] }) {
+export default function DropdownColumnHeader({
+  title, id, options = [], currentFilters = []
+}) {
   const [current, setCurrent] = React.useState('');
 
   const onChange = (e) => {

package/src/lib/components/locale/ProvinceOption.js

@@ -3534,7 +3534,9 @@ function ProvinceOptions(props) {
       child,
       {
         options: options.filter(
-          (o) => o.country_code === country), ...props
+          (o) => o.country_code === country
+        ),
+        ...props
       }
     )
   );