nucleus-core-ts 0.8.7 → 0.8.8

package/dist/fe/components/ResetPasswordPage/components/ResetPasswordForm.js

@@ -0,0 +1,347 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
+import { useMemo, useRef } from "react";
+import { cn } from "../../../utils/cn";
+import { Button } from "../../Button";
+import { NucleusTextInput } from "../../NucleusTextInput";
+import { DEFAULT_PASSWORD_POLICY } from "../../SetPasswordPage/types";
+import { useResetPasswordStore } from "../store";
+import { resetPasswordPageTheme } from "../theme";
+gsap.registerPlugin(useGSAP);
+function ArrowLeftIcon({ className }) {
+    return /*#__PURE__*/ _jsx("svg", {
+        className: cn("w-4 h-4", className),
+        fill: "none",
+        stroke: "currentColor",
+        viewBox: "0 0 24 24",
+        "aria-hidden": "true",
+        children: /*#__PURE__*/ _jsx("path", {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 2,
+            d: "M10 19l-7-7m0 0l7-7m-7 7h18"
+        })
+    });
+}
+function CheckCircleIcon({ className }) {
+    return /*#__PURE__*/ _jsx("svg", {
+        className: cn("w-8 h-8 text-green-600 dark:text-green-400", className),
+        fill: "none",
+        stroke: "currentColor",
+        viewBox: "0 0 24 24",
+        "aria-hidden": "true",
+        children: /*#__PURE__*/ _jsx("path", {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 2,
+            d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+        })
+    });
+}
+function CheckIcon({ className }) {
+    return /*#__PURE__*/ _jsx("svg", {
+        className: cn("w-3 h-3", className),
+        fill: "none",
+        stroke: "currentColor",
+        viewBox: "0 0 24 24",
+        "aria-hidden": "true",
+        children: /*#__PURE__*/ _jsx("path", {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 2,
+            d: "M5 13l4 4L19 7"
+        })
+    });
+}
+function XIcon({ className }) {
+    return /*#__PURE__*/ _jsx("svg", {
+        className: cn("w-3 h-3", className),
+        fill: "none",
+        stroke: "currentColor",
+        viewBox: "0 0 24 24",
+        "aria-hidden": "true",
+        children: /*#__PURE__*/ _jsx("path", {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 2,
+            d: "M6 18L18 6M6 6l12 12"
+        })
+    });
+}
+export function ResetPasswordForm({ token, resetPasswordAction, onBackToLogin, backToLoginHref, passwordPolicy = {} }) {
+    const theme = resetPasswordPageTheme;
+    const formRef = useRef(null);
+    const successRef = useRef(null);
+    const store = useResetPasswordStore();
+    const policy = {
+        ...DEFAULT_PASSWORD_POLICY,
+        ...passwordPolicy
+    };
+    const passwordRequirements = useMemo(()=>{
+        const reqs = [
+            {
+                key: "length",
+                label: `At least ${policy.minLength} characters`,
+                test: (p)=>p.length >= policy.minLength
+            }
+        ];
+        if (policy.requireUppercase) {
+            reqs.push({
+                key: "uppercase",
+                label: "One uppercase letter",
+                test: (p)=>/[A-Z]/.test(p)
+            });
+        }
+        if (policy.requireLowercase) {
+            reqs.push({
+                key: "lowercase",
+                label: "One lowercase letter",
+                test: (p)=>/[a-z]/.test(p)
+            });
+        }
+        if (policy.requireNumber) {
+            reqs.push({
+                key: "number",
+                label: "One number",
+                test: (p)=>/\d/.test(p)
+            });
+        }
+        if (policy.requireSpecialChar) {
+            reqs.push({
+                key: "special",
+                label: "One special character",
+                test: (p)=>{
+                    const escapedChars = policy.specialChars.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
+                    return new RegExp(`[${escapedChars}]`).test(p);
+                }
+            });
+        }
+        return reqs;
+    }, [
+        policy.minLength,
+        policy.requireUppercase,
+        policy.requireLowercase,
+        policy.requireNumber,
+        policy.requireSpecialChar,
+        policy.specialChars
+    ]);
+    const { contextSafe } = useGSAP({
+        scope: formRef
+    });
+    const isLoading = resetPasswordAction.state.isPending;
+    const handleSubmit = contextSafe((e)=>{
+        e.preventDefault();
+        if (!store.newPassword || !store.confirmPassword) {
+            store.setError("Please fill in all fields");
+            shakeForm();
+            return;
+        }
+        if (store.newPassword !== store.confirmPassword) {
+            store.setError("Passwords do not match");
+            shakeForm();
+            return;
+        }
+        const allRequirementsMet = passwordRequirements.every((req)=>req.test(store.newPassword));
+        if (!allRequirementsMet) {
+            store.setError("Password does not meet all requirements");
+            shakeForm();
+            return;
+        }
+        store.setError(null);
+        resetPasswordAction.start({
+            payload: {
+                token,
+                newPassword: store.newPassword,
+                confirmPassword: store.confirmPassword
+            },
+            onAfterHandle: ()=>{
+                store.setStep("success");
+            },
+            onErrorHandle: (err)=>{
+                const errorMessage = err instanceof Error ? err.message : "Failed to reset password. Please try again.";
+                store.setError(errorMessage);
+                shakeForm();
+            }
+        });
+    });
+    const shakeForm = contextSafe(()=>{
+        if (!formRef.current) return;
+        gsap.fromTo(formRef.current, {
+            x: -10
+        }, {
+            x: 10,
+            duration: 0.08,
+            repeat: 5,
+            yoyo: true,
+            ease: "power2.inOut",
+            onComplete: ()=>{
+                gsap.set(formRef.current, {
+                    x: 0
+                });
+            }
+        });
+    });
+    useGSAP(()=>{
+        if (store.step === "success" && successRef.current) {
+            gsap.fromTo(successRef.current, {
+                opacity: 0,
+                scale: 0.9
+            }, {
+                opacity: 1,
+                scale: 1,
+                duration: 0.4,
+                ease: "back.out(1.7)"
+            });
+        }
+    }, {
+        dependencies: [
+            store.step
+        ]
+    });
+    const handleBackToLoginClick = ()=>{
+        if (onBackToLogin) {
+            onBackToLogin();
+        } else if (backToLoginHref) {
+            window.location.href = backToLoginHref;
+        }
+    };
+    if (store.step === "success") {
+        return /*#__PURE__*/ _jsxs("div", {
+            ref: successRef,
+            className: theme.success.container,
+            children: [
+                /*#__PURE__*/ _jsx("div", {
+                    className: theme.success.iconWrapper,
+                    children: /*#__PURE__*/ _jsx(CheckCircleIcon, {})
+                }),
+                /*#__PURE__*/ _jsx("h2", {
+                    className: theme.success.title,
+                    children: "Password Reset Successful"
+                }),
+                /*#__PURE__*/ _jsx("p", {
+                    className: theme.success.message,
+                    children: "Your password has been successfully reset. You can now log in with your new password."
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    className: theme.links.container,
+                    children: /*#__PURE__*/ _jsxs("button", {
+                        type: "button",
+                        onClick: handleBackToLoginClick,
+                        className: theme.links.backToLogin,
+                        children: [
+                            /*#__PURE__*/ _jsx(ArrowLeftIcon, {}),
+                            "Back to login"
+                        ]
+                    })
+                })
+            ]
+        });
+    }
+    return /*#__PURE__*/ _jsxs("form", {
+        ref: formRef,
+        onSubmit: handleSubmit,
+        className: theme.form.container,
+        noValidate: true,
+        children: [
+            store.error && /*#__PURE__*/ _jsx("div", {
+                className: theme.error.container,
+                role: "alert",
+                children: /*#__PURE__*/ _jsx("p", {
+                    className: theme.error.text,
+                    children: store.error
+                })
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: theme.form.spacing,
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        className: theme.input.wrapper,
+                        children: /*#__PURE__*/ _jsx(NucleusTextInput, {
+                            type: "password",
+                            label: "New Password",
+                            placeholder: "••••••••",
+                            value: store.newPassword,
+                            onChange: store.setNewPassword,
+                            disabled: isLoading,
+                            enableValidation: false,
+                            isNewPassword: true,
+                            showPasswordStrength: policy.showStrengthIndicator,
+                            maxInputLength: policy.maxLength,
+                            fullWidth: true,
+                            showTypeIcon: false,
+                            wrapperClassName: "!bg-transparent border-zinc-300 dark:border-zinc-600",
+                            inputClassName: "placeholder:text-zinc-400 dark:placeholder:text-zinc-500 !bg-transparent"
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: theme.input.wrapper,
+                        children: /*#__PURE__*/ _jsx(NucleusTextInput, {
+                            type: "password",
+                            label: "Confirm Password",
+                            placeholder: "••••••••",
+                            value: store.confirmPassword,
+                            onChange: store.setConfirmPassword,
+                            disabled: isLoading,
+                            enableValidation: false,
+                            isNewPassword: true,
+                            confirmValue: store.newPassword,
+                            fullWidth: true,
+                            showTypeIcon: false,
+                            wrapperClassName: "!bg-transparent border-zinc-300 dark:border-zinc-600",
+                            inputClassName: "placeholder:text-zinc-400 dark:placeholder:text-zinc-500 !bg-transparent"
+                        })
+                    }),
+                    store.newPassword && /*#__PURE__*/ _jsxs("div", {
+                        className: theme.requirements.container,
+                        children: [
+                            /*#__PURE__*/ _jsx("p", {
+                                className: theme.requirements.title,
+                                children: "Password requirements:"
+                            }),
+                            /*#__PURE__*/ _jsx("ul", {
+                                className: theme.requirements.list,
+                                children: passwordRequirements.map((req)=>{
+                                    const isValid = req.test(store.newPassword);
+                                    return /*#__PURE__*/ _jsxs("li", {
+                                        className: cn(theme.requirements.item, isValid ? theme.requirements.itemValid : theme.requirements.itemInvalid),
+                                        children: [
+                                            isValid ? /*#__PURE__*/ _jsx(CheckIcon, {}) : /*#__PURE__*/ _jsx(XIcon, {}),
+                                            req.label
+                                        ]
+                                    }, req.key);
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: theme.button.wrapper,
+                        children: /*#__PURE__*/ _jsx(Button, {
+                            type: "submit",
+                            variant: "nucleus",
+                            size: "lg",
+                            fullWidth: true,
+                            loading: isLoading,
+                            disabled: isLoading,
+                            children: "Reset Password"
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: theme.links.container,
+                        children: /*#__PURE__*/ _jsxs("button", {
+                            type: "button",
+                            onClick: handleBackToLoginClick,
+                            className: theme.links.backToLogin,
+                            disabled: isLoading,
+                            children: [
+                                /*#__PURE__*/ _jsx(ArrowLeftIcon, {}),
+                                "Back to login"
+                            ]
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}

package/dist/fe/components/ResetPasswordPage/components/ResetPasswordHeader.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../utils/cn";
+import { resetPasswordPageTheme } from "../theme";
+function LockIcon({ className }) {
+    return /*#__PURE__*/ _jsx("svg", {
+        className: cn("w-8 h-8 text-blue-600 dark:text-blue-400", className),
+        fill: "none",
+        stroke: "currentColor",
+        viewBox: "0 0 24 24",
+        "aria-hidden": "true",
+        children: /*#__PURE__*/ _jsx("path", {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 2,
+            d: "M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+        })
+    });
+}
+export function ResetPasswordHeader({ logo, title, subtitle }) {
+    const theme = resetPasswordPageTheme;
+    return /*#__PURE__*/ _jsxs("header", {
+        className: theme.header.container,
+        children: [
+            logo ? /*#__PURE__*/ _jsx("div", {
+                className: theme.header.logoWrapper,
+                children: logo
+            }) : /*#__PURE__*/ _jsx("div", {
+                className: theme.header.iconWrapper,
+                children: /*#__PURE__*/ _jsx(LockIcon, {})
+            }),
+            /*#__PURE__*/ _jsx("h1", {
+                className: theme.header.title,
+                children: title
+            }),
+            /*#__PURE__*/ _jsx("p", {
+                className: theme.header.subtitle,
+                children: subtitle
+            })
+        ]
+    });
+}

package/dist/fe/components/ResetPasswordPage/components/ResetPasswordPage.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
+import { useRef } from "react";
+import { cn } from "../../../utils/cn";
+import { AbstractAnimatedBackground } from "../../AbstractAnimatedBackground";
+import { resetPasswordPageTheme } from "../theme";
+import { ResetPasswordForm } from "./ResetPasswordForm";
+import { ResetPasswordHeader } from "./ResetPasswordHeader";
+gsap.registerPlugin(useGSAP);
+export function ResetPasswordPage({ logo, title = "Reset Password", subtitle = "Enter your new password below.", token, resetPasswordAction, onBackToLogin, backToLoginHref, showBackground = true, className, passwordPolicy }) {
+    const theme = resetPasswordPageTheme;
+    const containerRef = useRef(null);
+    const cardRef = useRef(null);
+    useGSAP(()=>{
+        if (!cardRef.current) return;
+        gsap.fromTo(cardRef.current, {
+            opacity: 0,
+            y: 30,
+            scale: 0.95
+        }, {
+            opacity: 1,
+            y: 0,
+            scale: 1,
+            duration: 0.6,
+            ease: "power3.out"
+        });
+    }, {
+        scope: containerRef
+    });
+    return /*#__PURE__*/ _jsxs("main", {
+        ref: containerRef,
+        className: cn(theme.container.base, className),
+        "aria-label": "Reset password page",
+        children: [
+            showBackground && /*#__PURE__*/ _jsx(AbstractAnimatedBackground, {}),
+            /*#__PURE__*/ _jsx("div", {
+                className: theme.container.wrapper,
+                children: /*#__PURE__*/ _jsxs("article", {
+                    ref: cardRef,
+                    className: cn(theme.card.base, theme.card.padding, theme.card.background, theme.card.border, theme.card.shadow, theme.card.rounded),
+                    children: [
+                        /*#__PURE__*/ _jsx(ResetPasswordHeader, {
+                            logo: logo,
+                            title: title,
+                            subtitle: subtitle
+                        }),
+                        /*#__PURE__*/ _jsx(ResetPasswordForm, {
+                            token: token,
+                            resetPasswordAction: resetPasswordAction,
+                            onBackToLogin: onBackToLogin,
+                            backToLoginHref: backToLoginHref,
+                            passwordPolicy: passwordPolicy
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}

package/dist/fe/components/ResetPasswordPage/index.js

@@ -0,0 +1,5 @@
+export { ResetPasswordForm } from "./components/ResetPasswordForm";
+export { ResetPasswordHeader } from "./components/ResetPasswordHeader";
+export { ResetPasswordPage } from "./components/ResetPasswordPage";
+export { useResetPasswordStore } from "./store";
+export { extendResetPasswordPageTheme, resetPasswordPageTheme } from "./theme";

package/dist/fe/components/ResetPasswordPage/store/index.js

@@ -0,0 +1,36 @@
+"use client";
+import { batch, createStore } from "h-state";
+const initialState = {
+    newPassword: "",
+    confirmPassword: "",
+    step: "form",
+    error: null
+};
+export const { useStore: useResetPasswordStore } = createStore(initialState, {
+    setNewPassword: (store)=>(password)=>{
+            store.newPassword = password;
+            if (store.error) {
+                store.error = null;
+            }
+        },
+    setConfirmPassword: (store)=>(password)=>{
+            store.confirmPassword = password;
+            if (store.error) {
+                store.error = null;
+            }
+        },
+    setStep: (store)=>(step)=>{
+            store.step = step;
+        },
+    setError: (store)=>(error)=>{
+            store.error = error;
+        },
+    reset: (store)=>()=>{
+            batch(()=>{
+                store.newPassword = "";
+                store.confirmPassword = "";
+                store.step = "form";
+                store.error = null;
+            });
+        }
+});

package/dist/fe/components/ResetPasswordPage/theme/index.js

@@ -0,0 +1,99 @@
+export const resetPasswordPageTheme = {
+    container: {
+        base: "relative min-h-screen w-full flex items-center justify-center",
+        wrapper: "relative z-10 w-full max-w-md px-4 sm:px-0"
+    },
+    card: {
+        base: "w-full",
+        padding: "p-6 sm:p-8",
+        background: "bg-white/80 dark:bg-zinc-900/80 backdrop-blur-xl",
+        border: "border border-white/20 dark:border-zinc-800/50",
+        shadow: "shadow-2xl shadow-black/10 dark:shadow-black/30",
+        rounded: "rounded-2xl sm:rounded-3xl"
+    },
+    header: {
+        container: "flex flex-col items-center mb-8",
+        logoWrapper: "mb-4",
+        iconWrapper: "mb-4 w-16 h-16 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center",
+        title: "text-2xl sm:text-3xl font-bold text-zinc-900 dark:text-white text-center",
+        subtitle: "mt-2 text-sm sm:text-base text-zinc-600 dark:text-zinc-400 text-center max-w-sm"
+    },
+    form: {
+        container: "w-full",
+        spacing: "space-y-4"
+    },
+    input: {
+        wrapper: "w-full"
+    },
+    button: {
+        wrapper: "mt-6"
+    },
+    links: {
+        container: "mt-6 text-center",
+        backToLogin: "text-sm text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-medium transition-colors cursor-pointer inline-flex items-center gap-1"
+    },
+    error: {
+        container: "mb-4 p-3 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800",
+        text: "text-sm text-red-600 dark:text-red-400 text-center"
+    },
+    success: {
+        container: "flex flex-col items-center text-center",
+        iconWrapper: "mb-4 w-16 h-16 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center",
+        title: "text-xl font-semibold text-zinc-900 dark:text-white mb-2",
+        message: "text-sm text-zinc-600 dark:text-zinc-400 max-w-sm"
+    },
+    requirements: {
+        container: "mt-3 p-3 rounded-lg bg-zinc-50 dark:bg-zinc-800/50",
+        title: "text-xs font-medium text-zinc-500 dark:text-zinc-400 mb-2",
+        list: "space-y-1",
+        item: "text-xs flex items-center gap-2",
+        itemValid: "text-green-600 dark:text-green-400",
+        itemInvalid: "text-zinc-400 dark:text-zinc-500"
+    }
+};
+export function extendResetPasswordPageTheme(overrides) {
+    return {
+        ...resetPasswordPageTheme,
+        ...overrides,
+        container: {
+            ...resetPasswordPageTheme.container,
+            ...overrides.container
+        },
+        card: {
+            ...resetPasswordPageTheme.card,
+            ...overrides.card
+        },
+        header: {
+            ...resetPasswordPageTheme.header,
+            ...overrides.header
+        },
+        form: {
+            ...resetPasswordPageTheme.form,
+            ...overrides.form
+        },
+        input: {
+            ...resetPasswordPageTheme.input,
+            ...overrides.input
+        },
+        button: {
+            ...resetPasswordPageTheme.button,
+            ...overrides.button
+        },
+        links: {
+            ...resetPasswordPageTheme.links,
+            ...overrides.links
+        },
+        error: {
+            ...resetPasswordPageTheme.error,
+            ...overrides.error
+        },
+        success: {
+            ...resetPasswordPageTheme.success,
+            ...overrides.success
+        },
+        requirements: {
+            ...resetPasswordPageTheme.requirements,
+            ...overrides.requirements
+        }
+    };
+}

package/dist/fe/components/ResetPasswordPage/types/index.js

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