dn-react-router-toolkit 0.8.1 → 0.9.1

package/dist/table/item_loader.d.mts

@@ -1,14 +0,0 @@
-import { TableRepository } from './repository.mjs';
-import { LoaderFunctionArgs } from 'react-router';
-import { PgTableWithColumns } from 'drizzle-orm/pg-core';
-import 'drizzle-orm';
-import 'drizzle-orm/node-postgres';
-
-type TableItemLoaderOptions<T extends PgTableWithColumns<any>, TSelect> = {
-    repository: TableRepository<T, TSelect>;
-};
-declare const tableItemloader: <T extends PgTableWithColumns<any>, TSelect>({ repository, }: TableItemLoaderOptions<T, TSelect>) => (args: LoaderFunctionArgs) => Promise<{
-    item: Awaited<TSelect> | undefined;
-}>;
-
-export { type TableItemLoaderOptions, tableItemloader };

package/dist/table/item_loader.d.ts

@@ -1,14 +0,0 @@
-import { TableRepository } from './repository.js';
-import { LoaderFunctionArgs } from 'react-router';
-import { PgTableWithColumns } from 'drizzle-orm/pg-core';
-import 'drizzle-orm';
-import 'drizzle-orm/node-postgres';
-
-type TableItemLoaderOptions<T extends PgTableWithColumns<any>, TSelect> = {
-    repository: TableRepository<T, TSelect>;
-};
-declare const tableItemloader: <T extends PgTableWithColumns<any>, TSelect>({ repository, }: TableItemLoaderOptions<T, TSelect>) => (args: LoaderFunctionArgs) => Promise<{
-    item: Awaited<TSelect> | undefined;
-}>;
-
-export { type TableItemLoaderOptions, tableItemloader };

package/dist/table/item_loader.mjs

@@ -1,18 +0,0 @@
-// src/table/item_loader.tsx
-var tableItemloader = ({
-  repository
-}) => {
-  return async (args) => {
-    const { params } = args;
-    if (params["itemId"] === "new") {
-      return { item: void 0 };
-    }
-    const item = params["itemId"] ? await repository.find(params["itemId"]) : void 0;
-    return {
-      item
-    };
-  };
-};
-export {
-  tableItemloader
-};

package/dist/table/page.d.mts

@@ -1,16 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { FC, ReactNode } from 'react';
-import { TablePageOptions } from './table_form.mjs';
-import './table.mjs';
-import './use_table.mjs';
-
-declare function createTablePage<TModel>({ name, columns, primaryKey, }: TablePageOptions<TModel> & {
-    name: string;
-}): ({ header: Header, }: {
-    header: FC<{
-        title: string;
-        actions?: ReactNode;
-    }>;
-}) => react_jsx_runtime.JSX.Element;
-
-export { createTablePage };

package/dist/table/page.d.ts

@@ -1,16 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { FC, ReactNode } from 'react';
-import { TablePageOptions } from './table_form.js';
-import './table.js';
-import './use_table.js';
-
-declare function createTablePage<TModel>({ name, columns, primaryKey, }: TablePageOptions<TModel> & {
-    name: string;
-}): ({ header: Header, }: {
-    header: FC<{
-        title: string;
-        actions?: ReactNode;
-    }>;
-}) => react_jsx_runtime.JSX.Element;
-
-export { createTablePage };

package/dist/table/page.js

@@ -1,375 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/table/page.tsx
-var page_exports = {};
-__export(page_exports, {
-  createTablePage: () => createTablePage
-});
-module.exports = __toCommonJS(page_exports);
-var import_react_router5 = require("react-router");
-
-// src/table/table_form.tsx
-var import_react_router4 = require("react-router");
-var import_go2 = require("react-icons/go");
-
-// src/table/table.tsx
-var import_utils = require("dn-react-toolkit/utils");
-var import_go = require("react-icons/go");
-var import_react_router = require("react-router");
-var import_jsx_runtime = require("react/jsx-runtime");
-function Table({
-  className = "min-w-full whitespace-nowrap",
-  data,
-  columns,
-  mapper: Mapper,
-  getLink,
-  limit,
-  offset,
-  orderBy,
-  direction,
-  filters
-}) {
-  const keys = Object.entries(columns).filter((entry) => entry[1]).map(([key]) => key);
-  const sortedArray = [...data];
-  const [_, setSearchParams] = (0, import_react_router.useSearchParams)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    "table",
-    {
-      className: (0, import_utils.cn)(
-        className,
-        "text-[15px] border-separate border-spacing-0"
-      ),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: keys.map((key) => {
-          const value = columns[key];
-          function getReactNode() {
-            if (value && typeof value === "object" && "label" in value) {
-              return value.label;
-            }
-            return value;
-          }
-          function Head() {
-            const reactNode = getReactNode();
-            if (typeof reactNode === "string") {
-              return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                "button",
-                {
-                  className: (0, import_utils.cn)(
-                    orderBy === key ? "text-gray-900 font-medium" : "text-gray-500 font-medium",
-                    "px-4 flex items-center w-full"
-                  ),
-                  onClick: () => {
-                    let newDirection = "asc";
-                    if (orderBy === key) {
-                      newDirection = direction === "asc" ? "desc" : "asc";
-                    }
-                    setSearchParams({
-                      orderBy: key,
-                      direction: newDirection
-                    });
-                  },
-                  children: [
-                    reactNode,
-                    orderBy === key && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ml-0.5", children: direction === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_go.GoArrowUp, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_go.GoArrowDown, {}) })
-                  ]
-                }
-              );
-            }
-            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: reactNode });
-          }
-          const filter = filters[key];
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-            "th",
-            {
-              className: (0, import_utils.cn)(
-                "py-4 border-y font-normal align-top"
-              ),
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Head, {}),
-                filter && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "px-3 mt-4", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                  "select",
-                  {
-                    className: "w-full h-10 px-1.5 border rounded-full outline-none",
-                    onChange: (e) => {
-                      const value2 = e.target.value;
-                      setSearchParams((prev) => {
-                        if (value2) {
-                          prev.set(
-                            key,
-                            encodeURIComponent(
-                              value2
-                            )
-                          );
-                        } else {
-                          prev.delete(key);
-                        }
-                        return prev;
-                      });
-                    },
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "", children: "\uC804\uCCB4" }),
-                      filter.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                        "option",
-                        {
-                          value: option,
-                          children: option
-                        },
-                        option
-                      ))
-                    ]
-                  }
-                ) })
-              ]
-            },
-            key
-          );
-        }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tbody", { children: [
-          sortedArray.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "td",
-            {
-              colSpan: keys.length,
-              className: "px-4 h-20 text-gray-400 text-center",
-              children: "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."
-            }
-          ) }),
-          sortedArray.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { className: "hover:bg-gray-50 transition-colors", children: keys.map((key, i2) => {
-            const value = item[key];
-            function Content() {
-              if (key in columns) {
-                const column = columns[key];
-                if (column && typeof column === "object" && "mapper" in column) {
-                  const mapper = column.mapper;
-                  if (mapper) {
-                    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: mapper(item) });
-                  }
-                }
-              }
-              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: String(value) });
-            }
-            const linkedContent = getLink ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_react_router.Link,
-              {
-                to: getLink(item),
-                className: "block content-center px-4 w-full h-full",
-                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Content, {})
-              }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Content, {});
-            const cell = Mapper ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Mapper, { item, index: i2, children: linkedContent }) : linkedContent;
-            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: "px-0 h-14 border-b", children: cell }, key);
-          }) }, i))
-        ] })
-      ]
-    }
-  );
-}
-
-// src/table/use_table.tsx
-var import_react_router2 = require("react-router");
-function useTable() {
-  const { table } = (0, import_react_router2.useLoaderData)();
-  return table;
-}
-
-// src/table/buttons.tsx
-var import_utils2 = require("dn-react-toolkit/utils");
-var import_react_router3 = require("react-router");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-function TablePageButtons({
-  MAX_PAGES_TO_SHOW,
-  total,
-  limit,
-  offset
-}) {
-  const pages = Math.ceil(total / limit);
-  const { pathname } = (0, import_react_router3.useLocation)();
-  const [searchParams] = (0, import_react_router3.useSearchParams)();
-  const currentPage = Math.floor(offset / limit) + 1;
-  const startButton = (Math.ceil(currentPage / MAX_PAGES_TO_SHOW) - 1) * MAX_PAGES_TO_SHOW;
-  const endButton = Math.min(startButton + MAX_PAGES_TO_SHOW - 1, pages);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: pages > 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex justify-center items-center my-8 gap-4 text-neutral-400", children: [
-    startButton > 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      import_react_router3.Link,
-      {
-        to: (() => {
-          searchParams.set(
-            "offset",
-            String((startButton - 1) * limit)
-          );
-          return `${pathname}?${searchParams.toString()}`;
-        })(),
-        className: "w-10 block text-center transition-colors hover:text-primary",
-        children: "\uC774\uC804"
-      }
-    ),
-    Array.from({
-      length: Math.min(
-        MAX_PAGES_TO_SHOW,
-        pages - startButton
-      )
-    }).map((_, index) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        import_react_router3.Link,
-        {
-          to: (() => {
-            searchParams.set(
-              "offset",
-              String((startButton + index) * limit)
-            );
-            return `${pathname}?${searchParams.toString()}`;
-          })(),
-          className: (0, import_utils2.cn)(
-            "w-6 block text-center transition-colors",
-            currentPage === startButton + index + 1 ? "font-bold text-primary" : "hover:text-primary"
-          ),
-          children: startButton + index + 1
-        },
-        index
-      );
-    }),
-    endButton < pages && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      import_react_router3.Link,
-      {
-        to: (() => {
-          searchParams.set(
-            "offset",
-            String((endButton + 1) * limit)
-          );
-          return `${pathname}?${searchParams.toString()}`;
-        })(),
-        className: "w-10 block text-center transition-colors hover:text-primary",
-        children: "\uB2E4\uC74C"
-      }
-    )
-  ] }) });
-}
-
-// src/table/table_form.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-function TableForm({
-  columns,
-  primaryKey = "id"
-}) {
-  const { pathname } = (0, import_react_router4.useLocation)();
-  const {
-    items,
-    total,
-    limit,
-    offset,
-    orderBy,
-    direction,
-    searchKey,
-    filters
-  } = useTable();
-  const navigate = (0, import_react_router4.useNavigate)();
-  const search = (query) => {
-    const searchParams2 = new URLSearchParams(window.location.search);
-    searchParams2.set("query", query);
-    searchParams2.set("offset", "0");
-    navigate(`${pathname}?${searchParams2.toString()}`);
-  };
-  const [searchParams] = (0, import_react_router4.useSearchParams)();
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    searchKey && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-      "form",
-      {
-        className: "h-20 px-4 flex items-center border-t",
-        onSubmit: (e) => {
-          e.preventDefault();
-          const formData = new FormData(e.currentTarget);
-          const query = formData.get("query");
-          search(query);
-        },
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            "button",
-            {
-              type: "submit",
-              className: "w-10 h-10 flex justify-center items-center",
-              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_go2.GoSearch, { className: "text-xl mr-4" })
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            "input",
-            {
-              className: "outline-none h-full flex-1",
-              placeholder: "\uC5EC\uAE30\uC5D0 \uAC80\uC0C9\uD558\uC138\uC694...",
-              name: "query",
-              defaultValue: searchParams.get("query") ?? ""
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      Table,
-      {
-        data: items,
-        columns,
-        getLink: primaryKey ? (item) => `${pathname}/${item[primaryKey]}` : void 0,
-        limit,
-        offset,
-        orderBy,
-        direction,
-        filters
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      TablePageButtons,
-      {
-        total,
-        limit,
-        offset,
-        MAX_PAGES_TO_SHOW: 10
-      }
-    )
-  ] });
-}
-
-// src/table/page.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-function createTablePage({
-  name,
-  columns,
-  primaryKey = "id"
-}) {
-  return function TablePage({
-    header: Header
-  }) {
-    const { pathname } = (0, import_react_router5.useLocation)();
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        Header,
-        {
-          title: name,
-          actions: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_router5.Link, { to: `${pathname}/new`, className: "button-primary", children: [
-            name,
-            " \uCD94\uAC00"
-          ] })
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "max-w-7xl mx-auto w-full overflow-auto", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TableForm, { columns, primaryKey }) })
-    ] });
-  };
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  createTablePage
-});