formeact 0.0.1

package/dist/components/builder/field.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+type Props<T> = Omit<FieldProps<T>, "update"> & {
+    children: ReactNode;
+};
+export type FieldProps<T> = {
+    id?: string;
+    label?: string;
+    style?: string;
+    value?: T;
+    update: (x: T) => void;
+    required?: boolean;
+    disabled?: boolean;
+    note?: ReactNode;
+};
+export declare function Field<T>({ style, label, required, note, children }: Props<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/builder/field.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@bouko/style";
+export function Field({ style, label, required = true, note, children }) {
+    return (_jsxs("div", { className: cn(fieldStyles.container, style), children: [label && _jsxs("span", { className: fieldStyles.label, children: [label, " ", !required ? _jsx("span", { className: "italic text-slate-400", children: "(optional)" }) : ""] }), children, note && _jsx("span", { className: fieldStyles.note, children: note })] }));
+}
+const fieldStyles = {
+    container: "flex flex-col shrink-0 gap-1 w-full overflow-hidden",
+    label: "text-xs text-primary-dark",
+    note: "mt-1 text-xs text-slate-500 whitespace-pre-line"
+};

package/dist/components/builder/fields.d.ts

@@ -0,0 +1,36 @@
+import type { Field, Option } from "../../core/types";
+import { JsonMap } from "@bouko/ts";
+type FormBuilderField<T = unknown> = (Omit<Field<string>, "value" | "update"> & {
+    element: string;
+    rows?: number;
+    placeholder?: string;
+    options?: Option[];
+})[][];
+type JsonMapWithFiles = {
+    [key: string]: JsonValueWithFile | JsonValueWithFile[];
+};
+type JsonValueWithFile = string | number | boolean | null | undefined | File | JsonMap | JsonValueWithFile[];
+export type FormBuilderProps<T> = {
+    formId?: string;
+    style?: Styles;
+    fields: FormBuilderField<T>;
+    oops?: (reason: string) => void;
+    validator?: (x: Partial<T>) => {
+        success: boolean;
+    };
+    sound?: string;
+    cancel?: boolean;
+    submit: (data: T) => void;
+};
+type Styles = {
+    container?: string;
+    submit?: string;
+    cancel?: string;
+};
+type Item = {
+    id?: string;
+    initial?: string;
+};
+export declare function mapIdToInitial<T>(arrays: Item[][]): Partial<T>;
+export default function Fields<T extends JsonMapWithFiles>({ fields, submit, cancel, sound }: FormBuilderProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/builder/fields.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useForm } from "../../core/hooks";
+import { Footer } from "./footer";
+import { RowBox, Select, TextArea, MultipleChoice, Attachment } from "@bouko/react";
+import Input from "../elements/input";
+import { ImageUploader } from "./uploader";
+export function mapIdToInitial(arrays) {
+    const result = {};
+    for (const inner of arrays) {
+        for (const obj of inner) {
+            if ("initial" in obj && obj["initial"]) {
+                result[obj.id] = obj.initial;
+            }
+        }
+    }
+    return result;
+}
+export default function Fields({ fields, submit, cancel = false, sound }) {
+    const { data, update, clear } = useForm(mapIdToInitial(fields));
+    return (_jsxs(_Fragment, { children: [fields.map((row, i) => (_jsx(RowBox, { style: "w-full gap-5 overflow-hidden", children: row.map(({ element, style, id, rows, label, placeholder, disabled, options, required, note }) => {
+                    if (element === "input")
+                        return (_jsx(Input, { label: label, placeholder: placeholder, value: data[id] || "", update: x => update(id, x), disabled: disabled, note: note, required: required }, id));
+                    else if (element === "image-uploader")
+                        return (_jsx(ImageUploader, { style: style, placeholder: placeholder, value: data[id], update: x => update(id, x) }, id));
+                    else if (element === "select")
+                        return (_jsx(Select, { id: id, label: label, placeholder: placeholder, options: options || [], value: data[id], update: x => console.log(x), note: note, required: required }, id));
+                    else if (element === "textarea")
+                        return (_jsx(TextArea, { id: id, label: label, placeholder: placeholder, rows: rows, value: data[id], update: x => console.log(x), note: note, required: required }, id));
+                    else if (element === "multiple-choice")
+                        return (_jsx(MultipleChoice, { id: id, label: label, options: options || [], value: data[id], update: x => console.log(x), note: note, required: required }, id));
+                    else if (element === "attachment")
+                        return (_jsx(Attachment, { id: id, label: label, value: data[id], update: x => console.log(x), note: note, required: required }, id));
+                }) }, i))), _jsx(Footer, { data: data, 
+                // validate={validator} 
+                submit: submit, cancel: cancel, clear: clear, sound: sound })] }));
+}

package/dist/components/builder/footer.d.ts

@@ -0,0 +1,40 @@
+import { ReactNode } from "react";
+type Props<T> = {
+    style?: string;
+    data: T;
+    icon?: ReactNode;
+    button?: string;
+    validate?: (x: T) => {
+        success: boolean;
+    };
+    submit: (x: T) => void;
+    sound?: string;
+    clear?: () => void;
+    cancel?: boolean;
+};
+/**
+ * Form Builder footer section.
+ *
+ * Displayed at the bottom of a form, contains a 'Submit' and optional 'Cancel' button.
+ * The submit button is disabled if form validation fails, and triggers the submit callback on click.
+ * If a sound is provided, it plays on successful submission. Errors are shown as toast notifications.
+ * The cancel button appears if a clear callback is provided, allowing users to reset or exit the form.
+ *
+ * @param {string} style - Additional class names for styling the submit button. (optional)
+ * @param {T} data - The form data to be validated and submitted.
+ * @param {ReactNode} icon - Icon for the submit button (default: `CheckCircle`).
+ * @param {string} button - Label for the submit button (default: "Submit").
+ * @param {Function} validate - Validation function for the form data. (optional)
+ * @param {Function} submit - Callback to handle form submission.
+ * @param {string} sound - Sound to play on successful submission. (optional)
+ * @param {Function} clear - Callback to handle form cancellation/reset. (optional)
+ * @param {boolean} cancel - Show or hide the cancel button. (optional)
+**/
+export declare function Footer<T>({ style, data, icon, button, validate, submit, sound, clear, cancel }: Props<T>): import("react/jsx-runtime").JSX.Element;
+export {};
+/**
+ * Problems:
+ *
+ *  - Perfect `Button`
+ *  - Perfect `useSound`
+**/ 

package/dist/components/builder/footer.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RowBox, Button } from "@bouko/react";
+import CheckCircle from "../../assets/icons/check-circle.svg";
+import XCircle from "../../assets/icons/x-circle.svg";
+import { useSound } from "@bouko/react";
+import { toast } from "@bouko/notify";
+import { cn } from "@bouko/style";
+/**
+ * Form Builder footer section.
+ *
+ * Displayed at the bottom of a form, contains a 'Submit' and optional 'Cancel' button.
+ * The submit button is disabled if form validation fails, and triggers the submit callback on click.
+ * If a sound is provided, it plays on successful submission. Errors are shown as toast notifications.
+ * The cancel button appears if a clear callback is provided, allowing users to reset or exit the form.
+ *
+ * @param {string} style - Additional class names for styling the submit button. (optional)
+ * @param {T} data - The form data to be validated and submitted.
+ * @param {ReactNode} icon - Icon for the submit button (default: `CheckCircle`).
+ * @param {string} button - Label for the submit button (default: "Submit").
+ * @param {Function} validate - Validation function for the form data. (optional)
+ * @param {Function} submit - Callback to handle form submission.
+ * @param {string} sound - Sound to play on successful submission. (optional)
+ * @param {Function} clear - Callback to handle form cancellation/reset. (optional)
+ * @param {boolean} cancel - Show or hide the cancel button. (optional)
+**/
+export function Footer({ style, data, icon = _jsx(CheckCircle, {}), button = "Submit", validate, submit, sound, clear, cancel = false }) {
+    const isValid = validate ? validate(data).success : true;
+    const playSound = useSound(sound);
+    const submitForm = async () => {
+        try {
+            await submit(data);
+            playSound?.();
+        }
+        catch (err) {
+            toast.error(err.message);
+        }
+    };
+    return (_jsxs(RowBox, { style: styles.container, children: [_jsx(Button, { style: cn(styles.submit, style), size: "sm", icon: icon, action: submitForm, disabled: !isValid, children: button }), clear && cancel && (_jsx(Button, { style: styles.cancel, size: "sm", variant: "secondary", icon: _jsx(XCircle, {}), action: clear, children: "Cancel" }))] }));
+}
+const styles = {
+    container: "items-center gap-2 mt-2 w-full",
+    submit: "grow",
+    cancel: "text-error hover:text-error-light"
+};

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

@@ -0,0 +1,38 @@
+import type { Field, Option } from "../../core/types";
+import { JsonMap } from "@bouko/ts";
+type JsonMapWithFiles = {
+    [key: string]: JsonValueWithFile | JsonValueWithFile[];
+};
+type JsonValueWithFile = string | number | boolean | null | undefined | File | JsonMap | JsonValueWithFile[];
+type FormBuilderField<T = unknown> = (Omit<Field<string>, "value" | "update"> & {
+    element: string;
+    rows?: number;
+    initial?: string;
+    placeholder?: string;
+    options?: Option[];
+})[][];
+export type FormBuilderProps<T> = {
+    formId?: string;
+    style?: Styles;
+    initial?: Partial<T>;
+    fields?: FormBuilderField<T>;
+    oops?: (reason: string) => void;
+    validator?: (x: Partial<T>) => {
+        success: boolean;
+    };
+    sound?: string;
+    cancel?: boolean;
+    submit: (data: T) => void;
+};
+type Styles = {
+    container?: string;
+    submit?: string;
+    cancel?: string;
+};
+type Item<T = string> = {
+    id?: string;
+    initial?: T;
+};
+export declare function mapIdToInitial<T>(arrays: Item[][]): Partial<T>;
+export declare function FormBuilder<T extends JsonMapWithFiles>({ formId, fields, validator, style, initial, submit, sound, cancel }: FormBuilderProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/builder/index.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@bouko/style";
+import { ColumnBox, } from "@bouko/react";
+import Fields from "./fields";
+import { useState } from "react";
+export function mapIdToInitial(arrays) {
+    const result = {};
+    for (const inner of arrays) {
+        for (const obj of inner) {
+            if ("initial" in obj && obj["initial"]) {
+                result[obj.id] = obj.initial;
+            }
+        }
+    }
+    return result;
+}
+export function FormBuilder({ formId, fields, validator, style, initial = {}, submit, sound, cancel = false }) {
+    const [loadedFields, setLoadedFields] = useState(fields || []);
+    /* useEffect(() => {
+        
+        const loadFields = async () => {
+            const test = await loadForm<T>(formId);
+            for (let row = 0; row < test.length; row++) {
+                for (let field = 0; field < test[row].length; field++) {
+                    let initialValue = initial[test[row][field].id!] as string;
+                    if (initialValue && initialValue !== null)
+                        test[row][field].initial = initialValue;
+                }
+            }
+            setLoadedFields(test);
+        };
+
+        loadFields();
+
+    }, []); */
+    return (_jsx(ColumnBox, { style: cn("w-full gap-4", style?.container), children: _jsx(Fields, { fields: loadedFields, submit: submit, cancel: cancel, sound: sound }) }));
+}

package/dist/components/builder/uploader.d.ts

@@ -0,0 +1,10 @@
+import { StaticImageData } from "next/image";
+type Props = {
+    style?: string;
+    placeholder?: StaticImageData | string;
+    value?: File;
+    update?: (x: File) => void;
+    disabled?: boolean;
+};
+export declare function ImageUploader({ style, placeholder, value, update, disabled }: Props): import("react/jsx-runtime").JSX.Element;
+export default ImageUploader;

package/dist/components/builder/uploader.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { cn } from "@bouko/style";
+import Image from "next/image";
+import Placeholder from "../../assets/icons/cover.png";
+import Camera from "../../assets/icons/camera.svg";
+export function ImageUploader({ style, placeholder, value, update, disabled = false }) {
+    const [preview, setPreview] = useState();
+    useEffect(() => {
+        if (value) {
+            console.log(value);
+            setPreview(URL.createObjectURL(value));
+        }
+    }, [value]);
+    const ref = useRef(null);
+    const uploadFile = () => ref.current?.click();
+    if (!update)
+        disabled = true;
+    const handleFileChange = (e) => {
+        const file = e.target.files?.[0];
+        if (!file)
+            return;
+        update?.(file);
+    };
+    return (_jsxs("div", { className: cn(styles.container, style), onClick: uploadFile, children: [_jsx("input", { type: "file", className: "hidden", onChange: handleFileChange, ref: ref }), _jsx(Image, { src: preview || placeholder || Placeholder, fill: true, alt: "Image Uploader" }), _jsx("div", { className: "flex justify-center items-center w-full h-full z-10 opacity-0 hover:opacity-50 bg-background-light/80 duration-200 cursor-pointer", children: _jsx(Camera, { className: "text-xl text-primary-light" }) })] }));
+}
+const styles = {
+    container: "relative shrink-0 border border-border rounded-md overflow-hidden",
+};
+export default ImageUploader;

package/dist/components/elements/input.d.ts

@@ -0,0 +1,27 @@
+import { FieldProps } from "../builder/field";
+type Variant = "normal" | "ghost";
+type Props = Omit<FieldProps<string>, "id"> & {
+    variant?: Variant;
+    style?: string;
+    placeholder?: string;
+    onEnter?: (x: string) => void;
+};
+/**
+ * Text field component.
+ *
+ * Wraps the native `input` element with custom styling and validation.
+ * It displays an optional label and note, and can be marked as required.
+ * Optional callback for when the user presses `Enter` key.
+ * The value is controlled externally via props, usually `useState`.
+ *
+ * Variants:
+ *  - `normal`: Standard input with primary color scheme.
+ *  - `ghost`: Transparent for injecting input inside other component.
+ *
+ * @param {Variant} variant - Visual style variant. (optional, default = normal)
+ * @param {string} style - Additional class names for styling. (optional)
+ * @param {string} placeholder - Placeholder text for the input. (optional)
+ * @param {Function} onEnter - Callback when `Enter` key is pressed. (optional)
+**/
+export default function Input({ variant, style, value, update, onEnter, disabled, placeholder, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/elements/input.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Field } from "../builder/field";
+import { cn, tv } from "@bouko/style";
+/**
+ * Text field component.
+ *
+ * Wraps the native `input` element with custom styling and validation.
+ * It displays an optional label and note, and can be marked as required.
+ * Optional callback for when the user presses `Enter` key.
+ * The value is controlled externally via props, usually `useState`.
+ *
+ * Variants:
+ *  - `normal`: Standard input with primary color scheme.
+ *  - `ghost`: Transparent for injecting input inside other component.
+ *
+ * @param {Variant} variant - Visual style variant. (optional, default = normal)
+ * @param {string} style - Additional class names for styling. (optional)
+ * @param {string} placeholder - Placeholder text for the input. (optional)
+ * @param {Function} onEnter - Callback when `Enter` key is pressed. (optional)
+**/
+export default function Input({ variant, style, value, update, onEnter, disabled, placeholder, ...props }) {
+    return (_jsx(Field, { ...props, children: _jsx("input", { className: cn(styles({ variant }), style), placeholder: placeholder, value: value, onChange: ({ target: { value } }) => update?.(value), onKeyUp: ({ key }) => key === "Enter" && value ? onEnter?.(value) : null, disabled: disabled }) }));
+}
+const styles = tv({
+    base: "px-3 py-2 duration-200 rounded text-sm placeholder:text-primary-darker text-primary disabled:brightness-90 disabled:cursor-not-allowed",
+    defaultVariants: { variant: "normal" },
+    variants: {
+        variant: {
+            normal: "bg-input border border-outline focus:border-outline-light outline-none",
+            ghost: "p-0 bg-transparent border-none outline-none"
+        }
+    }
+});

package/dist/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./builder";
+export { default as Input } from "./elements/input";

package/dist/components/index.js

@@ -0,0 +1,2 @@
+export * from "./builder";
+export { default as Input } from "./elements/input";

package/dist/core/functions.d.ts

@@ -0,0 +1,3 @@
+import type { SetState } from "./types";
+export declare const setField: <T>(update: SetState<T>, id: string, value: unknown) => void;
+export declare const parseData: <T extends Record<string, unknown>>(data: T) => T;

package/dist/core/functions.js

@@ -0,0 +1,33 @@
+"use client";
+export const setField = (update, id, value) => update(prev => ({
+    ...prev,
+    [id]: value
+}));
+export const parseData = (data) => {
+    const copy = JSON.parse(JSON.stringify(data));
+    for (const [key, value] of Object.entries(data)) {
+        if (key === "created_at")
+            copy[key] = new Date(value);
+        else if (key === "timestamp")
+            copy[key] = new Date(value.replaceAll("'", ""));
+        else if (parseAllowedDate(value))
+            copy[key] = new Date(value);
+    }
+    return copy;
+};
+function parseAllowedDate(input) {
+    // ISO 8601 strict (YYYY-MM-DD or YYYY-MM-DDTHH:mm:ss+hh:mm)
+    const isoStrictRegex = /^\d{4}-\d{2}-\d{2}(T\d{2}:\d{2}(:\d{2}(\.\d{1,3})?)?(Z|[+-]\d{2}:\d{2}))?$/;
+    // MySQL/Postgres style with space + offset without colon (YYYY-MM-DD HH:mm:ss+hhmm)
+    const spaceOffsetRegex = /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}[+-]\d{4}$/;
+    let normalized = input;
+    if (spaceOffsetRegex.test(input)) {
+        // Convert to ISO by replacing space with T and adding colon in offset
+        normalized = input.replace(" ", "T").replace(/([+-]\d{2})(\d{2})$/, "$1:$2");
+    }
+    else if (!isoStrictRegex.test(input)) {
+        return null; // Not allowed format
+    }
+    const date = new Date(normalized);
+    return !isNaN(date.getTime()) ? date : null;
+}

package/dist/core/hooks.d.ts

@@ -0,0 +1,27 @@
+import type { FormControls } from "@bouko/form";
+import type { JsonMap } from "@bouko/ts";
+/**
+ * React hook for managing form state with type-safety
+ * and controlled updates.
+ *
+ * Features:
+ * - Uses deep comparison for initial value updates.
+ * - Does not handle validation, errors, or async updates.
+ *
+ * @template T - The shape of the form data.
+ * @template K - The keys of the form data.
+ *
+ * @param {Partial<T>} init - The initial form data.
+ * @returns {FormControls} Utils to control the form.
+**/
+type JsonMapWithFiles = {
+    [key: string]: JsonValueWithFile | JsonValueWithFile[];
+};
+type JsonValueWithFile = string | number | boolean | null | undefined | File | JsonMap | JsonValueWithFile[];
+export declare function useForm<T extends JsonMapWithFiles, K extends keyof T = keyof T>(init: Partial<T>): FormControls<T, K>;
+export {};
+/**
+ * Problems:
+ *
+ *  - Perfect `FormControls`.
+**/ 

package/dist/core/hooks.js

@@ -0,0 +1,15 @@
+"use client";
+import { useState, useEffect } from "react";
+import { useDeepCompareMemo } from "use-deep-compare";
+export function useForm(init) {
+    const initial = useDeepCompareMemo(() => init, [init]);
+    const [data, setData] = useState(initial);
+    useEffect(() => {
+        setData(initial);
+    }, [initial]);
+    return {
+        data,
+        update: (id, x) => setData(prev => ({ ...prev, [id]: x })),
+        clear: () => setData(initial)
+    };
+}

package/dist/core/types.d.ts

@@ -0,0 +1,45 @@
+import type { ReactNode, Dispatch, SetStateAction } from "react";
+export type SetState<T> = Dispatch<SetStateAction<T>>;
+export type FormSection<T = string> = {
+    value: T;
+    update: SetState<T>;
+    setField: (x: string, value: T) => void;
+    clear: () => void;
+};
+export type FormBuilderField<T = unknown> = (Omit<Field<string>, "value" | "update"> & {
+    id: string;
+    element: string;
+    rows?: number;
+    initial?: string;
+    placeholder?: string;
+    options?: Option[];
+})[][];
+export type Field<T = string> = {
+    id?: string;
+    label?: string;
+    style?: string;
+    value?: T;
+    initial?: T;
+    update: (x: T) => void;
+    required?: boolean;
+    disabled?: boolean;
+    note?: ReactNode;
+};
+export type Option = {
+    id: string;
+    label?: string;
+    active?: boolean;
+    select?: () => void;
+};
+export type OptionField<T> = Field<T> & {
+    options: Option[];
+};
+export type Form<T> = {
+    data: T;
+};
+export type FormSubmit<T> = (data: T, clear?: () => void) => Promise<void>;
+export type FormControls<T, K extends keyof T> = {
+    data: Partial<T>;
+    update: (id: K, x: T[K]) => void;
+    clear: () => void;
+};

package/dist/core/types.js

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

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./core/functions";
+export * from "./core/types";
+export * from "./core/hooks";
+export * from "./components";

package/dist/index.js

@@ -0,0 +1,4 @@
+export * from "./core/functions";
+export * from "./core/types";
+export * from "./core/hooks";
+export * from "./components";

package/package.json

@@ -0,0 +1,40 @@
+{
+
+  "name": "formeact",
+  "version": "0.0.1",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": "",
+  "description": "",
+  "engines": {},
+
+  "scripts": {
+    "build": "tsc",
+    "release": "npm run build && npm publish"
+  },
+
+  "dependencies": {
+    "@bouko/next": "^1.6.6",
+    "@bouko/notify": "^0.1.8",
+    "@bouko/react": "^2.6.6",
+    "@bouko/style": "^0.1.7",
+    "@bouko/ts": "^0.2.0",
+    "use-deep-compare": "^1.3.0"
+  },
+
+  "devDependencies": {
+    "@types/node": "^24.3.0",
+    "@types/react": "^19.1.10",
+    "dependency-cruiser": "^17.0.1",
+    "react": "^19.1.1",
+    "typescript": "^5.9.2"
+  }
+
+}