@rovula/ui 0.1.41 → 0.1.42

package/src/components/AutoComplete/AutoComplete.stories.tsx

@@ -0,0 +1,525 @@
+import React, { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import * as yup from "yup";
+import AutoComplete, { type AutoCompleteOption } 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, useControlledForm } from "../Form/Form";
+import { Field } from "../Form/Field";
+
+// ---------------------------------------------------------------------------
+// Meta
+// ---------------------------------------------------------------------------
+
+const meta = {
+  title: "Components/AutoComplete",
+  component: AutoComplete,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <div className="p-8 bg-bg-bg1">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof AutoComplete>;
+
+export default meta;
+
+// ---------------------------------------------------------------------------
+// Shared fixtures
+// ---------------------------------------------------------------------------
+
+const fruits: AutoCompleteOption[] = [
+  { 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: StoryObj<typeof AutoComplete> = {
+  render: () => {
+    const [value, setValue] = useState("");
+    const filtered = fruits.filter((f) =>
+      f.label.toLowerCase().includes(value.toLowerCase()),
+    );
+
+    return (
+      <AutoComplete
+        label="Fruit"
+        value={value}
+        options={filtered}
+        onChange={setValue}
+        onSearch={setValue}
+        noOptionsText="No fruit found"
+        fullwidth
+        data-testid="autocomplete-default"
+      />
+    );
+  },
+};
+
+// ---------------------------------------------------------------------------
+// showNoOptions — display "no results" message when empty (like MUI)
+// ---------------------------------------------------------------------------
+
+export const ShowNoOptionsMessage: StoryObj = {
+  name: "Show No Options Message",
+  render: () => {
+    const [value, setValue] = useState("");
+    const filtered = fruits.filter((f) =>
+      f.label.toLowerCase().includes(value.toLowerCase()),
+    );
+
+    return (
+      <div className="flex flex-col gap-6 w-full">
+        <div>
+          <Text variant="small4" className="text-text-g-contrast-medium mb-2">
+            showNoOptions=false (default) — popover hides when empty
+          </Text>
+          <AutoComplete
+            label="Fruit (no message)"
+            value={value}
+            options={filtered}
+            onChange={setValue}
+            onSearch={setValue}
+            showNoOptions={false}
+            noOptionsText="No fruit found"
+            fullwidth
+          />
+        </div>
+        <div>
+          <Text variant="small4" className="text-text-g-contrast-medium mb-2">
+            showNoOptions=true — shows "No fruit found" when no match
+          </Text>
+          <AutoComplete
+            label="Fruit (with message)"
+            value={value}
+            options={filtered}
+            onChange={setValue}
+            onSearch={setValue}
+            showNoOptions
+            noOptionsText="No fruit found"
+            fullwidth
+          />
+        </div>
+      </div>
+    );
+  },
+};
+
+// ---------------------------------------------------------------------------
+// FreeSolo — typed value is committed even without selecting from list
+// ---------------------------------------------------------------------------
+
+export const FreeSolo: StoryObj = {
+  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 (
+      <div className="flex flex-col gap-4 w-full">
+        <AutoComplete
+          label="Email or name"
+          value={value}
+          options={filtered}
+          onChange={(v) => {
+            setValue(v);
+            setCommitted(v);
+          }}
+          onSearch={setValue}
+          showNoOptions
+          noOptionsText="No match — your typed value will be used"
+          fullwidth
+        />
+        <Text variant="small2" className="text-text-g-contrast-medium">
+          Committed value: <strong>{committed || "—"}</strong>
+        </Text>
+      </div>
+    );
+  },
+};
+
+// ---------------------------------------------------------------------------
+// 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" },
+];
+
+type UserOption = AutoCompleteOption & { name: string };
+
+const AsyncAutoComplete = () => {
+  const [value, setValue] = useState("");
+  const [options, setOptions] = useState<UserOption[]>(allUsers);
+  const [loading, setLoading] = useState(false);
+
+  const handleSearch = (query: string) => {
+    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 (
+    <AutoComplete<UserOption>
+      label="Search user"
+      value={value}
+      options={options}
+      loading={loading}
+      onChange={setValue}
+      onSearch={handleSearch}
+      onSelect={(option) => setValue(option.value)}
+      filterOptions={(x) => x}
+      showNoOptions
+      noOptionsText="No users found"
+      renderOption={(option) => (
+        <div className="flex items-center gap-3">
+          <Avatar
+            type="text"
+            text={option.name}
+            className="size-7 shrink-0 text-xs"
+          />
+          <div className="flex flex-col min-w-0">
+            <Text variant="subtitle4" className="truncate">
+              {option.name}
+            </Text>
+            <Text
+              variant="small2"
+              className="text-text-g-contrast-medium truncate"
+            >
+              {option.value}
+            </Text>
+          </div>
+        </div>
+      )}
+      fullwidth
+      data-testid="autocomplete-async"
+    />
+  );
+};
+
+export const Async: StoryObj = {
+  name: "Async Search (simulated API)",
+  render: () => <AsyncAutoComplete />,
+};
+
+// ---------------------------------------------------------------------------
+// Form integration — react-hook-form + yup validation + Field
+// ---------------------------------------------------------------------------
+
+type InviteFormValues = {
+  email: string;
+  assignee: string;
+};
+
+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<InviteFormValues | null>(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 (
+    <div className="flex flex-col gap-4 w-full max-w-sm">
+      <Form<InviteFormValues>
+        className="flex flex-col gap-4"
+        defaultValues={{ email: "", assignee: "" }}
+        validationSchema={inviteSchema}
+        mode="onBlur"
+        onSubmit={(values) => setSubmitted(values)}
+      >
+        <Field<InviteFormValues, "email">
+          name="email"
+          component={AutoComplete as React.ComponentType<any>}
+          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,
+          }}
+        />
+        <Field<InviteFormValues, "assignee">
+          name="assignee"
+          component={AutoComplete as React.ComponentType<any>}
+          componentProps={{
+            label: "Assignee",
+            placeholder: "Search by name",
+            options: assigneeOptions,
+            onSearch: setAssigneeQuery,
+            showNoOptions: true,
+            noOptionsText: "No users found",
+            required: true,
+            fullwidth: true,
+          }}
+        />
+        <Button type="submit" fullwidth>
+          Submit
+        </Button>
+      </Form>
+      {submitted && (
+        <div className="mt-2 p-3 rounded-md bg-bg-bg2 typography-small2 text-text-g-contrast-medium">
+          Submitted: <strong>{JSON.stringify(submitted)}</strong>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const WithFormValidation: StoryObj = {
+  name: "Form — react-hook-form + yup + Field",
+  render: () => <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 (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Open Dialog</Button>
+      </DialogTrigger>
+      <DialogContent showCloseButton>
+        <DialogHeader>
+          <DialogTitle>Assign Task</DialogTitle>
+          <DialogDescription>
+            AutoComplete inside a Dialog — popover escapes overflow correctly.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogBody className="gap-4 py-2">
+          <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
+            noOptionsText="No users found"
+            portal={false}
+            required
+            fullwidth
+          />
+        </DialogBody>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DialogClose>
+          <Button disabled={!value}>Confirm</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export const InsideDialog: StoryObj = {
+  name: "Inside Dialog",
+  render: () => <AutoCompleteInDialogDemo />,
+};
+
+// ---------------------------------------------------------------------------
+// Sizes
+// ---------------------------------------------------------------------------
+
+export const Sizes: StoryObj = {
+  render: () => {
+    const [sm, setSm] = useState("");
+    const [md, setMd] = useState("");
+    const [lg, setLg] = useState("");
+
+    const getOptions = (v: string) =>
+      fruits.filter((f) => f.label.toLowerCase().includes(v.toLowerCase()));
+
+    return (
+      <div className="flex flex-col gap-6 w-full">
+        {(
+          [
+            { size: "sm", value: sm, onChange: setSm },
+            { size: "md", value: md, onChange: setMd },
+            { size: "lg", value: lg, onChange: setLg },
+          ] as const
+        ).map(({ size, value, onChange }) => (
+          <AutoComplete
+            key={size}
+            label={`Size: ${size}`}
+            size={size}
+            value={value}
+            options={getOptions(value)}
+            onChange={onChange}
+            onSearch={onChange}
+            noOptionsText="No fruit found"
+            fullwidth
+          />
+        ))}
+      </div>
+    );
+  },
+};
+
+// ---------------------------------------------------------------------------
+// States — error, disabled
+// ---------------------------------------------------------------------------
+
+export const States: StoryObj = {
+  render: () => (
+    <div className="flex flex-col gap-6 w-full">
+      <AutoComplete
+        label="Error state"
+        value=""
+        options={fruits}
+        error
+        errorMessage="Please enter a valid email"
+        fullwidth
+      />
+      <AutoComplete
+        label="Disabled state"
+        value="locked@example.com"
+        options={fruits}
+        disabled
+        fullwidth
+      />
+    </div>
+  ),
+};
+
+// ---------------------------------------------------------------------------
+// Loading state
+// ---------------------------------------------------------------------------
+
+export const LoadingState: StoryObj = {
+  name: "Loading State",
+  render: () => {
+    const [value, setValue] = useState("j");
+    return (
+      <AutoComplete
+        label="Searching…"
+        value={value}
+        options={[]}
+        loading
+        onChange={setValue}
+        noOptionsText="No results"
+        fullwidth
+      />
+    );
+  },
+};
+
+// ---------------------------------------------------------------------------
+// Keyboard navigation
+// ---------------------------------------------------------------------------
+
+export const KeyboardNavigation: StoryObj = {
+  name: "Keyboard Navigation (ArrowUp/Down, Enter, Escape)",
+  render: () => {
+    const [value, setValue] = useState("");
+    const [selected, setSelected] = useState<AutoCompleteOption | null>(null);
+    const filtered = fruits.filter((f) =>
+      f.label.toLowerCase().includes(value.toLowerCase()),
+    );
+
+    return (
+      <div className="flex flex-col gap-4 w-full">
+        <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
+        />
+        {selected && (
+          <Text variant="small2" className="text-text-g-contrast-medium">
+            Selected: <strong>{selected.label}</strong>
+          </Text>
+        )}
+      </div>
+    );
+  },
+};