@evershop/evershop 1.1.0 → 1.2.1

package/src/modules/catalog/pages/admin/productEdit+productNew/Attributes.jsx

@@ -39,7 +39,7 @@ export default function Attributes({ product, groups: { items } }) {
                 value={currentGroup.groupId}
                 name="group_id"
               />
-              <div className="border rounded border-divider p-1">
+              <div className="border rounded border-divider p-4">
                 <span>{currentGroup.groupName}</span>
               </div>
               <div className="italic text-textSubdued">
@@ -254,7 +254,7 @@ export const layout = {
 };
 
 export const query = `
-  query Query {
+  query Query ($filters: [FilterInput!]) {
     product(id: getContextValue("productId", null)) {
       groupId
       variantGroupId
@@ -264,7 +264,7 @@ export const query = `
         optionText
       }
     },
-    groups: attributeGroups {
+    groups: attributeGroups(filters: $filters) {
       items {
         groupId: attributeGroupId
         groupName
@@ -285,3 +285,8 @@ export const query = `
     }
   }
 `;
+
+export const variables = `
+{
+  filters: [{ key: "limit", operation: 'eq', value: 1000 }]
+}`;

package/src/modules/catalog/pages/admin/productEdit+productNew/CustomOptions.jsss

@@ -68,7 +68,7 @@ export default function CustomOption() {
         } = option;
         return (
           <Card.Session key={option_id} title={option_name || 'New option'} actions={[{ variant: 'critical', name: 'Remove option', onAction: () => { removeOption(option_id); } }]}>
-            <div className="grid grid-cols-3 gap-1 mb-1">
+            <div className="grid grid-cols-3 gap-4 mb-4">
               <div>
                 <Field
                   name={`options[${option_id}][option_name]`}
@@ -99,7 +99,7 @@ export default function CustomOption() {
                 />
               </div>
             </div>
-            <div className="mb-1">
+            <div className="mb-4">
               <Field
                 name={`options[${option_id}][is_required]`}
                 isChecked={parseInt(is_required, 10) === 1}
@@ -109,7 +109,7 @@ export default function CustomOption() {
               />
             </div>
             <Card.Session title="Option values" actions={[{ variant: 'interactive', name: 'Add value', onAction: () => { addCustomOptionValue(option_id); } }]}>
-              <div className="grid grid-cols-4 gap-1 mt-05">
+              <div className="grid grid-cols-4 gap-4 mt-2">
                 <div>Value</div>
                 <div>Extra Price</div>
                 <div>Sort Order</div>
@@ -121,7 +121,7 @@ export default function CustomOption() {
                   value_id, option_id, extra_price, sort_order, value
                 } = val;
                 return (
-                  <div key={val.value_id} className="grid-cols-4 grid gap-1 mb-05">
+                  <div key={val.value_id} className="grid-cols-4 grid gap-4 mb-2">
                     <div>
                       <Field
                         name={`options[${option_id}][values][${value_id}][value]`}

package/src/modules/catalog/pages/admin/productEdit+productNew/FormContent.jsx

@@ -9,15 +9,15 @@ export default function FormContent({ gridUrl }) {
   const { state } = useFormContext();
   return (
     <>
-      <div className="grid grid-cols-3 gap-x-2 grid-flow-row ">
-        <div className="col-span-2 grid grid-cols-1 gap-2 auto-rows-max">
+      <div className="grid grid-cols-3 gap-x-8 grid-flow-row ">
+        <div className="col-span-2 grid grid-cols-1 gap-8 auto-rows-max">
           <Area id="leftSide" noOuter />
         </div>
-        <div className="col-span-1 grid grid-cols-1 gap-2 auto-rows-max">
+        <div className="col-span-1 grid grid-cols-1 gap-8 auto-rows-max">
           <Area id="rightSide" noOuter />
         </div>
       </div>
-      <div className="form-submit-button flex border-t border-divider mt-15 pt-15 justify-between">
+      <div className="form-submit-button flex border-t border-divider mt-6 pt-6 justify-between">
         <Button
           title="Cancel"
           variant="critical"

package/src/modules/catalog/pages/admin/productEdit+productNew/General.jsx

@@ -3,12 +3,12 @@ import React from 'react';
 import Area from '@components/common/Area';
 import { Field } from '@components/common/form/Field';
 import { Card } from '@components/admin/cms/Card';
-import CkeditorField from '@components/common/form/fields/Ckeditor';
 import CategoryTree from '@components/admin/catalog/productEdit/category/CategoryTree';
+import Editor from '@components/common/form/fields/Editor';
 
 function SKUPriceWeight({ sku, price, weight, setting }) {
   return (
-    <div className="grid grid-cols-3 gap-1 mt-15">
+    <div className="grid grid-cols-3 gap-4 mt-6">
       <div>
         <Field
           id="sku"
@@ -71,17 +71,17 @@ function Category({ product }) {
   );
 
   return (
-    <div className="mt-15 relative">
-      <div className="mb-1">Category</div>
+    <div className="mt-6 relative">
+      <div className="mb-4">Category</div>
       {category && (
-        <div className="border rounded border-[#c9cccf] mb-1 p-1">
+        <div className="border rounded border-[#c9cccf] mb-4 p-4">
           {category.path.map((item, index) => (
             <span key={item.name} className="text-gray-500">
               {item.name}
               {index < category.path.length - 1 && ' > '}
             </span>
           ))}
-          <span className="text-interactive pl-2">
+          <span className="text-interactive pl-8">
             <a
               href="#"
               onClick={(e) => {
@@ -97,7 +97,7 @@ function Category({ product }) {
                 e.preventDefault();
                 setCategory(null);
               }}
-              className="text-critical ml-2"
+              className="text-critical ml-8"
             >
               Unassign
             </a>
@@ -117,15 +117,13 @@ function Category({ product }) {
         </a>
       )}
       {selecting && (
-        <div className="absolute top-5 left-0 right-0 bg-[#eff2f5] z-50 border rounded border-[#c9cccf] p-[10px]">
-          <CategoryTree
-            selectedCategory={category}
-            setSelectedCategory={(cat) => {
-              setCategory(cat);
-              setSelecting(false);
-            }}
-          />
-        </div>
+        <CategoryTree
+          selectedCategory={category}
+          setSelectedCategory={(cat) => {
+            setCategory(cat);
+            setSelecting(false);
+          }}
+        />
       )}
       {category && (
         <input type="hidden" name="category_id" value={category?.categoryId} />
@@ -229,7 +227,7 @@ export default function General({
               id: 'tax_class'
             },
             {
-              component: { default: CkeditorField },
+              component: { default: Editor },
               props: {
                 id: 'description',
                 name: 'description',

package/src/modules/catalog/pages/admin/productGrid/Grid.jsx

@@ -124,7 +124,7 @@ function Actions({ products = [], selectedIds = [] }) {
       {selectedIds.length > 0 && (
         <td style={{ borderTop: 0 }} colSpan="100">
           <div className="inline-flex border border-divider rounded justify-items-start">
-            <a href="#" className="font-semibold pt-075 pb-075 pl-15 pr-15">
+            <a href="#" className="font-semibold pt-3 pb-3 pl-6 pr-6">
               {selectedIds.length} selected
             </a>
             {actions.map((action) => (
@@ -134,7 +134,7 @@ function Actions({ products = [], selectedIds = [] }) {
                   e.preventDefault();
                   action.onAction();
                 }}
-                className="font-semibold pt-075 pb-075 pl-15 pr-15 block border-l border-divider self-center"
+                className="font-semibold pt-3 pb-3 pl-6 pr-6 block border-l border-divider self-center"
               >
                 <span>{action.name}</span>
               </a>
@@ -174,7 +174,7 @@ export default function ProductGrid({
       <Card.Session
         title={
           <Form submitBtn={false}>
-            <div className="flex gap-2 justify-center items-center">
+            <div className="flex gap-8 justify-center items-center">
               <Area
                 id="productGridFilter"
                 noOuter

package/src/modules/catalog/pages/frontStore/catalogSearch/General.jsx

@@ -15,9 +15,9 @@ export default function SearchInfo() {
 
   return (
     <div className="page-width">
-      <div className="mb-1 md:mb-2">
+      <div className="mb-4 md:mb-8">
         <div className="text-left ">
-          <h1 className="search-name mt-25">
+          <h1 className="search-name mt-10">
             {_('Search results for "${keyword}"', { keyword: key })}
           </h1>
         </div>

package/src/modules/catalog/pages/frontStore/catalogSearch/Products.jsx

@@ -7,7 +7,7 @@ export default function Products({ products: { items } }) {
   return (
     <div>
       <ProductList products={items} countPerRow={4} />
-      <span className="product-count italic block mt-2">
+      <span className="product-count italic block mt-8">
         {_('${count} products', { count: items.length })}
       </span>
     </div>

package/src/modules/catalog/pages/frontStore/catalogSearch/route.json

@@ -1,4 +1,5 @@
 {
   "methods": ["GET"],
-  "path": "/search"
+  "path": "/search",
+  "name": "Catalog search page"
 }

package/src/modules/catalog/pages/frontStore/categoryView/CategoryView.jsx

@@ -1,16 +1,33 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import Area from '@components/common/Area';
 
-export default function CategoryView() {
+export default function CategoryView({ category }) {
+  if (!category.showProducts) {
+    return null;
+  }
   return (
-    <div className="page-width grid grid-cols-1 md:grid-cols-4 gap-2">
+    <div className="page-width grid grid-cols-1 md:grid-cols-4 gap-8">
       <Area id="leftColumn" className="md:col-span-1" />
       <Area id="rightColumn" className="md:col-span-3" />
     </div>
   );
 }
 
+CategoryView.propTypes = {
+  category: PropTypes.shape({
+    showProducts: PropTypes.number
+  }).isRequired
+};
+
 export const layout = {
   areaId: 'content',
   sortOrder: 10
 };
+
+export const query = `
+  query Query {
+    category(id: getContextValue('categoryId')) {
+      showProducts
+    }
+}`;

package/src/modules/catalog/pages/frontStore/categoryView/Filter.scss

@@ -132,6 +132,7 @@ input[type='range']:nth-child(1)::-webkit-slider-thumb {
     background-color: #fff;
     padding: 20px;
     box-sizing: border-box;
+    overflow: auto;
   }
 
   .filter-opener,

package/src/modules/catalog/pages/frontStore/categoryView/General.jsx

@@ -2,23 +2,21 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import './General.scss';
-import { CKEditor } from '@components/common/CKEditor';
+import Editor from '@components/common/Editor';
 
 export default function CategoryInfo({
   category: { name, description, image }
 }) {
   return (
     <div className="page-width">
-      <div className="mb-1 md:mb-2 category__general">
+      <div className="mb-4 md:mb-8 category__general">
         {image && (
           <img src={image.url} alt={name} className="category__image" />
         )}
-        <div className="category__info">
-          <div>
-            <h1 className="category__name">{name}</h1>
-            <div className="category__description">
-              <CKEditor content={description} />
-            </div>
+        <div className="category__info prose prose-base max-w-none">
+          <h1 className="category__name">{name}</h1>
+          <div className="category__description">
+            <Editor rows={description} />
           </div>
         </div>
       </div>

package/src/modules/catalog/pages/frontStore/categoryView/General.scss

@@ -20,8 +20,6 @@
     padding: 50px;
   }
   .category__info {
-    color: black;
-    display: flex;
     align-items: center;
   }
 }

package/src/modules/catalog/pages/frontStore/categoryView/Pagination.jsx

@@ -4,9 +4,13 @@ import { Pagination } from '@components/frontStore/catalog/product/list/Paginati
 
 export default function PaginationWrapper({
   products: {
+    showProducts,
     products: { total, currentFilters }
   }
 }) {
+  if (!showProducts) {
+    return null;
+  }
   const page = currentFilters.find((filter) => filter.key === 'page');
   const limit = currentFilters.find((filter) => filter.key === 'limit');
 
@@ -21,6 +25,7 @@ export default function PaginationWrapper({
 
 PaginationWrapper.propTypes = {
   products: PropTypes.shape({
+    showProducts: PropTypes.number.isRequired,
     products: PropTypes.shape({
       total: PropTypes.number.isRequired,
       currentFilters: PropTypes.arrayOf(
@@ -42,6 +47,7 @@ export const layout = {
 export const query = `
   query Query($filters: [FilterInput]) {
     products: category(id: getContextValue('categoryId')) {
+      showProducts
       products(filters: $filters) {
         total
         currentFilters {

package/src/modules/catalog/pages/frontStore/categoryView/Products.jsx

@@ -5,13 +5,17 @@ import { _ } from '@evershop/evershop/src/lib/locale/translate';
 
 export default function Products({
   products: {
+    showProducts,
     products: { items }
   }
 }) {
+  if (!showProducts) {
+    return null;
+  }
   return (
     <div>
       <ProductList products={items} countPerRow={3} />
-      <span className="product-count italic block mt-2">
+      <span className="product-count italic block mt-8">
         {_('${count} products', { count: items.length })}
       </span>
     </div>
@@ -20,6 +24,7 @@ export default function Products({
 
 Products.propTypes = {
   products: PropTypes.shape({
+    showProducts: PropTypes.number,
     products: PropTypes.shape({
       items: PropTypes.arrayOf(
         PropTypes.shape({
@@ -48,6 +53,7 @@ Products.propTypes = {
 
 Products.defaultProps = {
   products: {
+    showProducts: 1,
     products: {
       items: []
     }
@@ -62,6 +68,7 @@ export const layout = {
 export const query = `
   query Query($filters: [FilterInput]) {
     products: category(id: getContextValue('categoryId')) {
+      showProducts
       products(filters: $filters) {
         items {
           ...Product

package/src/modules/catalog/pages/frontStore/categoryView/route.json

@@ -1,4 +1,5 @@
 {
   "methods": ["GET"],
-  "path": "/category/:uuid"
+  "path": "/category/:uuid",
+  "name": "Category page"
 }

package/src/modules/catalog/pages/frontStore/productView/Description.jsx

@@ -1,13 +1,13 @@
 /* eslint-disable react/no-danger */
-import { CKEditor } from '@components/common/CKEditor';
+import Editor from '@components/common/Editor';
 import PropTypes from 'prop-types';
 import React from 'react';
 
 export default function Description({ product: { description } }) {
   return (
-    <div className="mt-2 md:mt-3">
+    <div className="mt-8 md:mt-12">
       <div className="product-description">
-        <CKEditor content={description} />
+        <Editor rows={description} />
       </div>
     </div>
   );
@@ -15,7 +15,18 @@ export default function Description({ product: { description } }) {
 
 Description.propTypes = {
   product: PropTypes.shape({
-    description: PropTypes.string
+    description: PropTypes.arrayOf(
+      PropTypes.shape({
+        size: PropTypes.number.isRequired,
+        columns: PropTypes.arrayOf(
+          PropTypes.shape({
+            size: PropTypes.number.isRequired,
+            // eslint-disable-next-line react/forbid-prop-types
+            data: PropTypes.object
+          })
+        ).isRequired
+      })
+    ).isRequired
   }).isRequired
 };
 

package/src/modules/catalog/pages/frontStore/productView/Form.jsx

@@ -86,7 +86,7 @@ ToastMessage.propTypes = {
 
 function AddToCart({ stockAvaibility, loading = false, error }) {
   return (
-    <div className="add-to-cart mt-2">
+    <div className="add-to-cart mt-8">
       <div style={{ width: '8rem' }}>
         <Field
           type="text"
@@ -98,8 +98,8 @@ function AddToCart({ stockAvaibility, loading = false, error }) {
           formId="productForm"
         />
       </div>
-      {error && <div className="text-critical mt-1">{error}</div>}
-      <div className="mt-1">
+      {error && <div className="text-critical mt-4">{error}</div>}
+      <div className="mt-4">
         {stockAvaibility === true && (
           <Button
             title={_('ADD TO CART')}
@@ -211,7 +211,7 @@ ProductForm.propTypes = {
 
 export const layout = {
   areaId: 'productPageMiddleRight',
-  sortOrder: 20
+  sortOrder: 45
 };
 
 export const query = `

package/src/modules/catalog/pages/frontStore/productView/Form.scss

@@ -21,6 +21,7 @@
   padding: 2rem;
   border: 1px solid var(--divider);
   box-shadow: 1px 1px 10px 2px #ebebeb80;
+  background-color: #fff;
   .top-head {
     grid-template-columns: 4fr 1fr;
     padding-bottom: 1rem;

package/src/modules/catalog/pages/frontStore/productView/GeneralInfo.jsx

@@ -10,7 +10,7 @@ export default function GeneralInfo({ product }) {
   return (
     <Area
       id="productViewGeneralInfo"
-      className="flex flex-col gap-1"
+      className="flex flex-col gap-4"
       coreComponents={[
         {
           component: { default: Name },

package/src/modules/catalog/pages/frontStore/productView/Images.jsx

@@ -51,7 +51,7 @@ export default function Images({ product: { uuid, image, gallery = [] } }) {
   return (
     <div className="product-single-media">
       <Current image={current} />
-      <ul className="more-view-thumbnail product-gallery mt-2 grid grid-cols-4 gap-1">
+      <ul className="more-view-thumbnail product-gallery mt-8 grid grid-cols-4 gap-4">
         {thumbs.map((i, j) => (
           <li key={j} className="flex justify-center items-center">
             <a

package/src/modules/catalog/pages/frontStore/productView/Layout.jsx

@@ -6,7 +6,7 @@ export default function ProductPageLayout() {
     <div className="product-detail">
       <Area id="productPageTop" className="product-page-top" />
       <div className="product-page-middle page-width">
-        <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
+        <div className="grid grid-cols-1 gap-12 md:grid-cols-2">
           <Area id="productPageMiddleLeft" />
           <Area id="productPageMiddleRight" />
         </div>

package/src/modules/catalog/pages/frontStore/productView/Options.jsx

@@ -10,8 +10,8 @@ export default function Options({ options = [] }) {
   }
 
   return (
-    <div className="product-single-options mt-4 mb-4">
-      <div className="product-single-options-title mb-2">
+    <div className="product-single-options mt-16 mb-16">
+      <div className="product-single-options-title mb-8">
         <strong>Options</strong>
       </div>
       {options.map((o, i) => {
@@ -77,7 +77,11 @@ Options.propTypes = {
       optionName: PropTypes.string,
       optionType: PropTypes.string
     })
-  ).isRequired
+  )
+};
+
+Options.defaultProps = {
+  options: []
 };
 
 export const layout = {

package/src/modules/catalog/pages/frontStore/productView/Variants.jsx

@@ -146,7 +146,7 @@ export default function Variants({
   };
 
   return (
-    <div className="variant variant-container grid grid-cols-1 gap-1 mt-2">
+    <div className="variant variant-container grid grid-cols-1 gap-4 mt-8">
       {attributes.map((a, i) => {
         const options = a.options.filter(
           (v, j, s) =>
@@ -157,17 +157,17 @@ export default function Variants({
             <input
               name={`variant_options[${i}][attribute_id]`}
               type="hidden"
-              value={a.attributeId}
+              value={a.attributeId || ''}
             />
             <input
               name={`variant_options[${i}][optionId]`}
               type="hidden"
-              value={a.selectedOption}
+              value={a.selectedOption || ''}
             />
-            <div className="mb-05 text-textSubdued uppercase">
+            <div className="mb-2 text-textSubdued uppercase">
               <span>{a.attribute_name}</span>
             </div>
-            <ul className="variant-option-list flex justify-start gap-05 flex-wrap">
+            <ul className="variant-option-list flex justify-start gap-2 flex-wrap">
               {options.map((o) => {
                 let className = '';
                 if (a.selected && a.selectedOption === o.optionId) {
@@ -240,7 +240,7 @@ Variants.propTypes = {
 
 export const layout = {
   areaId: 'productPageMiddleRight',
-  sortOrder: 40
+  sortOrder: 35
 };
 
 export const query = `

package/src/modules/catalog/pages/frontStore/productView/route.json

@@ -1,4 +1,5 @@
 {
   "methods": ["GET"],
-  "path": "/product/:uuid"
+  "path": "/product/:uuid",
+  "name": "Product single page"
 }

package/src/modules/catalog/services/AttributeCollection.js

@@ -17,16 +17,16 @@ class AttributeCollection {
     );
 
     attributeCollectionFilters.forEach((filter) => {
-      const check = filters.find((f) => f.key === filter.key);
-      if (check) {
-        if (filter.operation.includes(check.operation)) {
-          filter.callback(
-            this.baseQuery,
-            check.operation,
-            check.value,
-            currentFilters
-          );
-        }
+      const check = filters.find(
+        (f) => f.key === filter.key && filter.operation.includes(f.operation)
+      );
+      if (filter.key === '*' || check) {
+        filter.callback(
+          this.baseQuery,
+          check?.operation,
+          check?.value,
+          currentFilters
+        );
       }
     });
 

package/src/modules/catalog/services/AttributeGroupCollection.js

@@ -58,16 +58,16 @@ class AttributeGroupCollection {
     );
 
     attributeGroupCollectionFilters.forEach((filter) => {
-      const check = filters.find((f) => f.key === filter.key);
-      if (check) {
-        if (filter.operation.includes(check.operation)) {
-          filter.callback(
-            this.baseQuery,
-            check.operation,
-            check.value,
-            currentFilters
-          );
-        }
+      const check = filters.find(
+        (f) => f.key === filter.key && filter.operation.includes(f.operation)
+      );
+      if (filter.key === '*' || check) {
+        filter.callback(
+          this.baseQuery,
+          check?.operation,
+          check?.value,
+          currentFilters
+        );
       }
     });