nucleus-core-ts 0.8.7 → 0.8.9

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

@@ -0,0 +1,216 @@
+const COLUMN_TYPE_MAP = {
+    integer: {
+        inputType: "number"
+    },
+    smallint: {
+        inputType: "number"
+    },
+    bigint: {
+        inputType: "number"
+    },
+    serial: {
+        inputType: "number"
+    },
+    smallserial: {
+        inputType: "number"
+    },
+    bigserial: {
+        inputType: "number"
+    },
+    real: {
+        inputType: "number"
+    },
+    doublePrecision: {
+        inputType: "number"
+    },
+    numeric: {
+        inputType: "number"
+    },
+    decimal: {
+        inputType: "number"
+    },
+    text: {
+        inputType: "textarea"
+    },
+    varchar: {
+        inputType: "text"
+    },
+    char: {
+        inputType: "text"
+    },
+    uuid: {
+        inputType: "text",
+        validationType: "uuid"
+    },
+    boolean: {
+        inputType: "checkbox"
+    },
+    date: {
+        inputType: "date",
+        validationType: "date"
+    },
+    time: {
+        inputType: "time",
+        validationType: "time"
+    },
+    timestamp: {
+        inputType: "datetime",
+        validationType: "datetime"
+    },
+    timestamptz: {
+        inputType: "datetime",
+        validationType: "datetime"
+    },
+    interval: {
+        inputType: "text"
+    },
+    json: {
+        inputType: "json"
+    },
+    jsonb: {
+        inputType: "json"
+    },
+    bytea: {
+        inputType: "hidden"
+    },
+    inet: {
+        inputType: "text",
+        validationType: "ipv4"
+    },
+    cidr: {
+        inputType: "text"
+    },
+    macaddr: {
+        inputType: "text"
+    },
+    macaddr8: {
+        inputType: "text"
+    },
+    bit: {
+        inputType: "text"
+    },
+    bitVarying: {
+        inputType: "text"
+    },
+    point: {
+        inputType: "text"
+    },
+    line: {
+        inputType: "text"
+    },
+    lseg: {
+        inputType: "text"
+    },
+    box: {
+        inputType: "text"
+    },
+    path: {
+        inputType: "text"
+    },
+    polygon: {
+        inputType: "text"
+    },
+    circle: {
+        inputType: "text"
+    },
+    tsvector: {
+        inputType: "text"
+    },
+    tsquery: {
+        inputType: "text"
+    },
+    xml: {
+        inputType: "textarea"
+    },
+    money: {
+        inputType: "number"
+    },
+    vector: {
+        inputType: "hidden"
+    },
+    geometry: {
+        inputType: "hidden"
+    },
+    geography: {
+        inputType: "hidden"
+    },
+    customType: {
+        inputType: "text"
+    }
+};
+export function getFieldMapping(column) {
+    if (column.enumValues || column.enum) {
+        return {
+            inputType: "select"
+        };
+    }
+    if (column.references) {
+        return {
+            inputType: "select"
+        };
+    }
+    const mapping = COLUMN_TYPE_MAP[column.type];
+    if (column.validation?.format) {
+        return {
+            ...mapping,
+            validationType: column.validation.format
+        };
+    }
+    return mapping;
+}
+export function getInputTypeFromFormat(format) {
+    switch(format){
+        case "email":
+            return "text";
+        case "url":
+        case "uri":
+            return "text";
+        case "date":
+            return "date";
+        case "datetime":
+            return "datetime";
+        case "time":
+            return "time";
+        default:
+            return "text";
+    }
+}
+export function shouldExcludeField(column) {
+    if (column.primaryKey && column.type === "serial") return true;
+    if (column.primaryKey && column.type === "bigserial") return true;
+    if (column.primaryKey && column.type === "smallserial") return true;
+    if (column.generatedAlwaysAs) return true;
+    if (column.generatedAlwaysAsIdentity) return true;
+    const autoFields = [
+        "created_at",
+        "updated_at",
+        "deleted_at"
+    ];
+    if (autoFields.includes(column.name)) return true;
+    return false;
+}
+export function getDefaultValue(column) {
+    if (column.default !== undefined) {
+        return column.default;
+    }
+    const mapping = getFieldMapping(column);
+    switch(mapping.inputType){
+        case "number":
+            return column.nullable ? null : 0;
+        case "checkbox":
+            return false;
+        case "date":
+        case "datetime":
+        case "time":
+            return null;
+        case "select":
+            return column.nullable ? null : "";
+        case "json":
+            return column.nullable ? null : {};
+        default:
+            return "";
+    }
+}
+export function formatLabel(name) {
+    return name.replace(/_/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2").replace(/\b\w/g, (char)=>char.toUpperCase());
+}

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

@@ -0,0 +1,78 @@
+const FORMAT_PATTERNS = {
+    email: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
+    url: /^https?:\/\/[^\s]+$/,
+    uri: /^[a-zA-Z][a-zA-Z\d+\-.]*:/,
+    uuid: /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i,
+    date: /^\d{4}-\d{2}-\d{2}$/,
+    datetime: /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}(:\d{2})?(\.\d+)?(Z|[+-]\d{2}:\d{2})?$/,
+    time: /^\d{2}:\d{2}(:\d{2})?$/,
+    ipv4: /^(\d{1,3}\.){3}\d{1,3}$/,
+    ipv6: /^([0-9a-fA-F]{1,4}:){7}[0-9a-fA-F]{1,4}$/
+};
+const FORMAT_MESSAGES = {
+    email: "Please enter a valid email address",
+    url: "Please enter a valid URL",
+    uri: "Please enter a valid URI",
+    uuid: "Please enter a valid UUID",
+    date: "Please enter a valid date (YYYY-MM-DD)",
+    datetime: "Please enter a valid datetime",
+    time: "Please enter a valid time (HH:MM)",
+    ipv4: "Please enter a valid IPv4 address",
+    ipv6: "Please enter a valid IPv6 address"
+};
+export function validateField(column, value, isRequired) {
+    const isEmpty = value === undefined || value === null || value === "";
+    if (isEmpty) {
+        if (isRequired || column.notNull) {
+            return column.validation?.customMessage || "This field is required";
+        }
+        return undefined;
+    }
+    const validation = column.validation;
+    if (!validation) return undefined;
+    const stringValue = String(value);
+    if (validation.minLength !== undefined && stringValue.length < validation.minLength) {
+        return validation.customMessage || `Minimum ${validation.minLength} characters required`;
+    }
+    if (validation.maxLength !== undefined && stringValue.length > validation.maxLength) {
+        return validation.customMessage || `Maximum ${validation.maxLength} characters allowed`;
+    }
+    if (typeof value === "number") {
+        if (validation.min !== undefined && value < validation.min) {
+            return validation.customMessage || `Minimum value is ${validation.min}`;
+        }
+        if (validation.max !== undefined && value > validation.max) {
+            return validation.customMessage || `Maximum value is ${validation.max}`;
+        }
+    }
+    if (validation.pattern) {
+        const regex = new RegExp(validation.pattern);
+        if (!regex.test(stringValue)) {
+            return validation.customMessage || "Invalid format";
+        }
+    }
+    if (validation.format) {
+        const pattern = FORMAT_PATTERNS[validation.format];
+        if (pattern && !pattern.test(stringValue)) {
+            return validation.customMessage || FORMAT_MESSAGES[validation.format];
+        }
+    }
+    return undefined;
+}
+export function validateForm(columns, values, fieldConfigs) {
+    const errors = {};
+    for (const column of columns){
+        const fieldName = column.name;
+        const value = values[fieldName];
+        const config = fieldConfigs?.[fieldName];
+        const isRequired = config?.required ?? column.notNull ?? false;
+        const error = validateField(column, value, isRequired);
+        if (error) {
+            errors[fieldName] = error;
+        }
+    }
+    return errors;
+}
+export function isFormValid(errors) {
+    return Object.keys(errors).length === 0;
+}

package/dist/fe/components/LoginPage/components/LoginForm.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 { Captcha } from "../../Captcha";
+import { Checkbox } from "../../Checkbox";
+import { NucleusTextInput } from "../../NucleusTextInput";
+import { useLoginStore } from "../store";
+import { loginPageTheme } from "../theme";
+gsap.registerPlugin(useGSAP);
+export function LoginForm({ loginAction, captchaGenerateAction, captchaConfig, showRememberMe = true, showForgotPassword = true, showSignUp = true, forgotPasswordHref, signUpHref, onForgotPassword, onSignUp, onSuccess }) {
+    const theme = loginPageTheme;
+    const formRef = useRef(null);
+    const store = useLoginStore();
+    const { contextSafe } = useGSAP({
+        scope: formRef
+    });
+    const isLoading = loginAction.state.isPending;
+    const isCaptchaEnabled = captchaConfig?.enabled && captchaGenerateAction;
+    const handleSubmit = contextSafe((e)=>{
+        e.preventDefault();
+        if (!store.email || !store.password) {
+            store.setError("Please fill in all fields");
+            shakeForm();
+            return;
+        }
+        if (isCaptchaEnabled && (!store.captchaId || !store.captchaAnswer)) {
+            store.setError("Please complete the security check");
+            shakeForm();
+            return;
+        }
+        store.setError(null);
+        loginAction.start({
+            payload: {
+                email: store.email,
+                password: store.password,
+                rememberMe: store.rememberMe,
+                captchaId: store.captchaId ?? undefined,
+                captchaAnswer: store.captchaAnswer || undefined
+            },
+            onAfterHandle: (data)=>{
+                const response = data;
+                if (response.success === false) {
+                    store.setError(response.message || "Login failed. Please try again.");
+                    shakeForm();
+                } else if (response.success) {
+                    store.reset();
+                    onSuccess?.();
+                }
+            },
+            onErrorHandle: (err)=>{
+                const errorMessage = err instanceof Error ? err.message : "Login failed. 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
+                });
+            }
+        });
+    });
+    const handleForgotPasswordClick = ()=>{
+        if (onForgotPassword) {
+            onForgotPassword();
+        } else if (forgotPasswordHref) {
+            window.location.href = forgotPasswordHref;
+        }
+    };
+    const handleSignUpClick = ()=>{
+        if (onSignUp) {
+            onSignUp();
+        } else if (signUpHref) {
+            window.location.href = signUpHref;
+        }
+    };
+    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,
+                            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: "Password",
+                            placeholder: "••••••••",
+                            value: store.password,
+                            onChange: store.setPassword,
+                            disabled: isLoading,
+                            enableValidation: false,
+                            fullWidth: true,
+                            wrapperClassName: "!bg-transparent border-zinc-300 dark:border-zinc-600",
+                            inputClassName: "placeholder:text-zinc-400 dark:placeholder:text-zinc-500 !bg-transparent"
+                        })
+                    }),
+                    isCaptchaEnabled && captchaGenerateAction && /*#__PURE__*/ _jsx(Captcha, {
+                        generateAction: captchaGenerateAction,
+                        config: captchaConfig,
+                        onChallengeLoad: (challenge)=>{
+                            store.setCaptchaId(challenge.challengeId);
+                            store.setCaptchaAnswer("");
+                        },
+                        onAnswerChange: (_, answer)=>{
+                            store.setCaptchaAnswer(answer);
+                        },
+                        disabled: isLoading,
+                        autoGenerate: true
+                    }),
+                    (showRememberMe || showForgotPassword) && /*#__PURE__*/ _jsxs("div", {
+                        className: theme.links.container,
+                        children: [
+                            showRememberMe && /*#__PURE__*/ _jsxs("div", {
+                                className: theme.checkbox.wrapper,
+                                children: [
+                                    /*#__PURE__*/ _jsx(Checkbox, {
+                                        checked: store.rememberMe,
+                                        onChange: store.setRememberMe,
+                                        disabled: isLoading,
+                                        size: "sm"
+                                    }),
+                                    /*#__PURE__*/ _jsx("button", {
+                                        type: "button",
+                                        className: theme.checkbox.label,
+                                        onClick: ()=>store.setRememberMe(!store.rememberMe),
+                                        children: "Remember me"
+                                    })
+                                ]
+                            }),
+                            showForgotPassword && /*#__PURE__*/ _jsx("button", {
+                                type: "button",
+                                onClick: handleForgotPasswordClick,
+                                className: cn(theme.links.forgotPassword),
+                                disabled: isLoading,
+                                children: "Forgot password?"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: theme.button.wrapper,
+                        children: /*#__PURE__*/ _jsx(Button, {
+                            type: "submit",
+                            variant: "nucleus",
+                            size: "lg",
+                            fullWidth: true,
+                            loading: isLoading,
+                            disabled: isLoading,
+                            children: "Sign In"
+                        })
+                    }),
+                    showSignUp && /*#__PURE__*/ _jsx("div", {
+                        className: theme.links.signUp.wrapper,
+                        children: /*#__PURE__*/ _jsxs("span", {
+                            className: theme.links.signUp.text,
+                            children: [
+                                "Don't have an account?",
+                                " ",
+                                /*#__PURE__*/ _jsx("button", {
+                                    type: "button",
+                                    onClick: handleSignUpClick,
+                                    className: theme.links.signUp.link,
+                                    disabled: isLoading,
+                                    children: "Sign up"
+                                })
+                            ]
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}

package/dist/fe/components/LoginPage/components/LoginHeader.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../utils/cn";
+import { loginPageTheme } from "../theme";
+export function LoginHeader({ logo, title, subtitle }) {
+    const theme = loginPageTheme;
+    return /*#__PURE__*/ _jsxs("header", {
+        className: theme.header.container,
+        children: [
+            logo && /*#__PURE__*/ _jsx("div", {
+                className: theme.header.logoWrapper,
+                children: logo
+            }),
+            title && /*#__PURE__*/ _jsx("h1", {
+                className: cn(theme.header.title),
+                children: title
+            }),
+            subtitle && /*#__PURE__*/ _jsx("p", {
+                className: cn(theme.header.subtitle),
+                children: subtitle
+            })
+        ]
+    });
+}

package/dist/fe/components/LoginPage/components/LoginPage.js

@@ -0,0 +1,138 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
+import { useEffect, useEffectEvent, useRef } from "react";
+import { cn } from "../../../utils/cn";
+import { AbstractAnimatedBackground } from "../../AbstractAnimatedBackground";
+import { Button } from "../../Button";
+import { useLoginStore } from "../store";
+import { loginPageTheme } from "../theme";
+import { LoginForm } from "./LoginForm";
+import { LoginHeader } from "./LoginHeader";
+gsap.registerPlugin(useGSAP);
+export function LoginPage({ variant: _variant = "default", logo, title = "Welcome Back", subtitle = "Sign in to your account to continue", loggedInTitle = "You're Logged In", showRememberMe = true, showForgotPassword = true, showSignUp = true, forgotPasswordHref, signUpHref, loginAction, meAction, logoutAction, captchaGenerateAction, config, onForgotPassword, onSignUp, onSuccess, onLogout, showBackground = true, className }) {
+    const theme = loginPageTheme;
+    const containerRef = useRef(null);
+    const cardRef = useRef(null);
+    const store = useLoginStore();
+    const checkAuth = useEffectEvent(()=>{
+        if (!meAction) return;
+        meAction.start({
+            payload: undefined,
+            onAfterHandle: (data)=>{
+                const response = data;
+                if (response.success && response.data?.user) {
+                    store.setAuthenticated(true, response.data.user);
+                }
+            },
+            onErrorHandle: ()=>{
+                store.setAuthenticated(false, null);
+            }
+        });
+    });
+    useEffect(()=>{
+        checkAuth();
+    }, []);
+    const handleLogout = useEffectEvent(()=>{
+        if (!logoutAction) return;
+        logoutAction.start({
+            payload: undefined,
+            onAfterHandle: ()=>{
+                store.setAuthenticated(false, null);
+                store.reset();
+                onLogout?.();
+            },
+            onErrorHandle: ()=>{}
+        });
+    });
+    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
+    });
+    const isCheckingAuth = meAction?.state.isPending;
+    const isLoggingOut = logoutAction?.state.isPending;
+    return /*#__PURE__*/ _jsxs("main", {
+        ref: containerRef,
+        className: cn(theme.container.base, className),
+        "aria-label": "Login page",
+        children: [
+            showBackground && /*#__PURE__*/ _jsx(AbstractAnimatedBackground, {}),
+            /*#__PURE__*/ _jsx("div", {
+                className: theme.container.wrapper,
+                children: /*#__PURE__*/ _jsx("article", {
+                    ref: cardRef,
+                    className: cn(theme.card.base, theme.card.padding, theme.card.background, theme.card.border, theme.card.shadow, theme.card.rounded),
+                    children: isCheckingAuth ? /*#__PURE__*/ _jsx("div", {
+                        className: "flex items-center justify-center py-12",
+                        children: /*#__PURE__*/ _jsx("div", {
+                            className: "w-8 h-8 border-2 border-zinc-300 dark:border-zinc-600 border-t-blue-500 rounded-full animate-spin"
+                        })
+                    }) : store.isAuthenticated && store.user ? /*#__PURE__*/ _jsxs(_Fragment, {
+                        children: [
+                            /*#__PURE__*/ _jsx(LoginHeader, {
+                                logo: logo,
+                                title: loggedInTitle,
+                                subtitle: `Signed in as ${store.user.email}`
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "mt-6 space-y-4",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        variant: "nucleus",
+                                        size: "lg",
+                                        fullWidth: true,
+                                        onClick: onSuccess,
+                                        children: "Continue to Dashboard"
+                                    }),
+                                    logoutAction && /*#__PURE__*/ _jsx(Button, {
+                                        variant: "outline",
+                                        size: "lg",
+                                        fullWidth: true,
+                                        onClick: handleLogout,
+                                        loading: isLoggingOut,
+                                        disabled: isLoggingOut,
+                                        children: "Sign Out"
+                                    })
+                                ]
+                            })
+                        ]
+                    }) : /*#__PURE__*/ _jsxs(_Fragment, {
+                        children: [
+                            /*#__PURE__*/ _jsx(LoginHeader, {
+                                logo: logo,
+                                title: title,
+                                subtitle: subtitle
+                            }),
+                            /*#__PURE__*/ _jsx(LoginForm, {
+                                loginAction: loginAction,
+                                captchaGenerateAction: captchaGenerateAction,
+                                captchaConfig: config?.login?.captcha,
+                                showRememberMe: showRememberMe,
+                                showForgotPassword: showForgotPassword,
+                                showSignUp: showSignUp,
+                                forgotPasswordHref: forgotPasswordHref,
+                                signUpHref: signUpHref,
+                                onForgotPassword: onForgotPassword,
+                                onSignUp: onSignUp,
+                                onSuccess: onSuccess
+                            })
+                        ]
+                    })
+                })
+            })
+        ]
+    });
+}

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

@@ -0,0 +1,5 @@
+export { LoginForm } from "./components/LoginForm";
+export { LoginHeader } from "./components/LoginHeader";
+export { LoginPage } from "./components/LoginPage";
+export { useLoginStore } from "./store";
+export { extendLoginPageTheme, loginPageTheme } from "./theme";