termcast 1.3.9

package/src/examples/list-with-detail.tsx

@@ -0,0 +1,161 @@
+import React, { useState } from 'react'
+import { Action, ActionPanel, List } from 'termcast'
+import { renderWithProviders } from '../utils'
+
+interface Pokemon {
+  name: string
+  height: number
+  weight: number
+  id: string
+  types: string[]
+  abilities: Array<{ name: string; isMainSeries: boolean }>
+}
+
+const pokemons: Pokemon[] = [
+  {
+    name: 'bulbasaur',
+    height: 7,
+    weight: 69,
+    id: '001',
+    types: ['Grass', 'Poison'],
+    abilities: [
+      { name: 'Chlorophyll', isMainSeries: true },
+      { name: 'Overgrow', isMainSeries: true },
+    ],
+  },
+  {
+    name: 'ivysaur',
+    height: 10,
+    weight: 130,
+    id: '002',
+    types: ['Grass', 'Poison'],
+    abilities: [
+      { name: 'Chlorophyll', isMainSeries: true },
+      { name: 'Overgrow', isMainSeries: true },
+    ],
+  },
+  {
+    name: 'charmander',
+    height: 6,
+    weight: 85,
+    id: '004',
+    types: ['Fire'],
+    abilities: [
+      { name: 'Blaze', isMainSeries: true },
+      { name: 'Solar Power', isMainSeries: true },
+    ],
+  },
+  {
+    name: 'charmeleon',
+    height: 11,
+    weight: 190,
+    id: '005',
+    types: ['Fire'],
+    abilities: [
+      { name: 'Blaze', isMainSeries: true },
+      { name: 'Solar Power', isMainSeries: true },
+    ],
+  },
+  {
+    name: 'squirtle',
+    height: 5,
+    weight: 90,
+    id: '007',
+    types: ['Water'],
+    abilities: [
+      { name: 'Torrent', isMainSeries: true },
+      { name: 'Rain Dish', isMainSeries: true },
+    ],
+  },
+  {
+    name: 'wartortle',
+    height: 10,
+    weight: 225,
+    id: '008',
+    types: ['Water'],
+    abilities: [
+      { name: 'Torrent', isMainSeries: true },
+      { name: 'Rain Dish', isMainSeries: true },
+    ],
+  },
+]
+
+const ListWithDetailExample = () => {
+  const [showingDetail, setShowingDetail] = useState(true)
+
+  return (
+    <List
+      navigationTitle='Pokemon List'
+      searchBarPlaceholder='Search Pokemon...'
+      isShowingDetail={showingDetail}
+    >
+      {pokemons.map((pokemon) => {
+        const detailComponent = showingDetail ? (
+          <List.Item.Detail
+            markdown={`# ${pokemon.name}\n\n![Illustration](https://assets.pokemon.com/assets/cms2/img/pokedex/full/${
+              pokemon.id
+            }.png)\n\n## Types\n${pokemon.types.join(' / ')}\n\n## Characteristics\n- Height: ${
+              pokemon.height / 10
+            }m\n- Weight: ${pokemon.weight / 10}kg\n\n## Abilities\n${pokemon.abilities
+              .map((a) => `- ${a.name}`)
+              .join('\n')}`}
+            metadata={
+              (<List.Item.Detail.Metadata>
+                <List.Item.Detail.Metadata.Label title='Types' />
+                {pokemon.types.flatMap((type, index) => [
+                  index > 0 ? <List.Item.Detail.Metadata.Separator /> : null,
+                  <List.Item.Detail.Metadata.Label title={type} />
+                ].filter(Boolean))}
+                <List.Item.Detail.Metadata.Separator />
+                <List.Item.Detail.Metadata.Label title='Characteristics' />
+                <List.Item.Detail.Metadata.Label title='Height' text={`${pokemon.height / 10}m`} />
+                <List.Item.Detail.Metadata.Separator />
+                <List.Item.Detail.Metadata.Label title='Weight' text={`${pokemon.weight / 10}kg`} />
+                <List.Item.Detail.Metadata.Separator />
+                <List.Item.Detail.Metadata.Label title='Abilities' />
+                {pokemon.abilities.flatMap((ability, index) => [
+                  index > 0 ? <List.Item.Detail.Metadata.Separator /> : null,
+                  <List.Item.Detail.Metadata.Label
+                    title={ability.name}
+                    text={ability.isMainSeries ? 'Main Series' : 'Hidden'}
+                  />
+                ].filter(Boolean))}
+              </List.Item.Detail.Metadata>) as any
+            }
+          />
+        ) : null
+
+        const props: any = showingDetail
+          ? { detail: detailComponent }
+          : { accessories: [{ text: pokemon.types.join(' / ') }] }
+        return (
+          <List.Item
+            key={pokemon.id}
+            id={pokemon.id}
+            title={pokemon.name}
+            subtitle={`#${pokemon.id}`}
+            {...props}
+            actions={
+              <ActionPanel>
+                <ActionPanel.Section>
+                  <Action
+                    title='Toggle Detail'
+                    onAction={() => setShowingDetail(!showingDetail)}
+                  />
+                  <Action
+                    title='View on Pokemon.com'
+                    onAction={() => {
+                      console.log(`Opening https://www.pokemon.com/us/pokedex/${pokemon.name}`)
+                    }}
+                  />
+                </ActionPanel.Section>
+              </ActionPanel>
+            }
+          />
+        )
+      })}
+    </List>
+  )
+}
+
+renderWithProviders(<ListWithDetailExample />)

package/src/examples/list-with-detail.vitest.tsx

@@ -0,0 +1,468 @@
+// 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-with-detail.tsx'], {
+    cols: 80,
+    rows: 30,
+  })
+})
+
+afterEach(() => {
+  driver?.dispose()
+})
+
+test('list with detail view display and navigation', async () => {
+  const initialSnapshot = await driver.text({
+    waitFor: (text) => {
+      // wait for list to show up with detail view
+      return (
+        /Pokemon List/i.test(text) &&
+        text.includes('bulbasaur') &&
+        text.includes('#001')
+      )
+    },
+  })
+
+  expect(initialSnapshot).toMatchInlineSnapshot(`
+    "
+
+     Pokemon List ─────────────────────────────────────────────────────────────
+
+     Search Pokemon...
+
+    ›bulbasaur #001                      │ # bulbasaur
+     ivysaur #002                        │
+     charmander #004                     │ ![Illustration](https://assets.pokemon.
+     charmeleon #005                     │
+     squirtle #007                       │ ## Types
+     wartortle #008                      │ Grass / Poison
+                                         │
+                                         │ ## Characteristics
+     ↵ select   ↑↓ navigate   ^k actions │ - Height: 0.7m
+                                         │ - Weight: 6.9kg
+                                         │
+                                         │ ## Abilities
+                                         │ - Chlorophyll
+                                         │ - Overgrow
+                                         │ ───────────────────────────────────────
+                                         │
+                                         │ Types:
+                                         │
+                                         │ Grass:
+                                         │ ─────────────────
+                                         │
+                                         │ Poison:
+                                         │ ─────────────────
+                                         │"
+  `)
+
+  // Navigate down to next pokemon
+  await driver.keys.down()
+
+  const afterDownSnapshot = await driver.text()
+  expect(afterDownSnapshot).toMatchInlineSnapshot(`
+    "
+
+     Pokemon List ─────────────────────────────────────────────────────────────
+
+     Search Pokemon...
+
+     bulbasaur #001                      │ # ivysaur
+    ›ivysaur #002                        │
+     charmander #004                     │ ![Illustration](https://assets.pokemon.
+     charmeleon #005                     │
+     squirtle #007                       │ ## Types
+     wartortle #008                      │ Grass / Poison
+                                         │
+                                         │ ## Characteristics
+     ↵ select   ↑↓ navigate   ^k actions │ - Height: 1m
+                                         │ - Weight: 13kg
+                                         │
+                                         │ ## Abilities
+                                         │ - Chlorophyll
+                                         │ - Overgrow
+                                         │ ───────────────────────────────────────
+                                         │
+                                         │ Types:
+                                         │
+                                         │ Grass:
+                                         │ ─────────────────
+                                         │
+                                         │ Poison:
+                                         │ ─────────────────
+                                         │"
+  `)
+
+  // Navigate down to charmander
+  await driver.keys.down()
+
+  const charmanderSnapshot = await driver.text()
+  expect(charmanderSnapshot).toMatchInlineSnapshot(`
+    "
+
+     Pokemon List ─────────────────────────────────────────────────────────────
+
+     Search Pokemon...
+
+     bulbasaur #001                      │ # charmander
+     ivysaur #002                        │
+    ›charmander #004                     │ ![Illustration](https://assets.pokemon.
+     charmeleon #005                     │
+     squirtle #007                       │ ## Types
+     wartortle #008                      │ Fire
+                                         │
+                                         │ ## Characteristics
+     ↵ select   ↑↓ navigate   ^k actions │ - Height: 0.6m
+                                         │ - Weight: 8.5kg
+                                         │
+                                         │ ## Abilities
+                                         │ - Blaze
+                                         │ - Solar Power
+                                         │ ───────────────────────────────────────
+                                         │
+                                         │ Types:
+                                         │
+                                         │ Fire:
+                                         │ ─────────────────
+                                         │
+                                         │ Characteristics:
+                                         │ Height:        0.6m
+                                         │"
+  `)
+
+  // Open actions
+  await driver.keys.ctrlK()
+
+  const actionsSnapshot = await driver.text()
+  expect(actionsSnapshot).toMatchInlineSnapshot(`
+    "
+
+    Pokemon List ─────────────────────────────────────────────────────────────
+
+    Search Pokemon...
+
+    bulbasaur #001                      │ # charmander
+
+                                                                         esc   n.
+
+      Search actions...
+     ›Toggle Detail
+      View on Pokemon.com
+
+
+      ↵ select   ↑↓ navigate
+
+                                        │ ## Abilities
+                                        │ - Blaze
+                                        │ - Solar Power
+                                        │ ───────────────────────────────────────
+                                        │
+                                        │ Types:
+                                        │
+                                        │ Fire:
+                                        │ ─────────────────
+                                        │
+                                        │ Characteristics:
+                                        │ Height:        0.6m
+                                        │"
+  `)
+
+  // Select "Toggle Detail" action
+  await driver.keys.enter()
+
+  const afterToggleSnapshot = await driver.text({
+    waitFor: (text) => {
+      // Wait for accessories to appear (detail view is hidden)
+      return text.includes('Grass / Poison') || text.includes('Fire')
+    },
+  })
+  expect(afterToggleSnapshot).toMatchInlineSnapshot(`
+    "
+
+     Pokemon List ─────────────────────────────────────────────────────────────
+
+     Search Pokemon...
+
+     bulbasaur #001                                              Grass / Poison
+     ivysaur #002                                                Grass / Poison
+    ›charmander #004                                                       Fire
+     charmeleon #005                                                       Fire
+     squirtle #007                                                        Water
+     wartortle #008                                                       Water
+
+
+     ↵ select   ↑↓ navigate   ^k actions"
+  `)
+
+  // Open actions again and toggle detail back on
+  await driver.keys.ctrlK()
+  await driver.keys.enter()
+
+  const detailOnAgainSnapshot = await driver.text({
+    waitFor: (text) => {
+      // Wait for detail view to reappear
+      return !text.includes('Grass / Poison') && !text.includes('Fire')
+    },
+  })
+  expect(detailOnAgainSnapshot).toMatchInlineSnapshot(`
+    "
+
+     Pokemon List ─────────────────────────────────────────────────────────────
+
+     Search Pokemon...
+
+     bulbasaur #001                       │ # charmander
+     ivysaur #002                         │
+    ›charmander #004                      │ ![Illustration](https://assets.poke
+     charmeleon #005                      │
+     squirtle #007                        │ ## Types
+     wartortle #008                       │ Fire
+                                          │
+                                          │ ## Characteristics
+     ↵ select   ↑↓ navigate   ^k actions  │ - Height: 0.6m
+                                          │ - Weight: 8.5kg
+                                          │
+                                          │ ## Abilities
+                                          │ - Blaze
+                                          │ - Solar Power
+                                          │ ───────────────────────────────────
+                                          │
+                                          │ Types:
+                                          │
+                                          │ Fire:
+                                          │ ─────────────────
+                                          │
+                                          │ Characteristics:
+                                          │ Height:        0.6m
+                                          │"
+  `)
+}, 15000)
+
+test('list detail view search functionality', async () => {
+  await driver.text({
+    waitFor: (text) => {
+      // wait for list to show up
+      return /Pokemon List/i.test(text)
+    },
+  })
+
+  // Search for "char"
+  await driver.keys.type('char')
+
+  const searchCharSnapshot = await driver.text({
+    waitFor: (text) => {
+      return /char/i.test(text) && text.includes('charmander')
+    },
+  })
+  expect(searchCharSnapshot).toMatchInlineSnapshot(`
+    "
+
+    Pokemon List ─────────────────────────────────────────────────────────────
+
+    char
+
+    charmander #004                     │ # bulbasaur
+    charmeleon #005                     │
+                                        │ ![Illustration](https://assets.pokemon.
+                                        │
+    ↵ select   ↑↓ navigate   ^k actions │ ## Types
+                                        │ Grass / Poison
+                                        │
+                                        │ ## Characteristics
+                                        │ - Height: 0.7m
+                                        │ - Weight: 6.9kg
+                                        │
+                                        │ ## Abilities
+                                        │ - Chlorophyll
+                                        │ - Overgrow
+                                        │ ───────────────────────────────────────
+                                        │
+                                        │ Types:
+                                        │
+                                        │ Grass:
+                                        │ ─────────────────
+                                        │
+                                        │ Poison:
+                                        │ ─────────────────
+                                        │"
+  `)
+
+  // Clear search
+  await driver.keys.backspace()
+  await driver.keys.backspace()
+  await driver.keys.backspace()
+  await driver.keys.backspace()
+
+  // Search for "water"
+  await driver.keys.type('water')
+
+  const searchWaterSnapshot = await driver.text({
+    waitFor: (text) => {
+      return /water/i.test(text) && text.includes('squirtle')
+    },
+  })
+  expect(searchWaterSnapshot).toMatchInlineSnapshot(`
+    "
+
+    Pokemon List ─────────────────────────────────────────────────────────────
+
+    water
+
+                                        │ # bulbasaur
+                                        │
+    ↵ select   ↑↓ navigate   ^k actions │ ![Illustration](https://assets.pokemon.
+                                        │
+                                        │ ## Types
+                                        │ Grass / Poison
+                                        │
+                                        │ ## Characteristics
+                                        │ - Height: 0.7m
+                                        │ - Weight: 6.9kg
+                                        │
+                                        │ ## Abilities
+                                        │ - Chlorophyll
+                                        │ - Overgrow
+                                        │ ───────────────────────────────────────
+                                        │
+                                        │ Types:
+                                        │
+                                        │ Grass:
+                                        │ ─────────────────
+                                        │
+                                        │ Poison:
+                                        │ ─────────────────
+                                        │"
+  `)
+
+  // Navigate down to wartortle
+  await driver.keys.down()
+
+  const wartortleSnapshot = await driver.text()
+  expect(wartortleSnapshot).toMatchInlineSnapshot(`
+    "
+
+    Pokemon List ─────────────────────────────────────────────────────────────
+
+    water
+
+                                        │ # bulbasaur
+                                        │
+    ↵ select   ↑↓ navigate   ^k actions │ ![Illustration](https://assets.pokemon.
+                                        │
+                                        │ ## Types
+                                        │ Grass / Poison
+                                        │
+                                        │ ## Characteristics
+                                        │ - Height: 0.7m
+                                        │ - Weight: 6.9kg
+                                        │
+                                        │ ## Abilities
+                                        │ - Chlorophyll
+                                        │ - Overgrow
+                                        │ ───────────────────────────────────────
+                                        │
+                                        │ Types:
+                                        │
+                                        │ Grass:
+                                        │ ─────────────────
+                                        │
+                                        │ Poison:
+                                        │ ─────────────────
+                                        │"
+  `)
+}, 10000)
+
+test('list detail metadata rendering', async () => {
+  const initialSnapshot = await driver.text({
+    waitFor: (text) => {
+      // wait for list with metadata to show up
+      return (
+        /Pokemon List/i.test(text) &&
+        text.includes('bulbasaur') &&
+        text.includes('Types') &&
+        text.includes('Height')
+      )
+    },
+  })
+
+  expect(initialSnapshot).toMatchInlineSnapshot(`
+    "
+
+     Pokemon List ─────────────────────────────────────────────────────────────
+
+     Search Pokemon...
+
+    ›bulbasaur #001                      │ # bulbasaur
+     ivysaur #002                        │
+     charmander #004                     │ ![Illustration](https://assets.pokemon.
+     charmeleon #005                     │
+     squirtle #007                       │ ## Types
+     wartortle #008                      │ Grass / Poison
+                                         │
+                                         │ ## Characteristics
+     ↵ select   ↑↓ navigate   ^k actions │ - Height: 0.7m
+                                         │ - Weight: 6.9kg
+                                         │
+                                         │ ## Abilities
+                                         │ - Chlorophyll
+                                         │ - Overgrow
+                                         │ ───────────────────────────────────────
+                                         │
+                                         │ Types:
+                                         │
+                                         │ Grass:
+                                         │ ─────────────────
+                                         │
+                                         │ Poison:
+                                         │ ─────────────────
+                                         │"
+  `)
+
+  // Navigate to a different pokemon
+  await driver.keys.down()
+  await driver.keys.down()
+  await driver.keys.down()
+  await driver.keys.down()
+
+  const squirtleSnapshot = await driver.text({
+    waitFor: (text) => {
+      return text.includes('squirtle') && text.includes('Water')
+    },
+  })
+  expect(squirtleSnapshot).toMatchInlineSnapshot(`
+    "
+
+     Pokemon List ─────────────────────────────────────────────────────────────
+
+     Search Pokemon...
+
+     bulbasaur #001                      │ # squirtle
+     ivysaur #002                        │
+     charmander #004                     │ ![Illustration](https://assets.pokemon.
+     charmeleon #005                     │
+    ›squirtle #007                       │ ## Types
+     wartortle #008                      │ Water
+                                         │
+                                         │ ## Characteristics
+     ↵ select   ↑↓ navigate   ^k actions │ - Height: 0.5m
+                                         │ - Weight: 9kg
+                                         │
+                                         │ ## Abilities
+                                         │ - Torrent
+                                         │ - Rain Dish
+                                         │ ───────────────────────────────────────
+                                         │
+                                         │ Types:
+                                         │
+                                         │ Water:
+                                         │ ─────────────────
+                                         │
+                                         │ Characteristics:
+                                         │ Height:        0.5m
+                                         │"
+  `)
+}, 10000)