@evershop/evershop 1.1.0 → 1.2.0

package/bin/build/index.js

@@ -1,3 +1,5 @@
+process.env.ALLOW_CONFIG_MUTATIONS = true;
+const config = require('config');
 const { existsSync, rmSync, mkdirSync } = require('fs');
 const path = require('path');
 const { CONSTANTS } = require('@evershop/evershop/src/lib/helpers');
@@ -11,8 +13,14 @@ const {
 const { buildEntry } = require('@evershop/evershop/bin/lib/buildEntry');
 const { getCoreModules } = require('@evershop/evershop/bin/lib/loadModules');
 const { error } = require('@evershop/evershop/src/lib/log/logger');
+const { lockHooks } = require('@evershop/evershop/src/lib/util/hookable');
+const { lockRegistry } = require('@evershop/evershop/src/lib/util/registry');
+const {
+  validateConfiguration
+} = require('@evershop/evershop/src/lib/util/validateConfiguration');
 const { compile } = require('./complie');
 const { getEnabledExtensions } = require('../extension');
+const { loadBootstrapScript } = require('../lib/bootstrap/bootstrap');
 require('dotenv').config();
 /* Loading modules and initilize routes, components */
 const modules = [...getCoreModules(), ...getEnabledExtensions()];
@@ -38,6 +46,22 @@ if (existsSync(path.resolve(CONSTANTS.BUILDPATH))) {
 }
 
 (async () => {
+  /** Loading bootstrap script from modules */
+  try {
+    // eslint-disable-next-line no-restricted-syntax
+    for (const module of modules) {
+      await loadBootstrapScript(module);
+    }
+    lockHooks();
+    lockRegistry();
+    // Get the configuration (nodeconfig)
+    validateConfiguration(config);
+  } catch (e) {
+    error(e);
+    process.exit(0);
+  }
+  process.env.ALLOW_CONFIG_MUTATIONS = false;
+
   const routes = getRoutes();
   await buildEntry(routes.filter((r) => isBuildRequired(r)));
 

package/bin/extension/index.js

@@ -5,7 +5,7 @@ const { getConfig } = require('@evershop/evershop/src/lib/util/getConfig');
 const { getCoreModules } = require('@evershop/evershop/bin/lib/loadModules');
 const { warning } = require('@evershop/evershop/src/lib/log/logger');
 
-let extensions = [];
+let extensions;
 
 function loadExtensions() {
   const coreModules = getCoreModules();
@@ -42,7 +42,7 @@ function loadExtensions() {
 }
 
 module.exports.getEnabledExtensions = function getEnabledExtensions() {
-  if (extensions.length === 0) {
+  if (extensions === undefined) {
     extensions = loadExtensions();
   }
   return extensions;

package/bin/lib/addDefaultMiddlewareFuncs.js

@@ -78,10 +78,10 @@ exports.addDefaultMiddlewareFuncs = function addDefaultMiddlewareFuncs(
           }),
     secret: cookieSecret,
     cookie: {
-      maxAge: 24 * 60 * 60 * 1000
+      maxAge: getConfig('system.session.maxAge', 24 * 60 * 60 * 1000)
     },
     resave: getConfig('system.session.resave', false),
-    saveUninitialized: true
+    saveUninitialized: getConfig('system.session.saveUninitialized', true)
   };
 
   if (isProductionMode()) {
@@ -261,6 +261,11 @@ exports.addDefaultMiddlewareFuncs = function addDefaultMiddlewareFuncs(
         } else {
           middlewareFunc = route.webpackMiddleware;
         }
+        middlewareFunc.waitUntilValid(() => {
+          const { stats } = middlewareFunc.context;
+          const jsonWebpackStats = stats.toJson();
+          response.locals.jsonWebpackStats = jsonWebpackStats;
+        });
         // We need to run build for notFound route
         const notFoundRoute = routes.find((r) => r.id === 'notFound');
         const notFoundWebpackCompiler = notFoundRoute.webpackCompiler;

package/bin/lib/buildEntry.js

@@ -14,6 +14,9 @@ const {
 } = require('@evershop/evershop/src/lib/webpack/util/parseGraphql');
 const JSON5 = require('json5');
 const { error } = require('@evershop/evershop/src/lib/log/logger');
+const {
+  getEnabledWidgets
+} = require('@evershop/evershop/src/lib/util/getEnabledWidgets');
 /**
  * Only pass the page routes, not api routes
  */
@@ -21,6 +24,7 @@ module.exports.buildEntry = async function buildEntry(
   routes,
   clientOnly = false
 ) {
+  const widgets = getEnabledWidgets();
   await Promise.all(
     routes.map(async (route) => {
       const subPath = getRouteBuildPath(route);
@@ -70,6 +74,16 @@ module.exports.buildEntry = async function buildEntry(
         route.isAdmin ? 'HydrateAdmin' : 'HydrateFrontStore'
       }';
       `;
+      areas['*'] = areas['*'] || {};
+      widgets.forEach((widget) => {
+        areas['*'][widget.type] = {
+          id: widget.type,
+          sortOrder: widget.sortOrder || 0,
+          component: route.isAdmin
+            ? `---require('${widget.setting_component}')---`
+            : `---require('${widget.component}')---`
+        };
+      });
       contentClient += '\r\n';
       contentClient += `Area.defaultProps.components = ${inspect(areas, {
         depth: 5
@@ -93,6 +107,7 @@ module.exports.buildEntry = async function buildEntry(
         /** Build query */
         const query = `${JSON.stringify(parseGraphql(components))}`;
 
+        // Loop through the widgets config and add the query to the widgets
         let contentServer = `import React from 'react'; `;
         contentServer += '\r\n';
         contentServer += `import ReactDOM from 'react-dom'; `;

package/bin/lib/onListening.js

@@ -1,5 +1,5 @@
 const boxen = require('boxen');
-const { success } = require('@evershop/evershop/src/lib/log/logger');
+const { green } = require('kleur');
 const normalizePort = require('./normalizePort');
 
 const port = normalizePort();
@@ -7,13 +7,16 @@ const port = normalizePort();
  * Event listener for HTTP server "listening" event.
  */
 module.exports = function onListening() {
-  success(
-    boxen(`Your website is running at "http://localhost:${port}"`, {
+  const message = boxen(
+    `Your website is running at "http://localhost:${port}"`,
+    {
       title: 'EverShop',
       titleAlignment: 'center',
       padding: 1,
       margin: 1,
       borderColor: 'green'
-    })
+    }
   );
+  // eslint-disable-next-line no-console
+  console.log(green(message));
 };

package/bin/lib/startUp.js

@@ -1,4 +1,5 @@
 const http = require('http');
+const config = require('config');
 const { Handler } = require('@evershop/evershop/src/lib/middleware/Handler');
 const spawn = require('cross-spawn');
 const path = require('path');
@@ -6,6 +7,9 @@ const { error } = require('@evershop/evershop/src/lib/log/logger');
 const isDevelopmentMode = require('@evershop/evershop/src/lib/util/isDevelopmentMode');
 const { lockHooks } = require('@evershop/evershop/src/lib/util/hookable');
 const { lockRegistry } = require('@evershop/evershop/src/lib/util/registry');
+const {
+  validateConfiguration
+} = require('@evershop/evershop/src/lib/util/validateConfiguration');
 const { createApp } = require('./app');
 const normalizePort = require('./normalizePort');
 const onListening = require('./onListening');
@@ -30,6 +34,8 @@ module.exports.start = async function start(cb) {
     }
     lockHooks();
     lockRegistry();
+    // Get the configuration (nodeconfig)
+    validateConfiguration(config);
   } catch (e) {
     error(e);
     process.exit(0);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@evershop/evershop",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "The React Ecommerce platform. Built with React and Postgres. Open-source and free. Fast and customizable.",
   "files": [
     "bin",
@@ -40,6 +40,12 @@
     "@babel/preset-react": "^7.16.0",
     "@ckeditor/ckeditor5-build-classic": "^36.0.1",
     "@ckeditor/ckeditor5-react": "^5.1.0",
+    "@editorjs/editorjs": "^2.30.2",
+    "@editorjs/header": "^2.8.7",
+    "@editorjs/list": "^1.10.0",
+    "@editorjs/quote": "^2.6.0",
+    "@editorjs/raw": "^2.5.0",
+    "@evershop/editorjs-image": "^1.0.0",
     "@evershop/postgres-query-builder": "^1.2.0",
     "@graphql-tools/load-files": "^6.6.1",
     "@graphql-tools/merge": "^8.3.5",
@@ -50,6 +56,7 @@
     "@shopify/draggable": "^1.0.0-beta.8",
     "@stripe/react-stripe-js": "^1.5.0",
     "@stripe/stripe-js": "^1.18.0",
+    "@tailwindcss/typography": "^0.5.13",
     "ajv": "^8.12.0",
     "ajv-errors": "^3.0.0",
     "ajv-formats": "^2.1.1",
@@ -82,6 +89,7 @@
     "html-webpack-plugin": "^5.5.0",
     "immer": "^9.0.3",
     "is-object": "^1.0.2",
+    "is-resolvable": "^1.1.0",
     "jsesc": "^3.0.2",
     "json5": "^2.2.1",
     "kleur": "3.0.3",

package/src/components/admin/catalog/productEdit/category/CategoryItem.jsx

@@ -32,16 +32,11 @@ function CategoryItem({ category, selectedCategory, setSelectedCategory }) {
   const { data, fetching, error } = result;
 
   if (error) {
-    return (
-      <p>
-        Oh no...
-        {error.message}
-      </p>
-    );
+    return <p className="text-critical">{error.message}</p>;
   }
   return (
     <li>
-      <div className="flex justify-start gap-1 items-center">
+      <div className="flex justify-start gap-4 items-center">
         {!category.children && (
           <a
             href="#"

package/src/components/admin/catalog/productEdit/category/CategoryTree.jsx

@@ -31,22 +31,29 @@ function CategoryTree({ selectedCategory, setSelectedCategory }) {
   const { data, fetching, error } = result;
 
   if (fetching) {
-    return <Spinner width={30} height={30} />;
+    return (
+      <div className="category-tree-container absolute top-full left-0 right-0 border rounded">
+        <Spinner width={30} height={30} />
+      </div>
+    );
   }
   if (error) {
     return (
-      <p>
-        Oh no...
-        {error.message}
-      </p>
+      <div className="category-tree-container absolute top-full left-0 right-0 border rounded">
+        <p className="text-critical">{error.message}</p>
+      </div>
     );
   }
   if (data.categories.items.length === 0) {
-    return <div>There is no category</div>;
+    return (
+      <div className="category-tree-container absolute top-full left-0 right-0 border rounded">
+        <div>There is no category</div>
+      </div>
+    );
   }
 
   return (
-    <div>
+    <div className="category-tree-container absolute top-full left-0 right-0 border rounded">
       <ul className="category-tree">
         {data.categories.items.map((category) => (
           <CategoryItem

package/src/components/admin/catalog/productEdit/category/CategoryTree.scss

@@ -2,4 +2,14 @@
   ul {
     margin-left: 20px;
   }
+}
+.category-tree-container {
+  background-color: #fff;
+  z-index: 100;
+  border-color: #c9cccf;
+  padding:10px;
+  box-sizing: border-box;
+  max-height: 250px;
+  overflow-y: auto;
+  overflow-x: hidden;
 }

package/src/components/admin/catalog/productEdit/variants/CreateVariant.jsx

@@ -20,7 +20,7 @@ export function CreateVariant({
 
   return (
     <div>
-      <div className="mt-2">
+      <div className="mt-8">
         <Button
           title="Add Variant"
           onAction={() => {
@@ -46,7 +46,7 @@ export function CreateVariant({
                   </Card.Session>
                   <Card.Session>
                     <div className="flex justify-end">
-                      <div className="grid grid-cols-2 gap-1">
+                      <div className="grid grid-cols-2 gap-4">
                         <SubmitButton
                           productId={productId}
                           attributes={variantGroup.attributes}

package/src/components/admin/catalog/productEdit/variants/CreateVariantGroup.jsx

@@ -114,7 +114,7 @@ export function CreateVariantGroup({ createVariantGroupApi, setGroup }) {
                 }}
               />
             ))}
-            <div className="mt-2">
+            <div className="mt-8">
               <a
                 className="text-interactive hover:underline"
                 href="#"

package/src/components/admin/catalog/productEdit/variants/EditVariant.jsx

@@ -45,7 +45,7 @@ export function EditVariant({
             </Card.Session>
             <Card.Session>
               <div className="flex justify-end">
-                <div className="grid grid-cols-2 gap-1">
+                <div className="grid grid-cols-2 gap-4">
                   <Button
                     title="Save"
                     variant="primary"

package/src/components/admin/catalog/productEdit/variants/New.jsx

@@ -11,8 +11,8 @@ export function New({ createVariantGroupApi, setGroup }) {
         {action === undefined && (
           <div>
             <div className="justify-center text-center">
-              <div className="mb-4">
-                <span className="pr-1">
+              <div className="mb-16">
+                <span className="pr-4">
                   This product has some variants like color or size?
                 </span>
                 <a

package/src/components/admin/catalog/productEdit/variants/Search.jsx

@@ -30,7 +30,7 @@ export function Search({ addVariant, variants }) {
   };
 
   return (
-    <div className="flex justify-between mt-1">
+    <div className="flex justify-between mt-4">
       <div className="self-center">
         <div className="autocomplete-search">
           <Input

package/src/components/admin/catalog/productEdit/variants/SearchModal.jsx

@@ -174,7 +174,7 @@ export function SearchModal({ keyword, variants, addVariant, searchAPI }) {
           </div>
         )}
         {potentialVariants.length <= 0 && (
-          <div className="flex justify-center p-1">
+          <div className="flex justify-center p-4">
             There is no product to show
           </div>
         )}

package/src/components/admin/catalog/productEdit/variants/VariantModal.jsx

@@ -62,8 +62,8 @@ export function VariantModal({
     return <p className="text-critical">{error.message}</p>;
   }
   return (
-    <div className="variant-item pb-15 border-b border-solid border-divider mb-15 last:border-b-0 last:pb-0">
-      <div className="grid grid-cols-2 gap-x-1">
+    <div className="variant-item pb-6 border-b border-solid border-divider mb-6 last:border-b-0 last:pb-0">
+      <div className="grid grid-cols-2 gap-x-4">
         <div className="col-span-1">
           <ProductMediaManager
             id="images"
@@ -72,9 +72,9 @@ export function VariantModal({
           />
         </div>
         <div className="col-span-1">
-          <div className="grid grid-cols-2 gap-x-1 border-b border-divider pb-15 mb-15">
+          <div className="grid grid-cols-2 gap-x-4 border-b border-divider pb-6 mb-6">
             {data?.attributes?.items.map((a, index) => (
-              <div key={a.attributeId} className="mt-1 col">
+              <div key={a.attributeId} className="mt-4 col">
                 <div>
                   <label>{a.attributeName}</label>
                 </div>
@@ -106,7 +106,7 @@ export function VariantModal({
               </div>
             ))}
           </div>
-          <div className="grid grid-cols-3 gap-x-1 border-b border-divider pb-15 mb-15">
+          <div className="grid grid-cols-3 gap-x-4 border-b border-divider pb-6 mb-6">
             <div>
               <div>SKU</div>
               <Field
@@ -128,7 +128,7 @@ export function VariantModal({
               />
             </div>
           </div>
-          <div className="grid grid-cols-3 gap-x-1">
+          <div className="grid grid-cols-3 gap-x-4">
             <div>
               <div>Status</div>
               <Field

package/src/components/admin/catalog/productGrid/rows/ThumbnailRow.jsx

@@ -5,7 +5,7 @@ export default function ThumbnailRow({ src, name }) {
   return (
     <td>
       <div
-        className="grid-thumbnail text-border border border-divider p-075 rounded flex justify-center"
+        className="grid-thumbnail text-border border border-divider p-3 rounded flex justify-center"
         style={{ width: '6rem', height: '6rem' }}
       >
         {src && <img className="self-center" src={src} alt={name} />}

package/src/components/admin/checkout/shippingSetting/Method.jsx

@@ -10,11 +10,11 @@ function Method({ method, getZones }) {
   return (
     <>
       <>
-        <td className="border-none py-1">{method.name}</td>
-        <td className="border-none py-1">
+        <td className="border-none py-4">{method.name}</td>
+        <td className="border-none py-4">
           {method.isEnabled ? 'Enabled' : 'Disabled'}
         </td>
-        <td className="border-none py-1">
+        <td className="border-none py-4">
           {method.cost?.text || (
             <a
               href="#"
@@ -28,14 +28,14 @@ function Method({ method, getZones }) {
             </a>
           )}
         </td>
-        <td className="border-none py-1">
+        <td className="border-none py-4">
           {method.conditionType
             ? `${method.min || 0} <= ${method.conditionType} <= ${
                 method.max || '∞'
               }`
             : 'None'}
         </td>
-        <td className="border-none py-1">
+        <td className="border-none py-4">
           <a
             href="#"
             className="text-interactive"
@@ -48,7 +48,7 @@ function Method({ method, getZones }) {
           </a>
           <a
             href="#"
-            className="text-critical ml-2"
+            className="text-critical ml-8"
             onClick={async (e) => {
               e.preventDefault();
               try {

package/src/components/admin/checkout/shippingSetting/MethodForm.jsx

@@ -29,7 +29,7 @@ function Condition({ method }) {
   const [type, setType] = React.useState(method?.conditionType || 'price');
   return (
     <div>
-      <div className="mb-1">
+      <div className="mb-4">
         <Radio
           name="condition_type"
           options={[
@@ -40,7 +40,7 @@ function Condition({ method }) {
           value={type}
         />
       </div>
-      <div className="grid grid-cols-2 gap-2">
+      <div className="grid grid-cols-2 gap-8">
         <div>
           <Field
             name="min"
@@ -175,7 +175,7 @@ function MethodForm({ saveMethodApi, closeModal, getZones, method }) {
               value={shippingMethod}
             />
           ) : (
-            <div className="flex gap-1 justify-start items-center">
+            <div className="flex gap-4 justify-start items-center">
               <Input
                 name="name"
                 type="text"
@@ -293,7 +293,7 @@ function MethodForm({ saveMethodApi, closeModal, getZones, method }) {
           {hasCondition && <Condition method={method} />}
         </Card.Session>
         <Card.Session>
-          <div className="flex justify-end gap-1">
+          <div className="flex justify-end gap-4">
             <Button
               title="Cancel"
               variant="secondary"

package/src/components/admin/checkout/shippingSetting/Methods.jsx

@@ -7,7 +7,7 @@ import MethodForm from '@components/admin/checkout/shippingSetting/MethodForm';
 export function Methods({ getZones, methods, addMethodApi }) {
   const modal = useModal();
   return (
-    <div className="my-2">
+    <div className="my-8">
       <table className="border-collapse divide-y">
         <thead>
           <tr>
@@ -19,12 +19,12 @@ export function Methods({ getZones, methods, addMethodApi }) {
           </tr>
         </thead>
         {methods.map((method) => (
-          <tr key={method.methodId} className="border-divider py-2">
+          <tr key={method.methodId} className="border-divider py-8">
             <Method method={method} getZones={getZones} />
           </tr>
         ))}
       </table>
-      <div className="mt-1">
+      <div className="mt-4">
         <a
           href="#"
           className="text-interactive"

package/src/components/admin/checkout/shippingSetting/PriceBasedPrice.jsx

@@ -11,7 +11,7 @@ export default function PriceBasedPrice({ lines }) {
     }))
   );
   return (
-    <div className="my-2">
+    <div className="my-8">
       <table className="border-collapse divide-y">
         <thead>
           <tr>
@@ -23,7 +23,7 @@ export default function PriceBasedPrice({ lines }) {
         <tbody>
           {rows.map((row, index) => (
             // Create a random key for each row
-            <tr key={row.key} className="border-divider py-2">
+            <tr key={row.key} className="border-divider py-8">
               <td className="border-none">
                 <Field
                   name={`price_based_cost[${index}][min_price]`}

package/src/components/admin/checkout/shippingSetting/WeightBasedPrice.jsx

@@ -11,7 +11,7 @@ export default function WeightBasedPrice({ lines }) {
     }))
   );
   return (
-    <div className="my-2">
+    <div className="my-8">
       <table className="border-collapse divide-y">
         <thead>
           <tr>
@@ -23,7 +23,7 @@ export default function WeightBasedPrice({ lines }) {
         <tbody>
           {rows.map((row, index) => (
             // Create a random key for each row
-            <tr key={row.key} className="border-divider py-2">
+            <tr key={row.key} className="border-divider py-8">
               <td className="border-none">
                 <Field
                   name={`weight_based_cost[${index}][min_weight]`}

package/src/components/admin/checkout/shippingSetting/Zone.jsx

@@ -13,9 +13,9 @@ function Zone({ zone, countries, getZones }) {
   return (
     <Card.Session
       title={
-        <div className="flex justify-between items-center gap-2">
+        <div className="flex justify-between items-center gap-8">
           <div>{zone.name}</div>
-          <div className="flex justify-between gap-2">
+          <div className="flex justify-between gap-8">
             <a
               href="#"
               className="text-interactive"
@@ -58,11 +58,11 @@ function Zone({ zone, countries, getZones }) {
       }
     >
       <div className="divide-y border rounded border-divider">
-        <div className="flex justify-start items-center border-divider mt-2">
-          <div className="p-2">
+        <div className="flex justify-start items-center border-divider mt-8">
+          <div className="p-8">
             <MapIcon width={25} height={25} fill="#008060" />
           </div>
-          <div className="flex-grow px-1">
+          <div className="flex-grow px-4">
             <div>
               <b>{zone.country?.name || 'Worldwide'}</b>
             </div>
@@ -75,8 +75,8 @@ function Zone({ zone, countries, getZones }) {
             </div>
           </div>
         </div>
-        <div className="flex justify-start items-center border-divider mt-2">
-          <div className="flex-grow px-1">
+        <div className="flex justify-start items-center border-divider mt-8">
+          <div className="flex-grow px-4">
             <Methods
               methods={zone.methods}
               getZones={getZones}

package/src/components/admin/checkout/shippingSetting/ZoneForm.jsx

@@ -84,7 +84,7 @@ function ZoneForm({
           />
         </Card.Session>
         <Card.Session>
-          <div className="flex justify-end gap-1">
+          <div className="flex justify-end gap-4">
             <Button title="Cancel" variant="secondary" onAction={closeModal} />
             <Button
               title="Save"

package/src/components/admin/cms/Card.jsx

@@ -9,7 +9,7 @@ function Card({ title, actions = [], subdued = false, children }) {
         <div className="flex justify-between card-header">
           {title && <h2 className="card-title">{title}</h2>}
           {actions.length > 0 && (
-            <div className="flex space-x-075">
+            <div className="flex space-x-3">
               {actions.map((action, index) => {
                 const className = {
                   primary: 'text-primary',
@@ -69,10 +69,10 @@ const Session = function Session({ actions = [], title, children }) {
   return (
     <div className="card-section border-b box-border">
       {(title || actions.length > 0) && (
-        <div className="flex justify-between card-section-header mb-1">
+        <div className="flex justify-between card-section-header mb-4">
           {title && <h3 className="card-session-title">{title}</h3>}
           {actions.length > 0 && (
-            <div className="flex space-x-075">
+            <div className="flex space-x-3">
               {actions.map((action, index) => {
                 const className = {
                   primary: 'text-primary',

package/src/components/admin/cms/PageHeading.jsx

@@ -8,7 +8,7 @@ function BreadcrumbIcon({ backUrl }) {
   return (
     <a
       href={backUrl}
-      className="breadcrum-icon border block border-border rounded mr-075"
+      className="breadcrum-icon border block border-border rounded mr-3"
     >
       <span className="flex items-center justify-center">
         <svg
@@ -51,7 +51,7 @@ function PageHeading({ backUrl, heading }) {
 
   return (
     <div className="page-heading flex justify-between items-center">
-      <div className="flex justify-start space-x-1 items-center">
+      <div className="flex justify-start space-x-4 items-center">
         <Area
           id="pageHeadingLeft"
           noOuter
@@ -75,7 +75,7 @@ function PageHeading({ backUrl, heading }) {
           ]}
         />
       </div>
-      <div className="flex justify-end space-x-1 items-center">
+      <div className="flex justify-end space-x-4 items-center">
         <Area id="pageHeadingRight" noOuter coreComponents={[]} />
       </div>
     </div>