termcast 1.3.9

package/src/components/form/tagpicker.tsx

@@ -0,0 +1,245 @@
+import React, { forwardRef, useImperativeHandle, useRef } from 'react'
+import {
+  ForwardRefExoticComponent,
+  FunctionComponent,
+  ReactNode,
+  RefAttributes,
+} from 'react'
+import { Image } from 'termcast/src/components/list'
+import { Dropdown, DropdownProps, DropdownItemProps } from './dropdown'
+
+/**
+ * Form value types that can be used in form items
+ */
+type FormValue = string | number | boolean | string[] | number[] | Date | null
+
+/**
+ * Event types for form item callbacks
+ */
+type FormEventType = 'focus' | 'blur'
+
+/**
+ * Form event interface for onFocus and onBlur callbacks
+ */
+interface FormEvent<T extends FormValue> {
+  target: {
+    id: string
+    value?: T
+  }
+  type: FormEventType
+}
+
+/**
+ * Base props for all form items
+ */
+interface FormItemProps<T extends FormValue> {
+  /**
+   * ID of the form item.
+   * Make sure to assign each form item a unique id.
+   */
+  id: string
+  /**
+   * The title displayed on the left side of the item.
+   */
+  title?: string
+  /**
+   * An optional info message to describe the form item. It appears on the right side of the item with an info icon. When the icon is hovered, the info message is shown.
+   */
+  info?: string
+  /**
+   * An optional error message to show the form item validation issues.
+   * If the `error` is present, the Form Item will be highlighted with red border and will show an error message on the right.
+   */
+  error?: string
+  /**
+   * Indicates whether the value of the item should be persisted after submitting, and restored next time the form is rendered.
+   */
+  storeValue?: boolean
+  /**
+   * The value of the item. If `undefined`, the item is uncontrolled.
+   */
+  value?: T
+  /**
+   * The initial value of the item. Used for uncontrolled items. Overwrites the value restored from `storeValue`.
+   */
+  defaultValue?: T
+  /**
+   * The callback that is triggered when the value of the item changes.
+   */
+  onChange?: (value: T) => void
+  /**
+   * The callback that is triggered when the item is focused.
+   */
+  onFocus?: (event: FormEvent<T>) => void
+  /**
+   * The callback that is triggered when the item loses focus.
+   */
+  onBlur?: (event: FormEvent<T>) => void
+}
+
+/**
+ * Ref methods available on form items
+ */
+interface FormItemRef {
+  /**
+   * Focuses the item.
+   */
+  focus: () => void
+  /**
+   * Resets value of the item
+   *
+   * @remarks
+   * If `defaultValue` is defined, calling the `.reset()` function will set `value` to the `defaultValue`.
+   */
+  reset: () => void
+}
+
+/**
+ * Props for Form.TagPicker component
+ */
+export interface TagPickerProps extends FormItemProps<string[]> {
+  /**
+   * The list of tags.
+   */
+  children?: ReactNode
+  /**
+   * Placeholder text shown in the token field.
+   */
+  placeholder?: string
+}
+
+/**
+ * Props for Form.TagPicker.Item component
+ */
+export interface TagPickerItemProps {
+  /**
+   * Value of the tag.
+   * Make sure to assign unique value for each item.
+   */
+  value: string
+  /**
+   * The display title of the tag.
+   */
+  title?: string
+  /**
+   * An icon to show in the tag.
+   */
+  icon?: Image.ImageLike
+}
+
+/**
+ * Ref type for Form.TagPicker
+ */
+export type TagPickerRef = FormItemRef
+
+/**
+ * Members of the TagPicker component
+ */
+interface TagPickerMembers {
+  /**
+   * A tag picker item in a {@link Form.TagPicker}.
+   */
+  Item: (props: TagPickerItemProps) => any
+}
+
+/**
+ * Type definition for Form.TagPicker component
+ */
+export type TagPickerType = ForwardRefExoticComponent<
+  TagPickerProps & RefAttributes<TagPickerRef>
+> &
+  TagPickerMembers
+
+// Implementation
+
+const TagPickerItem: FunctionComponent<TagPickerItemProps> = (props): any => {
+  // Convert TagPickerItem props to DropdownItem props
+  return (
+    <Dropdown.Item
+      value={props.value}
+      title={props.title || props.value}
+      icon={props.icon as string | undefined}
+    />
+  )
+}
+
+const TagPickerComponent = forwardRef<TagPickerRef, TagPickerProps>(
+  (props, ref) => {
+    const dropdownRef = useRef<any>(null)
+
+    useImperativeHandle(ref, () => ({
+      focus: () => dropdownRef.current?.focus(),
+      reset: () => dropdownRef.current?.reset(),
+    }))
+
+    // TagPicker will use hasMultipleSelection by default
+    const dropdownValue = props.value || props.defaultValue || []
+
+    const handleDropdownChange = (value: string | string[]) => {
+      // TagPicker always expects array values
+      if (Array.isArray(value)) {
+        props.onChange?.(value)
+      } else {
+        props.onChange?.([value])
+      }
+    }
+
+    // Convert FormEvent callbacks between string[] and string | string[]
+    const handleFocus = props.onFocus
+      ? (event: FormEvent<string | string[]>) => {
+          props.onFocus!({
+            target: {
+              id: event.target.id,
+              value: Array.isArray(event.target.value)
+                ? event.target.value
+                : event.target.value
+                  ? [event.target.value]
+                  : [],
+            },
+            type: event.type,
+          })
+        }
+      : undefined
+
+    const handleBlur = props.onBlur
+      ? (event: FormEvent<string | string[]>) => {
+          props.onBlur!({
+            target: {
+              id: event.target.id,
+              value: Array.isArray(event.target.value)
+                ? event.target.value
+                : event.target.value
+                  ? [event.target.value]
+                  : [],
+            },
+            type: event.type,
+          })
+        }
+      : undefined
+
+    // Create dropdown props
+    const dropdownProps: DropdownProps = {
+      id: props.id,
+      title: props.title,
+      info: props.info,
+      error: props.error,
+      storeValue: props.storeValue,
+      value: dropdownValue,
+      defaultValue: dropdownValue,
+      onChange: handleDropdownChange,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      placeholder: props.placeholder,
+      children: props.children,
+      hasMultipleSelection: true, // TagPicker always uses multiple selection
+    }
+
+    return <Dropdown {...dropdownProps} />
+  },
+)
+
+TagPickerComponent.displayName = 'TagPicker'
+
+export const TagPicker = Object.assign(TagPickerComponent, {
+  Item: TagPickerItem,
+}) as TagPickerType

package/src/components/form/text-area.tsx

@@ -0,0 +1,82 @@
+import React 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 TextAreaProps extends FormItemProps<string> {
+  placeholder?: string
+  enableMarkdown?: boolean
+}
+
+export type TextAreaRef = FormItemRef
+
+export const TextArea = (props: TextAreaProps): any => {
+  const { control } = useFormContext()
+  const { focusedField, setFocusedField } = useFocusContext()
+  const isFocused = focusedField === props.id
+
+  // TODO in textarea arrows should probably go to lines instead of other forms
+  useFormNavigation(props.id)
+
+  return (
+    <Controller
+      name={props.id}
+      control={control}
+      defaultValue={props.defaultValue || props.value || ''}
+      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}>
+              <box flexGrow={1}>
+                <input
+                  value={field.value}
+                  onInput={(value: string) => {
+                    field.onChange(value)
+                    if (props.onChange) {
+                      props.onChange(value)
+                    }
+                  }}
+                  minHeight={4}
+                  placeholder={props.placeholder}
+                  focused={isFocused}
+                  onMouseDown={() => {
+                    setFocusedField(props.id)
+                  }}
+                />
+              </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>
+            )}
+          </box>
+        ) as React.ReactElement
+      }}
+    />
+  )
+}

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

@@ -0,0 +1,82 @@
+import React 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 TextFieldProps extends FormItemProps<string> {
+  placeholder?: string
+}
+
+export type TextFieldRef = FormItemRef
+
+export const TextField = (props: TextFieldProps): any => {
+  const {
+    control,
+    formState: { errors },
+  } = 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 || ''}
+      rules={{
+        required: props.error ? props.error : false,
+      }}
+      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}>
+              <input
+                value={field.value}
+                onInput={(value: string) => {
+                  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/types.tsx

@@ -0,0 +1,49 @@
+export interface FormValue {
+  [key: string]: any
+}
+
+export interface FormValues {
+  [key: string]: FormValue
+}
+
+export interface FormProps {
+  actions?: React.ReactNode
+  children?: React.ReactNode
+  navigationTitle?: string
+  isLoading?: boolean
+  enableDrafts?: boolean
+}
+
+export interface FormItemProps<T> {
+  id: string
+  title?: string
+  info?: string
+  error?: string
+  storeValue?: boolean
+  autoFocus?: boolean
+  value?: T
+  defaultValue?: T
+  onChange?: (value: T) => void
+  onFocus?: (event: FormEvent<T>) => void
+  onBlur?: (event: FormEvent<T>) => void
+}
+
+export interface FormEvent<T> {
+  target: {
+    id: string
+    value?: T
+  }
+  type: 'focus' | 'blur'
+}
+
+export type FormEventType = 'focus' | 'blur'
+
+export interface FormItemRef {
+  focus: () => void
+  reset: () => void
+}
+
+export type FormValue_2 = FormValue
+export type FormValues_2 = FormValues
+export type FormProps_2 = FormProps
+export type FormItemProps_2<T> = FormItemProps<T>

package/src/components/form/use-form-navigation.tsx

@@ -0,0 +1,65 @@
+import { useKeyboard } from '@opentui/react'
+import { useFormContext } from 'react-hook-form'
+import { useFocusContext } from './index'
+import { useIsInFocus } from '../../internal/focus-context'
+
+export function useFormNavigation(
+  id: string,
+  options?: {
+    handleArrows?: boolean
+    handleTabs?: boolean
+  },
+) {
+  const { getValues } = useFormContext()
+  const { focusedField, setFocusedField } = useFocusContext()
+  const isInFocus = useIsInFocus()
+  const isFocused = focusedField === id
+
+  let { handleArrows = true, handleTabs = true } = options || {}
+
+  handleArrows = false
+
+  const navigateToPrevious = () => {
+    const fieldNames = Object.keys(getValues())
+    const currentIndex = fieldNames.indexOf(id)
+    if (currentIndex > 0) {
+      setFocusedField(fieldNames[currentIndex - 1])
+    } else {
+      setFocusedField(fieldNames[fieldNames.length - 1])
+    }
+  }
+
+  const navigateToNext = () => {
+    const fieldNames = Object.keys(getValues())
+    const currentIndex = fieldNames.indexOf(id)
+    if (currentIndex < fieldNames.length - 1) {
+      setFocusedField(fieldNames[currentIndex + 1])
+    } else {
+      setFocusedField(fieldNames[0])
+    }
+  }
+
+  useKeyboard((evt) => {
+    // Only handle keyboard events when this field is focused and form is in focus
+    if (!isFocused || !isInFocus) return
+
+    if (handleTabs && evt.name === 'tab') {
+      if (evt.shift) {
+        navigateToPrevious()
+      } else {
+        navigateToNext()
+      }
+    } else if (handleArrows) {
+      if (evt.name === 'up') {
+        navigateToPrevious()
+      } else if (evt.name === 'down') {
+        navigateToNext()
+      }
+    }
+  })
+
+  return {
+    navigateToPrevious,
+    navigateToNext,
+  }
+}

package/src/components/form/with-left-border.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import { TextAttributes } from '@opentui/core'
+import { Theme } from 'termcast/src/theme'
+
+interface WithLeftBorderProps {
+  children: React.ReactNode
+  withDiamond?: boolean
+  customCharacter?: { focused: string; unfocused: string }
+  isFocused: boolean
+  paddingBottom?: number
+  paddingLeft?: number
+  paddingTop?: number
+  key?: any
+}
+
+export const WithLeftBorder = ({
+  children,
+  withDiamond,
+  customCharacter,
+  isFocused,
+  paddingBottom = 1,
+  paddingLeft = 2,
+  paddingTop = 0,
+}: WithLeftBorderProps): any => {
+  if (withDiamond || customCharacter) {
+    const chars = customCharacter || { focused: '◆', unfocused: '◇' }
+    return (
+      <box flexDirection='row'>
+        <text
+          key={String(isFocused)}
+          fg={isFocused ? Theme.accent : Theme.text}
+        >
+          {isFocused ? chars.focused : chars.unfocused}
+        </text>
+        <box flexGrow={1} paddingLeft={paddingLeft}>
+          {children}
+        </box>
+      </box>
+    )
+  }
+  return (
+    <box
+      paddingLeft={paddingLeft}
+      border={['left']}
+      borderColor={isFocused ? Theme.accent : undefined}
+      flexDirection='row'
+    >
+      <box paddingTop={paddingTop} paddingBottom={paddingBottom} flexGrow={1}>
+        {children}
+      </box>
+    </box>
+  )
+}