@mercurjs/vendor 2.0.0-canary.0

package/dist/chunk-ZVT2QSWR.js

@@ -0,0 +1,263 @@
+import {
+  TextCell,
+  TextHeader
+} from "./chunk-JHIMVLB2.js";
+import {
+  getCategoryPath
+} from "./chunk-BDZOSMAX.js";
+import {
+  _DataTable,
+  useDataTable
+} from "./chunk-WHTS4G5K.js";
+import {
+  SingleColumnPage
+} from "./chunk-RM5RSDYP.js";
+import {
+  useQueryParams
+} from "./chunk-THHRRYRS.js";
+import {
+  useProductCategories
+} from "./chunk-ASVMGV2B.js";
+
+// src/pages/categories/category-list-page.tsx
+import { Children as Children3 } from "react";
+
+// src/pages/categories/_components/category-list-table/category-list-table.tsx
+import { Children as Children2 } from "react";
+import { Container } from "@medusajs/ui";
+import { Outlet } from "react-router-dom";
+
+// src/pages/categories/_components/category-list-table/category-list-header.tsx
+import { Children } from "react";
+import { useTranslation } from "react-i18next";
+import { Heading, Text } from "@medusajs/ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var CategoryListTitle = () => {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(Heading, { children: t("categories.domain") }),
+    /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-subtle", size: "small", children: "Organize products into categories." })
+  ] });
+};
+var CategoryListActions = ({
+  children
+}) => {
+  return /* @__PURE__ */ jsx("div", { className: "flex items-center gap-x-2", children: Children.count(children) > 0 ? children : null });
+};
+var CategoryListHeader = ({
+  children
+}) => {
+  return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between px-6 py-4", children: Children.count(children) > 0 ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(CategoryListTitle, {}),
+    /* @__PURE__ */ jsx(CategoryListActions, {})
+  ] }) });
+};
+
+// src/pages/categories/_components/category-list-table/category-list-data-table.tsx
+import { keepPreviousData } from "@tanstack/react-query";
+import { useMemo as useMemo2 } from "react";
+
+// src/pages/categories/_components/category-list-table/use-category-table-columns.tsx
+import { TriangleRightMini } from "@medusajs/icons";
+import { IconButton, Text as Text2, clx } from "@medusajs/ui";
+import { createColumnHelper } from "@tanstack/react-table";
+import { useMemo } from "react";
+import { useTranslation as useTranslation2 } from "react-i18next";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var columnHelper = createColumnHelper();
+var useCategoryTableColumns = () => {
+  const { t } = useTranslation2();
+  return useMemo(
+    () => [
+      columnHelper.accessor("name", {
+        header: () => /* @__PURE__ */ jsx2(TextHeader, { text: t("fields.name") }),
+        cell: ({ getValue, row }) => {
+          const expandHandler = row.getToggleExpandedHandler();
+          if (row.original.parent_category !== void 0) {
+            const path = getCategoryPath(row.original);
+            return /* @__PURE__ */ jsx2("div", { className: "flex size-full items-center gap-1 overflow-hidden", children: path.map((chip, index) => /* @__PURE__ */ jsxs2(
+              "div",
+              {
+                className: clx("overflow-hidden", {
+                  "text-ui-fg-muted flex items-center gap-x-1": index !== path.length - 1
+                }),
+                children: [
+                  /* @__PURE__ */ jsx2(Text2, { size: "small", leading: "compact", className: "truncate", children: chip.name }),
+                  index !== path.length - 1 && /* @__PURE__ */ jsx2(Text2, { size: "small", leading: "compact", children: "/" })
+                ]
+              },
+              chip.id
+            )) });
+          }
+          return /* @__PURE__ */ jsxs2("div", { className: "flex size-full items-center gap-x-3 overflow-hidden", children: [
+            /* @__PURE__ */ jsx2("div", { className: "flex size-7 items-center justify-center", children: row.getCanExpand() ? /* @__PURE__ */ jsx2(
+              IconButton,
+              {
+                type: "button",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  e.preventDefault();
+                  expandHandler();
+                },
+                size: "small",
+                variant: "transparent",
+                className: "text-ui-fg-subtle",
+                children: /* @__PURE__ */ jsx2(
+                  TriangleRightMini,
+                  {
+                    className: clx({
+                      "rotate-90 transition-transform will-change-transform": row.getIsExpanded()
+                    })
+                  }
+                )
+              }
+            ) : null }),
+            /* @__PURE__ */ jsx2("span", { className: "truncate", children: getValue() })
+          ] });
+        }
+      }),
+      columnHelper.accessor("handle", {
+        header: () => /* @__PURE__ */ jsx2(TextHeader, { text: t("fields.handle") }),
+        cell: ({ getValue }) => {
+          return /* @__PURE__ */ jsx2(TextCell, { text: `/${getValue()}` });
+        }
+      })
+      // columnHelper.accessor('is_active', {
+      //   header: () => (
+      //     <TextHeader text={t('fields.status')} />
+      //   ),
+      //   cell: ({ getValue }) => {
+      //     console.log('getValue', getValue());
+      //     // const { color, label } = getIsActiveProps(
+      //     //   getValue(),
+      //     //   t
+      //     // );
+      //     return (
+      //       // <StatusCell color={color}>{label}</StatusCell>
+      //       <span>eee</span>
+      //     );
+      //   },
+      // }),
+      // columnHelper.accessor('is_internal', {
+      //   header: () => (
+      //     <TextHeader
+      //       text={t('categories.fields.visibility.label')}
+      //     />
+      //   ),
+      //   cell: ({ getValue }) => {
+      //     // const { color, label } = getIsInternalProps(
+      //     //   getValue(),
+      //     //   t
+      //     // );
+      //     return <span>ddd</span>;
+      //   },
+      // }),
+    ],
+    [t]
+  );
+};
+
+// src/pages/categories/_components/category-list-table/use-category-table-query.tsx
+var useCategoryTableQuery = ({
+  pageSize = 20,
+  prefix
+}) => {
+  const raw = useQueryParams(["q", "offset", "order"], prefix);
+  const searchParams = {
+    q: raw.q,
+    limit: pageSize,
+    offset: raw.offset ? Number(raw.offset) : 0,
+    order: raw.order
+  };
+  return {
+    raw,
+    searchParams
+  };
+};
+
+// src/pages/categories/_components/category-list-table/category-list-data-table.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var PAGE_SIZE = 20;
+var CategoryListDataTable = () => {
+  const { raw, searchParams } = useCategoryTableQuery({
+    pageSize: PAGE_SIZE
+  });
+  const query = raw.q ? {
+    include_ancestors_tree: true,
+    fields: "id,name,handle,is_active,is_internal,parent_category",
+    ...searchParams
+  } : {
+    include_descendants_tree: true,
+    parent_category_id: "null",
+    fields: "id,name,category_children,handle,is_internal,is_active",
+    ...searchParams
+  };
+  const { product_categories, count, isLoading, isError, error } = useProductCategories(
+    {
+      ...query
+    },
+    {
+      placeholderData: keepPreviousData
+    }
+  );
+  const columns = useColumns();
+  const { table } = useDataTable({
+    data: product_categories || [],
+    columns,
+    count,
+    getRowId: (original) => original.id,
+    getSubRows: (original) => original.category_children,
+    enableExpandableRows: true,
+    pageSize: PAGE_SIZE
+  });
+  if (isError) {
+    throw error;
+  }
+  return /* @__PURE__ */ jsx3(
+    _DataTable,
+    {
+      table,
+      columns,
+      count,
+      pageSize: PAGE_SIZE,
+      isLoading,
+      navigateTo: (row) => row.id,
+      queryObject: raw,
+      search: true,
+      pagination: true
+    }
+  );
+};
+var useColumns = () => {
+  const base = useCategoryTableColumns();
+  return useMemo2(() => [...base], [base]);
+};
+
+// src/pages/categories/_components/category-list-table/category-list-table.tsx
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var CategoryListTable = ({ children }) => {
+  return /* @__PURE__ */ jsxs3(Container, { className: "divide-y p-0", children: [
+    Children2.count(children) > 0 ? children : /* @__PURE__ */ jsxs3(Fragment2, { children: [
+      /* @__PURE__ */ jsx4(CategoryListHeader, {}),
+      /* @__PURE__ */ jsx4(CategoryListDataTable, {})
+    ] }),
+    /* @__PURE__ */ jsx4(Outlet, {})
+  ] });
+};
+
+// src/pages/categories/category-list-page.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var Root = ({ children }) => {
+  return /* @__PURE__ */ jsx5(SingleColumnPage, { hasOutlet: true, children: Children3.count(children) > 0 ? children : /* @__PURE__ */ jsx5(CategoryListTable, {}) });
+};
+var CategoryListPage = Object.assign(Root, {
+  Table: CategoryListTable,
+  Header: CategoryListHeader,
+  HeaderTitle: CategoryListTitle,
+  HeaderActions: CategoryListActions,
+  DataTable: CategoryListDataTable
+});
+
+export {
+  CategoryListPage
+};