nucleus-core-ts 0.8.6 → 0.8.8

package/dist/fe/components/ForgotPasswordPage/components/ForgotPasswordForm.js

@@ -0,0 +1,214 @@
+"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 { Button } from "../../Button";
+import { NucleusTextInput } from "../../NucleusTextInput";
+import { useForgotPasswordStore } from "../store";
+import { forgotPasswordPageTheme } 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"
+        })
+    });
+}
+export function ForgotPasswordForm({ forgotPasswordAction, onBackToLogin, backToLoginHref }) {
+    const theme = forgotPasswordPageTheme;
+    const formRef = useRef(null);
+    const successRef = useRef(null);
+    const store = useForgotPasswordStore();
+    const { contextSafe } = useGSAP({
+        scope: formRef
+    });
+    const isLoading = forgotPasswordAction.state.isPending;
+    const handleSubmit = contextSafe((e)=>{
+        e.preventDefault();
+        if (!store.email) {
+            store.setError("Please enter your email address");
+            shakeForm();
+            return;
+        }
+        store.setError(null);
+        forgotPasswordAction.start({
+            payload: {
+                email: store.email
+            },
+            onAfterHandle: ()=>{
+                store.setStep("success");
+            },
+            onErrorHandle: (err)=>{
+                const errorMessage = err instanceof Error ? err.message : "Failed to send reset email. 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: "Check your email"
+                }),
+                /*#__PURE__*/ _jsxs("p", {
+                    className: theme.success.message,
+                    children: [
+                        "We've sent a password reset link to ",
+                        /*#__PURE__*/ _jsx("strong", {
+                            children: store.email
+                        }),
+                        ". Please check your inbox and follow the instructions."
+                    ]
+                }),
+                /*#__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: "email",
+                            label: "Email",
+                            placeholder: "you@example.com",
+                            value: store.email,
+                            onChange: store.setEmail,
+                            disabled: isLoading,
+                            enableValidation: false,
+                            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.button.wrapper,
+                        children: /*#__PURE__*/ _jsx(Button, {
+                            type: "submit",
+                            variant: "nucleus",
+                            size: "lg",
+                            fullWidth: true,
+                            loading: isLoading,
+                            disabled: isLoading,
+                            children: "Send Reset Link"
+                        })
+                    }),
+                    /*#__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/ForgotPasswordPage/components/ForgotPasswordHeader.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../utils/cn";
+import { forgotPasswordPageTheme } from "../theme";
+function KeyIcon({ 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: "M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"
+        })
+    });
+}
+export function ForgotPasswordHeader({ logo, title, subtitle }) {
+    const theme = forgotPasswordPageTheme;
+    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(KeyIcon, {})
+            }),
+            /*#__PURE__*/ _jsx("h1", {
+                className: theme.header.title,
+                children: title
+            }),
+            /*#__PURE__*/ _jsx("p", {
+                className: theme.header.subtitle,
+                children: subtitle
+            })
+        ]
+    });
+}

package/dist/fe/components/ForgotPasswordPage/components/ForgotPasswordPage.js

@@ -0,0 +1,59 @@
+"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 { forgotPasswordPageTheme } from "../theme";
+import { ForgotPasswordForm } from "./ForgotPasswordForm";
+import { ForgotPasswordHeader } from "./ForgotPasswordHeader";
+gsap.registerPlugin(useGSAP);
+export function ForgotPasswordPage({ logo, title = "Forgot Password?", subtitle = "No worries, we'll send you reset instructions.", forgotPasswordAction, onBackToLogin, backToLoginHref, showBackground = true, className }) {
+    const theme = forgotPasswordPageTheme;
+    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": "Forgot 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(ForgotPasswordHeader, {
+                            logo: logo,
+                            title: title,
+                            subtitle: subtitle
+                        }),
+                        /*#__PURE__*/ _jsx(ForgotPasswordForm, {
+                            forgotPasswordAction: forgotPasswordAction,
+                            onBackToLogin: onBackToLogin,
+                            backToLoginHref: backToLoginHref
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}

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

@@ -0,0 +1,5 @@
+export { ForgotPasswordForm } from "./components/ForgotPasswordForm";
+export { ForgotPasswordHeader } from "./components/ForgotPasswordHeader";
+export { ForgotPasswordPage } from "./components/ForgotPasswordPage";
+export { useForgotPasswordStore } from "./store";
+export { extendForgotPasswordPageTheme, forgotPasswordPageTheme } from "./theme";

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

@@ -0,0 +1,28 @@
+"use client";
+import { batch, createStore } from "h-state";
+const initialState = {
+    email: "",
+    step: "request",
+    error: null
+};
+export const { useStore: useForgotPasswordStore } = createStore(initialState, {
+    setEmail: (store)=>(email)=>{
+            store.email = email;
+            if (store.error) {
+                store.error = null;
+            }
+        },
+    setStep: (store)=>(step)=>{
+            store.step = step;
+        },
+    setError: (store)=>(error)=>{
+            store.error = error;
+        },
+    reset: (store)=>()=>{
+            batch(()=>{
+                store.email = "";
+                store.step = "request";
+                store.error = null;
+            });
+        }
+});

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

@@ -0,0 +1,87 @@
+export const forgotPasswordPageTheme = {
+    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"
+    }
+};
+export function extendForgotPasswordPageTheme(overrides) {
+    return {
+        ...forgotPasswordPageTheme,
+        ...overrides,
+        container: {
+            ...forgotPasswordPageTheme.container,
+            ...overrides.container
+        },
+        card: {
+            ...forgotPasswordPageTheme.card,
+            ...overrides.card
+        },
+        header: {
+            ...forgotPasswordPageTheme.header,
+            ...overrides.header
+        },
+        form: {
+            ...forgotPasswordPageTheme.form,
+            ...overrides.form
+        },
+        input: {
+            ...forgotPasswordPageTheme.input,
+            ...overrides.input
+        },
+        button: {
+            ...forgotPasswordPageTheme.button,
+            ...overrides.button
+        },
+        links: {
+            ...forgotPasswordPageTheme.links,
+            ...overrides.links
+        },
+        error: {
+            ...forgotPasswordPageTheme.error,
+            ...overrides.error
+        },
+        success: {
+            ...forgotPasswordPageTheme.success,
+            ...overrides.success
+        }
+    };
+}

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

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

package/dist/fe/components/FormBuilder/components/FormBuilder.js

@@ -0,0 +1,156 @@
+"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 { Button } from "../../Button";
+import { useFormBuilder } from "../hooks/useFormBuilder";
+import { formBuilderTheme } from "../theme";
+import { cn } from "../utils/cn";
+import { formatLabel, shouldExcludeField } from "../utils/fieldMapping";
+import { FormField } from "./FormField";
+gsap.registerPlugin(useGSAP);
+export function FormBuilder({ columns, mode, initialValues, onSubmit, onCancel, fieldConfigs, excludeFields = [], includeFields, layout = "vertical", size = "md", columns_grid = 1, gap = "md", submitText, cancelText = "Cancel", loading = false, disabled = false, showRequiredIndicator: _showRequiredIndicator = true, locale = "en-US", className, formClassName, fieldsClassName, actionsClassName, renderHeader, renderFooter, renderField }) {
+    const theme = formBuilderTheme;
+    const formRef = useRef(null);
+    const fieldsRef = useRef(null);
+    const { state, reset, submit, getFieldProps } = useFormBuilder({
+        columns,
+        initialValues,
+        fieldConfigs,
+        onSubmit
+    });
+    const defaultSubmitText = mode === "add" ? "Create" : "Update";
+    useGSAP(()=>{
+        if (fieldsRef.current) {
+            const fields = fieldsRef.current.querySelectorAll("[data-form-field]");
+            gsap.fromTo(fields, {
+                opacity: 0,
+                y: 10
+            }, {
+                opacity: 1,
+                y: 0,
+                duration: theme.animation.field.enter.duration,
+                ease: theme.animation.field.enter.ease,
+                stagger: theme.animation.field.enter.stagger
+            });
+        }
+    }, [
+        columns
+    ]);
+    const getVisibleColumns = ()=>{
+        return columns.filter((column)=>{
+            if (shouldExcludeField(column)) return false;
+            const fieldName = column.name;
+            if (excludeFields.includes(fieldName)) return false;
+            if (includeFields && !includeFields.includes(fieldName)) return false;
+            const config = fieldConfigs?.[fieldName];
+            if (config?.hidden) return false;
+            if (config?.showWhen && !config.showWhen(state.values)) {
+                return false;
+            }
+            return true;
+        });
+    };
+    const getSortedColumns = ()=>{
+        const visible = getVisibleColumns();
+        return visible.sort((a, b)=>{
+            const configA = fieldConfigs?.[a.name];
+            const configB = fieldConfigs?.[b.name];
+            const orderA = configA?.order ?? 999;
+            const orderB = configB?.order ?? 999;
+            return orderA - orderB;
+        });
+    };
+    const handleSubmit = (e)=>{
+        e.preventDefault();
+        submit();
+    };
+    const visibleColumns = getSortedColumns();
+    const isSubmitting = state.isSubmitting || loading;
+    const isFormDisabled = disabled || isSubmitting;
+    return /*#__PURE__*/ _jsxs("div", {
+        className: cn(theme.container.base, className),
+        children: [
+            renderHeader?.(),
+            /*#__PURE__*/ _jsxs("form", {
+                ref: formRef,
+                onSubmit: handleSubmit,
+                className: cn(theme.form.base, theme.form.layout[layout], formClassName),
+                noValidate: true,
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        ref: fieldsRef,
+                        className: cn(theme.fields.base, theme.fields.columns[columns_grid], theme.fields.gap[gap], fieldsClassName),
+                        children: visibleColumns.map((column)=>{
+                            const fieldName = column.name;
+                            const config = fieldConfigs?.[fieldName];
+                            const fieldProps = getFieldProps(fieldName);
+                            const mergedConfig = {
+                                name: column.name,
+                                label: config?.label ?? formatLabel(column.name),
+                                placeholder: config?.placeholder,
+                                helperText: config?.helperText,
+                                required: config?.required ?? column.notNull ?? false,
+                                disabled: config?.disabled ?? isFormDisabled,
+                                readOnly: config?.readOnly,
+                                hidden: config?.hidden,
+                                order: config?.order,
+                                span: config?.span ?? 12,
+                                options: config?.options,
+                                defaultValue: config?.defaultValue
+                            };
+                            const defaultRender = ()=>/*#__PURE__*/ _jsx("div", {
+                                    "data-form-field": true,
+                                    children: /*#__PURE__*/ _jsx(FormField, {
+                                        column: column,
+                                        config: mergedConfig,
+                                        value: fieldProps.value,
+                                        onChange: fieldProps.onChange,
+                                        error: fieldProps.error,
+                                        size: size,
+                                        locale: locale,
+                                        disabled: isFormDisabled
+                                    })
+                                }, column.name);
+                            if (renderField) {
+                                return /*#__PURE__*/ _jsx("div", {
+                                    "data-form-field": true,
+                                    children: renderField(column, mergedConfig, defaultRender)
+                                }, column.name);
+                            }
+                            return defaultRender();
+                        })
+                    }),
+                    renderFooter ? renderFooter({
+                        isSubmitting,
+                        isValid: Object.keys(state.errors).length === 0,
+                        isDirty: state.isDirty,
+                        reset,
+                        submit
+                    }) : /*#__PURE__*/ _jsxs("div", {
+                        className: cn(theme.actions.base, theme.actions.gap[gap], theme.actions.alignment.right, actionsClassName),
+                        children: [
+                            onCancel && /*#__PURE__*/ _jsx(Button, {
+                                type: "button",
+                                variant: "ghost",
+                                size: size,
+                                onClick: onCancel,
+                                disabled: isSubmitting,
+                                children: cancelText
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                type: "submit",
+                                variant: "primary",
+                                size: size,
+                                loading: isSubmitting,
+                                disabled: isFormDisabled,
+                                children: submitText ?? defaultSubmitText
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}