@mercurjs/admin 2.0.0-canary.100

package/dist/chunk-WEVK4TBV.js

@@ -0,0 +1,257 @@
+import {
+  useCountries,
+  useCountryTableColumns,
+  useCountryTableQuery
+} from "./chunk-TUJIAA5O.js";
+import {
+  GEO_ZONE_STACKED_MODAL_ID
+} from "./chunk-LXSBG6LK.js";
+import {
+  countries
+} from "./chunk-JRTZWK77.js";
+import {
+  _DataTable,
+  useDataTable
+} from "./chunk-ULJ3OMWU.js";
+import {
+  ChipGroup
+} from "./chunk-IGTRIAUC.js";
+import {
+  StackedFocusModal,
+  useStackedModal
+} from "./chunk-V6LO4BXB.js";
+import {
+  Form
+} from "./chunk-3QSRE5LS.js";
+
+// src/pages/locations/common/components/geo-zone-form/geo-zone-form.tsx
+import { Button, Checkbox } from "@medusajs/ui";
+import {
+  createColumnHelper
+} from "@tanstack/react-table";
+import { useEffect, useMemo, useState } from "react";
+import { useFieldArray } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { z } from "zod";
+import { jsx, jsxs } from "react/jsx-runtime";
+var GeoZoneSchema = z.object({
+  countries: z.array(
+    z.object({ iso_2: z.string().min(2), display_name: z.string() })
+  )
+});
+var GeoZoneFormImpl = ({
+  form
+}) => {
+  const castForm = form;
+  const { t } = useTranslation();
+  const { fields, remove, replace } = useFieldArray({
+    control: castForm.control,
+    name: "countries",
+    keyName: "iso_2"
+  });
+  const handleClearAll = () => {
+    replace([]);
+  };
+  validateForm(form);
+  return /* @__PURE__ */ jsx(
+    Form.Field,
+    {
+      control: form.control,
+      name: "countries",
+      render: () => {
+        return /* @__PURE__ */ jsxs(Form.Item, { children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-x-4", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx(Form.Label, { children: t("stockLocations.serviceZones.manageAreas.label") }),
+              /* @__PURE__ */ jsx(Form.Hint, { children: t("stockLocations.serviceZones.manageAreas.hint") })
+            ] }),
+            /* @__PURE__ */ jsx(StackedFocusModal.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: t("stockLocations.serviceZones.manageAreas.action") }) })
+          ] }),
+          /* @__PURE__ */ jsx(Form.ErrorMessage, {}),
+          /* @__PURE__ */ jsx(Form.Control, { className: "mt-0", children: fields.length > 0 && /* @__PURE__ */ jsx(
+            ChipGroup,
+            {
+              onClearAll: handleClearAll,
+              onRemove: remove,
+              className: "py-4",
+              children: fields.map((field, index) => /* @__PURE__ */ jsx(ChipGroup.Chip, { index, children: field.display_name }, field.iso_2))
+            }
+          ) })
+        ] });
+      }
+    }
+  );
+};
+var PREFIX = "ac";
+var PAGE_SIZE = 50;
+var AreaStackedModal = ({
+  form
+}) => {
+  const castForm = form;
+  const { t } = useTranslation();
+  const { getValues, setValue } = castForm;
+  const { setIsOpen, getIsOpen } = useStackedModal();
+  const open = getIsOpen(GEO_ZONE_STACKED_MODAL_ID);
+  const [selection, setSelection] = useState({});
+  const [state, setState] = useState(
+    []
+  );
+  const { searchParams, raw } = useCountryTableQuery({
+    pageSize: PAGE_SIZE,
+    prefix: PREFIX
+  });
+  const { countries: countries2, count } = useCountries({
+    countries: countries.map((c) => ({
+      display_name: c.display_name,
+      name: c.name,
+      iso_2: c.iso_2,
+      iso_3: c.iso_3,
+      num_code: c.num_code
+    })),
+    ...searchParams
+  });
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const countries3 = getValues("countries");
+    if (countries3) {
+      setState(
+        countries3.map((country) => ({
+          iso_2: country.iso_2,
+          display_name: country.display_name
+        }))
+      );
+      setSelection(
+        countries3.reduce(
+          (acc, country) => ({
+            ...acc,
+            [country.iso_2]: true
+          }),
+          {}
+        )
+      );
+    }
+  }, [open, getValues]);
+  const updater = (fn) => {
+    const value = typeof fn === "function" ? fn(selection) : fn;
+    const ids = Object.keys(value);
+    const addedIdsSet = new Set(ids.filter((id) => value[id] && !selection[id]));
+    const addedCountries = [];
+    if (addedIdsSet.size > 0) {
+      const countriesToAdd = countries2?.filter((country) => addedIdsSet.has(country.iso_2)) ?? [];
+      for (const country of countriesToAdd) {
+        addedCountries.push({
+          iso_2: country.iso_2,
+          display_name: country.display_name
+        });
+      }
+    }
+    setState((prev) => {
+      const filteredPrev = prev.filter((country) => value[country.iso_2]);
+      return Array.from(/* @__PURE__ */ new Set([...filteredPrev, ...addedCountries]));
+    });
+    setSelection(value);
+  };
+  const handleAdd = () => {
+    setValue("countries", state, {
+      shouldDirty: true,
+      shouldTouch: true
+    });
+    setIsOpen(GEO_ZONE_STACKED_MODAL_ID, false);
+  };
+  const columns = useColumns();
+  const { table } = useDataTable({
+    data: countries2 || [],
+    columns,
+    count,
+    enablePagination: true,
+    enableRowSelection: true,
+    getRowId: (row) => row.iso_2,
+    pageSize: PAGE_SIZE,
+    rowSelection: {
+      state: selection,
+      updater
+    },
+    prefix: PREFIX
+  });
+  validateForm(form);
+  return /* @__PURE__ */ jsxs(StackedFocusModal.Content, { className: "flex flex-col overflow-hidden", children: [
+    /* @__PURE__ */ jsxs(StackedFocusModal.Header, { children: [
+      /* @__PURE__ */ jsx(StackedFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("stockLocations.serviceZones.manageAreas.label") }) }),
+      /* @__PURE__ */ jsx(StackedFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("stockLocations.serviceZones.manageAreas.hint") }) })
+    ] }),
+    /* @__PURE__ */ jsx(StackedFocusModal.Body, { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(
+      _DataTable,
+      {
+        table,
+        columns,
+        pageSize: PAGE_SIZE,
+        count,
+        search: true,
+        pagination: true,
+        layout: "fill",
+        orderBy: [
+          { key: "display_name", label: t("fields.name") },
+          { key: "iso_2", label: t("fields.code") }
+        ],
+        queryObject: raw,
+        prefix: PREFIX
+      }
+    ) }),
+    /* @__PURE__ */ jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
+      /* @__PURE__ */ jsx(StackedFocusModal.Close, { type: "button", asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "small", children: t("actions.cancel") }) }),
+      /* @__PURE__ */ jsx(Button, { size: "small", type: "button", onClick: handleAdd, children: t("actions.save") })
+    ] }) })
+  ] });
+};
+var columnHelper = createColumnHelper();
+var useColumns = () => {
+  const base = useCountryTableColumns();
+  return useMemo(
+    () => [
+      columnHelper.display({
+        id: "select",
+        header: ({ table }) => {
+          return /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              checked: table.getIsSomePageRowsSelected() ? "indeterminate" : table.getIsAllPageRowsSelected(),
+              onCheckedChange: (value) => table.toggleAllPageRowsSelected(!!value)
+            }
+          );
+        },
+        cell: ({ row }) => {
+          const isPreselected = !row.getCanSelect();
+          return /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              checked: row.getIsSelected() || isPreselected,
+              disabled: isPreselected,
+              onCheckedChange: (value) => row.toggleSelected(!!value),
+              onClick: (e) => {
+                e.stopPropagation();
+              }
+            }
+          );
+        }
+      }),
+      ...base
+    ],
+    [base]
+  );
+};
+function validateForm(form) {
+  if (form.getValues("countries") === void 0) {
+    throw new Error(
+      "The form does not have a field named 'countries'. This field is required to use the GeoZoneForm component."
+    );
+  }
+}
+var GeoZoneForm = Object.assign(GeoZoneFormImpl, {
+  AreaDrawer: AreaStackedModal
+});
+
+export {
+  GeoZoneForm
+};

package/dist/chunk-WIYFXWRI.js

@@ -0,0 +1,30 @@
+// src/components/common/thumbnail/thumbnail.tsx
+import { Photo } from "@medusajs/icons";
+import { clx } from "@medusajs/ui";
+import { jsx } from "react/jsx-runtime";
+var Thumbnail = ({ src, alt, size = "base" }) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clx(
+        "bg-ui-bg-component border-ui-border-base flex items-center justify-center overflow-hidden rounded border",
+        {
+          "h-8 w-6": size === "base",
+          "h-5 w-4": size === "small"
+        }
+      ),
+      children: src ? /* @__PURE__ */ jsx(
+        "img",
+        {
+          src,
+          alt,
+          className: "h-full w-full object-cover object-center"
+        }
+      ) : /* @__PURE__ */ jsx(Photo, { className: "text-ui-fg-subtle" })
+    }
+  );
+};
+
+export {
+  Thumbnail
+};

package/dist/chunk-WMA3WTCM.js

@@ -0,0 +1,117 @@
+// src/components/common/infinite-list/infinite-list.tsx
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { useEffect, useMemo, useRef } from "react";
+import { toast } from "@medusajs/ui";
+import { Spinner } from "@medusajs/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+var InfiniteList = ({
+  queryKey,
+  queryFn,
+  queryOptions,
+  renderItem,
+  renderEmpty,
+  responseKey,
+  pageSize = 20
+}) => {
+  const {
+    data,
+    error,
+    fetchNextPage,
+    fetchPreviousPage,
+    hasPreviousPage,
+    hasNextPage,
+    isFetching,
+    isPending
+  } = useInfiniteQuery({
+    queryKey,
+    queryFn: async ({ pageParam = 0 }) => {
+      return await queryFn({
+        limit: pageSize,
+        offset: pageParam
+      });
+    },
+    initialPageParam: 0,
+    maxPages: 5,
+    getNextPageParam: (lastPage) => {
+      const moreItemsExist = lastPage.count > lastPage.offset + lastPage.limit;
+      return moreItemsExist ? lastPage.offset + lastPage.limit : void 0;
+    },
+    getPreviousPageParam: (firstPage) => {
+      const moreItemsExist = firstPage.offset !== 0;
+      return moreItemsExist ? Math.max(firstPage.offset - firstPage.limit, 0) : void 0;
+    },
+    ...queryOptions
+  });
+  const items = useMemo(() => {
+    return data?.pages.flatMap((p) => p[responseKey]) ?? [];
+  }, [data, responseKey]);
+  const parentRef = useRef(null);
+  const startObserver = useRef();
+  const endObserver = useRef();
+  const fetchNextPageRef = useRef(fetchNextPage);
+  const fetchPreviousPageRef = useRef(fetchPreviousPage);
+  useEffect(() => {
+    fetchNextPageRef.current = fetchNextPage;
+    fetchPreviousPageRef.current = fetchPreviousPage;
+  }, [fetchNextPage, fetchPreviousPage]);
+  useEffect(() => {
+    if (isPending) {
+      return;
+    }
+    if (!isFetching) {
+      startObserver.current = new IntersectionObserver(
+        (entries) => {
+          if (entries[0].isIntersecting && hasPreviousPage) {
+            startObserver.current?.disconnect();
+            fetchPreviousPageRef.current();
+          }
+        },
+        {
+          threshold: 0.5
+        }
+      );
+      endObserver.current = new IntersectionObserver(
+        (entries) => {
+          if (entries[0].isIntersecting && hasNextPage) {
+            endObserver.current?.disconnect();
+            fetchNextPageRef.current();
+          }
+        },
+        {
+          threshold: 0.5
+        }
+      );
+      if (parentRef.current?.firstChild) {
+        startObserver.current?.observe(parentRef.current.firstChild);
+      }
+      if (parentRef.current?.lastChild) {
+        endObserver.current?.observe(parentRef.current.lastChild);
+      }
+    }
+    return () => {
+      startObserver.current?.disconnect();
+      endObserver.current?.disconnect();
+    };
+  }, [
+    hasNextPage,
+    hasPreviousPage,
+    isFetching,
+    isPending
+  ]);
+  useEffect(() => {
+    if (error) {
+      toast.error(error.message);
+    }
+  }, [error]);
+  if (isPending) {
+    return /* @__PURE__ */ jsx("div", { className: "flex h-full flex-col items-center justify-center", children: /* @__PURE__ */ jsx(Spinner, { className: "animate-spin" }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { ref: parentRef, className: "h-full", children: [
+    items?.length ? items.map((item) => /* @__PURE__ */ jsx("div", { children: renderItem(item) }, item.id)) : renderEmpty(),
+    isFetching && /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center py-4", children: /* @__PURE__ */ jsx(Spinner, { className: "animate-spin" }) })
+  ] });
+};
+
+export {
+  InfiniteList
+};