nucleus-core-ts 0.8.7 → 0.8.8

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

@@ -0,0 +1,218 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
+import { useRef } from "react";
+import { Checkbox } from "../../Checkbox";
+import { DatePicker } from "../../DatePicker";
+import { NucleusTextInput } from "../../NucleusTextInput";
+import { SelectBox } from "../../SelectBox";
+import { formBuilderTheme } from "../theme";
+import { cn } from "../utils/cn";
+import { formatLabel, getFieldMapping } from "../utils/fieldMapping";
+gsap.registerPlugin(useGSAP);
+export function FormField({ column, config, value, onChange, error, size = "md", locale = "en-US", disabled = false, readOnly = false }) {
+    const theme = formBuilderTheme.field;
+    const containerRef = useRef(null);
+    const errorRef = useRef(null);
+    const fieldMapping = getFieldMapping(column);
+    const label = config.label ?? formatLabel(column.name);
+    const placeholder = config.placeholder ?? `Enter ${label.toLowerCase()}`;
+    const isRequired = config.required ?? column.notNull ?? false;
+    const isDisabled = disabled || config.disabled;
+    const isReadOnly = readOnly || config.readOnly;
+    useGSAP(()=>{
+        if (error && errorRef.current) {
+            gsap.fromTo(errorRef.current, {
+                opacity: 0,
+                y: -5
+            }, {
+                opacity: 1,
+                y: 0,
+                duration: formBuilderTheme.animation.field.error.duration,
+                ease: formBuilderTheme.animation.field.error.ease
+            });
+        }
+    }, [
+        error
+    ]);
+    const renderInput = ()=>{
+        switch(fieldMapping.inputType){
+            case "checkbox":
+                return /*#__PURE__*/ _jsx(Checkbox, {
+                    checked: Boolean(value),
+                    onChange: (checked)=>onChange(checked),
+                    label: label,
+                    size: size,
+                    disabled: isDisabled,
+                    errorMessage: error,
+                    helperText: config.helperText
+                });
+            case "select":
+                {
+                    const options = getSelectOptions(column, config.options);
+                    return /*#__PURE__*/ _jsx(SelectBox, {
+                        options: options,
+                        value: value,
+                        onChange: (val)=>onChange(val),
+                        placeholder: placeholder,
+                        label: label,
+                        size: size,
+                        disabled: isDisabled,
+                        readOnly: isReadOnly,
+                        required: isRequired,
+                        error: error,
+                        helperText: config.helperText,
+                        clearable: !isRequired
+                    });
+                }
+            case "date":
+                return /*#__PURE__*/ _jsx(DatePicker, {
+                    mode: "single",
+                    value: value,
+                    onChange: (val)=>onChange(val),
+                    placeholder: placeholder,
+                    label: label,
+                    disabled: isDisabled,
+                    locale: locale,
+                    errorMessage: error,
+                    helperText: config.helperText,
+                    required: isRequired
+                });
+            case "datetime":
+                return /*#__PURE__*/ _jsx(DatePicker, {
+                    mode: "single",
+                    value: value,
+                    onChange: (val)=>onChange(val),
+                    placeholder: placeholder,
+                    label: label,
+                    disabled: isDisabled,
+                    locale: locale,
+                    errorMessage: error,
+                    helperText: config.helperText,
+                    required: isRequired
+                });
+            case "number":
+                return /*#__PURE__*/ _jsx(NucleusTextInput, {
+                    type: "number",
+                    value: value !== null && value !== undefined ? String(value) : "",
+                    onChange: (val)=>{
+                        const num = val === "" ? null : Number(val);
+                        onChange(num);
+                    },
+                    placeholder: placeholder,
+                    label: label,
+                    size: size,
+                    disabled: isDisabled,
+                    readOnly: isReadOnly,
+                    errorMessage: error,
+                    helperText: config.helperText
+                });
+            case "textarea":
+                return /*#__PURE__*/ _jsx(NucleusTextInput, {
+                    type: "text",
+                    value: value ?? "",
+                    onChange: (val)=>onChange(val),
+                    placeholder: placeholder,
+                    label: label,
+                    size: size,
+                    disabled: isDisabled,
+                    readOnly: isReadOnly,
+                    errorMessage: error,
+                    helperText: config.helperText,
+                    enableValidation: true,
+                    validationConfig: {
+                        minLength: column.validation?.minLength,
+                        maxLength: column.validation?.maxLength
+                    }
+                });
+            case "json":
+                return /*#__PURE__*/ _jsx(NucleusTextInput, {
+                    type: "text",
+                    value: typeof value === "object" ? JSON.stringify(value, null, 2) : "",
+                    onChange: (val)=>{
+                        try {
+                            const parsed = JSON.parse(val);
+                            onChange(parsed);
+                        } catch  {
+                            onChange(val);
+                        }
+                    },
+                    placeholder: placeholder,
+                    label: label,
+                    size: size,
+                    disabled: isDisabled,
+                    readOnly: isReadOnly,
+                    errorMessage: error,
+                    helperText: config.helperText
+                });
+            case "hidden":
+                return /*#__PURE__*/ _jsx("input", {
+                    type: "hidden",
+                    value: String(value ?? "")
+                });
+            default:
+                {
+                    const inputType = getTextInputType(fieldMapping.inputType, column);
+                    return /*#__PURE__*/ _jsx(NucleusTextInput, {
+                        type: inputType,
+                        value: value ?? "",
+                        onChange: (val)=>onChange(val),
+                        placeholder: placeholder,
+                        label: label,
+                        size: size,
+                        disabled: isDisabled,
+                        readOnly: isReadOnly,
+                        errorMessage: error,
+                        helperText: config.helperText,
+                        enableValidation: true,
+                        validationConfig: {
+                            minLength: column.validation?.minLength,
+                            maxLength: column.validation?.maxLength,
+                            pattern: column.validation?.pattern ? new RegExp(column.validation.pattern) : undefined
+                        }
+                    });
+                }
+        }
+    };
+    if (config.hidden || fieldMapping.inputType === "hidden") {
+        return renderInput();
+    }
+    if (fieldMapping.inputType === "checkbox") {
+        return /*#__PURE__*/ _jsx("div", {
+            ref: containerRef,
+            className: cn(theme.container.base, config.span && theme.container.span[config.span]),
+            children: renderInput()
+        });
+    }
+    return /*#__PURE__*/ _jsx("div", {
+        ref: containerRef,
+        className: cn(theme.container.base, config.span && theme.container.span[config.span]),
+        children: renderInput()
+    });
+}
+function getSelectOptions(column, customOptions) {
+    if (customOptions) {
+        return customOptions;
+    }
+    if (column.enumValues) {
+        return column.enumValues.map((val)=>({
+                value: val,
+                label: formatLabel(val)
+            }));
+    }
+    if (column.enum) {
+        return column.enum.values.map((val)=>({
+                value: val,
+                label: formatLabel(val)
+            }));
+    }
+    return [];
+}
+function getTextInputType(_inputType, column) {
+    if (column.validation?.format === "email") return "email";
+    if (column.validation?.format === "url" || column.validation?.format === "uri") return "url";
+    if (column.name.toLowerCase().includes("password")) return "password";
+    if (column.name.toLowerCase().includes("phone")) return "tel";
+    return "text";
+}

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

@@ -0,0 +1,152 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+import { getDefaultValue, shouldExcludeField } from "../utils/fieldMapping";
+import { validateField } from "../utils/validation";
+export function useFormBuilder({ columns, initialValues, fieldConfigs, onSubmit, validate: customValidate }) {
+    const initialValuesRef = useRef(initialValues);
+    const getInitialState = ()=>{
+        const values = {};
+        for (const column of columns){
+            if (shouldExcludeField(column)) continue;
+            const fieldName = column.name;
+            const config = fieldConfigs?.[fieldName];
+            if (initialValuesRef.current?.[fieldName] !== undefined) {
+                values[fieldName] = initialValuesRef.current[fieldName];
+            } else if (config?.defaultValue !== undefined) {
+                values[fieldName] = config.defaultValue;
+            } else {
+                values[fieldName] = getDefaultValue(column);
+            }
+        }
+        return {
+            values,
+            errors: {},
+            touched: {},
+            isSubmitting: false,
+            isDirty: false
+        };
+    };
+    const [state, setState] = useState(getInitialState);
+    useEffect(()=>{
+        if (initialValues !== initialValuesRef.current) {
+            initialValuesRef.current = initialValues;
+            setState(getInitialState());
+        }
+    }, [
+        initialValues
+    ]);
+    const setValue = (name, value)=>{
+        setState((prev)=>({
+                ...prev,
+                values: {
+                    ...prev.values,
+                    [name]: value
+                },
+                isDirty: true
+            }));
+    };
+    const setValues = (values)=>{
+        setState((prev)=>({
+                ...prev,
+                values: {
+                    ...prev.values,
+                    ...values
+                },
+                isDirty: true
+            }));
+    };
+    const setError = (name, error)=>{
+        setState((prev)=>({
+                ...prev,
+                errors: {
+                    ...prev.errors,
+                    [name]: error
+                }
+            }));
+    };
+    const setErrors = (errors)=>{
+        setState((prev)=>({
+                ...prev,
+                errors: {
+                    ...prev.errors,
+                    ...errors
+                }
+            }));
+    };
+    const setTouched = (name, touched)=>{
+        setState((prev)=>({
+                ...prev,
+                touched: {
+                    ...prev.touched,
+                    [name]: touched
+                }
+            }));
+    };
+    const reset = ()=>{
+        setState(getInitialState());
+    };
+    const validateForm = ()=>{
+        const errors = {};
+        for (const column of columns){
+            if (shouldExcludeField(column)) continue;
+            const fieldName = column.name;
+            const config = fieldConfigs?.[fieldName];
+            const value = state.values[fieldName];
+            const isRequired = config?.required ?? column.notNull ?? false;
+            const error = validateField(column, value, isRequired);
+            if (error) {
+                errors[fieldName] = error;
+            }
+        }
+        if (customValidate) {
+            const customErrors = customValidate(state.values);
+            Object.assign(errors, customErrors);
+        }
+        setState((prev)=>({
+                ...prev,
+                errors
+            }));
+        return Object.keys(errors).length === 0;
+    };
+    const submit = async ()=>{
+        const isValid = validateForm();
+        if (!isValid) return;
+        setState((prev)=>({
+                ...prev,
+                isSubmitting: true
+            }));
+        try {
+            await onSubmit(state.values);
+            setState((prev)=>({
+                    ...prev,
+                    isSubmitting: false,
+                    isDirty: false
+                }));
+        } catch (error) {
+            setState((prev)=>({
+                    ...prev,
+                    isSubmitting: false
+                }));
+            throw error;
+        }
+    };
+    const getFieldProps = (name)=>{
+        return {
+            value: state.values[name],
+            onChange: (value)=>setValue(name, value),
+            error: state.errors[name]
+        };
+    };
+    return {
+        state,
+        setValue,
+        setValues,
+        setError,
+        setErrors,
+        setTouched,
+        reset,
+        submit,
+        validate: validateForm,
+        getFieldProps
+    };
+}

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

@@ -0,0 +1,4 @@
+export { FormBuilder } from "./components/FormBuilder";
+export { FormField } from "./components/FormField";
+export { useFormBuilder } from "./hooks/useFormBuilder";
+export { formBuilderTheme } from "./theme";

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

@@ -0,0 +1,134 @@
+export const formBuilderTheme = {
+    container: {
+        base: "w-full"
+    },
+    form: {
+        base: "w-full",
+        layout: {
+            vertical: "flex flex-col",
+            horizontal: "flex flex-row flex-wrap",
+            inline: "flex flex-row flex-wrap items-end"
+        }
+    },
+    fields: {
+        base: "grid w-full",
+        columns: {
+            1: "grid-cols-1",
+            2: "grid-cols-1 sm:grid-cols-2",
+            3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+            4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",
+            6: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6",
+            12: "grid-cols-1 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-12"
+        },
+        gap: {
+            sm: "gap-3",
+            md: "gap-4",
+            lg: "gap-6"
+        }
+    },
+    field: {
+        container: {
+            base: "flex flex-col",
+            span: {
+                1: "col-span-1",
+                2: "col-span-1 sm:col-span-2",
+                3: "col-span-1 sm:col-span-2 lg:col-span-3",
+                4: "col-span-1 sm:col-span-2 lg:col-span-4",
+                6: "col-span-1 sm:col-span-2 md:col-span-3 lg:col-span-6",
+                12: "col-span-full"
+            }
+        },
+        label: {
+            base: "mb-1.5 text-sm font-medium",
+            color: {
+                light: "text-zinc-700",
+                dark: "dark:text-zinc-300"
+            },
+            required: "after:content-['*'] after:ml-0.5 after:text-red-500",
+            disabled: "opacity-50 cursor-not-allowed"
+        },
+        error: {
+            base: "mt-1 text-xs",
+            color: {
+                light: "text-red-500",
+                dark: "dark:text-red-400"
+            }
+        },
+        helper: {
+            base: "mt-1 text-xs",
+            color: {
+                light: "text-zinc-500",
+                dark: "dark:text-zinc-400"
+            }
+        }
+    },
+    actions: {
+        base: "flex items-center mt-6",
+        gap: {
+            sm: "gap-2",
+            md: "gap-3",
+            lg: "gap-4"
+        },
+        alignment: {
+            left: "justify-start",
+            center: "justify-center",
+            right: "justify-end",
+            between: "justify-between"
+        }
+    },
+    header: {
+        base: "mb-6",
+        title: {
+            base: "text-xl font-semibold",
+            color: {
+                light: "text-zinc-900",
+                dark: "dark:text-white"
+            }
+        },
+        description: {
+            base: "mt-1 text-sm",
+            color: {
+                light: "text-zinc-500",
+                dark: "dark:text-zinc-400"
+            }
+        }
+    },
+    divider: {
+        base: "w-full h-px my-4",
+        color: {
+            light: "bg-zinc-200",
+            dark: "dark:bg-zinc-700"
+        }
+    },
+    section: {
+        base: "mb-6",
+        title: {
+            base: "text-sm font-medium uppercase tracking-wider mb-3",
+            color: {
+                light: "text-zinc-500",
+                dark: "dark:text-zinc-400"
+            }
+        }
+    },
+    animation: {
+        field: {
+            enter: {
+                duration: 0.3,
+                ease: "power2.out",
+                stagger: 0.05
+            },
+            exit: {
+                duration: 0.2,
+                ease: "power2.in"
+            },
+            error: {
+                duration: 0.4,
+                ease: "elastic.out(1, 0.5)"
+            }
+        },
+        submit: {
+            duration: 0.2,
+            ease: "power2.out"
+        }
+    }
+};

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

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

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

@@ -0,0 +1,5 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}