@cripty2001/utils 0.0.100 → 0.0.101

package/dist/react-ui/button.d.ts

@@ -0,0 +1,6 @@
+export type ButtonProps = {
+    title: string;
+    onClick: () => void | Promise<void>;
+    className?: string;
+};
+export default function Button({ title, onClick, className }: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/react-ui/button.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = Button;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const react_1 = require("react");
+function Button({ title, onClick, className }) {
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)(null);
+    const handleClick = async () => {
+        if (loading)
+            return;
+        setLoading(true);
+        (async () => {
+            const p = onClick();
+            if (p instanceof Promise) {
+                await p;
+            }
+        })()
+            .catch(e => setError(e instanceof Error ? e.message : "Unknown error"))
+            .finally(() => setLoading(false));
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { onClick: handleClick, className: `cursor-pointer ${className}`, children: loading ? (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "w-4 h-4 animate-spin" }) : (0, jsx_runtime_1.jsx)("div", { children: title }) }), error && (0, jsx_runtime_1.jsx)("div", { className: "text-red-500", children: error })] }));
+}

package/dist/react-ui/form.d.ts

@@ -0,0 +1,19 @@
+export type FormComponentPropsInput<Variants extends Record<string, string>> = {
+    label: string;
+    required: boolean;
+    key: string;
+} & ({
+    type: "text" | "email" | "password" | "tel";
+} | {
+    type: "select";
+    options: string[];
+});
+export type FormComponentProps<T extends Record<string, string>, Variants extends Record<string, string>> = {
+    inputs: FormComponentPropsInput<Variants>[];
+    onSubmit: (values: T) => void;
+    submitLabel: string;
+    value: T;
+    setValue: React.Dispatch<React.SetStateAction<T>>;
+    variants: Variants;
+};
+export default function FormComponent<T extends Record<string, string>, Variants extends Record<string, string>>(props: FormComponentProps<T, Variants>): import("react/jsx-runtime").JSX.Element;

package/dist/react-ui/form.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = FormComponent;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const button_1 = __importDefault(require("./button"));
+const input_1 = __importDefault(require("./input"));
+function FormComponent(props) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4", children: [props.inputs.map(input => (() => {
+                const value = props.value[input.key];
+                const setValue = (v) => props.setValue(prev => ({
+                    ...prev,
+                    [input.key]: v
+                }));
+                switch (input.type) {
+                    case "text":
+                    case "email":
+                    case "password":
+                    case "tel":
+                        return (0, jsx_runtime_1.jsx)(input_1.default, { label: input.label, value: value, setValue: setValue, variant: "form", variants: props.variants, children: ({ value, setValue, className }) => ((0, jsx_runtime_1.jsx)("input", { type: input.type, value: value, onChange: (e) => setValue(e.target.value), required: input.required, className: className, placeholder: input.label })) });
+                    case "select":
+                        return (0, jsx_runtime_1.jsx)(input_1.default, { label: input.label, value: value, setValue: setValue, variant: "form", variants: props.variants, required: input.required, validate: (v) => {
+                                if (!input.options.includes(v))
+                                    throw new Error("Invalid option");
+                            }, children: ({ value, setValue, className }) => ((0, jsx_runtime_1.jsx)("select", { value: value, onChange: (e) => setValue(e.target.value), required: input.required, className: className, children: input.options.map(option => ((0, jsx_runtime_1.jsx)("option", { value: option, children: option }, option))) })) });
+                    default:
+                        return (0, jsx_runtime_1.jsx)("div", { className: "text-red-500 bg-white", children: "Unknown input type" });
+                }
+            })()), (0, jsx_runtime_1.jsx)(button_1.default, { title: props.submitLabel, onClick: () => props.onSubmit(props.value) })] }));
+}

package/dist/react-ui/index.d.ts

@@ -0,0 +1,6 @@
+import BaseButton, { type ButtonProps as BaseButtonProps } from './button';
+import BaseForm, { type FormComponentProps as BaseFormProps } from './form';
+import BaseInput, { type InputComponentProps as BaseInputProps } from './input';
+import BaseLoader, { type LoaderProps as BaseLoaderProps } from './loader';
+import BaseTable, { type TableProps as BaseTableProps } from './table';
+export { BaseButton, BaseButtonProps, BaseForm, BaseFormProps, BaseInput, BaseInputProps, BaseLoader, BaseLoaderProps, BaseTable, BaseTableProps };

package/dist/react-ui/index.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BaseTable = exports.BaseLoader = exports.BaseInput = exports.BaseForm = exports.BaseButton = void 0;
+const button_1 = __importDefault(require("./button"));
+exports.BaseButton = button_1.default;
+const form_1 = __importDefault(require("./form"));
+exports.BaseForm = form_1.default;
+const input_1 = __importDefault(require("./input"));
+exports.BaseInput = input_1.default;
+const loader_1 = __importDefault(require("./loader"));
+exports.BaseLoader = loader_1.default;
+const table_1 = __importDefault(require("./table"));
+exports.BaseTable = table_1.default;

package/dist/react-ui/input.d.ts

@@ -0,0 +1,16 @@
+export type InputComponentProps<Variants extends Record<string, string>> = {
+    label?: string;
+    value: string;
+    setValue: (value: string) => void;
+    required?: boolean;
+    children: ({ value, setValue, className }: {
+        value: string;
+        setValue: (value: string) => void;
+        className: string;
+    }) => React.ReactNode;
+    copy?: boolean;
+    variant?: keyof Variants;
+    validate?: (value: string) => void;
+    variants: Variants;
+};
+export default function InputComponent<Variants extends Record<string, string>>(props: InputComponentProps<Variants>): import("react/jsx-runtime").JSX.Element;

package/dist/react-ui/input.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = InputComponent;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("@cripty2001/utils");
+const lucide_react_1 = require("lucide-react");
+const react_1 = require("react");
+function InputComponent(props) {
+    const variant = props.variant ?? "";
+    const baseClassName = props.variants[variant] ?? "";
+    const [error, setError] = (0, react_1.useState)(null);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-row justify-between items-center gap-2", children: [props.label &&
+                        (0, jsx_runtime_1.jsx)("label", { className: "block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300", children: props.label }), props.copy &&
+                        (0, jsx_runtime_1.jsx)(lucide_react_1.CopyIcon, { className: "w-4 h-4 cursor-pointer", onClick: () => (0, utils_1.copyToClipboard)(props.value) })] }), (0, jsx_runtime_1.jsx)("div", { className: "relative", children: props.children({
+                    value: props.value,
+                    setValue: (v) => {
+                        try {
+                            if (props.required && v === "")
+                                throw new Error("Required field is empty");
+                            props.validate?.(v);
+                            props.setValue(v);
+                            setError(null);
+                        }
+                        catch (e) {
+                            setError(e.message);
+                        }
+                    },
+                    className: baseClassName
+                }) }), error &&
+                (0, jsx_runtime_1.jsx)("div", { className: "text-red-500 text-xs", children: error })] }));
+}

package/dist/react-ui/loader.d.ts

@@ -0,0 +1,8 @@
+import type { AppserverData } from "@cripty2001/utils/appserver/client";
+import type { Dispatcher } from "@cripty2001/utils/dispatcher";
+import type React from "react";
+export type LoaderProps<T extends AppserverData> = {
+    data: Dispatcher<unknown, T>;
+    children: (data: T) => React.ReactNode;
+};
+export default function Loader<T extends AppserverData>(props: LoaderProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/react-ui/loader.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = Loader;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_whispr_1 = require("@cripty2001/utils/react-whispr");
+function Loader(props) {
+    const data = (0, react_whispr_1.useWhisprValue)(props.data.data);
+    return ((0, jsx_runtime_1.jsx)("div", { className: "", children: (0, jsx_runtime_1.jsx)(Content, { data: data, children: (data) => props.children(data) }) }));
+}
+function Content({ data, children }) {
+    if (data.loading)
+        return ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center h-screen", children: (0, jsx_runtime_1.jsx)("div", { className: "animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-gray-900 dark:border-white" }) }));
+    if (!data.ok)
+        return (0, jsx_runtime_1.jsx)("div", { className: "text-red-500", children: data.error.message });
+    return children(data.data);
+}

package/dist/react-ui/table.d.ts

@@ -0,0 +1,5 @@
+export type TableProps = {
+    value: (string | React.ReactNode)[][];
+    headers: string[];
+};
+export default function Table({ value, headers }: TableProps): import("react/jsx-runtime").JSX.Element;

package/dist/react-ui/table.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = Table;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function Table({ value, headers }) {
+    if (value.length === 0) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: "text-center py-8 text-gray-600 dark:text-gray-400", children: "No data found" }));
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { className: "bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden", children: (0, jsx_runtime_1.jsx)("div", { className: "overflow-x-auto", children: (0, jsx_runtime_1.jsxs)("table", { className: "w-full", children: [(0, jsx_runtime_1.jsx)("thead", { className: "bg-gray-100 dark:bg-gray-700", children: (0, jsx_runtime_1.jsx)("tr", { children: headers.map((header, index) => ((0, jsx_runtime_1.jsx)("th", { className: "px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider", children: header }, index))) }) }), (0, jsx_runtime_1.jsx)("tbody", { className: "bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700", children: value.map((row, rowIndex) => ((0, jsx_runtime_1.jsx)("tr", { className: "hover:bg-gray-50 dark:hover:bg-gray-700", children: row.map((cell, cellIndex) => ((0, jsx_runtime_1.jsx)("td", { className: `px-6 py-4 whitespace-nowrap text-sm ${cellIndex === 0
+                                    ? "font-medium text-gray-900 dark:text-white"
+                                    : "text-gray-600 dark:text-gray-400"}`, children: cell }, cellIndex))) }, rowIndex))) })] }) }) }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cripty2001/utils",
-  "version": "0.0.100",
+  "version": "0.0.101",
   "description": "Internal Set of utils. If you need them use them, otherwise go to the next package ;)",
   "homepage": "https://github.com/cripty2001/utils#readme",
   "bugs": {
@@ -85,6 +85,10 @@
     "./react": {
       "import": "./dist/react/index.js",
       "types": "./dist/react/index.d.ts"
+    },
+    "./react-ui": {
+      "import": "./dist/react-ui/index.js",
+      "types": "./dist/react-ui/index.d.ts"
     }
   }
 }