@bouko/react 2.0.9 → 2.1.1

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

@@ -3,6 +3,7 @@ export declare const useForm: <T>(init: T) => {
     data: T;
     update: import("react").Dispatch<import("react").SetStateAction<T>>;
     clear: () => void;
+    setField: <T_1>(name: string, value: T_1) => 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

@@ -8,7 +8,8 @@ export const useForm = (init) => {
     return {
         data,
         update: setData,
-        clear: () => setData(initial)
+        clear: () => setData(initial),
+        setField: (name, value) => setField(setData, name, value)
     };
 };
 export const setField = (update, id, value) => update(prev => ({

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

@@ -16,6 +16,7 @@ type Props<T> = FormSection<T> & {
     };
     fields: FormBuilderField<T>;
     validator: ZodTypeAny;
+    sound?: string;
     submit: {
         label?: string;
         icon?: React.ReactNode;
@@ -23,4 +24,5 @@ type Props<T> = FormSection<T> & {
         cancel?: boolean;
     };
 };
-export declare function FormBuilder<T>({ fields, validator, data, styles, update, submit, clear }: Props<T>): import("react/jsx-runtime").JSX.Element;
+export declare function useSound(filename?: string): import("use-sound/dist/types").PlayFunction | undefined;
+export declare function FormBuilder<T>({ fields, validator, data, styles, update, submit, sound, clear }: Props<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/form/index.js

@@ -5,6 +5,7 @@ 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";
+import { default as base } from "use-sound";
 export * from "./functions";
 export * from "./types";
 import { RowBox } from "../layout/flex";
@@ -14,9 +15,15 @@ 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 }) {
+export function useSound(filename) {
+    if (!filename)
+        return;
+    return base(filename)[0];
+}
+export function FormBuilder({ fields, validator, data, styles, update, submit, sound, clear }) {
     const isValid = validator.safeParse(data).success;
     const [isLoading, setLoading] = useState(false);
+    const play = useSound(sound);
     const handleSubmit = async () => {
         setLoading(true);
         await submit.action(data);

package/dist/components/layout/heading.d.ts

@@ -24,8 +24,5 @@ export {};
 /**
  * Problems
  *
- * - Perfect `mergeStyles`
- * - Perfect `RowBox`
- * - Perfect `ColumnBox`
  * - Perfect `Badge`
 **/ 

package/dist/components/layout/heading.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { mergeStyles } from "@bouko/style";
 import { RowBox, ColumnBox } from "./flex";
-import { default as Badge } from "../text/badge";
+import { Badge } from "../text/badge";
 /**
  * Text heading with badge, title, subtitle.
  *

package/dist/components/text/badge.d.ts

@@ -1,8 +1,12 @@
-type Color = "accent" | "orange" | "dark";
-type Props = {
-    style?: string;
-    color?: Color;
-    children?: string;
+import { Component } from "../../core/types";
+type Props = Component & {
+    variant?: "accent" | "background";
+    color?: string;
 };
-export default function Badge({ style, color, children }: Props): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const Badge: ({ style, variant, color, children }: Props) => import("react/jsx-runtime").JSX.Element | undefined;
+export default Badge;
+/**
+ * Problems:
+ *
+ * - Ugly code
+**/ 

package/dist/components/text/badge.js

@@ -1,18 +1,24 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { cn, tv } from "@bouko/style";
-export default function Badge({ style, color, children }) {
-    if (!children)
-        return _jsx(_Fragment, {});
-    return (_jsx("span", { className: cn(styles({ color }), style), children: children }));
-}
+export const Badge = ({ style, variant, color, children }) => {
+    if (children)
+        return (_jsx("span", { className: cn(styles({ variant }), style), style: overrideStyle(color), children: children }));
+};
+const overrideStyle = (color) => {
+    if (color)
+        return {
+            background: color + "50",
+            borderColor: color
+        };
+};
 const styles = tv({
-    base: "w-min px-3 py-1 border rounded-full text-xs font-semibold",
-    defaultVariants: { color: "accent" },
+    base: "w-min px-3 py-1 border rounded-full text-xs font-semibold text-primary",
+    defaultVariants: { variant: "accent" },
     variants: {
-        color: {
-            accent: "bg-accent/20 border-accent-dark text-accent-dark",
-            orange: "bg-orange-400/20 border-orange-500 text-orange-500",
-            dark: "bg-slate-600/20 border-slate-700 text-slate-700"
+        variant: {
+            accent: "bg-accent-light/50 border-accent-light",
+            background: "bg-background-lighter/50 border-background-lighter"
         }
     }
 });
+export default Badge;

package/dist/core/functions.d.ts

@@ -1,4 +1,9 @@
-export declare const getFileData: (files: File[]) => Promise<unknown[]>;
+export declare const getFilesData: (files: File[]) => Promise<unknown[]>;
+export declare const getFileData: (file: File) => Promise<{
+    filename: string;
+    mimetype: string;
+    data?: string;
+}>;
 export declare const bufferToFile: (buffer: Buffer<ArrayBuffer>, name?: string) => Promise<File>;
 export declare const getAudioDuration: (file: File) => Promise<number>;
 export declare const getEnv: (key: string) => string;

package/dist/core/functions.js

@@ -1,5 +1,5 @@
 import { fileTypeFromBuffer } from "file-type";
-export const getFileData = (files) => Promise.all(files.map((file) => {
+export const getFilesData = (files) => Promise.all(files.map((file) => {
     return new Promise((resolve, reject) => {
         const reader = new FileReader();
         reader.onload = () => {
@@ -14,6 +14,19 @@ export const getFileData = (files) => Promise.all(files.map((file) => {
         reader.readAsDataURL(file);
     });
 }));
+export const getFileData = (file) => new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+        const base64 = reader.result?.toString().split(",")[1]; // Remove data prefix
+        return resolve({
+            filename: file.name,
+            mimetype: file.type,
+            data: base64,
+        });
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+});
 async function detectFileExtension(buffer) {
     const type = await fileTypeFromBuffer(buffer);
     if (!type)

package/package.json

@@ -1,7 +1,7 @@
 {
 
   "name": "@bouko/react",
-  "version": "2.0.9",
+  "version": "2.1.1",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",
@@ -20,6 +20,7 @@
   },
 
   "dependencies": {
+    "@bouko/audio": "^0.1.0",
     "@bouko/style": "^0.1.6",
     "clsx": "^2.1.1",
     "file-type": "^21.0.0",