@csbeker/medusa-product-attributes 2.2.0

package/src/admin/routes/attributes/components/AttributeForm.tsx

@@ -0,0 +1,301 @@
+import {
+  Text,
+  Input,
+  Label,
+  Switch,
+  Select,
+  Textarea,
+  InlineTip
+} from "@medusajs/ui";
+import { useForm, FormProvider } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { AttributeUIComponent } from "../../../../modules/attribute/types";
+import { AdminUpdateAttribute, CreateAttribute } from "../../../../api/admin/plugin/attributes/validators";
+import { AdminProductCategory } from "@medusajs/types";
+import MultiSelectCategory from "../create/components/MultiSelectCategory";
+import PossibleValuesList from "../create/components/PossibleValuesList";
+import { Attribute } from "../../../../types/attribute/http/attribute";
+import { useEffect, useState } from "react";
+
+export const CreateAttributeFormSchema = CreateAttribute
+
+type CreateFormValues = z.infer<typeof CreateAttributeFormSchema>;
+
+export const UdpateAttributeFormSchema = AdminUpdateAttribute
+  
+type UpdateFormValues = z.infer<typeof UdpateAttributeFormSchema>;
+interface AttributeFormProps {
+  initialData?: Attribute;
+  onSubmit: (data: CreateFormValues | UpdateFormValues) => Promise<void>;
+  categories?: AdminProductCategory[]
+  mode?: 'create' | 'update'
+  activeTab?: "details" | "type"
+  onFormStateChange?: (formState: {
+    detailsStatus: "not-started" | "in-progress" | "completed";
+    typeStatus: "not-started" | "in-progress" | "completed";
+  }) => void
+}
+
+export const AttributeForm = ({
+  initialData,
+  onSubmit,
+  categories = [],
+  mode = 'create',
+  activeTab = "details",
+  onFormStateChange
+}: AttributeFormProps) => {
+  const [showCategorySection, setShowCategorySection] = useState(
+    (initialData?.product_categories?.length || 0) > 0
+  );
+
+  const form = useForm<CreateFormValues | UpdateFormValues>({
+    resolver: zodResolver(mode === 'create' ? CreateAttributeFormSchema : UdpateAttributeFormSchema),
+    defaultValues: {
+      name: initialData?.name || "",
+      description: initialData?.description || "",
+      handle: initialData?.handle || "",
+      ui_component: initialData?.ui_component || AttributeUIComponent.SELECT,
+      is_variant_defining: initialData?.is_variant_defining ?? true,
+      is_filterable: initialData?.is_filterable ?? true,
+      possible_values: initialData?.possible_values || [],
+      product_category_ids: initialData?.product_categories?.map(c => c.id) || [],
+      metadata: initialData?.metadata || null,
+    },
+  });
+
+  const handleSubmit = form.handleSubmit(async (data) => {
+    try {
+      await onSubmit(data);
+    } catch (error) {
+      console.error(error);
+    }
+  });
+
+  const getTabStatus = () => {
+    const formData = form.getValues();
+
+    // Details tab status
+    const hasName = formData.name?.trim();
+    const hasDetailsData =
+      formData.description?.trim() ||
+      formData.handle?.trim() ||
+      formData.product_category_ids?.length;
+    const detailsStatus = hasName
+      ? "completed"
+      : hasDetailsData
+      ? "in-progress"
+      : "not-started";
+
+    // Type tab status
+    const hasTypeData =
+      formData.ui_component && (formData.possible_values?.length || 0) > 0;
+    const typeStatus = hasTypeData ? "completed" : "not-started";
+
+    return {
+      detailsStatus: detailsStatus as
+        | "not-started"
+        | "in-progress"
+        | "completed",
+      typeStatus: typeStatus as "not-started" | "in-progress" | "completed",
+    };
+  };
+
+  useEffect(() => {
+    if (onFormStateChange) {
+      const statuses = getTabStatus();
+      onFormStateChange(statuses);
+    }
+  }, [form.watch(), onFormStateChange]);
+
+  const renderDetailsTab = () => (
+    <div className="grid gap-6">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div>
+          <Label size="small" htmlFor="name">Name</Label>
+          <Input size="small" id="name" className="mt-1" {...form.register("name")} />
+          {form.formState.errors.name && (
+            <Text className="text-red-500 text-sm mt-1">
+              {form.formState.errors.name.message}
+            </Text>
+          )}
+        </div>
+        <div>
+          <Label size="small" htmlFor="handle">Handle <span className="text-ui-fg-subtle text-xs">(Optional)</span></Label>
+          <div className="relative">
+            <Input size="small" id="handle" className="pl-9 mt-1" {...form.register("handle")} />
+            <div className="absolute z-100 left-0 top-1 bottom-0 flex items-center justify-center px-2 w-7 border-r border-ui-border-base text-ui-fg-muted">/</div>
+            {form.formState.errors.handle && (
+              <Text className="text-red-500 text-sm mt-1">
+                {form.formState.errors.handle.message}
+              </Text>
+            )}
+          </div>
+        </div>
+      </div>
+      <div className="grid grid-cols-1 gap-4">
+        <div>
+          <Label size="small" htmlFor="description">Description <span className="text-ui-fg-subtle text-xs">(Optional)</span></Label>
+          <Textarea className="mt-1"
+            id="description"
+            {...form.register("description")}
+          />
+          {form.formState.errors.description && (
+            <Text className="text-red-500 text-sm mt-1">
+              {form.formState.errors.description.message}
+            </Text>
+          )}
+        </div>
+
+        <div className="bg-ui-bg-component p-4 rounded-lg shadow-elevation-card-rest">
+          <div className="flex gap-3">
+            <Switch
+              id="is_filterable"
+              checked={form.watch("is_filterable")}
+              onCheckedChange={(checked) =>
+                form.setValue("is_filterable", checked)
+              }
+              className="mt-1"
+            />
+            <div>
+              <Label size="small" htmlFor="is_filterable">Yes, this is a filterable attribute</Label>
+              <Text className="text-ui-fg-subtle text-xs mt-1">
+                If checked, buyers will be able to filter products using this attribute.
+              </Text>
+            </div>
+          </div>
+        </div>
+
+        {/* <div className="bg-ui-bg-component p-4 rounded-lg shadow-elevation-card-rest">
+          <div className="flex gap-3">
+            <Switch
+              id="is_required"
+              checked={form.watch("is_required")}
+              onCheckedChange={(checked) =>
+                form.setValue("is_required", checked)
+              }
+              className="mt-1"
+            />
+            <div>
+              <Label size="small" htmlFor="is_required">Yes, this is a required attribute</Label>
+              <Text className="text-ui-fg-subtle text-xs mt-1">
+                If checked, vendors must set a value to this attribute.
+              </Text>
+            </div>
+          </div>
+        </div> */}
+
+        <div className="bg-ui-bg-component p-4 rounded-lg shadow-elevation-card-rest">
+          <div className="flex gap-3">
+            <Switch
+              id="is_global"
+              checked={!form.watch("product_category_ids")?.length && !showCategorySection}
+              onCheckedChange={(checked) => {
+                if (checked) {
+                  form.setValue("product_category_ids", []);
+                  setShowCategorySection(false);
+                } else {
+                  setShowCategorySection(true);
+                }
+              }}
+              className="mt-1"
+            />
+            <div>
+              <Label size="small" htmlFor="is_global">Yes, this is a global attribute</Label>
+              <Text className="text-ui-fg-subtle text-xs mt-1">
+                If checked, this attribute will be available for all products regardless of category.
+              </Text>
+            </div>
+          </div>
+        </div>
+
+        {(showCategorySection || (form.watch("product_category_ids")?.length || 0) > 0) && (
+          <div>
+            <Label size="small" htmlFor="product_categories">
+              Category
+            </Label>
+            <div className="mt-1">
+              <MultiSelectCategory
+                categories={categories || []}
+                value={form.watch("product_category_ids") || []}
+                onChange={(value) =>
+                  form.setValue("product_category_ids", value)
+                }
+              />
+              {form.formState.errors.product_category_ids && (
+                <Text className="text-red-500 text-sm mt-1">
+                  {form.formState.errors.product_category_ids.message}
+                </Text>
+              )}
+            </div>
+
+          </div>
+        )}
+        <div className={`mt-3 ${!(showCategorySection || (form.watch("product_category_ids")?.length || 0) > 0) && 'collapse'}`}>
+          <InlineTip label="Warning" variant="warning">
+            All child categories of the selected category will automatically inherit its attributes.
+          </InlineTip>
+        </div>
+      </div>
+    </div>
+  );
+
+  const renderTypeTab = () => (
+    <div className="grid gap-6 w-[720px]">
+      <div>
+        <Label size="small" htmlFor="ui_component">Type</Label>
+        <Select
+          value={form.watch("ui_component")}
+          onValueChange={(value) =>
+            form.setValue(
+              "ui_component",
+              value as AttributeUIComponent
+            )
+          }
+        >
+          <Select.Trigger className="mt-1">
+            <Select.Value placeholder="Select Type" />
+          </Select.Trigger>
+          <Select.Content>
+            {Object.values(AttributeUIComponent).map((component) => (
+              <Select.Item key={component} value={component}>
+                {component === 'select' ? 'Single Select' :
+                  component === 'multivalue' ? 'Multi Select' :
+                    component === 'unit' ? 'Unit' :
+                      component === 'toggle' ? 'Toggle' :
+                        component === 'text_area' ? 'Text' :
+                          component}
+              </Select.Item>
+            ))}
+          </Select.Content>
+        </Select>
+        {form.formState.errors.ui_component && (
+          <Text className="text-red-500 text-sm mt-1">
+            {form.formState.errors.ui_component.message}
+          </Text>
+        )}
+      </div>
+
+      {form.watch("ui_component") === AttributeUIComponent.SELECT && (
+        <InlineTip label="Tip" variant="info" >
+          When creating Single Select buyers will be able to choose only one value. This type of attribute will be good for product specifications.
+        </InlineTip>
+      )}
+
+      {(form.watch("ui_component") === AttributeUIComponent.SELECT || form.watch("ui_component") === AttributeUIComponent.MULTIVALUE) && (
+        <div>
+          <PossibleValuesList />
+        </div>
+      )}
+    </div>
+  );
+
+  return (
+    <FormProvider {...form}>
+      <form id="attribute-form" onSubmit={handleSubmit}>
+        {activeTab === "details" && renderDetailsTab()}
+        {activeTab === "type" && renderTypeTab()}
+      </form>
+    </FormProvider>
+  );
+}; 

package/src/admin/routes/attributes/components/AttributeSetTable.tsx

@@ -0,0 +1,108 @@
+import {
+  createDataTableColumnHelper,
+  Badge,
+  DataTablePaginationState,
+  useDataTable,
+  Container,
+  Heading,
+  Button,
+  DataTable,
+} from "@medusajs/ui";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { AttributeSet } from "../../../../types/attribute/http/attribute-set";
+import { useAttributeSets } from "../../../hooks/api/attribute-set";
+
+export const AttributeSetTable = () => {
+  const [page, setPage] = useState(1);
+  const pageSize = 10;
+  const navigate = useNavigate();
+
+  const { attributeSets, count, isLoading } = useAttributeSets({
+    limit: pageSize,
+    offset: (page - 1) * pageSize,
+  })
+
+  const columnHelper = createDataTableColumnHelper<AttributeSet>();
+
+  const columns = [
+    columnHelper.accessor("name", {
+      header: "Name",
+    }),
+    columnHelper.accessor("description", {
+      header: "Description",
+    }),
+    columnHelper.accessor("handle", {
+      header: "Handle",
+    }),
+    columnHelper.accessor("attributes", {
+      header: "Attributes",
+      cell: (info) => {
+        const attributes = info.getValue();
+        return (
+          <div className="flex flex-wrap gap-2">
+            {attributes?.map((attribute) => (
+              <Badge size="xsmall" key={attribute.id}>
+                {attribute.name}
+              </Badge>
+            )) || "-"}
+          </div>
+        );
+      },
+    }),
+  ];
+
+  const [pagination, setPagination] = useState<DataTablePaginationState>({
+    pageIndex: page - 1,
+    pageSize,
+  });
+
+  const [search, setSearch] = useState("");
+
+  const table = useDataTable({
+    columns,
+    data: attributeSets || [],
+    getRowId: (attributeSet: AttributeSet) => attributeSet.id,
+    rowCount: count || 0,
+    isLoading,
+    pagination: {
+      state: pagination,
+      onPaginationChange: (newPagination) => {
+        setPagination(newPagination);
+        setPage(newPagination.pageIndex + 1);
+      },
+    },
+    search: {
+      state: search,
+      onSearchChange: setSearch,
+    },
+    onRowClick: (_event, row: AttributeSet) => {
+      navigate(`set/${row.id}`);
+    },
+  });
+
+  return (
+    <Container className="divide-y p-0">
+      <div className="flex items-center justify-between px-6 py-4">
+        <Heading level="h2">Attribute Sets</Heading>
+        <Button
+          variant="secondary"
+          size="small"
+          onClick={() => navigate("/attributes/create-set")}
+        >
+          Create
+        </Button>
+      </div>
+
+      <div>
+        <DataTable instance={table}>
+          <DataTable.Toolbar className="flex flex-col items-start justify-between gap-2 md:flex-row md:items-center">
+            <DataTable.Search placeholder="Search attribute sets..." />
+          </DataTable.Toolbar>
+          <DataTable.Table />
+          <DataTable.Pagination />
+        </DataTable>
+      </div>
+    </Container>
+  );
+};

package/src/admin/routes/attributes/components/category-selection-modal.tsx

@@ -0,0 +1,82 @@
+import React, { useState, useEffect } from "react";
+import {
+  Prompt,
+} from "@medusajs/ui";
+import { AdminProductCategory } from "@medusajs/types";
+import MultiSelectCategory from "../create/components/MultiSelectCategory";
+import { medusaClient } from "../../../lib/config";
+
+interface CategorySelectionModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onConfirm: (selectedCategories: string[]) => void;
+}
+
+export const CategorySelectionModal: React.FC<CategorySelectionModalProps> = ({
+  open,
+  onOpenChange,
+  onConfirm,
+}) => {
+  const [categories, setCategories] = useState<AdminProductCategory[]>([]);
+  const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    if (open) {
+      fetchCategories();
+    }
+  }, [open]);
+
+  const fetchCategories = async () => {
+    try {
+      setIsLoading(true);
+      const response = await medusaClient.admin.productCategory.list()
+      setCategories(response.product_categories || []);
+    } catch (error) {
+      console.error("Failed to fetch categories:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleConfirm = () => {
+    onConfirm(selectedCategories);
+    setSelectedCategories([]);
+    onOpenChange(false);
+  };
+
+  const handleCancel = () => {
+    setSelectedCategories([]);
+    onOpenChange(false);
+  };
+
+  return (
+    <Prompt open={open} variant="confirmation" onOpenChange={onOpenChange}>
+      <Prompt.Content>
+        <Prompt.Header >
+          <Prompt.Title className="border-ui-border-base border-b -mx-6 pl-6 pb-4 -mt-2">Select category</Prompt.Title>
+          <Prompt.Description className="flex flex-col gap-4 py-4">
+            Please select the category where this attribute applies.
+            <MultiSelectCategory
+              categories={categories}
+              value={selectedCategories}
+              onChange={setSelectedCategories}
+            />
+          </Prompt.Description>
+        </Prompt.Header>
+
+        <Prompt.Footer className="border-ui-border-base border-t py-4">
+          <Prompt.Cancel onClick={handleCancel}>
+            Cancel
+          </Prompt.Cancel>
+          <Prompt.Action
+            onClick={handleConfirm}
+            disabled={selectedCategories.length === 0}
+          >
+            Save
+          </Prompt.Action>
+        </Prompt.Footer>
+      </Prompt.Content>
+    </Prompt>
+  );
+};

package/src/admin/routes/attributes/components/possible-values-table.tsx

@@ -0,0 +1,119 @@
+import { Container, Heading, Text, DataTable, createDataTableColumnHelper, DataTablePaginationState, Badge, DropdownMenu, Button } from "@medusajs/ui"
+import { useState } from "react"
+import { useDataTable } from "@medusajs/ui"
+import { format } from "date-fns"
+import { Attribute } from "../../../../types/attribute/http/attribute"
+import { EllipsisHorizontal } from "@medusajs/icons"
+import { useNavigate, useParams } from "react-router-dom"
+import { toast } from "@medusajs/ui"
+
+type PossibleValue = { id: string; value: string; rank: number; created_at: string }
+
+type PossibleValuesTableProps = {
+  attribute: Attribute
+  isLoading: boolean
+}
+
+export const PossibleValuesTable = ({ attribute, isLoading }: PossibleValuesTableProps) => {
+  const [possibleValuesPage, setPossibleValuesPage] = useState(1)
+  const possibleValuesPageSize = 10
+  const [possibleValuesPagination, setPossibleValuesPagination] = useState<DataTablePaginationState>({
+    pageIndex: possibleValuesPage - 1,
+    pageSize: possibleValuesPageSize,
+  })
+  const [possibleValuesSearch, setPossibleValuesSearch] = useState("")
+
+  const navigate = useNavigate()
+  const { id: attributeId } = useParams()
+
+  const possibleValuesColumnHelper = createDataTableColumnHelper<PossibleValue>()
+
+  const possibleValuesColumns = [
+    possibleValuesColumnHelper.accessor("value", {
+      header: "Value",
+      cell: (info) => info.getValue(),
+    }),
+    possibleValuesColumnHelper.accessor("rank", {
+      header: "Rank",
+      cell: (info) => info.getValue(),
+    }),
+    possibleValuesColumnHelper.accessor("created_at", {
+      header: "Created At",
+      cell: (info) => format(new Date(info.getValue()), "MMM dd, yyyy p"),
+    }),
+    possibleValuesColumnHelper.display({
+      id: "actions",
+      cell: (info) => {
+        const possibleValue = info.row.original
+        return (
+          <div className="flex items-center justify-end">
+            <DropdownMenu>
+              <DropdownMenu.Trigger asChild>
+                <Button variant="transparent" size="small">
+                  <EllipsisHorizontal />
+                </Button>
+              </DropdownMenu.Trigger>
+              <DropdownMenu.Content align="end">
+                <DropdownMenu.Item
+                  onClick={() => {
+                    if (attributeId) {
+                      navigate(`edit-possible-value?possible_value_id=${possibleValue.id}`)
+                    } else {
+                      toast.error("Attribute ID not found.")
+                    }
+                  }}
+                >
+                  Edit
+                </DropdownMenu.Item>
+              </DropdownMenu.Content>
+            </DropdownMenu>
+          </div>
+        )
+      },
+    }),
+  ]
+
+  const possibleValuesTable = useDataTable({
+    columns: possibleValuesColumns,
+    data: attribute?.possible_values?.filter((value) =>
+      value.value.toLowerCase().includes(possibleValuesSearch.toLowerCase())
+    ).slice(
+      possibleValuesPagination.pageIndex * possibleValuesPagination.pageSize,
+      (possibleValuesPagination.pageIndex + 1) * possibleValuesPagination.pageSize
+    ) || [],
+    getRowId: (value) => value.id,
+    rowCount: attribute?.possible_values?.length || 0,
+    pagination: {
+      state: possibleValuesPagination,
+      onPaginationChange: (newPagination) => {
+        setPossibleValuesPagination(newPagination)
+        setPossibleValuesPage(newPagination.pageIndex + 1)
+      },
+    },
+    search: {
+      state: possibleValuesSearch,
+      onSearchChange: setPossibleValuesSearch,
+    },
+  })
+
+  if (!attribute.possible_values || attribute.possible_values.length === 0) {
+    return null
+  }
+
+  return (
+    <Container className="divide-y p-0">
+      <div className="flex items-center justify-between px-6 py-4">
+        <Heading level="h2">Possible Values</Heading>
+      </div>
+      <div>
+        <DataTable instance={possibleValuesTable}>
+          <DataTable.Toolbar className="flex flex-col items-start justify-between gap-2 md:flex-row md:items-center">
+            <DataTable.Search placeholder="Search possible values..." />
+          </DataTable.Toolbar>
+          <DataTable.Table />
+          <DataTable.Pagination />
+        </DataTable>
+      </div>
+    </Container>
+  )
+}