@sproutsocial/seeds-react-menu 1.10.8 → 1.11.0

package/src/v3/MultiSelect.stories.tsx

@@ -0,0 +1,300 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { FormField } from "@sproutsocial/seeds-react-form-field";
+import MultiSelect from "./MultiSelect";
+import SelectItem from "./Common/SelectItem";
+import SelectGroup from "./Common/SelectGroup";
+import { books, itemToString, renderItem } from "./storyData";
+
+const meta: Meta<typeof MultiSelect> = {
+  title: "Really Under Development/V3/Multi Select",
+  component: MultiSelect,
+};
+
+export default meta;
+type Story = StoryObj<typeof MultiSelect>;
+
+export const Basic: Story = {
+  name: "Basic",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick books">
+        {({ id }) => (
+          <MultiSelect
+            id={id}
+            data={books}
+            itemToString={itemToString}
+            placeholder="Select books..."
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
+export const CustomRenderItem: Story = {
+  name: "Custom render item",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick books">
+        {({ id }) => (
+          <MultiSelect
+            id={id}
+            data={books}
+            itemToString={itemToString}
+            renderItem={renderItem}
+            placeholder="Select books..."
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
+export const Grouped: Story = {
+  name: "Grouped",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick books">
+        {({ id }) => (
+          <MultiSelect
+            id={id}
+            data={books}
+            itemToString={itemToString}
+            renderItem={renderItem}
+            placeholder="Select books..."
+            groupBy={(book) => book.author}
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
+export const DefaultSelected: Story = {
+  name: "Default selected",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick books">
+        {({ id }) => (
+          <MultiSelect
+            id={id}
+            data={books}
+            itemToString={itemToString}
+            renderItem={renderItem}
+            placeholder="Select 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 }) => (
+            <MultiSelect
+              id={id}
+              data={books}
+              itemToString={itemToString}
+              renderItem={renderItem}
+              placeholder="Select 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 }) => (
+          <MultiSelect
+            id={id}
+            data={books}
+            itemToString={itemToString}
+            renderItem={renderItem}
+            placeholder="Select books..."
+            renderSelection={(selected) => {
+              if (selected.length === 0)
+                return <span style={{ color: "#888" }}>Select books...</span>;
+              const first = itemToString(selected[0]);
+              const extra =
+                selected.length > 1 ? ` (+${selected.length - 1})` : "";
+              return (
+                <span>
+                  {first}
+                  {extra}
+                </span>
+              );
+            }}
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
+export const CustomToken: Story = {
+  name: "Custom renderToken",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick books">
+        {({ id }) => (
+          <MultiSelect
+            id={id}
+            data={books}
+            itemToString={itemToString}
+            renderItem={renderItem}
+            placeholder="Select books..."
+            renderToken={(item) => (
+              <span>
+                {item.title}{" "}
+                <span style={{ fontSize: "11px", opacity: 0.7 }}>
+                  ({item.author})
+                </span>
+              </span>
+            )}
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
+export const MaxTokens: Story = {
+  name: "Max tokens",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick books">
+        {({ id }) => (
+          <MultiSelect
+            id={id}
+            data={books}
+            itemToString={itemToString}
+            renderItem={renderItem}
+            placeholder="Select books..."
+            defaultSelectedItemIds={[
+              "book-1",
+              "book-2",
+              "book-3",
+              "book-4",
+              "book-5",
+            ]}
+            maxTokens={2}
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
+export const RemoveSelectedItems: Story = {
+  name: "Remove selected items",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick books">
+        {({ id }) => (
+          <MultiSelect
+            id={id}
+            data={books}
+            itemToString={itemToString}
+            renderItem={renderItem}
+            placeholder="Select books..."
+            removeSelectedItems
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
+export const Children: Story = {
+  name: "Children API",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick books">
+        {({ id }) => (
+          <MultiSelect id={id} placeholder="Select books...">
+            <SelectGroup label="Tolstoy" showSeparator>
+              <SelectItem
+                value="book-2"
+                label="War and Peace"
+                inputType="checkbox"
+              />
+              <SelectItem
+                value="book-9"
+                label="Anna Karenina"
+                inputType="checkbox"
+              />
+            </SelectGroup>
+            <SelectGroup label="Dostoevsky" showSeparator>
+              <SelectItem
+                value="book-3"
+                label="The Idiot"
+                inputType="checkbox"
+              />
+              <SelectItem
+                value="book-8"
+                label="The Brothers Karamazov"
+                inputType="checkbox"
+              />
+              <SelectItem
+                value="book-10"
+                label="Crime and Punishment"
+                inputType="checkbox"
+              />
+            </SelectGroup>
+            <SelectGroup label="Other">
+              <SelectItem
+                value="book-1"
+                label="To Kill a Mockingbird"
+                inputType="checkbox"
+              />
+              <SelectItem value="book-5" label="1984" inputType="checkbox" />
+              <SelectItem
+                value="book-7"
+                label="Meditations"
+                inputType="checkbox"
+              />
+            </SelectGroup>
+          </MultiSelect>
+        )}
+      </FormField>
+    </div>
+  ),
+};