@multiplatform.one/forms 6.0.0

package/src/fields/Combobox/Combobox.stories.tsx

@@ -0,0 +1,284 @@
+import { action } from "@multiplatform.one/storybook";
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { useForm } from "@tanstack/react-form";
+import { useState } from "react";
+import { Text, XStack, YStack } from "tamagui";
+import { Button } from "../../Button";
+import { Form } from "../../Form";
+import { Combobox, type ComboboxOption } from "./index";
+import { authorOptions } from "./authorOptions";
+
+const meta: Meta<typeof Combobox> = {
+  title: "Forms/Combobox",
+  component: Combobox,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A searchable select component with form integration. Use when options are many and users benefit from filtering by typing.",
+      },
+    },
+  },
+  argTypes: {
+    label: {
+      control: "text",
+      description: "Label for the combobox",
+    },
+    placeholder: {
+      control: "text",
+      description: "Placeholder text when no value is selected",
+    },
+    helperText: {
+      control: "text",
+      description: "Helper text displayed below the combobox",
+    },
+    error: {
+      control: "text",
+      description: "Error message to display",
+    },
+    required: {
+      control: "boolean",
+      description: "Whether the combobox is required",
+    },
+    disabled: {
+      control: "boolean",
+      description: "Whether the combobox is disabled",
+    },
+    size: {
+      control: "select",
+      options: ["$2", "$3", "$4"],
+      description: "Size of the combobox",
+    },
+    searchPlaceholder: {
+      control: "text",
+      description: "Placeholder text in the search input",
+    },
+    options: {
+      control: "object",
+      description: "Array of selectable options",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Combobox>;
+
+export const Main: StoryObj<typeof Combobox> = {
+  name: "Main",
+  render: () => {
+    const FormExample = () => {
+      const form = useForm({
+        defaultValues: {
+          author: "",
+          favoriteAuthor: "hemingway",
+        },
+        onSubmit: async ({ value }) => {
+          action("onSubmit")(value);
+        },
+      });
+
+      return (
+        <Form form={form}>
+          <YStack gap="$4" maxWidth={300}>
+            <Combobox
+              label="Author"
+              name="author"
+              options={authorOptions}
+              placeholder="Select an author..."
+              searchPlaceholder="Type to search..."
+              required
+            />
+
+            <Combobox
+              label="Favorite author"
+              name="favoriteAuthor"
+              options={authorOptions}
+              placeholder="Select an author..."
+              searchPlaceholder="Type to search..."
+            />
+
+            <Button action="submit">Submit</Button>
+          </YStack>
+        </Form>
+      );
+    };
+    return <FormExample />;
+  },
+};
+
+export const Standalone: Story = {
+  args: {
+    label: "Author",
+    placeholder: "Select an author",
+    helperText: "Choose an author from the list",
+    options: authorOptions,
+  },
+  render: (args) => <Combobox {...args} />,
+};
+
+export const Basic: Story = {
+  args: {
+    options: authorOptions,
+    placeholder: "Select an author...",
+    searchPlaceholder: "Type to search...",
+  },
+  render: function Render(args) {
+    const [value, setValue] = useState<string | undefined>();
+    return (
+      <YStack gap="$4" maxWidth={300}>
+        <Combobox
+          {...args}
+          value={value}
+          onValueChange={(val) => {
+            setValue(Array.isArray(val) ? val[0] : val);
+            action("onValueChange")(val);
+          }}
+        />
+        {value && <Text color="$colorHover">Selected: {value}</Text>}
+      </YStack>
+    );
+  },
+};
+
+export const WithLabel: Story = {
+  render: function Render() {
+    const [value, setValue] = useState<string | undefined>();
+    return (
+      <YStack gap="$4" maxWidth={300}>
+        <Combobox
+          label="Author"
+          helperText="Select an author from the list"
+          options={authorOptions}
+          value={value}
+          onValueChange={(v) => setValue(Array.isArray(v) ? v[0] : v)}
+          placeholder="Select an author..."
+          searchPlaceholder="Type to search..."
+        />
+      </YStack>
+    );
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    label: "Disabled Combobox",
+    disabled: true,
+    options: authorOptions,
+    placeholder: "Select an author...",
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    label: "Combobox with Error",
+    error: "This field is required",
+    required: true,
+    options: authorOptions,
+    placeholder: "Select an author...",
+  },
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <YStack gap="$4" maxWidth={400}>
+      <Combobox label="Small" size="$2" options={authorOptions} placeholder="Select..." />
+      <Combobox
+        label="Medium (default)"
+        size="$3"
+        options={authorOptions}
+        placeholder="Select..."
+      />
+      <Combobox label="Large" size="$4" options={authorOptions} placeholder="Select..." />
+    </YStack>
+  ),
+};
+
+export const Interactive: Story = {
+  render: () => {
+    const InteractiveExample = () => {
+      const [value, setValue] = useState<string | undefined>();
+      return (
+        <YStack gap="$4" maxWidth={400}>
+          <Combobox
+            label="Pick an author"
+            options={authorOptions}
+            value={value}
+            onValueChange={(v) => setValue(Array.isArray(v) ? v[0] : v)}
+            placeholder="Select an author..."
+          />
+          <Text>Selected: {value || "None"}</Text>
+        </YStack>
+      );
+    };
+    return <InteractiveExample />;
+  },
+};
+
+export const CustomTrigger: StoryObj<typeof Combobox> = {
+  render: () => {
+    const CustomTriggerExample = () => {
+      const [value, setValue] = useState<string | undefined>();
+      return (
+        <YStack gap="$4" maxWidth={300}>
+          <Text fontWeight="bold" color="$colorHover">
+            Author picker with custom trigger:
+          </Text>
+          <XStack gap="$2" alignItems="center">
+            <Combobox
+              options={authorOptions}
+              value={value}
+              onValueChange={(v) => setValue(Array.isArray(v) ? v[0] : v)}
+              searchPlaceholder="Type to search..."
+              popoverWidth={260}
+              trigger={(selected) => (
+                <XStack
+                  gap="$2"
+                  alignItems="center"
+                  paddingHorizontal="$3"
+                  paddingVertical="$2"
+                  backgroundColor="$backgroundHover"
+                  borderRadius="$3"
+                  hoverStyle={{ backgroundColor: "$backgroundPress" }}
+                  pressStyle={{ backgroundColor: "$backgroundFocus" }}
+                  cursor="pointer"
+                >
+                  <Text fontSize="$5">📚</Text>
+                  <Text color="$colorHover">
+                    {(Array.isArray(selected) ? selected[0]?.label : selected?.label) ||
+                      "Pick an author"}
+                  </Text>
+                </XStack>
+              )}
+            />
+          </XStack>
+          {value && <Text color="$colorHover">Selected: {value}</Text>}
+        </YStack>
+      );
+    };
+    return <CustomTriggerExample />;
+  },
+};
+
+export const ManyOptions: StoryObj<typeof Combobox> = {
+  render: function Render() {
+    const [value, setValue] = useState<string | undefined>();
+    const options: ComboboxOption[] = Array.from({ length: 100 }, (_, i) => ({
+      value: `item-${i + 1}`,
+      label: `Item ${i + 1}`,
+      keywords: `option number ${i + 1}`,
+    }));
+    return (
+      <YStack gap="$4" maxWidth={300}>
+        <Combobox
+          label="Pick an item"
+          options={options}
+          value={value}
+          onValueChange={(v) => setValue(Array.isArray(v) ? v[0] : v)}
+          placeholder="Select from 100 items..."
+          searchPlaceholder="Type to filter..."
+          emptyMessage="No matching items."
+        />
+      </YStack>
+    );
+  },
+};

package/src/fields/Combobox/authorOptions.ts

@@ -0,0 +1,133 @@
+import type { ComboboxOption } from "./index";
+
+export const authorOptions: ComboboxOption[] = [
+  { value: "austen", label: "Jane Austen", keywords: "pride prejudice sense sensibility" },
+  { value: "bronte-c", label: "Charlotte Brontë", keywords: "jane eyre" },
+  { value: "bronte-e", label: "Emily Brontë", keywords: "wuthering heights" },
+  { value: "dickens", label: "Charles Dickens", keywords: "oliver twist great expectations" },
+  {
+    value: "dostoevsky",
+    label: "Fyodor Dostoevsky",
+    keywords: "crime punishment brothers karamazov",
+  },
+  { value: "tolstoy", label: "Leo Tolstoy", keywords: "war peace anna karenina" },
+  { value: "dumas", label: "Alexandre Dumas", keywords: "monte cristo musketeers" },
+  { value: "hugo", label: "Victor Hugo", keywords: "les miserables hunchback" },
+  { value: "twain", label: "Mark Twain", keywords: "huckleberry finn tom sawyer" },
+  { value: "hemingway", label: "Ernest Hemingway", keywords: "old man sun farewell arms" },
+  { value: "fitzgerald", label: "F. Scott Fitzgerald", keywords: "great gatsby" },
+  { value: "steinbeck", label: "John Steinbeck", keywords: "grapes wrath east eden" },
+  { value: "orwell", label: "George Orwell", keywords: "1984 animal farm" },
+  { value: "joyce", label: "James Joyce", keywords: "ulysses dubliners" },
+  { value: "woolf", label: "Virginia Woolf", keywords: "mrs dalloway lighthouse" },
+  { value: "faulkner", label: "William Faulkner", keywords: "sound fury" },
+  { value: "salinger", label: "J.D. Salinger", keywords: "catcher rye" },
+  { value: "lee", label: "Harper Lee", keywords: "kill mockingbird" },
+  { value: "murakami", label: "Haruki Murakami", keywords: "kafka wind-up bird" },
+  { value: "garcia-marquez", label: "Gabriel García Márquez", keywords: "hundred years solitude" },
+  { value: "borges", label: "Jorge Luis Borges", keywords: "labyrinths ficciones" },
+  { value: "nabokov", label: "Vladimir Nabokov", keywords: "lolita" },
+  { value: "kafka", label: "Franz Kafka", keywords: "metamorphosis trial castle" },
+  { value: "camus", label: "Albert Camus", keywords: "stranger plague" },
+  { value: "sartre", label: "Jean-Paul Sartre", keywords: "nausea existentialism" },
+  { value: "proust", label: "Marcel Proust", keywords: "remembrance time" },
+  { value: "flaubert", label: "Gustave Flaubert", keywords: "madame bovary" },
+  { value: "zola", label: "Émile Zola", keywords: "germinal" },
+  { value: "balzac", label: "Honoré de Balzac", keywords: "comédie humaine" },
+  { value: "chekhov", label: "Anton Chekhov", keywords: "cherry orchard stories" },
+  { value: "gogol", label: "Nikolai Gogol", keywords: "dead souls overcoat" },
+  { value: "pushkin", label: "Alexander Pushkin", keywords: "eugene onegin" },
+  { value: "dostoevsky-notes", label: "Fyodor Dostoevsky", keywords: "notes underground" },
+  { value: "bulgakov", label: "Mikhail Bulgakov", keywords: "master margarita" },
+  { value: "solzhenitsyn", label: "Alexander Solzhenitsyn", keywords: "gulag archipelago" },
+  { value: "pasternak", label: "Boris Pasternak", keywords: "doctor zhivago" },
+  { value: "coelho", label: "Paulo Coelho", keywords: "alchemist" },
+  { value: "allende", label: "Isabel Allende", keywords: "house spirits" },
+  { value: "llosa", label: "Mario Vargas Llosa", keywords: "feast goat" },
+  { value: "cortazar", label: "Julio Cortázar", keywords: "hopscotch" },
+  { value: "neruda", label: "Pablo Neruda", keywords: "poetry odes" },
+  { value: "rushdie", label: "Salman Rushdie", keywords: "midnight children" },
+  { value: "roy", label: "Arundhati Roy", keywords: "god small things" },
+  { value: "lahiri", label: "Jhumpa Lahiri", keywords: "interpreter maladies" },
+  { value: "adichie", label: "Chimamanda Ngozi Adichie", keywords: "half yellow sun" },
+  { value: "achebe", label: "Chinua Achebe", keywords: "things fall apart" },
+  { value: "soueif", label: "Ahdaf Soueif", keywords: "map love" },
+  { value: "mahfouz", label: "Naguib Mahfouz", keywords: "cairo trilogy" },
+  { value: "oz", label: "Amos Oz", keywords: "tale love darkness" },
+  { value: "pamuk", label: "Orhan Pamuk", keywords: "museum innocence" },
+  { value: "kundera", label: "Milan Kundera", keywords: "unbearable lightness" },
+  { value: "hugo-notre", label: "Victor Hugo", keywords: "notre dame" },
+  { value: "verne", label: "Jules Verne", keywords: "journey center earth" },
+  { value: "wilde", label: "Oscar Wilde", keywords: "picture dorian gray" },
+  { value: "doyle", label: "Arthur Conan Doyle", keywords: "sherlock holmes" },
+  { value: "poe", label: "Edgar Allan Poe", keywords: "raven tell-tale" },
+  { value: "hawthorne", label: "Nathaniel Hawthorne", keywords: "scarlet letter" },
+  { value: "melville", label: "Herman Melville", keywords: "moby dick" },
+  { value: "wharton", label: "Edith Wharton", keywords: "age innocence" },
+  { value: "chopin", label: "Kate Chopin", keywords: "awakening" },
+  { value: "cather", label: "Willa Cather", keywords: "my antonia" },
+  { value: "bradbury", label: "Ray Bradbury", keywords: "fahrenheit 451" },
+  { value: "asimov", label: "Isaac Asimov", keywords: "foundation i robot" },
+  { value: "clarke", label: "Arthur C. Clarke", keywords: "2001 odyssey" },
+  { value: "le-guin", label: "Ursula K. Le Guin", keywords: "earthsea left hand" },
+  { value: "atwood", label: "Margaret Atwood", keywords: "handmaid tale" },
+  { value: "lessing", label: "Doris Lessing", keywords: "golden notebook" },
+  { value: "morrison", label: "Toni Morrison", keywords: "beloved" },
+  { value: "walker", label: "Alice Walker", keywords: "color purple" },
+  { value: "angelou", label: "Maya Angelou", keywords: "know why caged" },
+  { value: "baldwin", label: "James Baldwin", keywords: "go tell mountain" },
+  { value: "ellison", label: "Ralph Ellison", keywords: "invisible man" },
+  { value: "wright", label: "Richard Wright", keywords: "native son" },
+  { value: "hughes", label: "Langston Hughes", keywords: "poetry harlem" },
+  { value: "hurston", label: "Zora Neale Hurston", keywords: "eyes watching" },
+  { value: "tan", label: "Amy Tan", keywords: "joy luck club" },
+  { value: "king", label: "Stephen King", keywords: "shining it" },
+  { value: "rowling", label: "J.K. Rowling", keywords: "harry potter" },
+  { value: "tolkien", label: "J.R.R. Tolkien", keywords: "lord rings hobbit" },
+  { value: "lewis", label: "C.S. Lewis", keywords: "narnia" },
+  { value: "carroll", label: "Lewis Carroll", keywords: "alice wonderland" },
+  { value: "baum", label: "L. Frank Baum", keywords: "wizard oz" },
+  { value: "shelley", label: "Mary Shelley", keywords: "frankenstein" },
+  { value: "stoker", label: "Bram Stoker", keywords: "dracula" },
+  { value: "lovecraft", label: "H.P. Lovecraft", keywords: "cthulhu" },
+  { value: "dick", label: "Philip K. Dick", keywords: "blade runner" },
+  { value: "gibson", label: "William Gibson", keywords: "neuromancer" },
+  { value: "stephenson", label: "Neal Stephenson", keywords: "snow crash" },
+  { value: "pratchett", label: "Terry Pratchett", keywords: "discworld" },
+  { value: "gaiman", label: "Neil Gaiman", keywords: "american gods" },
+  { value: "sanderson", label: "Brandon Sanderson", keywords: "stormlight mistborn" },
+  { value: "rothfuss", label: "Patrick Rothfuss", keywords: "kingkiller" },
+  { value: "martin", label: "George R.R. Martin", keywords: "game thrones" },
+  { value: "jemisin", label: "N.K. Jemisin", keywords: "broken earth" },
+  { value: "lecarre", label: "John le Carré", keywords: "spy tinker tailor" },
+  { value: "greene", label: "Graham Greene", keywords: "quiet american" },
+  { value: "amado", label: "Jorge Amado", keywords: "dona flor" },
+  { value: "lispector", label: "Clarice Lispector", keywords: "hour star" },
+  { value: "saramago", label: "José Saramago", keywords: "blindness" },
+  { value: "eco", label: "Umberto Eco", keywords: "name rose" },
+  { value: "calvino", label: "Italo Calvino", keywords: "invisible cities" },
+  { value: "levi", label: "Primo Levi", keywords: "survival auschwitz" },
+  { value: "kawabata", label: "Yasunari Kawabata", keywords: "snow country" },
+  { value: "tanizaki", label: "Junichiro Tanizaki", keywords: "makioka sisters" },
+  { value: "oe", label: "Kenzaburō Ōe", keywords: "personal matter" },
+  { value: "ishiguro", label: "Kazuo Ishiguro", keywords: "remains day" },
+  { value: "banville", label: "John Banville", keywords: "sea" },
+  { value: "mcewan", label: "Ian McEwan", keywords: "atonement" },
+  { value: "smith", label: "Zadie Smith", keywords: "white teeth" },
+  { value: "eugenides", label: "Jeffrey Eugenides", keywords: "middlesex" },
+  { value: "franzen", label: "Jonathan Franzen", keywords: "corrections" },
+  { value: "wallace", label: "David Foster Wallace", keywords: "infinite jest" },
+  { value: "delillo", label: "Don DeLillo", keywords: "white noise" },
+  { value: "pynchon", label: "Thomas Pynchon", keywords: "gravity rainbow" },
+  { value: "roth", label: "Philip Roth", keywords: "american pastoral" },
+  { value: "updike", label: "John Updike", keywords: "rabbit" },
+  { value: "vonnegut", label: "Kurt Vonnegut", keywords: "slaughterhouse five" },
+  { value: "oates", label: "Joyce Carol Oates", keywords: "them" },
+  { value: "munro", label: "Alice Munro", keywords: "short stories" },
+  { value: "martel", label: "Yann Martel", keywords: "life pi" },
+  { value: "yanagihara", label: "Hanya Yanagihara", keywords: "little life" },
+  { value: "ng", label: "Celeste Ng", keywords: "little fires" },
+  { value: "whitehead", label: "Colson Whitehead", keywords: "underground railroad" },
+];
+
+export const shortAuthorOptions: ComboboxOption[] = authorOptions.slice(0, 8);