aural-ui 4.0.1 → 4.1.0

package/dist/components/chip/Chip.stories.tsx

@@ -1,9 +1,14 @@
-import React from "react"
+import React, { useState } from "react"
 import { AngleDownIcon } from "@icons/angle-down-icon"
 import { CrossCircleIcon } from "@icons/cross-circle-icon"
 import { FeatureShineIcon } from "@icons/feature-shine-icon"
+import { MusicalNoteIcon } from "@icons/musical-note-icon"
+import { SearchIcon } from "@icons/search-icon"
+import { StarIcon } from "@icons/star-icon"
 import type { Meta, StoryObj } from "@storybook/react-vite"
 
+import { AuralComponentDocsPage } from "src/ui/story-spec/components/component-story-docs-page"
+
 import { Chip } from "."
 
 const meta: Meta<typeof Chip> = {
@@ -12,206 +17,395 @@ const meta: Meta<typeof Chip> = {
   tags: ["autodocs"],
   parameters: {
     layout: "centered",
-    backgrounds: {
-      default: "dark",
-      values: [
-        { name: "dark", value: "#0a0a0a" },
-        { name: "light", value: "#ffffff" },
-      ],
+    docs: {
+      description: {
+        component:
+          "A compact filter chip for selecting and toggling categories, tags, or attributes. Supports selected state with contrasting surface, and optional left and/or right icons.",
+      },
+      page: () => (
+        <AuralComponentDocsPage
+          features={[
+            {
+              title: "Selected State",
+              description: "Contrasting active surface",
+            },
+            {
+              title: "Icon Slots",
+              description: "Left, right, or both",
+            },
+            {
+              title: "Single & Multi-select",
+              description: "Works both ways",
+            },
+          ]}
+        />
+      ),
     },
   },
   argTypes: {
     selected: {
       control: "boolean",
-      description: "Whether the chip is selected",
-    },
-    leftIcon: {
-      control: "boolean",
-      description: "Icon to display on the left side of the chip",
+      description: "Whether the chip is in the selected/active state",
     },
-    rightIcon: {
-      control: "boolean",
-      description: "Icon to display on the right side of the chip",
-    },
-    onSelect: { action: "selected" },
     children: {
       control: "text",
-      description: "The content of the chip",
+      description: "Label text displayed inside the chip",
     },
+    onSelect: { action: "selected" },
   },
 }
 
 export default meta
 type Story = StoryObj<typeof Chip>
 
-export const Default: Story = {
-  args: {
-    children: "CHIPS",
-  },
-}
-
-export const WithLeftIcon: Story = {
-  args: {
-    children: "CHIPS",
-    leftIcon: true,
-  },
-}
-
-export const WithRightIcon: Story = {
-  args: {
-    children: "CHIPS",
-    rightIcon: true,
-  },
-}
-
-export const WithBothIcons: Story = {
-  args: {
-    children: "CHIPS",
-    leftIcon: true,
-    rightIcon: true,
-  },
-}
-
-export const Selected: Story = {
-  args: {
-    children: "CHIPS",
-    selected: true,
-  },
-}
+// ─── 1. Playground ────────────────────────────────────────────────────────────
 
-export const SelectedWithIcon: Story = {
+export const Playground: Story = {
   args: {
-    children: "CHIPS",
-    selected: true,
-    leftIcon: true,
+    children: "Genre",
+    selected: false,
   },
-}
-
-export const WithLeftIconOnly: Story = {
-  args: {
-    children: "CHIPS",
-    leftIcon: true,
+  render: (args) => (
+    <div className="w-full max-w-sm space-y-4">
+      <div className="flex justify-center">
+        <Chip {...args} />
+      </div>
+      <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border px-4 py-3">
+        <code className="text-fm-secondary text-fm-md leading-fm-md font-(--font-fm-mono)">{`<Chip selected={${args.selected}}>${args.children}</Chip>`}</code>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Toggle the selected state and edit the label using the controls panel in the sidebar.",
+      },
+    },
   },
 }
 
-export const WithRightIconOnly: Story = {
-  args: {
-    children: "CHIPS",
-    rightIcon: true,
-  },
-}
+// ─── 2. All Variants ──────────────────────────────────────────────────────────
 
-export const WithDifferentIcons: Story = {
+export const AllVariants: Story = {
   render: () => (
-    <Chip
-      leftIcon={<CrossCircleIcon color="currentColor" width={16} height={16} />}
-      rightIcon={<AngleDownIcon color="currentColor" width={16} height={16} />}
-    >
-      DIFFERENT ICONS
-    </Chip>
-  ),
-}
-
-export const MixedIcons = () => {
-  return (
-    <div className="bg-fm-neutral-0 text-fm-neutral-1100 p-fm-5xl font-fm-text">
-      <h2 className="text-fm-yellow-500 text-fm-sm mb-fm-4xl">
-        DIFFERENT ICONS ON EACH SIDE
-      </h2>
-
-      <h1 className="text-fm-5xl mb-fm-4xl">Mixed Icon Chips</h1>
-
-      <p className="text-fm-lg leading-fm-xl text-fm-neutral-600 mb-fm-7xl max-w-[80%]">
-        Chips can display different icons on each side by using the leftIcon and
-        rightIcon props.
-      </p>
-
-      <div className="gap-fm-2xl flex">
-        <Chip
-          leftIcon={
-            <CrossCircleIcon color="currentColor" width={16} height={16} />
-          }
-          rightIcon={
-            <AngleDownIcon color="currentColor" width={16} height={16} />
-          }
-        >
-          DIFFERENT ICONS
-        </Chip>
-        <Chip
-          leftIcon={
-            <FeatureShineIcon
-              color="var(--color-fm-yellow-500)"
-              width={16}
-              height={16}
-            />
-          }
-          rightIcon={
-            <CrossCircleIcon
-              color="var(--color-fm-primary-500)"
-              width={16}
-              height={16}
-            />
-          }
-          selected
-        >
-          COLORED ICONS
-        </Chip>
-        <Chip
-          leftIcon={true}
-          rightIcon={
-            <AngleDownIcon color="currentColor" width={16} height={16} />
-          }
-        >
-          DEFAULT & CUSTOM
-        </Chip>
-      </div>
-    </div>
-  )
-}
-
-export const ChipVariants = () => {
-  return (
-    <div className="bg-fm-neutral-0 text-fm-neutral-1100 p-fm-5xl font-fm-text">
-      <h2 className="text-fm-yellow-500 text-fm-sm mb-fm-4xl">VARIANTS</h2>
-
-      <h1 className="text-fm-5xl mb-fm-4xl">Chips</h1>
-
-      <p className="text-fm-lg leading-fm-xl text-fm-neutral-600 mb-fm-7xl max-w-[80%]">
-        Chips are compact UI elements representing inputs, attributes, or
-        actions. They display information, make selections, filter content, or
-        trigger actions. Ensure chips are clear, consistent, accessible, and
-        provide visual feedback.
-      </p>
-
-      <div className="gap-fm-8xl flex flex-wrap">
-        <div className="gap-fm-4xl flex flex-col">
-          <h3 className="text-fm-neutral-600 text-fm-sm">DEFAULT</h3>
-          <div className="gap-fm-2xl flex">
-            <Chip leftIcon={true}>CHIPS</Chip>
-            <Chip>CHIPS</Chip>
+    <div className="space-y-8">
+      {/* Unselected row */}
+      <div className="space-y-4">
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          Unselected
+        </h4>
+        <div className="flex flex-wrap gap-4">
+          <div className="space-y-2 text-center">
+            <Chip>No Icon</Chip>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              Text only
+            </p>
+          </div>
+          <div className="space-y-2 text-center">
+            <Chip
+              leftIcon={
+                <FeatureShineIcon width={14} height={14} color="currentColor" />
+              }
+            >
+              Left Icon
+            </Chip>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              Left icon
+            </p>
+          </div>
+          <div className="space-y-2 text-center">
+            <Chip
+              rightIcon={
+                <AngleDownIcon width={14} height={14} color="currentColor" />
+              }
+            >
+              Right Icon
+            </Chip>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              Right icon
+            </p>
+          </div>
+          <div className="space-y-2 text-center">
+            <Chip
+              leftIcon={
+                <FeatureShineIcon width={14} height={14} color="currentColor" />
+              }
+              rightIcon={
+                <AngleDownIcon width={14} height={14} color="currentColor" />
+              }
+            >
+              Both Icons
+            </Chip>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              Both icons
+            </p>
           </div>
         </div>
+      </div>
 
-        <div className="gap-fm-4xl flex flex-col">
-          <h3 className="text-fm-neutral-600 text-fm-sm">HOVER</h3>
-          <div className="gap-fm-2xl flex">
-            <Chip leftIcon={true} className="!bg-fm-neutral-300">
-              CHIPS
+      {/* Selected row */}
+      <div className="space-y-4">
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          Selected
+        </h4>
+        <div className="flex flex-wrap gap-4">
+          <div className="space-y-2 text-center">
+            <Chip selected>No Icon</Chip>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              Text only
+            </p>
+          </div>
+          <div className="space-y-2 text-center">
+            <Chip
+              selected
+              leftIcon={
+                <FeatureShineIcon width={14} height={14} color="currentColor" />
+              }
+            >
+              Left Icon
             </Chip>
-            <Chip className="!bg-fm-neutral-300">CHIPS</Chip>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              Left icon
+            </p>
+          </div>
+          <div className="space-y-2 text-center">
+            <Chip
+              selected
+              rightIcon={
+                <CrossCircleIcon width={14} height={14} color="currentColor" />
+              }
+            >
+              Right Icon
+            </Chip>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              Right icon
+            </p>
+          </div>
+          <div className="space-y-2 text-center">
+            <Chip
+              selected
+              leftIcon={
+                <FeatureShineIcon width={14} height={14} color="currentColor" />
+              }
+              rightIcon={
+                <CrossCircleIcon width={14} height={14} color="currentColor" />
+              }
+            >
+              Both Icons
+            </Chip>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              Both icons
+            </p>
           </div>
         </div>
+      </div>
 
-        <div className="gap-fm-4xl flex flex-col">
-          <h3 className="text-fm-neutral-600 text-fm-sm">SELECTED</h3>
-          <div className="gap-fm-2xl flex">
-            <Chip leftIcon={true} selected>
-              CHIPS
+      {/* With meaningful icons */}
+      <div className="space-y-4">
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          With contextual icons
+        </h4>
+        <div className="flex flex-wrap gap-4">
+          <div className="space-y-2 text-center">
+            <Chip
+              leftIcon={
+                <SearchIcon width={14} height={14} color="currentColor" />
+              }
+            >
+              Search
+            </Chip>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              Search
+            </p>
+          </div>
+          <div className="space-y-2 text-center">
+            <Chip
+              selected
+              leftIcon={
+                <StarIcon width={14} height={14} color="currentColor" />
+              }
+            >
+              Featured
+            </Chip>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              Featured (selected)
+            </p>
+          </div>
+          <div className="space-y-2 text-center">
+            <Chip
+              leftIcon={
+                <MusicalNoteIcon width={14} height={14} color="currentColor" />
+              }
+              rightIcon={
+                <AngleDownIcon width={14} height={14} color="currentColor" />
+              }
+            >
+              Genre
+            </Chip>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              With expand
+            </p>
+          </div>
+          <div className="space-y-2 text-center">
+            <Chip
+              selected
+              leftIcon={
+                <MusicalNoteIcon width={14} height={14} color="currentColor" />
+              }
+              rightIcon={
+                <CrossCircleIcon width={14} height={14} color="currentColor" />
+              }
+            >
+              Pop
             </Chip>
-            <Chip selected>CHIPS</Chip>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              Active filter
+            </p>
           </div>
         </div>
       </div>
     </div>
-  )
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Full visual matrix: selected × unselected crossed with no-icon, left-icon, right-icon, and both-icon configurations.",
+      },
+    },
+  },
+}
+
+// ─── 3. Interactive ───────────────────────────────────────────────────────────
+
+export const Interactive: Story = {
+  render: () => {
+    const genres = [
+      "All",
+      "Pop",
+      "Rock",
+      "Hip-Hop",
+      "Jazz",
+      "Classical",
+      "Electronic",
+      "R&B",
+    ]
+    const moods = ["Energetic", "Chill", "Focus", "Workout", "Sleep", "Happy"]
+
+    const [selectedGenre, setSelectedGenre] = useState<string>("All")
+    const [selectedMoods, setSelectedMoods] = useState<Set<string>>(new Set())
+
+    const toggleMood = (mood: string) => {
+      setSelectedMoods((prev) => {
+        const next = new Set(prev)
+        if (next.has(mood)) {
+          next.delete(mood)
+        } else {
+          next.add(mood)
+        }
+        return next
+      })
+    }
+
+    return (
+      <div className="w-full p-8">
+        <div className="mx-auto max-w-3xl space-y-6">
+          <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
+            {/* Controls panel */}
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary space-y-5 rounded-xl border p-5">
+              <p className="text-fm-primary font-fm-brand text-fm-sm leading-fm-sm font-semibold tracking-widest uppercase">
+                Selection Mode
+              </p>
+              <div className="space-y-3">
+                <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+                  Genre uses <strong>single-select</strong>. Mood uses{" "}
+                  <strong>multi-select</strong>.
+                </p>
+              </div>
+              <div className="border-fm-divider-secondary border-t pt-4" />
+              <div className="space-y-2">
+                <p className="text-fm-secondary font-fm-text text-fm-xs leading-fm-xs tracking-wider uppercase">
+                  Selected genre
+                </p>
+                <p className="text-fm-primary font-fm-brand text-fm-md leading-fm-md font-semibold">
+                  {selectedGenre}
+                </p>
+              </div>
+              <div className="space-y-2">
+                <p className="text-fm-secondary font-fm-text text-fm-xs leading-fm-xs tracking-wider uppercase">
+                  Active moods
+                </p>
+                <p className="text-fm-primary font-fm-brand text-fm-md leading-fm-md font-semibold">
+                  {selectedMoods.size === 0
+                    ? "None"
+                    : Array.from(selectedMoods).join(", ")}
+                </p>
+              </div>
+            </div>
+
+            {/* Preview stage */}
+            <div className="flex flex-col gap-6 lg:col-span-2">
+              <div className="space-y-4">
+                <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+                  Genre — single select
+                </h4>
+                <div className="flex flex-wrap gap-3">
+                  {genres.map((genre) => (
+                    <Chip
+                      key={genre}
+                      selected={selectedGenre === genre}
+                      onSelect={() => setSelectedGenre(genre)}
+                    >
+                      {genre}
+                    </Chip>
+                  ))}
+                </div>
+              </div>
+
+              <div className="space-y-4">
+                <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+                  Mood — multi-select
+                </h4>
+                <div className="flex flex-wrap gap-3">
+                  {moods.map((mood) => (
+                    <Chip
+                      key={mood}
+                      selected={selectedMoods.has(mood)}
+                      onSelect={() => toggleMood(mood)}
+                      leftIcon={
+                        selectedMoods.has(mood) ? (
+                          <CrossCircleIcon
+                            width={14}
+                            height={14}
+                            color="currentColor"
+                          />
+                        ) : undefined
+                      }
+                    >
+                      {mood}
+                    </Chip>
+                  ))}
+                </div>
+              </div>
+
+              <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border px-4 py-3">
+                <code className="text-fm-secondary text-fm-md leading-fm-md font-(--font-fm-mono)">
+                  {`<Chip selected={${selectedMoods.size > 0}} onSelect={toggleMood}>`}
+                </code>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Live chip selection demo. The genre group demonstrates single-select radio behavior; the mood group demonstrates multi-select toggle behavior with a dismiss icon on active chips.",
+      },
+    },
+  },
 }