termcast 1.3.30 → 1.3.32

package/src/examples/toast-action.vitest.tsx

@@ -0,0 +1,404 @@
+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/toast-action.tsx'],
+    cols: 70,
+    rows: 20,
+  })
+})
+
+afterEach(() => {
+  session?.close()
+})
+
+test('pressing enter triggers primary action on toast', async () => {
+  // Wait for list to load
+  await session.text({
+    waitFor: (text) => text.includes('Show Toast with Action'),
+  })
+
+  // Press enter to trigger the action and show toast
+  await session.press('enter')
+  await session.text({
+    waitFor: (text) => text.includes('Undo ctrl t'),
+  })
+
+  const beforeEnter = await session.text()
+  expect(beforeEnter).toMatchInlineSnapshot(`
+    "
+
+
+       Toast Action Test ──────────────────────────────────────────────
+
+       > Search...
+
+      ›Show Toast with Action
+       Form with Toast
+       Form with Delayed Toast Action
+       Other Item
+
+
+       ✓ File Deleted  document.pdf was moved to trash      Undo ctrl t
+
+
+
+
+
+
+    "
+  `)
+
+  expect(beforeEnter).toContain('Undo ctrl t')
+
+  // Press Ctrl+T to trigger the primary action
+  await session.press(['ctrl', 't'])
+  await session.text({
+    waitFor: (text) => text.includes('Undone'),
+  })
+
+  const afterEnter = await session.text()
+  expect(afterEnter).toMatchInlineSnapshot(`
+    "
+
+
+       Toast Action Test ──────────────────────────────────────────────
+
+       > Search...
+
+      ›Show Toast with Action
+       Form with Toast
+       Form with Delayed Toast Action
+       Other Item
+
+
+       ✓ Undone  File restored
+
+
+
+
+
+
+    "
+  `)
+
+  expect(afterEnter).toContain('Undone')
+}, 30000)
+
+test('pressing escape hides the toast', async () => {
+  // Wait for list to load
+  await session.text({
+    waitFor: (text) => text.includes('Show Toast with Action'),
+  })
+
+  // Press enter to show toast
+  await session.press('enter')
+  await session.text({
+    waitFor: (text) => text.includes('Undo ctrl t'),
+  })
+
+  const beforeEsc = await session.text()
+  expect(beforeEsc).toContain('Undo ctrl t')
+
+  await session.press('escape')
+  await new Promise((r) => setTimeout(r, 300))
+
+  const afterEsc = await session.text()
+  expect(afterEsc).toMatchInlineSnapshot(`
+    "
+
+
+       Toast Action Test ──────────────────────────────────────────────
+
+       > Search...
+
+      ›Show Toast with Action
+       Form with Toast
+       Form with Delayed Toast Action
+       Other Item
+
+
+       ↵ show toast   ↑↓ navigate   ^k actions
+
+
+
+
+
+
+    "
+  `)
+
+  expect(afterEsc).not.toContain('Undo ctrl t')
+  // Verify list is still visible (ESC didn't exit the app)
+  expect(afterEsc).toContain('Toast Action Test')
+}, 30000)
+
+test('form toast: pressing enter triggers primary action (navigation)', async () => {
+  // Wait for list to load
+  await session.text({
+    waitFor: (text) => text.includes('Form with Toast'),
+  })
+
+  // Navigate to Form with Toast item
+  await session.press('down')
+  await new Promise((r) => setTimeout(r, 100))
+
+  // Open form via enter (triggers action)
+  await session.press('enter')
+  await session.text({
+    waitFor: (text) => text.includes('Name') && text.includes('Enter your name'),
+  })
+
+  const formView = await session.text()
+  expect(formView).toMatchInlineSnapshot(`
+    "
+
+
+
+
+      ◆  Name
+      │  Enter your name
+      │
+      └
+
+
+       ctrl ↵ submit   tab navigate   ^k actions
+
+
+
+
+
+
+
+
+    "
+  `)
+
+  // Type a name
+  await session.type('John')
+  await new Promise((r) => setTimeout(r, 100))
+
+  // Submit the form via action panel (ctrl+k then enter)
+  await session.press(['ctrl', 'k'])
+  await session.waitIdle()
+  await session.press('enter')
+  await session.text({
+    waitFor: (text) => text.includes('View Details ctrl t'),
+  })
+
+  const toastShown = await session.text()
+  expect(toastShown).toMatchInlineSnapshot(`
+    "
+
+
+    
+
+      ◆  Name
+      │  John
+      │
+      └
+
+
+       ✓ Form Submitted  Hello, John!               View Details ctrl t
+
+
+
+
+
+
+
+
+    "
+  `)
+
+  // Press Ctrl+T to trigger primary action (navigate to detail view)
+  await session.press(['ctrl', 't'])
+  await session.text({
+    waitFor: (text) => text.includes('Welcome, John!'),
+  })
+
+  const detailView = await session.text()
+  expect(detailView).toMatchInlineSnapshot(`
+    "
+
+
+       Form Submitted ─────────────────────────────────────────────────
+
+       > Search...
+
+      ›Welcome, John! Form submission successful
+
+
+       ↑↓ navigate   ^k actions
+
+
+
+
+
+
+
+
+
+    "
+  `)
+}, 30000)
+
+test('form toast: pressing escape closes toast but stays on form', async () => {
+  // Wait for list to load
+  await session.text({
+    waitFor: (text) => text.includes('Form with Toast'),
+  })
+
+  // Navigate to Form with Toast item
+  await session.press('down')
+  await new Promise((r) => setTimeout(r, 100))
+
+  // Open form
+  await session.press('enter')
+  await session.text({
+    waitFor: (text) => text.includes('Name') && text.includes('Enter your name'),
+  })
+
+  // Type a name
+  await session.type('Jane')
+  await new Promise((r) => setTimeout(r, 100))
+
+  // Submit the form via action panel (ctrl+k then enter)
+  await session.press(['ctrl', 'k'])
+  await session.waitIdle()
+  await session.press('enter')
+  await session.text({
+    waitFor: (text) => text.includes('View Details ctrl t'),
+  })
+
+  const toastShown = await session.text()
+  expect(toastShown).toContain('View Details ctrl t')
+
+  // Press Escape to close toast
+  await session.press('escape')
+  await new Promise((r) => setTimeout(r, 300))
+
+  const afterEsc = await session.text()
+  expect(afterEsc).toMatchInlineSnapshot(`
+    "
+
+
+
+
+      ◆  Name
+      │  Jane
+      │
+      └
+
+
+       ctrl ↵ submit   tab navigate   ^k actions
+
+
+
+
+
+
+
+
+    "
+  `)
+
+  // Toast should be closed
+  expect(afterEsc).not.toContain('View Details ctrl t')
+  // Should still be on the form (Name field visible)
+  expect(afterEsc).toContain('Name')
+}, 30000)
+
+test('delayed toast action: primaryAction set after toast shown works with enter', async () => {
+  // Wait for list to load
+  await session.text({
+    waitFor: (text) => text.includes('Delayed Toast Action'),
+  })
+
+  // Navigate to delayed toast action item
+  await session.press('down')
+  await session.press('down')
+  await new Promise((r) => setTimeout(r, 100))
+
+  // Open form
+  await session.press('enter')
+  await session.text({
+    waitFor: (text) => text.includes('Name') && text.includes('Enter your name'),
+  })
+
+  // Type a name
+  await session.type('Test')
+  await new Promise((r) => setTimeout(r, 100))
+
+  // Submit the form
+  await session.press(['ctrl', 'k'])
+  await session.waitIdle()
+  await session.press('enter')
+
+  // Wait for delayed toast to show with primaryAction (set after 500ms delay)
+  await session.text({
+    waitFor: (text) => text.includes('Open ctrl t'),
+    timeout: 3000,
+  })
+
+  const toastWithAction = await session.text()
+  expect(toastWithAction).toMatchInlineSnapshot(`
+    "
+
+
+
+
+      ◆  Name
+      │  Test
+      │
+      └
+
+
+       ✓ Done  Hello, Test!                                 Open ctrl t
+
+
+
+
+
+
+
+
+    "
+  `)
+
+  // Press Ctrl+T to trigger primary action - this should work even though
+  // primaryAction was set AFTER the toast was shown
+  await session.press(['ctrl', 't'])
+  await session.text({
+    waitFor: (text) => text.includes('Opened!'),
+  })
+
+  const afterAction = await session.text()
+  expect(afterAction).toMatchInlineSnapshot(`
+    "
+
+
+
+
+      ◆  Name
+      │  Test
+      │
+      └
+
+
+       ✓ Opened!  Action triggered successfully
+
+
+
+
+
+
+
+
+    "
+  `)
+}, 30000)

package/src/examples/toast-variations.tsx

@@ -1,51 +1,56 @@
-import React, { useState } from 'react'
+import React, { useEffect } from 'react'
 import { List, ActionPanel, Action, renderWithProviders } from 'termcast'
-import { Toast, ToastContent } from 'termcast/src/apis/toast'
+import { Toast, showToast } from 'termcast/src/apis/toast'
 
-const toastVariations = [
+interface ToastVariation {
+  name: string
+  options: Toast.Options
+}
+
+const toastVariations: ToastVariation[] = [
   {
     name: 'Simple Success',
-    toast: new Toast({
+    options: {
       title: 'Success',
       style: Toast.Style.Success,
-    }),
+    },
   },
   {
     name: 'Simple Failure',
-    toast: new Toast({
+    options: {
       title: 'Error',
       style: Toast.Style.Failure,
-    }),
+    },
   },
   {
     name: 'With Short Message',
-    toast: new Toast({
+    options: {
       title: 'Copied',
       message: 'Text copied to clipboard',
       style: Toast.Style.Success,
-    }),
+    },
   },
   {
     name: 'With Long Message',
-    toast: new Toast({
+    options: {
       title: 'Error',
       message:
-        'This is a very long error message that should wrap to multiple lines when displayed in the toast component. It contains detailed information about what went wrong during the operation.',
+        'This is a very long error message that should wrap to multiple lines when displayed in the toast component.',
       style: Toast.Style.Failure,
-    }),
+    },
   },
   {
     name: 'With Super Long Message',
-    toast: new Toast({
+    options: {
       title: 'Warning',
       message:
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.',
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
       style: Toast.Style.Failure,
-    }),
+    },
   },
   {
     name: 'With Primary Action',
-    toast: new Toast({
+    options: {
       title: 'File Deleted',
       message: 'document.pdf was moved to trash',
       style: Toast.Style.Success,
@@ -53,11 +58,11 @@ const toastVariations = [
         title: 'Undo',
         onAction: () => {},
       },
-    }),
+    },
   },
   {
     name: 'With Both Actions',
-    toast: new Toast({
+    options: {
       title: 'Update Available',
       message: 'Version 2.0 is ready to install',
       style: Toast.Style.Success,
@@ -69,11 +74,11 @@ const toastVariations = [
         title: 'Later',
         onAction: () => {},
       },
-    }),
+    },
   },
   {
     name: 'Long Title with Actions',
-    toast: new Toast({
+    options: {
       title: 'Operation Completed Successfully',
       message: 'All files have been processed',
       style: Toast.Style.Success,
@@ -85,65 +90,61 @@ const toastVariations = [
         title: 'Dismiss',
         onAction: () => {},
       },
-    }),
+    },
   },
   {
     name: 'Animated Loading',
-    toast: new Toast({
+    options: {
       title: 'Processing',
       message: 'Please wait while we process your request...',
       style: Toast.Style.Animated,
-    }),
+    },
   },
   {
     name: 'Error with Retry',
-    toast: new Toast({
+    options: {
       title: 'Connection Failed',
-      message:
-        'Unable to connect to the server. Please check your internet connection and try again.',
+      message: 'Unable to connect to the server. Please check your internet connection.',
       style: Toast.Style.Failure,
       primaryAction: {
         title: 'Retry',
         onAction: () => {},
       },
-    }),
+    },
   },
 ]
 
 function ToastVariationsExample(): any {
-  const [selectedIndex, setSelectedIndex] = useState(0)
-  const selectedToast = toastVariations[selectedIndex]
+  // Show first toast on mount
+  useEffect(() => {
+    showToast(toastVariations[0].options)
+  }, [])
 
   return (
-    <box flexDirection="column" width="100%" height="100%">
-      <List
-        navigationTitle="Toast Variations"
-        onSelectionChange={(id) => {
-          if (id) {
-            const index = toastVariations.findIndex((v) => v.name === id)
-            if (index !== -1) {
-              setSelectedIndex(index)
-            }
+    <List
+      navigationTitle="Toast Variations"
+      onSelectionChange={(id) => {
+        if (id) {
+          const variation = toastVariations.find((v) => v.name === id)
+          if (variation) {
+            showToast(variation.options)
+          }
+        }
+      }}
+    >
+      {toastVariations.map((variation) => (
+        <List.Item
+          key={variation.name}
+          id={variation.name}
+          title={variation.name}
+          actions={
+            <ActionPanel>
+              <Action title="Select" onAction={() => {}} />
+            </ActionPanel>
           }
-        }}
-      >
-        {toastVariations.map((variation) => (
-          <List.Item
-            key={variation.name}
-            id={variation.name}
-            title={variation.name}
-            actions={
-              <ActionPanel>
-                <Action title="Select" onAction={() => {}} />
-              </ActionPanel>
-            }
-          />
-        ))}
-      </List>
-      <box position="absolute" bottom={0} left={0} width="100%">
-        <ToastContent toast={selectedToast.toast} onHide={() => {}} />
-      </box>
-    </box>
+        />
+      ))}
+    </List>
   )
 }