@evershop/evershop 1.1.0 → 1.2.0

package/src/components/common/form/fields/editor/FileBrowser.jsx

@@ -0,0 +1,419 @@
+/* eslint-disable react/jsx-props-no-spreading */
+/* eslint-disable react/no-array-index-key */
+/* eslint-disable no-param-reassign */
+import PropTypes from 'prop-types';
+import React from 'react';
+import Button from '@components/common/form/Button';
+import { Input } from '@components/common/form/fields/Input';
+import './FileBrowser.scss';
+import Spinner from '@components/common/Spinner';
+
+function File({ file, select }) {
+  const className = file.isSelected === true ? 'selected' : '';
+  return (
+    <div className={`col image-item ${className}`}>
+      <div className="inner">
+        <a
+          href="#"
+          onClick={(e) => {
+            e.preventDefault();
+            select(file);
+          }}
+        >
+          <img src={file.url} alt="" />
+        </a>
+        {file.isSelected === true && (
+          <div className="select fill-current text-primary">
+            <svg
+              style={{ width: '2rem' }}
+              xmlns="http://www.w3.org/2000/svg"
+              className="h-6 w-6"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+              />
+            </svg>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+File.propTypes = {
+  file: PropTypes.shape({
+    isSelected: PropTypes.bool,
+    url: PropTypes.string
+  }).isRequired,
+  select: PropTypes.func.isRequired
+};
+
+function FileBrowser({
+  onInsert,
+  isMultiple,
+  setFileBrowser,
+  browserApi,
+  deleteApi,
+  uploadApi,
+  folderCreateApi
+}) {
+  const [error, setError] = React.useState(null);
+  const [loading, setLoading] = React.useState(false);
+  const [folders, setFolders] = React.useState([]);
+  const [files, setFiles] = React.useState([]);
+  const [currentPath, setCurrentPath] = React.useState([]);
+  const newFolderRefInput = React.useRef(null);
+
+  const onSelectFolder = (e, f) => {
+    e.preventDefault();
+    setCurrentPath(
+      currentPath.concat({ name: f, index: currentPath.length + 1 })
+    );
+  };
+
+  const onSelectFolderFromBreadcrumb = (e, index) => {
+    e.preventDefault();
+    const newPath = [];
+    currentPath.forEach((f) => {
+      if (f.index <= index) newPath.push(f);
+    });
+    setCurrentPath(newPath);
+  };
+
+  const onSelectFile = (f) => {
+    if (isMultiple === false) {
+      setFiles(
+        files.map((file) => {
+          if (f.name === file.name) {
+            file.isSelected = !file.isSelected;
+          } else {
+            file.isSelected = false;
+          }
+          return file;
+        })
+      );
+    } else {
+      setFiles(
+        files.map((file) => {
+          if (f.name === file.name) {
+            file.isSelected = true;
+          } else {
+            file.isSelected = false;
+          }
+          return file;
+        })
+      );
+    }
+  };
+
+  const close = (e) => {
+    e.preventDefault();
+    setFileBrowser(false);
+  };
+
+  const createFolder = (e, folder) => {
+    e.preventDefault();
+    if (!folder || !folder.trim()) {
+      setError('Invalid folder name');
+      return;
+    }
+    const path = currentPath.map((f) => f.name);
+    path.push(folder.trim());
+    setLoading(true);
+    fetch(folderCreateApi, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ path: path.join('/') }),
+      credentials: 'same-origin'
+    })
+      .then((res) => res.json())
+      .then((response) => {
+        if (!response.error) {
+          // Get the first level folder, incase of recursive folder creation
+          const recursiveFolders = folder.split('/');
+          setFolders([...new Set(folders.concat(recursiveFolders[0]))]);
+        } else {
+          setError(response.error.message);
+        }
+      })
+      .catch((err) => setError(err.message))
+      .finally(() => setLoading(false));
+  };
+
+  const deleteFile = () => {
+    let file = null;
+    files.forEach((f) => {
+      if (f.isSelected === true) {
+        file = f;
+      }
+    });
+
+    if (file === null) setError('No file selected');
+    else {
+      const path = currentPath.map((f) => f.name);
+      path.push(file.name);
+      setLoading(true);
+      fetch(deleteApi + path.join('/'), {
+        method: 'DELETE'
+      })
+        .then((res) => res.json())
+        .then((response) => {
+          if (!response.error) {
+            setCurrentPath(currentPath.map((f) => f));
+          } else {
+            setError(response.error.message);
+          }
+        })
+        .catch((err) => setError(err.message))
+        .finally(() => setLoading(false));
+    }
+  };
+
+  const insertFile = () => {
+    let file = null;
+    files.forEach((f) => {
+      if (f.isSelected === true) file = f;
+    });
+
+    if (file === null) {
+      setError('No file selected');
+    } else {
+      onInsert(file.url);
+      setFileBrowser(false);
+    }
+  };
+
+  const onUpload = (e) => {
+    e.persist();
+    const formData = new FormData();
+    for (let i = 0; i < e.target.files.length; i += 1)
+      formData.append('images', e.target.files[i]);
+
+    const path = [];
+    currentPath.forEach((f) => {
+      path.push(f.name);
+    });
+
+    setLoading(true);
+    fetch(uploadApi + path.join('/'), {
+      method: 'POST',
+      body: formData
+    })
+      .then((res) => res.json())
+      .then((response) => {
+        if (!response.error) {
+          setCurrentPath(currentPath.map((f) => f));
+        } else {
+          setError(response.error.message);
+        }
+      })
+      .catch((err) => setError(err.message))
+      .finally(() => setLoading(false));
+  };
+
+  React.useEffect(() => {
+    const path = currentPath.map((f) => f.name);
+    setLoading(true);
+    fetch(browserApi + path.join('/'), {
+      method: 'GET'
+    })
+      .then((res) => res.json())
+      .then((response) => {
+        if (!response.error) {
+          setFolders(response.data.folders);
+          setFiles(response.data.files);
+        } else {
+          setError(response.error.message);
+        }
+      })
+      .catch((e) => setError(e.message))
+      .finally(() => setLoading(false));
+  }, [currentPath]);
+
+  return (
+    <div className="file-browser">
+      {loading === true && (
+        <div className="fixed top-0 left-0 bottom-0 right-0 flex justify-center">
+          <Spinner width={30} height={30} className="absolute-center" />
+        </div>
+      )}
+      <div className="content">
+        <div className="flex justify-end">
+          <a
+            href="#"
+            onClick={(e) => close(e)}
+            className="text-interactive fill-current"
+          >
+            <svg
+              style={{ width: '2rem' }}
+              xmlns="http://www.w3.org/2000/svg"
+              className="h-6 w-6"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M6 18L18 6M6 6l12 12"
+              />
+            </svg>
+          </a>
+        </div>
+        <div>
+          <div className="grid grid-cols-4 gap-8">
+            <div className="col-span-1">
+              <div className="current-path mb-16">
+                <div className="flex">
+                  <div className="pr-4">You are here:</div>
+                  <div>
+                    <a
+                      href="#"
+                      onClick={(e) => onSelectFolderFromBreadcrumb(e, 0)}
+                      className="text-interactive hover:underline"
+                    >
+                      Root
+                    </a>
+                  </div>
+                  {currentPath.map((f, index) => (
+                    <div key={index}>
+                      <span>/</span>
+                      <a
+                        className="text-interactive hover:underline"
+                        href="#"
+                        onClick={(e) =>
+                          onSelectFolderFromBreadcrumb(e, f.index)
+                        }
+                      >
+                        {f.name}
+                      </a>
+                    </div>
+                  ))}
+                </div>
+              </div>
+              <ul className="mt-6 mb-6">
+                {folders.map((f, i) => (
+                  <li
+                    key={i}
+                    className="text-interactive fill-current flex list-group-item"
+                  >
+                    <svg
+                      style={{ width: '2rem', height: '2rem' }}
+                      xmlns="http://www.w3.org/2000/svg"
+                      className="h-6 w-6"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
+                      />
+                    </svg>
+                    <a
+                      className="pl-2 hover:underline"
+                      href="#"
+                      onClick={(e) => onSelectFolder(e, f)}
+                    >
+                      {f}
+                    </a>
+                  </li>
+                ))}
+                {folders.length === 0 && (
+                  <li className="list-group-item">
+                    <span>There is no sub folder.</span>
+                  </li>
+                )}
+              </ul>
+              <div className=" justify-between">
+                <Input
+                  type="text"
+                  placeholder="New folder"
+                  ref={newFolderRefInput}
+                />
+                <div className="mt-4">
+                  <a
+                    href="#"
+                    onClick={(e) =>
+                      createFolder(e, newFolderRefInput.current.value)
+                    }
+                    className="text-interactive hover:underline"
+                  >
+                    Create
+                  </a>
+                </div>
+              </div>
+            </div>
+            <div className="col-span-3">
+              <div className="error text-critical mb-8">{error}</div>
+              <div className="tool-bar grid grid-cols-3 gap-4 mb-8">
+                <Button
+                  variant="critical"
+                  outline
+                  title="Delete image"
+                  onAction={() => deleteFile()}
+                />
+                <Button
+                  variant="primary"
+                  title="Insert image"
+                  onAction={() => insertFile()}
+                />
+                <Button
+                  title="Upload image"
+                  variant="info"
+                  onAction={() => {
+                    document.getElementById('upload-image').click();
+                  }}
+                />
+                <label htmlFor="upload-image" className="self-center">
+                  <a className="invisible">
+                    <input
+                      id="upload-image"
+                      type="file"
+                      multiple
+                      onChange={onUpload}
+                    />
+                  </a>
+                </label>
+              </div>
+              {files.length === 0 && <div>There is no file to display.</div>}
+              <div className="grid grid-cols-9 gap-4">
+                {files.map((f) => (
+                  <File file={f} select={onSelectFile} />
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+FileBrowser.propTypes = {
+  browserApi: PropTypes.string.isRequired,
+  deleteApi: PropTypes.string.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
+  folderCreateApi: PropTypes.string.isRequired,
+  setFileBrowser: PropTypes.string.isRequired,
+  uploadApi: PropTypes.string.isRequired,
+  onInsert: PropTypes.func.isRequired,
+  isMultiple: PropTypes.bool
+};
+
+FileBrowser.defaultProps = {
+  isMultiple: false
+};
+
+export default FileBrowser;

package/src/components/common/form/fields/editor/FileBrowser.scss

@@ -0,0 +1,37 @@
+/* FILE BROWSER */
+.file-browser {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: #fff;
+  z-index: 1000;
+  padding: 20px;
+}
+.file-browser .loading {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-top: -40px;
+  margin-left: -40px;
+}
+.file-browser img {
+  max-width: 100%;
+}
+.file-browser .image-item .inner {
+  padding: 3px;
+  box-sizing: border-box;
+  border: 1px solid #e1e1e1;
+  position: relative;
+}
+.file-browser .image-item .inner .select {
+  position: absolute;
+  bottom: 5px;
+  right: 5px;
+  font-size: 20px;
+}
+.image-tool__image-picture {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}

package/src/components/common/form/fields/editor/GetColumnClasses.jsx

@@ -0,0 +1,14 @@
+const getColumnClasses = (size) => {
+  switch (size) {
+    case 1:
+      return 'col-span-1';
+    case 2:
+      return 'col-span-2';
+    case 3:
+      return 'col-span-3';
+    default:
+      return 'col-span-1';
+  }
+};
+
+export default getColumnClasses;

package/src/components/common/form/fields/editor/GetRowClasses.jsx

@@ -0,0 +1,18 @@
+const getRowClasses = (size) => {
+  switch (size) {
+    case 1:
+      return 'grid-cols-1';
+    case 2:
+      return 'grid-cols-2';
+    case 3:
+      return 'grid-cols-3';
+    case 4:
+      return 'grid-cols-4';
+    case 5:
+      return 'grid-cols-5';
+    default:
+      return 'grid-cols-1';
+  }
+};
+
+export default getRowClasses;

package/src/components/common/form/fields/editor/RowTemplates.jsx

@@ -0,0 +1,154 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { v4 as uuidv4 } from 'uuid';
+import getRowClasses from './GetRowClasses';
+import getColumnClasses from './GetColumnClasses';
+
+function RowTemplates({ addRow }) {
+  const templates = {
+    1: () => (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="48"
+        height="48"
+        viewBox="0 0 48 48"
+        aria-hidden="true"
+        focusable="false"
+        fill="#949494"
+      >
+        <path d="M0 10a2 2 0 0 1 2-2h44a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V10Z" />
+      </svg>
+    ),
+    '1:1': () => (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="48"
+        height="48"
+        viewBox="0 0 48 48"
+        aria-hidden="true"
+        focusable="false"
+        fill="#949494"
+      >
+        <path d="M0 10a2 2 0 0 1 2-2h19a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V10Zm25 0a2 2 0 0 1 2-2h19a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H27a2 2 0 0 1-2-2V10Z" />
+      </svg>
+    ),
+    '1:2': () => (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="48"
+        height="48"
+        viewBox="0 0 48 48"
+        aria-hidden="true"
+        focusable="false"
+        fill="#949494"
+      >
+        <path d="M0 10a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V10Zm17 0a2 2 0 0 1 2-2h27a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H19a2 2 0 0 1-2-2V10Z" />
+      </svg>
+    ),
+    '2:1': () => (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="48"
+        height="48"
+        viewBox="0 0 48 48"
+        aria-hidden="true"
+        focusable="false"
+        fill="#949494"
+      >
+        <path d="M0 10a2 2 0 0 1 2-2h27a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V10Zm33 0a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H35a2 2 0 0 1-2-2V10Z" />
+      </svg>
+    ),
+    '2:3': () => (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="48"
+        height="48"
+        viewBox="0 0 48 48"
+        aria-hidden="true"
+        focusable="false"
+        fill="#949494"
+      >
+        <rect x="0" y="8" width="18.4" height="32" rx="2" ry="2" />
+        <rect x="21.6" y="8" width="24" height="32" rx="2" ry="2" />
+      </svg>
+    ),
+    '3:2': () => (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="48"
+        height="48"
+        viewBox="0 0 48 48"
+        aria-hidden="true"
+        focusable="false"
+        fill="#949494"
+      >
+        <rect x="0" y="8" width="24" height="32" rx="2" ry="2" />
+        <rect x="27.2" y="8" width="18.4" height="32" rx="2" ry="2" />
+      </svg>
+    ),
+    '1:1:1': () => (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="48"
+        height="48"
+        viewBox="0 0 48 48"
+        aria-hidden="true"
+        focusable="false"
+        fill="#949494"
+      >
+        <path d="M0 10a2 2 0 0 1 2-2h10.531c1.105 0 1.969.895 1.969 2v28c0 1.105-.864 2-1.969 2H2a2 2 0 0 1-2-2V10Zm16.5 0c0-1.105.864-2 1.969-2H29.53c1.105 0 1.969.895 1.969 2v28c0 1.105-.864 2-1.969 2H18.47c-1.105 0-1.969-.895-1.969-2V10Zm17 0c0-1.105.864-2 1.969-2H46a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H35.469c-1.105 0-1.969-.895-1.969-2V10Z" />
+      </svg>
+    ),
+    '1:2:1': () => (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="48"
+        height="48"
+        viewBox="0 0 48 48"
+        aria-hidden="true"
+        focusable="false"
+        fill="#949494"
+      >
+        <path d="M0 10a2 2 0 0 1 2-2h7.531c1.105 0 1.969.895 1.969 2v28c0 1.105-.864 2-1.969 2H2a2 2 0 0 1-2-2V10Zm13.5 0c0-1.105.864-2 1.969-2H32.53c1.105 0 1.969.895 1.969 2v28c0 1.105-.864 2-1.969 2H15.47c-1.105 0-1.969-.895-1.969-2V10Zm23 0c0-1.105.864-2 1.969-2H46a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2h-7.531c-1.105 0-1.969-.895-1.969-2V10Z" />
+      </svg>
+    )
+  };
+  return (
+    <div className="row-templates flex justify-center gap-7 border border-divider px-3">
+      {Object.keys(templates).map((key) => (
+        <a
+          href="#"
+          onClick={(e) => {
+            e.preventDefault();
+            const split = key.split(':').map((val) => parseInt(val, 10));
+            const sum = split.reduce((acc, val) => acc + val, 0);
+            const rowClassName = getRowClasses(sum);
+            const columns = split.map((size) => {
+              const columnClassName = getColumnClasses(size);
+              return {
+                size: parseInt(size, 10),
+                className: columnClassName,
+                id: `c__${uuidv4()}`
+              };
+            });
+            addRow({
+              id: `r__${uuidv4()}`,
+              editSetting: true,
+              columns,
+              size: sum,
+              className: rowClassName
+            });
+          }}
+        >
+          {templates[key]()}
+        </a>
+      ))}
+    </div>
+  );
+}
+
+RowTemplates.propTypes = {
+  addRow: PropTypes.func.isRequired
+};
+
+export default RowTemplates;

package/src/components/common/grid/Pagination.jsx

@@ -68,9 +68,9 @@ export default function Pagination({ total, limit, page }) {
   };
 
   return (
-    <div className="pagination flex px-2">
-      <div className="flex justify-between w-full space-x-1 mt-1 mb-1">
-        <div className="flex space-x-1">
+    <div className="pagination flex px-8">
+      <div className="flex justify-between w-full space-x-4 mt-4 mb-4">
+        <div className="flex space-x-4">
           <div className="self-center">
             <span>Show</span>
           </div>
@@ -83,7 +83,7 @@ export default function Pagination({ total, limit, page }) {
             <span>per page</span>
           </div>
         </div>
-        <div className="flex space-x-1">
+        <div className="flex space-x-4">
           {page > 1 && (
             <>
               <div className="first self-center">

package/src/components/common/grid/headers/FromTo.jsx

@@ -32,7 +32,7 @@ export default function FromToColumnHeader({ title, id, currentFilters = [] }) {
         <div className="title" style={{ marginBottom: '1rem' }}>
           <span>{title}</span>
         </div>
-        <div className="flex space-x-1">
+        <div className="flex space-x-4">
           <div style={{ width: '6rem' }}>
             <Input
               type="text"

package/src/components/common/grid/headers/Sortable.jsx

@@ -111,7 +111,7 @@ export default function SortableHeader({ title, name, currentFilters }) {
 
   return (
     <th className="column">
-      <div className="table-header flex justify-start gap-1 content-center">
+      <div className="table-header flex justify-start gap-4 content-center">
         <div className="font-medium uppercase text-xl">
           <span>{title}</span>
         </div>

package/src/components/common/grid/rows/ThumbnailRow.jsx

@@ -5,7 +5,7 @@ export default function ThumbnailRow({ id, areaProps }) {
   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' }}
       >
         {areaProps.row[id] && (