dn-react-router-toolkit 0.1.0 → 0.1.2

package/dist/auth-kit/with_auth.js

@@ -0,0 +1,108 @@
+"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/auth-kit/with_auth.ts
+var with_auth_exports = {};
+__export(with_auth_exports, {
+  createWithAuthHandler: () => createWithAuthHandler
+});
+module.exports = __toCommonJS(with_auth_exports);
+
+// src/auth-kit/auth_service.ts
+var import_bcryptjs = __toESM(require("bcryptjs"));
+var import_uuid = require("uuid");
+var import_react_router = require("react-router");
+var ACCESS_TOKEN_KEY = "access_token";
+var REFRESH_TOKEN_KEY = "refresh_token";
+var ACCESS_TOKEN_COOKIE = (0, import_react_router.createCookie)(ACCESS_TOKEN_KEY, {
+  path: "/",
+  httpOnly: process.env.NODE_ENV === "production",
+  secure: process.env.NODE_ENV === "production",
+  sameSite: "strict"
+});
+var REFRESH_TOKEN_COOKIE = (0, import_react_router.createCookie)(REFRESH_TOKEN_KEY, {
+  path: "/",
+  httpOnly: process.env.NODE_ENV === "production",
+  secure: process.env.NODE_ENV === "production",
+  sameSite: "strict"
+});
+
+// src/auth-kit/with_auth.ts
+function createWithAuthHandler({
+  JWT_MANAGER,
+  AUTH
+}) {
+  return function(fn) {
+    return async function(arg) {
+      const cookie = arg.request.headers.get("cookie");
+      const accessToken = await ACCESS_TOKEN_COOKIE.parse(cookie);
+      if (accessToken) {
+        const payload = await JWT_MANAGER.verifyAccessToken(accessToken);
+        if (payload) {
+          return fn(payload)(arg);
+        }
+      }
+      const refreshToken = await REFRESH_TOKEN_COOKIE.parse(cookie);
+      if (refreshToken) {
+        try {
+          const refreshedAccessToken = await AUTH.refreshAccessToken(
+            refreshToken
+          );
+          const setCookieHeader = await AUTH.getRefreshTokenSetCookie(
+            refreshedAccessToken
+          );
+          return new Response("Temporary Redirect", {
+            status: 307,
+            headers: {
+              "Set-Cookie": setCookieHeader,
+              Location: arg.request.url
+            }
+          });
+        } catch (e) {
+          if (e instanceof Error) {
+            console.log(e.message);
+          }
+          const setCookieHeader = await AUTH.getRefreshTokenSetCookie(null);
+          return new Response("Temporary Redirect", {
+            status: 307,
+            headers: {
+              "Set-Cookie": setCookieHeader,
+              Location: arg.request.url
+            }
+          });
+        }
+      }
+      return fn(void 0)(arg);
+    };
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createWithAuthHandler
+});

package/dist/auth-kit/with_auth.mjs

@@ -0,0 +1,71 @@
+// src/auth-kit/auth_service.ts
+import bcryptjs from "bcryptjs";
+import { v4 } from "uuid";
+import { createCookie } from "react-router";
+var ACCESS_TOKEN_KEY = "access_token";
+var REFRESH_TOKEN_KEY = "refresh_token";
+var ACCESS_TOKEN_COOKIE = createCookie(ACCESS_TOKEN_KEY, {
+  path: "/",
+  httpOnly: process.env.NODE_ENV === "production",
+  secure: process.env.NODE_ENV === "production",
+  sameSite: "strict"
+});
+var REFRESH_TOKEN_COOKIE = createCookie(REFRESH_TOKEN_KEY, {
+  path: "/",
+  httpOnly: process.env.NODE_ENV === "production",
+  secure: process.env.NODE_ENV === "production",
+  sameSite: "strict"
+});
+
+// src/auth-kit/with_auth.ts
+function createWithAuthHandler({
+  JWT_MANAGER,
+  AUTH
+}) {
+  return function(fn) {
+    return async function(arg) {
+      const cookie = arg.request.headers.get("cookie");
+      const accessToken = await ACCESS_TOKEN_COOKIE.parse(cookie);
+      if (accessToken) {
+        const payload = await JWT_MANAGER.verifyAccessToken(accessToken);
+        if (payload) {
+          return fn(payload)(arg);
+        }
+      }
+      const refreshToken = await REFRESH_TOKEN_COOKIE.parse(cookie);
+      if (refreshToken) {
+        try {
+          const refreshedAccessToken = await AUTH.refreshAccessToken(
+            refreshToken
+          );
+          const setCookieHeader = await AUTH.getRefreshTokenSetCookie(
+            refreshedAccessToken
+          );
+          return new Response("Temporary Redirect", {
+            status: 307,
+            headers: {
+              "Set-Cookie": setCookieHeader,
+              Location: arg.request.url
+            }
+          });
+        } catch (e) {
+          if (e instanceof Error) {
+            console.log(e.message);
+          }
+          const setCookieHeader = await AUTH.getRefreshTokenSetCookie(null);
+          return new Response("Temporary Redirect", {
+            status: 307,
+            headers: {
+              "Set-Cookie": setCookieHeader,
+              Location: arg.request.url
+            }
+          });
+        }
+      }
+      return fn(void 0)(arg);
+    };
+  };
+}
+export {
+  createWithAuthHandler
+};

package/dist/cn.d.mts

@@ -0,0 +1,3 @@
+declare function cn(...classes: (string | false | undefined)[]): string;
+
+export { cn };

package/dist/cn.d.ts

@@ -0,0 +1,3 @@
+declare function cn(...classes: (string | false | undefined)[]): string;
+
+export { cn };

package/dist/cn.js

@@ -0,0 +1,32 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/cn.ts
+var cn_exports = {};
+__export(cn_exports, {
+  cn: () => cn
+});
+module.exports = __toCommonJS(cn_exports);
+function cn(...classes) {
+  return classes.filter(Boolean).join(" ").trim();
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  cn
+});

package/dist/cn.mjs

@@ -0,0 +1,7 @@
+// src/cn.ts
+function cn(...classes) {
+  return classes.filter(Boolean).join(" ").trim();
+}
+export {
+  cn
+};

package/dist/components/index.d.mts

@@ -0,0 +1,5 @@
+export { Props, useFullscreen } from './modal/fullscreen_container.mjs';
+export { ModalContext, ModalContextProps, useModal, useModalPortal, useModalRoot } from './modal/hooks.mjs';
+export { ModalProps } from './modal/modal.mjs';
+export { baseButtonStyle, dangerousButtonStyle, disabledButtonStyle, formInputStyle, inputBackgroundStyle, outlineButtonStyle, primaryButtonStyle } from './styles.mjs';
+import 'react';

package/dist/components/index.d.ts

@@ -0,0 +1,5 @@
+export { Props, useFullscreen } from './modal/fullscreen_container.js';
+export { ModalContext, ModalContextProps, useModal, useModalPortal, useModalRoot } from './modal/hooks.js';
+export { ModalProps } from './modal/modal.js';
+export { baseButtonStyle, dangerousButtonStyle, disabledButtonStyle, formInputStyle, inputBackgroundStyle, outlineButtonStyle, primaryButtonStyle } from './styles.js';
+import 'react';

package/dist/components/index.js

@@ -0,0 +1,261 @@
+"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/components/index.ts
+var components_exports = {};
+__export(components_exports, {
+  ModalContext: () => ModalContext,
+  baseButtonStyle: () => baseButtonStyle,
+  dangerousButtonStyle: () => dangerousButtonStyle,
+  disabledButtonStyle: () => disabledButtonStyle,
+  formInputStyle: () => formInputStyle,
+  inputBackgroundStyle: () => inputBackgroundStyle,
+  outlineButtonStyle: () => outlineButtonStyle,
+  primaryButtonStyle: () => primaryButtonStyle,
+  useFullscreen: () => useFullscreen,
+  useModal: () => useModal,
+  useModalPortal: () => useModalPortal,
+  useModalRoot: () => useModalRoot
+});
+module.exports = __toCommonJS(components_exports);
+
+// src/cn.ts
+function cn(...classes) {
+  return classes.filter(Boolean).join(" ").trim();
+}
+
+// src/components/modal/fullscreen_container.tsx
+var import_react = __toESM(require("react"));
+var import_react2 = require("react");
+function useFullscreen(ref) {
+  (0, import_react2.useEffect)(() => {
+    const container = ref.current;
+    if (!container) {
+      return;
+    }
+    const scroll = () => {
+      if (scrollY > 0) {
+        window.scrollTo({
+          top: 0,
+          behavior: "instant"
+        });
+      }
+    };
+    const resize = () => {
+      if (!visualViewport) {
+        return;
+      }
+      container.classList.remove("bottom-0");
+      container.style.height = `${visualViewport?.height}px`;
+      if (visualViewport.height < window.innerHeight) {
+        window.addEventListener("scroll", scroll);
+      } else {
+        window.removeEventListener("scroll", scroll);
+      }
+    };
+    resize();
+    visualViewport?.addEventListener("resize", resize);
+    scroll();
+    return () => {
+      window.removeEventListener("scroll", scroll);
+      visualViewport?.removeEventListener("resize", resize);
+    };
+  }, [ref]);
+  return "fixed inset-0";
+}
+
+// src/components/modal/hooks.tsx
+var import_react4 = require("react");
+var import_react_dom = require("react-dom");
+
+// src/components/modal/modal.tsx
+var import_react3 = __toESM(require("react"));
+function Modal({
+  open,
+  className,
+  background = "bg-gray-500/25",
+  onBackgroundClick,
+  children,
+  ...props
+}) {
+  const containerRef = (0, import_react3.useRef)(null);
+  const fullscreen = useFullscreen(containerRef);
+  const [mounted, setMounted] = import_react3.default.useState(false);
+  (0, import_react3.useEffect)(() => {
+    if (open) {
+      setMounted(true);
+    } else {
+      setTimeout(() => {
+        setMounted(false);
+      }, 200);
+    }
+    return () => {
+    };
+  }, [open]);
+  const onBackgroundMouseDown = (event) => {
+    event.preventDefault();
+    onBackgroundClick?.();
+  };
+  const onModalMouseDown = (event) => {
+    event.stopPropagation();
+  };
+  const onBackgroundTouchStart = (event) => {
+    event.preventDefault();
+    onBackgroundClick?.();
+  };
+  const onModalTouchStart = (event) => {
+    event.stopPropagation();
+  };
+  return /* @__PURE__ */ import_react3.default.createElement(
+    "div",
+    {
+      ref: containerRef,
+      className: cn(
+        fullscreen,
+        "z-[999] flex flex-col justify-center transition-bg duration-200 md:px-6 overflow-hidden print:px-0 print:block print:overflow-auto",
+        open && mounted ? cn(background, "ease-out") : "bg-transparent ease-in pointer-events-none"
+      ),
+      onMouseDown: onBackgroundMouseDown,
+      onTouchStart: onBackgroundTouchStart
+    },
+    /* @__PURE__ */ import_react3.default.createElement(
+      "div",
+      {
+        className: cn(
+          "relative flex-1 flex flex-col justify-end md:justify-center items-center transition-[opacity transform] duration-200 print:block",
+          open && mounted ? "translate-y-[0px] opacity-100 ease-out" : "translate-y-[100%] md:translate-y-[50px] opacity-0 ease-in"
+        )
+      },
+      (open || mounted) && /* @__PURE__ */ import_react3.default.createElement(
+        "div",
+        {
+          ...props,
+          className: cn(
+            className,
+            "w-full max-h-[92vh] print:w-[unset] print:max-h-[unset] rounded-tl-lg rounded-tr-lg md:rounded-lg overflow-auto print:rounded-none"
+          ),
+          onMouseDown: onModalMouseDown,
+          onTouchStart: onModalTouchStart
+        },
+        children
+      )
+    )
+  );
+}
+
+// src/components/modal/hooks.tsx
+var import_react5 = __toESM(require("react"));
+function useModalRoot() {
+  const [container, setContainer] = (0, import_react4.useState)(null);
+  (0, import_react4.useEffect)(() => {
+    const container2 = document.getElementById("modal-root");
+    if (container2) {
+      setContainer(container2);
+    }
+    return () => {
+      setContainer(null);
+    };
+  }, []);
+  return container;
+}
+function useModalPortal() {
+  const container = useModalRoot();
+  if (!container) {
+    return (children) => null;
+  }
+  return (children) => {
+    return (0, import_react_dom.createPortal)(children, container);
+  };
+}
+var ModalContext = (0, import_react4.createContext)({});
+function useModal() {
+  const ch2 = (0, import_react4.useRef)(
+    null
+  );
+  const open = () => {
+    ch2.current?.(true);
+  };
+  const close = () => {
+    ch2.current?.(false);
+  };
+  const Component = (0, import_react4.useCallback)(
+    function Component2(props) {
+      const [isOpen, setIsOpen] = (0, import_react4.useState)(false);
+      const createPortal2 = useModalPortal();
+      (0, import_react4.useEffect)(() => {
+        ch2.current = (v) => {
+          setIsOpen(v);
+        };
+        return () => {
+          ch2.current = null;
+        };
+      }, []);
+      (0, import_react4.useEffect)(() => {
+        if (isOpen) {
+        } else {
+        }
+        return () => {
+        };
+      }, [isOpen]);
+      return /* @__PURE__ */ import_react5.default.createElement(ModalContext.Provider, { value: { open, close, isOpen } }, createPortal2(
+        /* @__PURE__ */ import_react5.default.createElement(Modal, { ...props, open: isOpen, onBackgroundClick: close })
+      ));
+    },
+    []
+  );
+  return {
+    open,
+    close,
+    Modal: Component
+  };
+}
+
+// src/components/styles.ts
+var inputBackgroundStyle = "text-[16px] border border-neutral-200 outline-none appearance-none disabled:opacity-50 disabled:cursor-not-allowed placeholder:text-neutral-400";
+var formInputStyle = `w-full px-3 ${inputBackgroundStyle} h-[40px]`;
+var baseButtonStyle = "transition-colors text-sm font-semibold cursor-pointer flex items-center justify-center rounded-lg whitespace-nowrap text-ellipsis overflow-hidden";
+var primaryButtonStyle = `${baseButtonStyle} px-4 h-[40px] bg-gradient-to-br from-primary-400 to-primary-500 text-white transition-colors`;
+var disabledButtonStyle = `${baseButtonStyle} h-[40px] px-4 bg-neutral-200 text-neutral-400`;
+var outlineButtonStyle = `${baseButtonStyle} h-[40px] px-4 bg-white border border-neutral-300 hover:bg-neutral-50`;
+var dangerousButtonStyle = `${baseButtonStyle} h-[40px] px-4 bg-white border hover:bg-red-50 text-red-600`;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ModalContext,
+  baseButtonStyle,
+  dangerousButtonStyle,
+  disabledButtonStyle,
+  formInputStyle,
+  inputBackgroundStyle,
+  outlineButtonStyle,
+  primaryButtonStyle,
+  useFullscreen,
+  useModal,
+  useModalPortal,
+  useModalRoot
+});