dn-react-router-toolkit 0.4.4 → 0.5.1

package/dist/crud/crud_form.d.mts

@@ -0,0 +1,13 @@
+import React from 'react';
+
+type Props = {
+    AdminLayout: React.FC<{
+        title: string;
+        actions?: React.ReactNode;
+        className?: string;
+        children?: React.ReactNode;
+    }>;
+};
+declare function CrudForm<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof TModel ? "id" : never>({ AdminLayout }: Props): React.JSX.Element;
+
+export { CrudForm as default };

package/dist/crud/crud_form.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+
+type Props = {
+    AdminLayout: React.FC<{
+        title: string;
+        actions?: React.ReactNode;
+        className?: string;
+        children?: React.ReactNode;
+    }>;
+};
+declare function CrudForm<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof TModel ? "id" : never>({ AdminLayout }: Props): React.JSX.Element;
+
+export { CrudForm as default };

package/dist/crud/crud_form.js

@@ -0,0 +1,88 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/crud/crud_form.tsx
+var crud_form_exports = {};
+__export(crud_form_exports, {
+  default: () => CrudForm
+});
+module.exports = __toCommonJS(crud_form_exports);
+
+// src/crud/crud_form_provider.tsx
+var import_react_router = require("react-router");
+var import_store = require("dn-react-toolkit/store");
+var import_react = require("react");
+var import_react2 = __toESM(require("react"));
+var FormContext = (0, import_react.createContext)({});
+function useFormContext() {
+  return (0, import_react.useContext)(FormContext);
+}
+
+// src/crud/crud_form.tsx
+var import_store2 = require("dn-react-toolkit/store");
+var import_react3 = __toESM(require("react"));
+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"
+      ),
+      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"
+        }
+      ))
+    )),
+    form.item && /* @__PURE__ */ import_react3.default.createElement(
+      "button",
+      {
+        className: "button-dangerous mt-8",
+        onClick: () => {
+          form.delete();
+        }
+      },
+      "\uC0AD\uC81C\uD558\uAE30"
+    )
+  );
+}

package/dist/crud/crud_form.mjs

@@ -0,0 +1,55 @@
+// src/crud/crud_form_provider.tsx
+import { useNavigate } from "react-router";
+import { useStore } from "dn-react-toolkit/store";
+import { createContext, useContext } from "react";
+import React from "react";
+var FormContext = createContext({});
+function useFormContext() {
+  return useContext(FormContext);
+}
+
+// src/crud/crud_form.tsx
+import { SyncInput } from "dn-react-toolkit/store";
+import React2 from "react";
+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"
+      ),
+      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"
+        }
+      ))
+    )),
+    form.item && /* @__PURE__ */ React2.createElement(
+      "button",
+      {
+        className: "button-dangerous mt-8",
+        onClick: () => {
+          form.delete();
+        }
+      },
+      "\uC0AD\uC81C\uD558\uAE30"
+    )
+  );
+}
+export {
+  CrudForm as default
+};

package/dist/crud/crud_form_provider.d.mts

@@ -0,0 +1,34 @@
+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 = {
+    label: string;
+    component?: React.FC;
+};
+type FormColumns<T> = Partial<{
+    [K in T extends PgTableWithColumns<infer U> ? keyof U["columns"] : never]: FormColumnValue;
+}>;
+declare const FormContext: React.Context<{}>;
+declare function useFormContext<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof TModel ? "id" : never>(): {
+    name: string;
+    item?: TModel;
+    store: RxStore<FormState<TModel, TPrimaryKey>>;
+    submit: () => Promise<void>;
+    delete: () => Promise<void>;
+    columns: FormColumns<TModel>;
+};
+type CrudFormProps<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof TModel ? "id" : never> = {
+    primaryKey?: TPrimaryKey;
+    name: string;
+    prefix: string;
+    item?: TModel;
+    columns?: FormColumns<TModel>;
+    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;
+
+export { type CrudFormProps, type FormColumnValue, type FormColumns, FormContext, type FormState, CrudFormProvider as default, useFormContext };

package/dist/crud/crud_form_provider.d.ts

@@ -0,0 +1,34 @@
+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 = {
+    label: string;
+    component?: React.FC;
+};
+type FormColumns<T> = Partial<{
+    [K in T extends PgTableWithColumns<infer U> ? keyof U["columns"] : never]: FormColumnValue;
+}>;
+declare const FormContext: React.Context<{}>;
+declare function useFormContext<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof TModel ? "id" : never>(): {
+    name: string;
+    item?: TModel;
+    store: RxStore<FormState<TModel, TPrimaryKey>>;
+    submit: () => Promise<void>;
+    delete: () => Promise<void>;
+    columns: FormColumns<TModel>;
+};
+type CrudFormProps<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof TModel ? "id" : never> = {
+    primaryKey?: TPrimaryKey;
+    name: string;
+    prefix: string;
+    item?: TModel;
+    columns?: FormColumns<TModel>;
+    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;
+
+export { type CrudFormProps, type FormColumnValue, type FormColumns, FormContext, type FormState, CrudFormProvider as default, useFormContext };

package/dist/crud/crud_form_provider.js

@@ -0,0 +1,160 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/crud/crud_form_provider.tsx
+var crud_form_provider_exports = {};
+__export(crud_form_provider_exports, {
+  FormContext: () => FormContext,
+  default: () => CrudFormProvider,
+  useFormContext: () => useFormContext
+});
+module.exports = __toCommonJS(crud_form_provider_exports);
+var import_react_router = require("react-router");
+var import_store = require("dn-react-toolkit/store");
+var import_react = require("react");
+var import_react2 = __toESM(require("react"));
+var FormContext = (0, import_react.createContext)({});
+function useFormContext() {
+  return (0, import_react.useContext)(FormContext);
+}
+function CrudFormProvider({
+  primaryKey = "id",
+  name,
+  prefix,
+  item,
+  columns = {},
+  children
+}) {
+  const apiPrefix = `/api${prefix}`;
+  const store = (0, import_store.useStore)({
+    ...item || {}
+  });
+  const navigate = (0, import_react_router.useNavigate)();
+  const submit = async () => {
+    const res = await fetch(apiPrefix, {
+      method: "POST",
+      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)
+            };
+          },
+          {}
+        )
+      )
+    });
+    if (!res.ok) {
+      const { message } = await res.json();
+      alert(message);
+      return;
+    }
+    alert(`${name}\uB97C \uC800\uC7A5\uD588\uC2B5\uB2C8\uB2E4.`);
+    const { id } = await res.json();
+    navigate(`${prefix}/${id}`);
+  };
+  const deleteItem = async () => {
+    if (!item || !primaryKey) {
+      return;
+    }
+    const ok = confirm("\uC815\uB9D0\uB85C \uC0AD\uC81C\uD558\uC2DC\uACA0\uC2B5\uB2C8\uAE4C?");
+    if (!ok) {
+      return;
+    }
+    const res = await fetch(`${apiPrefix}/${item[primaryKey]}`, {
+      method: "DELETE"
+    });
+    if (!res.ok) {
+      const { message } = await res.json();
+      alert(message);
+      return;
+    }
+    alert(`${name}\uB97C \uC0AD\uC81C\uD588\uC2B5\uB2C8\uB2E4.`);
+    navigate(`${prefix}`);
+  };
+  return /* @__PURE__ */ import_react2.default.createElement(
+    FormContext.Provider,
+    {
+      value: { name, item, store, submit, delete: deleteItem, columns }
+    },
+    children
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FormContext,
+  useFormContext
+});

package/dist/crud/crud_form_provider.mjs

@@ -0,0 +1,124 @@
+// src/crud/crud_form_provider.tsx
+import { useNavigate } from "react-router";
+import { useStore } from "dn-react-toolkit/store";
+import { createContext, useContext } from "react";
+import React from "react";
+var FormContext = createContext({});
+function useFormContext() {
+  return useContext(FormContext);
+}
+function CrudFormProvider({
+  primaryKey = "id",
+  name,
+  prefix,
+  item,
+  columns = {},
+  children
+}) {
+  const apiPrefix = `/api${prefix}`;
+  const store = useStore({
+    ...item || {}
+  });
+  const navigate = useNavigate();
+  const submit = async () => {
+    const res = await fetch(apiPrefix, {
+      method: "POST",
+      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)
+            };
+          },
+          {}
+        )
+      )
+    });
+    if (!res.ok) {
+      const { message } = await res.json();
+      alert(message);
+      return;
+    }
+    alert(`${name}\uB97C \uC800\uC7A5\uD588\uC2B5\uB2C8\uB2E4.`);
+    const { id } = await res.json();
+    navigate(`${prefix}/${id}`);
+  };
+  const deleteItem = async () => {
+    if (!item || !primaryKey) {
+      return;
+    }
+    const ok = confirm("\uC815\uB9D0\uB85C \uC0AD\uC81C\uD558\uC2DC\uACA0\uC2B5\uB2C8\uAE4C?");
+    if (!ok) {
+      return;
+    }
+    const res = await fetch(`${apiPrefix}/${item[primaryKey]}`, {
+      method: "DELETE"
+    });
+    if (!res.ok) {
+      const { message } = await res.json();
+      alert(message);
+      return;
+    }
+    alert(`${name}\uB97C \uC0AD\uC81C\uD588\uC2B5\uB2C8\uB2E4.`);
+    navigate(`${prefix}`);
+  };
+  return /* @__PURE__ */ React.createElement(
+    FormContext.Provider,
+    {
+      value: { name, item, store, submit, delete: deleteItem, columns }
+    },
+    children
+  );
+}
+export {
+  FormContext,
+  CrudFormProvider as default,
+  useFormContext
+};

package/dist/crud/crud_loader.d.mts

@@ -0,0 +1,21 @@
+import { LoaderFunctionArgs } from 'react-router';
+import { TableLoaderOptions } from '../table/loader.mjs';
+import { TableItemLoaderOptions } from '../table/item_loader.mjs';
+import { Table } from 'drizzle-orm';
+import { TableRepository } from '../table/repository.mjs';
+import { APIHandlerOptions } from '../api/create_api_handler.mjs';
+import 'drizzle-orm/pg-core';
+import '../auth/with_auth.mjs';
+import 'dn-react-toolkit/auth';
+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">;
+};
+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>;
+
+export { type CrudHandler, type CrudHandlerOptions, crudHandler };

package/dist/crud/crud_loader.d.ts

@@ -0,0 +1,21 @@
+import { LoaderFunctionArgs } from 'react-router';
+import { TableLoaderOptions } from '../table/loader.js';
+import { TableItemLoaderOptions } from '../table/item_loader.js';
+import { Table } from 'drizzle-orm';
+import { TableRepository } from '../table/repository.js';
+import { APIHandlerOptions } from '../api/create_api_handler.js';
+import 'drizzle-orm/pg-core';
+import '../auth/with_auth.js';
+import 'dn-react-toolkit/auth';
+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">;
+};
+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>;
+
+export { type CrudHandler, type CrudHandlerOptions, crudHandler };