Skip to content

chore: update storybook to demo all features #29

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
gfargo wants to merge 1 commit into from
Closed

chore: update storybook to demo all features #29

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
234 changes: 168 additions & 66 deletions src/storybook.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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)
}
}}
/>
Expand Down Expand Up @@ -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
}
}
}}
/>
Expand Down Expand Up @@ -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)
}
}}
/>
Expand Down
Loading