@rovula/ui 0.1.40 → 0.1.42

package/dist/components/AutoComplete/AutoComplete.stories.js

@@ -0,0 +1,212 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import * as yup from "yup";
+import AutoComplete from "./AutoComplete";
+import Avatar from "../Avatar/Avatar";
+import Text from "../Text/Text";
+import Button from "../Button/Button";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogBody, DialogFooter, DialogTrigger, DialogClose, } from "../Dialog/Dialog";
+import { Form } from "../Form/Form";
+import { Field } from "../Form/Field";
+// ---------------------------------------------------------------------------
+// Meta
+// ---------------------------------------------------------------------------
+const meta = {
+    title: "Components/AutoComplete",
+    component: AutoComplete,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "fullscreen",
+    },
+    decorators: [
+        (Story) => (_jsx("div", { className: "p-8 bg-bg-bg1", children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+// ---------------------------------------------------------------------------
+// Shared fixtures
+// ---------------------------------------------------------------------------
+const fruits = [
+    { value: "apple", label: "Apple" },
+    { value: "banana", label: "Banana" },
+    { value: "blueberry", label: "Blueberry" },
+    { value: "cherry", label: "Cherry" },
+    { value: "grape", label: "Grape" },
+    { value: "mango", label: "Mango" },
+    { value: "orange", label: "Orange" },
+    { value: "peach", label: "Peach" },
+    { value: "pineapple", label: "Pineapple" },
+    { value: "strawberry", label: "Strawberry" },
+];
+// ---------------------------------------------------------------------------
+// Default — basic client-side filter
+// ---------------------------------------------------------------------------
+export const Default = {
+    render: () => {
+        const [value, setValue] = useState("");
+        const filtered = fruits.filter((f) => f.label.toLowerCase().includes(value.toLowerCase()));
+        return (_jsx(AutoComplete, { label: "Fruit", value: value, options: filtered, onChange: setValue, onSearch: setValue, noOptionsText: "No fruit found", fullwidth: true, "data-testid": "autocomplete-default" }));
+    },
+};
+// ---------------------------------------------------------------------------
+// showNoOptions — display "no results" message when empty (like MUI)
+// ---------------------------------------------------------------------------
+export const ShowNoOptionsMessage = {
+    name: "Show No Options Message",
+    render: () => {
+        const [value, setValue] = useState("");
+        const filtered = fruits.filter((f) => f.label.toLowerCase().includes(value.toLowerCase()));
+        return (_jsxs("div", { className: "flex flex-col gap-6 w-full", children: [_jsxs("div", { children: [_jsx(Text, { variant: "small4", className: "text-text-g-contrast-medium mb-2", children: "showNoOptions=false (default) \u2014 popover hides when empty" }), _jsx(AutoComplete, { label: "Fruit (no message)", value: value, options: filtered, onChange: setValue, onSearch: setValue, showNoOptions: false, noOptionsText: "No fruit found", fullwidth: true })] }), _jsxs("div", { children: [_jsx(Text, { variant: "small4", className: "text-text-g-contrast-medium mb-2", children: "showNoOptions=true \u2014 shows \"No fruit found\" when no match" }), _jsx(AutoComplete, { label: "Fruit (with message)", value: value, options: filtered, onChange: setValue, onSearch: setValue, showNoOptions: true, noOptionsText: "No fruit found", fullwidth: true })] })] }));
+    },
+};
+// ---------------------------------------------------------------------------
+// FreeSolo — typed value is committed even without selecting from list
+// ---------------------------------------------------------------------------
+export const FreeSolo = {
+    name: "Free Solo (typed value always committed)",
+    render: () => {
+        const [value, setValue] = useState("");
+        const [committed, setCommitted] = useState("");
+        const filtered = fruits.filter((f) => f.label.toLowerCase().includes(value.toLowerCase()));
+        return (_jsxs("div", { className: "flex flex-col gap-4 w-full", children: [_jsx(AutoComplete, { label: "Email or name", value: value, options: filtered, onChange: (v) => {
+                        setValue(v);
+                        setCommitted(v);
+                    }, onSearch: setValue, showNoOptions: true, noOptionsText: "No match \u2014 your typed value will be used", fullwidth: true }), _jsxs(Text, { variant: "small2", className: "text-text-g-contrast-medium", children: ["Committed value: ", _jsx("strong", { children: committed || "—" })] })] }));
+    },
+};
+// ---------------------------------------------------------------------------
+// Async — simulates server search with debounce
+// ---------------------------------------------------------------------------
+const allUsers = [
+    { value: "alice@co.com", label: "alice@co.com", name: "Alice" },
+    { value: "bob@co.com", label: "bob@co.com", name: "Bob" },
+    { value: "charlie@co.com", label: "charlie@co.com", name: "Charlie" },
+    { value: "diana@co.com", label: "diana@co.com", name: "Diana" },
+];
+const AsyncAutoComplete = () => {
+    const [value, setValue] = useState("");
+    const [options, setOptions] = useState(allUsers);
+    const [loading, setLoading] = useState(false);
+    const handleSearch = (query) => {
+        setLoading(true);
+        setTimeout(() => {
+            setOptions(query
+                ? allUsers.filter((u) => u.name.toLowerCase().includes(query.toLowerCase()) ||
+                    u.value.toLowerCase().includes(query.toLowerCase()))
+                : allUsers);
+            setLoading(false);
+        }, 600);
+    };
+    return (_jsx(AutoComplete, { label: "Search user", value: value, options: options, loading: loading, onChange: setValue, onSearch: handleSearch, onSelect: (option) => setValue(option.value), filterOptions: (x) => x, showNoOptions: true, noOptionsText: "No users found", renderOption: (option) => (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Avatar, { type: "text", text: option.name, className: "size-7 shrink-0 text-xs" }), _jsxs("div", { className: "flex flex-col min-w-0", children: [_jsx(Text, { variant: "subtitle4", className: "truncate", children: option.name }), _jsx(Text, { variant: "small2", className: "text-text-g-contrast-medium truncate", children: option.value })] })] })), fullwidth: true, "data-testid": "autocomplete-async" }));
+};
+export const Async = {
+    name: "Async Search (simulated API)",
+    render: () => _jsx(AsyncAutoComplete, {}),
+};
+const inviteSchema = yup.object({
+    email: yup
+        .string()
+        .email("Invalid email format")
+        .required("Email is required"),
+    assignee: yup.string().required("Please select an assignee"),
+});
+const FormIntegrationDemo = () => {
+    const [submitted, setSubmitted] = useState(null);
+    const [assigneeQuery, setAssigneeQuery] = useState("");
+    const assigneeOptions = allUsers
+        .filter((u) => !assigneeQuery ||
+        u.name.toLowerCase().includes(assigneeQuery.toLowerCase()) ||
+        u.value.toLowerCase().includes(assigneeQuery.toLowerCase()))
+        .map((u) => ({ value: u.value, label: u.name }));
+    return (_jsxs("div", { className: "flex flex-col gap-4 w-full max-w-sm", children: [_jsxs(Form, { className: "flex flex-col gap-4", defaultValues: { email: "", assignee: "" }, validationSchema: inviteSchema, mode: "onBlur", onSubmit: (values) => setSubmitted(values), children: [_jsx(Field, { name: "email", component: AutoComplete, componentProps: {
+                            label: "Email",
+                            placeholder: "Search by email",
+                            options: allUsers
+                                .filter((u) => !assigneeQuery || u.value.includes(assigneeQuery))
+                                .map((u) => ({ value: u.value, label: u.value })),
+                            onSearch: setAssigneeQuery,
+                            showNoOptions: true,
+                            noOptionsText: "No matching email",
+                            required: true,
+                            fullwidth: true,
+                        } }), _jsx(Field, { name: "assignee", component: AutoComplete, componentProps: {
+                            label: "Assignee",
+                            placeholder: "Search by name",
+                            options: assigneeOptions,
+                            onSearch: setAssigneeQuery,
+                            showNoOptions: true,
+                            noOptionsText: "No users found",
+                            required: true,
+                            fullwidth: true,
+                        } }), _jsx(Button, { type: "submit", fullwidth: true, children: "Submit" })] }), submitted && (_jsxs("div", { className: "mt-2 p-3 rounded-md bg-bg-bg2 typography-small2 text-text-g-contrast-medium", children: ["Submitted: ", _jsx("strong", { children: JSON.stringify(submitted) })] }))] }));
+};
+export const WithFormValidation = {
+    name: "Form — react-hook-form + yup + Field",
+    render: () => _jsx(FormIntegrationDemo, {}),
+};
+// ---------------------------------------------------------------------------
+// Inside Dialog — portal + overflow escape
+// ---------------------------------------------------------------------------
+const dialogAssignees = allUsers.map((u) => ({
+    value: u.value,
+    label: u.name,
+}));
+const AutoCompleteInDialogDemo = () => {
+    const [query, setQuery] = useState("");
+    const [value, setValue] = useState("");
+    const options = dialogAssignees.filter((o) => !query ||
+        o.label.toLowerCase().includes(query.toLowerCase()) ||
+        o.value.toLowerCase().includes(query.toLowerCase()));
+    return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Open Dialog" }) }), _jsxs(DialogContent, { showCloseButton: true, children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Assign Task" }), _jsx(DialogDescription, { children: "AutoComplete inside a Dialog \u2014 popover escapes overflow correctly." })] }), _jsx(DialogBody, { className: "gap-4 py-2", children: _jsx(AutoComplete, { label: "Assignee", placeholder: "Search by name or email", value: value, options: options, onChange: setValue, onSearch: setQuery, onSelect: (opt) => setValue(opt.value), filterOptions: (x) => x, showNoOptions: true, noOptionsText: "No users found", portal: false, required: true, fullwidth: true }) }), _jsxs(DialogFooter, { children: [_jsx(DialogClose, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Cancel" }) }), _jsx(Button, { disabled: !value, children: "Confirm" })] })] })] }));
+};
+export const InsideDialog = {
+    name: "Inside Dialog",
+    render: () => _jsx(AutoCompleteInDialogDemo, {}),
+};
+// ---------------------------------------------------------------------------
+// Sizes
+// ---------------------------------------------------------------------------
+export const Sizes = {
+    render: () => {
+        const [sm, setSm] = useState("");
+        const [md, setMd] = useState("");
+        const [lg, setLg] = useState("");
+        const getOptions = (v) => fruits.filter((f) => f.label.toLowerCase().includes(v.toLowerCase()));
+        return (_jsx("div", { className: "flex flex-col gap-6 w-full", children: [
+                { size: "sm", value: sm, onChange: setSm },
+                { size: "md", value: md, onChange: setMd },
+                { size: "lg", value: lg, onChange: setLg },
+            ].map(({ size, value, onChange }) => (_jsx(AutoComplete, { label: `Size: ${size}`, size: size, value: value, options: getOptions(value), onChange: onChange, onSearch: onChange, noOptionsText: "No fruit found", fullwidth: true }, size))) }));
+    },
+};
+// ---------------------------------------------------------------------------
+// States — error, disabled
+// ---------------------------------------------------------------------------
+export const States = {
+    render: () => (_jsxs("div", { className: "flex flex-col gap-6 w-full", children: [_jsx(AutoComplete, { label: "Error state", value: "", options: fruits, error: true, errorMessage: "Please enter a valid email", fullwidth: true }), _jsx(AutoComplete, { label: "Disabled state", value: "locked@example.com", options: fruits, disabled: true, fullwidth: true })] })),
+};
+// ---------------------------------------------------------------------------
+// Loading state
+// ---------------------------------------------------------------------------
+export const LoadingState = {
+    name: "Loading State",
+    render: () => {
+        const [value, setValue] = useState("j");
+        return (_jsx(AutoComplete, { label: "Searching\u2026", value: value, options: [], loading: true, onChange: setValue, noOptionsText: "No results", fullwidth: true }));
+    },
+};
+// ---------------------------------------------------------------------------
+// Keyboard navigation
+// ---------------------------------------------------------------------------
+export const KeyboardNavigation = {
+    name: "Keyboard Navigation (ArrowUp/Down, Enter, Escape)",
+    render: () => {
+        const [value, setValue] = useState("");
+        const [selected, setSelected] = useState(null);
+        const filtered = fruits.filter((f) => f.label.toLowerCase().includes(value.toLowerCase()));
+        return (_jsxs("div", { className: "flex flex-col gap-4 w-full", children: [_jsx(AutoComplete, { label: "Pick a fruit (keyboard)", value: value, options: filtered, onChange: setValue, onSearch: setValue, onSelect: (opt) => {
+                        setValue(opt.label);
+                        setSelected(opt);
+                    }, noOptionsText: "No fruit found", fullwidth: true }), selected && (_jsxs(Text, { variant: "small2", className: "text-text-g-contrast-medium", children: ["Selected: ", _jsx("strong", { children: selected.label })] }))] }));
+    },
+};

package/dist/components/AutoComplete/index.js

@@ -0,0 +1 @@
+export { default } from "./AutoComplete";

package/dist/components/Dialog/Dialog.js

@@ -26,7 +26,11 @@ const DialogOverlay = React.forwardRef((_a, ref) => {
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 const DialogContent = React.forwardRef((_a, ref) => {
     var { className, children, showCloseButton = false, closeButtonClassName } = _a, props = __rest(_a, ["className", "children", "showCloseButton", "closeButtonClassName"]);
-    return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, Object.assign({ ref: ref, className: cn("fixed left-[50%] top-[50%] z-50 flex w-[calc(100%-32px)] max-w-[650px] translate-x-[-50%] translate-y-[-50%] flex-col gap-6 rounded-md bg-modal-surface p-8 text-text-g-contrast-medium shadow-[0px_12px_24px_-4px_rgba(0,0,0,0.12)] duration-200 focus:outline-none focus-visible:outline-none outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]", className) }, props, { onCloseAutoFocus: (event) => {
+    return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, Object.assign({ ref: ref, className: cn("fixed left-[50%] top-[50%] z-50 flex w-[calc(100%-32px)] max-w-[650px] translate-x-[-50%] translate-y-[-50%] flex-col gap-6 rounded-md bg-modal-surface p-8 text-text-g-contrast-medium shadow-[0px_12px_24px_-4px_rgba(0,0,0,0.12)] duration-200 focus:outline-none focus-visible:outline-none outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]", className) }, props, { onOpenAutoFocus: (event) => {
+                    var _a;
+                    event.preventDefault();
+                    (_a = props === null || props === void 0 ? void 0 : props.onOpenAutoFocus) === null || _a === void 0 ? void 0 : _a.call(props, event);
+                }, onCloseAutoFocus: (event) => {
                     var _a;
                     event.preventDefault();
                     document.body.style.pointerEvents = "auto";

package/dist/components/TextInput/TextInput.js

@@ -118,7 +118,8 @@ export const TextInput = forwardRef((_a, ref) => {
     const displayValue = format && typeof props.value === "string"
         ? format(props.value)
         : props.value;
-    const handleClearInput = useCallback(() => {
+    const handleClearInput = useCallback((e) => {
+        e.preventDefault();
         if (inputRef.current) {
             inputRef.current.value = "";
             if (props.onChange) {

package/dist/esm/bundle.css

@@ -1307,6 +1307,9 @@ input[type=number] {
 .max-w-md{
   max-width: 28rem;
 }
+.max-w-sm{
+  max-width: 24rem;
+}
 .flex-1{
   flex: 1 1 0%;
 }