@evershop/evershop 2.1.0 → 2.1.1

package/src/components/admin/AttributeGroupSelector.tsx

@@ -1,9 +1,10 @@
-import { Card } from '@components/admin/Card.js';
 import { SimplePagination } from '@components/common/SimplePagination.js';
-import { CheckIcon } from '@heroicons/react/24/outline';
+import { Button } from '@components/common/ui/Button.js';
+import { Input } from '@components/common/ui/Input.js';
+import { Skeleton } from '@components/common/ui/Skeleton.js';
+import { Check } from 'lucide-react';
 import React from 'react';
 import { useQuery } from 'urql';
-import './AttributeGroupSelector.scss';
 import { AtLeastOne } from '../../types/atLeastOne.js';
 
 const SearchQuery = `
@@ -28,20 +29,17 @@ const AttributeGroupListSkeleton: React.FC = () => {
   const skeletonItems = Array(5).fill(0);
 
   return (
-    <div className="attribute-group-list-skeleton">
+    <div className="attribute-group-list-skeleton space-y-2 divide-y">
       {skeletonItems.map((_, index) => (
         <div
           key={index}
-          className="attribute-group-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>
-              <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>
       ))}
@@ -124,7 +122,7 @@ const AttributeGroupSelector: React.FC<{
 
   if (error) {
     return (
-      <p className="text-critical">
+      <p className="text-destructive">
         There was an error fetching attribute groups.
         {error.message}
       </p>
@@ -132,108 +130,101 @@ const AttributeGroupSelector: React.FC<{
   }
 
   return (
-    <Card title="Select Attribute Groups">
-      <Card.Session>
-        <div>
-          <div className="border rounded border-divider mb-5">
-            <input
-              type="text"
-              value={inputValue || ''}
-              placeholder="Search attribute groups"
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                setInputValue(e.target.value);
-                setLoading(true);
-              }}
-            />
-          </div>
-          {(fetching || loading) && <AttributeGroupListSkeleton />}
-          {!fetching && data && (
-            <div className="divide-y">
-              {data.attributeGroups.items.length === 0 && (
-                <div className="p-2 border border-divider rounded flex justify-center items-center">
-                  {inputValue ? (
-                    <p>
-                      No attribute groups found for query &quot;{inputValue}
-                      &rdquo;
-                    </p>
-                  ) : (
-                    <p>You have no attribute groups to display</p>
-                  )}
-                </div>
-              )}
-              {data.attributeGroups.items.map((a) => (
-                <div
-                  key={a.uuid}
-                  className="grid grid-cols-8 gap-5 py-2 border-divider items-center"
-                >
-                  <div className="col-span-5">
-                    <h3>{a.groupName}</h3>
-                  </div>
-                  <div className="col-span-3 text-right">
-                    {!isAttributeGroupSelected(
-                      a,
-                      internalSelectedAttributeGroups
-                    ) && (
-                      <button
-                        type="button"
-                        className="button secondary"
-                        onClick={async (e) => {
-                          e.preventDefault();
-                          setInternalSelectedAttributeGroups((prev) => [
-                            ...prev,
-                            {
-                              attributeGroupId: a.attributeGroupId,
-                              uuid: a.uuid,
-                              groupName: a.groupName
-                            }
-                          ]);
-                          onSelect(a.attributeGroupId, a.uuid, a.groupName);
-                        }}
-                      >
-                        Select
-                      </button>
-                    )}
-                    {isAttributeGroupSelected(
-                      a,
-                      internalSelectedAttributeGroups
-                    ) && (
-                      <a
-                        className="button primary"
-                        href="#"
-                        onClick={(e) => {
-                          e.preventDefault();
-                          setInternalSelectedAttributeGroups((prev) =>
-                            prev.filter(
-                              (c) =>
-                                c.attributeGroupId !== a.attributeGroupId &&
-                                c.uuid !== a.uuid
-                            )
-                          );
-                          onUnSelect(a.attributeGroupId, a.uuid, a.groupName);
-                        }}
-                      >
-                        <CheckIcon className="w-5 h-5" />
-                      </a>
-                    )}
-                  </div>
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
-      </Card.Session>
-      <Card.Session>
-        <div className="flex justify-between gap-5">
-          <SimplePagination
-            total={data?.attributeGroups.total || 0}
-            count={data?.attributeGroups?.items?.length || 0}
-            page={page}
-            hasNext={limit * page < data?.attributeGroups.total}
-            setPage={setPage}
+    <div>
+      <div>
+        <div className="mb-5">
+          <Input
+            type="text"
+            value={inputValue || ''}
+            placeholder="Search attribute groups"
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              setInputValue(e.target.value);
+              setLoading(true);
+            }}
           />
         </div>
-      </Card.Session>
-    </Card>
+        {(fetching || loading) && <AttributeGroupListSkeleton />}
+        {!fetching && data && (
+          <div className="divide-y">
+            {data.attributeGroups.items.length === 0 && (
+              <div className="p-2 border border-divider rounded flex justify-center items-center">
+                {inputValue ? (
+                  <p>
+                    No attribute groups found for query &quot;{inputValue}
+                    &rdquo;
+                  </p>
+                ) : (
+                  <p>You have no attribute groups to display</p>
+                )}
+              </div>
+            )}
+            {data.attributeGroups.items.map((a) => (
+              <div
+                key={a.uuid}
+                className="grid grid-cols-8 gap-5 py-2 border-divider items-center"
+              >
+                <div className="col-span-5">
+                  <h3>{a.groupName}</h3>
+                </div>
+                <div className="col-span-3 text-right">
+                  {!isAttributeGroupSelected(
+                    a,
+                    internalSelectedAttributeGroups
+                  ) && (
+                    <Button
+                      variant="outline"
+                      onClick={async (e) => {
+                        e.preventDefault();
+                        setInternalSelectedAttributeGroups((prev) => [
+                          ...prev,
+                          {
+                            attributeGroupId: a.attributeGroupId,
+                            uuid: a.uuid,
+                            groupName: a.groupName
+                          }
+                        ]);
+                        onSelect(a.attributeGroupId, a.uuid, a.groupName);
+                      }}
+                    >
+                      Select
+                    </Button>
+                  )}
+                  {isAttributeGroupSelected(
+                    a,
+                    internalSelectedAttributeGroups
+                  ) && (
+                    <Button
+                      onClick={(e) => {
+                        e.preventDefault();
+                        setInternalSelectedAttributeGroups((prev) =>
+                          prev.filter(
+                            (c) =>
+                              c.attributeGroupId !== a.attributeGroupId &&
+                              c.uuid !== a.uuid
+                          )
+                        );
+                        onUnSelect(a.attributeGroupId, a.uuid, a.groupName);
+                      }}
+                    >
+                      <Check className="w-5 h-5" />
+                    </Button>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+      <div className="flex justify-between gap-5 mt-3">
+        <SimplePagination
+          total={data?.attributeGroups.total || 0}
+          count={data?.attributeGroups?.items?.length || 0}
+          page={page}
+          hasNext={limit * page < data?.attributeGroups.total}
+          setPage={setPage}
+        />
+      </div>
+    </div>
   );
 };
 

package/src/components/admin/CategorySelector.tsx

@@ -1,8 +1,10 @@
 import { SimplePagination } from '@components/common/SimplePagination.js';
-import { CheckIcon } from '@heroicons/react/24/outline';
+import { Button } from '@components/common/ui/Button.js';
+import { Input } from '@components/common/ui/Input.js';
+import { Skeleton } from '@components/common/ui/Skeleton.js';
+import { Check } from 'lucide-react';
 import React from 'react';
 import { useQuery } from 'urql';
-import './CategorySelector.scss';
 import { AtLeastOne } from '../../types/atLeastOne.js';
 
 const SearchQuery = `
@@ -30,20 +32,17 @@ const CategoryListSkeleton: React.FC = () => {
   const skeletonItems = Array(5).fill(0);
 
   return (
-    <div className="category-list-skeleton">
+    <div className="attribute-group-list-skeleton space-y-2 divide-y">
       {skeletonItems.map((_, index) => (
         <div
           key={index}
-          className="category-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>
-              <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>
       ))}
@@ -124,7 +123,7 @@ const CategorySelector: React.FC<{
 
   if (error) {
     return (
-      <p className="text-critical">
+      <p className="text-destructive">
         There was an error fetching categories.
         {error.message}
       </p>
@@ -135,17 +134,15 @@ const CategorySelector: React.FC<{
     <div>
       <div>
         <div className="p-2">
-          <div className="form-field">
-            <input
-              type="text"
-              value={inputValue || ''}
-              placeholder="Search categories"
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                setInputValue(e.target.value);
-                setLoading(true);
-              }}
-            />
-          </div>
+          <Input
+            type="text"
+            value={inputValue || ''}
+            placeholder="Search categories"
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              setInputValue(e.target.value);
+              setLoading(true);
+            }}
+          />
         </div>
         {(fetching || loading) && <CategoryListSkeleton />}
         {!fetching && data && (
@@ -176,9 +173,8 @@ const CategorySelector: React.FC<{
                 </div>
                 <div className="col-span-3 text-right">
                   {!isCategorySelected(cat, internalSelectedCategories) && (
-                    <button
-                      type="button"
-                      className="button secondary"
+                    <Button
+                      variant={'outline'}
                       onClick={async (e) => {
                         e.preventDefault();
                         setInternalSelectedCategories((prev) => [
@@ -193,12 +189,11 @@ const CategorySelector: React.FC<{
                       }}
                     >
                       Select
-                    </button>
+                    </Button>
                   )}
                   {isCategorySelected(cat, internalSelectedCategories) && (
-                    <a
-                      className="button primary"
-                      href="#"
+                    <Button
+                      variant={'default'}
                       onClick={(e) => {
                         e.preventDefault();
                         setInternalSelectedCategories((prev) =>
@@ -211,8 +206,8 @@ const CategorySelector: React.FC<{
                         onUnSelect(cat.categoryId, cat.uuid, cat.name);
                       }}
                     >
-                      <CheckIcon className="w-5 h-5" />
-                    </a>
+                      <Check className="w-5 h-5" />
+                    </Button>
                   )}
                 </div>
               </div>

package/src/components/admin/CategoryTree.tsx

@@ -1,11 +1,8 @@
-import { ChevronDownIcon } from '@heroicons/react/24/outline';
-import { ChevronRightIcon } from '@heroicons/react/24/outline';
-import { FolderIcon as Folder } from '@heroicons/react/24/outline';
-import { MinusIcon } from '@heroicons/react/24/outline';
 import React from 'react';
 import { useQuery } from 'urql';
 import './CategoryTree.scss';
 import RenderIfTrue from '@components/common/RenderIfTrue.jsx';
+import { Folder, Minus, Plus } from 'lucide-react';
 
 export interface CategoryTreeItem {
   categoryId: number;
@@ -79,7 +76,7 @@ function CategoryItem({
 
   if (error) {
     return (
-      <li className="text-critical">
+      <li className="text-destructive">
         <span>{error.message}</span>
       </li>
     );
@@ -101,15 +98,15 @@ function CategoryItem({
             }}
           >
             {expanded ? (
-              <ChevronDownIcon width={15} height={15} />
+              <Minus width={15} height={15} />
             ) : (
-              <ChevronRightIcon width={15} height={15} />
+              <Plus width={15} height={15} />
             )}
           </a>
         )}
         {!category.hasChildren && (
-          <span className="text-gray-400">
-            <MinusIcon width={11} height={15} />
+          <span>
+            <Minus width={15} height={15} />
           </span>
         )}
         <a
@@ -171,7 +168,7 @@ function CategoryTree({ selectedCategories, onSelect }: CategoryTreeProps) {
     return <Skeleton />;
   }
   if (error) {
-    return <p className="text-critical">{error.message}</p>;
+    return <p className="text-destructive">{error.message}</p>;
   }
   if (!data || !data.categories || data.categories.items.length === 0) {
     return <div className="text-gray-400 text-md">There is no category</div>;

package/src/components/admin/CollectionSelector.tsx

@@ -1,8 +1,10 @@
 import { SimplePagination } from '@components/common/SimplePagination.js';
-import { CheckIcon } from '@heroicons/react/24/outline';
+import { Button } from '@components/common/ui/Button.js';
+import { Input } from '@components/common/ui/Input.js';
+import { Skeleton } from '@components/common/ui/Skeleton.js';
+import { Check } from 'lucide-react';
 import React from 'react';
 import { useQuery } from 'urql';
-import './CollectionSelector.scss';
 import { AtLeastOne } from '../../types/atLeastOne.js';
 
 const SearchQuery = `
@@ -27,20 +29,17 @@ const CollectionListSkeleton: React.FC = () => {
   const skeletonItems = Array(5).fill(0);
 
   return (
-    <div className="collection-list-skeleton">
+    <div className="attribute-group-list-skeleton space-y-2 divide-y">
       {skeletonItems.map((_, index) => (
         <div
           key={index}
-          className="collection-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>
-              <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>
       ))}
@@ -123,7 +122,7 @@ const CollectionSelector: React.FC<{
 
   if (error) {
     return (
-      <p className="text-critical">
+      <p className="text-destructive">
         There was an error fetching collections.
         {error.message}
       </p>
@@ -134,17 +133,15 @@ const CollectionSelector: React.FC<{
     <div>
       <div>
         <div className="p-2">
-          <div className="form-field">
-            <input
-              type="text"
-              value={inputValue || ''}
-              placeholder="Search collections"
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                setInputValue(e.target.value);
-                setLoading(true);
-              }}
-            />
-          </div>
+          <Input
+            type="text"
+            value={inputValue || ''}
+            placeholder="Search collections"
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              setInputValue(e.target.value);
+              setLoading(true);
+            }}
+          />
         </div>
         {(fetching || loading) && <CollectionListSkeleton />}
         {!fetching && data && (
@@ -170,9 +167,8 @@ const CollectionSelector: React.FC<{
                 </div>
                 <div className="col-span-3 text-right">
                   {!isCollectionSelected(c, internalSelectedCollections) && (
-                    <button
-                      type="button"
-                      className="button secondary"
+                    <Button
+                      variant="outline"
                       onClick={async (e) => {
                         e.preventDefault();
                         setInternalSelectedCollections((prev) => [
@@ -187,12 +183,11 @@ const CollectionSelector: React.FC<{
                       }}
                     >
                       Select
-                    </button>
+                    </Button>
                   )}
                   {isCollectionSelected(c, internalSelectedCollections) && (
-                    <a
-                      className="button primary"
-                      href="#"
+                    <Button
+                      variant="default"
                       onClick={(e) => {
                         e.preventDefault();
                         setInternalSelectedCollections((prev) =>
@@ -205,8 +200,8 @@ const CollectionSelector: React.FC<{
                         onUnSelect(c.collectionId, c.uuid, c.name);
                       }}
                     >
-                      <CheckIcon width={20} height={20} />
-                    </a>
+                      <Check width={20} height={20} />
+                    </Button>
                   )}
                 </div>
               </div>