termcast 1.3.9

package/src/examples/error-boundary.tsx

@@ -0,0 +1,217 @@
+import React, { useState } from 'react'
+import {
+  List,
+  Action,
+  ActionPanel,
+  Detail,
+  showToast,
+  Toast,
+  renderWithProviders,
+} from 'termcast'
+import { useNavigation } from 'termcast/src/internal/navigation'
+
+function ThrowErrorComponent(): any {
+  throw new Error('This is a test error from ThrowErrorComponent!')
+}
+ThrowErrorComponent.displayName = 'ThrowErrorComponent'
+
+function AnotherComponent(): any {
+  const [shouldError, setShouldError] = useState(false)
+
+  if (shouldError) {
+    throw new Error('Error thrown after user action in AnotherComponent!')
+  }
+
+  return (
+    <Detail
+      navigationTitle='Another Component'
+      markdown='# Another Component
+
+This component can throw an error when you trigger it.
+
+Use the action below to throw an error.'
+      actions={
+        <ActionPanel>
+          <Action
+            title='Throw Error Now'
+            onAction={() => setShouldError(true)}
+          />
+        </ActionPanel>
+      }
+    />
+  )
+}
+AnotherComponent.displayName = 'AnotherComponent'
+
+function DeepComponent({ level }: { level: number }): any {
+  const { push } = useNavigation()
+
+  return (
+    <Detail
+      navigationTitle={`Deep Component Level ${level}`}
+      markdown={`# Deep Component Level ${level}
+
+This is nested component at level ${level}.
+
+You can navigate deeper or throw an error at this level.`}
+      actions={
+        <ActionPanel>
+          <Action
+            title='Go Deeper'
+            onAction={() => {
+              const Component = () => <DeepComponent level={level + 1} />
+              Component.displayName = `DeepComponent-Level-${level + 1}`
+              push(<Component />)
+            }}
+          />
+          <Action
+            title='Throw Error at This Level'
+            onAction={() => {
+              throw new Error(`Error thrown at navigation level ${level}!`)
+            }}
+          />
+        </ActionPanel>
+      }
+    />
+  )
+}
+DeepComponent.displayName = 'DeepComponent'
+
+export default function ErrorBoundaryExample(): any {
+  const { push } = useNavigation()
+  const [searchText, setSearchText] = useState('')
+
+  return (
+    <List
+      navigationTitle='Error Boundary Test'
+      searchBarPlaceholder='Search actions...'
+      onSearchTextChange={setSearchText}
+    >
+      <List.Section title='Error Actions'>
+        <List.Item
+          title='Throw Error Immediately'
+          subtitle='This will throw an error right away'
+          actions={
+            <ActionPanel>
+              <Action
+                title='Throw Error'
+                onAction={() => {
+                  throw new Error('Immediate error from List.Item action!')
+                }}
+              />
+            </ActionPanel>
+          }
+        />
+
+        <List.Item
+          title='Navigate Then Throw Error'
+          subtitle='Push a component that throws error on render'
+          actions={
+            <ActionPanel>
+              <Action
+                title='Navigate to Error Component'
+                onAction={() => {
+                  const Component = () => <ThrowErrorComponent />
+                  Component.displayName = 'ErrorBoundaryTest-ThrowError'
+                  push(<Component />)
+                }}
+              />
+            </ActionPanel>
+          }
+        />
+
+        <List.Item
+          title='Navigate to Component with Error Action'
+          subtitle='Push a component that can throw error on action'
+          actions={
+            <ActionPanel>
+              <Action
+                title='Navigate to Component'
+                onAction={() => {
+                  const Component = () => <AnotherComponent />
+                  Component.displayName = 'ErrorBoundaryTest-AnotherComponent'
+                  push(<Component />)
+                }}
+              />
+            </ActionPanel>
+          }
+        />
+
+        <List.Item
+          title='Deep Navigation Then Error'
+          subtitle='Navigate through multiple levels then throw error'
+          actions={
+            <ActionPanel>
+              <Action
+                title='Start Deep Navigation'
+                onAction={() => {
+                  const Component = () => <DeepComponent level={1} />
+                  Component.displayName = 'ErrorBoundaryTest-DeepNavigation'
+                  push(<Component />)
+                }}
+              />
+            </ActionPanel>
+          }
+        />
+
+        <List.Item
+          title='Show Toast Then Error'
+          subtitle='Show a toast message then throw error'
+          actions={
+            <ActionPanel>
+              <Action
+                title='Show Toast and Error'
+                onAction={async () => {
+                  await showToast({
+                    style: Toast.Style.Success,
+                    title: 'Toast shown!',
+                    message: 'Error will be thrown in 2 seconds...',
+                  })
+                  setTimeout(() => {
+                    throw new Error('Error after toast!')
+                  }, 2000)
+                }}
+              />
+            </ActionPanel>
+          }
+        />
+
+        <List.Item
+          title='Async Error'
+          subtitle='Throw error in async operation'
+          actions={
+            <ActionPanel>
+              <Action
+                title='Trigger Async Error'
+                onAction={async () => {
+                  await new Promise((resolve) => setTimeout(resolve, 1000))
+                  throw new Error('Async operation failed!')
+                }}
+              />
+            </ActionPanel>
+          }
+        />
+      </List.Section>
+
+      <List.Section title='Test Search'>
+        <List.Item
+          title={`Search Text: "${searchText}"`}
+          subtitle='Type in search to test if error boundary preserves search'
+          actions={
+            <ActionPanel>
+              <Action
+                title='Error with Search Active'
+                onAction={() => {
+                  throw new Error(`Error with search text: "${searchText}"`)
+                }}
+              />
+            </ActionPanel>
+          }
+        />
+      </List.Section>
+    </List>
+  )
+}
+ErrorBoundaryExample.displayName = 'ErrorBoundaryExample'
+
+renderWithProviders(<ErrorBoundaryExample />)

package/src/examples/form-basic.tsx

@@ -0,0 +1,122 @@
+import React, { useState } from 'react'
+import { render } from '@opentui/react'
+import { Form, ActionPanel, Action } from 'termcast'
+import { logger } from 'termcast'
+import { showToast, Toast } from 'termcast'
+import { renderWithProviders } from 'termcast'
+
+export function FormBasicExample(): any {
+  const [submittedData, setSubmittedData] = useState<any>(null)
+
+  const handleSubmit = async (values: any) => {
+    logger.log('Form submitted:', values)
+    setSubmittedData(values)
+    await showToast({
+      style: Toast.Style.Success,
+      title: 'Form Submitted',
+      message: 'All form data has been captured successfully',
+    })
+  }
+
+  return (
+    <box flexDirection='column'>
+      <Form
+        actions={
+          <ActionPanel>
+            <Action.SubmitForm title='Submit Form' onSubmit={handleSubmit} />
+          </ActionPanel>
+        }
+      >
+        <Form.Description
+          title='Form Component Demo'
+          text='This demonstrates all available form input types. Use arrow keys or Tab to navigate between fields.'
+        />
+
+        <Form.Separator />
+
+        <Form.TextField
+          id='username'
+          title='Username'
+          placeholder='Enter your username'
+          defaultValue=''
+          info='Required field'
+        />
+
+        <Form.PasswordField
+          id='password'
+          title='Password'
+          placeholder='Enter secure password'
+          info='Must be at least 8 characters'
+        />
+
+        <Form.TextArea
+          id='bio'
+          title='Biography'
+          placeholder='Tell us about yourself...'
+          info='Maximum 500 characters'
+          defaultValue=''
+        />
+
+        <Form.Checkbox
+          id='newsletter'
+          title='Email Preferences'
+          label='Subscribe to newsletter'
+          defaultValue={false}
+          info='Receive weekly updates'
+        />
+
+        <Form.Dropdown
+          id='country'
+          title='Country'
+          placeholder='Select your country'
+          info='Your country of residence'
+        >
+          <Form.Dropdown.Section title='Americas'>
+            <Form.Dropdown.Item value='us' title='United States' icon='🇺🇸' />
+            <Form.Dropdown.Item value='ca' title='Canada' icon='🇨🇦' />
+            <Form.Dropdown.Item value='mx' title='Mexico' icon='🇲🇽' />
+          </Form.Dropdown.Section>
+          <Form.Dropdown.Section title='Europe'>
+            <Form.Dropdown.Item value='gb' title='United Kingdom' icon='🇬🇧' />
+            <Form.Dropdown.Item value='fr' title='France' icon='🇫🇷' />
+            <Form.Dropdown.Item value='de' title='Germany' icon='🇩🇪' />
+          </Form.Dropdown.Section>
+        </Form.Dropdown>
+
+        <Form.DatePicker
+          id='birthdate'
+          title='Date of Birth'
+          type={Form.DatePicker.Type.Date}
+          info='Format: YYYY-MM-DD'
+        />
+
+        <Form.FilePicker
+          id='documents'
+          title='Upload Documents'
+          info='Select one or more documents to attach'
+          allowMultipleSelection={true}
+          canChooseFiles={true}
+          canChooseDirectories={false}
+        />
+
+        <Form.Separator />
+
+        <Form.Description
+          title='Form Navigation'
+          text='• ↑↓/Tab: Navigate fields | Space: Toggle checkbox | Enter/Space: Open dropdown | ^K/⌘↵: Show actions'
+        />
+      </Form>
+
+      {submittedData && (
+        <box flexDirection='column' marginTop={2}>
+          <Form.Description
+            title='Submitted Data:'
+            text={JSON.stringify(submittedData, null, 2)}
+          />
+        </box>
+      )}
+    </box>
+  )
+}
+
+renderWithProviders(<FormBasicExample />)