@csbeker/medusa-product-attributes 2.2.0

package/src/admin/components/metadata-editor/index.tsx

@@ -0,0 +1,101 @@
+import { Button, Input, Text, Heading, DropdownMenu } from "@medusajs/ui"
+import { useFieldArray, UseFormReturn, FieldValues, Path, FieldError, FieldErrors, ArrayPath, FieldArray } from "react-hook-form"
+import { EllipsisHorizontal, Trash } from "@medusajs/icons"
+
+interface MetadataField {
+  key: string
+  value: string
+}
+
+interface MetadataEditorProps<T extends FieldValues & { metadata: MetadataField[] }> {
+  form: UseFormReturn<T>
+  name?: ArrayPath<T>
+  title?: string
+}
+
+export const MetadataEditor = <T extends FieldValues & { metadata: MetadataField[] }>({ 
+  form, 
+  name = "metadata" as ArrayPath<T>,
+  title = "Metadata" 
+}: MetadataEditorProps<T>) => {
+  const { fields, append, remove } = useFieldArray({
+    control: form.control,
+    name,
+  })
+
+  const getErrorMessage = (error: FieldError | undefined) => {
+    return error?.message ? String(error.message) : ""
+  }
+
+  const getFieldErrors = (index: number) => {
+    const errors = form.formState.errors[name] as FieldErrors<MetadataField[]> | undefined
+    return {
+      key: errors?.[index]?.key,
+      value: errors?.[index]?.value
+    }
+  }
+
+  return (
+    <div className="col-span-2 mt-4">
+      <Heading level="h3" className="inter-small-semibold mb-2">{title}</Heading>
+      <div className="border rounded-lg overflow-hidden">
+        <div className="grid grid-cols-[1fr_1fr_40px] bg-ui-bg-subtle border-b py-2 px-3 text-ui-fg-subtle text-sm font-semibold">
+          <span className="border-r pr-2">Key</span>
+          <span>Value</span>
+          <span></span>
+        </div>
+        {fields.map((field, index) => {
+          const fieldErrors = getFieldErrors(index)
+          return (
+            <div key={field.id} className="grid grid-cols-[1fr_1fr_40px] items-center border-b last:border-b-0">
+              <div className="py-2 pl-3 pr-2 border-r">
+                <Input
+                  placeholder="Key"
+                  className="!shadow-none !border-none focus-visible:!outline-none bg-transparent"
+                  {...form.register(`${name}.${index}.key` as Path<T>)}
+                />
+                {fieldErrors.key && (
+                  <Text className="text-red-500 text-sm mt-1">
+                    {getErrorMessage(fieldErrors.key)}
+                  </Text>
+                )}
+              </div>
+              <div className="py-2 pl-3 pr-2">
+                <Input
+                  placeholder="Value"
+                  className="!shadow-none !border-none focus-visible:!outline-none bg-transparent"
+                  {...form.register(`${name}.${index}.value` as Path<T>)}
+                />
+                {fieldErrors.value && (
+                  <Text className="text-red-500 text-sm mt-1">
+                    {getErrorMessage(fieldErrors.value)}
+                  </Text>
+                )}
+              </div>
+              <div className="flex justify-end pr-3">
+                <DropdownMenu>
+                  <DropdownMenu.Trigger asChild>
+                    <Button variant="transparent" size="small">
+                      <EllipsisHorizontal />
+                    </Button>
+                  </DropdownMenu.Trigger>
+                  <DropdownMenu.Content align="end">
+                    <DropdownMenu.Item onClick={() => remove(index)} className="gap-x-2">
+                      <Trash className="text-ui-fg-subtle" />
+                      Remove
+                    </DropdownMenu.Item>
+                  </DropdownMenu.Content>
+                </DropdownMenu>
+              </div>
+            </div>
+          )
+        })}
+        <div className="p-3">
+          <Button type="button" variant="secondary" size="small" onClick={() => append({ key: "", value: "" } as FieldArray<T, ArrayPath<T>>)} className="w-full">
+            + Add Row
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+} 

package/src/admin/components/section-row.tsx

@@ -0,0 +1,41 @@
+import { Text, clx } from "@medusajs/ui";
+import { ReactNode } from "react";
+
+export type SectionRowProps = {
+  title: string;
+  value?: ReactNode | string | null;
+  actions?: ReactNode;
+};
+
+export const SectionRow = ({ title, value, actions }: SectionRowProps) => {
+  const isValueString = typeof value === "string" || !value;
+
+  return (
+    <div
+      className={clx(
+        `text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4`,
+        {
+          "grid-cols-[1fr_1fr_28px]": !!actions,
+        },
+      )}
+    >
+      <Text size="small" weight="plus" leading="compact">
+        {title}
+      </Text>
+
+      {isValueString ? (
+        <Text
+          size="small"
+          leading="compact"
+          className="whitespace-pre-line text-pretty"
+        >
+          {value ?? "-"}
+        </Text>
+      ) : (
+        <div className="flex flex-wrap gap-1">{value}</div>
+      )}
+
+      {actions && <div>{actions}</div>}
+    </div>
+  );
+};

package/src/admin/hooks/api/attribute-set.ts

@@ -0,0 +1,122 @@
+import { QueryKey, useMutation, UseMutationOptions, useQuery, useQueryClient, UseQueryOptions } from "@tanstack/react-query";
+import { medusaClient } from "../../lib/config";
+import { queryKeysFactory } from "../../lib/query-key-factory";
+import { LinkWorkflowInput, PaginatedResponse } from "@medusajs/types";
+import { AttributeSet } from "../../../types/attribute/http/attribute-set";
+import { FetchError } from "@medusajs/js-sdk";
+import { attributeQueryKeys } from "./attributes";
+
+const ATRIBUTE_SET_QUERY_KEY = "attribute-sets" as const;
+export const attributeSetQueryKeys = queryKeysFactory(ATRIBUTE_SET_QUERY_KEY);
+
+export const useAttributeSets = (
+  query?: any,
+  options?: Omit<
+    UseQueryOptions<
+      PaginatedResponse<{ attributeSets: AttributeSet[] }>,
+      FetchError,
+      PaginatedResponse<{ attributeSets: AttributeSet[] }>,
+      QueryKey
+    >,
+    "queryFn" | "queryKey"
+  >
+) => {
+  const { data, ...rest } = useQuery({
+    queryKey: attributeSetQueryKeys.list(query),
+    queryFn: () =>
+      medusaClient.client.fetch<
+        PaginatedResponse<{ attributeSets: AttributeSet[] }>
+      >("/admin/plugin/attribute-set", {
+        method: "GET",
+      }),
+    ...options,
+  });
+  return { ...data, ...rest };
+};
+
+export const useAttributeSet = (
+  id: string,
+  query?: any,
+  options?: Omit<
+    UseQueryOptions<
+      { attributeSet: AttributeSet },
+      FetchError,
+      { attributeSet: AttributeSet },
+      QueryKey
+    >,
+    "queryFn" | "queryKey"
+  >
+) => {
+  const { data, ...rest } = useQuery({
+    queryKey: attributeSetQueryKeys.detail(id, query),
+    queryFn: () =>
+      medusaClient.client.fetch<{ attributeSet: AttributeSet }>(
+        `/admin/plugin/attribute-set/${id}`,
+        {
+          method: "GET",
+        }
+      ),
+    ...options,
+  });
+
+  return { ...data, ...rest };
+};
+
+export const useUpdateAttributeSet = (
+  id: string,
+  options?: 
+    UseMutationOptions<
+      { attributeSet: AttributeSet },
+      FetchError,
+      Partial<Pick<AttributeSet, 'name' | 'handle' | 'description' | 'metadata'>>
+    >
+) => {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: (payload) => medusaClient.client.fetch(`/admin/plugin/attribute-set/${id}`, {
+      method: 'POST',
+      body: payload
+    }),
+    onSuccess: (data, variables, context) => {
+      queryClient.invalidateQueries({
+        queryKey: attributeSetQueryKeys.detail(id)
+      })
+      queryClient.invalidateQueries({
+        queryKey: attributeSetQueryKeys.list()
+      })
+
+      options?.onSuccess?.(data, variables, context)
+    },
+    ...options
+  })
+}
+
+export const useBatchAttributesToSets = (
+  attributeSetId: string,
+  options?: 
+    UseMutationOptions<
+      {},
+      FetchError,
+      Omit<LinkWorkflowInput, 'id'>
+    >
+) => {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: (payload) => medusaClient.client.fetch(`/admin/plugin/attribute-set/${attributeSetId}/attributes`, {
+      method: 'POST',
+      body: payload,
+    }),
+    onSuccess: (data, variables, context) => {
+      queryClient.invalidateQueries({
+        queryKey: attributeSetQueryKeys.detail(attributeSetId)
+      })
+      queryClient.invalidateQueries({
+        queryKey: attributeQueryKeys.lists()
+      })
+      console.log('Invalidated query keys')
+      
+      options?.onSuccess?.(data, variables, context)
+    },
+    ...options
+  })
+}

package/src/admin/hooks/api/attributes.ts

@@ -0,0 +1,126 @@
+import { QueryKey, useMutation, UseMutationOptions, useQuery, useQueryClient, UseQueryOptions } from "@tanstack/react-query"
+import { queryKeysFactory } from "../../lib/query-key-factory"
+import { PaginatedResponse } from "@medusajs/types"
+import { Attribute, AttributePossibleValue } from "../../../types/attribute/http/attribute"
+import { FetchError } from "@medusajs/js-sdk"
+import { medusaClient } from "../../lib/config"
+import { attributeSetQueryKeys } from "./attribute-set"
+
+const ATTRIBUTE_QUERY_KEY = 'attribute' as const
+export const attributeQueryKeys = queryKeysFactory(ATTRIBUTE_QUERY_KEY)
+
+export const useAttributes = (
+    query?: any,
+    options?: Omit<
+        UseQueryOptions<
+            PaginatedResponse<{ attributes: Attribute[] }>,
+            FetchError,
+            PaginatedResponse<{ attributes: Attribute[] }>,
+            QueryKey
+        >,
+        "queryFn" | "queryKey"
+    >
+) => {
+    const { data, ...rest } = useQuery({
+        queryKey: attributeQueryKeys.list(query),
+        queryFn: () => 
+            medusaClient.client.fetch<PaginatedResponse<{ attributes: Attribute[] }>>('/admin/plugin/attributes', {
+                method: 'GET',
+                query,
+            }),
+        ...options,
+    })
+    return { ...data, ...rest }
+}
+
+export const useAttribute = (
+    id: string,
+    query?: Record<string, unknown>,
+    options?: Omit<
+        UseQueryOptions<
+            { attribute: Attribute },
+            FetchError,
+            { attribute: Attribute },
+            QueryKey
+        >,
+        "queryFn" | "queryKey"
+    >
+) => {
+    const { data, ...rest } = useQuery({
+        queryKey: attributeQueryKeys.detail(id, query),
+        queryFn: () => 
+            medusaClient.client.fetch<{ attribute: Attribute }>(`/admin/plugin/attributes/${id}`, {
+                method: 'GET',
+                query,
+            }),
+        ...options,
+    })
+    return { ...data, ...rest }
+}
+
+export const useUpdateAttribute = (
+    id: string,
+    options?: 
+      UseMutationOptions<
+        { attribute: Attribute },
+        FetchError,
+        Partial<Pick<Attribute, 'name' | 'handle' | 'description' | 'metadata'>>
+      >
+  ) => {
+    const queryClient = useQueryClient()
+
+    return useMutation({
+      mutationFn: (payload) => medusaClient.client.fetch(`/admin/plugin/attributes/${id}`, {
+        method: 'POST',
+        body: payload
+      }),
+      onSuccess: (data, variables, context) => {
+        queryClient.invalidateQueries({
+          queryKey: attributeQueryKeys.detail(id)
+        })
+        queryClient.invalidateQueries({
+          queryKey: attributeQueryKeys.list()
+        })
+  
+        options?.onSuccess?.(data, variables, context)
+      },
+      ...options
+    })
+  }
+
+  const ATTRIBUTE_POSSIBLE_VALUE_QUERY_KEY = 'attribute-possible-value' as const
+  export const attributePossibleValueQueryKeys = queryKeysFactory(ATTRIBUTE_POSSIBLE_VALUE_QUERY_KEY)
+
+  export const useUpdateAttributePossibleValue = (
+    attributeId: string,
+    possibleValueId: string,
+    options?: 
+      UseMutationOptions<
+        { possible_value: AttributePossibleValue },
+        FetchError,
+        Partial<Pick<AttributePossibleValue, 'value' | 'rank' | 'metadata'>>
+      >
+  ) => {
+    const queryClient = useQueryClient()
+
+    return useMutation({
+      mutationFn: (payload) => medusaClient.client.fetch(`/admin/plugin/attributes/${attributeId}/values/${possibleValueId}`, {
+        method: 'POST',
+        body: payload
+      }),
+      onSuccess: (data, variables, context) => {
+        queryClient.invalidateQueries({
+          queryKey: attributeQueryKeys.detail(attributeId)
+        })
+        queryClient.invalidateQueries({
+          queryKey: attributeQueryKeys.list()
+        })
+        queryClient.invalidateQueries({
+           queryKey: attributePossibleValueQueryKeys.detail(possibleValueId)
+        })
+  
+        options?.onSuccess?.(data, variables, context)
+      },
+      ...options
+    })
+  }

package/src/admin/hooks/table/columns/index.ts

@@ -0,0 +1 @@
+export * from './use-attribute-table-columns'

package/src/admin/hooks/table/columns/use-attribute-table-columns.tsx

@@ -0,0 +1,280 @@
+import { Badge, createDataTableColumnHelper, DropdownMenu, IconButton, Switch, toast, usePrompt } from "@medusajs/ui";
+import { useMemo, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { Attribute } from "../../../../types/attribute";
+import { useQueryClient } from "@tanstack/react-query";
+import { medusaClient } from "../../../lib/config";
+import { attributeQueryKeys } from "../../api/attributes";
+import { EllipsisHorizontal, PencilSquare, Trash } from "@medusajs/icons";
+import { CategorySelectionModal } from "../../../routes/attributes/components/category-selection-modal";
+
+const columnHelper = createDataTableColumnHelper<Attribute>();
+
+export const useAttributeTableColumns = () => {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const prompt = usePrompt();
+
+  const [isCategoryModalOpen, setIsCategoryModalOpen] = useState(false);
+  const [currentAttribute, setCurrentAttribute] = useState<Attribute | null>(null);
+
+  const handleEdit = (attributeId: string) => {
+    navigate(`/attributes/${attributeId}/edit`);
+  };
+
+  const handleToggleFilterable = async (attributeId: string, currentValue: boolean, attribute: Attribute) => {
+    try {
+      await medusaClient.client.fetch(`/admin/plugin/attributes/${attributeId}`, {
+        method: "POST",
+        body: {
+          name: attribute.name,
+          description: attribute.description,
+          handle: attribute.handle,
+          is_filterable: !currentValue,
+          // is_required: attribute.is_required,
+          ui_component: attribute.ui_component,
+          // metadata: {},
+          product_category_ids: attribute.product_categories?.map((category) => category.id),
+          possible_values: attribute.possible_values?.map((value) => ({
+            id: value.id,
+            value: value.value,
+            rank: value.rank,
+            metadata: value.metadata,
+          })),
+        },
+      });
+
+      queryClient.invalidateQueries({ queryKey: attributeQueryKeys.lists() });
+      toast.success("Attribute updated!");
+    } catch (error) {
+      toast.error((error as Error).message);
+    }
+  };
+
+  const handleToggleGlobal = async (attributeId: string, newValue: boolean, attribute: Attribute) => {
+    const isCurrentlyGlobal = !attribute.product_categories?.length;
+
+    if (isCurrentlyGlobal && !newValue) {
+      setCurrentAttribute(attribute);
+      setIsCategoryModalOpen(true);
+      return;
+    }
+
+    if (!isCurrentlyGlobal && newValue) {
+      try {
+        await medusaClient.client.fetch(`/admin/plugin/attributes/${attributeId}`, {
+          method: "POST",
+          body: {
+            name: attribute.name,
+            description: attribute.description,
+            handle: attribute.handle,
+            is_filterable: attribute.is_filterable,
+            // is_required: attribute.is_required,
+            ui_component: attribute.ui_component,
+            product_category_ids: [],
+            possible_values: attribute.possible_values?.map((value) => ({
+              id: value.id,
+              value: value.value,
+              rank: value.rank,
+              metadata: value.metadata ?? {},
+            })),
+          },
+        });
+
+        queryClient.invalidateQueries({ queryKey: attributeQueryKeys.lists() });
+        queryClient.invalidateQueries({ queryKey: attributeQueryKeys.detail(attributeId) });
+        toast.success("Attribute updated!");
+      } catch (error) {
+        toast.error((error as Error).message);
+      }
+      return;
+    }
+  };
+
+  const handleCategorySelection = async (selectedCategories: string[]) => {
+    if (!currentAttribute) return;
+
+    try {
+      await medusaClient.client.fetch(`/admin/plugin/attributes/${currentAttribute.id}`, {
+        method: "POST",
+        body: {
+          name: currentAttribute.name,
+          description: currentAttribute.description,
+          handle: currentAttribute.handle,
+          is_filterable: currentAttribute.is_filterable,
+        //   is_required: currentAttribute.is_required,
+          ui_component: currentAttribute.ui_component,
+          product_category_ids: selectedCategories,
+          possible_values: currentAttribute.possible_values?.map((value) => ({
+            id: value.id,
+            value: value.value,
+            rank: value.rank,
+            metadata: value.metadata,
+          })),
+        },
+      });
+
+      queryClient.invalidateQueries({ queryKey: attributeQueryKeys.lists() });
+      queryClient.invalidateQueries({ queryKey: attributeQueryKeys.detail(currentAttribute.id) });
+      toast.success("Attribute updated!");
+    } catch (error) {
+      toast.error((error as Error).message);
+    } finally {
+      setCurrentAttribute(null);
+      setIsCategoryModalOpen(false);
+    }
+  };
+
+  const handleDelete = async (attributeId: string, attributeName: string) => {
+    const confirmed = await prompt({
+      title: "Delete Attribute",
+      description: `You are about to delete attribute ${attributeName}. This action cannot be undone.`,
+      confirmText: "Delete",
+      cancelText: "Cancel",
+    });
+
+    if (!confirmed) {
+      return;
+    }
+
+    try {
+      await medusaClient.client.fetch(`/admin/plugin/attributes/${attributeId}`, {
+        method: "DELETE",
+      });
+      toast.success("Attribute deleted!");
+      queryClient.invalidateQueries({ queryKey: attributeQueryKeys.lists() });
+    } catch (error) {
+      toast.error((error as Error).message);
+    }
+  };
+
+  const columns = useMemo(
+    () => [
+      columnHelper.accessor("name", {
+        header: "Name",
+      }),
+      columnHelper.accessor("handle", {
+        header: "Handle",
+      }),
+      columnHelper.accessor("is_filterable", {
+        header: "Filterable",
+        cell: (info) => {
+          const attribute = info.row.original;
+          return (
+            <div onClick={(e) => e.stopPropagation()}>
+              <Switch
+                checked={info.getValue()}
+                onCheckedChange={() =>
+                  handleToggleFilterable(
+                    attribute.id,
+                    info.getValue(),
+                    attribute
+                  )
+                }
+              />
+            </div>
+          );
+        },
+      }),
+      columnHelper.accessor("product_categories", {
+        header: "Global",
+        cell: (info) => {
+          const attribute = info.row.original;
+          const isGlobal = !info.getValue()?.length;
+          return (
+            <Switch
+              checked={isGlobal}
+              onCheckedChange={(newValue) =>
+                handleToggleGlobal(attribute.id, newValue, attribute)
+              }
+              onClick={(e) => e.stopPropagation()}
+            />
+          );
+        },
+      }),
+      columnHelper.accessor("possible_values", {
+        header: "Possible Values",
+        cell: (info) => {
+          const values = info.getValue();
+          if (!values || values.length === 0) {
+            return "-";
+          }
+
+          if (values.length <= 3) {
+            return (
+              <div className="flex flex-wrap gap-2">
+                {values.map((value) => (
+                  <Badge size="xsmall" key={value.id}>
+                    {value.value}
+                  </Badge>
+                ))}
+              </div>
+            );
+          }
+
+          const remainingCount = values.length - 2;
+          return (
+            <div className="flex flex-wrap gap-2">
+              {values.slice(0, 2).map((value) => (
+                <Badge size="xsmall" key={value.id}>
+                  {value.value}
+                </Badge>
+              ))}
+              <Badge size="xsmall" color="grey">
+                +{remainingCount}
+              </Badge>
+            </div>
+          );
+        },
+      }),
+	  columnHelper.display({
+        id: "actions",
+        header: "",
+        cell: (info) => {
+          const attribute = info.row.original;
+          return (
+            <div className="flex items-center justify-end">
+              <DropdownMenu>
+                <DropdownMenu.Trigger asChild>
+                  <IconButton variant="transparent" size="small">
+                    <EllipsisHorizontal />
+                  </IconButton>
+                </DropdownMenu.Trigger>
+                <DropdownMenu.Content align="end">
+                  <DropdownMenu.Item onClick={(e) => {
+                    e.stopPropagation()
+                    handleEdit(attribute.id)
+                  }}>
+                    <span className="flex items-center gap-2">
+                      <PencilSquare /> Edit
+					</span>
+                  </DropdownMenu.Item>
+                  <DropdownMenu.Item onClick={(e) => {
+                    e.stopPropagation(),
+                      handleDelete(attribute.id, attribute.name)
+                  }}>
+                    <span className="flex items-center gap-2">
+                      <Trash /> Delete
+                    </span>
+                  </DropdownMenu.Item>
+                </DropdownMenu.Content>
+              </DropdownMenu>
+            </div>
+          );
+        },
+      }),
+    ],
+    [navigate, queryClient, prompt, handleToggleFilterable, handleToggleGlobal]
+  );
+
+  return {
+    columns,
+    modal: (
+      <CategorySelectionModal
+        open={isCategoryModalOpen}
+        onOpenChange={setIsCategoryModalOpen}
+        onConfirm={handleCategorySelection}
+      />
+    )
+  };
+};

package/src/admin/layouts/single-column.tsx

@@ -0,0 +1,11 @@
+export type SingleColumnLayoutProps = {
+  children: React.ReactNode
+}
+
+export const SingleColumnLayout = ({ children }: SingleColumnLayoutProps) => {
+  return (
+    <div className="flex flex-col gap-y-3">
+      {children}
+    </div>
+  )
+} 

package/src/admin/lib/config.ts

@@ -0,0 +1,8 @@
+import Medusa from "@medusajs/js-sdk"
+
+export const medusaClient = new Medusa({
+  baseUrl: __BACKEND_URL__,
+  auth: {
+    type: 'session'
+  }
+})