@sproutsocial/seeds-react-menu 1.7.1 → 1.7.5

package/src/v2/Autocomplete/Autocomplete.stories.tsx

@@ -0,0 +1,609 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { action } from "@storybook/addon-actions";
+
+import { Box } from "@sproutsocial/seeds-react-box";
+import { FormField } from "@sproutsocial/seeds-react-form-field";
+import { Icon } from "@sproutsocial/seeds-react-icon";
+
+import { MultiAutocomplete } from "./MultiAutocomplete";
+import { SingleAutocomplete } from "./SingleAutocomplete";
+import Button from "@sproutsocial/seeds-react-button";
+import type { ToggleItem, GroupHeading } from "../Common-V2";
+
+type CustomAutocompleteArgs = React.ComponentProps<typeof MultiAutocomplete>;
+
+const meta: Meta<CustomAutocompleteArgs> = {
+  title: "Really Under Development/Autocomplete",
+  component: MultiAutocomplete,
+  parameters: {
+    controls: {
+      expanded: true,
+    },
+  },
+  decorators: [
+    (Story) => (
+      <Box display="flex" flexDirection="column" gap="16px" maxWidth={350}>
+        <Story />
+      </Box>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<CustomAutocompleteArgs>;
+
+interface Book {
+  id: string;
+  author: string;
+  title: string;
+}
+
+const books: Book[] = [
+  { id: "book-1", author: "Harper Lee", title: "To Kill a Mockingbird" },
+  { id: "book-2", author: "Lev Tolstoy", title: "War and Peace" },
+  { id: "book-3", author: "Fyodor Dostoyevsy", title: "The Idiot" },
+  { id: "book-4", author: "Oscar Wilde", title: "A Picture of Dorian Gray" },
+  { id: "book-5", author: "George Orwell", title: "1984" },
+  { id: "book-6", author: "Jane Austen", title: "Pride and Prejudice" },
+  { id: "book-7", author: "Marcus Aurelius", title: "Meditations" },
+  {
+    id: "book-8",
+    author: "Fyodor Dostoevsky",
+    title: "The Brothers Karamazov",
+  },
+  { id: "book-9", author: "Lev Tolstoy", title: "Anna Karenina" },
+  { id: "book-10", author: "Fyodor Dostoevsky", title: "Crime and Punishment" },
+];
+
+// Generate 1000 books for virtualization testing
+const generateBooks = (count: number): Book[] => {
+  const authors = [
+    "Harper Lee",
+    "Lev Tolstoy",
+    "Fyodor Dostoevsky",
+    "Oscar Wilde",
+    "George Orwell",
+    "Jane Austen",
+    "Marcus Aurelius",
+    "Ernest Hemingway",
+    "Virginia Woolf",
+    "James Joyce",
+    "Charles Dickens",
+    "Mark Twain",
+    "J.R.R. Tolkien",
+    "C.S. Lewis",
+    "Agatha Christie",
+    "Arthur Conan Doyle",
+    "J.K. Rowling",
+    "Stephen King",
+    "Isaac Asimov",
+    "Ray Bradbury",
+    "Aldous Huxley",
+    "Kurt Vonnegut",
+    "J.D. Salinger",
+    "Maya Angelou",
+    "Toni Morrison",
+    "Gabriel García Márquez",
+    "Milan Kundera",
+    "Umberto Eco",
+    "Haruki Murakami",
+    "Chimamanda Ngozi Adichie",
+  ];
+
+  const titleWords = [
+    "Adventures",
+    "Chronicles",
+    "Memories",
+    "Journey",
+    "Quest",
+    "Tales",
+    "Stories",
+    "Legends",
+    "Myths",
+    "Dreams",
+    "Visions",
+    "Revelations",
+    "Secrets",
+    "Mysteries",
+    "Shadows",
+    "Light",
+    "Darkness",
+    "Echoes",
+    "Whispers",
+    "Voices",
+    "Songs",
+    "Poems",
+  ];
+
+  const books: Book[] = [];
+  for (let i = 0; i < count; i++) {
+    const author = authors[i % authors.length];
+    const titleWord1 =
+      titleWords[Math.floor(Math.random() * titleWords.length)];
+    const titleWord2 =
+      titleWords[Math.floor(Math.random() * titleWords.length)];
+    const number = Math.floor(i / authors.length) + 1;
+    const title = `${titleWord1} of ${titleWord2} ${number}`;
+
+    books.push({
+      id: `book-${i + 1}`,
+      author,
+      title,
+    });
+  }
+
+  return books;
+};
+const largeBookSet = generateBooks(1000);
+
+const renderItem = (item: Book) => (
+  <>
+    <span style={{ fontWeight: "bold" }}>{item.title}</span>
+    {item.author && (
+      <span style={{ fontSize: "12px", color: "#666", marginLeft: "8px" }}>
+        by {item.author}
+      </span>
+    )}
+  </>
+);
+
+const itemToString = (item: Book | null): string => {
+  if (!item) return "";
+  return item.title;
+};
+
+const itemToSearchString = (item: Book) => `${item.author}|${item.title}`;
+
+const defaultEmptyState = (
+  <div style={{ padding: "16px", textAlign: "center", color: "#666" }}>
+    No books found
+  </div>
+);
+
+// 1. Single
+export const Single: Story = {
+  name: "Single",
+  render: () => {
+    return (
+      <FormField label="Pick a book">
+        {({ id }) => (
+          <SingleAutocomplete
+            id={id}
+            data={books}
+            itemToString={itemToString}
+            renderItem={renderItem}
+            onSelectedItemIdChange={(itemId) => console.log(itemId)}
+            EmptyState={defaultEmptyState}
+            placeholder="Search for a book"
+          />
+        )}
+      </FormField>
+    );
+  },
+};
+
+// 3. Multi
+export const Multi: Story = {
+  name: "Multi",
+  render: () => {
+    return (
+      <div>
+        <FormField label="Pick some books">
+          {({ id }) => (
+            <MultiAutocomplete
+              id={id}
+              data={books}
+              itemToString={itemToString}
+              itemToSearchString={itemToSearchString}
+              renderItem={renderItem}
+              onSelectedItemIdsChange={(itemIds) => console.log(itemIds)}
+              EmptyState={defaultEmptyState}
+              showSelectedItems={true}
+              placeholder="Search for books"
+            />
+          )}
+        </FormField>
+        <Button
+          style={{ marginTop: "16px" }}
+          onClick={action("Button Clicked")}
+        >
+          Example Button
+        </Button>
+      </div>
+    );
+  },
+};
+
+// 4. Multi Grouped by Author
+const TestMultiGroupedByAuthor = () => {
+  return (
+    <FormField label="Pick some books">
+      {({ id }) => (
+        <MultiAutocomplete
+          id={id}
+          data={books}
+          itemToString={itemToString}
+          itemToSearchString={itemToSearchString}
+          renderItem={renderItem}
+          groupBy={(book) => book.author}
+          EmptyState={defaultEmptyState}
+          placeholder="Search for books"
+        />
+      )}
+    </FormField>
+  );
+};
+
+export const MultiGroupedByAuthor: Story = {
+  name: "Multi Grouped by Author",
+  render: () => {
+    return <TestMultiGroupedByAuthor />;
+  },
+};
+
+// 5. Multi Grouped by First Letter
+const TestMultiGroupedByFirstLetter = () => {
+  return (
+    <FormField label="Pick some books">
+      {({ id }) => (
+        <MultiAutocomplete
+          id={id}
+          data={books}
+          itemToString={itemToString}
+          itemToSearchString={itemToSearchString}
+          renderItem={renderItem}
+          groupBy={(book) => book.title.charAt(0).toUpperCase()}
+          EmptyState={defaultEmptyState}
+          placeholder="Search for books"
+        />
+      )}
+    </FormField>
+  );
+};
+
+export const MultiGroupedByFirstLetter: Story = {
+  name: "Multi Grouped by First Letter",
+  render: () => {
+    return <TestMultiGroupedByFirstLetter />;
+  },
+};
+
+// 6. Multi Grouped by Author with Custom Heading
+const TestMultiGroupedByAuthorWithCustomHeading = () => {
+  return (
+    <FormField label="Pick some books">
+      {({ id }) => (
+        <MultiAutocomplete
+          id={id}
+          data={books}
+          itemToString={itemToString}
+          itemToSearchString={itemToSearchString}
+          renderItem={renderItem}
+          groupBy={(book) => book.author}
+          renderGroupHeading={(label) => `📚 ${label.toUpperCase()}`}
+          EmptyState={defaultEmptyState}
+          placeholder="Search for books"
+        />
+      )}
+    </FormField>
+  );
+};
+
+export const MultiGroupedByAuthorWithCustomHeading: Story = {
+  name: "Multi Grouped by Author with Custom Heading",
+  render: () => {
+    return <TestMultiGroupedByAuthorWithCustomHeading />;
+  },
+};
+
+// 7. Multi with Select All
+const selectAllItem: ToggleItem = {
+  id: "select-all",
+  label: "Select All",
+};
+
+const TestMultiWithSelectAll = () => {
+  return (
+    <FormField label="Pick some books">
+      {({ id }) => (
+        <MultiAutocomplete
+          id={id}
+          data={books}
+          itemToString={itemToString}
+          itemToSearchString={itemToSearchString}
+          renderItem={renderItem}
+          selectAllItem={selectAllItem}
+          onSelectedItemIdsChange={(itemIds) => console.log(itemIds)}
+          EmptyState={defaultEmptyState}
+          showSelectedItems={true}
+          placeholder="Search for books"
+        />
+      )}
+    </FormField>
+  );
+};
+
+export const MultiWithSelectAll: Story = {
+  name: "Multi with Select All",
+  render: () => {
+    return <TestMultiWithSelectAll />;
+  },
+};
+
+// 8. Virtualized Multi (with 1000 items)
+const TestVirtualizedMulti = () => {
+  return (
+    <FormField label="Pick some books">
+      {({ id }) => (
+        <MultiAutocomplete
+          id={id}
+          data={largeBookSet}
+          itemToString={itemToString}
+          itemToSearchString={itemToSearchString}
+          renderItem={renderItem}
+          isVirtualized={true}
+          EmptyState={defaultEmptyState}
+          placeholder="Search for books"
+          menuProps={{
+            style: {
+              maxHeight: "400px",
+              overflow: "auto",
+            },
+          }}
+        />
+      )}
+    </FormField>
+  );
+};
+
+export const VirtualizedMulti: Story = {
+  name: "Virtualized Multi (with 1000 items)",
+  render: () => {
+    return <TestVirtualizedMulti />;
+  },
+};
+
+// 9. Virtualized Multi (with 1000 items), With Select All, Grouped by Author, with Selectable Headings
+const TestVirtualizedMultiWithSelectAllGrouped = () => {
+  return (
+    <FormField label="Pick some books">
+      {({ id }) => (
+        <MultiAutocomplete
+          id={id}
+          data={largeBookSet}
+          itemToString={itemToString}
+          itemToSearchString={itemToSearchString}
+          renderItem={renderItem}
+          groupBy={(book) => book.author}
+          selectAllItem={selectAllItem}
+          selectHeadings={true}
+          isVirtualized={true}
+          renderGroupHeading={(label) => `📚 ${label.toUpperCase()}`}
+          onSelectedItemIdsChange={(itemIds) => console.log(itemIds)}
+          EmptyState={defaultEmptyState}
+          showSelectedItems={true}
+          placeholder="Search for books"
+          menuProps={{
+            style: {
+              maxHeight: "400px",
+              overflow: "auto",
+            },
+          }}
+        />
+      )}
+    </FormField>
+  );
+};
+
+export const VirtualizedMultiWithSelectAllGrouped: Story = {
+  name: "Virtualized Multi (with 1000 items), With Select All, Grouped by Author, with Selectable Headings",
+  render: () => {
+    return <TestVirtualizedMultiWithSelectAllGrouped />;
+  },
+};
+
+// 10. FullyControlled Single
+const TestFullyControlledSingle = () => {
+  const [inputValue, setInputValue] = React.useState("");
+  const [selectedItemId, setSelectedItemId] = React.useState<string | null>(
+    books[0].id
+  );
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const selectedItem = books.find((book) => book.id === selectedItemId) ?? null;
+
+  return (
+    <>
+      <FormField label="Pick a book">
+        {({ id }) => (
+          <SingleAutocomplete
+            id={id}
+            data={books}
+            inputValue={inputValue}
+            itemToString={itemToString}
+            itemToSearchString={itemToSearchString}
+            onInputValueChange={(newInputValue) => {
+              console.log("Input value changed:", newInputValue);
+              setInputValue(newInputValue);
+            }}
+            selectedItemId={selectedItemId}
+            onSelectedItemIdChange={(newItemId) => {
+              console.log("Selected item changed:", newItemId);
+              setSelectedItemId(newItemId);
+            }}
+            isOpen={isOpen}
+            onIsOpenChange={(newIsOpen) => {
+              console.log("isOpen changed:", newIsOpen);
+              setIsOpen(newIsOpen);
+            }}
+            renderItem={renderItem}
+            EmptyState={defaultEmptyState}
+            placeholder="Search for a book"
+          />
+        )}
+      </FormField>
+      <div
+        style={{
+          marginTop: "16px",
+          display: "flex",
+          flexDirection: "column",
+          gap: "8px",
+        }}
+      >
+        <div>
+          <Button onClick={() => setIsOpen(!isOpen)}>Toggle Menu</Button>
+          <Button
+            onClick={() => setInputValue("War")}
+            style={{ marginLeft: "8px" }}
+          >
+            Set Input to "War"
+          </Button>
+          <Button
+            onClick={() => {
+              const randomBook =
+                books[Math.floor(Math.random() * books.length)];
+              setSelectedItemId(randomBook.id);
+            }}
+            style={{ marginLeft: "8px" }}
+          >
+            Select Random Book
+          </Button>
+        </div>
+        <div style={{ fontSize: "12px", color: "#666" }}>
+          Input: "{inputValue}" | Menu: {isOpen ? "OPEN" : "CLOSED"} | Selected:{" "}
+          {selectedItem ? selectedItem.title : "None"}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export const FullyControlledSingle: Story = {
+  name: "FullyControlled Single",
+  render: () => {
+    return <TestFullyControlledSingle />;
+  },
+};
+
+// 11. FullyControlled Multi
+const TestFullyControlledMulti = () => {
+  const [inputValue, setInputValue] = React.useState("");
+  const [selectedItemIds, setSelectedItemIds] = React.useState<string[]>([
+    books[0].id,
+  ]);
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const selectedItems = books.filter((book) =>
+    selectedItemIds.includes(book.id)
+  );
+
+  return (
+    <>
+      <FormField label="Pick some books">
+        {({ id }) => (
+          <MultiAutocomplete
+            id={id}
+            data={books}
+            inputValue={inputValue}
+            itemToString={itemToString}
+            itemToSearchString={itemToSearchString}
+            onInputValueChange={(newInputValue) => {
+              console.log("Input value changed:", newInputValue);
+              setInputValue(newInputValue);
+            }}
+            selectedItemIds={selectedItemIds}
+            onSelectedItemIdsChange={(newItemIds) => {
+              console.log("Selected items changed:", newItemIds);
+              setSelectedItemIds(newItemIds);
+            }}
+            isOpen={isOpen}
+            onIsOpenChange={(newIsOpen) => {
+              console.log("isOpen changed:", newIsOpen);
+              setIsOpen(newIsOpen);
+            }}
+            renderItem={renderItem}
+            EmptyState={defaultEmptyState}
+            placeholder="Search for books"
+          />
+        )}
+      </FormField>
+      <div
+        style={{
+          marginTop: "16px",
+          display: "flex",
+          flexDirection: "column",
+          gap: "8px",
+        }}
+      >
+        <div>
+          <Button onClick={() => setIsOpen(!isOpen)}>Toggle Menu</Button>
+          <Button
+            onClick={() => setInputValue("War")}
+            style={{ marginLeft: "8px" }}
+          >
+            Set Input to "War"
+          </Button>
+          <Button
+            onClick={() => {
+              const randomBook =
+                books[Math.floor(Math.random() * books.length)];
+              setSelectedItemIds((prev) => {
+                if (!prev.includes(randomBook.id)) {
+                  return [...prev, randomBook.id];
+                }
+                return prev;
+              });
+            }}
+            style={{ marginLeft: "8px" }}
+          >
+            Add Random Book
+          </Button>
+        </div>
+        <div style={{ fontSize: "12px", color: "#666" }}>
+          Input: "{inputValue}" | Menu: {isOpen ? "OPEN" : "CLOSED"} | Selected:{" "}
+          {selectedItems.map((item) => item.title).join(", ") || "None"}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export const FullyControlledMulti: Story = {
+  name: "FullyControlled Multi",
+  render: () => {
+    return <TestFullyControlledMulti />;
+  },
+};
+
+// Single Custom Search string
+const TestCustomSearchString = () => {
+  const customItemToSearchString = (item: Book) =>
+    `${item.author}|${item.title}`;
+
+  return (
+    <FormField label="Pick a book">
+      {({ id }) => (
+        <SingleAutocomplete
+          id={id}
+          data={books}
+          itemToString={itemToString}
+          itemToSearchString={customItemToSearchString}
+          renderItem={renderItem}
+          onSelectedItemIdChange={(itemId) => console.log(itemId)}
+          EmptyState={defaultEmptyState}
+          placeholder="Search for a book"
+        />
+      )}
+    </FormField>
+  );
+};
+
+export const CustomSearchString: Story = {
+  name: "Custom Search String",
+  render: () => {
+    return <TestCustomSearchString />;
+  },
+};