@sproutsocial/seeds-react-menu 1.17.0 → 1.18.0

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

@@ -1,645 +0,0 @@
-/* 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: "Components/Menus/v2/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(100);
-
-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}
-          groupBy={(book) => book.author}
-          selectHeadings={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 />;
-  },
-};
-
-// Popout Placement Top
-// Positioned at the bottom of the viewport to demonstrate that the popout
-// opens upward rather than downward when popoutPlacement="top" is set.
-const TestPopoutPlacementTop = () => {
-  return (
-    <FormField label="Pick some books" width="100%">
-      {({ id }) => (
-        <MultiAutocomplete
-          id={id}
-          data={books}
-          itemToString={itemToString}
-          renderItem={renderItem}
-          onSelectedItemIdsChange={(itemIds) => console.log(itemIds)}
-          EmptyState={defaultEmptyState}
-          placeholder="Search for books"
-          popoutPlacement="top"
-        />
-      )}
-    </FormField>
-  );
-};
-
-export const PopoutPlacementTop: Story = {
-  name: "Popout Placement Top",
-  decorators: [
-    (Story) => (
-      <Box display="flex" height="100vh" alignItems="flex-end">
-        <Story />
-      </Box>
-    ),
-  ],
-  render: () => <TestPopoutPlacementTop />,
-};