termcast 1.3.10 → 1.3.16

package/src/examples/form-scroll.tsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import { Form, ActionPanel, Action } from 'termcast'
+import { renderWithProviders } from 'termcast'
+
+export function FormScrollExample(): any {
+  return (
+    <box flexDirection='column' flexGrow={1}>
+      <Form
+        actions={
+          <ActionPanel>
+            <Action.SubmitForm title='Submit' onSubmit={() => {}} />
+          </ActionPanel>
+        }
+      >
+        <Form.Description
+          title='Form Scroll Test'
+          text='Test scrolling behavior when navigating with Tab'
+        />
+
+        <Form.TextField id='field1' title='Field 1' placeholder='First field' />
+
+        <Form.TextField
+          id='field2'
+          title='Field 2'
+          placeholder='Second field'
+        />
+
+        <Form.TextField id='field3' title='Field 3' placeholder='Third field' />
+
+        <Form.TextField
+          id='field4'
+          title='Field 4'
+          placeholder='Fourth field'
+        />
+
+        <Form.TextField id='field5' title='Field 5' placeholder='Fifth field' />
+
+        <Form.TextField id='field6' title='Field 6' placeholder='Sixth field' />
+
+        <Form.TextField
+          id='field7'
+          title='Field 7'
+          placeholder='Seventh field'
+        />
+
+        <Form.TextField
+          id='field8'
+          title='Field 8'
+          placeholder='Eighth field'
+        />
+      </Form>
+    </box>
+  )
+}
+
+await renderWithProviders(<FormScrollExample />)

package/src/examples/form-scroll.vitest.tsx

@@ -0,0 +1,228 @@
+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/form-scroll.tsx'],
+    cols: 60,
+    rows: 15,
+  })
+})
+
+afterEach(() => {
+  session?.close()
+})
+
+test(
+  'form scroll - tab navigates and scrolls to focused field',
+  async () => {
+    await session.text({
+      waitFor: (text) => {
+        return /Form Scroll Test/i.test(text)
+      },
+    })
+
+    const initialSnapshot = await session.text()
+    expect(initialSnapshot).toMatchInlineSnapshot(`
+      "
+
+
+      ■  Form Scroll Test                                    ▀
+      ┃  Test scrolling behavior when navigating with Tab
+      ┃
+      ◇  Field 1
+      │  First field
+      │
+      ◇  Field 2
+      │  Second field
+      │
+
+
+       ctrl ↵ submit   ↑↓ navigate   ^k actions"
+    `)
+
+    await session.press('tab')
+    const afterTab1 = await session.text()
+    expect(afterTab1).toMatchInlineSnapshot(`
+      "
+
+
+      ▪  Form Scroll Test                                    ▀
+      │  Test scrolling behavior when navigating with Tab
+      │
+      ◆  Field 1
+      ┃  First field
+      ┃
+      ◇  Field 2
+      │  Second field
+      │
+
+
+       ctrl ↵ submit   ↑↓ navigate   ^k actions"
+    `)
+
+    await session.press('tab')
+    const afterTab2 = await session.text()
+    expect(afterTab2).toMatchInlineSnapshot(`
+      "
+
+
+      ▪  Form Scroll Test                                    ▀
+      │  Test scrolling behavior when navigating with Tab
+      │
+      ◇  Field 1
+      │  First field
+      │
+      ◆  Field 2
+      ┃  Second field
+      ┃
+
+
+       ctrl ↵ submit   ↑↓ navigate   ^k actions"
+    `)
+
+    await session.press('tab')
+    const afterTab3 = await session.text()
+    expect(afterTab3).toMatchInlineSnapshot(`
+      "
+
+
+      ◇  Field 1
+      │  First field                                         ▄
+      │
+      ◇  Field 2
+      │  Second field
+      │
+      ◆  Field 3
+      ┃  Third field
+      ┃
+
+
+       ctrl ↵ submit   ↑↓ navigate   ^k actions"
+    `)
+
+    await session.press('tab')
+    const afterTab4 = await session.text()
+    expect(afterTab4).toMatchInlineSnapshot(`
+      "
+
+
+      ◇  Field 2
+      │  Second field
+      │                                                      ▄
+      ◇  Field 3
+      │  Third field
+      │
+      ◆  Field 4
+      ┃  Fourth field
+      ┃
+
+
+       ctrl ↵ submit   ↑↓ navigate   ^k actions"
+    `)
+
+    await session.press('tab')
+    const afterTab5 = await session.text()
+    expect(afterTab5).toMatchInlineSnapshot(`
+      "
+
+
+      ◇  Field 3
+      │  Third field
+      │
+      ◇  Field 4
+      │  Fourth field                                        ▀
+      │
+      ◆  Field 5
+      ┃  Fifth field
+      ┃
+
+
+       ctrl ↵ submit   ↑↓ navigate   ^k actions"
+    `)
+
+    await session.press('tab')
+    const afterTab6 = await session.text()
+    expect(afterTab6).toMatchInlineSnapshot(`
+      "
+
+
+      ◇  Field 4
+      │  Fourth field
+      │
+      ◇  Field 5
+      │  Fifth field
+      │                                                      ▄
+      ◆  Field 6
+      ┃  Sixth field
+      ┃
+
+
+       ctrl ↵ submit   ↑↓ navigate   ^k actions"
+    `)
+
+    await session.press('tab')
+    const afterTab7 = await session.text()
+    expect(afterTab7).toMatchInlineSnapshot(`
+      "
+
+
+      ◇  Field 5
+      │  Fifth field
+      │
+      ◇  Field 6
+      │  Sixth field
+      │
+      ◆  Field 7                                             ▄
+      ┃  Seventh field
+      ┃
+
+
+       ctrl ↵ submit   ↑↓ navigate   ^k actions"
+    `)
+
+    await session.press(['shift', 'tab'])
+    const afterShiftTab1 = await session.text()
+    expect(afterShiftTab1).toMatchInlineSnapshot(`
+      "
+
+
+      ◇  Field 6
+      │  Sixth field
+      │
+      ◇  Field 7
+      │  Seventh field
+      │
+      ◆  Field 8
+      ┃  Eighth field
+      ┃                                                      ▀
+
+
+       ctrl ↵ submit   ↑↓ navigate   ^k actions"
+    `)
+
+    await session.press(['shift', 'tab'])
+    const afterShiftTab2 = await session.text()
+    expect(afterShiftTab2).toMatchInlineSnapshot(`
+      "
+
+
+      ■  Form Scroll Test                                    ▀
+      ┃  Test scrolling behavior when navigating with Tab
+      ┃
+      ◇  Field 1
+      │  First field
+      │
+      ◇  Field 2
+      │  Second field
+      │
+
+
+       ctrl ↵ submit   ↑↓ navigate   ^k actions"
+    `)
+  },
+  30000,
+)

package/src/examples/form-tagpicker.tsx

@@ -63,4 +63,4 @@ function FormTagPickerExample() {
   )
 }
 
-renderWithProviders(<FormTagPickerExample />)
+await renderWithProviders(<FormTagPickerExample />)