dn-react-router-toolkit 0.9.8 → 0.9.9

package/dist/post/post_form_page.mjs

@@ -1,560 +0,0 @@
-// src/post/post_form_page.tsx
-import { useLoaderData } from "react-router";
-import { useStoreComponent as useStoreComponent2 } from "react-store-input";
-
-// src/post/editor_toolbar.tsx
-import {
-  GoFileMedia,
-  GoLink,
-  GoListOrdered,
-  GoListUnordered
-} from "react-icons/go";
-
-// src/client/env_loader.tsx
-import { useRouteLoaderData } from "react-router";
-import { jsx } from "react/jsx-runtime";
-
-// src/client/file_input.tsx
-import {
-  useRef
-} from "react";
-import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
-function FileInput({
-  buttonRef,
-  className,
-  ref,
-  children,
-  onClick,
-  onChange,
-  ...props
-}) {
-  const inputRef = useRef(null);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx2(
-      "button",
-      {
-        ref: buttonRef,
-        className,
-        type: "button",
-        onClick: () => {
-          inputRef.current?.click();
-        },
-        children
-      }
-    ),
-    /* @__PURE__ */ jsx2(
-      "input",
-      {
-        ...props,
-        type: "file",
-        ref: inputRef,
-        style: {
-          display: "none"
-        },
-        onChange: async (e) => {
-          await onChange?.(e);
-          if (inputRef.current) {
-            inputRef.current.value = "";
-          }
-        }
-      }
-    )
-  ] });
-}
-
-// 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 jsx3 } 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__ */ jsx3(
-    TextEditor,
-    {
-      ...props,
-      ref: controllerRef,
-      defaultValue: defaultValue ?? getDefaultValue(),
-      onChange: (e) => {
-        dispatch();
-        props.onChange?.(e);
-      }
-    }
-  );
-}
-
-// src/client/editor.tsx
-import { generateMetadata } from "gw-file/client";
-
-// src/utils/cn.ts
-function cn(...classes) {
-  return classes.filter(Boolean).join(" ").trim();
-}
-
-// src/utils/date.ts
-import moment from "moment-timezone";
-
-// src/utils/slug.ts
-var toSlug = (str) => {
-  return str.toLowerCase().replace(/[^a-zA-Z0-9가-힣ㄱ-ㅎㅏ-ㅣ]+/g, "-").replace(/^-|-$/g, "");
-};
-
-// src/post/editor_toolbar.tsx
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
-function EditorToolbar({
-  textEditorRef,
-  className
-}) {
-  return /* @__PURE__ */ jsxs2(
-    "div",
-    {
-      className: cn("w-full h-12 flex items-center gap-0.5 px-1", className),
-      children: [
-        /* @__PURE__ */ jsx4(
-          FileInput,
-          {
-            className: "button-icon-base text-[18px]",
-            onChange: async (e) => {
-              const files = e.target.files;
-              if (!files || files.length === 0) {
-                return;
-              }
-              textEditorRef.current?.commands.attachFile(Array.from(files));
-            },
-            children: /* @__PURE__ */ jsx4(GoFileMedia, {})
-          }
-        ),
-        /* @__PURE__ */ jsx4(
-          "button",
-          {
-            type: "button",
-            onClick: () => {
-              const href = prompt("\uB9C1\uD06C URL\uC744 \uC785\uB825\uD558\uC138\uC694");
-              if (!href) {
-                return;
-              }
-              textEditorRef.current?.commands.toggleMark("link", { href });
-            },
-            className: "button-icon-base text-[20px]",
-            children: /* @__PURE__ */ jsx4(GoLink, {})
-          }
-        ),
-        /* @__PURE__ */ jsx4(
-          "button",
-          {
-            type: "button",
-            onClick: () => {
-              textEditorRef.current?.commands.toggleBlockType("heading", {
-                level: 2
-              });
-            },
-            className: "button-icon-base text-[18px]",
-            children: /* @__PURE__ */ jsx4("span", { children: "H2" })
-          }
-        ),
-        /* @__PURE__ */ jsx4(
-          "button",
-          {
-            type: "button",
-            onClick: () => {
-              textEditorRef.current?.commands.toggleBlockType("heading", {
-                level: 3
-              });
-            },
-            className: "button-icon-base text-[18px]",
-            children: /* @__PURE__ */ jsx4("span", { children: "H3" })
-          }
-        ),
-        /* @__PURE__ */ jsx4(
-          "button",
-          {
-            type: "button",
-            onClick: () => {
-              textEditorRef.current?.commands.wrapInList("ordered_list");
-            },
-            className: "button-icon-base text-[20px]",
-            children: /* @__PURE__ */ jsx4(GoListOrdered, {})
-          }
-        ),
-        /* @__PURE__ */ jsx4(
-          "button",
-          {
-            type: "button",
-            onClick: () => {
-              textEditorRef.current?.commands.wrapInList("bullet_list");
-            },
-            className: "button-icon-base text-[20px]",
-            children: /* @__PURE__ */ jsx4(GoListUnordered, {})
-          }
-        )
-      ]
-    }
-  );
-}
-
-// src/post/post_form_page.tsx
-import { useRef as useRef3 } from "react";
-import "dn-react-text-editor";
-
-// src/post/thumbnail_picker.tsx
-import { useSelector } from "react-store-input";
-import { useEffect, useState } from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
-function PostThumbnailPicker({
-  store,
-  textEditorRef
-}) {
-  const thumbnail = useSelector(store, (state) => state.thumbnail);
-  const [thumbnails, setThumbnails] = useState([]);
-  useEffect(() => {
-    const update = () => {
-      const textEditor = textEditorRef.current;
-      if (!textEditor) {
-        return;
-      }
-      const html = textEditor.value;
-      if (!html) {
-        return;
-      }
-      const parser = new DOMParser();
-      const docHtml = parser.parseFromString(html, "text/html");
-      const images = docHtml.querySelectorAll("img");
-      const thumbnails2 = Array.from(images).map((img) => img.src);
-      setThumbnails(thumbnails2);
-      if (thumbnails2.length > 0 && !store.state.thumbnail) {
-        store.dispatch((state) => {
-          state.thumbnail = thumbnails2[0];
-        });
-      }
-    };
-    const unsubscribe = store.subscribe((tr) => {
-      update();
-    });
-    setTimeout(() => {
-      update();
-    }, 0);
-    return () => {
-      unsubscribe();
-    };
-  }, []);
-  return /* @__PURE__ */ jsx5("div", { className: "grid grid-cols-6 gap-1", children: thumbnails.map((url, index) => /* @__PURE__ */ jsx5(
-    "button",
-    {
-      type: "button",
-      className: cn(
-        "border border-neutral-200 rounded-lg overflow-hidden aspect-4/3",
-        thumbnail === url && "border-transparent ring-2 ring-primary"
-      ),
-      onClick: () => {
-        store.dispatch((state) => {
-          state.thumbnail = url;
-        });
-      },
-      children: /* @__PURE__ */ jsx5(
-        "img",
-        {
-          src: url,
-          alt: `Thumbnail ${index + 1}`,
-          className: "w-full h-full object-cover"
-        }
-      )
-    },
-    index
-  )) });
-}
-
-// src/crud/crud_form_provider.tsx
-import { useNavigate } from "react-router";
-import { useStore } from "react-store-input";
-import {
-  createContext,
-  useContext
-} from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
-var FormContext = createContext({});
-
-// src/form/create_form_component.tsx
-import "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
-function createComponent(tag, options) {
-  return function FormComponent({ className, ...props }) {
-    const Tag = tag;
-    return /* @__PURE__ */ jsx7(Tag, { ...props, className: cn(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";
-import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
-
-// src/post/post_form_page.tsx
-import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
-var createPostFormPage = ({
-  header: AdminPageHeader,
-  textEditorClassName,
-  attachFile
-}) => {
-  return function PostFormPage({ form }) {
-    const { boards } = useLoaderData();
-    const component = useStoreComponent2(form.store);
-    const textEditorRef = useRef3(null);
-    return /* @__PURE__ */ jsxs4(Fragment3, { children: [
-      /* @__PURE__ */ jsx9(
-        AdminPageHeader,
-        {
-          title: `${form.name} \uCD94\uAC00`,
-          actions: /* @__PURE__ */ jsxs4(Fragment3, { children: [
-            /* @__PURE__ */ jsx9(
-              "button",
-              {
-                type: "button",
-                className: "button-outline",
-                onClick: () => {
-                  form.delete();
-                },
-                children: "\uC0AD\uC81C\uD558\uAE30"
-              }
-            ),
-            /* @__PURE__ */ jsx9(
-              "button",
-              {
-                type: "button",
-                className: "button-primary",
-                onClick: () => {
-                  form.submit();
-                },
-                children: "\uC800\uC7A5\uD558\uAE30"
-              }
-            )
-          ] })
-        }
-      ),
-      /* @__PURE__ */ jsx9("div", { className: "px-4", children: /* @__PURE__ */ jsxs4("div", { className: "max-w-7xl mx-auto w-full", children: [
-        /* @__PURE__ */ jsxs4(FormRow, { children: [
-          /* @__PURE__ */ jsxs4(FormEntry, { children: [
-            /* @__PURE__ */ jsx9(FormLabel, { children: "\uACF5\uAC1C\uC5EC\uBD80" }),
-            /* @__PURE__ */ jsxs4(
-              component.select,
-              {
-                name: "isPublic",
-                className: "select-form",
-                toInputValue: (value) => value ? "true" : "false",
-                toStateValue: (value) => Boolean(value === "true"),
-                children: [
-                  /* @__PURE__ */ jsx9("option", { value: "true", children: "\uACF5\uAC1C" }),
-                  /* @__PURE__ */ jsx9("option", { value: "false", children: "\uBE44\uACF5\uAC1C" })
-                ]
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs4(FormEntry, { children: [
-            /* @__PURE__ */ jsx9(FormLabel, { children: "\uC791\uC131\uC77C\uC2DC" }),
-            /* @__PURE__ */ jsx9(
-              component.input,
-              {
-                name: "createdAt",
-                className: "input-form",
-                type: "datetime-local"
-              }
-            )
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs4(FormRow, { children: [
-          /* @__PURE__ */ jsxs4(FormEntry, { children: [
-            /* @__PURE__ */ jsx9(FormLabel, { children: "\uAC8C\uC2DC\uD310" }),
-            /* @__PURE__ */ jsxs4(component.select, { name: "boardId", className: "select-form", children: [
-              /* @__PURE__ */ jsx9("option", { value: "", children: "\uC120\uD0DD\uD558\uC138\uC694" }),
-              boards.map((board) => /* @__PURE__ */ jsx9("option", { value: board.id, children: board.title }, board.id))
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs4(FormEntry, { children: [
-            /* @__PURE__ */ jsx9(FormLabel, { children: "\uCE74\uD14C\uACE0\uB9AC" }),
-            /* @__PURE__ */ jsx9(
-              component.input,
-              {
-                name: "category",
-                className: "input-form",
-                placeholder: "\uCE74\uD14C\uACE0\uB9AC"
-              }
-            )
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs4(FormRow, { children: [
-          /* @__PURE__ */ jsxs4(FormEntry, { children: [
-            /* @__PURE__ */ jsx9(FormLabel, { children: "\uC81C\uBAA9" }),
-            /* @__PURE__ */ jsx9(
-              component.input,
-              {
-                name: "title",
-                className: "input-form",
-                placeholder: "\uC81C\uBAA9\uC744 \uC785\uB825\uD558\uC138\uC694",
-                onChange: (e) => {
-                  const title = e.target.value;
-                  form.store.dispatch((state) => {
-                    state.slug = toSlug(title);
-                  });
-                }
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs4(FormEntry, { children: [
-            /* @__PURE__ */ jsx9(FormLabel, { children: "\uBD80\uC81C\uBAA9" }),
-            /* @__PURE__ */ jsx9(
-              component.input,
-              {
-                name: "subtitle",
-                className: "input-form",
-                placeholder: "\uBD80\uC81C\uBAA9\uC744 \uC785\uB825\uD558\uC138\uC694"
-              }
-            )
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs4(FormRow, { children: [
-          /* @__PURE__ */ jsxs4(FormEntry, { children: [
-            /* @__PURE__ */ jsx9(FormLabel, { children: "\uC2AC\uB7EC\uADF8" }),
-            /* @__PURE__ */ jsx9(
-              component.input,
-              {
-                name: "slug",
-                className: "input-form",
-                placeholder: "\uC81C\uBAA9"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs4(FormEntry, { children: [
-            /* @__PURE__ */ jsx9(FormLabel, { children: "\uD0DC\uADF8" }),
-            /* @__PURE__ */ jsx9(
-              component.input,
-              {
-                name: "tags",
-                className: "input-form",
-                placeholder: "\uD0DC\uADF8 1, \uD0DC\uADF8 2, \uD0DC\uADF8 3"
-              }
-            )
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx9(FormRow, { children: /* @__PURE__ */ jsxs4(FormEntry, { children: [
-          /* @__PURE__ */ jsx9(FormLabel, { children: "\uC124\uBA85" }),
-          /* @__PURE__ */ jsx9(
-            StoreTextEditor,
-            {
-              store: form.store,
-              mode: "text",
-              name: "description",
-              className: "text-editor min-h-[80px]",
-              placeholder: "\uC124\uBA85"
-            }
-          )
-        ] }) }),
-        /* @__PURE__ */ jsx9(FormRow, { children: /* @__PURE__ */ jsxs4(FormEntry, { children: [
-          /* @__PURE__ */ jsx9(FormLabel, { children: "\uC378\uB124\uC77C" }),
-          /* @__PURE__ */ jsx9(
-            PostThumbnailPicker,
-            {
-              store: form.store,
-              textEditorRef
-            }
-          )
-        ] }) })
-      ] }) }),
-      /* @__PURE__ */ jsx9("div", { className: "sticky top-[160px] z-998 bg-white px-4", children: /* @__PURE__ */ jsx9(
-        EditorToolbar,
-        {
-          textEditorRef,
-          className: "max-w-7xl mx-auto"
-        }
-      ) }),
-      /* @__PURE__ */ jsx9("div", { className: "px-4", children: /* @__PURE__ */ jsx9(
-        StoreTextEditor,
-        {
-          ref: textEditorRef,
-          store: form.store,
-          name: "html",
-          placeholder: "\uC5EC\uAE30\uC5D0 \uBCF8\uBB38\uC744 \uC791\uC131\uD558\uC138\uC694...",
-          updateDelay: 500,
-          editor: {
-            attributes: {
-              class: cn(textEditorClassName, "pb-[50vh]")
-            }
-          },
-          attachFile
-        }
-      ) })
-    ] });
-  };
-};
-export {
-  createPostFormPage
-};