dn-react-router-toolkit 0.5.2 → 0.5.4

package/dist/crud/crud_form.js

@@ -47,33 +47,65 @@ function useFormContext() {
 // src/crud/crud_form.tsx
 var import_store2 = require("dn-react-toolkit/store");
 var import_react3 = __toESM(require("react"));
+var import_utils = require("dn-react-toolkit/utils");
 function CrudForm({ AdminLayout }) {
   const form = useFormContext();
   return /* @__PURE__ */ import_react3.default.createElement(
     AdminLayout,
     {
       title: `${form.name} ${form.item ? "\uC218\uC815" : "\uCD94\uAC00"}`,
-      actions: /* @__PURE__ */ import_react3.default.createElement(
-        "button",
-        {
-          type: "button",
-          className: "button-primary",
-          onClick: form.submit
-        },
-        "\uC800\uC7A5\uD558\uAE30"
-      ),
+      actions: /* @__PURE__ */ import_react3.default.createElement("button", { type: "button", className: "button-primary", onClick: form.submit }, "\uC800\uC7A5\uD558\uAE30"),
       className: "max-w-3xl mx-auto"
     },
-    Object.keys(form.columns).length > 0 && /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, Object.entries(form.columns).map(
-      ([key, value]) => /* @__PURE__ */ import_react3.default.createElement("label", { key }, value.label, value.component ? /* @__PURE__ */ import_react3.default.createElement(value.component, null) : /* @__PURE__ */ import_react3.default.createElement(
-        import_store2.SyncInput,
-        {
-          store: form.store,
-          property: key,
-          className: "input-form"
+    Object.keys(form.columns).length > 0 && /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, Object.entries(
+      form.columns
+    ).map(([key, value]) => {
+      const createComponent = () => {
+        if (value.component) {
+          return /* @__PURE__ */ import_react3.default.createElement(value.component, { store: form.store, property: key });
         }
-      ))
-    )),
+        if (value.type === "checkbox") {
+          return /* @__PURE__ */ import_react3.default.createElement(import_store2.SyncSwitch, { store: form.store, property: key });
+        }
+        if (value.type === "datetime") {
+          return /* @__PURE__ */ import_react3.default.createElement(
+            import_store2.SyncInput,
+            {
+              store: form.store,
+              property: key,
+              className: "input-form",
+              type: "datetime-local",
+              serializer: (value2) => {
+                if (value2 instanceof Date) {
+                  return (0, import_utils.moment)(value2).toISOString(true).slice(0, 16);
+                }
+                return String(value2);
+              },
+              deserializer: (value2) => {
+                if (!value2) {
+                  return void 0;
+                }
+                return (0, import_utils.moment)(value2).toDate();
+              }
+            }
+          );
+        }
+        if (value.options) {
+          const Component = value.options;
+          return /* @__PURE__ */ import_react3.default.createElement(import_store2.SyncSelect, { store: form.store, property: key }, /* @__PURE__ */ import_react3.default.createElement(Component, null));
+        }
+        return /* @__PURE__ */ import_react3.default.createElement(
+          import_store2.SyncInput,
+          {
+            store: form.store,
+            property: key,
+            type: value.type,
+            className: "input-form"
+          }
+        );
+      };
+      return /* @__PURE__ */ import_react3.default.createElement("label", { key }, value.label, createComponent());
+    })),
     form.item && /* @__PURE__ */ import_react3.default.createElement(
       "button",
       {

package/dist/crud/crud_form.mjs

@@ -9,35 +9,67 @@ function useFormContext() {
 }
 
 // src/crud/crud_form.tsx
-import { SyncInput } from "dn-react-toolkit/store";
+import { SyncInput, SyncSelect, SyncSwitch } from "dn-react-toolkit/store";
 import React2 from "react";
+import { moment } from "dn-react-toolkit/utils";
 function CrudForm({ AdminLayout }) {
   const form = useFormContext();
   return /* @__PURE__ */ React2.createElement(
     AdminLayout,
     {
       title: `${form.name} ${form.item ? "\uC218\uC815" : "\uCD94\uAC00"}`,
-      actions: /* @__PURE__ */ React2.createElement(
-        "button",
-        {
-          type: "button",
-          className: "button-primary",
-          onClick: form.submit
-        },
-        "\uC800\uC7A5\uD558\uAE30"
-      ),
+      actions: /* @__PURE__ */ React2.createElement("button", { type: "button", className: "button-primary", onClick: form.submit }, "\uC800\uC7A5\uD558\uAE30"),
       className: "max-w-3xl mx-auto"
     },
-    Object.keys(form.columns).length > 0 && /* @__PURE__ */ React2.createElement(React2.Fragment, null, Object.entries(form.columns).map(
-      ([key, value]) => /* @__PURE__ */ React2.createElement("label", { key }, value.label, value.component ? /* @__PURE__ */ React2.createElement(value.component, null) : /* @__PURE__ */ React2.createElement(
-        SyncInput,
-        {
-          store: form.store,
-          property: key,
-          className: "input-form"
+    Object.keys(form.columns).length > 0 && /* @__PURE__ */ React2.createElement(React2.Fragment, null, Object.entries(
+      form.columns
+    ).map(([key, value]) => {
+      const createComponent = () => {
+        if (value.component) {
+          return /* @__PURE__ */ React2.createElement(value.component, { store: form.store, property: key });
         }
-      ))
-    )),
+        if (value.type === "checkbox") {
+          return /* @__PURE__ */ React2.createElement(SyncSwitch, { store: form.store, property: key });
+        }
+        if (value.type === "datetime") {
+          return /* @__PURE__ */ React2.createElement(
+            SyncInput,
+            {
+              store: form.store,
+              property: key,
+              className: "input-form",
+              type: "datetime-local",
+              serializer: (value2) => {
+                if (value2 instanceof Date) {
+                  return moment(value2).toISOString(true).slice(0, 16);
+                }
+                return String(value2);
+              },
+              deserializer: (value2) => {
+                if (!value2) {
+                  return void 0;
+                }
+                return moment(value2).toDate();
+              }
+            }
+          );
+        }
+        if (value.options) {
+          const Component = value.options;
+          return /* @__PURE__ */ React2.createElement(SyncSelect, { store: form.store, property: key }, /* @__PURE__ */ React2.createElement(Component, null));
+        }
+        return /* @__PURE__ */ React2.createElement(
+          SyncInput,
+          {
+            store: form.store,
+            property: key,
+            type: value.type,
+            className: "input-form"
+          }
+        );
+      };
+      return /* @__PURE__ */ React2.createElement("label", { key }, value.label, createComponent());
+    })),
     form.item && /* @__PURE__ */ React2.createElement(
       "button",
       {

package/dist/crud/crud_form_provider.d.mts

@@ -1,16 +1,20 @@
 import { RxStore } from 'dn-react-toolkit/store';
-import { PgTableWithColumns } from 'drizzle-orm/pg-core';
 import React from 'react';
 
 type FormState<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof TModel ? "id" : never> = Omit<TModel, TPrimaryKey> & {
     [K in TPrimaryKey]?: TModel[K];
 };
-type FormColumnValue = {
+type FormColumnValue<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof TModel ? "id" : never> = {
     label: string;
-    component?: React.FC;
+    type?: React.HTMLInputTypeAttribute;
+    component?: React.FC<{
+        store: RxStore<FormState<TModel, TPrimaryKey>>;
+        property: string;
+    }>;
+    options?: React.FC;
 };
-type FormColumns<T> = Partial<{
-    [K in T extends PgTableWithColumns<infer U> ? keyof U["columns"] : never]: FormColumnValue;
+type FormColumns<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof TModel ? "id" : never> = Partial<{
+    [K in keyof TModel]: FormColumnValue<TModel, TPrimaryKey>;
 }>;
 declare const FormContext: React.Context<{}>;
 declare function useFormContext<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof TModel ? "id" : never>(): {
@@ -26,7 +30,7 @@ type CrudFormProps<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof
     name: string;
     prefix: string;
     item?: TModel;
-    columns?: FormColumns<TModel>;
+    columns?: FormColumns<TModel, TPrimaryKey>;
     children?: React.ReactNode;
 };
 declare function CrudFormProvider<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof TModel ? "id" : never>({ primaryKey, name, prefix, item, columns, children, }: CrudFormProps<TModel, TPrimaryKey>): React.JSX.Element;

package/dist/crud/crud_form_provider.d.ts

@@ -1,16 +1,20 @@
 import { RxStore } from 'dn-react-toolkit/store';
-import { PgTableWithColumns } from 'drizzle-orm/pg-core';
 import React from 'react';
 
 type FormState<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof TModel ? "id" : never> = Omit<TModel, TPrimaryKey> & {
     [K in TPrimaryKey]?: TModel[K];
 };
-type FormColumnValue = {
+type FormColumnValue<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof TModel ? "id" : never> = {
     label: string;
-    component?: React.FC;
+    type?: React.HTMLInputTypeAttribute;
+    component?: React.FC<{
+        store: RxStore<FormState<TModel, TPrimaryKey>>;
+        property: string;
+    }>;
+    options?: React.FC;
 };
-type FormColumns<T> = Partial<{
-    [K in T extends PgTableWithColumns<infer U> ? keyof U["columns"] : never]: FormColumnValue;
+type FormColumns<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof TModel ? "id" : never> = Partial<{
+    [K in keyof TModel]: FormColumnValue<TModel, TPrimaryKey>;
 }>;
 declare const FormContext: React.Context<{}>;
 declare function useFormContext<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof TModel ? "id" : never>(): {
@@ -26,7 +30,7 @@ type CrudFormProps<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof
     name: string;
     prefix: string;
     item?: TModel;
-    columns?: FormColumns<TModel>;
+    columns?: FormColumns<TModel, TPrimaryKey>;
     children?: React.ReactNode;
 };
 declare function CrudFormProvider<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof TModel ? "id" : never>({ primaryKey, name, prefix, item, columns, children, }: CrudFormProps<TModel, TPrimaryKey>): React.JSX.Element;

package/dist/crud/crud_form_provider.js

@@ -63,58 +63,56 @@ function CrudFormProvider({
         "Content-Type": "application/json"
       },
       body: JSON.stringify(
-        Object.entries(store.state).reduce(
-          function reducer(acc, [key, value]) {
-            const converter = (value2) => {
-              if (value2 === void 0) {
-                return void 0;
-              }
-              if (value2 === null) {
-                return {
-                  type: "null",
-                  value: null
-                };
-              }
-              if (typeof value2 === "string") {
-                return {
-                  type: "string",
-                  value: value2
-                };
-              }
-              if (typeof value2 === "number") {
-                return {
-                  type: "number",
-                  value: value2
-                };
-              }
-              if (typeof value2 === "boolean") {
-                return {
-                  type: "boolean",
-                  value: value2
-                };
-              }
-              if (value2 instanceof Date) {
-                return {
-                  type: "date",
-                  value: value2.toISOString()
-                };
-              }
-              if (Array.isArray(value2)) {
-                return value2.map((v) => converter(v));
-              }
-              if (typeof value2 === "object") {
-                return Object.entries(
-                  value2
-                ).reduce(reducer, {});
-              }
-            };
-            return {
-              ...acc,
-              [key]: converter(value)
-            };
-          },
-          {}
-        )
+        Object.entries(store.state).reduce(function reducer(acc, [key, value]) {
+          const converter = (value2) => {
+            if (value2 === void 0) {
+              return void 0;
+            }
+            if (value2 === null) {
+              return {
+                type: "null",
+                value: null
+              };
+            }
+            if (typeof value2 === "string") {
+              return {
+                type: "string",
+                value: value2
+              };
+            }
+            if (typeof value2 === "number") {
+              return {
+                type: "number",
+                value: value2
+              };
+            }
+            if (typeof value2 === "boolean") {
+              return {
+                type: "boolean",
+                value: value2
+              };
+            }
+            if (value2 instanceof Date) {
+              return {
+                type: "date",
+                value: value2.toISOString()
+              };
+            }
+            if (Array.isArray(value2)) {
+              return value2.map((v) => converter(v));
+            }
+            if (typeof value2 === "object") {
+              return Object.entries(value2).reduce(
+                reducer,
+                {}
+              );
+            }
+          };
+          return {
+            ...acc,
+            [key]: converter(value)
+          };
+        }, {})
       )
     });
     if (!res.ok) {

package/dist/crud/crud_form_provider.mjs

@@ -27,58 +27,56 @@ function CrudFormProvider({
         "Content-Type": "application/json"
       },
       body: JSON.stringify(
-        Object.entries(store.state).reduce(
-          function reducer(acc, [key, value]) {
-            const converter = (value2) => {
-              if (value2 === void 0) {
-                return void 0;
-              }
-              if (value2 === null) {
-                return {
-                  type: "null",
-                  value: null
-                };
-              }
-              if (typeof value2 === "string") {
-                return {
-                  type: "string",
-                  value: value2
-                };
-              }
-              if (typeof value2 === "number") {
-                return {
-                  type: "number",
-                  value: value2
-                };
-              }
-              if (typeof value2 === "boolean") {
-                return {
-                  type: "boolean",
-                  value: value2
-                };
-              }
-              if (value2 instanceof Date) {
-                return {
-                  type: "date",
-                  value: value2.toISOString()
-                };
-              }
-              if (Array.isArray(value2)) {
-                return value2.map((v) => converter(v));
-              }
-              if (typeof value2 === "object") {
-                return Object.entries(
-                  value2
-                ).reduce(reducer, {});
-              }
-            };
-            return {
-              ...acc,
-              [key]: converter(value)
-            };
-          },
-          {}
-        )
+        Object.entries(store.state).reduce(function reducer(acc, [key, value]) {
+          const converter = (value2) => {
+            if (value2 === void 0) {
+              return void 0;
+            }
+            if (value2 === null) {
+              return {
+                type: "null",
+                value: null
+              };
+            }
+            if (typeof value2 === "string") {
+              return {
+                type: "string",
+                value: value2
+              };
+            }
+            if (typeof value2 === "number") {
+              return {
+                type: "number",
+                value: value2
+              };
+            }
+            if (typeof value2 === "boolean") {
+              return {
+                type: "boolean",
+                value: value2
+              };
+            }
+            if (value2 instanceof Date) {
+              return {
+                type: "date",
+                value: value2.toISOString()
+              };
+            }
+            if (Array.isArray(value2)) {
+              return value2.map((v) => converter(v));
+            }
+            if (typeof value2 === "object") {
+              return Object.entries(value2).reduce(
+                reducer,
+                {}
+              );
+            }
+          };
+          return {
+            ...acc,
+            [key]: converter(value)
+          };
+        }, {})
       )
     });
     if (!res.ok) {

package/dist/crud/crud_loader.d.mts

@@ -1,4 +1,4 @@
-import { LoaderFunctionArgs } from 'react-router';
+import { LoaderFunction, LoaderFunctionArgs } from 'react-router';
 import { TableLoaderOptions } from '../table/loader.mjs';
 import { TableItemLoaderOptions } from '../table/item_loader.mjs';
 import { Table } from 'drizzle-orm';
@@ -12,10 +12,14 @@ import 'dn-react-toolkit/auth/server';
 type CrudHandlerOptions<T extends Table, TSelect> = {
     repository: TableRepository<T, TSelect>;
     apiHandlerOptions: Omit<APIHandlerOptions<T, TSelect>, "repository">;
-    loaderOptions: Omit<TableLoaderOptions<T, TSelect>, "repository">;
-    itemLoaderOptions: Omit<TableItemLoaderOptions<T, TSelect>, "repository">;
+    loaderOptions: Omit<TableLoaderOptions<T, TSelect>, "repository"> & {
+        loader?: LoaderFunction;
+    };
+    itemLoaderOptions: Omit<TableItemLoaderOptions<T, TSelect>, "repository"> & {
+        loader?: LoaderFunction;
+    };
 };
 type CrudHandler = (prefix: string) => (args: LoaderFunctionArgs) => Promise<any>;
-declare function crudHandler<T extends Table, TSelect>({ repository, apiHandlerOptions, loaderOptions, itemLoaderOptions, }: CrudHandlerOptions<T, TSelect>): (prefix: string) => (args: LoaderFunctionArgs) => Promise<any>;
+declare function crudHandler<T extends Table, TSelect>({ repository, apiHandlerOptions, loaderOptions, itemLoaderOptions, }: CrudHandlerOptions<T, TSelect>): (prefix: string) => (args: LoaderFunctionArgs) => Promise<unknown>;
 
 export { type CrudHandler, type CrudHandlerOptions, crudHandler };

package/dist/crud/crud_loader.d.ts

@@ -1,4 +1,4 @@
-import { LoaderFunctionArgs } from 'react-router';
+import { LoaderFunction, LoaderFunctionArgs } from 'react-router';
 import { TableLoaderOptions } from '../table/loader.js';
 import { TableItemLoaderOptions } from '../table/item_loader.js';
 import { Table } from 'drizzle-orm';
@@ -12,10 +12,14 @@ import 'dn-react-toolkit/auth/server';
 type CrudHandlerOptions<T extends Table, TSelect> = {
     repository: TableRepository<T, TSelect>;
     apiHandlerOptions: Omit<APIHandlerOptions<T, TSelect>, "repository">;
-    loaderOptions: Omit<TableLoaderOptions<T, TSelect>, "repository">;
-    itemLoaderOptions: Omit<TableItemLoaderOptions<T, TSelect>, "repository">;
+    loaderOptions: Omit<TableLoaderOptions<T, TSelect>, "repository"> & {
+        loader?: LoaderFunction;
+    };
+    itemLoaderOptions: Omit<TableItemLoaderOptions<T, TSelect>, "repository"> & {
+        loader?: LoaderFunction;
+    };
 };
 type CrudHandler = (prefix: string) => (args: LoaderFunctionArgs) => Promise<any>;
-declare function crudHandler<T extends Table, TSelect>({ repository, apiHandlerOptions, loaderOptions, itemLoaderOptions, }: CrudHandlerOptions<T, TSelect>): (prefix: string) => (args: LoaderFunctionArgs) => Promise<any>;
+declare function crudHandler<T extends Table, TSelect>({ repository, apiHandlerOptions, loaderOptions, itemLoaderOptions, }: CrudHandlerOptions<T, TSelect>): (prefix: string) => (args: LoaderFunctionArgs) => Promise<unknown>;
 
 export { type CrudHandler, type CrudHandlerOptions, crudHandler };

package/dist/crud/crud_loader.js

@@ -69,24 +69,16 @@ function tableLoader({
 
 // src/table/item_loader.tsx
 var tableItemloader = ({
-  loader,
   repository
 }) => {
-  return async ({ params }) => {
-    const body = loader ? await (async () => {
-      const result = await loader({ params });
-      if (result instanceof Response) {
-        return result.json();
-      }
-      return result;
-    })() : {};
+  return async (args) => {
+    const { params } = args;
     if (params["itemId"] === "new") {
-      return { item: void 0, ...body };
+      return { item: void 0 };
     }
     const item = params["itemId"] ? await repository.find(params["itemId"]) : void 0;
     return {
-      item,
-      ...body
+      item
     };
   };
 };
@@ -272,13 +264,35 @@ function crudHandler({
       }
     }
     if (pattern === prefix) {
-      return tableLoader({
+      const body = await tableLoader({
         ...loaderOptions,
         repository
       })(args);
+      if (loaderOptions.loader) {
+        const result = await loaderOptions.loader(args);
+        if (typeof result === "object") {
+          return {
+            ...result,
+            ...body
+          };
+        }
+      }
+      return body;
     }
     if (pattern.startsWith(prefix)) {
-      return tableItemloader({ ...itemLoaderOptions, repository })(args);
+      const body = await tableItemloader({ ...itemLoaderOptions, repository })(
+        args
+      );
+      if (itemLoaderOptions.loader) {
+        const result = await itemLoaderOptions.loader(args);
+        if (typeof result === "object") {
+          return {
+            ...result,
+            ...body
+          };
+        }
+      }
+      return body;
     }
   };
 }

package/dist/crud/crud_loader.mjs

@@ -46,24 +46,16 @@ function tableLoader({
 
 // src/table/item_loader.tsx
 var tableItemloader = ({
-  loader,
   repository
 }) => {
-  return async ({ params }) => {
-    const body = loader ? await (async () => {
-      const result = await loader({ params });
-      if (result instanceof Response) {
-        return result.json();
-      }
-      return result;
-    })() : {};
+  return async (args) => {
+    const { params } = args;
     if (params["itemId"] === "new") {
-      return { item: void 0, ...body };
+      return { item: void 0 };
     }
     const item = params["itemId"] ? await repository.find(params["itemId"]) : void 0;
     return {
-      item,
-      ...body
+      item
     };
   };
 };
@@ -258,13 +250,35 @@ function crudHandler({
       }
     }
     if (pattern === prefix) {
-      return tableLoader({
+      const body = await tableLoader({
         ...loaderOptions,
         repository
       })(args);
+      if (loaderOptions.loader) {
+        const result = await loaderOptions.loader(args);
+        if (typeof result === "object") {
+          return {
+            ...result,
+            ...body
+          };
+        }
+      }
+      return body;
     }
     if (pattern.startsWith(prefix)) {
-      return tableItemloader({ ...itemLoaderOptions, repository })(args);
+      const body = await tableItemloader({ ...itemLoaderOptions, repository })(
+        args
+      );
+      if (itemLoaderOptions.loader) {
+        const result = await itemLoaderOptions.loader(args);
+        if (typeof result === "object") {
+          return {
+            ...result,
+            ...body
+          };
+        }
+      }
+      return body;
     }
   };
 }

package/dist/crud/crud_page.d.mts

@@ -2,7 +2,6 @@ import { CrudFormProps } from './crud_form_provider.mjs';
 import { TablePageOptions } from '../table/page.mjs';
 import React from 'react';
 import 'dn-react-toolkit/store';
-import 'drizzle-orm/pg-core';
 import '../table/table.mjs';
 
 type CrudPageOptions<TModel, TPrimaryKey extends keyof TModel> = {