@medusajs/draft-order 0.0.1

package/.medusa/server/src/admin/components/common/action-menu.js

@@ -0,0 +1,77 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { DropdownMenu, clx, IconButton } from "@medusajs/ui";
+import { EllipsisHorizontal } from "@medusajs/icons";
+import { Link } from "react-router-dom";
+import { ConditionalTooltip } from "./conditional-tooltip.js";
+const ActionMenu = ({
+  groups,
+  variant = "transparent",
+  children
+}) => {
+  const inner = children ?? /* @__PURE__ */ jsx(IconButton, { size: "small", variant, children: /* @__PURE__ */ jsx(EllipsisHorizontal, {}) });
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: inner }),
+    /* @__PURE__ */ jsx(DropdownMenu.Content, { children: groups.map((group, index) => {
+      if (!group.actions.length) {
+        return null;
+      }
+      const isLast = index === groups.length - 1;
+      return /* @__PURE__ */ jsxs(DropdownMenu.Group, { children: [
+        group.actions.map((action, index2) => {
+          const Wrapper = action.disabledTooltip ? ({ children: children2 }) => /* @__PURE__ */ jsx(
+            ConditionalTooltip,
+            {
+              showTooltip: action.disabled,
+              content: action.disabledTooltip,
+              side: "right",
+              children: /* @__PURE__ */ jsx("div", { children: children2 })
+            }
+          ) : "div";
+          if (action.onClick) {
+            return /* @__PURE__ */ jsx(Wrapper, { children: /* @__PURE__ */ jsxs(
+              DropdownMenu.Item,
+              {
+                disabled: action.disabled,
+                onClick: (e) => {
+                  e.stopPropagation();
+                  action.onClick();
+                },
+                className: clx(
+                  "[&_svg]:text-ui-fg-subtle flex items-center gap-x-2",
+                  {
+                    "[&_svg]:text-ui-fg-disabled": action.disabled
+                  }
+                ),
+                children: [
+                  action.icon,
+                  /* @__PURE__ */ jsx("span", { children: action.label })
+                ]
+              }
+            ) }, index2);
+          }
+          return /* @__PURE__ */ jsx(Wrapper, { children: /* @__PURE__ */ jsx(
+            DropdownMenu.Item,
+            {
+              className: clx(
+                "[&_svg]:text-ui-fg-subtle flex items-center gap-x-2",
+                {
+                  "[&_svg]:text-ui-fg-disabled": action.disabled
+                }
+              ),
+              asChild: true,
+              disabled: action.disabled,
+              children: /* @__PURE__ */ jsxs(Link, { to: action.to, onClick: (e) => e.stopPropagation(), children: [
+                action.icon,
+                /* @__PURE__ */ jsx("span", { children: action.label })
+              ] })
+            }
+          ) }, index2);
+        }),
+        !isLast && /* @__PURE__ */ jsx(DropdownMenu.Separator, {})
+      ] }, index);
+    }) })
+  ] });
+};
+export {
+  ActionMenu
+};

package/.medusa/server/src/admin/components/common/conditional-tooltip.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import { Tooltip } from "@medusajs/ui";
+const ConditionalTooltip = ({
+  children,
+  showTooltip = false,
+  ...props
+}) => {
+  if (showTooltip) {
+    return /* @__PURE__ */ jsx(Tooltip, { ...props, children });
+  }
+  return children;
+};
+export {
+  ConditionalTooltip
+};

package/.medusa/server/src/admin/components/common/data-table.js

@@ -0,0 +1,249 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useDataTable, DataTable as DataTable$1, clx, Heading, Text, Button } from "@medusajs/ui";
+import { useState, useCallback } from "react";
+import { useSearchParams, useNavigate, Link } from "react-router-dom";
+import { useQueryParams } from "../../hooks/common/use-query-params.js";
+import { ActionMenu } from "./action-menu.js";
+const DataTable = ({
+  data = [],
+  columns,
+  filters,
+  commands,
+  action,
+  actionMenu,
+  getRowId,
+  rowCount = 0,
+  enablePagination = true,
+  enableSearch = true,
+  autoFocusSearch = false,
+  rowHref,
+  heading,
+  subHeading,
+  prefix,
+  pageSize = 10,
+  emptyState,
+  rowSelection,
+  isLoading = false,
+  layout = "auto"
+}) => {
+  const enableFiltering = filters && filters.length > 0;
+  const enableCommands = commands && commands.length > 0;
+  const enableSorting = columns.some((column) => column.enableSorting);
+  const filterIds = (filters == null ? void 0 : filters.map((f) => f.id)) ?? [];
+  const prefixedFilterIds = filterIds.map((id) => getQueryParamKey(id, prefix));
+  const { offset, order, q, ...filterParams } = useQueryParams(
+    [
+      ...filterIds,
+      ...enableSorting ? ["order"] : [],
+      ...enableSearch ? ["q"] : [],
+      ...enablePagination ? ["offset"] : []
+    ],
+    prefix
+  );
+  const [_, setSearchParams] = useSearchParams();
+  const [search, setSearch] = useState(q ?? "");
+  const handleSearchChange = (value) => {
+    setSearch(value);
+    setSearchParams((prev) => {
+      if (value) {
+        prev.set(getQueryParamKey("q", prefix), value);
+      } else {
+        prev.delete(getQueryParamKey("q", prefix));
+      }
+      return prev;
+    });
+  };
+  const [pagination, setPagination] = useState(
+    offset ? parsePaginationState(offset, pageSize) : { pageIndex: 0, pageSize }
+  );
+  const handlePaginationChange = (value) => {
+    setPagination(value);
+    setSearchParams((prev) => {
+      if (value.pageIndex === 0) {
+        prev.delete(getQueryParamKey("offset", prefix));
+      } else {
+        prev.set(
+          getQueryParamKey("offset", prefix),
+          transformPaginationState(value).toString()
+        );
+      }
+      return prev;
+    });
+  };
+  const [filtering, setFiltering] = useState(
+    parseFilterState(filterIds, filterParams)
+  );
+  const handleFilteringChange = (value) => {
+    setFiltering(value);
+    setSearchParams((prev) => {
+      Array.from(prev.keys()).forEach((key) => {
+        if (prefixedFilterIds.includes(key) && !(key in value)) {
+          prev.delete(key);
+        }
+      });
+      Object.entries(value).forEach(([key, filter]) => {
+        if (prefixedFilterIds.includes(getQueryParamKey(key, prefix)) && filter) {
+          prev.set(getQueryParamKey(key, prefix), JSON.stringify(filter));
+        }
+      });
+      return prev;
+    });
+  };
+  const [sorting, setSorting] = useState(
+    order ? parseSortingState(order) : null
+  );
+  const handleSortingChange = (value) => {
+    setSorting(value);
+    setSearchParams((prev) => {
+      if (value) {
+        const valueToStore = transformSortingState(value);
+        prev.set(getQueryParamKey("order", prefix), valueToStore);
+      } else {
+        prev.delete(getQueryParamKey("order", prefix));
+      }
+      return prev;
+    });
+  };
+  const navigate = useNavigate();
+  const onRowClick = useCallback(
+    (event, row) => {
+      if (!rowHref) {
+        return;
+      }
+      const href = rowHref(row);
+      if (event.metaKey || event.ctrlKey || event.button === 1) {
+        window.open(href, "_blank", "noreferrer");
+        return;
+      }
+      if (event.shiftKey) {
+        window.open(href, void 0, "noreferrer");
+        return;
+      }
+      navigate(href);
+    },
+    [navigate, rowHref]
+  );
+  const instance = useDataTable({
+    data,
+    columns,
+    filters,
+    commands,
+    rowCount,
+    getRowId,
+    onRowClick: rowHref ? onRowClick : void 0,
+    pagination: enablePagination ? {
+      state: pagination,
+      onPaginationChange: handlePaginationChange
+    } : void 0,
+    filtering: enableFiltering ? {
+      state: filtering,
+      onFilteringChange: handleFilteringChange
+    } : void 0,
+    sorting: enableSorting ? {
+      state: sorting,
+      onSortingChange: handleSortingChange
+    } : void 0,
+    search: enableSearch ? {
+      state: search,
+      onSearchChange: handleSearchChange
+    } : void 0,
+    rowSelection,
+    isLoading
+  });
+  const shouldRenderHeading = heading || subHeading;
+  return /* @__PURE__ */ jsxs(
+    DataTable$1,
+    {
+      instance,
+      className: clx({
+        "h-full [&_tr]:last-of-type:!border-b": layout === "fill"
+      }),
+      children: [
+        /* @__PURE__ */ jsxs(DataTable$1.Toolbar, { className: "flex flex-col items-start justify-between gap-2 md:flex-row md:items-center", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between gap-2", children: [
+            shouldRenderHeading && /* @__PURE__ */ jsxs("div", { children: [
+              heading && /* @__PURE__ */ jsx(Heading, { children: heading }),
+              subHeading && /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: subHeading })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2 md:hidden", children: [
+              enableFiltering && /* @__PURE__ */ jsx(DataTable$1.FilterMenu, { tooltip: "Filter" }),
+              /* @__PURE__ */ jsx(DataTable$1.SortingMenu, { tooltip: "Sort" }),
+              actionMenu && /* @__PURE__ */ jsx(ActionMenu, { variant: "primary", ...actionMenu }),
+              action && /* @__PURE__ */ jsx(DataTableAction, { ...action })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-2 md:justify-end", children: [
+            enableSearch && /* @__PURE__ */ jsx("div", { className: "w-full md:w-auto", children: /* @__PURE__ */ jsx(
+              DataTable$1.Search,
+              {
+                "data-modal-id": "modal-search-input",
+                placeholder: "Search",
+                autoFocus: autoFocusSearch
+              }
+            ) }),
+            /* @__PURE__ */ jsxs("div", { className: "hidden items-center gap-x-2 md:flex", children: [
+              enableFiltering && /* @__PURE__ */ jsx(DataTable$1.FilterMenu, { tooltip: "Filter" }),
+              /* @__PURE__ */ jsx(DataTable$1.SortingMenu, { tooltip: "Sort" }),
+              actionMenu && /* @__PURE__ */ jsx(ActionMenu, { variant: "primary", ...actionMenu }),
+              action && /* @__PURE__ */ jsx(DataTableAction, { ...action })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(DataTable$1.Table, { emptyState }),
+        enablePagination && /* @__PURE__ */ jsx(DataTable$1.Pagination, {}),
+        enableCommands && /* @__PURE__ */ jsx(DataTable$1.CommandBar, { selectedLabel: (count) => `${count} selected` })
+      ]
+    }
+  );
+};
+function transformSortingState(value) {
+  return value.desc ? `-${value.id}` : value.id;
+}
+function parseSortingState(value) {
+  return value.startsWith("-") ? { id: value.slice(1), desc: true } : { id: value, desc: false };
+}
+function transformPaginationState(value) {
+  return value.pageIndex * value.pageSize;
+}
+function parsePaginationState(value, pageSize) {
+  const offset = parseInt(value);
+  return {
+    pageIndex: Math.floor(offset / pageSize),
+    pageSize
+  };
+}
+function parseFilterState(filterIds, value) {
+  if (!value) {
+    return {};
+  }
+  const filters = {};
+  for (const id of filterIds) {
+    const filterValue = value[id];
+    if (filterValue) {
+      filters[id] = JSON.parse(filterValue);
+    }
+  }
+  return filters;
+}
+function getQueryParamKey(key, prefix) {
+  return prefix ? `${prefix}_${key}` : key;
+}
+const DataTableAction = ({
+  label,
+  disabled,
+  ...props
+}) => {
+  const buttonProps = {
+    size: "small",
+    disabled: disabled ?? false,
+    type: "button",
+    variant: "secondary"
+  };
+  if ("to" in props) {
+    return /* @__PURE__ */ jsx(Button, { ...buttonProps, asChild: true, children: /* @__PURE__ */ jsx(Link, { to: props.to, children: label }) });
+  }
+  return /* @__PURE__ */ jsx(Button, { ...buttonProps, onClick: props.onClick, children: label });
+};
+export {
+  DataTable
+};

package/.medusa/server/src/admin/components/common/form.js

@@ -0,0 +1,151 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { InformationCircleSolid } from "@medusajs/icons";
+import { clx, Label as Label$1, Tooltip, Text, Hint as Hint$1 } from "@medusajs/ui";
+import { Slot } from "radix-ui";
+import { createContext, forwardRef, useId, useContext } from "react";
+import { FormProvider, Controller, useFormContext, useFormState } from "react-hook-form";
+const Provider = FormProvider;
+const FormFieldContext = createContext(
+  {}
+);
+const Field = ({
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
+};
+const FormItemContext = createContext(
+  {}
+);
+const useFormField = () => {
+  const fieldContext = useContext(FormFieldContext);
+  const itemContext = useContext(FormItemContext);
+  const { getFieldState } = useFormContext();
+  const formState = useFormState({ name: fieldContext.name });
+  const fieldState = getFieldState(fieldContext.name, formState);
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within a FormField");
+  }
+  const { id } = itemContext;
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formLabelId: `${id}-form-item-label`,
+    formDescriptionId: `${id}-form-item-description`,
+    formErrorMessageId: `${id}-form-item-message`,
+    ...fieldState
+  };
+};
+const Item = forwardRef(
+  ({ className, ...props }, ref) => {
+    const id = useId();
+    return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: clx("flex flex-col space-y-2", className),
+        ...props
+      }
+    ) });
+  }
+);
+Item.displayName = "Form.Item";
+const Label = forwardRef(
+  ({
+    className,
+    optional = false,
+    tooltip,
+    icon,
+    variant = "default",
+    ...props
+  }, ref) => {
+    const { formLabelId, formItemId } = useFormField();
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-1", children: [
+      /* @__PURE__ */ jsx(
+        Label$1,
+        {
+          id: formLabelId,
+          ref,
+          className: clx(
+            {
+              "text-ui-fg-subtle": variant === "subtle"
+            },
+            className
+          ),
+          htmlFor: formItemId,
+          size: "small",
+          weight: variant === "default" ? "plus" : "regular",
+          ...props
+        }
+      ),
+      tooltip && /* @__PURE__ */ jsx(Tooltip, { content: tooltip, children: /* @__PURE__ */ jsx(InformationCircleSolid, { className: "text-ui-fg-muted" }) }),
+      icon,
+      optional && /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", className: "text-ui-fg-muted", children: "(Optional)" })
+    ] });
+  }
+);
+Label.displayName = "Form.Label";
+const Control = forwardRef(({ ...props }, ref) => {
+  const {
+    error,
+    formItemId,
+    formDescriptionId,
+    formErrorMessageId,
+    formLabelId
+  } = useFormField();
+  return /* @__PURE__ */ jsx(
+    Slot.Root,
+    {
+      ref,
+      id: formItemId,
+      "aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formErrorMessageId}`,
+      "aria-invalid": !!error,
+      "aria-labelledby": formLabelId,
+      ...props
+    }
+  );
+});
+Control.displayName = "Form.Control";
+const Hint = forwardRef(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    Hint$1,
+    {
+      ref,
+      id: formDescriptionId,
+      className,
+      ...props
+    }
+  );
+});
+Hint.displayName = "Form.Hint";
+const ErrorMessage = forwardRef(({ className, children, ...props }, ref) => {
+  const { error, formErrorMessageId } = useFormField();
+  const msg = error ? String(error == null ? void 0 : error.message) : children;
+  if (!msg || msg === "undefined") {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    Hint$1,
+    {
+      ref,
+      id: formErrorMessageId,
+      className,
+      variant: error ? "error" : "info",
+      ...props,
+      children: msg
+    }
+  );
+});
+ErrorMessage.displayName = "Form.ErrorMessage";
+const Form = Object.assign(Provider, {
+  Item,
+  Label,
+  Control,
+  Hint,
+  ErrorMessage,
+  Field
+});
+export {
+  Form
+};

package/.medusa/server/src/admin/components/common/inline-tip.js

@@ -0,0 +1,42 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { clx } from "@medusajs/ui";
+import { forwardRef } from "react";
+const InlineTip = forwardRef(
+  ({ variant = "tip", label, className, children, ...props }, ref) => {
+    const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: clx(
+          "bg-ui-bg-component txt-small text-ui-fg-subtle grid grid-cols-[4px_1fr] items-start gap-3 rounded-lg border p-3",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "presentation",
+              className: clx("w-4px bg-ui-tag-neutral-icon h-full rounded-full", {
+                "bg-ui-tag-orange-icon": variant === "warning"
+              })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "text-pretty", children: [
+            /* @__PURE__ */ jsxs("strong", { className: "txt-small-plus text-ui-fg-base", children: [
+              labelValue,
+              ":"
+            ] }),
+            " ",
+            children
+          ] })
+        ]
+      }
+    );
+  }
+);
+InlineTip.displayName = "InlineTip";
+export {
+  InlineTip
+};

package/.medusa/server/src/admin/components/common/keybound-form.js

@@ -0,0 +1,32 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+const KeyboundForm = React.forwardRef(({ onSubmit, onKeyDown, ...rest }, ref) => {
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    onSubmit == null ? void 0 : onSubmit(event);
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter") {
+      if (event.target instanceof HTMLTextAreaElement && !(event.metaKey || event.ctrlKey)) {
+        return;
+      }
+      event.preventDefault();
+      if (event.metaKey || event.ctrlKey) {
+        handleSubmit(event);
+      }
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "form",
+    {
+      ...rest,
+      onSubmit: handleSubmit,
+      onKeyDown: onKeyDown ?? handleKeyDown,
+      ref
+    }
+  );
+});
+KeyboundForm.displayName = "KeyboundForm";
+export {
+  KeyboundForm
+};

package/.medusa/server/src/admin/components/common/page-skeleton.js

@@ -0,0 +1,51 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Skeleton, clx } from "@medusajs/ui";
+const PageSkeleton = ({
+  mainSections = 2,
+  sidebarSections = 1,
+  showJSON = false,
+  showMetadata = true
+}) => {
+  const showExtraData = showJSON || showMetadata;
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-3", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-x-4 gap-y-3 xl:flex-row xl:items-start", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-y-3", children: [
+      Array.from({ length: mainSections }, (_, i) => i).map((section) => {
+        return /* @__PURE__ */ jsx(
+          Skeleton,
+          {
+            className: clx("h-full max-h-[460px] w-full rounded-lg", {
+              "max-h-[219px]": section === 0
+            })
+          },
+          section
+        );
+      }),
+      showExtraData && /* @__PURE__ */ jsxs("div", { className: "hidden flex-col gap-y-3 xl:flex", children: [
+        showMetadata && /* @__PURE__ */ jsx(Skeleton, { className: "h-[60px] w-full rounded-lg" }),
+        showJSON && /* @__PURE__ */ jsx(Skeleton, { className: "h-[60px] w-full rounded-lg" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-[100%] flex-col gap-y-3 xl:mt-0 xl:max-w-[440px]", children: [
+      Array.from({ length: sidebarSections }, (_, i) => i).map(
+        (section) => {
+          return /* @__PURE__ */ jsx(
+            Skeleton,
+            {
+              className: clx("h-full max-h-[320px] w-full rounded-lg", {
+                "max-h-[140px]": section === 0
+              })
+            },
+            section
+          );
+        }
+      ),
+      showExtraData && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-3 xl:hidden", children: [
+        showMetadata && /* @__PURE__ */ jsx(Skeleton, { className: "h-[60px] w-full rounded-lg" }),
+        showJSON && /* @__PURE__ */ jsx(Skeleton, { className: "h-[60px] w-full rounded-lg" })
+      ] })
+    ] })
+  ] }) });
+};
+export {
+  PageSkeleton
+};

package/.medusa/server/src/admin/components/common/thumbnail.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import { Photo } from "@medusajs/icons";
+const Thumbnail = ({ thumbnail, alt = "" }) => {
+  return /* @__PURE__ */ jsx("div", { className: "relative w-6 h-8 rounded overflow-hidden flex items-center justify-center bg-ui-bg-component", children: thumbnail ? /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: thumbnail,
+      className: "w-full h-full object-cover",
+      alt: alt ?? void 0
+    }
+  ) : /* @__PURE__ */ jsx(Photo, {}) });
+};
+export {
+  Thumbnail
+};