termcast 1.3.9

package/src/examples/simple-hud.tsx

@@ -0,0 +1,60 @@
+import React from 'react'
+import { List, Action, ActionPanel } from 'termcast'
+import { showHUD } from 'termcast'
+import { renderWithProviders } from 'termcast'
+
+function SimpleHUD(): any {
+  return (
+    <List>
+      <List.Item
+        title='Copy to Clipboard'
+        subtitle='Copies text and shows HUD'
+        actions={
+          <ActionPanel>
+            <Action
+              title='Copy'
+              onAction={async () => {
+                // In a real scenario, you'd copy to clipboard here
+                await showHUD('Copied to clipboard!')
+              }}
+            />
+          </ActionPanel>
+        }
+      />
+
+      <List.Item
+        title='Delete Item'
+        subtitle='Deletes item and shows HUD'
+        actions={
+          <ActionPanel>
+            <Action
+              title='Delete'
+              onAction={async () => {
+                // In a real scenario, you'd delete the item here
+                await showHUD('Item deleted')
+              }}
+            />
+          </ActionPanel>
+        }
+      />
+
+      <List.Item
+        title='Save Settings'
+        subtitle='Saves settings and shows HUD'
+        actions={
+          <ActionPanel>
+            <Action
+              title='Save'
+              onAction={async () => {
+                // In a real scenario, you'd save settings here
+                await showHUD('Settings saved')
+              }}
+            />
+          </ActionPanel>
+        }
+      />
+    </List>
+  )
+}
+
+renderWithProviders(<SimpleHUD />)

package/src/examples/simple-list-search.tsx

@@ -0,0 +1,93 @@
+import { renderWithProviders, Detail, Action, ActionPanel } from 'termcast'
+import List from 'termcast'
+import { useNavigation } from 'termcast/src/internal/navigation'
+import dedent from 'string-dedent'
+
+const App: any = () => {
+  const { push } = useNavigation()
+  return (
+    <List searchBarPlaceholder='Search items...' filtering>
+      <List.Item
+        title='First Item'
+        subtitle='This is the first item'
+        keywords={['first', 'one', 'primary']}
+        id='item1'
+        actions={
+          <ActionPanel>
+            <Action
+              title='View Details'
+              onAction={() =>
+                push(
+                  <Detail
+                    markdown={dedent`
+                                    # First Item
+
+                                    This is the first item in the searchable list.
+
+                                    Keywords: first, one, primary
+                                `}
+                  />,
+                )
+              }
+            />
+          </ActionPanel>
+        }
+      />
+      <List.Item
+        title='Second Item'
+        subtitle='This is the second item'
+        keywords={['second', 'two', 'secondary']}
+        id='item2'
+      />
+      <List.Item
+        title='Third Item'
+        subtitle='This is the third item'
+        keywords={['third', 'three', 'tertiary']}
+        id='item3'
+      />
+      <List.Item
+        title='Apple'
+        subtitle='A red fruit'
+        keywords={['fruit', 'red', 'healthy']}
+        id='apple'
+        actions={
+          <ActionPanel>
+            <Action
+              title='View Details'
+              onAction={() =>
+                push(
+                  <Detail
+                    markdown={dedent`
+                                    # Apple
+
+                                    A delicious red fruit.
+
+                                    ## Health Benefits
+                                    - High in fiber
+                                    - Rich in antioxidants
+                                    - Supports heart health
+                                `}
+                  />,
+                )
+              }
+            />
+          </ActionPanel>
+        }
+      />
+      <List.Item
+        title='Banana'
+        subtitle='A yellow fruit'
+        keywords={['fruit', 'yellow', 'potassium']}
+        id='banana'
+      />
+      <List.Item
+        title='Cherry'
+        subtitle='A small red fruit'
+        keywords={['fruit', 'red', 'small', 'sweet']}
+        id='cherry'
+      />
+    </List>
+  )
+}
+
+renderWithProviders(<App />)

package/src/examples/simple-list.tsx

@@ -0,0 +1,149 @@
+import { renderWithProviders, Detail, Action, ActionPanel } from 'termcast'
+import List from 'termcast'
+import { useNavigation } from 'termcast/src/internal/navigation'
+import dedent from 'string-dedent'
+
+function ListExample() {
+  const { push } = useNavigation()
+  const handleSelectionChange = (id: string | null) => {
+    console.log('Selected item:', id)
+  }
+
+  return (
+    <List onSelectionChange={handleSelectionChange}>
+      <List.Item
+        title='First Item'
+        subtitle='This is a subtitle'
+        accessories={[{ text: 'Badge' }]}
+        actions={
+          <ActionPanel>
+            <Action
+              title='View Details'
+              onAction={() =>
+                push(
+                  <Detail
+                    markdown={dedent`
+                  # First Item
+
+                  This is the detail view for the first item.
+
+                  ## Features
+                  - Shows markdown content
+                  - Can have metadata
+                  - Supports actions
+                `}
+                  />,
+                )
+              }
+            />
+          </ActionPanel>
+        }
+      />
+
+      <List.Item
+        title='Second Item'
+        subtitle='Another subtitle'
+        accessories={[{ text: 'Important' }]}
+        actions={
+          <ActionPanel>
+            <Action
+              title='View Details'
+              onAction={() =>
+                push(
+                  <Detail
+                    markdown={dedent`
+                  # Second Item
+
+                  Another detail view with different content.
+
+                  **Important** information can be shown here.
+                `}
+                  />,
+                )
+              }
+            />
+          </ActionPanel>
+        }
+      />
+
+      <List.Item
+        title='Third Item'
+        accessories={[{ text: 'Starred' }, { text: 'Multiple accessories' }]}
+        actions={
+          <ActionPanel>
+            <Action
+              title='View Details'
+              onAction={() =>
+                push(
+                  <Detail
+                    markdown={dedent`
+                  # Third Item
+
+                  This item has multiple accessories and is marked as starred.
+
+                  ⭐ **Starred Item**
+                `}
+                  />,
+                )
+              }
+            />
+          </ActionPanel>
+        }
+      />
+
+      <List.Item
+        title='Fourth Item'
+        subtitle='This item is searchable'
+        actions={
+          <ActionPanel>
+            <Action
+              title='View Details'
+              onAction={() =>
+                push(
+                  <Detail
+                    markdown={dedent`
+                  # Fourth Item
+
+                  This item is searchable and can be found easily using the search bar.
+
+                  ## Search Features
+                  - Keyword matching
+                  - Fuzzy search support
+                  - Real-time filtering
+                `}
+                  />,
+                )
+              }
+            />
+          </ActionPanel>
+        }
+      />
+
+      <List.Item
+        title='Simple Item'
+        actions={
+          <ActionPanel>
+            <Action
+              title='View Details'
+              onAction={() =>
+                push(
+                  <Detail
+                    markdown={dedent`
+                  # Simple Item
+
+                  A simple list item with minimal information.
+
+                  Sometimes less is more.
+                `}
+                  />,
+                )
+              }
+            />
+          </ActionPanel>
+        }
+      />
+    </List>
+  )
+}
+
+renderWithProviders(<ListExample />)

package/src/examples/simple-navigation.tsx

@@ -0,0 +1,89 @@
+import React from 'react'
+import { render } from '@opentui/react'
+import List from 'termcast'
+import { Action, ActionPanel } from 'termcast'
+import { useNavigation } from 'termcast/src/internal/navigation'
+import { Providers } from 'termcast/src/internal/providers'
+
+function DetailView({ title }: { title: string }): any {
+  const { pop } = useNavigation()
+
+  return (
+    <List
+      searchBarPlaceholder='Detail view - Press ESC to go back'
+      navigationTitle={`Detail: ${title}`}
+    >
+      <List.Section title='Details'>
+        <List.Item
+          id='back'
+          title={`This is the detail view for ${title}`}
+          subtitle='Press Enter to go back or ESC to navigate back'
+          actions={
+            <ActionPanel>
+              <Action title='Go Back' onAction={() => pop()} />
+              <Action.CopyToClipboard content={title} title='Copy Title' />
+            </ActionPanel>
+          }
+        />
+      </List.Section>
+    </List>
+  )
+}
+
+function MainView(): any {
+  const { push } = useNavigation()
+
+  const items = [
+    {
+      id: 'first',
+      title: 'First Item',
+      subtitle: 'Navigate to first detail',
+    },
+    {
+      id: 'second',
+      title: 'Second Item',
+      subtitle: 'Navigate to second detail',
+    },
+    {
+      id: 'third',
+      title: 'Third Item',
+      subtitle: 'Navigate to third detail',
+    },
+  ]
+
+  return (
+    <List searchBarPlaceholder='Main view' navigationTitle='Navigation Example'>
+      <List.Section title='Items'>
+        {items.map((item) => (
+          <List.Item
+            id={item.id}
+            title={item.title}
+            subtitle={item.subtitle}
+            actions={
+              <ActionPanel>
+                <Action
+                  title='Open Details'
+                  onAction={() => push(<DetailView title={item.title} />)}
+                />
+                <Action.CopyToClipboard
+                  content={item.title}
+                  title='Copy Title'
+                />
+              </ActionPanel>
+            }
+          />
+        ))}
+      </List.Section>
+    </List>
+  )
+}
+
+function App(): any {
+  return (
+    <Providers>
+      <MainView />
+    </Providers>
+  )
+}
+
+render(<App />)