termcast 1.3.9

package/src/components/form/file-picker.tsx

@@ -0,0 +1,233 @@
+import React from 'react'
+import { Theme } from 'termcast/src/theme'
+import { WithLeftBorder } from './with-left-border'
+import { FormItemProps, FormItemRef } from './types'
+import { useFormContext, Controller } from 'react-hook-form'
+import { useFocusContext } from './index'
+import { useKeyboard } from '@opentui/react'
+import { useIsInFocus } from 'termcast/src/internal/focus-context'
+import { FileAutocomplete } from './file-autocomplete'
+
+export interface FilePickerProps extends FormItemProps<string[]> {
+  /**
+   * Indicates whether the user can select multiple items or only one.
+   * @defaultValue `true`
+   */
+  allowMultipleSelection?: boolean
+  /**
+   * Indicates whether it's possible to choose a directory.
+   * Note: On Windows, this property is ignored if `canChooseFiles` is set to `true`.
+   * @defaultValue `false`
+   */
+  canChooseDirectories?: boolean
+  /**
+   * Indicates whether it's possible to choose a file.
+   * @defaultValue `true`
+   */
+  canChooseFiles?: boolean
+  /**
+   * Indicates whether the file picker displays files that are normally hidden from the user.
+   * @defaultValue `false`
+   */
+  showHiddenFiles?: boolean
+  /**
+   * Placeholder text for the input field
+   */
+  placeholder?: string
+}
+
+export type FilePickerRef = FormItemRef
+
+const FilePickerField = ({
+  field,
+  fieldState,
+  formState,
+  props,
+  isFocused,
+  setFocusedField,
+}: {
+  field: any
+  fieldState: any
+  formState: any
+  props: FilePickerProps
+  isFocused: boolean
+  setFocusedField: (id: string) => void
+}): any => {
+  const isInFocus = useIsInFocus()
+  const [inputValue, setInputValue] = React.useState('')
+  const [showAutocomplete, setShowAutocomplete] = React.useState(false)
+  const inputRef = React.useRef<any>(null)
+  const anchorRef = React.useRef<any>(null)
+
+  // Show autocomplete when typing
+  React.useEffect(() => {
+    if (inputValue && isFocused) {
+      setShowAutocomplete(true)
+    } else if (!inputValue) {
+      setShowAutocomplete(false)
+    }
+  }, [inputValue, isFocused])
+
+  // Handle Enter key
+  useKeyboard((evt) => {
+    if (!isFocused || !isInFocus) return
+
+    if (evt.name === 'return') {
+      // If input is empty, show files in current directory
+      if (!inputValue && !showAutocomplete) {
+        setShowAutocomplete(true)
+      }
+      // If autocomplete is not visible and input has value, add the path
+      else if (inputValue.trim() && !showAutocomplete) {
+        const currentFiles = field.value || []
+        const newFiles =
+          props.allowMultipleSelection !== false
+            ? [...currentFiles, inputValue.trim()]
+            : [inputValue.trim()]
+        field.onChange(newFiles)
+        if (props.onChange) {
+          props.onChange(newFiles)
+        }
+        setInputValue('')
+      }
+    }
+  })
+
+  const handleSelectFile = (path: string) => {
+    const currentFiles = field.value || []
+    const newFiles =
+      props.allowMultipleSelection !== false ? [...currentFiles, path] : [path]
+    field.onChange(newFiles)
+    if (props.onChange) {
+      props.onChange(newFiles)
+    }
+    setInputValue('')
+    setShowAutocomplete(false)
+  }
+
+  const selectedFiles = field.value || []
+
+  return (
+    <box flexDirection='column'>
+      <WithLeftBorder withDiamond isFocused={isFocused}>
+        <text
+          fg={Theme.text}
+          onMouseDown={() => {
+            setFocusedField(props.id)
+          }}
+        >
+          {props.title || 'File Path'}
+        </text>
+      </WithLeftBorder>
+      <WithLeftBorder isFocused={isFocused}>
+        <box flexDirection='column' ref={anchorRef}>
+          <input
+            ref={inputRef}
+            value={inputValue}
+            placeholder={props.placeholder || 'Enter file path...'}
+            focused={isFocused}
+            onMouseDown={() => setFocusedField(props.id)}
+            onInput={(value: string) => setInputValue(value)}
+          />
+          {selectedFiles.length > 0 && (
+            <box flexDirection='column' marginTop={1}>
+              <text fg={Theme.textMuted}>Selected files:</text>
+              {selectedFiles.map((file: string, index: number) => (
+                <text key={index} fg={Theme.text}>
+                  • {file}
+                </text>
+              ))}
+            </box>
+          )}
+        </box>
+      </WithLeftBorder>
+      {(fieldState.error || props.error) && (
+        <WithLeftBorder isFocused={isFocused}>
+          <text fg={Theme.error}>
+            {fieldState.error?.message || props.error}
+          </text>
+        </WithLeftBorder>
+      )}
+      {props.info && (
+        <WithLeftBorder isFocused={isFocused}>
+          <text fg={Theme.textMuted}>{props.info}</text>
+        </WithLeftBorder>
+      )}
+      <FileAutocomplete
+        value={inputValue}
+        onChange={(newValue) => {
+          setInputValue(newValue)
+          // Move cursor to end when value changes
+          if (inputRef.current) {
+            inputRef.current.cursorPosition = newValue.length
+          }
+        }}
+        onSelect={handleSelectFile}
+        visible={showAutocomplete}
+        onVisibilityChange={setShowAutocomplete}
+        inputRef={inputRef}
+        anchorRef={anchorRef}
+      />
+    </box>
+  ) as React.ReactElement
+}
+
+export const FilePicker = (props: FilePickerProps): any => {
+  const { control, getValues } = useFormContext()
+  const { focusedField, setFocusedField } = useFocusContext()
+  const isFocused = focusedField === props.id
+  const isInFocus = useIsInFocus()
+
+  const handleNavigateUp = () => {
+    // Find previous field and focus it
+    const fieldNames = Object.keys(getValues())
+    const currentIndex = fieldNames.indexOf(props.id)
+    if (currentIndex > 0) {
+      setFocusedField(fieldNames[currentIndex - 1])
+    } else {
+      setFocusedField(fieldNames[fieldNames.length - 1])
+    }
+  }
+
+  const handleNavigateDown = () => {
+    // Find next field and focus it
+    const fieldNames = Object.keys(getValues())
+    const currentIndex = fieldNames.indexOf(props.id)
+    if (currentIndex < fieldNames.length - 1) {
+      setFocusedField(fieldNames[currentIndex + 1])
+    } else {
+      setFocusedField(fieldNames[0])
+    }
+  }
+
+  // Handle keyboard navigation
+  useKeyboard((evt) => {
+    if (!isFocused || !isInFocus) return
+
+    if (evt.name === 'tab') {
+      if (evt.shift) {
+        handleNavigateUp()
+      } else {
+        handleNavigateDown()
+      }
+    }
+  })
+
+  return (
+    <Controller
+      name={props.id}
+      control={control}
+      defaultValue={props.defaultValue || props.value || []}
+      render={(renderProps) => {
+        return (
+          <FilePickerField
+            {...renderProps}
+            props={props}
+            isFocused={isFocused}
+            setFocusedField={setFocusedField}
+          />
+        ) as React.ReactElement
+      }}
+    />
+  )
+}

package/src/components/form/form-end.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import { Theme } from 'termcast/src/theme'
+
+export const FormEnd = (): any => {
+  return <text fg={Theme.text}>└</text>
+}

package/src/components/form/index.tsx

@@ -0,0 +1,242 @@
+import React, { useState, createContext, useContext, useEffect } from 'react'
+import { useKeyboard } from '@opentui/react'
+import { useForm, FormProvider } from 'react-hook-form'
+import { ActionPanel } from 'termcast/src/components/actions'
+import { logger } from 'termcast/src/logger'
+import { InFocus, useIsInFocus } from 'termcast/src/internal/focus-context'
+import { useDialog } from 'termcast/src/internal/dialog'
+import { Theme } from 'termcast/src/theme'
+import { TextAttributes } from '@opentui/core'
+import { useStore } from 'termcast/src/state'
+import {
+  FormValues,
+  FormProps,
+  FormItemProps,
+  FormEvent,
+  FormEventType,
+  FormItemRef,
+  FormValue_2,
+  FormValues_2,
+  FormProps_2,
+  FormItemProps_2,
+} from './types'
+
+export * from './types'
+export { useFormContext } from 'react-hook-form'
+
+// Context for managing focused field
+interface FocusContextValue {
+  focusedField: string | null
+  setFocusedField: (id: string | null) => void
+}
+
+const FocusContext = createContext<FocusContextValue | null>(null)
+
+export const useFocusContext = () => {
+  const context = useContext(FocusContext)
+  if (!context) {
+    throw new Error('Form components must be used within a Form')
+  }
+  return context
+}
+
+// Context for form submission
+interface FormSubmitContextValue {
+  getFormValues: () => FormValues
+}
+
+const FormSubmitContext = createContext<FormSubmitContextValue | null>(null)
+
+export const useFormSubmit = () => {
+  const context = useContext(FormSubmitContext)
+  return context // Can be null if not in a form
+}
+
+// Footer component to show keyboard shortcuts
+function FormFooter(): any {
+  const toast = useStore((state) => state.toast)
+
+  if (toast) {
+    return (
+      <box
+        border={false}
+        style={{
+          paddingLeft: 1,
+          paddingRight: 1,
+          paddingTop: 1,
+          marginTop: 1,
+        }}
+      >
+        {toast}
+      </box>
+    )
+  }
+
+  return (
+    <box
+      border={false}
+      style={{
+        paddingLeft: 1,
+        paddingRight: 1,
+        paddingTop: 1,
+        marginTop: 1,
+        flexDirection: 'row',
+      }}
+    >
+      <text fg={Theme.text} attributes={TextAttributes.BOLD}>
+        ↵
+      </text>
+      <text fg={Theme.textMuted}> submit</text>
+      <text fg={Theme.text} attributes={TextAttributes.BOLD}>
+        {'   '}↑↓
+      </text>
+      <text fg={Theme.textMuted}> navigate</text>
+      <text fg={Theme.text} attributes={TextAttributes.BOLD}>
+        {'   '}^k
+      </text>
+      <text fg={Theme.textMuted}> actions</text>
+    </box>
+  )
+}
+
+import type { TextFieldProps, TextFieldRef } from './text-field'
+import type { PasswordFieldProps, PasswordFieldRef } from './password-field'
+import type { TextAreaProps, TextAreaRef } from './text-area'
+import type { CheckboxProps, CheckboxRef } from './checkbox'
+import type {
+  DropdownProps,
+  DropdownRef,
+  DropdownItemProps,
+  DropdownSectionProps,
+} from './dropdown'
+import type {
+  DatePickerProps,
+  DatePickerRef,
+  DatePickerType as DatePickerEnum,
+} from './date-picker'
+import type { TagPickerType } from './tagpicker'
+import type { DescriptionProps } from './description'
+import type { FilePickerProps, FilePickerRef } from './file-picker'
+
+interface DropdownType {
+  (props: DropdownProps): any
+  Item: (props: DropdownItemProps) => any
+  Section: (props: DropdownSectionProps) => any
+}
+
+interface DatePickerComponentType {
+  (props: DatePickerProps): any
+  Type: typeof DatePickerEnum
+}
+
+interface FormType {
+  (props: FormProps): any
+  TextField: React.ForwardRefExoticComponent<
+    TextFieldProps & React.RefAttributes<TextFieldRef>
+  >
+  PasswordField: React.ForwardRefExoticComponent<
+    PasswordFieldProps & React.RefAttributes<PasswordFieldRef>
+  >
+  TextArea: React.ForwardRefExoticComponent<
+    TextAreaProps & React.RefAttributes<TextAreaRef>
+  >
+  Checkbox: React.ForwardRefExoticComponent<
+    CheckboxProps & React.RefAttributes<CheckboxRef>
+  >
+  Dropdown: DropdownType
+  DatePicker: DatePickerComponentType
+  TagPicker: TagPickerType
+  FilePicker: (props: FilePickerProps) => any
+  Separator: () => any
+  Description: (props: DescriptionProps) => any
+}
+
+export const Form: FormType = ((props) => {
+  const methods = useForm<FormValues>({
+    // defaultValues: {},
+    // mode: 'onChange',
+  })
+
+  const [focusedField, setFocusedField] = useState<string | null>(null)
+
+  // Auto-focus first field on mount
+  useEffect(() => {
+    const fieldNames = Object.keys(methods.getValues())
+    if (fieldNames.length > 0) {
+      logger.log(`focusing `, fieldNames[0])
+      setFocusedField(fieldNames[0])
+    } else {
+      logger.log(`no fields to focus in form`)
+    }
+  }, [])
+
+  // Get focus state and dialog
+  const inFocus = useIsInFocus()
+  const dialog = useDialog()
+
+  // Handle action key navigation only
+  useKeyboard((evt) => {
+    // Only handle keyboard events when form is in focus
+    if (!inFocus) return
+
+    if (evt.name === 'k' && evt.ctrl && props.actions) {
+      // Ctrl+K shows actions
+      dialog.push(
+        <FormSubmitContext.Provider value={submitContextValue}>
+          {props.actions}
+        </FormSubmitContext.Provider>,
+        'bottom-right',
+      )
+    } else if (evt.name === 'return' && evt.meta && props.actions) {
+      // Cmd+Return also shows actions (consistent with List)
+      dialog.push(
+        <FormSubmitContext.Provider value={submitContextValue}>
+          {props.actions}
+        </FormSubmitContext.Provider>,
+        'bottom-right',
+      )
+    }
+  })
+
+  const submitContextValue: FormSubmitContextValue = {
+    getFormValues: () => methods.getValues(),
+  }
+
+  return (
+    <FormProvider {...methods}>
+      <FormSubmitContext.Provider value={submitContextValue}>
+        <FocusContext.Provider value={{ focusedField, setFocusedField }}>
+          <box flexDirection='column'>
+            {props.children}
+            <FormEnd />
+            <FormFooter />
+          </box>
+        </FocusContext.Provider>
+      </FormSubmitContext.Provider>
+    </FormProvider>
+  )
+}) as FormType
+
+// Import and assign components after Form is defined
+import { TextField } from './text-field'
+import { PasswordField } from './password-field'
+import { TextArea } from './text-area'
+import { Checkbox } from './checkbox'
+import { Dropdown } from './dropdown'
+import { DatePicker } from './date-picker'
+import { TagPicker } from './tagpicker'
+import { Separator } from './separator'
+import { Description } from './description'
+import { FormEnd } from './form-end'
+import { FilePicker } from './file-picker'
+
+Form.TextField = TextField as any
+Form.PasswordField = PasswordField as any
+Form.TextArea = TextArea as any
+Form.Checkbox = Checkbox as any
+Form.Dropdown = Dropdown
+Form.DatePicker = DatePicker
+Form.TagPicker = TagPicker
+Form.FilePicker = FilePicker
+Form.Separator = Separator
+Form.Description = Description

package/src/components/form/password-field.tsx

@@ -0,0 +1,87 @@
+import React, { useState } from 'react'
+import { TextAttributes } from '@opentui/core'
+import { useFormContext, Controller } from 'react-hook-form'
+import { useFocusContext } from './index'
+import { FormItemProps, FormItemRef } from './types'
+import { logger } from 'termcast/src/logger'
+import { Theme } from 'termcast/src/theme'
+import { WithLeftBorder } from './with-left-border'
+import { useFormNavigation } from './use-form-navigation'
+
+export interface PasswordFieldProps extends FormItemProps<string> {
+  placeholder?: string
+}
+
+export type PasswordFieldRef = FormItemRef
+
+export const PasswordField = (props: PasswordFieldProps): any => {
+  const { control } = useFormContext()
+  const { focusedField, setFocusedField } = useFocusContext()
+  const isFocused = focusedField === props.id
+
+  // Use form navigation hook
+  useFormNavigation(props.id)
+
+  return (
+    <Controller
+      name={props.id}
+      control={control}
+      defaultValue={props.defaultValue || props.value || ''}
+      render={({ field, fieldState, formState }) => {
+        // Always show masked value when not focused
+        const displayValue = isFocused
+          ? field.value
+          : '*'.repeat(field.value.length)
+
+        return (
+          <box flexDirection='column'>
+            <WithLeftBorder withDiamond isFocused={isFocused}>
+              <text
+                fg={Theme.text}
+                onMouseDown={() => {
+                  setFocusedField(props.id)
+                }}
+              >
+                {props.title}
+              </text>
+            </WithLeftBorder>
+            <WithLeftBorder isFocused={isFocused}>
+              <input
+                value={displayValue}
+                onInput={(value: string) => {
+                  // Ignore masked input (all asterisks) when not focused
+                  if (
+                    isFocused &&
+                    !(/^\*+$/.test(value) && !field.value.startsWith('*'))
+                  ) {
+                    field.onChange(value)
+                    if (props.onChange) {
+                      props.onChange(value)
+                    }
+                  }
+                }}
+                placeholder={props.placeholder}
+                focused={isFocused}
+                onMouseDown={() => {
+                  setFocusedField(props.id)
+                }}
+              />
+            </WithLeftBorder>
+            {(fieldState.error || props.error) && (
+              <WithLeftBorder isFocused={isFocused}>
+                <text fg={Theme.error}>
+                  {fieldState.error?.message || props.error}
+                </text>
+              </WithLeftBorder>
+            )}
+            {props.info && (
+              <WithLeftBorder isFocused={isFocused}>
+                <text fg={Theme.textMuted}>{props.info}</text>
+              </WithLeftBorder>
+            )}
+          </box>
+        ) as React.ReactElement
+      }}
+    />
+  )
+}

package/src/components/form/separator.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { Theme } from 'termcast/src/theme'
+import { WithLeftBorder } from './with-left-border'
+
+export const Separator = (): any => {
+  return null
+  return (
+    <>
+      <WithLeftBorder withDiamond isFocused={false}>
+        <text fg={Theme.border}>{''.repeat(40)}</text>
+      </WithLeftBorder>
+      |
+    </>
+  )
+}