@evershop/evershop 2.1.0 → 2.1.2

package/src/components/admin/FileBrowser.tsx

@@ -1,8 +1,9 @@
-import Button from '@components/common/Button.js';
+import { Button } from '@components/common/ui/Button.js';
 import React from 'react';
 import './FileBrowser.scss';
 import { useQuery } from 'urql';
 import Spinner from '@components/admin/Spinner.js';
+import { Input } from '@components/common/ui/Input.js';
 
 const GetApisQuery = `
   query Query ($filters: [FilterInput!]) {
@@ -233,8 +234,6 @@ const FileBrowser: React.FC<{
   };
 
   // Create a function to fetch files and folders to avoid code duplication
-  const [apiReady, setApiReady] = React.useState(false);
-
   const fetchFilesAndFolders = React.useCallback(() => {
     if (!browserApiRef.current) {
       return;
@@ -258,27 +257,28 @@ const FileBrowser: React.FC<{
       .finally(() => setLoading(false));
   }, [currentPath]);
 
-  // Track when the browserApiRef becomes available
-  React.useEffect(() => {
-    if (browserApiRef.current && browserApiRef.current !== '' && !apiReady) {
-      setApiReady(true);
-    }
-  }, [browserApiRef.current, apiReady]);
+  const [result] = useQuery({
+    query: GetApisQuery
+  });
+  const { data, fetching, error: err } = result;
+
+  if (data) {
+    browserApiRef.current = data.browserApi;
+    deleteApiRef.current = data.deleteApi;
+    uploadApiRef.current = data.uploadApi;
+    folderCreateApiRef.current = data.folderCreateApi;
+  }
 
-  // Fetch data when either the path changes or the API becomes ready
+  // Fetch files and folders when APIs are ready
   React.useEffect(() => {
-    if (apiReady) {
+    if (data) {
       fetchFilesAndFolders();
     }
-  }, [apiReady, currentPath, fetchFilesAndFolders]);
+  }, [currentPath, fetchFilesAndFolders, data]);
 
-  const [result] = useQuery({
-    query: GetApisQuery
-  });
-  const { data, fetching, error: err } = result;
   if (err) {
     return (
-      <p className="text-critical">
+      <p className="text-destructive">
         There was an error fetching file browser APIs.
         {err.message}
       </p>
@@ -290,62 +290,61 @@ const FileBrowser: React.FC<{
         <Spinner width={30} height={30} />
       </div>
     );
-  } else {
-    browserApiRef.current = data.browserApi;
-    deleteApiRef.current = data.deleteApi;
-    uploadApiRef.current = data.uploadApi;
-    folderCreateApiRef.current = data.folderCreateApi;
-    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} />
-          </div>
-        )}
-        <div className="content">
-          <div className="flex justify-end">
-            <a
-              href="#"
-              onClick={(e) => closeFileBrowser(e)}
-              className="text-interactive fill-current"
+  }
+
+  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} />
+        </div>
+      )}
+      <div className="content">
+        <div className="flex justify-end">
+          <a
+            href="#"
+            onClick={(e) => closeFileBrowser(e)}
+            className="text-interactive fill-current"
+          >
+            <svg
+              style={{ width: '2rem' }}
+              xmlns="http://www.w3.org/2000/svg"
+              className="h-4 w-4"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
             >
-              <svg
-                style={{ width: '2rem' }}
-                xmlns="http://www.w3.org/2000/svg"
-                className="h-4 w-4"
-                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-5">
-              <div className="col-span-1">
-                <div className="current-path mb-10">
-                  <div className="flex">
-                    <div className="pr-2">You are here:</div>
-                    <div>
-                      <a
-                        href="#"
-                        onClick={(e) => onSelectFolderFromBreadcrumb(e, 0)}
-                        className="text-interactive hover:underline"
-                      >
-                        Root
-                      </a>
-                    </div>
-                    {currentPath.map((f, index) => (
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M6 18L18 6M6 6l12 12"
+              />
+            </svg>
+          </a>
+        </div>
+        <div>
+          <div className="grid grid-cols-4 gap-5">
+            <div className="col-span-1">
+              <div className="current-path mb-10">
+                <div className="flex">
+                  <div className="pr-2">You are here:</div>
+                  <div>
+                    <a
+                      href="#"
+                      onClick={(e) => onSelectFolderFromBreadcrumb(e, 0)}
+                      className="text-primary hover:underline"
+                    >
+                      Root
+                    </a>
+                  </div>
+                  {currentPath
+                    .filter((f) => f.name !== '')
+                    .map((f, index) => (
                       <div key={index}>
                         <span>/</span>
                         <a
-                          className="text-interactive hover:underline"
+                          className="text-primary hover:underline"
                           href="#"
                           onClick={(e) =>
                             onSelectFolderFromBreadcrumb(e, f.index)
@@ -355,118 +354,116 @@ const FileBrowser: React.FC<{
                         </a>
                       </div>
                     ))}
-                  </div>
                 </div>
-                <ul className="mt-4 mb-4">
-                  {folders.map((f, i) => (
-                    <li
-                      key={i}
-                      className="text-interactive fill-current flex list-group-item"
+              </div>
+              <ul className="mt-4 mb-4">
+                {folders.map((f, i) => (
+                  <li
+                    key={i}
+                    className="text-primary fill-current flex list-group-item"
+                  >
+                    <svg
+                      style={{ width: '2rem', height: '2rem' }}
+                      xmlns="http://www.w3.org/2000/svg"
+                      className="h-4 w-4"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
                     >
-                      <svg
-                        style={{ width: '2rem', height: '2rem' }}
-                        xmlns="http://www.w3.org/2000/svg"
-                        className="h-4 w-4"
-                        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">
-                  <div className="form-field mb-0">
-                    <input
-                      type="text"
-                      placeholder="New folder"
-                      ref={newFolderRefInput}
-                    />
-                  </div>
-                  <div className="mt-2">
+                      <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) =>
-                        createFolder(e, newFolderRefInput.current?.value)
-                      }
-                      className="text-interactive hover:underline"
+                      onClick={(e) => onSelectFolder(e, f)}
                     >
-                      Create
+                      {f}
                     </a>
-                  </div>
-                </div>
+                  </li>
+                ))}
+                {folders.length === 0 && (
+                  <li className="list-group-item">
+                    <span>There is no sub folder.</span>
+                  </li>
+                )}
+              </ul>
+              <div className="justify-start items-center gap-2 flex">
+                <Input
+                  type="text"
+                  placeholder="New folder"
+                  ref={newFolderRefInput}
+                />
+                <Button
+                  onClick={(e) =>
+                    createFolder(e, newFolderRefInput.current?.value)
+                  }
+                  variant={'outline'}
+                >
+                  Create
+                </Button>
               </div>
-              <div className="col-span-3">
-                <div className="error text-critical mb-5">{error}</div>
-                <div className="tool-bar grid grid-cols-3 gap-2 mb-5">
-                  <Button
-                    variant="danger"
-                    outline
-                    title="Delete image"
-                    onAction={() => deleteFile()}
-                  />
-                  <Button
-                    variant="primary"
-                    title="Insert image"
-                    onAction={() => insertFile()}
-                  />
-                  <Button
-                    title="Upload image"
-                    variant="secondary"
-                    onAction={() => {
-                      (
-                        document.getElementById(
-                          'upload-image'
-                        ) as HTMLInputElement
-                      ).click();
-                    }}
-                  />
-                  <label
-                    className="self-center"
-                    id="upload-image-label"
-                    htmlFor="upload-image"
-                  >
-                    <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-2">
-                  {files.map((f) => (
-                    <File file={f} select={onSelectFile} key={f.name} />
-                  ))}
-                </div>
+            </div>
+            <div className="col-span-3">
+              <div className="error text-destructive mb-5">{error}</div>
+              <div className="tool-bar grid grid-cols-3 gap-2 mb-5">
+                <Button
+                  variant="destructive"
+                  title="Delete image"
+                  onClick={() => deleteFile()}
+                >
+                  Delete
+                </Button>
+                <Button
+                  variant="default"
+                  title="Insert image"
+                  onClick={() => insertFile()}
+                >
+                  Insert
+                </Button>
+                <Button
+                  variant="outline"
+                  onClick={() => {
+                    (
+                      document.getElementById(
+                        'upload-image'
+                      ) as HTMLInputElement
+                    ).click();
+                  }}
+                >
+                  Upload
+                </Button>
+                <label
+                  className="self-center"
+                  id="upload-image-label"
+                  htmlFor="upload-image"
+                >
+                  <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-2">
+                {files.map((f) => (
+                  <File file={f} select={onSelectFile} key={f.name} />
+                ))}
               </div>
             </div>
           </div>
         </div>
       </div>
-    );
-  }
+    </div>
+  );
 };
 
 export { FileBrowser };

package/src/components/admin/FormButtons.tsx

@@ -1,4 +1,4 @@
-import Button from '@components/common/Button.js';
+import { Button } from '@components/common/ui/Button.js';
 import React from 'react';
 import { useFormContext } from 'react-hook-form';
 
@@ -11,24 +11,25 @@ const FormButtons: React.FC<{
   } = useFormContext();
 
   return (
-    <div className="form-submit-button flex border-t border-divider mt-4 pt-4 justify-between">
+    <div className="form-submit-button flex border-t border-border mt-4 pt-4 justify-between">
       <Button
-        title="Cancel"
-        variant="danger"
-        outline
-        onAction={() => {
+        variant="destructive"
+        onClick={() => {
           window.location.href = cancelUrl;
         }}
-      />
+      >
+        Cancel
+      </Button>
       <Button
-        title="Save"
-        onAction={() => {
+        onClick={() => {
           (document.getElementById(formId) as HTMLFormElement).dispatchEvent(
             new Event('submit', { cancelable: true, bubbles: true })
           );
         }}
         isLoading={isSubmitting}
-      />
+      >
+        Save
+      </Button>
     </div>
   );
 };

package/src/components/admin/ImageUploader.scss

@@ -95,8 +95,9 @@
 /* When there's no image yet in single mode */
 .image-uploader-manager .single-image-container.no-image .uploader {
   opacity: 1;
+  border-radius: var(--radius);
   background: #f5f5f5;
-  border: 2px dashed #e1e1e1;
+  border: 2px dashed var(--border);
 }
 
 .image-uploader-manager
@@ -104,7 +105,7 @@
   .uploader
   .uploader-icon
   label {
-  color: #058c8c;
+  color: var(--primary);
 }
 
 .image-uploader-manager .image-list .image {
@@ -114,7 +115,6 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  border: 1px solid #e1e1e1;
   background: #fff;
   max-width: 150px;
 }
@@ -125,7 +125,8 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  border: 2px dashed #e1e1e1;
+  border: 2px dashed var(--border);
+  border-radius: var(--radius);
   background: #fff;
   max-width: 150px;
 }
@@ -183,6 +184,5 @@
 }
 .uploader .uploader-icon label {
   cursor: pointer;
-  font-size: 20px;
-  color: #058c8c;
+  font-size: 18px;
 }

package/src/components/admin/ImageUploader.tsx

@@ -85,8 +85,11 @@ const Upload: React.FC<{
   const id = uniqid();
   return (
     <div className="uploader grid-item">
-      <div className="uploader-icon">
-        <label htmlFor={id}>
+      <div className="uploader-icon text-primary w-full h-full">
+        <label
+          htmlFor={id}
+          className="w-full h-full flex items-center justify-center cursor-pointer"
+        >
           {uploading ? (
             <Spinner
               width={isSingleMode ? 40 : 25}
@@ -94,10 +97,6 @@ const Upload: React.FC<{
             />
           ) : (
             <svg
-              style={{
-                width: isSingleMode ? '30px' : '30px',
-                height: isSingleMode ? '30px' : '30px'
-              }}
               xmlns="http://www.w3.org/2000/svg"
               className="h-5 w-5"
               viewBox="0 0 20 20"
@@ -140,8 +139,10 @@ const Image: React.FC<{
 
   // Assign classes based on mode
   const classes = isSingleMode
-    ? 'image'
-    : `image grid-item ${isFirst ? 'first-item' : ''}`;
+    ? 'image border border-border rounded-lg'
+    : `image border border-border rounded-lg grid-item ${
+        isFirst ? 'first-item' : ''
+      }`;
 
   return (
     <div className={classes} id={image.uuid}>
@@ -152,7 +153,7 @@ const Image: React.FC<{
         <span
           role="button"
           tabIndex={0}
-          className={`remove cursor-pointer text-critical fill-current ${
+          className={`remove cursor-pointer text-destructive fill-current ${
             isSingleMode ? 'single-mode-remove' : ''
           }`}
           onClick={async () => {
@@ -411,7 +412,9 @@ export function ImageUploader({
   const { data, fetching, error } = result;
 
   if (error) {
-    return <p className="text-critical">There was an error:{error.message}</p>;
+    return (
+      <p className="text-destructive">There was an error:{error.message}</p>
+    );
   } else if (fetching) {
     return <ImageUploaderSkeleton itemCount={isMultiple ? 5 : 1} />;
   } else {

package/src/components/admin/NavigationItem.tsx

@@ -9,21 +9,39 @@ export interface NavigationItemProps {
 
 export function NavigationItem({ Icon, url, title }: NavigationItemProps) {
   const [isActive, setIsActive] = React.useState(false);
+
   React.useEffect(() => {
-    const currentUrl = window.location.href;
-    const baseUrl = window.location.origin;
-    const check = currentUrl.split(baseUrl + url);
-    if (check.length === 2 && url.indexOf('products/new') === -1) {
-      // TODO: Fix me
-      if (url.split('/').length === 2) {
-        if (check[1] === '' || !/^\/[a-zA-Z1-9]/.test(check[1])) {
+    const checkActive = () => {
+      const currentUrl = window.location.href;
+      const currentUrlObj = new URL(currentUrl);
+      const menuUrlObj = new URL(url);
+
+      const currentPath = currentUrlObj.pathname;
+      const menuPath = menuUrlObj.pathname;
+
+      if (currentPath === menuPath) {
+        setIsActive(true);
+        return;
+      }
+
+      const menuSegments = menuPath.split('/').filter(Boolean);
+
+      if (menuSegments.length >= 2 && currentPath.startsWith(menuPath + '/')) {
+        const remainingPath = currentPath.substring(menuPath.length + 1);
+        const nextSegment = remainingPath.split('/')[0];
+
+        const actionWords = ['new', 'create', 'add'];
+        if (!actionWords.includes(nextSegment.toLowerCase())) {
           setIsActive(true);
+          return;
         }
-      } else {
-        setIsActive(true);
       }
-    }
-  }, []);
+
+      setIsActive(false);
+    };
+
+    checkActive();
+  }, [url]);
 
   return (
     <li className={isActive ? 'active nav-item' : 'nav-item'}>

package/src/components/admin/NavigationItemGroup.scss

@@ -26,7 +26,8 @@
     bottom: 0px;
     left: 0px;
     width: 200px;
-    background-color: rgba(246, 246, 247, 0.9882352941);
+    background-color: #fff;
     padding-bottom: 1.25rem;
+    padding-top: 1rem;
   }
 }

package/src/components/admin/ProductListSkeleton.tsx

@@ -1,25 +1,21 @@
+import { Skeleton } from '@components/common/ui/Skeleton.js';
 import React from 'react';
-import './ProductListSkeleton.scss';
 
 export const ProductListSkeleton: React.FC = () => {
   const skeletonItems = Array(5).fill(0);
 
   return (
-    <div className="product-list-skeleton">
+    <div className="attribute-group-list-skeleton space-y-2 divide-y">
       {skeletonItems.map((_, index) => (
         <div
           key={index}
-          className="product-skeleton-item border-b flex justify-between items-center"
+          className="attribute-group-skeleton-item border-border pb-2 flex justify-between items-center "
         >
           <div className="flex items-center">
-            <div className="skeleton-image w-10 h-10 bg-gray-200 rounded skeleton-pulse mr-5"></div>
-            <div>
-              <div className="skeleton-title h-5 w-30 bg-gray-200 rounded skeleton-pulse mb-2"></div>
-              <div className="skeleton-id h-4 w-20 bg-gray-200 rounded skeleton-pulse"></div>
-            </div>
+            <Skeleton className="h-5 w-30 rounded"></Skeleton>
           </div>
           <div className="select-button">
-            <div className="skeleton-button h-6 w-12 bg-gray-200 rounded skeleton-pulse"></div>
+            <Skeleton className="h-6 w-12 rounded"></Skeleton>
           </div>
         </div>
       ))}