termcast 1.3.9

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

@@ -0,0 +1,97 @@
+import React, { useState, ReactElement } from 'react'
+import { List, renderWithProviders } from 'termcast'
+import type { DropdownProps } from 'termcast/src/components/list'
+
+function DrinkDropdown(props: {
+  drinkTypes: { id: string; name: string }[]
+  onDrinkTypeChange: (value: string) => void
+}): any {
+  const { drinkTypes, onDrinkTypeChange } = props
+  return (
+    <List.Dropdown
+      tooltip='Select Drink Type'
+      storeValue
+      filtering
+      onChange={(newValue) => {
+        onDrinkTypeChange(newValue)
+      }}
+    >
+      <List.Dropdown.Section title='Alcoholic Beverages'>
+        {drinkTypes
+          .filter((dt) => ['beer', 'wine'].includes(dt.id))
+          .map((drinkType) => (
+            <List.Dropdown.Item
+              key={drinkType.id}
+              title={drinkType.name}
+              value={drinkType.id}
+            />
+          ))}
+      </List.Dropdown.Section>
+      <List.Dropdown.Section title='Non-Alcoholic'>
+        {drinkTypes
+          .filter((dt) => ['soda', 'juice'].includes(dt.id))
+          .map((drinkType) => (
+            <List.Dropdown.Item
+              key={drinkType.id}
+              title={drinkType.name}
+              value={drinkType.id}
+            />
+          ))}
+      </List.Dropdown.Section>
+    </List.Dropdown>
+  )
+}
+
+function ListWithDropdownExample() {
+  const [selectedDrinkType, setSelectedDrinkType] = useState('all')
+  const drinkTypes = [
+    { id: 'beer', name: 'Beer' },
+    { id: 'wine', name: 'Wine' },
+    { id: 'soda', name: 'Soda' },
+    { id: 'juice', name: 'Juice' },
+  ]
+
+  const drinks = [
+    { id: '1', name: 'Augustiner Helles', type: 'beer' },
+    { id: '2', name: 'Camden Hells', type: 'beer' },
+    { id: '3', name: 'Leffe Blonde', type: 'beer' },
+    { id: '4', name: 'Sierra Nevada IPA', type: 'beer' },
+    { id: '5', name: 'Chateau Margaux', type: 'wine' },
+    { id: '6', name: 'Pinot Noir', type: 'wine' },
+    { id: '7', name: 'Coca Cola', type: 'soda' },
+    { id: '8', name: 'Sprite', type: 'soda' },
+    { id: '9', name: 'Orange Juice', type: 'juice' },
+    { id: '10', name: 'Apple Juice', type: 'juice' },
+  ]
+
+  const filteredDrinks =
+    selectedDrinkType === 'all'
+      ? drinks
+      : drinks.filter((d) => d.type === selectedDrinkType)
+
+  return (
+    <List
+      navigationTitle='Search Beers'
+      // searchBarPlaceholder="Search your favorite drink"
+      searchBarAccessory={
+        (
+          <DrinkDropdown
+            drinkTypes={drinkTypes}
+            onDrinkTypeChange={setSelectedDrinkType}
+          />
+        ) as ReactElement<DropdownProps>
+      }
+    >
+      {filteredDrinks.map((drink) => (
+        <List.Item
+          key={drink.id}
+          title={drink.name}
+          subtitle={drinkTypes.find((dt) => dt.id === drink.type)?.name}
+        />
+      ))}
+    </List>
+  )
+}
+
+// Render the example
+renderWithProviders(<ListWithDropdownExample />)

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

@@ -0,0 +1,324 @@
+// 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-dropdown.tsx'], {
+    cols: 70,
+    rows: 50,
+  })
+})
+
+afterEach(() => {
+  driver?.dispose()
+})
+
+test('list with dropdown navigation', async () => {
+  const initialSnapshot = await driver.text({
+    waitFor: (text) => {
+      // wait for list to show up with all items loaded
+      return (
+        /search beers/i.test(text) &&
+        text.includes('Beer ▾') &&
+        text.includes('Augustiner Helles') &&
+        text.includes('Apple Juice')
+      )
+    },
+  })
+
+  expect(initialSnapshot).toMatchInlineSnapshot(`
+    "
+
+     Search Beers ───────────────────────────────────────────────────
+
+
+     Search...                                                 Beer ▾
+
+
+    ›Augustiner Helles Beer
+     Camden Hells Beer
+     Leffe Blonde Beer
+     Sierra Nevada IPA Beer
+     Chateau Margaux Wine
+     Pinot Noir Wine
+     Coca Cola Soda
+     Sprite Soda
+     Orange Juice Juice
+     Apple Juice Juice
+
+
+     ↵ select   ↑↓ navigate   ^k actions"
+  `)
+
+  // Press ctrl+p to open dropdown
+  await driver.keys.ctrlP()
+
+  // Capture snapshot immediately after pressing ctrl+p
+  const immediatelyAfterCtrlPSnapshot = await driver.text()
+  expect(immediatelyAfterCtrlPSnapshot).toMatchInlineSnapshot(`
+    "
+
+
+     Select Drink Type                                          esc
+
+     Search...
+
+     Alcoholic Beverages
+    ›Beer
+     Wine
+
+     Non-Alcoholic
+     Soda
+     Juice
+
+
+     ↵ select   ↑↓ navigate
+
+
+
+     ↵ select   ↑↓ navigate   ^k actions"
+  `)
+
+  const afterCtrlPSnapshot = await driver.text({
+    waitFor: (text) => {
+      // wait for dropdown to show up
+      return /select drink type/i.test(text)
+    },
+  })
+  expect(afterCtrlPSnapshot).toMatchInlineSnapshot(`
+    "
+
+
+     Select Drink Type                                          esc
+
+     Search...
+
+     Alcoholic Beverages
+    ›Beer
+     Wine
+
+     Non-Alcoholic
+     Soda
+     Juice
+
+
+     ↵ select   ↑↓ navigate
+
+
+
+     ↵ select   ↑↓ navigate   ^k actions"
+  `)
+
+  // Navigate down in dropdown
+  await driver.keys.down()
+
+  const afterDownSnapshot = await driver.text()
+  expect(afterDownSnapshot).toMatchInlineSnapshot(`
+    "
+
+
+     Select Drink Type                                          esc
+
+     Search...
+
+     Alcoholic Beverages
+     Beer
+    ›Wine
+
+     Non-Alcoholic
+     Soda
+     Juice
+
+
+     ↵ select   ↑↓ navigate
+
+
+
+     ↵ select   ↑↓ navigate   ^k actions"
+  `)
+
+  // Navigate down again
+  await driver.keys.down()
+
+  const afterSecondDownSnapshot = await driver.text()
+  expect(afterSecondDownSnapshot).toMatchInlineSnapshot(`
+    "
+
+
+     Select Drink Type                                          esc
+
+     Search...
+
+     Alcoholic Beverages
+     Beer
+     Wine
+
+     Non-Alcoholic
+    ›Soda
+     Juice
+
+
+     ↵ select   ↑↓ navigate
+
+
+
+     ↵ select   ↑↓ navigate   ^k actions"
+  `)
+
+  // Select the current item
+  await driver.keys.enter()
+
+  const afterSelectSnapshot = await driver.text({
+    waitFor: (text) => {
+      // wait for dropdown to close and list to update
+      return !text.includes('Select Drink Type')
+    },
+  })
+  expect(afterSelectSnapshot).toMatchInlineSnapshot(`
+      "
+
+       Search Beers ───────────────────────────────────────────────────
+
+
+       Search...                                                 Soda ▾
+
+
+      ›Coca Cola Soda
+       Sprite Soda
+
+
+       ↵ select   ↑↓ navigate   ^k actions"
+    `)
+}, 10000)
+
+test('list with dropdown search and filter', async () => {
+  await driver.text({
+    waitFor: (text) => {
+      // wait for list to show up with all items loaded
+      return (
+        /search beers/i.test(text) &&
+        text.includes('Beer ▾') &&
+        text.includes('Augustiner Helles') &&
+        text.includes('Apple Juice')
+      )
+    },
+  })
+
+  // Open dropdown
+  await driver.keys.ctrlP()
+
+  // Capture snapshot immediately after pressing ctrl+p
+  const immediatelyAfterCtrlPSnapshot = await driver.text()
+  expect(immediatelyAfterCtrlPSnapshot).toMatchInlineSnapshot(`
+    "
+
+
+     Select Drink Type                                          esc
+
+     Search...
+
+     Alcoholic Beverages
+    ›Beer
+     Wine
+
+     Non-Alcoholic
+     Soda
+     Juice
+
+
+     ↵ select   ↑↓ navigate
+
+
+
+     ↵ select   ↑↓ navigate   ^k actions"
+  `)
+
+  await driver.text({
+    waitFor: (text) => {
+      return /select drink type/i.test(text)
+    },
+  })
+
+  // Type to search in dropdown
+  await driver.keys.type('wine')
+
+  const afterSearchWineSnapshot = await driver.text({
+    waitFor: (text) => {
+      return /wine/i.test(text)
+    },
+  })
+  expect(afterSearchWineSnapshot).toMatchInlineSnapshot(`
+      "
+
+
+      Select Drink Type                                          esc
+
+      wine
+      Wine
+
+
+      ↵ select   ↑↓ navigate
+
+      Sierra Nevada IPA Beer
+      Chateau Margaux Wine
+      Pinot Noir Wine
+      Coca Cola Soda
+      Sprite Soda
+      Orange Juice Juice
+      Apple Juice Juice
+
+
+      ↵ select   ↑↓ navigate   ^k actions"
+    `)
+
+  // Select Wine
+  await driver.keys.enter()
+
+  const afterSelectWineSnapshot = await driver.text({
+    waitFor: (text) => {
+      // wait for dropdown to close
+      return !text.includes('Select Drink Type')
+    },
+  })
+  expect(afterSelectWineSnapshot).toMatchInlineSnapshot(`
+    "
+
+     Search Beers ───────────────────────────────────────────────────
+
+
+     Search...                                                 Beer ▾
+
+
+    ›Augustiner Helles Beer
+     Camden Hells Beer
+     Leffe Blonde Beer
+     Sierra Nevada IPA Beer
+
+
+     ↵ select   ↑↓ navigate   ^k actions"
+  `)
+
+  // Clear search in main list and type to search
+  await driver.keys.type('pinot')
+
+  const afterSearchPinotSnapshot = await driver.text({
+    waitFor: (text) => {
+      return /pinot/i.test(text)
+    },
+  })
+  expect(afterSearchPinotSnapshot).toMatchInlineSnapshot(`
+    "
+
+    Search Beers ───────────────────────────────────────────────────
+
+
+    pinot                                                     Beer ▾
+
+
+
+
+    ↵ select   ↑↓ navigate   ^k actions"
+  `)
+}, 10000)

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

@@ -0,0 +1,196 @@
+import {
+  renderWithProviders,
+  Detail,
+  Action,
+  ActionPanel,
+  showToast,
+  Toast,
+} from 'termcast'
+import List from 'termcast'
+import { useNavigation } from 'termcast/src/internal/navigation'
+import dedent from 'string-dedent'
+
+function SimpleListExample() {
+  const { push } = useNavigation()
+  return (
+    <List
+      navigationTitle='Simple List Example'
+      searchBarPlaceholder='Search items...'
+      onSelectionChange={(id) => {
+        console.log('Selected:', id)
+      }}
+    >
+      <List.Section title='Empty section should be hidden'>
+        {/* This section is intentionally left empty to demonstrate hiding */}
+      </List.Section>
+      <List.Section title='Fruits'>
+        <List.Item
+          id='apple'
+          title='Apple'
+          subtitle='Red and sweet'
+          keywords={['fruit', 'red']}
+          accessories={[{ text: 'Fresh' }, { tag: 'Popular' }]}
+          actions={
+            <ActionPanel>
+              <Action
+                title='View Details'
+                onAction={() =>
+                  push(
+                    <Detail
+                      markdown={dedent`
+                        # Apple
+
+                        A delicious red fruit that's sweet and crunchy.
+
+                        ## Nutrition Facts
+                        - High in fiber
+                        - Rich in antioxidants
+                        - Good source of vitamin C
+                      `}
+                    />,
+                  )
+                }
+              />
+              <Action
+                title='Add to Cart'
+                onAction={() => {
+                  showToast({
+                    style: Toast.Style.Success,
+                    title: 'Added to Cart',
+                    message: 'Apple has been added to your cart',
+                  })
+                }}
+              />
+            </ActionPanel>
+          }
+        />
+        <List.Item
+          id='banana'
+          title='Banana'
+          subtitle='Yellow and nutritious'
+          keywords={['fruit', 'yellow']}
+          accessories={[{ text: 'Ripe' }]}
+          actions={
+            <ActionPanel>
+              <Action
+                title='View Details'
+                onAction={() =>
+                  push(
+                    <Detail
+                      markdown={dedent`
+                        # Banana
+
+                        A yellow tropical fruit that's nutritious and energy-rich.
+
+                        ## Benefits
+                        - High in potassium
+                        - Natural energy booster
+                        - Aids digestion
+                      `}
+                    />,
+                  )
+                }
+              />
+            </ActionPanel>
+          }
+        />
+      </List.Section>
+      <List.Section title='Vegetables'>
+        <List.Item
+          id='carrot'
+          title='Carrot'
+          subtitle='Orange and crunchy'
+          keywords={['vegetable', 'orange']}
+          accessories={[{ tag: 'Healthy' }]}
+          actions={
+            <ActionPanel>
+              <Action
+                title='View Details'
+                onAction={() =>
+                  push(
+                    <Detail
+                      markdown={dedent`
+                        # Carrot
+
+                        A crunchy orange vegetable rich in vitamins.
+
+                        ## Health Benefits
+                        - Excellent source of beta carotene
+                        - Improves eye health
+                        - Boosts immune system
+                        - Low in calories
+                      `}
+                    />,
+                  )
+                }
+              />
+            </ActionPanel>
+          }
+        />
+        <List.Item
+          id='lettuce'
+          title='Lettuce'
+          subtitle='Green and fresh'
+          keywords={['vegetable', 'green', 'salad']}
+          actions={
+            <ActionPanel>
+              <Action
+                title='View Details'
+                onAction={() =>
+                  push(
+                    <Detail
+                      markdown={dedent`
+                        # Lettuce
+
+                        Fresh green leafy vegetable perfect for salads.
+
+                        ## Nutritional Value
+                        - High in water content
+                        - Low in calories
+                        - Contains folate and vitamin K
+                        - Good source of fiber
+                      `}
+                    />,
+                  )
+                }
+              />
+            </ActionPanel>
+          }
+        />
+      </List.Section>
+      <List.Item
+        id='bread'
+        title='Bread'
+        subtitle='Freshly baked'
+        keywords={['bakery']}
+        accessories={[{ text: 'Today' }, { tag: 'New' }]}
+        actions={
+          <ActionPanel>
+            <Action
+              title='View Details'
+              onAction={() =>
+                push(
+                  <Detail
+                    markdown={dedent`
+                      # Bread
+
+                      Freshly baked bread from our bakery.
+
+                      ## Product Details
+                      - Baked fresh daily
+                      - Made with organic flour
+                      - No preservatives
+                      - Perfect for sandwiches or toast
+                    `}
+                  />,
+                )
+              }
+            />
+          </ActionPanel>
+        }
+      />
+    </List>
+  )
+}
+
+renderWithProviders(<SimpleListExample />)