dn-react-router-toolkit 0.7.15 → 0.8.1

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) {
@@ -50,6 +50,10 @@ var BaseTableRepository = class {
   async delete(pk) {
     await this.db.delete(this.schema).where(eq(this.schema[this.pk], pk));
   }
+  async select(key) {
+    const rows = await this.db.select({ value: this.schema[key] }).from(this.schema).groupBy(this.schema[key]);
+    return rows.map((row) => row.value);
+  }
 };
 
 // src/table/buttons.tsx
@@ -141,60 +145,92 @@ var tableItemloader = ({
   };
 };
 
-// src/table/loader.tsx
+// src/table/load_table.tsx
 import {
   and,
+  eq as eq2,
   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 filterWhere = Object.entries(options.filters ?? {}).map(([key, value]) => {
+    const param = searchParams.get(key);
+    if (param) {
+      return eq2(
+        repository.schema[key],
+        decodeURIComponent(param)
+      );
+    }
+    return void 0;
+  }).filter(Boolean);
+  const whereClauses = and(
+    searchKey && query ? ilike(
+      repository.schema[searchKey],
+      `%${query}%`
+    ) : void 0,
+    ...filterWhere,
+    ...where ?? []
+  );
+  const total = await repository.countTotal({ where: whereClauses });
+  const items = await repository.findAll({
+    orderBy,
+    direction,
+    limit,
+    offset,
+    where: whereClauses
+  });
+  const filters = Object.fromEntries(
+    await Promise.all(
+      Object.keys(options.filters ?? {}).map(async (key) => {
+        const values = await repository.select(key);
+        return [key, values.filter(Boolean)];
+      })
+    )
+  );
+  return {
+    items,
+    total,
+    limit,
+    offset,
+    orderBy,
+    direction,
+    searchKey,
+    filters
+  };
+}
+
+// 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
@@ -211,7 +247,8 @@ function Table({
   limit,
   offset,
   orderBy,
-  direction
+  direction,
+  filters
 }) {
   const keys = Object.entries(columns).filter((entry) => entry[1]).map(([key]) => key);
   const sortedArray = [...data];
@@ -219,7 +256,10 @@ function Table({
   return /* @__PURE__ */ jsxs2(
     "table",
     {
-      className: cn2(className, "text-[15px] border-separate border-spacing-0"),
+      className: cn2(
+        className,
+        "text-[15px] border-separate border-spacing-0"
+      ),
       children: [
         /* @__PURE__ */ jsx2("thead", { children: /* @__PURE__ */ jsx2("tr", { children: keys.map((key) => {
           const value = columns[key];
@@ -236,8 +276,8 @@ function Table({
                 "button",
                 {
                   className: cn2(
-                    orderBy === key ? "text-neutral-900 font-medium" : "text-neutral-500",
-                    "px-4 h-14 flex items-center w-full"
+                    orderBy === key ? "text-gray-900 font-medium" : "text-gray-500 font-medium",
+                    "px-4 flex items-center w-full"
                   ),
                   onClick: () => {
                     let newDirection = "asc";
@@ -258,14 +298,59 @@ function Table({
             }
             return /* @__PURE__ */ jsx2(Fragment2, { children: reactNode });
           }
-          return /* @__PURE__ */ jsx2("th", { className: cn2("border-y font-normal"), children: /* @__PURE__ */ jsx2(Head, {}) }, key);
+          const filter = filters[key];
+          return /* @__PURE__ */ jsxs2(
+            "th",
+            {
+              className: cn2(
+                "py-4 border-y font-normal align-top"
+              ),
+              children: [
+                /* @__PURE__ */ jsx2(Head, {}),
+                filter && /* @__PURE__ */ jsx2("div", { className: "px-3 mt-4", children: /* @__PURE__ */ jsxs2(
+                  "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__ */ jsx2("option", { value: "", children: "\uC804\uCCB4" }),
+                      filter.map((option) => /* @__PURE__ */ jsx2(
+                        "option",
+                        {
+                          value: option,
+                          children: option
+                        },
+                        option
+                      ))
+                    ]
+                  }
+                ) })
+              ]
+            },
+            key
+          );
         }) }) }),
         /* @__PURE__ */ jsxs2("tbody", { children: [
           sortedArray.length === 0 && /* @__PURE__ */ jsx2("tr", { children: /* @__PURE__ */ jsx2(
             "td",
             {
               colSpan: keys.length,
-              className: "px-4 h-14 text-neutral-400 text-center",
+              className: "px-4 h-20 text-gray-400 text-center",
               children: "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."
             }
           ) }),
@@ -300,8 +385,97 @@ function Table({
   );
 }
 
-// src/table/page.tsx
+// src/table/use_table.tsx
+import { useLoaderData } from "react-router";
+function useTable() {
+  const { table } = useLoaderData();
+  return table;
+}
+
+// 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,
+    filters
+  } = 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-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__ */ 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,
+        filters
+      }
+    ),
+    /* @__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 +484,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;
 }>;
 

package/dist/table/load_table.d.mts

@@ -0,0 +1,36 @@
+import { SQLWrapper, InferSelectModel } from 'drizzle-orm';
+import { PgTableWithColumns } from 'drizzle-orm/pg-core';
+import { TableRepository, ColumnOf } from './repository.mjs';
+import 'drizzle-orm/node-postgres';
+
+type TableOptions<T extends PgTableWithColumns<any>> = {
+    where?: SQLWrapper[];
+    searchKey?: ColumnOf<T>;
+    defaultOrderBy: keyof InferSelectModel<T>;
+    defaultDirection: "asc" | "desc";
+    filters?: {
+        [key in keyof InferSelectModel<T>]?: "auto";
+    };
+};
+type TableLoaderOptions<T extends PgTableWithColumns<any>, TSelect> = {
+    repository: TableRepository<T, TSelect>;
+    options: TableOptions<T>;
+};
+declare function loadTable<T extends PgTableWithColumns<any>, TSelect>({ request, repository, options, }: {
+    request: Request;
+    repository: TableRepository<T, TSelect>;
+    options: TableOptions<T>;
+}): Promise<{
+    items: TSelect[];
+    total: number;
+    limit: number;
+    offset: number;
+    orderBy: keyof T["_"]["columns"] & string;
+    direction: "asc" | "desc";
+    searchKey: ColumnOf<T> | undefined;
+    filters: {
+        [k: string]: unknown[];
+    };
+}>;
+
+export { type TableLoaderOptions, loadTable };

package/dist/table/load_table.d.ts

@@ -0,0 +1,36 @@
+import { SQLWrapper, InferSelectModel } from 'drizzle-orm';
+import { PgTableWithColumns } from 'drizzle-orm/pg-core';
+import { TableRepository, ColumnOf } from './repository.js';
+import 'drizzle-orm/node-postgres';
+
+type TableOptions<T extends PgTableWithColumns<any>> = {
+    where?: SQLWrapper[];
+    searchKey?: ColumnOf<T>;
+    defaultOrderBy: keyof InferSelectModel<T>;
+    defaultDirection: "asc" | "desc";
+    filters?: {
+        [key in keyof InferSelectModel<T>]?: "auto";
+    };
+};
+type TableLoaderOptions<T extends PgTableWithColumns<any>, TSelect> = {
+    repository: TableRepository<T, TSelect>;
+    options: TableOptions<T>;
+};
+declare function loadTable<T extends PgTableWithColumns<any>, TSelect>({ request, repository, options, }: {
+    request: Request;
+    repository: TableRepository<T, TSelect>;
+    options: TableOptions<T>;
+}): Promise<{
+    items: TSelect[];
+    total: number;
+    limit: number;
+    offset: number;
+    orderBy: keyof T["_"]["columns"] & string;
+    direction: "asc" | "desc";
+    searchKey: ColumnOf<T> | undefined;
+    filters: {
+        [k: string]: unknown[];
+    };
+}>;
+
+export { type TableLoaderOptions, loadTable };

package/dist/table/load_table.js

@@ -0,0 +1,87 @@
+"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/load_table.tsx
+var load_table_exports = {};
+__export(load_table_exports, {
+  loadTable: () => loadTable
+});
+module.exports = __toCommonJS(load_table_exports);
+var import_drizzle_orm = 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 filterWhere = Object.entries(options.filters ?? {}).map(([key, value]) => {
+    const param = searchParams.get(key);
+    if (param) {
+      return (0, import_drizzle_orm.eq)(
+        repository.schema[key],
+        decodeURIComponent(param)
+      );
+    }
+    return void 0;
+  }).filter(Boolean);
+  const whereClauses = (0, import_drizzle_orm.and)(
+    searchKey && query ? (0, import_drizzle_orm.ilike)(
+      repository.schema[searchKey],
+      `%${query}%`
+    ) : void 0,
+    ...filterWhere,
+    ...where ?? []
+  );
+  const total = await repository.countTotal({ where: whereClauses });
+  const items = await repository.findAll({
+    orderBy,
+    direction,
+    limit,
+    offset,
+    where: whereClauses
+  });
+  const filters = Object.fromEntries(
+    await Promise.all(
+      Object.keys(options.filters ?? {}).map(async (key) => {
+        const values = await repository.select(key);
+        return [key, values.filter(Boolean)];
+      })
+    )
+  );
+  return {
+    items,
+    total,
+    limit,
+    offset,
+    orderBy,
+    direction,
+    searchKey,
+    filters
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  loadTable
+});