dn-react-router-toolkit 0.6.1 → 0.6.3

package/dist/crud/index.mjs

@@ -3,12 +3,107 @@ import { useNavigate } from "react-router";
 import { useStore } from "react-store-input";
 import { createContext, useContext } from "react";
 import React from "react";
+
+// src/crud/serialize.ts
+function serialize(value) {
+  if (value === void 0) {
+    return void 0;
+  }
+  if (value === null) {
+    return {
+      type: "null",
+      value: null
+    };
+  }
+  if (typeof value === "string") {
+    return {
+      type: "string",
+      value
+    };
+  }
+  if (typeof value === "number") {
+    return {
+      type: "number",
+      value
+    };
+  }
+  if (typeof value === "boolean") {
+    return {
+      type: "boolean",
+      value
+    };
+  }
+  if (value instanceof Date) {
+    return {
+      type: "date",
+      value: value.toISOString()
+    };
+  }
+  if (Array.isArray(value)) {
+    return {
+      type: "array",
+      value: value.map((item) => serialize(item))
+    };
+  }
+  if (typeof value === "object") {
+    return {
+      type: "object",
+      value: Object.entries(value).reduce(
+        (acc, [key, value2]) => {
+          return {
+            ...acc,
+            [key]: serialize(value2)
+          };
+        },
+        {}
+      )
+    };
+  }
+  return void 0;
+}
+function deserialize(data) {
+  if (data === void 0) {
+    return void 0;
+  }
+  if (typeof data === "object" && data !== null && "type" in data && "value" in data) {
+    const { type, value } = data;
+    switch (type) {
+      case "null":
+        return null;
+      case "string":
+        return value;
+      case "number":
+        return value;
+      case "boolean":
+        return value;
+      case "date":
+        return new Date(value);
+      case "array":
+        return value.map((item) => deserialize(item));
+      case "object":
+        return Object.entries(value).reduce(
+          (acc, [key, value2]) => {
+            return {
+              ...acc,
+              [key]: deserialize(value2)
+            };
+          },
+          {}
+        );
+      default:
+        return void 0;
+    }
+  }
+  return void 0;
+}
+
+// src/crud/crud_form_provider.tsx
 var FormContext = createContext({});
 function useFormContext() {
   return useContext(FormContext);
 }
 function CrudFormProvider({
-  primaryKey = "id",
+  primaryKey,
   name,
   prefix: prefix2,
   item,
@@ -17,7 +112,12 @@ function CrudFormProvider({
 }) {
   const apiPrefix = `/api${prefix2}`;
   const store = useStore({
-    ...item || {}
+    ...Object.entries(item || {}).reduce((acc, [key, value]) => {
+      return {
+        ...acc,
+        [key]: value ?? columns[key]?.defaultValue
+      };
+    }, {})
   });
   const navigate = useNavigate();
   const submit = async () => {
@@ -26,57 +126,7 @@ function CrudFormProvider({
       headers: {
         "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)
-          };
-        }, {})
-      )
+      body: JSON.stringify(serialize(store.state))
     });
     if (!res.ok) {
       const { message } = await res.json();
@@ -118,7 +168,6 @@ function CrudFormProvider({
 // src/crud/crud_form.tsx
 import React6 from "react";
 import { createTextEditor } from "dn-react-text-editor";
-import { Input, Select } from "react-store-input";
 
 // src/client/env_loader.tsx
 import React2 from "react";
@@ -142,7 +191,7 @@ function createStoreTextEditor(TextEditor2) {
     defaultValue,
     ...props
   }) {
-    const { ref, onChange } = useStoreController(
+    const { ref, dispatch } = useStoreController(
       store,
       {
         ref: props.ref,
@@ -179,7 +228,7 @@ function createStoreTextEditor(TextEditor2) {
         ref,
         defaultValue: defaultValue ?? getDefaultValue(),
         onChange: (e) => {
-          onChange();
+          dispatch();
           props.onChange?.(e);
         }
       }
@@ -210,9 +259,13 @@ var FormLabel = createComponent("label", {
 });
 
 // src/crud/crud_form.tsx
+import { useStoreComponent } from "react-store-input";
 var TextEditor = createStoreTextEditor(createTextEditor());
-function CrudForm({ AdminHeader }) {
+function CrudForm({
+  AdminHeader
+}) {
   const form = useFormContext();
+  const component = useStoreComponent(form.store);
   return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(
     AdminHeader,
     {
@@ -227,41 +280,32 @@ function CrudForm({ AdminHeader }) {
         "\uC800\uC7A5\uD558\uAE30"
       )
     }
-  ), /* @__PURE__ */ React6.createElement("div", { className: "max-w-2xl mx-auto" }, Object.keys(form.columns).length > 0 && /* @__PURE__ */ React6.createElement(React6.Fragment, null, Object.entries(
-    form.columns
-  ).map(([key, value]) => {
-    function InputComponent() {
-      if (value.type === "textarea") {
-        return /* @__PURE__ */ React6.createElement(TextEditor, { store: form.store, name: key });
-      }
-      if (value.options) {
-        const Component = value.options;
+  ), /* @__PURE__ */ React6.createElement("div", { className: "max-w-2xl mx-auto" }, Object.keys(form.columns).length > 0 && /* @__PURE__ */ React6.createElement(React6.Fragment, null, Object.entries(form.columns).map(
+    ([name, value]) => {
+      function InputComponent() {
+        if (value.type === "textarea") {
+          return /* @__PURE__ */ React6.createElement(TextEditor, { store: form.store, name });
+        }
+        if (value.options) {
+          const Component = value.options;
+          return /* @__PURE__ */ React6.createElement(component.select, { name, className: "select-form" }, /* @__PURE__ */ React6.createElement(Component, null));
+        }
         return /* @__PURE__ */ React6.createElement(
-          Select,
+          component.input,
           {
-            store: form.store,
-            name: key,
-            className: "select-form"
-          },
-          /* @__PURE__ */ React6.createElement(Component, null)
+            name,
+            type: value.type,
+            className: "input-form"
+          }
         );
       }
-      return /* @__PURE__ */ React6.createElement(
-        Input,
-        {
-          store: form.store,
-          name: key,
-          type: value.type,
-          className: "input-form"
-        }
-      );
-    }
-    const v = form.store.state[key];
-    if (typeof v === "boolean") {
-      return /* @__PURE__ */ React6.createElement("div", { className: "flex" }, value.label, /* @__PURE__ */ React6.createElement("div", { className: "ml-auto" }, /* @__PURE__ */ React6.createElement(InputComponent, null)));
+      const v = form.store.state[name];
+      if (typeof v === "boolean") {
+        return /* @__PURE__ */ React6.createElement("div", { className: "flex" }, value.label, /* @__PURE__ */ React6.createElement("div", { className: "ml-auto" }, /* @__PURE__ */ React6.createElement(InputComponent, null)));
+      }
+      return /* @__PURE__ */ React6.createElement(FormRow, null, /* @__PURE__ */ React6.createElement(FormEntry, null, /* @__PURE__ */ React6.createElement(FormLabel, { key: name }, value.label), /* @__PURE__ */ React6.createElement(InputComponent, null)));
     }
-    return /* @__PURE__ */ React6.createElement(FormRow, null, /* @__PURE__ */ React6.createElement(FormEntry, null, /* @__PURE__ */ React6.createElement(FormLabel, { key }, value.label), /* @__PURE__ */ React6.createElement(InputComponent, null)));
-  })), form.item && /* @__PURE__ */ React6.createElement(
+  )), form.item && /* @__PURE__ */ React6.createElement(
     "button",
     {
       className: "button-dangerous mt-8",
@@ -367,51 +411,10 @@ function apiHandler({
       case "POST":
       case "PUT": {
         const serilaizedParams = await request.json();
-        const params = Object.entries(serilaizedParams).reduce(
-          function reducer(acc, [key, value]) {
-            const converter = (value2) => {
-              if (value2.type === "null") {
-                return null;
-              }
-              if (value2.type === "string") {
-                return value2.value;
-              }
-              if (value2.type === "number") {
-                return value2.value;
-              }
-              if (value2.type === "boolean") {
-                return value2.value;
-              }
-              if (value2.type === "date") {
-                return new Date(value2.value);
-              }
-              if (Array.isArray(value2)) {
-                return value2.map((v) => converter(v));
-              }
-              if (typeof value2 === "object") {
-                return Object.entries(value2).reduce(
-                  reducer,
-                  {}
-                );
-              }
-            };
-            const result = converter(value);
-            if (result === void 0) {
-              return acc;
-            }
-            return {
-              ...acc,
-              [key]: result
-            };
-          },
-          {}
-        );
+        const params = deserialize(serilaizedParams);
         if (validators) {
           const paramsForValidation = Object.keys(validators).filter(
-            (key) => Object.prototype.hasOwnProperty.call(
-              validators,
-              key
-            )
+            (key) => Object.prototype.hasOwnProperty.call(validators, key)
           );
           for (const paramKey of paramsForValidation) {
             const value = params[paramKey];
@@ -901,7 +904,7 @@ function createTablePage({
   primaryKey = "id"
 }) {
   return function TablePage({
-    AdminHeader
+    header: Header
   }) {
     const { pathname } = useLocation2();
     const { table } = useLoaderData();
@@ -915,12 +918,12 @@ function createTablePage({
     };
     const [searchParams] = useSearchParams3();
     return /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(
-      AdminHeader,
+      Header,
       {
         title: name,
         actions: /* @__PURE__ */ React11.createElement(Link3, { to: `${pathname}/new`, className: "button-primary" }, name, " \uCD94\uAC00")
       }
-    ), /* @__PURE__ */ React11.createElement("div", { className: "max-w-7xl mx-auto" }, searchKey && /* @__PURE__ */ React11.createElement(
+    ), /* @__PURE__ */ React11.createElement("div", { className: "max-w-7xl mx-auto w-full overflow-auto" }, searchKey && /* @__PURE__ */ React11.createElement(
       "form",
       {
         className: "h-18 px-4 flex items-center border-t",
@@ -975,9 +978,10 @@ function createTablePage({
 import React12 from "react";
 function crudPage({
   name,
+  primaryKey,
   tablePageOptions,
   formOptions,
-  AdminHeader
+  header
 }) {
   return (prefix2) => {
     return function Page() {
@@ -988,7 +992,7 @@ function crudPage({
           ...tablePageOptions,
           name
         });
-        return /* @__PURE__ */ React12.createElement(Component, { AdminHeader });
+        return /* @__PURE__ */ React12.createElement(Component, { header });
       }
       if (pathname.startsWith(prefix2)) {
         return /* @__PURE__ */ React12.createElement(
@@ -997,9 +1001,10 @@ function crudPage({
             item: data?.item,
             prefix: prefix2,
             name,
-            columns: formOptions.columns
+            columns: formOptions.columns,
+            primaryKey
           },
-          formOptions.form ? /* @__PURE__ */ React12.createElement(formOptions.form, null) : /* @__PURE__ */ React12.createElement(CrudForm, { AdminHeader })
+          formOptions.form ? /* @__PURE__ */ React12.createElement(formOptions.form, null) : /* @__PURE__ */ React12.createElement(CrudForm, { AdminHeader: header })
         );
       }
     };

package/dist/crud/serialize.d.mts

@@ -0,0 +1,4 @@
+declare function serialize(value: unknown): unknown;
+declare function deserialize(data: unknown): unknown;
+
+export { deserialize, serialize };

package/dist/crud/serialize.d.ts

@@ -0,0 +1,4 @@
+declare function serialize(value: unknown): unknown;
+declare function deserialize(data: unknown): unknown;
+
+export { deserialize, serialize };

package/dist/crud/serialize.js

@@ -0,0 +1,122 @@
+"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/crud/serialize.ts
+var serialize_exports = {};
+__export(serialize_exports, {
+  deserialize: () => deserialize,
+  serialize: () => serialize
+});
+module.exports = __toCommonJS(serialize_exports);
+function serialize(value) {
+  if (value === void 0) {
+    return void 0;
+  }
+  if (value === null) {
+    return {
+      type: "null",
+      value: null
+    };
+  }
+  if (typeof value === "string") {
+    return {
+      type: "string",
+      value
+    };
+  }
+  if (typeof value === "number") {
+    return {
+      type: "number",
+      value
+    };
+  }
+  if (typeof value === "boolean") {
+    return {
+      type: "boolean",
+      value
+    };
+  }
+  if (value instanceof Date) {
+    return {
+      type: "date",
+      value: value.toISOString()
+    };
+  }
+  if (Array.isArray(value)) {
+    return {
+      type: "array",
+      value: value.map((item) => serialize(item))
+    };
+  }
+  if (typeof value === "object") {
+    return {
+      type: "object",
+      value: Object.entries(value).reduce(
+        (acc, [key, value2]) => {
+          return {
+            ...acc,
+            [key]: serialize(value2)
+          };
+        },
+        {}
+      )
+    };
+  }
+  return void 0;
+}
+function deserialize(data) {
+  if (data === void 0) {
+    return void 0;
+  }
+  if (typeof data === "object" && data !== null && "type" in data && "value" in data) {
+    const { type, value } = data;
+    switch (type) {
+      case "null":
+        return null;
+      case "string":
+        return value;
+      case "number":
+        return value;
+      case "boolean":
+        return value;
+      case "date":
+        return new Date(value);
+      case "array":
+        return value.map((item) => deserialize(item));
+      case "object":
+        return Object.entries(value).reduce(
+          (acc, [key, value2]) => {
+            return {
+              ...acc,
+              [key]: deserialize(value2)
+            };
+          },
+          {}
+        );
+      default:
+        return void 0;
+    }
+  }
+  return void 0;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  deserialize,
+  serialize
+});

package/dist/crud/serialize.mjs

@@ -0,0 +1,96 @@
+// src/crud/serialize.ts
+function serialize(value) {
+  if (value === void 0) {
+    return void 0;
+  }
+  if (value === null) {
+    return {
+      type: "null",
+      value: null
+    };
+  }
+  if (typeof value === "string") {
+    return {
+      type: "string",
+      value
+    };
+  }
+  if (typeof value === "number") {
+    return {
+      type: "number",
+      value
+    };
+  }
+  if (typeof value === "boolean") {
+    return {
+      type: "boolean",
+      value
+    };
+  }
+  if (value instanceof Date) {
+    return {
+      type: "date",
+      value: value.toISOString()
+    };
+  }
+  if (Array.isArray(value)) {
+    return {
+      type: "array",
+      value: value.map((item) => serialize(item))
+    };
+  }
+  if (typeof value === "object") {
+    return {
+      type: "object",
+      value: Object.entries(value).reduce(
+        (acc, [key, value2]) => {
+          return {
+            ...acc,
+            [key]: serialize(value2)
+          };
+        },
+        {}
+      )
+    };
+  }
+  return void 0;
+}
+function deserialize(data) {
+  if (data === void 0) {
+    return void 0;
+  }
+  if (typeof data === "object" && data !== null && "type" in data && "value" in data) {
+    const { type, value } = data;
+    switch (type) {
+      case "null":
+        return null;
+      case "string":
+        return value;
+      case "number":
+        return value;
+      case "boolean":
+        return value;
+      case "date":
+        return new Date(value);
+      case "array":
+        return value.map((item) => deserialize(item));
+      case "object":
+        return Object.entries(value).reduce(
+          (acc, [key, value2]) => {
+            return {
+              ...acc,
+              [key]: deserialize(value2)
+            };
+          },
+          {}
+        );
+      default:
+        return void 0;
+    }
+  }
+  return void 0;
+}
+export {
+  deserialize,
+  serialize
+};

package/dist/table/index.js

@@ -480,7 +480,7 @@ function createTablePage({
   primaryKey = "id"
 }) {
   return function TablePage({
-    AdminHeader
+    header: Header
   }) {
     const { pathname } = (0, import_react_router3.useLocation)();
     const { table } = (0, import_react_router3.useLoaderData)();
@@ -494,12 +494,12 @@ function createTablePage({
     };
     const [searchParams] = (0, import_react_router3.useSearchParams)();
     return /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, /* @__PURE__ */ import_react5.default.createElement(
-      AdminHeader,
+      Header,
       {
         title: name,
         actions: /* @__PURE__ */ import_react5.default.createElement(import_react_router3.Link, { to: `${pathname}/new`, className: "button-primary" }, name, " \uCD94\uAC00")
       }
-    ), /* @__PURE__ */ import_react5.default.createElement("div", { className: "max-w-7xl mx-auto" }, searchKey && /* @__PURE__ */ import_react5.default.createElement(
+    ), /* @__PURE__ */ import_react5.default.createElement("div", { className: "max-w-7xl mx-auto w-full overflow-auto" }, searchKey && /* @__PURE__ */ import_react5.default.createElement(
       "form",
       {
         className: "h-18 px-4 flex items-center border-t",

package/dist/table/index.mjs

@@ -454,7 +454,7 @@ function createTablePage({
   primaryKey = "id"
 }) {
   return function TablePage({
-    AdminHeader
+    header: Header
   }) {
     const { pathname } = useLocation2();
     const { table } = useLoaderData();
@@ -468,12 +468,12 @@ function createTablePage({
     };
     const [searchParams] = useSearchParams3();
     return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(
-      AdminHeader,
+      Header,
       {
         title: name,
         actions: /* @__PURE__ */ React5.createElement(Link3, { to: `${pathname}/new`, className: "button-primary" }, name, " \uCD94\uAC00")
       }
-    ), /* @__PURE__ */ React5.createElement("div", { className: "max-w-7xl mx-auto" }, searchKey && /* @__PURE__ */ React5.createElement(
+    ), /* @__PURE__ */ React5.createElement("div", { className: "max-w-7xl mx-auto w-full overflow-auto" }, searchKey && /* @__PURE__ */ React5.createElement(
       "form",
       {
         className: "h-18 px-4 flex items-center border-t",

package/dist/table/page.d.mts

@@ -15,8 +15,8 @@ type TablePageOptions<TModel> = {
     columns: TableColumnOptions<TModel>;
     primaryKey?: keyof TModel;
 };
-declare function createTablePage<TModel>({ name, columns, primaryKey, }: TablePageOptions<TModel>): ({ AdminHeader, }: {
-    AdminHeader: React__default.FC<{
+declare function createTablePage<TModel>({ name, columns, primaryKey, }: TablePageOptions<TModel>): ({ header: Header, }: {
+    header: React__default.FC<{
         title: string;
         actions?: React__default.ReactNode;
     }>;

package/dist/table/page.d.ts

@@ -15,8 +15,8 @@ type TablePageOptions<TModel> = {
     columns: TableColumnOptions<TModel>;
     primaryKey?: keyof TModel;
 };
-declare function createTablePage<TModel>({ name, columns, primaryKey, }: TablePageOptions<TModel>): ({ AdminHeader, }: {
-    AdminHeader: React__default.FC<{
+declare function createTablePage<TModel>({ name, columns, primaryKey, }: TablePageOptions<TModel>): ({ header: Header, }: {
+    header: React__default.FC<{
         title: string;
         actions?: React__default.ReactNode;
     }>;