adds results example for search

figma · Jun 10, 2024 · 9b2d390 · 9b2d390
1 parent a4d8de2
commit 9b2d390
Show file tree

Hide file tree

Showing 2 changed files with 211 additions and 16 deletions.
diff --git a/src/stories/ui/primitives/Search.stories.tsx b/src/stories/ui/primitives/Search.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
 import { Search } from "ui/primitives";
 
 const meta: Meta<typeof Search> = {
@@ -11,5 +12,189 @@ type Story = StoryObj<typeof Search>;
 
 export const Default: Story = {
   args: {},
-  render: (args) => <Search {...args} />,
+  render: (args) => {
+    const [results, setResults] = useState<string[]>([]);
+    function updateResults(term: string) {
+      const newArray = term
+        ? fruitsList().filter((a) => a.match(new RegExp(term, "i")))
+        : [];
+      setResults(newArray);
+    }
+
+    return (
+      <Search
+        {...args}
+        aria-label="Search for stuff"
+        onSearch={(term) => updateResults(term)}
+        results={results}
+      />
+    );
+  },
 };
+
+function fruitsList() {
+  return [
+    "Acai",
+    "Aceola",
+    "Alfalfa Sprouts",
+    "Apple",
+    "Apricot",
+    "Apricots",
+    "Artichoke",
+    "Asian Pear",
+    "Asparagus",
+    "Atemoya",
+    "Avocado",
+    "Bamboo Shoots",
+    "Banana",
+    "Bean Sprouts",
+    "Beans",
+    "Beets",
+    "Belgian Endive",
+    "Bell Peppers",
+    "Bitter Melon",
+    "Blackberries",
+    "Blackberry",
+    "Blueberries",
+    "Bok Choy",
+    "Boniato",
+    "Boysenberries",
+    "Broccoflower",
+    "Broccoli",
+    "Brussels Sprouts",
+    "Cabbage",
+    "Cactus Pear",
+    "Camu Camu berry",
+    "Cantaloupe",
+    "Carambola",
+    "Carrots",
+    "Casaba Melon",
+    "Cauliflower",
+    "Celery",
+    "Chayote",
+    "Cherimoya",
+    "Cherries",
+    "Coconut",
+    "Coconuts",
+    "Collard Greens",
+    "Corn",
+    "Cranberries",
+    "Cranberry",
+    "Cucumber",
+    "Currents",
+    "Dates",
+    "Dried Plums",
+    "Durian",
+    "Eggplant",
+    "Endive",
+    "Escarole",
+    "Feijoa",
+    "Fennel",
+    "Fig",
+    "Figs",
+    "Garlic",
+    "Goji berries",
+    "Gooseberries",
+    "Gooseberry",
+    "Grapefruit",
+    "Grapes",
+    "Green Beans",
+    "Green Onions",
+    "Greens",
+    "Guava",
+    "Hominy",
+    "Honeydew Melon",
+    "Horned Melon",
+    "Iceberg Lettuce",
+    "Jackfruit",
+    "Jerusalem Artichoke",
+    "Jicama",
+    "Kale",
+    "Kiwi",
+    "Kiwifruit",
+    "Kohlrabi",
+    "Kumquat",
+    "Leeks",
+    "Lemon",
+    "Lemons",
+    "Lettuce",
+    "Lima Beans",
+    "Lime",
+    "Limes",
+    "Longan",
+    "Loquat",
+    "Lucuma",
+    "Lychee",
+    "Madarins",
+    "Malanga",
+    "Mandarin Oranges",
+    "Mango",
+    "Mangos",
+    "Mangosteen",
+    "Melon",
+    "Mulberries",
+    "Mulberry",
+    "Mushrooms",
+    "Napa",
+    "Nectarine",
+    "Nectarines",
+    "Okra",
+    "Onion",
+    "Orange",
+    "Oranges",
+    "Papaya",
+    "Papayas",
+    "Parsnip",
+    "Passion Fruit",
+    "Peach",
+    "Peaches",
+    "Pear",
+    "Pears",
+    "Peas",
+    "Peppers",
+    "Persimmons",
+    "Pineapple",
+    "Plantains",
+    "Plum",
+    "Plums",
+    "Pomegranate",
+    "Pomelo",
+    "Potatoes",
+    "Prickly Pear",
+    "Prunes",
+    "Pummelo",
+    "Pumpkin",
+    "Quince",
+    "Radicchio",
+    "Radishes",
+    "Raisins",
+    "Raspberries",
+    "Red Cabbage",
+    "Rhubarb",
+    "Romaine Lettuce",
+    "Rutabaga",
+    "Shallots",
+    "Snow Peas",
+    "Spinach",
+    "Sprouts",
+    "Squash",
+    "Strawberries",
+    "String Beans",
+    "Sweet Potato",
+    "Tangelo",
+    "Tangerine/Clementine",
+    "Tangerines",
+    "Tomatillo",
+    "Tomato",
+    "Turnip",
+    "Ugli Fruit",
+    "Water Chestnuts",
+    "Watercress",
+    "Watermelon",
+    "Waxed Beans",
+    "Yams",
+    "Yellow Squash",
+    "Yuca/Cassava",
+    "Zucchini Squash",
+  ];
+}
diff --git a/src/ui/primitives/Search/Search.tsx b/src/ui/primitives/Search/Search.tsx
@@ -2,33 +2,43 @@ import { clsx } from "clsx";
 import { IconSearch, IconX } from "icons";
 import React, { useRef, useState } from "react";
 import {
+  ComboBox as RACComboBox,
   Popover as RACPopover,
   type InputProps as RACInputProps,
 } from "react-aria-components";
+import { Label } from "../Fieldset/Fieldset";
 import { IconButton } from "../IconButton/IconButton";
 import { Input } from "../Input/Input";
 import { ListBox, ListBoxItem } from "../ListBox/ListBox";
 import "./search.css";
 
-export type SearchProps = RACInputProps & {
+export type SearchProps = Omit<RACInputProps, "results"> & {
   results?: string[];
+  onSearch?: (search: string) => void;
 };
 export const Search = React.forwardRef(function Search(
-  { className, results, ...props }: SearchProps,
+  { className, results, onSearch, ...props }: SearchProps,
   ref: React.ForwardedRef<HTMLInputElement>,
 ) {
   const [searchTerm, setSearchTerm] = useState("");
   const inputRef = useRef<HTMLInputElement | null>(null);
+  const onInputInput = (search: string) => {
+    setSearchTerm(search);
+    if (onSearch) {
+      onSearch(search);
+    }
+  };
 
   const classNames = clsx(className, "search-input-container");
 
   return (
-    <div className={classNames}>
+    <RACComboBox className={classNames}>
+      <Label hidden>{props["aria-label"] || "Search"}</Label>
       <Input
         type="search"
         className="search-input"
         value={searchTerm}
-        onInput={(e) => setSearchTerm(e.currentTarget.value)}
+        onInput={(e) => onInputInput(e.currentTarget.value)}
         ref={(node) => {
           inputRef.current = node;
           if (typeof ref === "function") {
@@ -43,7 +53,7 @@ export const Search = React.forwardRef(function Search(
         {searchTerm ? (
           <IconButton
             aria-label="Clear search"
-            onPress={() => setSearchTerm("")}
+            onPress={() => onInputInput("")}
             size="small"
             variant="subtle"
           >
@@ -60,15 +70,15 @@ export const Search = React.forwardRef(function Search(
           </IconButton>
         )}
       </span>
-      {results && (
-        <RACPopover>
-          <ListBox>
-            {results.map((a) => (
-              <ListBoxItem onAction={() => setSearchTerm(a)}>{a}</ListBoxItem>
-            ))}
-          </ListBox>
-        </RACPopover>
-      )}
-    </div>
+      <RACPopover>
+        <ListBox>
+          {results?.map((a) => (
+            <ListBoxItem key={a} onAction={() => onInputInput(a)}>
+              {a}
+            </ListBoxItem>
+          ))}
+        </ListBox>
+      </RACPopover>
+    </RACComboBox>
   );
 });