termcast 1.3.9

package/src/examples/internal/text-stacking.tsx

@@ -0,0 +1,90 @@
+import { render } from '@opentui/react'
+
+function TextStackingExample() {
+  const items = [
+    {
+      titleText:
+        'This is a very long text that should demonstrate how text behaves when it needs to wrap across multiple lines in the terminal interface',
+      accessories: ['⌘K', '␣'],
+    },
+    {
+      titleText:
+        'Another extremely verbose piece of text that contains way too many words and will definitely need to wrap to fit within the available space',
+      accessories: ['Development Badge', '🚀'],
+    },
+    {
+      titleText: 'Short text',
+      accessories: ['Very Long Accessory Text That Should Push Content', 'S'],
+    },
+    {
+      titleText:
+        'Yet another ridiculously long string of words that goes on and on without any consideration for the width of the terminal window',
+      accessories: ['Multiple Different Tags', 'Tag'],
+    },
+    {
+      titleText:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua',
+      accessories: ['Latin Placeholder Text', 'L'],
+    },
+    {
+      titleText:
+        'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat',
+      accessories: ['⚡ Lightning Fast Performance', '⚡'],
+    },
+    {
+      titleText:
+        'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur',
+      accessories: ['End of Section Marker', 'E'],
+    },
+    {
+      titleText:
+        'A medium length text that still wraps but not as much as the really long ones above',
+      accessories: ['Medium Priority Task', 'M'],
+    },
+  ]
+
+  return (
+    <box style={{ flexDirection: 'column' }}>
+      {items.map((item, index) => {
+        const accessoryElements = item.accessories.map((acc) => (
+          <text fg='blue'>{acc}</text>
+        ))
+
+        return (
+          <box
+            key={index}
+            style={{
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+              paddingLeft: 1,
+              paddingRight: 1,
+            }}
+            border={false}
+          >
+            <box
+              style={{
+                flexDirection: 'row',
+                flexGrow: 1,
+                flexShrink: 1,
+              }}
+            >
+              <text>{item.titleText}</text>
+            </box>
+            {accessoryElements.length > 0 && (
+              <box style={{ flexDirection: 'row' }}>
+                {accessoryElements.map((elem, i) => (
+                  <box key={i} style={{ flexDirection: 'row' }}>
+                    {i > 0 && <text> </text>}
+                    {elem}
+                  </box>
+                ))}
+              </box>
+            )}
+          </box>
+        )
+      })}
+    </box>
+  )
+}
+
+render(<TextStackingExample />)

package/src/examples/list-dropdown-default.tsx

@@ -0,0 +1,69 @@
+import React, { ReactElement } from 'react'
+import { List, Action, ActionPanel } from 'termcast'
+import { renderWithProviders } from 'termcast/src/utils'
+import type { DropdownProps } from 'termcast/src/components/list'
+
+function FruitDropdown(props: {
+  value?: string
+  onChange?: (value: string) => void
+}): any {
+  return (
+    <List.Dropdown
+      tooltip='Filter by category'
+      placeholder='Select category...'
+      onChange={props.onChange}
+      value={props.value}
+    >
+      <List.Dropdown.Item value='apple' title='Apple' />
+      <List.Dropdown.Item value='banana' title='Banana' />
+      <List.Dropdown.Item value='orange' title='Orange' />
+      <List.Dropdown.Item value='grape' title='Grape' />
+    </List.Dropdown>
+  )
+}
+
+function ListDropdownDefaultExample() {
+  const [selectedFruit, setSelectedFruit] = React.useState<string>()
+  const [selectedVegetable, setSelectedVegetable] = React.useState<string>()
+
+  return (
+    <List
+      navigationTitle='Dropdown Default Value Example'
+      searchBarAccessory={
+        (
+          <FruitDropdown value={selectedFruit} onChange={setSelectedFruit} />
+        ) as ReactElement<DropdownProps>
+      }
+    >
+      <List.Item
+        title='First Item'
+        subtitle='This list has a dropdown'
+        actions={
+          <ActionPanel>
+            <Action
+              title='Show Selected Fruit'
+              onAction={() => console.log(`Selected fruit: ${selectedFruit}`)}
+            />
+          </ActionPanel>
+        }
+      />
+      <List.Item
+        title='Second Item'
+        subtitle='The dropdown should default to first item'
+        actions={
+          <ActionPanel>
+            <Action
+              title='Show Another Dropdown'
+              onAction={() => console.log('Another dropdown')}
+            />
+          </ActionPanel>
+        }
+      />
+      <List.Section title='Vegetables'>
+        <List.Item title='Carrot' subtitle='With another dropdown' />
+      </List.Section>
+    </List>
+  )
+}
+
+renderWithProviders(<ListDropdownDefaultExample />)

package/src/examples/list-dropdown-default.vitest.tsx

@@ -0,0 +1,187 @@
+// node-pty does not work in bun, so we use vitest to run this test
+import { test, expect, afterEach, beforeEach } from 'vitest'
+import { NodeTuiDriver } from 'termcast/src/e2e-node'
+
+let driver: NodeTuiDriver
+
+beforeEach(() => {
+  driver = new NodeTuiDriver(
+    'bun',
+    ['src/examples/list-dropdown-default.tsx'],
+    {
+      cols: 80,
+      rows: 30,
+    },
+  )
+})
+
+afterEach(() => {
+  driver?.dispose()
+})
+
+test('dropdown defaults to first item when no value is provided', async () => {
+  await driver.text({
+    waitFor: (text) => {
+      // wait for list to show up
+      return /Dropdown Default Value Example/i.test(text)
+    },
+  })
+
+  // Small delay to ensure dropdown is initialized with default value
+  await driver.waitIdle()
+
+  const initialSnapshot = await driver.text()
+
+  expect(initialSnapshot).toMatchInlineSnapshot(`
+    "
+
+     Dropdown Default Value Example ───────────────────────────────────────────
+
+
+     Search...                                                          Apple ▾
+
+
+    ›First Item This list has a dropdown
+     Second Item The dropdown should default to first item
+
+     Vegetables
+     Carrot With another dropdown
+
+
+     ↵ select   ↑↓ navigate   ^k actions"
+  `)
+
+  // The dropdown should show "Apple" as the default value
+  // since it's the first item and no value/defaultValue was provided
+}, 10000)
+
+test('dropdown opens and shows items', async () => {
+  await driver.text({
+    waitFor: (text) => {
+      return /Dropdown Default Value Example/i.test(text)
+    },
+  })
+
+  // Open dropdown with ctrl+p
+  await driver.keys.ctrlP()
+
+  const dropdownOpenSnapshot = await driver.text()
+  expect(dropdownOpenSnapshot).toMatchInlineSnapshot(`
+    "
+
+
+      Filter by category                                                 esc
+
+      Select category...
+     ›Apple
+      Banana
+      Orange
+      Grape
+
+
+      ↵ select   ↑↓ navigate
+
+
+    ↵ select   ↑↓ navigate   ^k actions"
+  `)
+
+  // Navigate down to second item
+  await driver.keys.down()
+
+  const afterDownSnapshot = await driver.text()
+  expect(afterDownSnapshot).toMatchInlineSnapshot(`
+    "
+
+
+      Filter by category                                                 esc
+
+      Select category...
+      Apple
+     ›Banana
+      Orange
+      Grape
+
+
+      ↵ select   ↑↓ navigate
+
+
+    ↵ select   ↑↓ navigate   ^k actions"
+  `)
+
+  // Select the second item
+  await driver.keys.enter()
+
+  const afterSelectSnapshot = await driver.text()
+  expect(afterSelectSnapshot).toMatchInlineSnapshot(`
+    "
+
+     Dropdown Default Value Example ───────────────────────────────────────────
+
+
+     Search...                                                         Banana ▾
+
+
+    ›First Item This list has a dropdown
+     Second Item The dropdown should default to first item
+
+     Vegetables
+     Carrot With another dropdown
+
+
+     ↵ select   ↑↓ navigate   ^k actions"
+  `)
+}, 10000)
+
+test('clicking dropdown opens it', async () => {
+  await driver.text({
+    waitFor: (text) => {
+      return /Dropdown Default Value Example/i.test(text)
+    },
+  })
+
+  // Click on the dropdown (it should show "Apple" by default)
+  await driver.clickText('Apple')
+
+  const afterClickSnapshot = await driver.text()
+  expect(afterClickSnapshot).toMatchInlineSnapshot(`
+    "
+
+
+      Filter by category                                                 esc
+
+      Select category...
+     ›Apple
+      Banana
+      Orange
+      Grape
+
+
+      ↵ select   ↑↓ navigate
+
+
+    ↵ select   ↑↓ navigate   ^k actions"
+  `)
+
+  // Select Orange
+  await driver.clickText('Orange')
+
+  const afterSelectOrangeSnapshot = await driver.text()
+  expect(afterSelectOrangeSnapshot).toMatchInlineSnapshot(`
+    "
+
+     Dropdown Default Value Example ───────────────────────────────────────────
+
+
+     Search...                                                         Orange ▾
+
+
+    ›First Item This list has a dropdown
+     Second Item The dropdown should default to first item
+
+     Vegetables
+     Carrot With another dropdown
+
+
+     ↵ select   ↑↓ navigate   ^k actions"
+  `)
+}, 10000)

package/src/examples/list-fetch-data.tsx

@@ -0,0 +1,123 @@
+import React, { useState, useEffect } from 'react'
+import { List, showToast, Toast } from 'termcast'
+import { renderWithProviders } from 'termcast/src/utils'
+
+interface Category {
+  category: string
+  total: number
+}
+
+interface SvgItem {
+  id: number
+  title: string
+  category: string
+  route: string | { light: string; dark: string }
+}
+
+// Simulated fetch functions
+async function fetchCategories(): Promise<Category[]> {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve([
+        { category: 'Icons', total: 3 },
+        { category: 'Illustrations', total: 2 },
+      ])
+    }, 100)
+  })
+}
+
+async function fetchSvgs(): Promise<SvgItem[]> {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve([
+        {
+          id: 1,
+          title: 'Home Icon',
+          category: 'Icons',
+          route: '/icons/home.svg',
+        },
+        {
+          id: 2,
+          title: 'User Icon',
+          category: 'Icons',
+          route: '/icons/user.svg',
+        },
+        {
+          id: 3,
+          title: 'Settings Icon',
+          category: 'Icons',
+          route: '/icons/settings.svg',
+        },
+        {
+          id: 4,
+          title: 'Welcome Banner',
+          category: 'Illustrations',
+          route: '/illustrations/welcome.svg',
+        },
+        {
+          id: 5,
+          title: 'Hero Image',
+          category: 'Illustrations',
+          route: '/illustrations/hero.svg',
+        },
+      ])
+    }, 100)
+  })
+}
+
+const AllList = () => {
+  const [categories, setCategories] = useState<Category[]>([])
+  const [svgs, setSvgs] = useState<SvgItem[]>([])
+  const [isLoading, setIsLoading] = useState(false)
+
+  useEffect(() => {
+    async function fetchData() {
+      setIsLoading(true)
+      try {
+        const svgs = await fetchSvgs()
+        const categories = await fetchCategories()
+        setSvgs(svgs)
+        setCategories(categories)
+      } catch (error) {
+        if (error instanceof Error) {
+          await showToast({
+            style: Toast.Style.Failure,
+            title: 'Loading Failed',
+            message: error.message,
+          })
+        }
+      }
+      setIsLoading(false)
+    }
+    fetchData()
+  }, [])
+
+  return (
+    <List navigationTitle='SVG Library' isLoading={isLoading}>
+      {categories.map((category, index) => {
+        const categoryItems = svgs.filter(
+          (svg) =>
+            svg.category === category.category ||
+            svg.category?.includes(category.category),
+        )
+        return (
+          <List.Section
+            title={category.category}
+            subtitle={category.total.toString()}
+            key={String(index)}
+          >
+            {categoryItems.map((svg) => (
+              <List.Item
+                key={String(svg.id)}
+                title={svg.title}
+                subtitle={`Category: ${svg.category}`}
+              />
+            ))}
+          </List.Section>
+        )
+      })}
+    </List>
+  )
+}
+
+renderWithProviders(<AllList />)

package/src/examples/list-fetch-data.vitest.tsx

@@ -0,0 +1,110 @@
+import { test, expect, beforeEach, afterEach } from 'vitest'
+import { NodeTuiDriver } from 'termcast/src/e2e-node'
+
+let driver: NodeTuiDriver
+
+beforeEach(() => {
+  driver = new NodeTuiDriver('bun', ['src/examples/list-fetch-data.tsx'], {
+    cols: 70,
+    rows: 50,
+  })
+})
+
+afterEach(() => {
+  driver?.dispose()
+})
+
+test('list shows initial items after fetch', async () => {
+  // Wait for initial loading state
+  await driver.text({
+    waitFor: (text) => {
+      return /SVG Library/i.test(text)
+    },
+  })
+
+  // Wait for items to actually appear
+  const afterFetchSnapshot = await driver.text({
+    waitFor: (text) => {
+      // Wait until we see at least one section title
+      return text.includes('Icons') || text.includes('Home Icon')
+    },
+    timeout: 2000,
+  })
+  expect(afterFetchSnapshot).toMatchInlineSnapshot(`
+    "
+
+     SVG Library ────────────────────────────────────────────────────
+
+     Search...
+
+
+     Icons
+    ›Home Icon Category: Icons
+     User Icon Category: Icons
+     Settings Icon Category: Icons
+
+     Illustrations
+     Welcome Banner Category: Illustrations
+     Hero Image Category: Illustrations
+
+
+     ↵ select   ↑↓ navigate   ^k actions"
+  `)
+
+  // Verify that categories and items are displayed
+  expect(afterFetchSnapshot).toContain('Icons')
+  expect(afterFetchSnapshot).toContain('Illustrations')
+  expect(afterFetchSnapshot).toContain('Home Icon')
+  expect(afterFetchSnapshot).toContain('User Icon')
+  expect(afterFetchSnapshot).toContain('Settings Icon')
+  expect(afterFetchSnapshot).toContain('Welcome Banner')
+  expect(afterFetchSnapshot).toContain('Hero Image')
+
+  // Test navigation
+  await driver.keys.down()
+  const afterDownSnapshot = await driver.text()
+  expect(afterDownSnapshot).toMatchInlineSnapshot(`
+    "
+
+     SVG Library ────────────────────────────────────────────────────
+
+     Search...
+
+
+     Icons
+     Home Icon Category: Icons
+    ›User Icon Category: Icons
+     Settings Icon Category: Icons
+
+     Illustrations
+     Welcome Banner Category: Illustrations
+     Hero Image Category: Illustrations
+
+
+     ↵ select   ↑↓ navigate   ^k actions"
+  `)
+
+  await driver.keys.down()
+  await driver.keys.down()
+  const afterThreeDownsSnapshot = await driver.text()
+  expect(afterThreeDownsSnapshot).toMatchInlineSnapshot(`
+    "
+
+     SVG Library ────────────────────────────────────────────────────
+
+     Search...
+
+
+     Icons
+     Home Icon Category: Icons
+     User Icon Category: Icons
+     Settings Icon Category: Icons
+
+     Illustrations
+    ›Welcome Banner Category: Illustrations
+     Hero Image Category: Illustrations
+
+
+     ↵ select   ↑↓ navigate   ^k actions"
+  `)
+}, 10000)