termcast 1.3.19 → 1.3.24

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

@@ -0,0 +1,49 @@
+import React from 'react'
+import { List } from 'termcast'
+import { renderWithProviders } from '../utils'
+
+const ListDetailMetadataExample = () => {
+  return (
+    <List
+      navigationTitle="Metadata Test"
+      searchBarPlaceholder="Search..."
+      isShowingDetail={true}
+    >
+      <List.Item
+        id="item1"
+        title="Item with Metadata"
+        detail={
+          <List.Item.Detail
+            markdown="# Details"
+            metadata={
+              <List.Item.Detail.Metadata>
+                <List.Item.Detail.Metadata.Label title="Name" text="John Doe" />
+                <List.Item.Detail.Metadata.Label title="Email" text="john@example.com" />
+                <List.Item.Detail.Metadata.Separator />
+                <List.Item.Detail.Metadata.Label title="Status" text="Active" />
+                <List.Item.Detail.Metadata.Link title="Website" target="https://example.com" text="example.com" />
+              </List.Item.Detail.Metadata>
+            }
+          />
+        }
+      />
+      <List.Item
+        id="item2"
+        title="Another Item"
+        detail={
+          <List.Item.Detail
+            markdown="# Info"
+            metadata={
+              <List.Item.Detail.Metadata>
+                <List.Item.Detail.Metadata.Label title="Count" text="42" />
+                <List.Item.Detail.Metadata.Label title="Price" text="$99.99" />
+              </List.Item.Detail.Metadata>
+            }
+          />
+        }
+      />
+    </List>
+  )
+}
+
+await renderWithProviders(<ListDetailMetadataExample />)

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

@@ -0,0 +1,88 @@
+import { test, expect, afterEach, beforeEach } from 'vitest'
+import { launchTerminal, Session } from 'tuistory/src'
+
+let session: Session
+
+beforeEach(async () => {
+  session = await launchTerminal({
+    command: 'bun',
+    args: ['src/examples/list-detail-metadata.tsx'],
+    cols: 80,
+    rows: 20,
+  })
+})
+
+afterEach(() => {
+  session?.close()
+})
+
+test('list detail metadata label renders title and text in column layout', async () => {
+  const snapshot = await session.text({
+    waitFor: (text) => {
+      return (
+        text.includes('Metadata Test') &&
+        text.includes('Name') &&
+        text.includes('John Doe') &&
+        text.includes('Email')
+      )
+    },
+  })
+
+  expect(snapshot).toMatchInlineSnapshot(`
+    "
+
+
+     Metadata Test ────────────────────────────────────────────────────────────
+
+     Search...
+
+    ›Item with Metadata
+     Another Item                         │                                   ▲
+                                          │ ───────────────────────────────── █
+                                          │                                   ▀
+                                          │ Name:
+                                          │ John Doe
+                                          │
+                                          │ Email:
+                                          │ john@example.com
+                                          │ ─────────────────
+                                          │
+       ↑↓ navigate  ^k actions            │ Status:                           ▼"
+  `)
+}, 10000)
+
+test('list detail metadata navigation shows different metadata', async () => {
+  await session.text({
+    waitFor: (text) => text.includes('Metadata Test'),
+  })
+
+  await session.press('down')
+
+  const snapshot = await session.text({
+    waitFor: (text) => {
+      return text.includes('Count') && text.includes('42')
+    },
+  })
+
+  expect(snapshot).toMatchInlineSnapshot(`
+    "
+
+
+     Metadata Test ────────────────────────────────────────────────────────────
+
+     Search...
+
+     Item with Metadata
+    ›Another Item                         │ Info
+                                          │ ──────────────────────────────────
+                                          │
+                                          │ Count:
+                                          │ 42
+                                          │
+                                          │ Price:
+                                          │ $99.99
+                                          │
+                                          │
+       ↑↓ navigate  ^k actions            │"
+  `)
+}, 10000)

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

@@ -56,7 +56,7 @@ test('dropdown defaults to first item when no value is provided', async () => {
 
 
 
-     ↵ select  ↑↓ navigate  ^k actions"
+     ↵ show selected fruit  ↑↓ navigate  ^k actions"
   `)
 }, 10000)
 
@@ -75,20 +75,22 @@ test('dropdown opens and shows items', async () => {
 
 
      Dropdown Default Value Example ───────────────────────────────────────────
-    ┃                                                                          ┃
-    ┃   Filter by category                                               esc   ┃
-    ┃                                                                          ┃
-    ┃   Select category...                                                     ┃
-    ┃                                                                          ┃
-    ┃  ›Apple                                                                  ┃
-    ┃   Banana                                                                 ┃
-    ┃   Orange                                                                 ┃
-    ┃   Grape                                                                  ┃
-    ┃                                                                          ┃
-    ┃                                                                          ┃
-    ┃   ↵ select   ↑↓ navigate                                                 ┃
-    ┃                                                                          ┃
 
+      ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+     S┃                                                                          ┃
+      ┃   Filter by category                                               esc   ┃
+    ›F┃                                                                          ┃
+     S┃   Select category...                                                     ┃
+     V┃                                                                          ┃
+     C┃  ›Apple                                                                  ┃
+      ┃   Banana                                                                 ┃
+      ┃   Orange                                                                 ┃
+      ┃   Grape                                                                  ┃
+      ┃                                                                          ┃
+      ┃                                                                          ┃
+      ┃   ↵ select   ↑↓ navigate                                                 ┃
+      ┃                                                                          ┃
+      ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
 
 
@@ -97,9 +99,7 @@ test('dropdown opens and shows items', async () => {
 
 
 
-
-
-     ↵ select  ↑↓ navigate  ^k actions"
+     ↵ show selected fruit  ↑↓ navigate  ^k actions"
   `)
 
   await session.press('down')
@@ -110,21 +110,22 @@ test('dropdown opens and shows items', async () => {
 
 
      Dropdown Default Value Example ───────────────────────────────────────────
-    ┃                                                                          ┃
-    ┃   Filter by category                                               esc   ┃
-    ┃                                                                          ┃
-    ┃   Select category...                                                     ┃
-    ┃                                                                          ┃
-    ┃   Apple                                                                  ┃
-    ┃  ›Banana                                                                 ┃
-    ┃   Orange                                                                 ┃
-    ┃   Grape                                                                  ┃
-    ┃                                                                          ┃
-    ┃                                                                          ┃
-    ┃   ↵ select   ↑↓ navigate                                                 ┃
-    ┃                                                                          ┃
-
 
+      ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+     S┃                                                                          ┃
+      ┃   Filter by category                                               esc   ┃
+    ›F┃                                                                          ┃
+     S┃   Select category...                                                     ┃
+     V┃                                                                          ┃
+     C┃   Apple                                                                  ┃
+      ┃  ›Banana                                                                 ┃
+      ┃   Orange                                                                 ┃
+      ┃   Grape                                                                  ┃
+      ┃                                                                          ┃
+      ┃                                                                          ┃
+      ┃   ↵ select   ↑↓ navigate                                                 ┃
+      ┃                                                                          ┃
+      ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
 
 
@@ -133,8 +134,7 @@ test('dropdown opens and shows items', async () => {
 
 
 
-
-     ↵ select  ↑↓ navigate  ^k actions"
+     ↵ show selected fruit  ↑↓ navigate  ^k actions"
   `)
 
   await session.press('enter')
@@ -169,7 +169,7 @@ test('dropdown opens and shows items', async () => {
 
 
 
-     ↵ select  ↑↓ navigate  ^k actions"
+     ↵ show selected fruit  ↑↓ navigate  ^k actions"
   `)
 }, 10000)
 
@@ -188,22 +188,22 @@ test('clicking dropdown opens it', async () => {
 
 
      Dropdown Default Value Example ───────────────────────────────────────────
-    ┃                                                                          ┃
-    ┃   Filter by category                                               esc   ┃
-    ┃                                                                          ┃
-    ┃   Select category...                                                     ┃
-    ┃                                                                          ┃
-    ┃  ›Apple                                                                  ┃
-    ┃   Banana                                                                 ┃
-    ┃   Orange                                                                 ┃
-    ┃   Grape                                                                  ┃
-    ┃                                                                          ┃
-    ┃                                                                          ┃
-    ┃   ↵ select   ↑↓ navigate                                                 ┃
-    ┃                                                                          ┃
-
-
 
+      ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+     S┃                                                                          ┃
+      ┃   Filter by category                                               esc   ┃
+    ›F┃                                                                          ┃
+     S┃   Select category...                                                     ┃
+     V┃                                                                          ┃
+     C┃  ›Apple                                                                  ┃
+      ┃   Banana                                                                 ┃
+      ┃   Orange                                                                 ┃
+      ┃   Grape                                                                  ┃
+      ┃                                                                          ┃
+      ┃                                                                          ┃
+      ┃   ↵ select   ↑↓ navigate                                                 ┃
+      ┃                                                                          ┃
+      ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
 
 
@@ -212,7 +212,7 @@ test('clicking dropdown opens it', async () => {
 
 
 
-     ↵ select  ↑↓ navigate  ^k actions"
+     ↵ show selected fruit  ↑↓ navigate  ^k actions"
   `)
 
   await session.click('Orange', { first: true })
@@ -247,6 +247,6 @@ test('clicking dropdown opens it', async () => {
 
 
 
-     ↵ select  ↑↓ navigate  ^k actions"
+     ↵ show selected fruit  ↑↓ navigate  ^k actions"
   `)
 }, 10000)

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

@@ -44,7 +44,7 @@ test('list shows initial items after fetch', async () => {
 
      Illustrations
      Welcome Banner Category: Illustrations
-     Hero
+     Hero Image Category: Illustrations
 
 
 
@@ -53,7 +53,7 @@ test('list shows initial items after fetch', async () => {
 
 
 
-     ↵ select  ↑↓ navigate  ^k actions"
+       ↑↓ navigate  ^k actions"
   `)
 
 
@@ -84,7 +84,7 @@ test('list shows initial items after fetch', async () => {
 
 
 
-     ↵ select  ↑↓ navigate  ^k actions"
+       ↑↓ navigate  ^k actions"
   `)
 
   await session.press('down')
@@ -114,6 +114,6 @@ test('list shows initial items after fetch', async () => {
 
 
 
-     ↵ select  ↑↓ navigate  ^k actions"
+       ↑↓ navigate  ^k actions"
   `)
 }, 10000)

package/src/examples/list-scrollbox.vitest.tsx

@@ -29,13 +29,13 @@ test('list scrollbox auto-scrolls when navigating down', async () => {
 
 
      Scrollbox Test ─────────────────────────────
-     Search items...
 
-    ›♠ Item 1 Description for item 1             ▲
-     ■ Item 2 Description for item 2             ▼
+     Search items...
 
+    ›▲ Item 1 Description for item 1             ▲
+                                                 ▼
 
-     ↵ select  ↑↓ navigate  ^k actions"
+       ↑↓ navigate  ^k actions"
   `)
 
   await session.press('down')
@@ -50,13 +50,13 @@ test('list scrollbox auto-scrolls when navigating down', async () => {
 
 
      Scrollbox Test ─────────────────────────────
-     Search items...
 
-     ▼ Item 5 Description for item 5             ▲
-    ›♦ Item 6 Description for item 6             ▼
+     Search items...
 
+    ›● Item 6 Description for item 6             ▲
+                                                 ▼
 
-     ↵ select  ↑↓ navigate  ^k actions"
+       ↑↓ navigate  ^k actions"
   `)
 
   await session.press('down')
@@ -69,13 +69,13 @@ test('list scrollbox auto-scrolls when navigating down', async () => {
 
 
      Scrollbox Test ─────────────────────────────
-     Search items...
 
-     ★ Item 8 Description for item 8             ▲
-    ›■ Item 9 Description for item 9             ▼
+     Search items...
 
+    ›■ Item 9 Description for item 9             ▲
+                                                 ▼
 
-     ↵ select  ↑↓ navigate  ^k actions"
+       ↑↓ navigate  ^k actions"
   `)
 
   await session.press('up')
@@ -92,12 +92,71 @@ test('list scrollbox auto-scrolls when navigating down', async () => {
 
 
      Scrollbox Test ─────────────────────────────
+
      Search items...
 
     ›■ Item 2 Description for item 2             ▲
-     ♠ Item 3 Description for item 3             ▼
+                                                 ▼
+
+       ↑↓ navigate  ^k actions"
+  `)
+}, 15000)
+
+test('list scrollbox scrolls with mouse wheel', async () => {
+  await session.text({
+    waitFor: (text) => {
+      return /Item 1/i.test(text)
+    },
+  })
+
+  const initialSnapshot = await session.text()
+  expect(initialSnapshot).toMatchInlineSnapshot(`
+    "
+
+
+     Scrollbox Test ─────────────────────────────
+
+     Search items...
+
+    ›▲ Item 1 Description for item 1             ▲
+                                                 ▼
+
+       ↑↓ navigate  ^k actions"
+  `)
+
+  await session.scrollDown(3)
+
+  const afterScrollDownSnapshot = await session.text()
+  expect(afterScrollDownSnapshot).not.toEqual(initialSnapshot)
+  expect(afterScrollDownSnapshot).toMatchInlineSnapshot(`
+    "
+
+
+    Scrollbox Test ─────────────────────────────
+
+    Search items...
+
+    ■ Item 2 Description for item 2             ▲
+                                                ▼
+
+      ↑↓ navigate  ^k actions"
+  `)
+
+  await session.scrollUp(2)
+
+  const afterScrollUpSnapshot = await session.text()
+  expect(afterScrollUpSnapshot).not.toEqual(afterScrollDownSnapshot)
+  expect(afterScrollUpSnapshot).toMatchInlineSnapshot(`
+    "
+
+
+     Scrollbox Test ─────────────────────────────
+
+     Search items...
 
+    ›▲ Item 1 Description for item 1             ▲
+                                                 ▼
 
-     ↵ select  ↑↓ navigate  ^k actions"
+       ↑↓ navigate  ^k actions"
   `)
 }, 15000)

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

@@ -0,0 +1,70 @@
+import React from 'react'
+import { List } from 'termcast'
+import { renderWithProviders } from '../utils'
+
+const items = [
+  {
+    id: 'short',
+    title: 'Short Detail',
+    markdown: `# Brief content
+
+This is short.`,
+  },
+  {
+    id: 'long',
+    title: 'Long Detail',
+    markdown: `# This item has extensive detail content
+
+## Section 1
+This is a very long description that contains multiple paragraphs and sections to test how the layout behaves when the detail panel content overflows.
+
+## Section 2
+More content here to ensure we have enough text to cause vertical overflow in the detail panel scrollbox.
+
+## Section 3
+Even more content. We want to make sure the detail panel definitely needs to scroll.
+
+## Section 4
+Additional paragraphs to push the content height beyond what fits in the viewport.
+
+## Section 5
+The goal is to have the scrollbar appear in the detail panel.
+
+## Section 6
+This should be enough content now to cause overflow.
+
+## Section 7
+Just a bit more to be safe.
+
+## Section 8
+And some final content here.`,
+  },
+  {
+    id: 'another',
+    title: 'Another Item',
+    markdown: `# Another
+
+Some content.`,
+  },
+]
+
+const ListWithDetailLongExample = () => {
+  return (
+    <List
+      navigationTitle="Detail Length Test"
+      searchBarPlaceholder="Search..."
+      isShowingDetail={true}
+    >
+      {items.map((item) => (
+        <List.Item
+          key={item.id}
+          id={item.id}
+          title={item.title}
+          detail={<List.Item.Detail markdown={item.markdown} />}
+        />
+      ))}
+    </List>
+  )
+}
+
+await renderWithProviders(<ListWithDetailLongExample />)