dn-react-router-toolkit 0.8.1 → 0.9.0

package/dist/crud/crud_page.mjs

@@ -1,758 +0,0 @@
-// src/crud/crud_page.tsx
-import { useLoaderData as useLoaderData2, useLocation as useLocation4 } from "react-router";
-
-// src/crud/crud_form_provider.tsx
-import { useNavigate } from "react-router";
-import { useStore } from "react-store-input";
-import {
-  createContext,
-  useContext
-} 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;
-}
-
-// src/crud/crud_form_provider.tsx
-import { Korean } from "dn-react-toolkit/utils";
-import { jsx } from "react/jsx-runtime";
-var FormContext = createContext({});
-function useFormContext() {
-  return useContext(FormContext);
-}
-function CrudFormProvider({
-  primaryKey,
-  name,
-  prefix,
-  item,
-  columns = {},
-  children
-}) {
-  const apiPrefix = `/api${prefix}`;
-  const createInitialState = () => {
-    return Object.keys(item || columns).reduce((acc, key) => {
-      const value2 = item ? item[key] : void 0;
-      if (columns[key]?.defaultValue !== void 0) {
-        if (typeof value2 === "number") {
-          return {
-            ...acc,
-            [key]: value2 ?? columns[key]?.defaultValue
-          };
-        }
-        return {
-          ...acc,
-          [key]: value2 || columns[key]?.defaultValue
-        };
-      }
-      return {
-        ...acc,
-        [key]: value2
-      };
-    }, {});
-  };
-  const store = useStore(createInitialState());
-  const navigate = useNavigate();
-  const submit = async () => {
-    const res = await fetch(apiPrefix, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json"
-      },
-      body: JSON.stringify(serialize(store.state))
-    });
-    if (!res.ok) {
-      const { message } = await res.json();
-      alert(message);
-      return;
-    }
-    alert(`${Korean.with(name, ["\uC744", "\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(`${Korean.with(name, ["\uC744", "\uB97C"])} \uC0AD\uC81C\uD588\uC2B5\uB2C8\uB2E4.`);
-    navigate(`${prefix}`);
-  };
-  const value = {
-    name,
-    item,
-    store,
-    submit,
-    delete: deleteItem,
-    columns
-  };
-  return /* @__PURE__ */ jsx(FormContext.Provider, { value, children });
-}
-
-// src/table/page.tsx
-import { Link as Link3, useLocation as useLocation3 } from "react-router";
-
-// src/table/table_form.tsx
-import { useLocation as useLocation2, useNavigate as useNavigate2, useSearchParams as useSearchParams3 } from "react-router";
-import { GoSearch } from "react-icons/go";
-
-// src/table/table.tsx
-import { cn } from "dn-react-toolkit/utils";
-import { GoArrowDown, GoArrowUp } from "react-icons/go";
-import { Link, useSearchParams } from "react-router";
-import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
-function Table({
-  className = "min-w-full whitespace-nowrap",
-  data,
-  columns,
-  mapper: Mapper,
-  getLink,
-  limit,
-  offset,
-  orderBy,
-  direction,
-  filters
-}) {
-  const keys = Object.entries(columns).filter((entry) => entry[1]).map(([key]) => key);
-  const sortedArray = [...data];
-  const [_, setSearchParams] = useSearchParams();
-  return /* @__PURE__ */ jsxs(
-    "table",
-    {
-      className: cn(
-        className,
-        "text-[15px] border-separate border-spacing-0"
-      ),
-      children: [
-        /* @__PURE__ */ jsx2("thead", { children: /* @__PURE__ */ jsx2("tr", { children: keys.map((key) => {
-          const value = columns[key];
-          function getReactNode() {
-            if (value && typeof value === "object" && "label" in value) {
-              return value.label;
-            }
-            return value;
-          }
-          function Head() {
-            const reactNode = getReactNode();
-            if (typeof reactNode === "string") {
-              return /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  className: cn(
-                    orderBy === key ? "text-gray-900 font-medium" : "text-gray-500 font-medium",
-                    "px-4 flex items-center w-full"
-                  ),
-                  onClick: () => {
-                    let newDirection = "asc";
-                    if (orderBy === key) {
-                      newDirection = direction === "asc" ? "desc" : "asc";
-                    }
-                    setSearchParams({
-                      orderBy: key,
-                      direction: newDirection
-                    });
-                  },
-                  children: [
-                    reactNode,
-                    orderBy === key && /* @__PURE__ */ jsx2("div", { className: "ml-0.5", children: direction === "asc" ? /* @__PURE__ */ jsx2(GoArrowUp, {}) : /* @__PURE__ */ jsx2(GoArrowDown, {}) })
-                  ]
-                }
-              );
-            }
-            return /* @__PURE__ */ jsx2(Fragment, { children: reactNode });
-          }
-          const filter = filters[key];
-          return /* @__PURE__ */ jsxs(
-            "th",
-            {
-              className: cn(
-                "py-4 border-y font-normal align-top"
-              ),
-              children: [
-                /* @__PURE__ */ jsx2(Head, {}),
-                filter && /* @__PURE__ */ jsx2("div", { className: "px-3 mt-4", children: /* @__PURE__ */ jsxs(
-                  "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__ */ jsxs("tbody", { children: [
-          sortedArray.length === 0 && /* @__PURE__ */ jsx2("tr", { children: /* @__PURE__ */ jsx2(
-            "td",
-            {
-              colSpan: keys.length,
-              className: "px-4 h-20 text-gray-400 text-center",
-              children: "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."
-            }
-          ) }),
-          sortedArray.map((item, i) => /* @__PURE__ */ jsx2("tr", { className: "hover:bg-gray-50 transition-colors", children: keys.map((key, i2) => {
-            const value = item[key];
-            function Content() {
-              if (key in columns) {
-                const column = columns[key];
-                if (column && typeof column === "object" && "mapper" in column) {
-                  const mapper = column.mapper;
-                  if (mapper) {
-                    return /* @__PURE__ */ jsx2(Fragment, { children: mapper(item) });
-                  }
-                }
-              }
-              return /* @__PURE__ */ jsx2(Fragment, { children: String(value) });
-            }
-            const linkedContent = getLink ? /* @__PURE__ */ jsx2(
-              Link,
-              {
-                to: getLink(item),
-                className: "block content-center px-4 w-full h-full",
-                children: /* @__PURE__ */ jsx2(Content, {})
-              }
-            ) : /* @__PURE__ */ jsx2(Content, {});
-            const cell = Mapper ? /* @__PURE__ */ jsx2(Mapper, { item, index: i2, children: linkedContent }) : linkedContent;
-            return /* @__PURE__ */ jsx2("td", { className: "px-0 h-14 border-b", children: cell }, key);
-          }) }, i))
-        ] })
-      ]
-    }
-  );
-}
-
-// src/table/use_table.tsx
-import { useLoaderData } from "react-router";
-function useTable() {
-  const { table } = useLoaderData();
-  return table;
-}
-
-// src/table/buttons.tsx
-import { cn as cn2 } from "dn-react-toolkit/utils";
-import { Link as Link2, useLocation, useSearchParams as useSearchParams2 } from "react-router";
-import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-function TablePageButtons({
-  MAX_PAGES_TO_SHOW,
-  total,
-  limit,
-  offset
-}) {
-  const pages = Math.ceil(total / limit);
-  const { pathname } = useLocation();
-  const [searchParams] = useSearchParams2();
-  const currentPage = Math.floor(offset / limit) + 1;
-  const startButton = (Math.ceil(currentPage / MAX_PAGES_TO_SHOW) - 1) * MAX_PAGES_TO_SHOW;
-  const endButton = Math.min(startButton + MAX_PAGES_TO_SHOW - 1, pages);
-  return /* @__PURE__ */ jsx3(Fragment2, { children: pages > 1 && /* @__PURE__ */ jsxs2("div", { className: "flex justify-center items-center my-8 gap-4 text-neutral-400", children: [
-    startButton > 1 && /* @__PURE__ */ jsx3(
-      Link2,
-      {
-        to: (() => {
-          searchParams.set(
-            "offset",
-            String((startButton - 1) * limit)
-          );
-          return `${pathname}?${searchParams.toString()}`;
-        })(),
-        className: "w-10 block text-center transition-colors hover:text-primary",
-        children: "\uC774\uC804"
-      }
-    ),
-    Array.from({
-      length: Math.min(
-        MAX_PAGES_TO_SHOW,
-        pages - startButton
-      )
-    }).map((_, index) => {
-      return /* @__PURE__ */ jsx3(
-        Link2,
-        {
-          to: (() => {
-            searchParams.set(
-              "offset",
-              String((startButton + index) * limit)
-            );
-            return `${pathname}?${searchParams.toString()}`;
-          })(),
-          className: cn2(
-            "w-6 block text-center transition-colors",
-            currentPage === startButton + index + 1 ? "font-bold text-primary" : "hover:text-primary"
-          ),
-          children: startButton + index + 1
-        },
-        index
-      );
-    }),
-    endButton < pages && /* @__PURE__ */ jsx3(
-      Link2,
-      {
-        to: (() => {
-          searchParams.set(
-            "offset",
-            String((endButton + 1) * limit)
-          );
-          return `${pathname}?${searchParams.toString()}`;
-        })(),
-        className: "w-10 block text-center transition-colors hover:text-primary",
-        children: "\uB2E4\uC74C"
-      }
-    )
-  ] }) });
-}
-
-// src/table/table_form.tsx
-import { Fragment as Fragment3, jsx as jsx4, 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 = useNavigate2();
-  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__ */ jsx4(
-            "button",
-            {
-              type: "submit",
-              className: "w-10 h-10 flex justify-center items-center",
-              children: /* @__PURE__ */ jsx4(GoSearch, { className: "text-xl mr-4" })
-            }
-          ),
-          /* @__PURE__ */ jsx4(
-            "input",
-            {
-              className: "outline-none h-full flex-1",
-              placeholder: "\uC5EC\uAE30\uC5D0 \uAC80\uC0C9\uD558\uC138\uC694...",
-              name: "query",
-              defaultValue: searchParams.get("query") ?? ""
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx4(
-      Table,
-      {
-        data: items,
-        columns,
-        getLink: primaryKey ? (item) => `${pathname}/${item[primaryKey]}` : void 0,
-        limit,
-        offset,
-        orderBy,
-        direction,
-        filters
-      }
-    ),
-    /* @__PURE__ */ jsx4(
-      TablePageButtons,
-      {
-        total,
-        limit,
-        offset,
-        MAX_PAGES_TO_SHOW: 10
-      }
-    )
-  ] });
-}
-
-// src/table/page.tsx
-import { Fragment as Fragment4, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-function createTablePage({
-  name,
-  columns,
-  primaryKey = "id"
-}) {
-  return function TablePage({
-    header: Header
-  }) {
-    const { pathname } = useLocation3();
-    return /* @__PURE__ */ jsxs4(Fragment4, { children: [
-      /* @__PURE__ */ jsx5(
-        Header,
-        {
-          title: name,
-          actions: /* @__PURE__ */ jsxs4(Link3, { to: `${pathname}/new`, className: "button-primary", children: [
-            name,
-            " \uCD94\uAC00"
-          ] })
-        }
-      ),
-      /* @__PURE__ */ jsx5("div", { className: "max-w-7xl mx-auto w-full overflow-auto", children: /* @__PURE__ */ jsx5(TableForm, { columns, primaryKey }) })
-    ] });
-  };
-}
-
-// src/form/create_form_component.tsx
-import { cn as cn3 } from "dn-react-toolkit/utils";
-import "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
-function createComponent(tag, options) {
-  return function FormComponent({ className, ...props }) {
-    const Tag = tag;
-    return /* @__PURE__ */ jsx6(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
-import { useStoreComponent } from "react-store-input";
-
-// src/client/env_loader.tsx
-import { useRouteLoaderData } from "react-router";
-import { jsx as jsx7 } from "react/jsx-runtime";
-
-// src/client/file_input.tsx
-import {
-  useRef
-} from "react";
-import { Fragment as Fragment5, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
-
-// src/client/use_user_agent.tsx
-import { useRouteLoaderData as useRouteLoaderData2 } from "react-router";
-
-// src/client/store_text_editor.tsx
-import {
-  TextEditor
-} from "dn-react-text-editor";
-import { useStoreController } from "react-store-input";
-import { useImperativeHandle, useRef as useRef2 } from "react";
-import { jsx as jsx9 } from "react/jsx-runtime";
-function StoreTextEditor({
-  store,
-  name,
-  getter,
-  setter,
-  defaultValue,
-  ref,
-  ...props
-}) {
-  const controllerRef = useRef2(null);
-  useImperativeHandle(
-    ref,
-    () => controllerRef.current,
-    []
-  );
-  const { dispatch } = useStoreController(store, {
-    onSubscribe: (state) => {
-      const controller = controllerRef.current;
-      if (!controller) {
-        return;
-      }
-      const getResult = () => {
-        if (getter) {
-          return getter(state) || "";
-        }
-        if (name) {
-          return state[name] || "";
-        }
-        return "";
-      };
-      const result = getResult();
-      if (controller.value !== result) {
-        controller.value = result;
-      }
-    },
-    onDispatch: (state) => {
-      const controller = controllerRef.current;
-      if (!controller) {
-        return;
-      }
-      if (setter) {
-        setter(state, controller.value);
-        return;
-      }
-      if (name) {
-        state[name] = controller.value;
-      }
-    }
-  });
-  const getDefaultValue = () => {
-    if (getter) {
-      return getter(store.state);
-    }
-    if (name) {
-      return store.state[name];
-    }
-    return void 0;
-  };
-  return /* @__PURE__ */ jsx9(
-    TextEditor,
-    {
-      ...props,
-      ref: controllerRef,
-      defaultValue: defaultValue ?? getDefaultValue(),
-      onChange: (e) => {
-        dispatch();
-        props.onChange?.(e);
-      }
-    }
-  );
-}
-
-// src/client/editor.tsx
-import { generateMetadata } from "dn-react-toolkit/file/client";
-
-// src/crud/crud_form.tsx
-import { Fragment as Fragment6, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
-function CrudForm({
-  AdminHeader
-}) {
-  const form = useFormContext();
-  const component = useStoreComponent(form.store);
-  return /* @__PURE__ */ jsxs6(Fragment6, { children: [
-    /* @__PURE__ */ jsx10(
-      AdminHeader,
-      {
-        title: `${form.name} ${form.item ? "\uC218\uC815" : "\uCD94\uAC00"}`,
-        actions: /* @__PURE__ */ jsxs6(Fragment6, { children: [
-          form.item && /* @__PURE__ */ jsx10(
-            "button",
-            {
-              type: "button",
-              className: "button-outline",
-              onClick: () => {
-                form.delete();
-              },
-              children: "\uC0AD\uC81C\uD558\uAE30"
-            }
-          ),
-          /* @__PURE__ */ jsx10(
-            "button",
-            {
-              type: "button",
-              className: "button-primary",
-              onClick: form.submit,
-              children: "\uC800\uC7A5\uD558\uAE30"
-            }
-          )
-        ] })
-      }
-    ),
-    /* @__PURE__ */ jsx10("div", { className: "max-w-2xl mx-auto", children: Object.keys(form.columns).length > 0 && /* @__PURE__ */ jsx10(Fragment6, { children: Object.entries(form.columns).map(
-      ([name, value]) => {
-        function InputComponent() {
-          if (value.component) {
-            const Component = value.component;
-            return /* @__PURE__ */ jsx10(Component, { store: form.store, name });
-          }
-          if (value.type === "textarea") {
-            return /* @__PURE__ */ jsx10(
-              StoreTextEditor,
-              {
-                store: form.store,
-                name,
-                editor: {
-                  attributes: {
-                    class: "text-editor-form"
-                  }
-                }
-              }
-            );
-          }
-          if (value.options) {
-            const Component = value.options;
-            return /* @__PURE__ */ jsx10(component.select, { name, className: "select-form", children: /* @__PURE__ */ jsx10(Component, {}) });
-          }
-          return /* @__PURE__ */ jsx10(
-            component.input,
-            {
-              name,
-              type: value.type,
-              className: "input-form"
-            }
-          );
-        }
-        const v = form.store.state[name];
-        if (typeof v === "boolean") {
-          return /* @__PURE__ */ jsxs6("div", { className: "flex", children: [
-            value.label,
-            /* @__PURE__ */ jsx10("div", { className: "ml-auto", children: /* @__PURE__ */ jsx10(InputComponent, {}) })
-          ] });
-        }
-        return /* @__PURE__ */ jsx10(FormRow, { children: /* @__PURE__ */ jsxs6(FormEntry, { children: [
-          /* @__PURE__ */ jsx10(FormLabel, { children: value.label }, name),
-          /* @__PURE__ */ jsx10(InputComponent, {})
-        ] }) }, name);
-      }
-    ) }) })
-  ] });
-}
-
-// src/crud/crud_page.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
-function crudPage({
-  name,
-  primaryKey,
-  tablePageOptions,
-  formOptions,
-  header
-}) {
-  const create = (prefix) => {
-    return function Page() {
-      const data = useLoaderData2();
-      const { pathname } = useLocation4();
-      if (pathname === prefix) {
-        const Component = createTablePage({
-          ...tablePageOptions,
-          name
-        });
-        return /* @__PURE__ */ jsx11(Component, { header });
-      }
-      if (pathname.startsWith(prefix)) {
-        return /* @__PURE__ */ jsx11(
-          CrudFormProvider,
-          {
-            item: data?.item,
-            prefix,
-            name,
-            columns: formOptions.columns,
-            primaryKey,
-            children: formOptions.form ? /* @__PURE__ */ jsx11(FormDelegate, { component: formOptions.form }) : /* @__PURE__ */ jsx11(CrudForm, { AdminHeader: header })
-          }
-        );
-      }
-    };
-  };
-  return {
-    name,
-    create
-  };
-}
-function FormDelegate({
-  component: Component
-}) {
-  const form = useFormContext();
-  return /* @__PURE__ */ jsx11(Component, { form });
-}
-export {
-  crudPage
-};