@csbeker/medusa-product-attributes 2.2.0

package/src/admin/routes/attributes/create/components/MultiSelectCategory.tsx

@@ -0,0 +1,148 @@
+import { Text, Badge, IconButton } from "@medusajs/ui"
+import { AdminProductCategory } from "@medusajs/types"
+import React, { useState, useRef, useEffect } from "react"
+import { TrianglesMini, XMarkMini, ChevronRightMini, ChevronLeftMini, ArrowUturnLeft, PlayMiniSolid, TriangleRightMiniHover } from "@medusajs/icons"
+
+type MultiSelectCategoryProps = {
+  categories: AdminProductCategory[]
+  value: string[]
+  onChange: (value: string[]) => void
+}
+
+const MultiSelectCategory: React.FC<MultiSelectCategoryProps> = ({
+  categories,
+  value,
+  onChange,
+}) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const dropdownRef = useRef<HTMLDivElement>(null)
+  const triggerRef = useRef<HTMLDivElement>(null)
+  const [currentParentId, setCurrentParentId] = useState<string | null>(null)
+  const [pathHistory, setPathHistory] = useState<(string | null)[]>([])
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node) &&
+        triggerRef.current &&
+        !triggerRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false)
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside)
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside)
+    }
+  }, [])
+
+  const handleToggle = () => {
+    setIsOpen((prev) => !prev)
+  }
+
+  const hasChildren = (categoryId: string) => {
+    return categories.some(cat => cat.parent_category_id === categoryId)
+  }
+
+  const handleDrillDown = (category: AdminProductCategory, event: React.MouseEvent) => {
+    event.stopPropagation() // Prevent selection when drilling down
+    setPathHistory([...pathHistory, currentParentId])
+    setCurrentParentId(category.id)
+  }
+
+  const handleGoBack = () => {
+    const newPathHistory = [...pathHistory]
+    const previousParentId = newPathHistory.pop()
+    setPathHistory(newPathHistory)
+    setCurrentParentId(previousParentId || null)
+  }
+
+  const handleItemClick = (categoryId: string) => {
+    const isSelected = value.includes(categoryId)
+    if (isSelected) {
+      onChange(value.filter((id) => id !== categoryId))
+    } else {
+      onChange([...value, categoryId])
+    }
+  }
+
+  const currentCategories = categories.filter(cat => cat.parent_category_id === currentParentId)
+
+  const getBackButtonText = (): string => {
+    const parentCategory = categories.find(cat => cat.id === currentParentId);
+    return parentCategory?.name || "";
+  }
+
+  return (
+    <div className="relative">
+      <div
+        ref={triggerRef}
+        className="relative flex h-10 w-full cursor-pointer items-center justify-between overflow-hidden rounded-md border border-ui-border-base bg-ui-bg-field text-ui-fg-base shadow-sm transition-colors duration-150 ease-in-out hover:bg-ui-bg-field-hover focus-within:border-ui-border-interactive focus-within:ring-1 focus-within:ring-ui-ring-interactive"
+        onClick={handleToggle}
+      >
+        <div className="flex items-center gap-2 px-3 py-2">
+          {value.length > 0 ? (
+            <>
+              <button type="button" onClick={(e) => { e.stopPropagation(); onChange([]) }}>
+                <Badge size="small" className="w-fit">
+                  {value.length}
+                  <XMarkMini></XMarkMini>
+                </Badge>
+              </button>
+            </>
+          ) : (
+            <Text className="text-ui-fg-subtle">Select categories</Text>
+          )}
+        </div>
+        <span className="flex h-full w-10 items-center justify-center border-l border-ui-border-base">
+          <TrianglesMini></TrianglesMini>
+        </span>
+      </div>
+
+      {isOpen && (
+        <div
+          ref={dropdownRef}
+          className="absolute z-10 mt-1 w-full max-h-60 overflow-y-auto rounded-md border border-ui-border-base bg-ui-bg-base shadow-lg"
+        >
+          {currentParentId !== null && (
+            <div
+              className="flex cursor-pointer items-center gap-3 px-3 py-2 text-ui-fg-subtle hover:bg-ui-bg-base-hover border-b border-ui-border-base"
+              onClick={handleGoBack}
+            >
+              <ArrowUturnLeft />
+              <Text>{getBackButtonText()}</Text>
+            </div>
+          )}
+          {currentCategories.length === 0 ? (
+            <div className="p-3 text-ui-fg-subtle">No categories found.</div>
+          ) : (
+            currentCategories.map((category) => {
+              const isSelected = value.includes(category.id);
+              const hasChildrenNode = hasChildren(category.id)
+              return (
+                <div
+                  key={category.id}
+                  className={`flex cursor-pointer items-center justify-between px-1 py-1`}
+                  onClick={() => handleItemClick(category.id)}
+                >
+                  <div className="flex items-center hover:bg-ui-bg-base-hover flex-1 px-2 mr-2 py-1.5 rounded-md relative">
+                    {isSelected && <span className="absolute left-3 top-1/2 -translate-y-1/2 w-1 h-1 bg-white rounded-full" />}
+                    <Text className="ml-6">{category.name}</Text>
+                  </div>
+                  {hasChildrenNode && (
+                    <div onClick={(e) => handleDrillDown(category, e)} className="p-2 rounded-md hover:bg-ui-bg-base-hover">
+                      <TriangleRightMiniHover className="mr-1" />
+                    </div>
+                  )}
+                </div>
+              );
+            })
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default MultiSelectCategory 

package/src/admin/routes/attributes/create/components/PossibleValuesList.tsx

@@ -0,0 +1,151 @@
+import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors, DragEndEvent } from '@dnd-kit/core'
+import { arrayMove, SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+import { Button, IconButton, Input, Text } from '@medusajs/ui'
+import { Plus, X, EllipsisHorizontal, XMark } from '@medusajs/icons'
+import { useFieldArray, useFormContext } from 'react-hook-form'
+import { AdminCreateAttributeValueType } from '../../../../../api/admin/plugin/attributes/validators'
+import { CreateAttributeFormSchema } from '../page'
+import { z } from 'zod'
+
+type FormValues = z.infer<typeof CreateAttributeFormSchema>
+
+interface SortableItemProps {
+  id: string
+  index: number
+  onRemove: () => void
+}
+
+const SortableItem = ({ id, index, onRemove }: SortableItemProps) => {
+  const { register, formState: { errors } } = useFormContext<FormValues>()
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+  } = useSortable({ id })
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  }
+
+  const fieldError = errors.possible_values?.[index]?.value
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className="flex items-center gap-2 p-2 bg-ui-bg-component border border-ui-border-base rounded-xl mb-2"
+    >
+      <button
+        className="cursor-grab active:cursor-grabbing"
+        {...attributes}
+        {...listeners}
+      >
+        <EllipsisHorizontal className="text-ui-fg-subtle" />
+      </button>
+      <div className="flex-1">
+        <Input
+          className="flex-1"
+          aria-invalid={!!fieldError}
+          placeholder="Enter value"
+          {...register(`possible_values.${index}.value`)}
+        />
+      </div>
+      <IconButton
+        variant="transparent"
+        size="small"
+        onClick={onRemove}
+      >
+        <XMark />
+      </IconButton>
+    </div>
+  )
+}
+
+const PossibleValuesList = () => {
+  const { control, getValues } = useFormContext<FormValues>()
+  const { fields, append, remove, update } = useFieldArray({
+    control,
+    name: 'possible_values',
+  })
+
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  )
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event
+
+    if (over && active.id !== over.id) {
+      const oldIndex = fields.findIndex((field) => field.id === active.id)
+      const newIndex = fields.findIndex((field) => field.id === over.id)
+      
+      // Get current form values
+      const currentValues = getValues('possible_values') as AdminCreateAttributeValueType[]
+      
+      // Create new array with reordered items
+      const reorderedValues = arrayMove(currentValues, oldIndex, newIndex)
+      
+      // Update all fields with their new positions and ranks
+      reorderedValues.forEach((value, index) => {
+        update(index, {
+          value: value.value,
+          rank: index,
+          metadata: value.metadata || {},
+        })
+      })
+    }
+  }
+
+  const handleAddValue = () => {
+    append({
+      value: '',
+      rank: fields.length,
+      metadata: {},
+    })
+  }
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between pb-1">
+        <Text className="text-ui-fg-subtle">Possible Values</Text>
+        <Button
+          type="button"
+          variant="secondary"
+          size="small"
+          onClick={handleAddValue}
+        >
+          Add
+        </Button>
+      </div>
+
+      <DndContext
+        sensors={sensors}
+        collisionDetection={closestCenter}
+        onDragEnd={handleDragEnd}
+      >
+        <SortableContext
+          items={fields.map((field) => field.id)}
+          strategy={verticalListSortingStrategy}
+        >
+          {fields.map((field, index) => (
+            <SortableItem
+              key={field.id}
+              id={field.id}
+              index={index}
+              onRemove={() => remove(index)}
+            />
+          ))}
+        </SortableContext>
+      </DndContext>
+    </div>
+  )
+}
+
+export default PossibleValuesList 

package/src/admin/routes/attributes/create/page.tsx

@@ -0,0 +1,123 @@
+import { defineRouteConfig } from "@medusajs/admin-sdk";
+import {
+  FocusModal,
+  Button,
+  toast,
+  ProgressTabs,
+} from "@medusajs/ui";
+import { useNavigate } from "react-router-dom";
+import { medusaClient } from "../../../lib/config";
+import { useEffect, useState } from "react";
+import { AdminProductCategory } from "@medusajs/types";
+import { AttributeForm, CreateAttributeFormSchema } from "../components/AttributeForm";
+import { z } from "zod";
+import { useQueryClient } from "@tanstack/react-query";
+import { attributeQueryKeys } from "../../../hooks/api/attributes";
+
+const CreateAttributePage = () => {
+  const navigate = useNavigate();
+  const [categories, setCategories] = useState<AdminProductCategory[]>([]);
+  const [activeTab, setActiveTab] = useState<"details" | "type">("details");
+  const [tabStatuses, setTabStatuses] = useState<{
+    detailsStatus: "not-started" | "in-progress" | "completed";
+    typeStatus: "not-started" | "in-progress" | "completed";
+  }>({
+    detailsStatus: "not-started",
+    typeStatus: "not-started",
+  });
+  const queryClient = useQueryClient();
+
+  useEffect(() => {
+    const fetchCategories = async () => {
+      try {
+        const response = await medusaClient.admin.productCategory.list();
+        setCategories(response.product_categories);
+      } catch (error) {
+        console.error("Failed to fetch categories:", error);
+      }
+    };
+    fetchCategories();
+  }, []);
+
+  const handleSave = async (data: z.infer<typeof CreateAttributeFormSchema>) => {
+    try {
+      const { ...payload } = data;
+      await medusaClient.client.fetch("/admin/plugin/attributes", {
+        method: "POST",
+        body: payload,
+      });
+
+      queryClient.invalidateQueries({ queryKey: attributeQueryKeys.lists() });
+
+      toast.success("Attribute created!");
+      navigate(-1);
+    } catch (error) {
+      toast.error((error as Error).message);
+      console.error(error);
+    }
+  };
+
+  const handleClose = () => {
+    navigate(-1);
+  };
+
+  return (
+    <FocusModal
+      open={true}
+      onOpenChange={(open) => {
+        if (!open) handleClose();
+      }}
+    >
+      <FocusModal.Content>
+        <ProgressTabs
+          value={activeTab}
+          onValueChange={(value) => setActiveTab(value as "details" | "type")}
+          className="w-full h-full overflow-y-auto"
+        >
+          <FocusModal.Header className="flex items-center justify-between bg-ui-bg-base w-full py-0 h-fit sticky top-0 z-10">
+            <div className="w-full border-l h-full">
+              <ProgressTabs.List className="justify-start flex w-full items-center">
+                <ProgressTabs.Trigger
+                  value="details"
+                  status={tabStatuses.detailsStatus}
+                >
+                  Details
+                </ProgressTabs.Trigger>
+                <ProgressTabs.Trigger
+                  value="type"
+                  status={tabStatuses.typeStatus}
+                >
+                  Type
+                </ProgressTabs.Trigger>
+              </ProgressTabs.List>
+            </div>
+          </FocusModal.Header>
+          <FocusModal.Body className="flex flex-col items-center py-16">
+            <div>
+              <AttributeForm
+                //@ts-expect-error The received values will be for create form
+                onSubmit={handleSave}
+                onCancel={handleClose}
+                categories={categories}
+                activeTab={activeTab}
+                onFormStateChange={setTabStatuses}
+              />
+            </div>
+          </FocusModal.Body>
+        </ProgressTabs>
+        <FocusModal.Footer>
+          <Button variant="secondary" onClick={handleClose}>
+            Cancel
+          </Button>
+          <Button type="submit" form="attribute-form">
+            Save
+          </Button>
+        </FocusModal.Footer>
+      </FocusModal.Content>
+    </FocusModal>
+  );
+};
+
+export const config = defineRouteConfig({});
+
+export default CreateAttributePage;

package/src/admin/routes/attributes/create-set/page.tsx

@@ -0,0 +1,110 @@
+import { defineRouteConfig } from "@medusajs/admin-sdk";
+import {
+  FocusModal,
+  Heading,
+  Button,
+  toast,
+  Text,
+  Label,
+  Input,
+  Textarea,
+} from "@medusajs/ui";
+import { useNavigate } from "react-router-dom";
+import { medusaClient } from "../../../lib/config";
+import { z } from "zod";
+import { AdminCreateAttributeSet } from "../../../../api/admin/plugin/attribute-set/validators";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+
+type CreateAttributeSetFormValues = z.infer<typeof AdminCreateAttributeSet>;
+
+const CreateAttributeSetPage = () => {
+  const navigate = useNavigate();
+  const form = useForm<CreateAttributeSetFormValues>({
+    resolver: zodResolver(AdminCreateAttributeSet),
+    defaultValues: {
+      name: "",
+      handle: "",
+      description: "",
+    },
+  });
+
+  const handleSubmit = form.handleSubmit(async (data) => {
+    try {
+        await medusaClient.client.fetch('/admin/plugin/attribute-set', {
+            method: 'POST',
+            body: data
+        })
+        toast.success('Attribute set created!')
+        navigate(-1)
+    } catch (error) {
+        toast.error((error as Error).message);
+        console.error(error);
+    }
+  });
+  
+  const handleClose = () => {
+    navigate(-1);
+  };
+
+  return (
+    <FocusModal
+      open={true}
+      onOpenChange={(open) => {
+        if (!open) handleClose();
+      }}
+    >
+      <FocusModal.Content>
+        <FocusModal.Header>
+          <Heading>Create Attribute Set</Heading>
+        </FocusModal.Header>
+        <FocusModal.Body className="flex flex-col items-center py-16">
+          <div className="flex w-full max-w-lg flex-col gap-y-8">
+            <div className="flex flex-col gap-y-1">
+              <Heading>Create attribute set</Heading>
+              <Text className="text-ui-fg-subtle">
+                Create attribute sets to group together related attributes.
+              </Text>
+            </div>
+            <form id="attribute-set-form" onSubmit={handleSubmit}>
+              <div className="grid gap-4">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div>
+                    <Label size="xsmall" htmlFor="name">
+                      Name
+                    </Label>
+                    <Input aria-invalid={!!form.formState.errors.name} {...form.register("name")} />
+                  </div>
+                  <div>
+                    <Label size="xsmall" htmlFor="handle">
+                      Handle
+                    </Label>
+                    <Input {...form.register("handle")} />
+                  </div>
+                </div>
+                <div>
+                  <Label size="xsmall" htmlFor="description">
+                    Description
+                  </Label>
+                  <Textarea {...form.register("description")} />
+                </div>
+              </div>
+            </form>
+          </div>
+        </FocusModal.Body>
+        <FocusModal.Footer>
+          <Button variant="secondary" onClick={handleClose}>
+            Cancel
+          </Button>
+          <Button type="submit" form="attribute-set-form">
+            Create
+          </Button>
+        </FocusModal.Footer>
+      </FocusModal.Content>
+    </FocusModal>
+  );
+};
+
+export const config = defineRouteConfig({});
+
+export default CreateAttributeSetPage;