@bouko/react 1.7.5 → 1.7.7

package/dist/assets/icons/check-circle.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em">
+    <path 
+        d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-111 111-47-47c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l64 64c9.4 9.4 24.6 9.4 33.9 0L369 209z" 
+        fill="currentColor" 
+    />
+</svg>

package/dist/assets/icons/spinner.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em">
+    <path 
+        d="M304 48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zm0 416a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM48 304a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm464-48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM142.9 437A48 48 0 1 0 75 369.1 48 48 0 1 0 142.9 437zm0-294.2A48 48 0 1 0 75 75a48 48 0 1 0 67.9 67.9zM369.1 437A48 48 0 1 0 437 369.1 48 48 0 1 0 369.1 437z" 
+        fill="currentColor" 
+    />
+</svg>

package/dist/assets/icons/x-circle.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em">
+    <path 
+        d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z" 
+        fill="currentColor" 
+    />
+</svg>

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

@@ -0,0 +1,9 @@
+import type { ZodTypeAny } from "zod";
+type Props<T> = {
+    data: T;
+    validator: ZodTypeAny;
+    submit: (data: T) => void;
+    clear: () => void;
+};
+export default function FormFooter<T>({ data, validator, submit, clear }: Props<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/form/footer.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Button } from "../button";
+import { RowBox } from "../flex";
+import CheckCircle from "./assets/check-circle.svg";
+import Spinner from "./assets/spinner.svg";
+export default function FormFooter({ data, validator, submit, clear }) {
+    const isValid = validator.safeParse(data).success;
+    const [isLoading, setLoading] = useState(false);
+    const handleSubmit = async () => {
+        setLoading(true);
+        await submit(data);
+        setLoading(false);
+    };
+    return (_jsxs(RowBox, { style: "items-center gap-2 mt-2 w-full", children: [_jsxs(Button, { onClick: handleSubmit, disabled: !isValid || isLoading, children: [_jsx(Spinner, { className: isLoading ? "animate-spin" : "hidden" }), _jsx(CheckCircle, { className: isLoading ? "hidden" : "" }), "Create"] }), _jsx(Button, { variant: "ghost", onClick: clear, disabled: isLoading, children: "Cancel" })] }));
+}

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

@@ -0,0 +1,8 @@
+import type { SetState } from "./types";
+export declare const useForm: <T>(init: T) => {
+    data: T;
+    update: import("react").Dispatch<import("react").SetStateAction<T>>;
+    clear: () => 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

@@ -0,0 +1,27 @@
+import { useState, useEffect, useMemo } from "react";
+export const useForm = (init) => {
+    const initial = useMemo(() => init, [JSON.stringify(init)]); // deep compare
+    const [data, setData] = useState(initial);
+    useEffect(() => {
+        setData(initial);
+    }, [initial]);
+    return {
+        data,
+        update: setData,
+        clear: () => setData(initial)
+    };
+};
+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("'", ""));
+    }
+    return copy;
+};

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

@@ -0,0 +1,24 @@
+import type { ZodTypeAny } from "zod";
+import type { Field, Option, FormSection } from "./types";
+export * from "./functions";
+export * from "./types";
+type FormBuilderField<T> = (Omit<Field<T>, "value" | "update"> & {
+    element: string;
+    rows?: number;
+    placeholder?: string;
+    options?: Option[];
+})[][];
+type Props<T> = FormSection<T> & {
+    styles?: {
+        submit?: string;
+        cancel?: string;
+    };
+    fields: FormBuilderField<T>;
+    validator: ZodTypeAny;
+    submit: {
+        label?: string;
+        icon?: React.ReactNode;
+        action: (data: T) => void;
+    };
+};
+export declare function FormBuilder<T>({ fields, validator, data, styles, update, submit, clear }: Props<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/form/index.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "@bouko/style";
+import CheckCircle from "../../assets/icons/check-circle.svg";
+import Spinner from "../../assets/icons/spinner.svg";
+import XCircle from "../../assets/icons/x-circle.svg";
+export * from "./functions";
+export * from "./types";
+import { RowBox } from "../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";
+export function FormBuilder({ fields, validator, data, styles, update, submit, clear }) {
+    const isValid = validator.safeParse(data).success;
+    const [isLoading, setLoading] = useState(false);
+    const handleSubmit = async () => {
+        setLoading(true);
+        await submit.action(data);
+        setLoading(false);
+    };
+    return (_jsxs("div", { className: "flex flex-col w-full gap-4", children: [fields.map((row, i) => (_jsx(RowBox, { style: "w-full gap-5 overflow-hidden", children: row.map(({ element, id, rows, label, placeholder, options, required, note }) => {
+                    if (element === "input")
+                        return (_jsx(Input, { id: id, styles: { container: "flex-1" }, label: label, placeholder: placeholder, value: data[id], update: update, 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, children: [_jsx(Spinner, { className: isLoading ? "animate-spin" : "hidden" }), _jsx("div", { className: isLoading ? "hidden" : "", children: submit.icon || _jsx(CheckCircle, {}) }), submit.label || "Submit"] }), _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/types.d.ts

@@ -0,0 +1,28 @@
+import type { ReactNode, Dispatch, SetStateAction } from "react";
+export type SetState<T> = Dispatch<SetStateAction<T>>;
+export type FormSection<T> = {
+    data: T;
+    update: SetState<T>;
+    clear: () => void;
+};
+export type Field<T, K = string> = {
+    id: string;
+    label?: string;
+    style?: string;
+    value?: K;
+    update: SetState<T>;
+    required?: 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;
+};

package/dist/components/form/types.js

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

package/dist/components/index.d.ts

@@ -1,3 +1,4 @@
 export { default as Heading, HeadingProps } from "./layout/heading";
 export { default as Separator } from "./layout/separator";
 export * from "./list";
+export * from "./form";

package/dist/components/index.js

@@ -1,3 +1,4 @@
 export { default as Heading } from "./layout/heading";
 export { default as Separator } from "./layout/separator";
 export * from "./list";
+export * from "./form";

package/dist/components/multiple-choice.d.ts

@@ -1,2 +1,2 @@
-import { type OptionField } from "@bouko/form";
+import { type OptionField } from "./form";
 export default function MultipleChoice<T>({ id, label, options, style, value, update, required }: OptionField<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/multiple-choice.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Field from "./field";
-import { setField } from "@bouko/form";
+import { setField } from "./form";
 import { cn } from "@bouko/style";
 export default function MultipleChoice({ id, label, options, style, value, update, required = true }) {
     return (_jsx(Field, { style: style, label: label, required: required, children: _jsx("div", { className: styles.options, children: options.map((x, i) => (_jsxs("div", { className: styles.item, children: [_jsx(Dot, { ...x, active: x.id === value, select: () => setField(update, id, x.id) }), x.label] }, i))) }) }));

package/dist/components/select.d.ts

@@ -1,4 +1,4 @@
-import { type OptionField } from "@bouko/form";
+import { type OptionField } from "./form";
 type Props<T> = OptionField<T> & {
     placeholder?: string;
 };

package/dist/components/select.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { AnimatePresence, motion } from "framer-motion";
 import Chevron from "../assets/icons/chevron.svg";
-import { setField } from "@bouko/form";
+import { setField } from "./form";
 import { cn } from "@bouko/style";
 export default function Select({ id, style, label, required = true, value, options, update, note }) {
     const [isOpen, setOpen] = useState(false);

package/dist/core/types.d.ts

@@ -1,21 +1,3 @@
-import type { Dispatch, SetStateAction } from "react";
-export type Field = {
-    label?: string;
-    style?: string;
-    value?: string;
-    update: Dispatch<SetStateAction<string>>;
-    required?: boolean;
-    note?: string;
-};
-export type Option = {
-    id: string;
-    label?: string;
-    active?: boolean;
-    select?: () => void;
-};
-export type OptionField = Field & {
-    options: Option[];
-};
 export type Attachment = {
     filename: string;
     mimetype: string;

package/package.json

@@ -1,7 +1,7 @@
 {
 
   "name": "@bouko/react",
-  "version": "1.7.5",
+  "version": "1.7.7",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",

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

@@ -1,6 +0,0 @@
-type Props = {
-    placeholder?: string;
-    action: (query: string) => void;
-};
-export default function SearchBar({ placeholder, action }: Props): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/search/index.js

@@ -1,12 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { RowBox } from "../flex";
-import { Button } from "../button";
-export default function SearchBar({ placeholder, action }) {
-    const [query, search] = useState("");
-    return (_jsxs(RowBox, { style: styles.container, children: [_jsxs("div", { className: "relative grow", children: [_jsx("input", { className: "w-full outline-none lowercase text-lg placeholder-slate-500 tracking-wide", placeholder: placeholder, value: query, onChange: (e) => search(e.target.value), onKeyUp: (e) => e.key === "Enter" ? action(query) : null }), _jsx("div", { className: "absolute top-0 right-0 w-12 h-full bg-gradient-to-l from-slate-950" })] }), _jsx(Button, { size: "sm", style: "gap-[0.4rem] font-extrabold py-1 px-3 font-mono", onClick: () => action(query), children: "GO" })] }));
-}
-const styles = {
-    container: "items-center gap-6 w-xl pl-5 pr-4 py-3 bg-slate-950 border border-border rounded-md"
-};