dn-react-router-toolkit 0.5.8 → 0.6.0

package/dist/crud/crud_page.mjs

@@ -3,7 +3,7 @@ import { useLoaderData as useLoaderData2, useLocation as useLocation3 } from "re
 
 // src/crud/crud_form_provider.tsx
 import { useNavigate } from "react-router";
-import { useStore } from "dn-react-toolkit/store";
+import { useStore } from "react-store-input";
 import { createContext, useContext } from "react";
 import React from "react";
 var FormContext = createContext({});
@@ -69,10 +69,9 @@ function CrudFormProvider({
               return value2.map((v) => converter(v));
             }
             if (typeof value2 === "object") {
-              return Object.entries(value2).reduce(
-                reducer,
-                {}
-              );
+              return Object.entries(
+                value2
+              ).reduce(reducer, {});
             }
           };
           return {
@@ -459,7 +458,7 @@ function createTablePage({
   primaryKey = "id"
 }) {
   return function TablePage({
-    AdminLayout
+    AdminHeader
   }) {
     const { pathname } = useLocation2();
     const { table } = useLoaderData();
@@ -472,189 +471,228 @@ function createTablePage({
       navigate(`${pathname}?${searchParams2.toString()}`);
     };
     const [searchParams] = useSearchParams3();
-    return /* @__PURE__ */ React6.createElement(
-      AdminLayout,
+    return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(
+      AdminHeader,
       {
         title: name,
         actions: /* @__PURE__ */ React6.createElement(Link3, { to: `${pathname}/new`, className: "button-primary" }, name, " \uCD94\uAC00")
+      }
+    ), /* @__PURE__ */ React6.createElement("div", { className: "max-w-7xl mx-auto" }, searchKey && /* @__PURE__ */ React6.createElement(
+      "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);
+        }
       },
-      searchKey && /* @__PURE__ */ React6.createElement(
-        "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);
-          }
-        },
-        /* @__PURE__ */ React6.createElement(
-          "button",
-          {
-            type: "submit",
-            className: "w-10 h-10 flex justify-center items-center"
-          },
-          /* @__PURE__ */ React6.createElement(GoSearch, { className: "text-xl mr-4" })
-        ),
-        /* @__PURE__ */ React6.createElement(
-          "input",
-          {
-            className: "outline-none h-full flex-1",
-            placeholder: "\uC5EC\uAE30\uC5D0 \uAC80\uC0C9\uD558\uC138\uC694...",
-            name: "query",
-            defaultValue: searchParams.get("query") ?? ""
-          }
-        )
-      ),
       /* @__PURE__ */ React6.createElement(
-        Table,
+        "button",
         {
-          data: items,
-          columns,
-          getLink: primaryKey ? (item) => `${pathname}/${item[primaryKey]}` : void 0,
-          limit,
-          offset,
-          orderBy,
-          direction
-        }
+          type: "submit",
+          className: "w-10 h-10 flex justify-center items-center"
+        },
+        /* @__PURE__ */ React6.createElement(GoSearch, { className: "text-xl mr-4" })
       ),
       /* @__PURE__ */ React6.createElement(
-        TablePageButtons,
+        "input",
         {
-          total,
-          limit,
-          offset,
-          MAX_PAGES_TO_SHOW: 10
+          className: "outline-none h-full flex-1",
+          placeholder: "\uC5EC\uAE30\uC5D0 \uAC80\uC0C9\uD558\uC138\uC694...",
+          name: "query",
+          defaultValue: searchParams.get("query") ?? ""
         }
       )
-    );
+    ), /* @__PURE__ */ React6.createElement(
+      Table,
+      {
+        data: items,
+        columns,
+        getLink: primaryKey ? (item) => `${pathname}/${item[primaryKey]}` : void 0,
+        limit,
+        offset,
+        orderBy,
+        direction
+      }
+    ), /* @__PURE__ */ React6.createElement(
+      TablePageButtons,
+      {
+        total,
+        limit,
+        offset,
+        MAX_PAGES_TO_SHOW: 10
+      }
+    )));
   };
 }
 
 // src/crud/crud_form.tsx
-import {
-  SyncInput,
-  SyncSelect,
-  SyncSwitch,
-  useSyncTextEditor
-} from "dn-react-toolkit/store";
+import React11 from "react";
+import { createTextEditor } from "dn-react-text-editor";
+import { Input, Select } from "react-store-input";
+
+// src/client/env_loader.tsx
 import React7 from "react";
-import { moment } from "dn-react-toolkit/utils";
-import { createTextEditor } from "dn-react-toolkit/text_editor";
-var textarea = createTextEditor();
-function CrudForm({ AdminLayout }) {
+import { useRouteLoaderData } from "react-router";
+
+// src/client/file_input.tsx
+import "react";
+import React8 from "react";
+
+// src/client/use_user_agent.tsx
+import { useRouteLoaderData as useRouteLoaderData2 } from "react-router";
+
+// src/client/store_text_editor.tsx
+import "dn-react-text-editor";
+import { useStoreController } from "react-store-input";
+import React9 from "react";
+function createStoreTextEditor(TextEditor2) {
+  function StoreComponent({
+    store,
+    name,
+    defaultValue,
+    ...props
+  }) {
+    const { ref, onChange } = useStoreController(
+      store,
+      {
+        ref: props.ref,
+        onSubscribe: (state, element) => {
+          const result = (props.getter ? props.getter(state) : name ? state[name] : "") || "";
+          if (element.value !== result) {
+            element.value = result;
+          }
+        },
+        onDispatch: (state, element) => {
+          if (props.setter) {
+            props.setter(state, element.value);
+            return;
+          }
+          if (name) {
+            state[name] = element.value;
+          }
+        }
+      }
+    );
+    const getDefaultValue = () => {
+      if (props.getter) {
+        return props.getter(store.state);
+      }
+      if (name) {
+        return store.state[name];
+      }
+      return void 0;
+    };
+    return /* @__PURE__ */ React9.createElement(
+      TextEditor2,
+      {
+        ...props,
+        ref,
+        defaultValue: defaultValue ?? getDefaultValue(),
+        onChange: (e) => {
+          onChange();
+          props.onChange?.(e);
+        }
+      }
+    );
+  }
+  return StoreComponent;
+}
+
+// src/form/create_form_component.tsx
+import { cn as cn3 } from "dn-react-toolkit/utils";
+import React10 from "react";
+function createComponent(tag, options) {
+  return function FormComponent({ className, ...props }) {
+    const Tag = tag;
+    return /* @__PURE__ */ React10.createElement(Tag, { ...props, className: cn3(options.className, className) });
+  };
+}
+
+// src/form/form_components.tsx
+var FormEntry = createComponent("div", {
+  className: "flex-1"
+});
+var FormRow = createComponent("div", {
+  className: "flex-1 flex gap-4 mb-6"
+});
+var FormLabel = createComponent("label", {
+  className: "flex-1 font-semibold mb-2.5 block"
+});
+
+// src/crud/crud_form.tsx
+var TextEditor = createStoreTextEditor(createTextEditor());
+function CrudForm({ AdminHeader }) {
   const form = useFormContext();
-  return /* @__PURE__ */ React7.createElement(
-    AdminLayout,
+  return /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(
+    AdminHeader,
     {
       title: `${form.name} ${form.item ? "\uC218\uC815" : "\uCD94\uAC00"}`,
-      actions: /* @__PURE__ */ React7.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__ */ React7.createElement(React7.Fragment, null, Object.entries(
-      form.columns
-    ).map(([key, value]) => {
-      const createComponent = () => {
-        if (value.component) {
-          return /* @__PURE__ */ React7.createElement(value.component, { store: form.store, property: key });
-        }
-        if (value.type === "checkbox") {
-          return /* @__PURE__ */ React7.createElement(SyncSwitch, { store: form.store, property: key });
-        }
-        if (value.type === "number") {
-          return /* @__PURE__ */ React7.createElement(
-            SyncInput,
-            {
-              store: form.store,
-              property: key,
-              className: "input-form",
-              type: "number",
-              serializer: (value2) => {
-                if (value2 === void 0 || value2 === null) {
-                  return "";
-                }
-                return String(value2);
-              },
-              deserializer: (value2) => {
-                const parsed = Number(value2);
-                if (isNaN(parsed)) {
-                  return void 0;
-                }
-                return parsed;
-              }
-            }
-          );
-        }
-        if (value.type === "datetime") {
-          return /* @__PURE__ */ React7.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.type === "textarea") {
-          const Editor = useSyncTextEditor(textarea);
-          return /* @__PURE__ */ React7.createElement(
-            Editor.SyncTextEditor,
-            {
-              store: form.store,
-              property: key
-            }
-          );
-        }
-        if (value.options) {
-          const Component = value.options;
-          return /* @__PURE__ */ React7.createElement(SyncSelect, { store: form.store, property: key }, /* @__PURE__ */ React7.createElement(Component, null));
-        }
-        return /* @__PURE__ */ React7.createElement(
-          SyncInput,
+      actions: /* @__PURE__ */ React11.createElement(
+        "button",
+        {
+          type: "button",
+          className: "button-primary",
+          onClick: form.submit
+        },
+        "\uC800\uC7A5\uD558\uAE30"
+      )
+    }
+  ), /* @__PURE__ */ React11.createElement("div", { className: "max-w-2xl mx-auto" }, Object.keys(form.columns).length > 0 && /* @__PURE__ */ React11.createElement(React11.Fragment, null, Object.entries(
+    form.columns
+  ).map(([key, value]) => {
+    function InputComponent() {
+      if (value.type === "textarea") {
+        return /* @__PURE__ */ React11.createElement(TextEditor, { store: form.store, name: key });
+      }
+      if (value.options) {
+        const Component = value.options;
+        return /* @__PURE__ */ React11.createElement(
+          Select,
           {
             store: form.store,
-            property: key,
-            type: value.type,
-            className: "input-form"
-          }
+            name: key,
+            className: "select-form"
+          },
+          /* @__PURE__ */ React11.createElement(Component, null)
         );
-      };
-      return /* @__PURE__ */ React7.createElement("label", { key }, value.label, createComponent());
-    })),
-    form.item && /* @__PURE__ */ React7.createElement(
-      "button",
-      {
-        className: "button-dangerous mt-8",
-        onClick: () => {
-          form.delete();
+      }
+      return /* @__PURE__ */ React11.createElement(
+        Input,
+        {
+          store: form.store,
+          name: key,
+          type: value.type,
+          className: "input-form"
         }
-      },
-      "\uC0AD\uC81C\uD558\uAE30"
-    )
-  );
+      );
+    }
+    const v = form.store.state[key];
+    if (typeof v === "boolean") {
+      return /* @__PURE__ */ React11.createElement("div", { className: "flex" }, value.label, /* @__PURE__ */ React11.createElement("div", { className: "ml-auto" }, /* @__PURE__ */ React11.createElement(InputComponent, null)));
+    }
+    return /* @__PURE__ */ React11.createElement(FormRow, null, /* @__PURE__ */ React11.createElement(FormEntry, null, /* @__PURE__ */ React11.createElement(FormLabel, { key }, value.label), /* @__PURE__ */ React11.createElement(InputComponent, null)));
+  })), form.item && /* @__PURE__ */ React11.createElement(
+    "button",
+    {
+      className: "button-dangerous mt-8",
+      onClick: () => {
+        form.delete();
+      }
+    },
+    "\uC0AD\uC81C\uD558\uAE30"
+  )));
 }
 
 // src/crud/crud_page.tsx
-import React8 from "react";
+import React12 from "react";
 function crudPage({
   name,
   tablePageOptions,
   formOptions,
-  AdminLayout
+  AdminHeader
 }) {
   return (prefix) => {
     return function Page() {
@@ -665,10 +703,10 @@ function crudPage({
           ...tablePageOptions,
           name
         });
-        return /* @__PURE__ */ React8.createElement(Component, { AdminLayout });
+        return /* @__PURE__ */ React12.createElement(Component, { AdminHeader });
       }
       if (pathname.startsWith(prefix)) {
-        return /* @__PURE__ */ React8.createElement(
+        return /* @__PURE__ */ React12.createElement(
           CrudFormProvider,
           {
             item: data?.item,
@@ -676,7 +714,7 @@ function crudPage({
             name,
             columns: formOptions.columns
           },
-          formOptions.form ? /* @__PURE__ */ React8.createElement(formOptions.form, null) : /* @__PURE__ */ React8.createElement(CrudForm, { AdminLayout })
+          formOptions.form ? /* @__PURE__ */ React12.createElement(formOptions.form, null) : /* @__PURE__ */ React12.createElement(CrudForm, { AdminHeader })
         );
       }
     };

package/dist/crud/generate_pages.d.mts

@@ -1,10 +1,10 @@
 import { CrudPage } from './crud_page.mjs';
-import React from 'react';
+import React__default from 'react';
 import './crud_form_provider.mjs';
-import 'dn-react-toolkit/store';
+import 'react-store-input';
 import '../table/page.mjs';
 import '../table/table.mjs';
 
-declare const generatePages: (pages: Record<string, CrudPage>) => () => React.JSX.Element | undefined;
+declare const generatePages: (pages: Record<string, CrudPage>) => () => React__default.JSX.Element | undefined;
 
 export { generatePages };

package/dist/crud/generate_pages.d.ts

@@ -1,10 +1,10 @@
 import { CrudPage } from './crud_page.js';
-import React from 'react';
+import React__default from 'react';
 import './crud_form_provider.js';
-import 'dn-react-toolkit/store';
+import 'react-store-input';
 import '../table/page.js';
 import '../table/table.js';
 
-declare const generatePages: (pages: Record<string, CrudPage>) => () => React.JSX.Element | undefined;
+declare const generatePages: (pages: Record<string, CrudPage>) => () => React__default.JSX.Element | undefined;
 
 export { generatePages };

package/dist/crud/index.d.mts

@@ -4,7 +4,7 @@ export { CrudPage, CrudPageOptions, crudPage } from './crud_page.mjs';
 export { generateHandlers } from './generate_handlers.mjs';
 export { generatePages } from './generate_pages.mjs';
 export { generateCrudRoutes } from './generate_routes.mjs';
-import 'dn-react-toolkit/store';
+import 'react-store-input';
 import 'react';
 import 'react-router';
 import '../table/loader.mjs';

package/dist/crud/index.d.ts

@@ -4,7 +4,7 @@ export { CrudPage, CrudPageOptions, crudPage } from './crud_page.js';
 export { generateHandlers } from './generate_handlers.js';
 export { generatePages } from './generate_pages.js';
 export { generateCrudRoutes } from './generate_routes.js';
-import 'dn-react-toolkit/store';
+import 'react-store-input';
 import 'react';
 import 'react-router';
 import '../table/loader.js';