dn-react-router-toolkit 0.1.1 → 0.1.3

package/dist/esm/auth-kit/auth_service.js

@@ -1,197 +0,0 @@
-import bcryptjs from "bcryptjs";
-import { v4 } from "uuid";
-import { createCookie } from "react-router";
-export const ACCESS_TOKEN_KEY = "access_token";
-export const REFRESH_TOKEN_KEY = "refresh_token";
-export const ACCESS_TOKEN_COOKIE = createCookie(ACCESS_TOKEN_KEY, {
-    path: "/",
-    httpOnly: process.env.NODE_ENV === "production",
-    secure: process.env.NODE_ENV === "production",
-    sameSite: "strict",
-});
-export const REFRESH_TOKEN_COOKIE = createCookie(REFRESH_TOKEN_KEY, {
-    path: "/",
-    httpOnly: process.env.NODE_ENV === "production",
-    secure: process.env.NODE_ENV === "production",
-    sameSite: "strict",
-});
-export class AuthService {
-    repository;
-    JWT_MANAGER;
-    OBJECT_STORAGE;
-    constructor({ repository, JWT_MANAGER, OBJECT_STORAGE, }) {
-        this.repository = repository;
-        this.JWT_MANAGER = JWT_MANAGER;
-        this.OBJECT_STORAGE = OBJECT_STORAGE;
-    }
-    async verify(request) {
-        const accessToken = request?.headers.get("Authorization")?.replace("Bearer ", "") ||
-            (await this.getAccessTokenFromCookies(request));
-        if (accessToken) {
-            return this.JWT_MANAGER.verifyAccessToken(accessToken);
-        }
-    }
-    async verifyOrRefresh(request) {
-        const payload = await this.verify(request);
-        if (payload) {
-            return payload;
-        }
-        return this.refresh(request);
-    }
-    async getAccessTokenFromCookies(request) {
-        const cookieStore = await ACCESS_TOKEN_COOKIE.parse(request.headers.get("cookie"));
-        return cookieStore.get(ACCESS_TOKEN_KEY)?.value;
-    }
-    async getRefreshTokenFromCookies(request) {
-        const cookieStore = await REFRESH_TOKEN_COOKIE.parse(request.headers.get("cookie"));
-        return cookieStore.get(REFRESH_TOKEN_KEY)?.value;
-    }
-    async refresh(request) {
-        const refreshToken = await this.getRefreshTokenFromCookies(request);
-        if (refreshToken) {
-            try {
-                const refreshedAccessToken = await this.refreshAccessToken(refreshToken);
-                await this.getAccessTokenSetCookie(refreshedAccessToken);
-                const payload = this.JWT_MANAGER.decode(refreshedAccessToken);
-                if (payload) {
-                    return payload;
-                }
-            }
-            catch (e) {
-                if (e instanceof Error) {
-                    console.log(e.message);
-                }
-                return;
-            }
-        }
-    }
-    async signIn({ id, password }) {
-        const credential = await this.repository.findCredentialById(id);
-        if (!credential) {
-            throw Error("아이디 또는 비밀번호가 틀렸습니다.");
-        }
-        if (!(await bcryptjs.compare(password, credential.password))) {
-            throw Error("아이디 또는 비밀번호가 틀렸습니다.");
-        }
-        const user = await this.repository.findUserById(credential.userId);
-        if (!user) {
-            throw Error("회원 정보를 찾을 수 없습니다.");
-        }
-        const { accessToken, refreshToken } = await this.issueTokenPair(user);
-        return {
-            accessToken,
-            refreshToken,
-        };
-    }
-    async issueAccessToken(user) {
-        return this.JWT_MANAGER.signAccessToken({
-            userId: user.id,
-            role: user.role,
-            name: user.name,
-        });
-    }
-    async issueTokenPair(user) {
-        const refreshToken = await this.JWT_MANAGER.signRefreshToken({
-            userId: user.id,
-            role: user.role,
-            name: user.name,
-        });
-        await this.repository.updateUserRefreshToken(user.id, await bcryptjs.hash(refreshToken, 10));
-        const accessToken = await this.issueAccessToken(user);
-        return { refreshToken, accessToken };
-    }
-    async refreshAccessToken(refreshToken) {
-        const payload = await this.JWT_MANAGER.verifyRefreshToken(refreshToken);
-        if (!payload) {
-            throw new Error("토큰이 유효하지 않습니다.");
-        }
-        const { userId } = payload;
-        if (typeof userId !== "string") {
-            throw new Error("토큰이 유효하지 않습니다.");
-        }
-        const user = await this.repository.findUserById(userId);
-        if (!user) {
-            throw Error("이용자를 찾지 못했습니다.");
-        }
-        if (!user.refreshToken) {
-            throw Error("인증 정보를 찾지 못했습니다.");
-        }
-        if (await bcryptjs.compare(user.refreshToken, refreshToken)) {
-            throw Error("토큰이 유효하지 않습니다.");
-        }
-        const accessToken = await this.issueAccessToken(user);
-        return accessToken;
-    }
-    async getAccessTokenSetCookie(accessToken) {
-        return ACCESS_TOKEN_COOKIE.serialize(accessToken, {
-            expires: accessToken
-                ? this.JWT_MANAGER.getExpirationTime(accessToken)
-                : new Date(0),
-        });
-    }
-    async getRefreshTokenSetCookie(refreshToken) {
-        return REFRESH_TOKEN_COOKIE.serialize(refreshToken, {
-            expires: refreshToken
-                ? this.JWT_MANAGER.getExpirationTime(refreshToken)
-                : new Date(0),
-        });
-    }
-    async findUser(provider, info) {
-        const thirdPartyAuth = await this.repository.findThirdPartyAuth(provider, info.id);
-        if (thirdPartyAuth) {
-            const user = await this.repository.findUserById(thirdPartyAuth.userId);
-            if (user) {
-                return user;
-            }
-        }
-    }
-    async getOrCreateUser(provider, info) {
-        const thirdPartyAuth = await this.repository.findThirdPartyAuth(provider, info.id);
-        if (thirdPartyAuth) {
-            const user = await this.repository.findUserById(thirdPartyAuth.userId);
-            if (user) {
-                return user;
-            }
-        }
-        const userId = v4();
-        const email = info.email;
-        const name = info.name || "익명";
-        const picture = info.picture;
-        const profileImageId = (await this.savePicture(picture)) || null;
-        const result = await this.repository.createUser({
-            id: userId,
-            role: "user",
-            profileImageId,
-            name,
-            email,
-        });
-        await this.repository.createThirdPartyAuth({
-            id: info.id,
-            provider,
-            userId,
-        });
-        return result;
-    }
-    async savePicture(picture) {
-        if (!picture) {
-            return;
-        }
-        const res = await fetch(picture);
-        if (!res.ok) {
-            return;
-        }
-        const buffer = await res.arrayBuffer();
-        const id = v4();
-        const key = `/users/${id}/picture`;
-        await this.OBJECT_STORAGE.put(key, Buffer.from(buffer));
-        await this.repository.createFile({
-            id,
-            name: "picture",
-            type: "image/*",
-            key,
-            size: buffer.byteLength,
-            metadata: {},
-        });
-        return id;
-    }
-}

package/dist/esm/auth-kit/client/google_login_button.d.ts

@@ -1,5 +0,0 @@
-export declare function GoogleLoginButton({ className, GOOGLE_CLIENT_ID, GOOGLE_REDIRECT_URI, }: {
-    className?: string;
-    GOOGLE_CLIENT_ID: string;
-    GOOGLE_REDIRECT_URI: string;
-}): import("react/jsx-runtime").JSX.Element;

package/dist/esm/auth-kit/client/google_login_button.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { FcGoogle } from "react-icons/fc";
-import { useSearchParams } from "react-router";
-export function GoogleLoginButton({ className = "max-w-[300px] w-full", GOOGLE_CLIENT_ID, GOOGLE_REDIRECT_URI, }) {
-    const [searchParams] = useSearchParams();
-    const redirectUrl = searchParams.get("redirectUrl") || "";
-    const googleClientId = GOOGLE_CLIENT_ID || "";
-    const googleRedirectUrl = GOOGLE_REDIRECT_URI || "";
-    const href = new URL("https://accounts.google.com/o/oauth2/v2/auth");
-    href.searchParams.append("client_id", googleClientId);
-    href.searchParams.append("redirect_uri", googleRedirectUrl);
-    href.searchParams.append("response_type", "code");
-    href.searchParams.append("scope", "email profile");
-    href.searchParams.append("state", redirectUrl);
-    return (_jsx("div", { className: className, children: _jsxs("a", { href: href.toString(), className: "relative flex items-center border border-neutral-300 px-4 py-3 no-underline hover:no-underline bg-white hover:bg-neutral-100 rounded", children: [_jsx(FcGoogle, {}), _jsx("p", { className: "text-[14px] text-black absolute left-0 right-0 text-center", children: "\uAD6C\uAE00\uB85C \uACC4\uC18D\uD558\uAE30" })] }) }));
-}

package/dist/esm/auth-kit/client/redirect_page.d.ts

@@ -1 +0,0 @@
-export declare function RedirectPage(): import("react/jsx-runtime").JSX.Element;

package/dist/esm/auth-kit/client/redirect_page.js

@@ -1,15 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { useEffect } from "react";
-import { useNavigate } from "react-router";
-export function RedirectPage() {
-    const navigate = useNavigate();
-    useEffect(() => {
-        const searchParams = new URLSearchParams(window.location.search);
-        const redirectUrl = searchParams.get("redirectUrl") ||
-            new URL("/", window.location.origin).toString();
-        if (redirectUrl) {
-            navigate(redirectUrl);
-        }
-    }, [navigate]);
-    return _jsx(_Fragment, {});
-}

package/dist/esm/auth-kit/google_auth.js

@@ -1,65 +0,0 @@
-import { BAD_REQUEST, createJsonResponse, INTERNAL_SERVER_ERROR, } from "../http-kit/response";
-export class GoogleAuth {
-    AUTH;
-    GOOGLE_CLIENT_ID;
-    GOOGLE_CLIENT_SECRET;
-    GOOGLE_REDIRECT_URI;
-    constructor(AUTH, GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET, GOOGLE_REDIRECT_URI) {
-        this.GOOGLE_CLIENT_ID = GOOGLE_CLIENT_ID;
-        this.GOOGLE_CLIENT_SECRET = GOOGLE_CLIENT_SECRET;
-        this.GOOGLE_REDIRECT_URI = GOOGLE_REDIRECT_URI;
-        this.AUTH = AUTH;
-    }
-    async signIn(code) {
-        const tokenRes = await fetch("https://oauth2.googleapis.com/token", {
-            method: "POST",
-            headers: {
-                "Content-Type": "application/x-www-form-urlencoded",
-            },
-            body: new URLSearchParams({
-                code,
-                client_id: this.GOOGLE_CLIENT_ID,
-                client_secret: this.GOOGLE_CLIENT_SECRET,
-                redirect_uri: this.GOOGLE_REDIRECT_URI,
-                grant_type: "authorization_code",
-            }),
-        });
-        if (!tokenRes.ok) {
-            if (process.env.NODE_ENV === "development") {
-                throw INTERNAL_SERVER_ERROR(`구글 토큰 발급에 실패했습니다. status: ${tokenRes.status}, message: ${await tokenRes.text()}`);
-            }
-            throw INTERNAL_SERVER_ERROR("인증에 실패했습니다.");
-        }
-        const { access_token } = await tokenRes.json();
-        const userRes = await fetch("https://www.googleapis.com/oauth2/v1/userinfo", {
-            headers: {
-                Authorization: `Bearer ${access_token}`,
-            },
-        });
-        if (!userRes.ok) {
-            throw BAD_REQUEST("유저 정보를 가져오는데 실패했습니다.");
-        }
-        const { id, email, name, picture } = await userRes.json();
-        const user = await this.AUTH.findUser("google", {
-            id,
-            email,
-            name,
-            picture,
-        });
-        if (!user) {
-            throw createJsonResponse(404)({
-                provider: "google",
-                id,
-                name,
-                picture,
-                message: "사용자를 찾을 수 없습니다.",
-            });
-        }
-        const { accessToken, refreshToken } = await this.AUTH.issueTokenPair(user);
-        return {
-            user,
-            accessToken,
-            refreshToken,
-        };
-    }
-}

package/dist/esm/auth-kit/jwt.js

@@ -1,50 +0,0 @@
-import { SignJWT, decodeJwt, jwtVerify } from "jose";
-export class JWTManager {
-    siteOrigin;
-    constructor(siteOrigin) {
-        this.siteOrigin = siteOrigin;
-    }
-    async verify(token, secret) {
-        try {
-            const result = await jwtVerify(token, new TextEncoder().encode(secret));
-            return result.payload;
-        }
-        catch (_) {
-            return;
-        }
-    }
-    async verifyAccessToken(token) {
-        return this.verify(token, process.env.ACCESS_TOKEN_SECRET);
-    }
-    async verifyRefreshToken(token) {
-        return this.verify(token, process.env.REFRESH_TOKEN_SECRET);
-    }
-    async sign(payload, secret, { expiresIn } = {}) {
-        let builder = new SignJWT(payload)
-            .setProtectedHeader({ alg: "HS256", typ: "JWT" })
-            .setIssuedAt();
-        if (this.siteOrigin) {
-            builder = builder.setIssuer(this.siteOrigin);
-        }
-        if (expiresIn) {
-            builder = builder.setExpirationTime(expiresIn);
-        }
-        return builder.sign(new TextEncoder().encode(secret));
-    }
-    async signAccessToken(payload) {
-        return this.sign(payload, process.env.ACCESS_TOKEN_SECRET, {
-            expiresIn: process.env.ACCESS_TOKEN_EXPIRES_IN || "10s",
-        });
-    }
-    async signRefreshToken(payload) {
-        return this.sign(payload, process.env.REFRESH_TOKEN_SECRET, {
-            expiresIn: process.env.REFRESH_TOKEN_EXPIRES_IN || "1d",
-        });
-    }
-    decode(token) {
-        return decodeJwt(token);
-    }
-    getExpirationTime(token) {
-        return new Date(Number(decodeJwt(token).exp) * 1000);
-    }
-}

package/dist/esm/auth-kit/kakao_auth.js

@@ -1,39 +0,0 @@
-import { createJsonResponse } from "../http-kit";
-export class KakaoAuth {
-    AUTH;
-    constructor(AUTH) {
-        this.AUTH = AUTH;
-    }
-    async signIn(kakaoAccessToken) {
-        const userRes = await fetch("https://kapi.kakao.com/v2/user/me", {
-            headers: {
-                Authorization: `Bearer ${kakaoAccessToken}`,
-            },
-        });
-        if (!userRes.ok) {
-            throw new Error("유저 정보를 가져오는데 실패했습니다.");
-        }
-        const { id, kakao_account } = await userRes.json();
-        const { email, profile } = kakao_account;
-        const payload = {
-            id,
-            email,
-            name: profile.nickname,
-            picture: profile.thumbnail_image_url,
-        };
-        const user = await this.AUTH.findUser("kakao", payload);
-        if (!user) {
-            throw createJsonResponse(404)({
-                provider: "kakao",
-                ...payload,
-                message: "사용자를 찾을 수 없습니다.",
-            });
-        }
-        const { accessToken, refreshToken } = await this.AUTH.issueTokenPair(user);
-        return {
-            user,
-            accessToken,
-            refreshToken,
-        };
-    }
-}

package/dist/esm/auth-kit/repository.js

@@ -1 +0,0 @@
-export {};

package/dist/esm/auth-kit/with_auth.d.ts

@@ -1,12 +0,0 @@
-import type { ActionFunctionArgs, LoaderFunctionArgs } from "react-router";
-import { AuthService } from "./auth_service";
-import { JWTManager } from "./jwt";
-import type { JWTPayload } from "jose";
-type Fn<T extends LoaderFunctionArgs | ActionFunctionArgs> = (arg: T) => Promise<unknown> | unknown;
-type InputFN = (auth?: JWTPayload) => Fn<LoaderFunctionArgs> | Fn<ActionFunctionArgs>;
-export type WithAuthHandler<T extends LoaderFunctionArgs | ActionFunctionArgs> = (fn: InputFN) => Fn<T>;
-export declare function createWithAuthHandler<T extends LoaderFunctionArgs | ActionFunctionArgs>({ JWT_MANAGER, AUTH, }: {
-    JWT_MANAGER: JWTManager;
-    AUTH: AuthService;
-}): WithAuthHandler<T>;
-export {};

package/dist/esm/auth-kit/with_auth.js

@@ -1,43 +0,0 @@
-import { ACCESS_TOKEN_COOKIE, REFRESH_TOKEN_COOKIE, } from "./auth_service";
-export 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(undefined)(arg);
-        };
-    };
-}

package/dist/esm/cn.d.ts

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

package/dist/esm/cn.js

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

package/dist/esm/components/index.d.ts

@@ -1,2 +0,0 @@
-export * from "./modal";
-export * from "./styles";

package/dist/esm/components/index.js

@@ -1,2 +0,0 @@
-export * from "./modal";
-export * from "./styles";

package/dist/esm/components/modal/fullscreen_container.d.ts

@@ -1,5 +0,0 @@
-import React from "react";
-import { type DetailedHTMLProps, type HTMLAttributes } from "react";
-export type Props = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
-export default function FullscreenContainer({ className, children, ...props }: Props): import("react/jsx-runtime").JSX.Element;
-export declare function useFullscreen(ref: React.RefObject<HTMLDivElement | null>): string;

package/dist/esm/components/modal/fullscreen_container.js

@@ -1,45 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from "../../cn";
-import { useEffect, useRef, } from "react";
-export default function FullscreenContainer({ className, children, ...props }) {
-    const containerRef = useRef(null);
-    useFullscreen(containerRef);
-    return (_jsx("div", { ref: containerRef, ...props, className: cn("fixed left-0 right-0 top-0 bottom-0", className), children: children }));
-}
-export function useFullscreen(ref) {
-    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";
-}

package/dist/esm/components/modal/hooks.d.ts

@@ -1,15 +0,0 @@
-import { type ModalProps } from "./modal";
-import React from "react";
-export declare function useModalRoot(): HTMLElement | null;
-export declare function useModalPortal(): ((children: React.ReactNode) => null) | ((children: React.ReactNode) => React.ReactPortal);
-export type ModalContextProps = {
-    open: () => void;
-    close: () => void;
-    isOpen: boolean;
-};
-export declare const ModalContext: React.Context<ModalContextProps>;
-export declare function useModal(): {
-    open: () => void;
-    close: () => void;
-    Modal: (props: Omit<ModalProps, "open">) => import("react/jsx-runtime").JSX.Element;
-};

package/dist/esm/components/modal/hooks.js

@@ -1,67 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useCallback, useEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-import Modal from "./modal";
-export function useModalRoot() {
-    const [container, setContainer] = useState(null);
-    useEffect(() => {
-        const container = document.getElementById("modal-root");
-        if (container) {
-            setContainer(container);
-        }
-        return () => {
-            setContainer(null);
-        };
-    }, []);
-    return container;
-}
-export function useModalPortal() {
-    const container = useModalRoot();
-    if (!container) {
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        return (children) => null;
-    }
-    return (children) => {
-        return createPortal(children, container);
-    };
-}
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const ModalContext = createContext({});
-export function useModal() {
-    const ch2 = useRef(null);
-    const open = () => {
-        ch2.current?.(true);
-    };
-    const close = () => {
-        ch2.current?.(false);
-    };
-    const Component = useCallback(function Component(props) {
-        const [isOpen, setIsOpen] = useState(false);
-        const createPortal = useModalPortal();
-        useEffect(() => {
-            ch2.current = (v) => {
-                setIsOpen(v);
-            };
-            return () => {
-                ch2.current = null;
-            };
-        }, []);
-        useEffect(() => {
-            if (isOpen) {
-                // document.body.style.overflow = "hidden";
-            }
-            else {
-                // document.body.style.overflow = "";
-            }
-            return () => {
-                // document.body.style.overflow = "";
-            };
-        }, [isOpen]);
-        return (_jsx(ModalContext.Provider, { value: { open, close, isOpen }, children: createPortal(_jsx(Modal, { ...props, open: isOpen, onBackgroundClick: close })) }));
-    }, []);
-    return {
-        open,
-        close,
-        Modal: Component,
-    };
-}

package/dist/esm/components/modal/index.d.ts

@@ -1,3 +0,0 @@
-export * from "./fullscreen_container";
-export * from "./hooks";
-export * from "./modal";

package/dist/esm/components/modal/index.js

@@ -1,3 +0,0 @@
-export * from "./fullscreen_container";
-export * from "./hooks";
-export * from "./modal";

package/dist/esm/components/modal/modal.d.ts

@@ -1,10 +0,0 @@
-import React, { type ReactNode } from "react";
-export type ModalProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
-    open: boolean;
-    children?: ReactNode;
-    onBackgroundClick?: () => void;
-    embeded?: boolean;
-    always?: boolean;
-    background?: string;
-};
-export default function Modal({ open, className, background, onBackgroundClick, children, ...props }: ModalProps): import("react/jsx-runtime").JSX.Element;