@sproutsocial/seeds-react-menu 1.10.8 → 1.11.0

package/src/v3/MultiSearchableSelect.stories.tsx

@@ -0,0 +1,389 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { FormField } from "@sproutsocial/seeds-react-form-field";
+import MultiSearchableSelect from "./MultiSearchableSelect";
+import { books, largeBookSet, itemToString, renderItem } from "./storyData";
+
+const meta: Meta<typeof MultiSearchableSelect> = {
+  title: "Really Under Development/V3/Multi Searchable Select",
+  component: MultiSearchableSelect,
+};
+
+export default meta;
+type Story = StoryObj<typeof MultiSearchableSelect>;
+
+export const Basic: Story = {
+  name: "Basic",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick books">
+        {({ id }) => (
+          <MultiSearchableSelect
+            id={id}
+            data={books}
+            itemToString={itemToString}
+            placeholder="Select books"
+            searchPlaceholder="Search books..."
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
+export const CustomRenderItem: Story = {
+  name: "Custom render item",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick books">
+        {({ id }) => (
+          <MultiSearchableSelect
+            id={id}
+            data={books}
+            itemToString={itemToString}
+            renderItem={renderItem}
+            placeholder="Select books"
+            searchPlaceholder="Search books..."
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
+export const Grouped: Story = {
+  name: "Grouped",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick books">
+        {({ id }) => (
+          <MultiSearchableSelect
+            id={id}
+            data={books}
+            itemToString={itemToString}
+            renderItem={renderItem}
+            placeholder="Select books"
+            searchPlaceholder="Search books..."
+            groupBy={(book) => book.author}
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
+export const DefaultSelected: Story = {
+  name: "Default selected",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick books">
+        {({ id }) => (
+          <MultiSearchableSelect
+            id={id}
+            data={books}
+            itemToString={itemToString}
+            renderItem={renderItem}
+            placeholder="Select books"
+            searchPlaceholder="Search books..."
+            defaultSelectedItemIds={["book-1", "book-3"]}
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
+export const Controlled: Story = {
+  name: "Controlled",
+  render: () => {
+    const [selectedIds, setSelectedIds] = React.useState<string[]>(["book-2"]);
+    const selected = books.filter((b) => selectedIds.includes(b.id));
+    return (
+      <div
+        style={{
+          width: "300px",
+          display: "flex",
+          flexDirection: "column",
+          gap: 16,
+        }}
+      >
+        <FormField label="Pick books">
+          {({ id }) => (
+            <MultiSearchableSelect
+              id={id}
+              data={books}
+              itemToString={itemToString}
+              renderItem={renderItem}
+              placeholder="Select books"
+              searchPlaceholder="Search books..."
+              selectedItemIds={selectedIds}
+              onSelectedItemIdsChange={(ids: string[]) => setSelectedIds(ids)}
+            />
+          )}
+        </FormField>
+        <div style={{ fontSize: 13 }}>
+          Selected:{" "}
+          <strong>
+            {selected.length > 0
+              ? selected.map((b) => b.title).join(", ")
+              : "none"}
+          </strong>
+        </div>
+        <div style={{ display: "flex", gap: 8 }}>
+          <button onClick={() => setSelectedIds([])}>Clear all</button>
+          <button onClick={() => setSelectedIds(["book-5", "book-7"])}>
+            Select 1984 &amp; Meditations
+          </button>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const CustomSelection: Story = {
+  name: "Custom renderSelection",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick books">
+        {({ id }) => (
+          <MultiSearchableSelect
+            id={id}
+            data={books}
+            itemToString={itemToString}
+            renderItem={renderItem}
+            placeholder="Select books"
+            searchPlaceholder="Search books..."
+            renderSelection={(selected) => {
+              if (selected.length === 0) return "Select books";
+              const first = itemToString(selected[0]);
+              const extra =
+                selected.length > 1 ? ` (+${selected.length - 1})` : "";
+              return (
+                <span style={{ fontSize: 13 }}>
+                  {first}
+                  {extra}
+                </span>
+              );
+            }}
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
+export const CustomRenderSelections: Story = {
+  name: "Custom customRenderSelections",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick books">
+        {({ id }) => (
+          <MultiSearchableSelect
+            id={id}
+            data={books}
+            itemToString={itemToString}
+            renderItem={renderItem}
+            placeholder="Select books"
+            searchPlaceholder="Search books..."
+            customRenderSelections={(item) => `${item.title} (${item.author})`}
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
+export const SelectableHeadings: Story = {
+  name: "Selectable headings",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick books">
+        {({ id }) => (
+          <MultiSearchableSelect
+            id={id}
+            data={books}
+            itemToString={itemToString}
+            renderItem={renderItem}
+            placeholder="Select books"
+            searchPlaceholder="Search books..."
+            groupBy={(book) => book.author}
+            selectHeadings
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
+export const SelectAll: Story = {
+  name: "Select all",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick books">
+        {({ id }) => (
+          <MultiSearchableSelect
+            id={id}
+            data={books}
+            itemToString={itemToString}
+            renderItem={renderItem}
+            placeholder="Select books"
+            searchPlaceholder="Search books..."
+            groupBy={(book) => book.author}
+            selectHeadings
+            selectAll
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
+export const Virtualized: Story = {
+  name: "Virtualized",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick books">
+        {({ id }) => (
+          <MultiSearchableSelect
+            id={id}
+            data={largeBookSet}
+            itemToString={itemToString}
+            renderItem={renderItem}
+            placeholder="Select books"
+            searchPlaceholder="Search books..."
+            groupBy={(book) => book.author}
+            selectHeadings
+            isVirtualized
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
+export const MaxSelections: Story = {
+  name: "Max selections",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick books">
+        {({ id }) => (
+          <MultiSearchableSelect
+            id={id}
+            data={books}
+            itemToString={itemToString}
+            renderItem={renderItem}
+            placeholder="Select books"
+            searchPlaceholder="Search books..."
+            defaultSelectedItemIds={[
+              "book-1",
+              "book-2",
+              "book-3",
+              "book-4",
+              "book-5",
+            ]}
+            maxSelections={2}
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
+export const RemoveSelectedItems: Story = {
+  name: "Remove selected items",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick books">
+        {({ id }) => (
+          <MultiSearchableSelect
+            id={id}
+            data={books}
+            itemToString={itemToString}
+            renderItem={renderItem}
+            placeholder="Select books"
+            searchPlaceholder="Search books..."
+            removeSelectedItems
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
+export const VirtualizedSelectAll: Story = {
+  name: "Virtualized + select all",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick books">
+        {({ id }) => (
+          <MultiSearchableSelect
+            id={id}
+            data={largeBookSet}
+            itemToString={itemToString}
+            renderItem={renderItem}
+            placeholder="Select books"
+            searchPlaceholder="Search books..."
+            groupBy={(book) => book.author}
+            selectHeadings
+            selectAll
+            isVirtualized
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
+export const Loading: Story = {
+  name: "Loading",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick books">
+        {({ id }) => (
+          <MultiSearchableSelect
+            id={id}
+            data={[]}
+            itemToString={itemToString}
+            placeholder="Select books"
+            searchPlaceholder="Search books..."
+            isLoading
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
+export const LoadingWithToggle: Story = {
+  name: "Loading (toggle)",
+  render: () => {
+    const [isLoading, setIsLoading] = React.useState(true);
+    const data = isLoading ? [] : books;
+    return (
+      <div
+        style={{
+          width: "300px",
+          display: "flex",
+          flexDirection: "column",
+          gap: 16,
+        }}
+      >
+        <FormField label="Pick books">
+          {({ id }) => (
+            <MultiSearchableSelect
+              id={id}
+              data={data}
+              itemToString={itemToString}
+              placeholder="Select books"
+              searchPlaceholder="Search books..."
+              isLoading={isLoading}
+            />
+          )}
+        </FormField>
+        <button onClick={() => setIsLoading((v) => !v)}>
+          {isLoading ? "Finish loading" : "Set loading"}
+        </button>
+      </div>
+    );
+  },
+};