@bouko/react 2.1.9 → 2.2.0

package/dist/components/button.js

@@ -4,7 +4,7 @@ export function Button({ size, variant, style, ...props }) {
     return (_jsx("button", { className: cn(styles({ variant, size }), style), ...props }));
 }
 const styles = tv({
-    base: "flex items-center gap-2 bg-accent hover:bg-accent-dark border border-accent-dark rounded font-semibold text-background-light duration-200 cursor-pointer disabled:cursor-not-allowed",
+    base: "flex justify-center items-center gap-2 bg-accent hover:bg-accent-dark border border-accent-dark rounded font-semibold text-background-light duration-200 cursor-pointer disabled:cursor-not-allowed",
     defaultVariants: { size: "md" },
     variants: {
         variant: {

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

@@ -0,0 +1,16 @@
+import { Field, Option } from "./types";
+export type FormBuilderField<T = unknown> = (Omit<Field<T>, "value" | "update"> & {
+    id: string;
+    element: string;
+    rows?: number;
+    placeholder?: string;
+    options?: Option[];
+})[][];
+type Props<T> = {
+    id?: string;
+    fields: FormBuilderField<T>;
+    data: T;
+    setField: (x: string, y: unknown) => void;
+};
+export default function Fields<T>({ fields, data, setField }: Props<T>): Promise<import("react/jsx-runtime").JSX.Element[]>;
+export {};

package/dist/components/form/fields.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RowBox } from "../layout/flex";
+import Input from "../input";
+import Select from "../select";
+import TextArea from "../textarea";
+import MultipleChoice from "../multiple-choice";
+import Attachment from "../attachment";
+export default async function Fields({ fields, data, setField }) {
+    return fields.map((row, i) => (_jsx(RowBox, { style: "w-full gap-5 overflow-hidden", children: row.map(({ element, id, rows, label, placeholder, disabled, options, required, note }) => {
+            if (element === "input")
+                return (_jsx(Input, { id: id, styles: { container: "flex-1" }, label: label, placeholder: placeholder, value: data[id], update: x => setField(id, x), disabled: disabled, note: note, required: required }, id));
+            else if (element === "select")
+                return (_jsx(Select, { id: id, label: label, placeholder: placeholder, options: options || [], value: data[id], update: x => setField(id, 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 => setField(id, 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 => setField(id, x), note: note, required: required }, id));
+            else if (element === "attachment")
+                return (_jsx(Attachment, { id: id, label: label, value: data[id], update: x => setField(id, x), note: note, required: required }, id));
+        }) }, i)));
+}

package/dist/components/form/functions.d.ts

@@ -1,9 +1,9 @@
 import type { SetState } from "./types";
-export declare const useForm: <T>(init: T) => {
-    data: T;
-    update: import("react").Dispatch<import("react").SetStateAction<T>>;
+export declare const useForm: <T>(init: Partial<T>) => {
+    data: Partial<T>;
+    update: import("react").Dispatch<import("react").SetStateAction<Partial<T>>>;
     clear: () => void;
-    setField: <T_1>(name: string, value: T_1) => void;
+    setField: (name: string, value: unknown) => void;
 };
 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/components/form/functions.js

@@ -1,3 +1,4 @@
+"use client";
 import { useState, useEffect, useMemo } from "react";
 export const useForm = (init) => {
     const initial = useMemo(() => init, [JSON.stringify(init)]); // deep compare

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

@@ -1,25 +1,27 @@
-import type { ZodTypeAny } from "zod";
-import type { Field, Option, FormSection } from "./types";
+import { FormBuilderField } from "./fields";
 export * from "./functions";
 export * from "./types";
-type FormBuilderField<T = unknown> = (Omit<Field<T>, "value" | "update"> & {
-    element: string;
-    rows?: number;
-    placeholder?: string;
-    options?: Option[];
-})[][];
-type Props<T> = FormSection<T> & {
+type Props<T> = {
     styles?: {
         container?: string;
         submit?: string;
         cancel?: string;
     };
     id?: string;
+    button?: string;
     fields: FormBuilderField<T>;
-    validator: ZodTypeAny;
+    validator: (x: Partial<T>) => ({
+        success: boolean;
+    });
     sound?: string;
     cancel?: boolean;
-    action: (data: T) => Promise<void | never>;
+    submit: (data: Partial<T>) => Promise<void | never>;
 };
 export declare function useSound(filename?: string): import("use-sound/dist/types").PlayFunction | undefined;
-export declare function FormBuilder<T>({ fields, validator, id, data, styles, update, setField, action, cancel, sound, clear }: Props<T>): Promise<import("react/jsx-runtime").JSX.Element>;
+export * from "./loaders";
+type Item = {
+    id: string;
+    initial?: string;
+};
+export declare function mapIdToInitial<T>(arrays: Item[][]): Partial<T>;
+export declare function FormBuilder<T>({ fields, validator, button, styles, submit, cancel }: Props<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/form/index.js

@@ -1,41 +1,39 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useForm } from "./functions";
 import { cn } from "@bouko/style";
+import Fields from "./fields";
 import CheckCircle from "../../assets/icons/check-circle.svg";
 import XCircle from "../../assets/icons/x-circle.svg";
 import { default as base } from "use-sound";
 export * from "./functions";
 export * from "./types";
 import { RowBox } from "../layout/flex";
-import Input from "../input";
-import Select from "../select";
-import TextArea from "../textarea";
-import MultipleChoice from "../multiple-choice";
 import { Button } from "../button";
-import Attachment from "../attachment";
-import { loadJson } from "./test-next";
 export function useSound(filename) {
     if (!filename)
         return;
     return base(filename)[0];
 }
-export async function FormBuilder({ fields, validator, id, data, styles, update, setField, action, cancel = false, sound, clear }) {
-    const fields2 = await loadJson("forms/" + id);
-    const isValid = validator.safeParse(data).success;
-    const play = useSound(sound);
+export * from "./loaders";
+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({ fields, validator, button, styles, submit, cancel = false }) {
+    const initialShi = mapIdToInitial(fields);
+    const { data, setField, clear } = useForm(initialShi);
+    const isValid = true; // validator(data).success;
+    // const play = useSound(sound);
     const handleSubmit = async () => {
-        await action(data);
+        await submit(data);
     };
-    return (_jsxs("div", { className: cn("flex flex-col w-full gap-4", styles?.container), children: [(fields2 ?? fields).map((row, i) => (_jsx(RowBox, { style: "w-full gap-5 overflow-hidden", children: row.map(({ element, id, rows, label, placeholder, disabled, options, required, note }) => {
-                    if (element === "input")
-                        return (_jsx(Input, { id: id, styles: { container: "flex-1" }, label: label, placeholder: placeholder, value: data[id], update: x => setField(id, x), disabled: disabled, note: note, required: required }, id));
-                    else if (element === "select")
-                        return (_jsx(Select, { id: id, label: label, placeholder: placeholder, options: options || [], value: data[id], update: update, note: note, required: required }, id));
-                    else if (element === "textarea")
-                        return (_jsx(TextArea, { id: id, label: label, placeholder: placeholder, rows: rows, value: data[id], update: update, note: note, required: required }, id));
-                    else if (element === "multiple-choice")
-                        return (_jsx(MultipleChoice, { id: id, label: label, options: options || [], value: data[id], update: update, note: note, required: required }, id));
-                    else if (element === "attachment")
-                        return (_jsx(Attachment, { id: id, label: label, value: data[id], update: update, note: note, required: required }, id));
-                }) }, i))), _jsxs(RowBox, { style: "items-center gap-2 mt-2 w-full", children: [_jsxs(Button, { style: cn("text-sm", styles?.submit), onClick: handleSubmit, disabled: !isValid, children: [_jsx("div", { children: _jsx(CheckCircle, {}) }), "Submit"] }), cancel !== false && (_jsxs(Button, { style: cn("text-sm text-error hover:text-error-light", styles?.cancel), variant: "ghost", onClick: clear, children: [_jsx(XCircle, {}), "Cancel"] }))] })] }));
+    return (_jsxs("div", { className: cn("flex flex-col w-full gap-4", styles?.container), children: [_jsx(Fields, { fields: fields, data: data, setField: setField }), _jsxs(RowBox, { style: "items-center gap-2 mt-2 w-full", children: [_jsxs(Button, { style: cn("text-sm", styles?.submit), onClick: handleSubmit, disabled: !isValid, children: [_jsx("div", { children: _jsx(CheckCircle, {}) }), button || "Submit"] }), cancel !== false && (_jsxs(Button, { style: cn("text-sm text-error hover:text-error-light", styles?.cancel), variant: "ghost", onClick: clear, children: [_jsx(XCircle, {}), "Cancel"] }))] })] }));
 }

package/dist/components/form/loaders.d.ts

@@ -0,0 +1,3 @@
+import { FormBuilderField } from "./fields";
+export declare function loadJson<T>(name: string): Promise<T>;
+export declare function loadForm<T>(name?: string): Promise<FormBuilderField<T>>;

package/dist/components/form/loaders.js

@@ -0,0 +1,11 @@
+"use server";
+import { promises as fs } from "fs";
+export async function loadJson(name) {
+    const file = await fs.readFile(process.cwd() + "/assets/" + name + ".json", "utf-8");
+    return JSON.parse(file);
+}
+export async function loadForm(name) {
+    if (!name)
+        throw new Error("Form not foud");
+    return loadJson(`forms/${name}`);
+}

package/dist/components/input.d.ts

@@ -1,4 +1,4 @@
-import { type Field as FieldProps } from "./form";
+import type { Field as FieldProps } from "./form/types";
 type Props<T> = FieldProps<T> & {
     placeholder?: string;
     styles?: {
@@ -7,5 +7,5 @@ type Props<T> = FieldProps<T> & {
     };
     disabled?: boolean;
 };
-export default function Input<T>({ id, styles, style, label, required, note, update, ...props }: Props<T>): import("react/jsx-runtime").JSX.Element;
+export default function Input({ id, styles, label, required, note, style, update, ...props }: Props<string>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/input.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import Field from "./field";
 import { cn } from "@bouko/style";
-import { setField } from "./form";
-export default function Input({ id, styles, style, label, required = true, note, update, ...props }) {
-    return (_jsx(Field, { style: styles?.container, label: label, required: required, note: note, children: _jsx("input", { className: cn("px-3 py-2 bg-input border border-outline duration-200 focus:border-outline-light outline-none rounded text-sm disabled:brightness-90 disabled:cursor-not-allowed", styles?.input), onChange: ({ target: { value } }) => setField(update, id, value), ...props }) }));
+export default function Input({ id, styles, label, required = true, note, style, update, ...props }) {
+    return (_jsx(Field, { style: styles?.container, label: label, required: required, note: note, children: _jsx("input", { className: cn("px-3 py-2 bg-input border border-outline duration-200 focus:border-outline-light outline-none rounded text-sm disabled:brightness-90 disabled:cursor-not-allowed", styles?.input), onChange: ({ target: { value } }) => update(value), ...props }) }));
 }

package/package.json

@@ -2,7 +2,7 @@
 
   "name": "@bouko/react",
 
-  "version": "2.1.9",
+  "version": "2.2.0",
 
   "main": "./dist/index.js",
 
@@ -38,7 +38,7 @@
 
     "@bouko/audio": "^0.1.0",
 
-    "@bouko/style": "^0.1.6",
+    "@bouko/style": "^0.1.7",
 
     "clsx": "^2.1.1",