dn-react-router-toolkit 0.7.14 → 0.8.0

package/dist/table/index.js

@@ -22,10 +22,13 @@ var table_exports = {};
 __export(table_exports, {
   BaseTableRepository: () => BaseTableRepository,
   Table: () => Table,
+  TableForm: () => TableForm,
   TablePageButtons: () => TablePageButtons,
   createTablePage: () => createTablePage,
+  loadTable: () => loadTable,
   tableItemloader: () => tableItemloader,
-  tableLoader: () => tableLoader
+  tableLoader: () => tableLoader,
+  useTable: () => useTable
 });
 module.exports = __toCommonJS(table_exports);
 
@@ -37,7 +40,7 @@ var BaseTableRepository = class {
   pk;
   constructor(db, schema, pk = "id") {
     this.db = db;
-    this.schema = schema;
+    this.schema = db._.fullSchema[schema];
     this.pk = pk;
   }
   async find(id) {
@@ -167,51 +170,68 @@ var tableItemloader = ({
   };
 };
 
-// src/table/loader.tsx
+// src/table/load_table.tsx
 var import_drizzle_orm2 = require("drizzle-orm");
+async function loadTable({
+  request,
+  repository,
+  options
+}) {
+  const searchParams = new URL(request.url).searchParams;
+  const { where, searchKey, defaultOrderBy, defaultDirection } = options;
+  const query = searchParams.get("query") ?? void 0;
+  const limit = Number(searchParams.get("limit") ?? "20");
+  const offset = Number(searchParams.get("offset") ?? "0");
+  const orderBy = searchParams.get("orderBy") ?? defaultOrderBy;
+  const direction = searchParams.get("direction") ?? defaultDirection;
+  const whereClauses = (0, import_drizzle_orm2.and)(
+    searchKey && query ? (0, import_drizzle_orm2.ilike)(
+      repository.schema[searchKey],
+      `%${query}%`
+    ) : void 0,
+    ...where ?? []
+  );
+  const total = await repository.countTotal({ where: whereClauses });
+  const items = await repository.findAll({
+    orderBy,
+    direction,
+    limit,
+    offset,
+    where: whereClauses
+  });
+  return {
+    items,
+    total,
+    limit,
+    offset,
+    orderBy,
+    direction,
+    searchKey
+  };
+}
+
+// src/table/loader.tsx
 function tableLoader({
   repository,
-  tableOptions
+  options
 }) {
   return async ({ request }) => {
-    const searchParams = new URL(request.url).searchParams;
-    const { where, searchKey, defaultOrderBy, defaultDirection } = tableOptions;
-    const query = searchParams.get("query") ?? void 0;
-    const limit = Number(searchParams.get("limit") ?? "10");
-    const offset = Number(searchParams.get("offset") ?? "0");
-    const orderBy = searchParams.get("orderBy") ?? defaultOrderBy;
-    const direction = searchParams.get("direction") ?? defaultDirection;
-    const whereClauses = (0, import_drizzle_orm2.and)(
-      searchKey && query ? (0, import_drizzle_orm2.ilike)(
-        repository.schema[searchKey],
-        `%${query}%`
-      ) : void 0,
-      ...where ?? []
-    );
-    const total = await repository.countTotal({ where: whereClauses });
-    const items = await repository.findAll({
-      orderBy,
-      direction,
-      limit,
-      offset,
-      where: whereClauses
+    const table = await loadTable({
+      request,
+      repository,
+      options
     });
     return {
-      table: {
-        items,
-        total,
-        limit,
-        offset,
-        orderBy,
-        direction,
-        searchKey
-      }
+      table
     };
   };
 }
 
 // src/table/page.tsx
-var import_react_router3 = require("react-router");
+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
@@ -317,8 +337,96 @@ function Table({
   );
 }
 
-// src/table/page.tsx
+// src/table/use_table.tsx
+var import_react_router3 = require("react-router");
+function useTable() {
+  const { table } = (0, import_react_router3.useLoaderData)();
+  const { items, total, limit, offset, orderBy, direction, searchKey } = table;
+  return {
+    items,
+    total,
+    limit,
+    offset,
+    orderBy,
+    direction,
+    searchKey
+  };
+}
+
+// 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 } = 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-18 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
+      }
+    ),
+    /* @__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,
@@ -327,82 +435,19 @@ function createTablePage({
   return function TablePage({
     header: Header
   }) {
-    const { pathname } = (0, import_react_router3.useLocation)();
-    const { table } = (0, import_react_router3.useLoaderData)();
-    const { items, total, limit, offset, orderBy, direction, searchKey } = table;
-    const navigate = (0, import_react_router3.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_router3.useSearchParams)();
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    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_runtime3.jsxs)(import_react_router3.Link, { to: `${pathname}/new`, className: "button-primary", children: [
+          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_runtime3.jsxs)("div", { className: "max-w-7xl mx-auto w-full overflow-auto", children: [
-        searchKey && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-          "form",
-          {
-            className: "h-18 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
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          TablePageButtons,
-          {
-            total,
-            limit,
-            offset,
-            MAX_PAGES_TO_SHOW: 10
-          }
-        )
-      ] })
+      /* @__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 }) })
     ] });
   };
 }
@@ -410,8 +455,11 @@ function createTablePage({
 0 && (module.exports = {
   BaseTableRepository,
   Table,
+  TableForm,
   TablePageButtons,
   createTablePage,
+  loadTable,
   tableItemloader,
-  tableLoader
+  tableLoader,
+  useTable
 });

package/dist/table/index.mjs

@@ -11,7 +11,7 @@ var BaseTableRepository = class {
   pk;
   constructor(db, schema, pk = "id") {
     this.db = db;
-    this.schema = schema;
+    this.schema = db._.fullSchema[schema];
     this.pk = pk;
   }
   async find(id) {
@@ -141,60 +141,71 @@ var tableItemloader = ({
   };
 };
 
-// src/table/loader.tsx
+// src/table/load_table.tsx
 import {
   and,
   ilike
 } from "drizzle-orm";
+async function loadTable({
+  request,
+  repository,
+  options
+}) {
+  const searchParams = new URL(request.url).searchParams;
+  const { where, searchKey, defaultOrderBy, defaultDirection } = options;
+  const query = searchParams.get("query") ?? void 0;
+  const limit = Number(searchParams.get("limit") ?? "20");
+  const offset = Number(searchParams.get("offset") ?? "0");
+  const orderBy = searchParams.get("orderBy") ?? defaultOrderBy;
+  const direction = searchParams.get("direction") ?? defaultDirection;
+  const whereClauses = and(
+    searchKey && query ? ilike(
+      repository.schema[searchKey],
+      `%${query}%`
+    ) : void 0,
+    ...where ?? []
+  );
+  const total = await repository.countTotal({ where: whereClauses });
+  const items = await repository.findAll({
+    orderBy,
+    direction,
+    limit,
+    offset,
+    where: whereClauses
+  });
+  return {
+    items,
+    total,
+    limit,
+    offset,
+    orderBy,
+    direction,
+    searchKey
+  };
+}
+
+// src/table/loader.tsx
 function tableLoader({
   repository,
-  tableOptions
+  options
 }) {
   return async ({ request }) => {
-    const searchParams = new URL(request.url).searchParams;
-    const { where, searchKey, defaultOrderBy, defaultDirection } = tableOptions;
-    const query = searchParams.get("query") ?? void 0;
-    const limit = Number(searchParams.get("limit") ?? "10");
-    const offset = Number(searchParams.get("offset") ?? "0");
-    const orderBy = searchParams.get("orderBy") ?? defaultOrderBy;
-    const direction = searchParams.get("direction") ?? defaultDirection;
-    const whereClauses = and(
-      searchKey && query ? ilike(
-        repository.schema[searchKey],
-        `%${query}%`
-      ) : void 0,
-      ...where ?? []
-    );
-    const total = await repository.countTotal({ where: whereClauses });
-    const items = await repository.findAll({
-      orderBy,
-      direction,
-      limit,
-      offset,
-      where: whereClauses
+    const table = await loadTable({
+      request,
+      repository,
+      options
     });
     return {
-      table: {
-        items,
-        total,
-        limit,
-        offset,
-        orderBy,
-        direction,
-        searchKey
-      }
+      table
     };
   };
 }
 
 // src/table/page.tsx
-import {
-  Link as Link3,
-  useLoaderData,
-  useLocation as useLocation2,
-  useNavigate,
-  useSearchParams as useSearchParams3
-} from "react-router";
+import { Link as Link3, useLocation as useLocation3 } from "react-router";
+
+// src/table/table_form.tsx
+import { useLocation as useLocation2, useNavigate, useSearchParams as useSearchParams3 } from "react-router";
 import { GoSearch } from "react-icons/go";
 
 // src/table/table.tsx
@@ -300,8 +311,96 @@ function Table({
   );
 }
 
-// src/table/page.tsx
+// src/table/use_table.tsx
+import { useLoaderData } from "react-router";
+function useTable() {
+  const { table } = useLoaderData();
+  const { items, total, limit, offset, orderBy, direction, searchKey } = table;
+  return {
+    items,
+    total,
+    limit,
+    offset,
+    orderBy,
+    direction,
+    searchKey
+  };
+}
+
+// src/table/table_form.tsx
 import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function TableForm({
+  columns,
+  primaryKey = "id"
+}) {
+  const { pathname } = useLocation2();
+  const { items, total, limit, offset, orderBy, direction, searchKey } = useTable();
+  const navigate = 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] = useSearchParams3();
+  return /* @__PURE__ */ jsxs3(Fragment3, { children: [
+    searchKey && /* @__PURE__ */ jsxs3(
+      "form",
+      {
+        className: "h-18 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__ */ jsx3(
+            "button",
+            {
+              type: "submit",
+              className: "w-10 h-10 flex justify-center items-center",
+              children: /* @__PURE__ */ jsx3(GoSearch, { className: "text-xl mr-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx3(
+            "input",
+            {
+              className: "outline-none h-full flex-1",
+              placeholder: "\uC5EC\uAE30\uC5D0 \uAC80\uC0C9\uD558\uC138\uC694...",
+              name: "query",
+              defaultValue: searchParams.get("query") ?? ""
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      Table,
+      {
+        data: items,
+        columns,
+        getLink: primaryKey ? (item) => `${pathname}/${item[primaryKey]}` : void 0,
+        limit,
+        offset,
+        orderBy,
+        direction
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      TablePageButtons,
+      {
+        total,
+        limit,
+        offset,
+        MAX_PAGES_TO_SHOW: 10
+      }
+    )
+  ] });
+}
+
+// src/table/page.tsx
+import { Fragment as Fragment4, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function createTablePage({
   name,
   columns,
@@ -310,90 +409,30 @@ function createTablePage({
   return function TablePage({
     header: Header
   }) {
-    const { pathname } = useLocation2();
-    const { table } = useLoaderData();
-    const { items, total, limit, offset, orderBy, direction, searchKey } = table;
-    const navigate = 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] = useSearchParams3();
-    return /* @__PURE__ */ jsxs3(Fragment3, { children: [
-      /* @__PURE__ */ jsx3(
+    const { pathname } = useLocation3();
+    return /* @__PURE__ */ jsxs4(Fragment4, { children: [
+      /* @__PURE__ */ jsx4(
         Header,
         {
           title: name,
-          actions: /* @__PURE__ */ jsxs3(Link3, { to: `${pathname}/new`, className: "button-primary", children: [
+          actions: /* @__PURE__ */ jsxs4(Link3, { to: `${pathname}/new`, className: "button-primary", children: [
             name,
             " \uCD94\uAC00"
           ] })
         }
       ),
-      /* @__PURE__ */ jsxs3("div", { className: "max-w-7xl mx-auto w-full overflow-auto", children: [
-        searchKey && /* @__PURE__ */ jsxs3(
-          "form",
-          {
-            className: "h-18 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__ */ jsx3(
-                "button",
-                {
-                  type: "submit",
-                  className: "w-10 h-10 flex justify-center items-center",
-                  children: /* @__PURE__ */ jsx3(GoSearch, { className: "text-xl mr-4" })
-                }
-              ),
-              /* @__PURE__ */ jsx3(
-                "input",
-                {
-                  className: "outline-none h-full flex-1",
-                  placeholder: "\uC5EC\uAE30\uC5D0 \uAC80\uC0C9\uD558\uC138\uC694...",
-                  name: "query",
-                  defaultValue: searchParams.get("query") ?? ""
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx3(
-          Table,
-          {
-            data: items,
-            columns,
-            getLink: primaryKey ? (item) => `${pathname}/${item[primaryKey]}` : void 0,
-            limit,
-            offset,
-            orderBy,
-            direction
-          }
-        ),
-        /* @__PURE__ */ jsx3(
-          TablePageButtons,
-          {
-            total,
-            limit,
-            offset,
-            MAX_PAGES_TO_SHOW: 10
-          }
-        )
-      ] })
+      /* @__PURE__ */ jsx4("div", { className: "max-w-7xl mx-auto w-full overflow-auto", children: /* @__PURE__ */ jsx4(TableForm, { columns, primaryKey }) })
     ] });
   };
 }
 export {
   BaseTableRepository,
   Table,
+  TableForm,
   TablePageButtons,
   createTablePage,
+  loadTable,
   tableItemloader,
-  tableLoader
+  tableLoader,
+  useTable
 };

package/dist/table/item_loader.d.mts

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

package/dist/table/item_loader.d.ts

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