@bouko/react 2.1.4 → 2.1.6

package/dist/components/badge.d.ts

@@ -0,0 +1,5 @@
+import type { ReactNode } from "react";
+export default function Badge({ style, children }: {
+    style?: string;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/badge.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function Badge({ style, children }) {
+    return (_jsx("span", { className: "w-min px-3 py-1 bg-accent/20 border border-accent-dark rounded-full text-xs text-accent-dark font-semibold", children: children }));
+}

package/dist/components/flex.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+type Props = Position & {
+    style?: string;
+    children: ReactNode;
+};
+type Position = {
+    center?: boolean;
+    centerX?: boolean;
+    centerY?: boolean;
+};
+export declare function ColumnBox({ style, center, centerX, centerY, children }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function RowBox({ style, children }: {
+    style?: string;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/flex.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@bouko/style";
+export function ColumnBox({ style, center, centerX, centerY, children }) {
+    return (_jsx("div", { className: cn("flex flex-col", center && "items-center justify-center", centerX && "items-center", centerY && "justify-center", style), children: children }));
+}
+export function RowBox({ style, children }) {
+    return (_jsx("div", { className: cn("flex", style), children: children }));
+}

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

@@ -2,7 +2,7 @@ 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"> & {
+type FormBuilderField<T = unknown> = (Omit<Field<T>, "value" | "update"> & {
     element: string;
     rows?: number;
     placeholder?: string;
@@ -14,6 +14,7 @@ type Props<T> = FormSection<T> & {
         submit?: string;
         cancel?: string;
     };
+    id?: string;
     fields: FormBuilderField<T>;
     validator: ZodTypeAny;
     sound?: string;
@@ -25,4 +26,4 @@ type Props<T> = FormSection<T> & {
     };
 };
 export declare function useSound(filename?: string): import("use-sound/dist/types").PlayFunction | undefined;
-export declare function FormBuilder<T>({ fields, validator, data, styles, update, setField, submit, sound, clear }: Props<T>): import("react/jsx-runtime").JSX.Element;
+export declare function FormBuilder<T>({ fields, validator, id, data, styles, update, setField, submit, sound, clear }: Props<T>): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/components/form/index.js

@@ -15,12 +15,14 @@ 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 function FormBuilder({ fields, validator, data, styles, update, setField, submit, sound, clear }) {
+export async function FormBuilder({ fields, validator, id, data, styles, update, setField, submit, sound, clear }) {
+    const fields2 = await loadJson("forms/" + id);
     const isValid = validator.safeParse(data).success;
     const [isLoading, setLoading] = useState(false);
     const play = useSound(sound);
@@ -29,7 +31,7 @@ export function FormBuilder({ fields, validator, data, styles, update, setField,
         await submit.action(data);
         setLoading(false);
     };
-    return (_jsxs("div", { className: cn("flex flex-col w-full gap-4", styles?.container), children: [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 }) => {
+    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")

package/dist/components/form/test-next.d.ts

@@ -0,0 +1 @@
+export declare function loadJson<T>(name: string): Promise<T>;

package/dist/components/form/test-next.js

@@ -0,0 +1,6 @@
+"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);
+}

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

@@ -3,7 +3,7 @@ export type SetState<T> = Dispatch<SetStateAction<T>>;
 export type FormSection<T> = {
     data: T;
     update: SetState<T>;
-    setField: (x: keyof T, value: unknown) => void;
+    setField: (x: string, value: unknown) => void;
     clear: () => void;
 };
 export type Field<T, K = string> = {

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

@@ -0,0 +1,29 @@
+import { ReactNode } from "react";
+type Props = {
+    badge?: string;
+    title: ReactNode;
+    subtitle?: ReactNode;
+    style?: Styles;
+};
+type Styles = {
+    container?: string;
+    badge?: string;
+    title?: string;
+    subtitle?: string;
+};
+/**
+ * Text heading with badge, title, subtitle.
+ *
+ * @param {string} badge - Little note above the title (optional).
+ * @param {ReactNode} title - Main title content.
+ * @param {ReactNode} subtitle - Subtitle content (optional).
+ * @param {Styles} style - Additional styles (optional).
+**/
+export default function Heading({ badge, title, subtitle, style }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+/**
+ * Problems
+ *
+ * - Perfect `Badge`
+ * - Long `subtitle` style
+**/ 

package/dist/components/heading/normal.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { mergeStyles } from "@bouko/style";
+import { RowBox, ColumnBox } from "../layout/flex";
+import { Badge } from "../text/badge";
+/**
+ * Text heading with badge, title, subtitle.
+ *
+ * @param {string} badge - Little note above the title (optional).
+ * @param {ReactNode} title - Main title content.
+ * @param {ReactNode} subtitle - Subtitle content (optional).
+ * @param {Styles} style - Additional styles (optional).
+**/
+export default function Heading({ badge, title, subtitle, style = {} }) {
+    const styles = mergeStyles(base, style);
+    return (_jsxs(ColumnBox, { style: styles.container, children: [_jsx(Badge, { style: styles.badge, children: badge }), _jsx(RowBox, { style: styles.title, children: title }), _jsx(RowBox, { style: styles.subtitle, children: subtitle })] }));
+}
+const base = {
+    container: "items-center",
+    badge: "mb-2",
+    title: "items-center gap-2 text-xl sm:text-2xl 2xl:text-3xl font-bold text-primary",
+    subtitle: "items-center gap-2 max-sm:text-sm 2xl:text-lg text-center text-primary-light dark:text-primary-dark"
+};

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

@@ -0,0 +1 @@
+export default function PageHeading(): import("react/jsx-runtime").JSX.Element;

package/dist/components/heading/page.js

@@ -0,0 +1,5 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+// bring from unvault
+export default function PageHeading() {
+    return (_jsx(_Fragment, {}));
+}

package/dist/components/index.d.ts

@@ -1,6 +1,7 @@
-export { default as Heading } from "./layout/heading";
 export { default as Separator } from "./layout/separator";
 export { default as FadeBox } from "./layout/fade";
+export { default as Heading } from "./heading/normal";
+export { default as PageHeading } from "./heading/page";
 export * from "./layout/flex";
 export { default as Badge } from "./text/badge";
 export { default as Dropdown } from "./dropdown/normal";

package/dist/components/index.js

@@ -1,6 +1,7 @@
-export { default as Heading } from "./layout/heading";
 export { default as Separator } from "./layout/separator";
 export { default as FadeBox } from "./layout/fade";
+export { default as Heading } from "./heading/normal";
+export { default as PageHeading } from "./heading/page";
 export * from "./layout/flex";
 export { default as Badge } from "./text/badge";
 export { default as Dropdown } from "./dropdown/normal";

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

@@ -24,6 +24,8 @@ export {};
 /**
  * Problems
  *
+ * - Perfect `mergeStyles`
+ * - Perfect `RowBox`
+ * - Perfect `ColumnBox`
  * - Perfect `Badge`
- * - Long `subtitle` style
 **/ 

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 { Badge } from "../text/badge";
+import { default as Badge } from "../text/badge";
 /**
  * Text heading with badge, title, subtitle.
  *
@@ -18,5 +18,5 @@ const base = {
     container: "items-center",
     badge: "mb-2",
     title: "items-center gap-2 text-xl sm:text-2xl 2xl:text-3xl font-bold text-primary",
-    subtitle: "items-center gap-2 max-sm:text-sm 2xl:text-lg text-center text-primary-light dark:text-primary-dark"
+    subtitle: "items-center gap-2 max-sm:text-sm 2xl:text-lg text-primary-light dark:text-primary-dark"
 };

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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,12 @@
+"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"
+};

package/dist/core/functions.d.ts

@@ -1,4 +1,8 @@
-export declare const getFilesData: (files: File[]) => Promise<unknown[]>;
+export declare const getFilesData: (files: File[]) => Promise<{
+    filename: string;
+    mimetype: string;
+    data?: string;
+}[]>;
 export declare const getFileData: (file: File) => Promise<{
     filename: string;
     mimetype: string;
@@ -6,5 +10,4 @@ export declare const getFileData: (file: File) => Promise<{
 }>;
 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;
 export declare function getBase64(image: string): Promise<string>;

package/dist/core/functions.js

@@ -4,7 +4,7 @@ export const getFilesData = (files) => Promise.all(files.map((file) => {
         const reader = new FileReader();
         reader.onload = () => {
             const base64 = reader.result?.toString().split(",")[1]; // Remove data prefix
-            resolve({
+            return resolve({
                 filename: file.name,
                 mimetype: file.type,
                 data: base64,
@@ -57,12 +57,6 @@ export const getAudioDuration = (file) => {
         });
     });
 };
-export const getEnv = (key) => {
-    const value = process.env[key];
-    if (!value)
-        throw new Error(`Missing required env: ${key}`);
-    return value;
-};
 export async function getBase64(image) {
     if (image.startsWith("data:")) {
         return image; // already a base64 data URL

package/dist/hooks/color.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    variable: string;
+    color: string;
+    original: string;
+};
+export default function useColor({ variable, color, original }: Props): void;
+export {};

package/dist/hooks/color.js

@@ -0,0 +1,8 @@
+"use client";
+import { useEffect } from "react";
+export default function useColor({ variable, color, original }) {
+    useEffect(() => {
+        document.documentElement.style.setProperty(`--${variable}`, color);
+        return () => document.documentElement.style.setProperty(`--${variable}`, original);
+    }, []);
+}

package/package.json

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