From 6988c4666b08278063b3d34fffb99570cbc4abd4 Mon Sep 17 00:00:00 2001
From: Griffen Fargo <3642037+gfargo@users.noreply.github.com>
Date: Tue, 5 May 2026 16:09:33 -0400
Subject: [PATCH] chore: update storybook to demo all features

Add demos for item groups, multi-select, searchable mode, and scroll
indicators. The main menu now uses groups itself to categorize demos
into 'Classic' and 'New in 1.0' sections.
---
 src/storybook.tsx | 234 +++++++++++++++++++++++++++++++++-------------
 1 file changed, 168 insertions(+), 66 deletions(-)

diff --git a/src/storybook.tsx b/src/storybook.tsx
index 8a80fba..4800e8d 100644
--- a/src/storybook.tsx
+++ b/src/storybook.tsx
@@ -3,7 +3,15 @@ import { Box, Text, render, useApp } from 'ink'
 import React from 'react'
 import { EnhancedSelectInput } from './enhanced-select-input/index.js'
 
-type StorybookView = 'hotkeys' | 'custom-indicators' | 'custom-item' | undefined
+type StorybookView =
+  | 'hotkeys'
+  | 'custom-indicators'
+  | 'custom-item'
+  | 'groups'
+  | 'multi-select'
+  | 'searchable'
+  | 'scroll-indicators'
+  | undefined
 
 export function Storybook() {
   const { exit } = useApp()
@@ -69,50 +77,162 @@ export function Storybook() {
           <EnhancedSelectInput
             orientation={orientation}
             items={[
-              {
-                label: 'View Hotkeys',
-                value: 'hotkeys',
-              },
+              { label: 'Hotkeys', value: 'hotkeys', group: 'Classic' },
               {
                 label: 'Custom Indicators',
                 value: 'custom-indicators',
+                group: 'Classic',
               },
               {
                 label: 'Custom Item Component',
                 value: 'custom-item',
+                group: 'Classic',
+              },
+              {
+                label: 'Item Groups',
+                value: 'groups',
+                group: 'New in 1.0',
+              },
+              {
+                label: 'Multi-Select',
+                value: 'multi-select',
+                group: 'New in 1.0',
+              },
+              {
+                label: 'Searchable',
+                value: 'searchable',
+                group: 'New in 1.0',
+              },
+              {
+                label: 'Scroll Indicators',
+                value: 'scroll-indicators',
+                group: 'New in 1.0',
               },
               {
                 label: 'Disabled Item',
                 value: 'disabled-item',
                 disabled: true,
               },
-              {
-                label: 'Go Back',
-                value: 'back',
-                hotkey: 'b',
-              },
+              { label: 'Go Back', value: 'back', hotkey: 'b' },
             ]}
             onSelect={(item) => {
-              if (item.value === 'hotkeys') {
-                setCurrentView('hotkeys')
-              }
-
-              if (item.value === 'custom-indicators') {
-                setCurrentView('custom-indicators')
+              if (item.value === 'back') {
+                setOrientation(undefined)
+                return
               }
 
-              if (item.value === 'custom-item') {
-                setCurrentView('custom-item')
-              }
+              setCurrentView(item.value as StorybookView)
+            }}
+          />
+        </Box>
+      )}
 
+      {currentView === 'groups' && orientation && (
+        <Box flexDirection="column">
+          <Text dimColor>Item Groups — items grouped under headers:</Text>
+          <EnhancedSelectInput
+            orientation={orientation}
+            items={[
+              { label: 'TypeScript', value: 'ts', group: 'Languages' },
+              { label: 'Rust', value: 'rust', group: 'Languages' },
+              { label: 'Go', value: 'go', group: 'Languages' },
+              { label: 'React', value: 'react', group: 'Frameworks' },
+              { label: 'Ink', value: 'ink', group: 'Frameworks' },
+              { label: 'Go Back', value: 'back', hotkey: 'b' },
+            ]}
+            onSelect={(item) => {
               if (item.value === 'back') {
-                setOrientation(undefined)
+                setCurrentView(undefined)
               }
             }}
           />
         </Box>
       )}
 
+      {currentView === 'multi-select' && orientation && (
+        <Box flexDirection="column">
+          <Text dimColor>
+            Multi-Select — Space to toggle, Enter to confirm:
+          </Text>
+          <EnhancedSelectInput
+            multiple
+            orientation={orientation}
+            defaultSelectedKeys={['ts']}
+            items={[
+              { label: 'TypeScript', value: 'ts' },
+              { label: 'React', value: 'react' },
+              { label: 'Ink', value: 'ink' },
+              { label: 'Node.js', value: 'node' },
+              {
+                label: 'Legacy (unavailable)',
+                value: 'legacy',
+                disabled: true,
+              },
+            ]}
+            onConfirm={(items) => {
+              console.log('Confirmed:', items.map((i) => i.label).join(', '))
+            }}
+            onCancel={() => {
+              setCurrentView(undefined)
+            }}
+          />
+        </Box>
+      )}
+
+      {currentView === 'searchable' && orientation && (
+        <Box flexDirection="column">
+          <Text dimColor>Searchable — type to filter items:</Text>
+          <EnhancedSelectInput
+            searchable
+            orientation={orientation}
+            searchPlaceholder="Filter languages..."
+            items={[
+              { label: 'TypeScript', value: 'ts' },
+              { label: 'JavaScript', value: 'js' },
+              { label: 'Rust', value: 'rust' },
+              { label: 'Go', value: 'go' },
+              { label: 'Python', value: 'python' },
+              { label: 'Ruby', value: 'ruby' },
+              { label: 'Java', value: 'java' },
+              { label: 'C++', value: 'cpp' },
+            ]}
+            onSelect={(item) => {
+              console.log('Selected:', item.label)
+            }}
+            onCancel={() => {
+              setCurrentView(undefined)
+            }}
+          />
+        </Box>
+      )}
+
+      {currentView === 'scroll-indicators' && orientation && (
+        <Box flexDirection="column">
+          <Text dimColor>Scroll Indicators — limit=3 with ▲/▼ counts:</Text>
+          <EnhancedSelectInput
+            showScrollIndicators
+            orientation={orientation}
+            limit={3}
+            items={[
+              { label: 'Alpha', value: 'a' },
+              { label: 'Bravo', value: 'b' },
+              { label: 'Charlie', value: 'c' },
+              { label: 'Delta', value: 'd' },
+              { label: 'Echo', value: 'e' },
+              { label: 'Foxtrot', value: 'f' },
+              { label: 'Golf', value: 'g' },
+              { label: 'Hotel', value: 'h' },
+            ]}
+            onSelect={(item) => {
+              console.log('Selected:', item.label)
+            }}
+            onCancel={() => {
+              setCurrentView(undefined)
+            }}
+          />
+        </Box>
+      )}
+
       {currentView === 'custom-indicators' && orientation && (
         <Box flexDirection="column">
           <Text dimColor>Item Specific Custom Indicators View:</Text>
@@ -145,14 +265,8 @@ export function Storybook() {
             onSelect={(item) => {
               if (item.value === 'back') {
                 setCurrentView(undefined)
-              }
-
-              if (item.value === 'hotkeys') {
-                setCurrentView('hotkeys')
-              }
-
-              if (item.value === 'custom-item') {
-                setCurrentView('custom-item')
+              } else {
+                setCurrentView(item.value as StorybookView)
               }
             }}
           />
@@ -182,36 +296,38 @@ export function Storybook() {
             }}
             orientation={orientation}
             items={[
-              {
-                label: 'View Hotkeys',
-                value: 'hotkeys',
-              },
-              {
-                label: 'View Custom Indicators',
-                value: 'indicators',
-              },
+              { label: 'View Hotkeys', value: 'hotkeys' },
+              { label: 'View Custom Indicators', value: 'indicators' },
               {
                 label: 'View Custom Item Component',
                 value: 'custom-item',
                 disabled: true,
               },
-              {
-                label: 'Go Back',
-                value: 'back',
-                hotkey: 'b',
-              },
+              { label: 'Go Back', value: 'back', hotkey: 'b' },
             ]}
             onSelect={(item) => {
-              if (item.value === 'back') {
-                setCurrentView(undefined)
-              }
+              switch (item.value) {
+                case 'back': {
+                  setCurrentView(undefined)
 
-              if (item.value === 'hotkeys') {
-                setCurrentView('hotkeys')
-              }
+                  break
+                }
+
+                case 'hotkeys': {
+                  setCurrentView('hotkeys')
+
+                  break
+                }
 
-              if (item.value === 'indicators') {
-                setCurrentView('custom-indicators')
+                case 'indicators': {
+                  setCurrentView('custom-indicators')
+
+                  break
+                }
+
+                default: {
+                  break
+                }
               }
             }}
           />
@@ -240,27 +356,13 @@ export function Storybook() {
                 value: 'custom-item',
                 hotkey: 'c',
               },
-              {
-                label: 'Go Back',
-                value: 'back',
-                hotkey: 'b',
-              },
+              { label: 'Go Back', value: 'back', hotkey: 'b' },
             ]}
             onSelect={(item) => {
               if (item.value === 'back') {
                 setCurrentView(undefined)
-              }
-
-              if (item.value === 'hotkeys') {
-                setCurrentView('hotkeys')
-              }
-
-              if (item.value === 'custom-indicators') {
-                setCurrentView('custom-indicators')
-              }
-
-              if (item.value === 'custom-item') {
-                setCurrentView('custom-item')
+              } else {
+                setCurrentView(item.value as StorybookView)
               }
             }}
           />