termcast 1.3.48 → 1.3.50

package/src/examples/bar-graph-weekly.tsx

@@ -0,0 +1,264 @@
+// Example: BarGraph vertical stacked bar chart in a List with side detail.
+// Shows weekly data with default palette colors. Enter pushes to full Detail.
+
+import React from 'react'
+import { List, Detail, BarGraph, Row, Action, ActionPanel } from 'termcast'
+import { useNavigation } from 'termcast/src/internal/navigation'
+import { renderWithProviders } from '../utils'
+
+// ── Data ─────────────────────────────────────────────────────────────
+
+const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+
+interface DataSet {
+  title: string
+  subtitle: string
+  series: Array<{ data: number[]; title: string }>
+}
+
+const dataSets: DataSet[] = [
+  {
+    title: 'Weekly Traffic',
+    subtitle: '3 channels across 6 days',
+    series: [
+      { data: [40, 30, 25, 15, 50, 40], title: 'Direct' },
+      { data: [30, 35, 15, 20, 35, 30], title: 'Organic' },
+      { data: [20, 25, 10, 10, 25, 20], title: 'Referral' },
+    ],
+  },
+  {
+    title: 'Revenue by Region',
+    subtitle: 'EMEA / APAC / Americas',
+    series: [
+      { data: [60, 45, 30, 55, 70, 50], title: 'Americas' },
+      { data: [25, 30, 20, 35, 25, 30], title: 'EMEA' },
+      { data: [15, 20, 10, 10, 20, 15], title: 'APAC' },
+    ],
+  },
+  {
+    title: 'Server Load',
+    subtitle: 'CPU / Memory / IO',
+    series: [
+      { data: [45, 55, 35, 70, 60, 40], title: 'CPU' },
+      { data: [30, 25, 40, 20, 35, 30], title: 'Memory' },
+    ],
+  },
+]
+
+// Second week data for side-by-side comparison
+const week2Series = [
+  { data: [50, 40, 30, 25, 60, 45], title: 'Direct' },
+  { data: [35, 30, 20, 25, 40, 35], title: 'Organic' },
+  { data: [25, 20, 15, 15, 30, 25], title: 'Referral' },
+]
+
+// Stress test: many columns (20 bars)
+const manyColsLabels = Array.from({ length: 20 }, (_, i) => `D${i + 1}`)
+const manyColsSeries = [
+  { data: Array.from({ length: 20 }, () => 20 + Math.floor(Math.random() * 60)), title: 'A' },
+  { data: Array.from({ length: 20 }, () => 10 + Math.floor(Math.random() * 40)), title: 'B' },
+]
+
+// Stress test: long labels
+const longLabels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday & Sunday']
+const longLabelsSeries = [
+  { data: [40, 30, 25, 15, 50, 40], title: 'Views' },
+  { data: [20, 25, 10, 10, 25, 20], title: 'Clicks' },
+]
+
+// Stress test: many series (8 series)
+const manySeriesData: Array<{ data: number[]; title: string }> = Array.from(
+  { length: 8 },
+  (_, i) => ({
+    data: [10 + i * 5, 15 + i * 3, 8 + i * 4, 12 + i * 2, 20 + i * 6, 5 + i * 7],
+    title: `Series ${i + 1}`,
+  }),
+)
+
+// ── Full Detail view (pushed on Enter) ───────────────────────────────
+
+function BarGraphDetailView({ item }: { item: DataSet }): any {
+  const { pop } = useNavigation()
+
+  return (
+    <Detail
+      navigationTitle={item.title}
+      markdown={[
+        `# ${item.title}`,
+        '',
+        item.subtitle,
+      ].join('\n')}
+      metadata={
+        <Detail.Metadata>
+          <BarGraph height={15} labels={days}>
+            {item.series.map((s, i) => {
+              return <BarGraph.Series key={i} data={s.data} title={s.title} />
+            })}
+          </BarGraph>
+        </Detail.Metadata>
+      }
+      actions={
+        <ActionPanel>
+          <Action title="Go Back" onAction={() => { pop() }} />
+        </ActionPanel>
+      }
+    />
+  )
+}
+
+// ── Main list ────────────────────────────────────────────────────────
+
+function BarGraphWeeklyExample() {
+  const { push, pop } = useNavigation()
+
+  return (
+    <List navigationTitle="BarGraph Showcase" isShowingDetail={true}>
+      {dataSets.map((item) => {
+        return (
+          <List.Item
+            key={item.title}
+            title={item.title}
+            subtitle={item.subtitle}
+            detail={
+              <List.Item.Detail
+                metadata={
+                  <List.Item.Detail.Metadata>
+                    <BarGraph height={10} labels={days}>
+                      {item.series.map((s, i) => {
+                        return <BarGraph.Series key={i} data={s.data} title={s.title} />
+                      })}
+                    </BarGraph>
+                  </List.Item.Detail.Metadata>
+                }
+              />
+            }
+            actions={
+              <ActionPanel>
+                <Action
+                  title="Open Detail"
+                  onAction={() => { push(<BarGraphDetailView item={item} />) }}
+                />
+              </ActionPanel>
+            }
+          />
+        )
+      })}
+      <List.Item
+        key="many-columns"
+        title="Many Columns (20)"
+        subtitle="Overflow test with 20 bars"
+        detail={
+          <List.Item.Detail
+            metadata={
+              <List.Item.Detail.Metadata>
+                <BarGraph height={10} labels={manyColsLabels}>
+                  {manyColsSeries.map((s, i) => {
+                    return <BarGraph.Series key={i} data={s.data} title={s.title} />
+                  })}
+                </BarGraph>
+              </List.Item.Detail.Metadata>
+            }
+          />
+        }
+      />
+      <List.Item
+        key="many-series"
+        title="Many Series (8)"
+        subtitle="Legend overflow test"
+        detail={
+          <List.Item.Detail
+            metadata={
+              <List.Item.Detail.Metadata>
+                <BarGraph height={10} labels={days}>
+                  {manySeriesData.map((s, i) => {
+                    return <BarGraph.Series key={i} data={s.data} title={s.title} />
+                  })}
+                </BarGraph>
+              </List.Item.Detail.Metadata>
+            }
+          />
+        }
+      />
+      <List.Item
+        key="long-labels"
+        title="Long Labels"
+        subtitle="Labels wider than bar columns"
+        detail={
+          <List.Item.Detail
+            metadata={
+              <List.Item.Detail.Metadata>
+                <BarGraph height={10} labels={longLabels}>
+                  {longLabelsSeries.map((s, i) => {
+                    return <BarGraph.Series key={i} data={s.data} title={s.title} />
+                  })}
+                </BarGraph>
+              </List.Item.Detail.Metadata>
+            }
+          />
+        }
+      />
+      <List.Item
+        key="side-by-side"
+        title="Week 1 vs Week 2"
+        subtitle="Two graphs in a Row"
+        detail={
+          <List.Item.Detail
+            metadata={
+              <List.Item.Detail.Metadata>
+                <Row>
+                  <BarGraph height={10} labels={days}>
+                    {dataSets[0]!.series.map((s, i) => {
+                      return <BarGraph.Series key={i} data={s.data} title={s.title} />
+                    })}
+                  </BarGraph>
+                  <BarGraph height={10} labels={days}>
+                    {week2Series.map((s, i) => {
+                      return <BarGraph.Series key={i} data={s.data} title={s.title} />
+                    })}
+                  </BarGraph>
+                </Row>
+              </List.Item.Detail.Metadata>
+            }
+          />
+        }
+        actions={
+          <ActionPanel>
+            <Action
+              title="Open Detail"
+              onAction={() => {
+                push(
+                  <Detail
+                    navigationTitle="Week 1 vs Week 2"
+                    metadata={
+                      <Detail.Metadata>
+                        <Row>
+                          <BarGraph height={15} labels={days}>
+                            {dataSets[0]!.series.map((s, i) => {
+                              return <BarGraph.Series key={i} data={s.data} title={s.title} />
+                            })}
+                          </BarGraph>
+                          <BarGraph height={15} labels={days}>
+                            {week2Series.map((s, i) => {
+                              return <BarGraph.Series key={i} data={s.data} title={s.title} />
+                            })}
+                          </BarGraph>
+                        </Row>
+                      </Detail.Metadata>
+                    }
+                    actions={
+                      <ActionPanel>
+                        <Action title="Go Back" onAction={() => { pop() }} />
+                      </ActionPanel>
+                    }
+                  />
+                )
+              }}
+            />
+          </ActionPanel>
+        }
+      />
+    </List>
+  )
+}
+
+renderWithProviders(<BarGraphWeeklyExample />)

package/src/examples/bar-graph-weekly.vitest.tsx

@@ -0,0 +1,275 @@
+// E2E tests for BarGraph vertical stacked bar chart.
+// Bar segments are filled with █ chars so they show in text snapshots.
+
+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/bar-graph-weekly.tsx'],
+    cols: 80,
+    rows: 30,
+  })
+})
+
+afterEach(() => {
+  session?.close()
+})
+
+test('bar graph renders bars, labels, and legend', async () => {
+  const text = await session.text({
+    waitFor: (text) => {
+      return text.includes('Mon') && text.includes('Sat') && text.includes('Direct')
+    },
+    timeout: 10000,
+  })
+
+  expect(text).toMatchInlineSnapshot(`
+    "
+
+
+       BarGraph Showcase ────────────────────────────────────────────────────────
+
+       > Search...
+
+      ›Weekly Traffic 3 channels across 6 d │                 ███
+       Revenue by Region EMEA / APAC / Amer │ ███ ███         ███ ███
+       Server Load CPU / Memory / IO        │ ███ ███         ███ ███
+       Many Columns (20) Overflow test with │ ███ ███ ███     ███ ███
+       Many Series (8) Legend overflow test │ ███ ███ ███ ███ ███ ███
+       Long Labels Labels wider than bar co │ ███ ███ ███ ███ ███ ███
+       Week 1 vs Week 2 Two graphs in a Row │ ███ ███ ███ ███ ███ ███
+                                            │ ███ ███ ███ ███ ███ ███
+                                            │ ███ ███ ███ ███ ███ ███
+                                            │ Mon Tue Wed Thu Fri Sat
+       ↵ open detail   ↑↓ navigate   ^k act │ ■ Direct ■ Organic ■ Referral
+
+
+
+
+
+
+
+
+
+
+
+
+    "
+  `)
+
+  expect(text).toContain('Mon')
+  expect(text).toContain('Sat')
+  expect(text).toContain('Direct')
+  expect(text).toContain('█')
+}, 30000)
+
+test('many columns (20) clips with overflow hidden', async () => {
+  await session.text({ waitFor: (t) => t.includes('Many Columns'), timeout: 10000 })
+  // Navigate: Weekly Traffic, Revenue, Server Load, Many Columns = 3 downs
+  session.sendKey('down')
+  session.sendKey('down')
+  session.sendKey('down')
+
+  const text = await session.text({
+    waitFor: (t) => t.includes('›Many Columns'),
+    timeout: 10000,
+  })
+
+  expect(text).toMatchInlineSnapshot(`
+    "
+
+
+       BarGraph Showcase ────────────────────────────────────────────────────────
+
+       > Search...
+
+       Weekly Traffic 3 channels across 6 d │         ███         ███ ███
+       Revenue by Region EMEA / APAC / Amer │         ███         ███ ███ ███
+       Server Load CPU / Memory / IO        │ ███     ███ ███     ███ ███ ███
+      ›Many Columns (20) Overflow test with │ ███ ███ ███ ███ ███ ███ ███ ███ ██
+       Many Series (8) Legend overflow test │ ███ ███ ███ ███ ███ ███ ███ ███ ██
+       Long Labels Labels wider than bar co │ ███ ███ ███ ███ ███ ███ ███ ███ ██
+       Week 1 vs Week 2 Two graphs in a Row │ ███ ███ ███ ███ ███ ███ ███ ███ ██
+                                            │ ███ ███ ███ ███ ███ ███ ███ ███ ██
+                                            │ ███ ███ ███ ███ ███ ███ ███ ███ ██
+                                            │ D1  D2  D3  D4  D5  D6  D7  D8  D9
+       ↑↓ navigate   ^k actions             │ ■ A ■ B
+
+
+
+
+
+
+
+
+
+
+
+
+    "
+  `)
+
+  // Some labels visible, overflow clips the rest
+  expect(text).toContain('D1')
+  expect(text).toContain('█')
+}, 30000)
+
+test('many series (8) legend clips on one line', async () => {
+  await session.text({ waitFor: (t) => t.includes('Many Series'), timeout: 10000 })
+  // Navigate: Weekly, Revenue, Server, Many Columns, Many Series = 4 downs
+  session.sendKey('down')
+  session.sendKey('down')
+  session.sendKey('down')
+  session.sendKey('down')
+
+  const text = await session.text({
+    waitFor: (t) => t.includes('›Many Series'),
+    timeout: 10000,
+  })
+
+  expect(text).toMatchInlineSnapshot(`
+    "
+
+
+       BarGraph Showcase ────────────────────────────────────────────────────────
+
+       > Search...
+
+       Weekly Traffic 3 channels across 6 d │ ███ ███ ███     ███ ███
+       Revenue by Region EMEA / APAC / Amer │ ███ ███ ███ ███ ███ ███
+       Server Load CPU / Memory / IO        │ ███ ███ ███ ███ ███ ███
+       Many Columns (20) Overflow test with │ ███ ███ ███ ███ ███ ███
+      ›Many Series (8) Legend overflow test │ ███ ███ ███ ███ ███ ███
+       Long Labels Labels wider than bar co │ ███ ███ ███ ███ ███ ███
+       Week 1 vs Week 2 Two graphs in a Row │ ███ ███ ███ ███ ███ ███
+                                            │ ███ ███ ███ ███ ███ ███
+                                            │ ███ ███ ███ ███ ███ ███
+                                            │ Mon Tue Wed Thu Fri Sat
+       ↑↓ navigate   ^k actions             │ ■ Series 1 ■ Series 2 ■ Series 3 ■
+
+
+
+
+
+
+
+
+
+
+
+
+    "
+  `)
+
+  // First series visible in legend
+  expect(text).toContain('Series 1')
+  expect(text).toContain('█')
+}, 30000)
+
+test('long labels truncated by overflow hidden', async () => {
+  await session.text({ waitFor: (t) => t.includes('Long Labels'), timeout: 10000 })
+  // Navigate: Weekly, Revenue, Server, Many Columns, Many Series, Long Labels = 5 downs
+  session.sendKey('down')
+  session.sendKey('down')
+  session.sendKey('down')
+  session.sendKey('down')
+  session.sendKey('down')
+
+  const text = await session.text({
+    waitFor: (t) => t.includes('›Long Labels'),
+    timeout: 10000,
+  })
+
+  expect(text).toMatchInlineSnapshot(`
+    "
+
+
+       BarGraph Showcase ────────────────────────────────────────────────────────
+
+       > Search...
+
+       Weekly Traffic 3 channels across 6 d │                 ███
+       Revenue by Region EMEA / APAC / Amer │ ███             ███ ███
+       Server Load CPU / Memory / IO        │ ███ ███         ███ ███
+       Many Columns (20) Overflow test with │ ███ ███         ███ ███
+       Many Series (8) Legend overflow test │ ███ ███ ███     ███ ███
+      ›Long Labels Labels wider than bar co │ ███ ███ ███ ███ ███ ███
+       Week 1 vs Week 2 Two graphs in a Row │ ███ ███ ███ ███ ███ ███
+                                            │ ███ ███ ███ ███ ███ ███
+                                            │ ███ ███ ███ ███ ███ ███
+                                            │ Mon Tue Wed Thu Fri Sat
+       ↑↓ navigate   ^k actions             │ ■ Views ■ Clicks
+
+
+
+
+
+
+
+
+
+
+
+
+    "
+  `)
+
+  expect(text).toContain('Long Labels')
+  expect(text).toContain('█')
+}, 30000)
+
+test('side-by-side bar graphs in a Row', async () => {
+  await session.text({ waitFor: (t) => t.includes('Week 1'), timeout: 10000 })
+  // Navigate: Weekly, Revenue, Server, Many Columns, Many Series, Long Labels, Side-by-side = 6 downs
+  session.sendKey('down')
+  session.sendKey('down')
+  session.sendKey('down')
+  session.sendKey('down')
+  session.sendKey('down')
+  session.sendKey('down')
+
+  const text = await session.text({
+    waitFor: (t) => t.includes('›Week 1 vs Week 2'),
+    timeout: 10000,
+  })
+
+  expect(text).toMatchInlineSnapshot(`
+    "
+
+
+       BarGraph Showcase ────────────────────────────────────────────────────────
+
+       > Search...
+
+       Weekly Traffic 3 channels across 6 d │                 █
+       Revenue by Region EMEA / APAC / Amer │ ███ ███         █ ███
+       Server Load CPU / Memory / IO        │ ███ ███         █ ███ ███
+       Many Columns (20) Overflow test with │ ███ ███ ███     █ ███ ███ ███ ███
+       Many Series (8) Legend overflow test │ ███ ███ ███ ███ █ ███ ███ ███ ███
+       Long Labels Labels wider than bar co │ ███ ███ ███ ███ █ ███ ███ ███ ███
+      ›Week 1 vs Week 2 Two graphs in a Row │ ███ ███ ███ ███ █ ███ ███ ███ ███
+                                            │ ███ ███ ███ ███ █ ███ ███ ███ ███
+                                            │ ███ ███ ███ ███ █ ███ ███ ███ ███
+                                            │ Mon Tue Wed Thu F Mon Tue Wed Thu
+       ↵ open detail   ↑↓ navigate   ^k act │ ■ Direct ■ Organi ■ Direct ■ Organ
+
+
+
+
+
+
+
+
+
+
+
+
+    "
+  `)
+
+  expect(text).toContain('Mon')
+}, 30000)

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

@@ -91,7 +91,7 @@ test('detail metadata showcase renders markdown and metadata together', async ()
 
       Team:        Platform
 
-      ─────────────────────────────────────────────────────────────────────────────────────────────
+      ────────────────────────────────────────────────────────────────────────────────────────────
 
       Status:      Active
 
@@ -101,7 +101,7 @@ test('detail metadata showcase renders markdown and metadata together', async ()
 
       Risk:        Medium
 
-      ─────────────────────────────────────────────────────────────────────────────────────────────
+      ────────────────────────────────────────────────────────────────────────────────────────────
 
       Description: This is a comprehensive metadata showcase that demonstrates all the different
                    ways you can display information using the Detail.Metadata component.
@@ -112,7 +112,7 @@ test('detail metadata showcase renders markdown and metadata together', async ()
 
       Reviewer:    Bob Smith
 
-      ─────────────────────────────────────────────────────────────────────────────────────────────
+      ────────────────────────────────────────────────────────────────────────────────────────────
 
       Repository:  github.com/example
 
@@ -120,7 +120,7 @@ test('detail metadata showcase renders markdown and metadata together', async ()
 
       PR Link:     github.com/organization/repository/pull/12345
 
-      ─────────────────────────────────────────────────────────────────────────────────────────────
+      ────────────────────────────────────────────────────────────────────────────────────────────
 
       Labels:      documentation enhancement good first issue
 
@@ -134,7 +134,7 @@ test('detail metadata showcase renders markdown and metadata together', async ()
 
       Due Date:    2024-02-01
 
-      ─────────────────────────────────────────────────────────────────────────────────────────────
+      ────────────────────────────────────────────────────────────────────────────────────────────
 
       Metrics
 
@@ -148,7 +148,6 @@ test('detail metadata showcase renders markdown and metadata together', async ()
 
 
 
-      esc go back                                                                  powered by termcast
 
 
 
@@ -160,6 +159,7 @@ test('detail metadata showcase renders markdown and metadata together', async ()
 
 
 
+      esc go back   ^k actions                                                 powered by termcast.app
 
     "
   `)
@@ -318,8 +318,8 @@ test('detail metadata renders long values in column layout', async () => {
       Watchers:    @alice @bob @charlie
 
 
+      esc go back   ^k actions                                                 powered by termcast.app
 
-      esc go back                                                                  powered by termcast
 
 
 
@@ -511,7 +511,7 @@ test('detail metadata renders tag lists with multiple items', async () => {
 
 
 
-      esc go back                                                                  powered by termcast
+      esc go back   ^k actions                                                 powered by termcast.app
 
     "
   `)