termcast 1.3.9

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

@@ -0,0 +1,22 @@
+import { Form } from './index'
+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 { 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/checkbox.tsx

@@ -0,0 +1,96 @@
+import React from 'react'
+import { TextAttributes } from '@opentui/core'
+import { useKeyboard } from '@opentui/react'
+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'
+import { useIsInFocus } from 'termcast/src/internal/focus-context'
+
+export interface CheckboxProps extends FormItemProps<boolean> {
+  label: string
+}
+
+export type CheckboxRef = FormItemRef
+
+export const Checkbox = (props: CheckboxProps): any => {
+  const { control, setValue, getValues } = useFormContext()
+  const { focusedField, setFocusedField } = useFocusContext()
+  const isFocused = focusedField === props.id
+  const isInFocus = useIsInFocus()
+
+  // Use form navigation hook
+  useFormNavigation(props.id)
+  const handleToggle = () => {
+    const newValue = !getValues()?.[props.id]
+    setValue(props.id, newValue)
+    if (props.onChange) {
+      props.onChange(newValue)
+    }
+  }
+
+  useKeyboard((evt) => {
+    if (
+      isFocused &&
+      isInFocus &&
+      (evt.name === 'space' || evt.name === 'return')
+    ) {
+      handleToggle()
+    }
+  })
+  return (
+    <Controller
+      name={props.id}
+      control={control}
+      defaultValue={props.defaultValue || props.value || false}
+      render={({ field, fieldState, formState }) => {
+        return (
+          <box flexDirection='column'>
+            <WithLeftBorder withDiamond isFocused={isFocused}>
+              <text
+                fg={Theme.text}
+                onMouseDown={() => {
+                  // Always focus the field when clicked
+                  if (!isFocused) {
+                    setFocusedField(props.id)
+                  }
+                  // Always toggle the value when clicked
+                  handleToggle()
+                }}
+              >
+                {props.title}
+              </text>
+            </WithLeftBorder>
+            <WithLeftBorder isFocused={isFocused}>
+              <text
+                fg={isFocused ? Theme.accent : Theme.text}
+                selectable={false}
+                onMouseDown={() => {
+                  if (!isFocused) {
+                    setFocusedField(props.id)
+                  }
+                  handleToggle()
+                }}
+              >
+                {field.value ? '●' : '○'} {props.label}
+              </text>
+            </WithLeftBorder>
+            {props.error && (
+              <WithLeftBorder isFocused={isFocused}>
+                <text fg={Theme.error}>{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/date-picker.tsx

@@ -0,0 +1,125 @@
+import React from 'react'
+import { TextAttributes } from '@opentui/core'
+import { useKeyboard } from '@opentui/react'
+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 { DatePickerWidget } from 'termcast/src/internal/date-picker-widget'
+import { useIsInFocus } from 'termcast/src/internal/focus-context'
+
+export enum DatePickerType {
+  Date = 'date',
+  DateTime = 'datetime',
+}
+
+export interface DatePickerProps extends FormItemProps<Date | null> {
+  type?: DatePickerType
+  min?: Date
+  max?: Date
+}
+
+export type DatePickerRef = FormItemRef
+
+interface DatePickerComponentType {
+  (props: DatePickerProps): any
+  Type: typeof DatePickerType
+}
+
+const DatePickerComponent = (props: DatePickerProps): 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 tab navigation only
+  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 || null}
+      render={({ field, fieldState, formState }) => {
+        return (
+          <box flexDirection='column'>
+            <WithLeftBorder withDiamond isFocused={isFocused}>
+              <text
+                fg={Theme.text}
+                onMouseDown={() => {
+                  setFocusedField(props.id)
+                }}
+              >
+                {props.title}
+              </text>
+            </WithLeftBorder>
+            <WithLeftBorder isFocused={isFocused}>
+              <DatePickerWidget
+                enableColors={isFocused}
+                initialValue={field.value || undefined}
+                onChange={(date) => {
+                  field.onChange(date)
+                  if (props.onChange) {
+                    props.onChange(date)
+                  }
+                }}
+                focused={isFocused}
+              />
+            </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
+      }}
+    />
+  )
+}
+
+// Create the properly typed DatePicker with static properties
+export const DatePicker = Object.assign(DatePickerComponent, {
+  Type: DatePickerType,
+}) as DatePickerComponentType

package/src/components/form/description.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { TextAttributes } from '@opentui/core'
+import { Theme } from 'termcast/src/theme'
+import { WithLeftBorder } from './with-left-border'
+
+export interface DescriptionProps {
+  title?: string
+  text: string
+  isFormTitle?: boolean
+}
+
+export const Description = (props: DescriptionProps): any => {
+  return (
+    <>
+      {props.title && (
+        <WithLeftBorder
+          customCharacter={{ focused: '⁉', unfocused: '▪︎' }}
+          isFocused={false}
+        >
+          <text fg={Theme.text} attributes={TextAttributes.BOLD}>
+            {props.title}
+          </text>
+        </WithLeftBorder>
+      )}
+      <WithLeftBorder isFocused={false}>
+        <text fg={Theme.textMuted}>{props.text}</text>
+      </WithLeftBorder>
+    </>
+  )
+}