dn-react-router-toolkit 0.4.4 → 0.5.1

package/dist/crud/crud_page.js

@@ -0,0 +1,645 @@
+"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_page.tsx
+var crud_page_exports = {};
+__export(crud_page_exports, {
+  crudPage: () => crudPage
+});
+module.exports = __toCommonJS(crud_page_exports);
+var import_react_router5 = require("react-router");
+
+// 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);
+}
+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
+  );
+}
+
+// src/table/page.tsx
+var import_react_router4 = require("react-router");
+
+// node_modules/react-icons/lib/iconBase.mjs
+var import_react4 = __toESM(require("react"), 1);
+
+// node_modules/react-icons/lib/iconContext.mjs
+var import_react3 = __toESM(require("react"), 1);
+var DefaultContext = {
+  color: void 0,
+  size: void 0,
+  className: void 0,
+  style: void 0,
+  attr: void 0
+};
+var IconContext = import_react3.default.createContext && /* @__PURE__ */ import_react3.default.createContext(DefaultContext);
+
+// node_modules/react-icons/lib/iconBase.mjs
+var _excluded = ["attr", "size", "title"];
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var key, i;
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+  return target;
+}
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  for (var key in source) {
+    if (Object.prototype.hasOwnProperty.call(source, key)) {
+      if (excluded.indexOf(key) >= 0) continue;
+      target[key] = source[key];
+    }
+  }
+  return target;
+}
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+function ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function(r2) {
+      return Object.getOwnPropertyDescriptor(e, r2).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
+      _defineProperty(e, r2, t[r2]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
+      Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
+    });
+  }
+  return e;
+}
+function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, { value, enumerable: true, configurable: true, writable: true });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function Tree2Element(tree) {
+  return tree && tree.map((node, i) => /* @__PURE__ */ import_react4.default.createElement(node.tag, _objectSpread({
+    key: i
+  }, node.attr), Tree2Element(node.child)));
+}
+function GenIcon(data) {
+  return (props) => /* @__PURE__ */ import_react4.default.createElement(IconBase, _extends({
+    attr: _objectSpread({}, data.attr)
+  }, props), Tree2Element(data.child));
+}
+function IconBase(props) {
+  var elem = (conf) => {
+    var {
+      attr,
+      size,
+      title
+    } = props, svgProps = _objectWithoutProperties(props, _excluded);
+    var computedSize = size || conf.size || "1em";
+    var className;
+    if (conf.className) className = conf.className;
+    if (props.className) className = (className ? className + " " : "") + props.className;
+    return /* @__PURE__ */ import_react4.default.createElement("svg", _extends({
+      stroke: "currentColor",
+      fill: "currentColor",
+      strokeWidth: "0"
+    }, conf.attr, attr, svgProps, {
+      className,
+      style: _objectSpread(_objectSpread({
+        color: props.color || conf.color
+      }, conf.style), props.style),
+      height: computedSize,
+      width: computedSize,
+      xmlns: "http://www.w3.org/2000/svg"
+    }), title && /* @__PURE__ */ import_react4.default.createElement("title", null, title), props.children);
+  };
+  return IconContext !== void 0 ? /* @__PURE__ */ import_react4.default.createElement(IconContext.Consumer, null, (conf) => elem(conf)) : elem(DefaultContext);
+}
+
+// node_modules/react-icons/go/index.mjs
+function GoArrowDown(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M4.97 13.22a.75.75 0 0 1 1.06 0L11 18.19V3.75a.75.75 0 0 1 1.5 0v14.44l4.97-4.97a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734l-6.25 6.25a.75.75 0 0 1-1.06 0l-6.25-6.25a.75.75 0 0 1 0-1.06Z" }, "child": [] }] })(props);
+}
+function GoArrowUp(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M18.655 10.405a.75.75 0 0 1-1.06 0l-4.97-4.97v14.44a.75.75 0 0 1-1.5 0V5.435l-4.97 4.97a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734l6.25-6.25a.75.75 0 0 1 1.06 0l6.25 6.25a.75.75 0 0 1 0 1.06Z" }, "child": [] }] })(props);
+}
+function GoSearch(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M10.25 2a8.25 8.25 0 0 1 6.34 13.53l5.69 5.69a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215l-5.69-5.69A8.25 8.25 0 1 1 10.25 2ZM3.5 10.25a6.75 6.75 0 1 0 13.5 0 6.75 6.75 0 0 0-13.5 0Z" }, "child": [] }] })(props);
+}
+
+// src/table/buttons.tsx
+var import_utils = require("dn-react-toolkit/utils");
+var import_react_router2 = require("react-router");
+var import_react5 = __toESM(require("react"));
+function TablePageButtons({
+  MAX_PAGES_TO_SHOW,
+  total,
+  limit,
+  offset
+}) {
+  const pages = Math.ceil(total / limit);
+  const { pathname } = (0, import_react_router2.useLocation)();
+  const [searchParams] = (0, import_react_router2.useSearchParams)();
+  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__ */ import_react5.default.createElement(import_react5.default.Fragment, null, pages > 1 && /* @__PURE__ */ import_react5.default.createElement("div", { className: "flex justify-center items-center my-8 gap-4 text-neutral-400" }, startButton > 1 && /* @__PURE__ */ import_react5.default.createElement(
+    import_react_router2.Link,
+    {
+      to: (() => {
+        searchParams.set(
+          "offset",
+          String((startButton - 1) * limit)
+        );
+        return `${pathname}?${searchParams.toString()}`;
+      })(),
+      className: "w-10 block text-center transition-colors hover:text-primary"
+    },
+    "\uC774\uC804"
+  ), Array.from({
+    length: Math.min(
+      MAX_PAGES_TO_SHOW,
+      pages - startButton
+    )
+  }).map((_, index) => {
+    return /* @__PURE__ */ import_react5.default.createElement(
+      import_react_router2.Link,
+      {
+        key: index,
+        to: (() => {
+          searchParams.set(
+            "offset",
+            String((startButton + index) * limit)
+          );
+          return `${pathname}?${searchParams.toString()}`;
+        })(),
+        className: (0, import_utils.cn)(
+          "w-6 block text-center transition-colors",
+          currentPage === startButton + index + 1 ? "font-bold text-primary" : "hover:text-primary"
+        )
+      },
+      startButton + index + 1
+    );
+  }), endButton < pages && /* @__PURE__ */ import_react5.default.createElement(
+    import_react_router2.Link,
+    {
+      to: (() => {
+        searchParams.set(
+          "offset",
+          String((endButton + 1) * limit)
+        );
+        return `${pathname}?${searchParams.toString()}`;
+      })(),
+      className: "w-10 block text-center transition-colors hover:text-primary"
+    },
+    "\uB2E4\uC74C"
+  )));
+}
+
+// src/table/table.tsx
+var import_utils2 = require("dn-react-toolkit/utils");
+var import_react_router3 = require("react-router");
+var import_react6 = __toESM(require("react"));
+function Table({
+  className = "min-w-full whitespace-nowrap",
+  data,
+  columns,
+  mapper: Mapper,
+  getLink,
+  limit,
+  offset,
+  orderBy,
+  direction
+}) {
+  const keys = Object.entries(columns).filter((entry) => entry[1]).map(([key]) => key);
+  const sortedArray = [...data];
+  const [_, setSearchParams] = (0, import_react_router3.useSearchParams)();
+  return /* @__PURE__ */ import_react6.default.createElement(
+    "table",
+    {
+      className: (0, import_utils2.cn)(
+        className,
+        "text-[15px] border-separate border-spacing-0"
+      )
+    },
+    /* @__PURE__ */ import_react6.default.createElement("thead", null, /* @__PURE__ */ import_react6.default.createElement("tr", null, 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__ */ import_react6.default.createElement(
+            "button",
+            {
+              className: (0, import_utils2.cn)(
+                orderBy === key ? "text-neutral-900 font-medium" : "text-neutral-500",
+                "px-4 h-14 flex items-center w-full"
+              ),
+              onClick: () => {
+                let newDirection = "asc";
+                if (orderBy === key) {
+                  newDirection = direction === "asc" ? "desc" : "asc";
+                }
+                setSearchParams({
+                  orderBy: key,
+                  direction: newDirection
+                });
+              }
+            },
+            reactNode,
+            orderBy === key && /* @__PURE__ */ import_react6.default.createElement("div", { className: "ml-0.5" }, direction === "asc" ? /* @__PURE__ */ import_react6.default.createElement(GoArrowUp, null) : /* @__PURE__ */ import_react6.default.createElement(GoArrowDown, null))
+          );
+        }
+        return /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, reactNode);
+      }
+      return /* @__PURE__ */ import_react6.default.createElement(
+        "th",
+        {
+          key,
+          className: (0, import_utils2.cn)("border-y font-normal")
+        },
+        /* @__PURE__ */ import_react6.default.createElement(Head, null)
+      );
+    }))),
+    /* @__PURE__ */ import_react6.default.createElement("tbody", null, sortedArray.length === 0 && /* @__PURE__ */ import_react6.default.createElement("tr", null, /* @__PURE__ */ import_react6.default.createElement(
+      "td",
+      {
+        colSpan: keys.length,
+        className: "px-4 h-14 text-neutral-400 text-center"
+      },
+      "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."
+    )), sortedArray.map((item, i) => /* @__PURE__ */ import_react6.default.createElement("tr", { key: i, className: "hover:bg-gray-50 transition-colors" }, 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__ */ import_react6.default.createElement(import_react6.default.Fragment, null, mapper(item));
+            }
+          }
+        }
+        return /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, String(value));
+      }
+      const linkedContent = getLink ? /* @__PURE__ */ import_react6.default.createElement(
+        import_react_router3.Link,
+        {
+          to: getLink(item),
+          className: "block content-center px-4 w-full h-full"
+        },
+        /* @__PURE__ */ import_react6.default.createElement(Content, null)
+      ) : /* @__PURE__ */ import_react6.default.createElement(Content, null);
+      const cell = Mapper ? /* @__PURE__ */ import_react6.default.createElement(Mapper, { item, index: i2 }, linkedContent) : linkedContent;
+      return /* @__PURE__ */ import_react6.default.createElement("td", { key, className: "px-0 h-14 border-b" }, cell);
+    }))))
+  );
+}
+
+// src/table/page.tsx
+var import_react7 = __toESM(require("react"));
+function createTablePage({
+  name,
+  columns,
+  primaryKey = "id"
+}) {
+  return function TablePage({
+    AdminLayout
+  }) {
+    const { pathname } = (0, import_react_router4.useLocation)();
+    const { table } = (0, import_react_router4.useLoaderData)();
+    const { items, total, limit, offset, orderBy, direction, searchKey } = table;
+    const navigate = (0, import_react_router4.useNavigate)();
+    const search = (query) => {
+      const searchParams2 = new URLSearchParams(window.location.search);
+      searchParams2.set("query", query);
+      searchParams2.set("offset", "0");
+      navigate(`${pathname}?${searchParams2.toString()}`);
+    };
+    const [searchParams] = (0, import_react_router4.useSearchParams)();
+    return /* @__PURE__ */ import_react7.default.createElement(
+      AdminLayout,
+      {
+        title: name,
+        actions: /* @__PURE__ */ import_react7.default.createElement(import_react_router4.Link, { to: `${pathname}/new`, className: "button-primary" }, name, " \uCD94\uAC00")
+      },
+      searchKey && /* @__PURE__ */ import_react7.default.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__ */ import_react7.default.createElement(
+          "button",
+          {
+            type: "submit",
+            className: "w-10 h-10 flex justify-center items-center"
+          },
+          /* @__PURE__ */ import_react7.default.createElement(GoSearch, { className: "text-xl mr-4" })
+        ),
+        /* @__PURE__ */ import_react7.default.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__ */ import_react7.default.createElement(
+        Table,
+        {
+          data: items,
+          columns,
+          getLink: primaryKey ? (item) => `${pathname}/${item[primaryKey]}` : void 0,
+          limit,
+          offset,
+          orderBy,
+          direction
+        }
+      ),
+      /* @__PURE__ */ import_react7.default.createElement(
+        TablePageButtons,
+        {
+          total,
+          limit,
+          offset,
+          MAX_PAGES_TO_SHOW: 10
+        }
+      )
+    );
+  };
+}
+
+// src/crud/crud_form.tsx
+var import_store2 = require("dn-react-toolkit/store");
+var import_react8 = __toESM(require("react"));
+function CrudForm({ AdminLayout }) {
+  const form = useFormContext();
+  return /* @__PURE__ */ import_react8.default.createElement(
+    AdminLayout,
+    {
+      title: `${form.name} ${form.item ? "\uC218\uC815" : "\uCD94\uAC00"}`,
+      actions: /* @__PURE__ */ import_react8.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_react8.default.createElement(import_react8.default.Fragment, null, Object.entries(form.columns).map(
+      ([key, value]) => /* @__PURE__ */ import_react8.default.createElement("label", { key }, value.label, value.component ? /* @__PURE__ */ import_react8.default.createElement(value.component, null) : /* @__PURE__ */ import_react8.default.createElement(
+        import_store2.SyncInput,
+        {
+          store: form.store,
+          property: key,
+          className: "input-form"
+        }
+      ))
+    )),
+    form.item && /* @__PURE__ */ import_react8.default.createElement(
+      "button",
+      {
+        className: "button-dangerous mt-8",
+        onClick: () => {
+          form.delete();
+        }
+      },
+      "\uC0AD\uC81C\uD558\uAE30"
+    )
+  );
+}
+
+// src/crud/crud_page.tsx
+var import_react9 = __toESM(require("react"));
+function crudPage({
+  name,
+  tablePageOptions,
+  formOptions,
+  AdminLayout
+}) {
+  return (prefix) => {
+    return function Page() {
+      const data = (0, import_react_router5.useLoaderData)();
+      const { pathname } = (0, import_react_router5.useLocation)();
+      if (pathname === prefix) {
+        const Component = createTablePage({
+          ...tablePageOptions,
+          name
+        });
+        return /* @__PURE__ */ import_react9.default.createElement(Component, { AdminLayout });
+      }
+      if (pathname.startsWith(prefix)) {
+        return /* @__PURE__ */ import_react9.default.createElement(
+          CrudFormProvider,
+          {
+            item: data?.item,
+            prefix,
+            name,
+            columns: formOptions.columns
+          },
+          formOptions.form ? /* @__PURE__ */ import_react9.default.createElement(formOptions.form, null) : /* @__PURE__ */ import_react9.default.createElement(CrudForm, { AdminLayout })
+        );
+      }
+    };
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  crudPage
+});