@mercurjs/admin 2.1.2-canary.5 → 2.2.0-canary.1

package/dist/attribute-create-BYO7BDF5.js

@@ -0,0 +1,562 @@
+import {
+  ATTRIBUTE_TYPE_OPTIONS,
+  CreateAttributeSchema
+} from "./chunk-CYGIJOA5.js";
+import {
+  SortableList
+} from "./chunk-IIFQ7KYL.js";
+import {
+  HandleInput
+} from "./chunk-HJ56YXBU.js";
+import {
+  CategoryCombobox
+} from "./chunk-BHOZKBYY.js";
+import "./chunk-PYDRHQTY.js";
+import {
+  TabbedForm,
+  defineTabMeta,
+  useTabbedForm
+} from "./chunk-4LXBQTFN.js";
+import {
+  SwitchBox
+} from "./chunk-2EME4AWX.js";
+import "./chunk-TKGWSUEI.js";
+import "./chunk-U2ZFCAPX.js";
+import {
+  RouteFocusModal,
+  useRouteModal
+} from "./chunk-FWJLS7XD.js";
+import {
+  Form
+} from "./chunk-3QSRE5LS.js";
+import {
+  require_dist
+} from "./chunk-2MDGYHWN.js";
+import "./chunk-AXTQMIIK.js";
+import "./chunk-OH4AABUT.js";
+import "./chunk-AEMDNTW5.js";
+import "./chunk-LYD3C73Z.js";
+import "./chunk-FTAR3BDS.js";
+import "./chunk-46M463BR.js";
+import "./chunk-ZZ3XFIEM.js";
+import {
+  useCreateProductAttribute
+} from "./chunk-533GMKEG.js";
+import "./chunk-YFRC6GEN.js";
+import "./chunk-DAXXLQKB.js";
+import "./chunk-OHOWEMHO.js";
+import "./chunk-JPNPTILP.js";
+import "./chunk-GKGLVDDV.js";
+import "./chunk-N6SI4IIT.js";
+import "./chunk-WJJXUXSO.js";
+import "./chunk-LAPEZATU.js";
+import "./chunk-OSEIN4Y2.js";
+import "./chunk-XZZTC7E5.js";
+import "./chunk-ZN7LWXVC.js";
+import "./chunk-VYMODH6P.js";
+import "./chunk-LEG67A2R.js";
+import "./chunk-PRBE5CM3.js";
+import "./chunk-5TRY5IMZ.js";
+import "./chunk-EPHVGD5Z.js";
+import "./chunk-B3EEDC47.js";
+import "./chunk-A772RAKB.js";
+import "./chunk-ESPLVOFC.js";
+import "./chunk-FXWKGNRV.js";
+import "./chunk-VDKOJ5WD.js";
+import "./chunk-S5BJ5CMF.js";
+import "./chunk-H5PYBIOZ.js";
+import "./chunk-INNFZYX2.js";
+import "./chunk-2YYXP6XI.js";
+import "./chunk-RHKRREUU.js";
+import "./chunk-ZA2KFUFR.js";
+import "./chunk-ZBWL72TB.js";
+import {
+  __toESM
+} from "./chunk-NBMM2TZK.js";
+
+// src/pages/attributes/attribute-create/attribute-create.tsx
+import { Children as Children2 } from "react";
+import { useTranslation as useTranslation5 } from "react-i18next";
+
+// src/pages/attributes/attribute-create/components/attribute-create-form.tsx
+var import_types4 = __toESM(require_dist(), 1);
+import { Button as Button2, toast } from "@medusajs/ui";
+import { Children, useMemo } from "react";
+import { useForm } from "react-hook-form";
+import { useTranslation as useTranslation4 } from "react-i18next";
+import { zodResolver } from "@hookform/resolvers/zod";
+
+// src/pages/attributes/attribute-create/components/attribute-create-details-tab.tsx
+import { Heading, Input, Text, Textarea } from "@medusajs/ui";
+import { useTranslation } from "react-i18next";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Root = () => {
+  const { t } = useTranslation();
+  const form = useTabbedForm();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "flex flex-col items-center p-16",
+      "data-testid": "attribute-create-details-tab",
+      children: /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-8", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(Heading, { level: "h2", children: t("attributes.create.header") }),
+          /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle mt-1", children: t("attributes.create.subtitle") })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: [
+          /* @__PURE__ */ jsx(
+            Form.Field,
+            {
+              control: form.control,
+              name: "name",
+              render: ({ field }) => /* @__PURE__ */ jsxs(Form.Item, { children: [
+                /* @__PURE__ */ jsx(Form.Label, { children: t("attributes.fields.name") }),
+                /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(Input, { ...field, "data-testid": "attribute-create-name-input" }) }),
+                /* @__PURE__ */ jsx(Form.ErrorMessage, {})
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Form.Field,
+            {
+              control: form.control,
+              name: "handle",
+              render: ({ field }) => /* @__PURE__ */ jsxs(Form.Item, { children: [
+                /* @__PURE__ */ jsx(Form.Label, { optional: true, children: t("attributes.fields.handle") }),
+                /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(
+                  HandleInput,
+                  {
+                    ...field,
+                    "data-testid": "attribute-create-handle-input"
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(Form.ErrorMessage, {})
+              ] })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          Form.Field,
+          {
+            control: form.control,
+            name: "description",
+            render: ({ field }) => /* @__PURE__ */ jsxs(Form.Item, { children: [
+              /* @__PURE__ */ jsx(Form.Label, { optional: true, children: t("attributes.fields.description") }),
+              /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(
+                Textarea,
+                {
+                  ...field,
+                  "data-testid": "attribute-create-description-input"
+                }
+              ) }),
+              /* @__PURE__ */ jsx(Form.ErrorMessage, {})
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-4", children: [
+          /* @__PURE__ */ jsx(
+            SwitchBox,
+            {
+              control: form.control,
+              name: "is_required",
+              label: t("attributes.fields.isRequired", "Required attribute"),
+              description: t(
+                "attributes.fields.isRequiredHint",
+                "If checked, vendors must set a value for this attribute."
+              ),
+              "data-testid": "attribute-create-required-switch"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            SwitchBox,
+            {
+              control: form.control,
+              name: "is_filterable",
+              label: t("attributes.fields.isFilterable", "Filterable attribute"),
+              description: t(
+                "attributes.fields.isFilterableHint",
+                "If checked, buyers will be able to filter products using this attribute."
+              ),
+              "data-testid": "attribute-create-filterable-switch"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          Form.Field,
+          {
+            control: form.control,
+            name: "category_ids",
+            render: ({ field }) => /* @__PURE__ */ jsxs(Form.Item, { children: [
+              /* @__PURE__ */ jsx(Form.Label, { optional: true, children: t("attributes.fields.categories") }),
+              /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(
+                CategoryCombobox,
+                {
+                  value: field.value ?? [],
+                  onChange: field.onChange,
+                  "data-testid": "attribute-create-categories-combobox"
+                }
+              ) }),
+              /* @__PURE__ */ jsx(Form.ErrorMessage, {})
+            ] })
+          }
+        )
+      ] })
+    }
+  );
+};
+Root._tabMeta = defineTabMeta({
+  id: "details",
+  labelKey: "attributes.create.tabs.details",
+  validationFields: ["name"]
+});
+var AttributeCreateDetailsTab = Root;
+
+// src/pages/attributes/attribute-create/components/attribute-create-type-tab.tsx
+var import_types2 = __toESM(require_dist(), 1);
+import { Heading as Heading2, Select, Text as Text2 } from "@medusajs/ui";
+import { useWatch } from "react-hook-form";
+import { useTranslation as useTranslation3 } from "react-i18next";
+
+// src/pages/attributes/attribute-create/components/possible-values-list.tsx
+import { XMarkMini } from "@medusajs/icons";
+import { Button, Hint, IconButton, Input as Input2, Label } from "@medusajs/ui";
+import { useFieldArray, useFormContext } from "react-hook-form";
+import { useTranslation as useTranslation2 } from "react-i18next";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var PossibleValuesList = () => {
+  const { t } = useTranslation2();
+  const {
+    control,
+    register,
+    formState: { errors }
+  } = useFormContext();
+  const { fields, append, remove, move } = useFieldArray({
+    control,
+    name: "values"
+  });
+  const handleAddValue = (e) => {
+    e.preventDefault();
+    append({
+      name: "",
+      rank: fields.length,
+      metadata: {}
+    });
+  };
+  const handleRankChange = (items) => {
+    const oldOrder = fields.map((f) => f.id);
+    items.forEach((item, newIndex) => {
+      const oldIndex = oldOrder.indexOf(item.id);
+      if (oldIndex !== newIndex) {
+        move(oldIndex, newIndex);
+        oldOrder.splice(oldIndex, 1);
+        oldOrder.splice(newIndex, 0, item.id);
+      }
+    });
+  };
+  const valuesError = errors.values;
+  const shouldShowListError = valuesError && !Array.isArray(valuesError);
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: "flex flex-col gap-y-4",
+      "data-testid": "attribute-form-values-list",
+      children: [
+        /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            className: "flex items-start justify-between gap-x-4",
+            "data-testid": "attribute-form-values-header",
+            children: [
+              /* @__PURE__ */ jsxs2("div", { className: "flex flex-col", children: [
+                /* @__PURE__ */ jsx2(Label, { weight: "plus", "data-testid": "attribute-form-values-label", children: t("attributes.fields.values") }),
+                /* @__PURE__ */ jsx2(Hint, { children: t(
+                  "attributes.fields.valuesHint",
+                  "Add the possible values for this attribute."
+                ) })
+              ] }),
+              /* @__PURE__ */ jsx2(
+                Button,
+                {
+                  type: "button",
+                  variant: "secondary",
+                  size: "small",
+                  onClick: handleAddValue,
+                  "data-testid": "attribute-form-values-add-button",
+                  children: t("actions.add")
+                }
+              )
+            ]
+          }
+        ),
+        fields.length > 0 && /* @__PURE__ */ jsx2(
+          SortableList,
+          {
+            items: fields,
+            onChange: handleRankChange,
+            renderItem: (item, index) => {
+              const fieldError = Array.isArray(valuesError) ? valuesError[index]?.name : void 0;
+              return /* @__PURE__ */ jsxs2(
+                SortableList.Item,
+                {
+                  id: item.id,
+                  className: "bg-ui-bg-component shadow-elevation-card-rest mb-2 flex items-center gap-1.5 rounded-xl p-1.5 last:mb-0",
+                  children: [
+                    /* @__PURE__ */ jsx2(SortableList.DragHandle, {}),
+                    /* @__PURE__ */ jsxs2("div", { className: "flex-1", children: [
+                      /* @__PURE__ */ jsx2(
+                        Input2,
+                        {
+                          className: "bg-ui-bg-field-component hover:bg-ui-bg-field-component-hover",
+                          "aria-invalid": !!fieldError,
+                          placeholder: t(
+                            "attributes.createPossibleValues.enterValue"
+                          ),
+                          ...register(`values.${index}.name`),
+                          "data-testid": `attribute-form-value-input-${index}`
+                        }
+                      ),
+                      fieldError && /* @__PURE__ */ jsx2(
+                        Hint,
+                        {
+                          variant: "error",
+                          className: "mt-1",
+                          "data-testid": `attribute-form-value-error-${index}`,
+                          children: fieldError.message
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsx2(
+                      IconButton,
+                      {
+                        variant: "transparent",
+                        size: "small",
+                        type: "button",
+                        className: "text-ui-fg-muted",
+                        onClick: () => remove(index),
+                        "data-testid": `attribute-form-value-remove-button-${index}`,
+                        children: /* @__PURE__ */ jsx2(XMarkMini, {})
+                      }
+                    )
+                  ]
+                }
+              );
+            }
+          }
+        ),
+        shouldShowListError && /* @__PURE__ */ jsx2(
+          Hint,
+          {
+            variant: "error",
+            "data-testid": "attribute-form-values-list-error",
+            children: valuesError.message
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/pages/attributes/attribute-create/components/attribute-create-type-tab.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var ATTRIBUTE_TYPE_LABELS = {
+  [import_types2.AttributeType.SINGLE_SELECT]: "attributes.type.select",
+  [import_types2.AttributeType.MULTI_SELECT]: "attributes.type.multivalue",
+  [import_types2.AttributeType.UNIT]: "attributes.type.unit",
+  [import_types2.AttributeType.TOGGLE]: "attributes.type.toggle",
+  [import_types2.AttributeType.TEXT]: "attributes.type.text_area"
+};
+var Root2 = () => {
+  const { t } = useTranslation3();
+  const form = useTabbedForm();
+  const type = useWatch({ control: form.control, name: "type" });
+  const showValues = type === import_types2.AttributeType.SINGLE_SELECT || type === import_types2.AttributeType.MULTI_SELECT;
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className: "flex flex-col items-center p-16",
+      "data-testid": "attribute-create-type-tab",
+      children: /* @__PURE__ */ jsxs3("div", { className: "flex w-full max-w-[720px] flex-col gap-y-8", children: [
+        /* @__PURE__ */ jsxs3("div", { children: [
+          /* @__PURE__ */ jsx3(Heading2, { level: "h2", children: t("attributes.fields.type") }),
+          /* @__PURE__ */ jsx3(Text2, { size: "small", className: "text-ui-fg-subtle mt-1", children: t(
+            "attributes.create.typeDescription",
+            "Select the type of this attribute and define its values."
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx3(
+          Form.Field,
+          {
+            control: form.control,
+            name: "type",
+            render: ({ field }) => /* @__PURE__ */ jsxs3(Form.Item, { "data-testid": "attribute-create-type-field", children: [
+              /* @__PURE__ */ jsx3(Form.Label, { children: t("attributes.fields.type") }),
+              /* @__PURE__ */ jsx3(Form.Control, { children: /* @__PURE__ */ jsxs3(
+                Select,
+                {
+                  value: field.value,
+                  onValueChange: field.onChange,
+                  "data-testid": "attribute-create-type-select",
+                  children: [
+                    /* @__PURE__ */ jsx3(Select.Trigger, { "data-testid": "attribute-create-type-trigger", children: /* @__PURE__ */ jsx3(
+                      Select.Value,
+                      {
+                        placeholder: t(
+                          "attributes.fields.typePlaceholder",
+                          "Select Type"
+                        )
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx3(Select.Content, { children: ATTRIBUTE_TYPE_OPTIONS.map((option) => /* @__PURE__ */ jsx3(
+                      Select.Item,
+                      {
+                        value: option,
+                        "data-testid": `attribute-create-type-option-${option}`,
+                        children: t(ATTRIBUTE_TYPE_LABELS[option] ?? option)
+                      },
+                      option
+                    )) })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsx3(Form.ErrorMessage, {})
+            ] })
+          }
+        ),
+        showValues && /* @__PURE__ */ jsx3("div", { "data-testid": "attribute-create-values-section", children: /* @__PURE__ */ jsx3(PossibleValuesList, {}) }),
+        type === import_types2.AttributeType.MULTI_SELECT && /* @__PURE__ */ jsx3(
+          SwitchBox,
+          {
+            control: form.control,
+            name: "is_variant_axis",
+            label: t("attributes.fields.isVariantAxis", "Use for Variants"),
+            description: t(
+              "attributes.fields.isVariantAxisHint",
+              "If checked, this attribute can be used to create product variants."
+            ),
+            "data-testid": "attribute-create-variant-axis-switch"
+          }
+        )
+      ] })
+    }
+  );
+};
+Root2._tabMeta = defineTabMeta({
+  id: "type",
+  labelKey: "attributes.create.tabs.type",
+  validationFields: ["type", "values"]
+});
+var AttributeCreateTypeTab = Root2;
+
+// src/pages/attributes/attribute-create/components/attribute-create-form.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var AttributeCreateForm = ({ children }) => {
+  const { t } = useTranslation4();
+  const { handleSuccess } = useRouteModal();
+  const form = useForm({
+    defaultValues: {
+      name: "",
+      description: "",
+      handle: "",
+      type: import_types4.AttributeType.SINGLE_SELECT,
+      is_filterable: false,
+      is_required: false,
+      is_variant_axis: false,
+      values: [],
+      category_ids: [],
+      metadata: {}
+    },
+    resolver: zodResolver(CreateAttributeSchema)
+  });
+  const { mutateAsync, isPending } = useCreateProductAttribute();
+  const handleSubmit = form.handleSubmit(async (values) => {
+    await mutateAsync(
+      {
+        ...values,
+        handle: values.handle ? values.handle : void 0
+      },
+      {
+        onSuccess: () => {
+          toast.success(
+            t("attributes.create.successToast", { name: values.name })
+          );
+          handleSuccess("/settings/attributes");
+        },
+        onError: (error) => {
+          toast.error(error.message);
+        }
+      }
+    );
+  });
+  const defaultTabs = useMemo(
+    () => [
+      /* @__PURE__ */ jsx4(AttributeCreateDetailsTab, {}, "details"),
+      /* @__PURE__ */ jsx4(AttributeCreateTypeTab, {}, "type")
+    ],
+    []
+  );
+  const hasCustomChildren = Children.count(children) > 0;
+  return /* @__PURE__ */ jsx4(
+    TabbedForm,
+    {
+      form,
+      onSubmit: handleSubmit,
+      isLoading: isPending,
+      footer: ({ isLastTab, onNext, isLoading }) => /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-end gap-x-2", children: [
+        /* @__PURE__ */ jsx4(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx4(
+          Button2,
+          {
+            variant: "secondary",
+            size: "small",
+            "data-testid": "attribute-create-cancel-button",
+            children: t("actions.cancel")
+          }
+        ) }),
+        isLastTab ? /* @__PURE__ */ jsx4(
+          Button2,
+          {
+            type: "submit",
+            variant: "primary",
+            size: "small",
+            isLoading,
+            "data-testid": "attribute-create-save-button",
+            children: t("actions.save")
+          },
+          "submit-button"
+        ) : /* @__PURE__ */ jsx4(
+          Button2,
+          {
+            type: "button",
+            variant: "primary",
+            size: "small",
+            onClick: () => onNext(),
+            "data-testid": "attribute-create-continue-button",
+            children: t("actions.continue")
+          },
+          "next-button"
+        )
+      ] }),
+      children: hasCustomChildren ? children : defaultTabs
+    }
+  );
+};
+
+// src/pages/attributes/attribute-create/attribute-create.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var Root3 = ({ children }) => {
+  const { t } = useTranslation5();
+  return /* @__PURE__ */ jsxs5(RouteFocusModal, { "data-testid": "attribute-create-modal", children: [
+    /* @__PURE__ */ jsx5(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx5("span", { className: "sr-only", children: t("attributes.create.header") }) }),
+    /* @__PURE__ */ jsx5(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx5("span", { className: "sr-only", children: t("attributes.create.subtitle") }) }),
+    Children2.count(children) > 0 ? children : /* @__PURE__ */ jsx5(AttributeCreateForm, {})
+  ] });
+};
+var AttributeCreate = Root3;
+var AttributeCreatePage = Object.assign(Root3, {
+  Form: AttributeCreateForm,
+  DetailsTab: AttributeCreateDetailsTab,
+  TypeTab: AttributeCreateTypeTab,
+  Tab: TabbedForm.Tab
+});
+export {
+  AttributeCreate as Component
+};