Clean up old InputDate, DateField android, text area example

src/components/forms/DateField/index.android.tsx

@@ -1,69 +1,41 @@
 import React from 'react'
-import {View, TextStyle, Pressable} from 'react-native'
+import {View, Pressable} from 'react-native'
 import DateTimePicker, {
   BaseProps as DateTimePickerProps,
 } from '@react-native-community/datetimepicker'
 
-import {Logo} from '#/view/icons/Logo'
+import {useTheme, atoms} from '#/alf'
-import {useTheme, atoms, tokens} from '#/alf'
 import {Text} from '#/components/Typography'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
+import TextField, {useSharedInputStyles} from '#/components/forms/TextField'
+import {CalendarDays_Stroke2_Corner0_Rounded as CalendarDays} from '#/components/icons/CalendarDays'
 
-import {InputDateProps} from '#/components/forms/InputDate/types'
+import {DateFieldProps} from '#/components/forms/DateField/types'
 import {
   localizeDate,
   toSimpleDateString,
-} from '#/components/forms/InputDate/utils'
+} from '#/components/forms/DateField/utils'
 
-export * as utils from '#/components/forms/InputDate/utils'
+export * as utils from '#/components/forms/DateField/utils'
+export const Label = TextField.Label
 
-export function InputDate({
+export function DateField({
-  value: initialValue,
+  value,
-  onChange,
+  onChangeDate,
-  testID,
   label,
-  hasError,
+  isInvalid,
-  accessibilityLabel,
+  testID,
-  accessibilityHint,
+}: DateFieldProps) {
-  ...props
-}: InputDateProps) {
-  const labelId = React.useId()
   const t = useTheme()
   const [open, setOpen] = React.useState(false)
-  const [value, setValue] = React.useState(initialValue)
+  const {
+    state: pressed,
+    onIn: onPressIn,
+    onOut: onPressOut,
+  } = useInteractionState()
   const {state: focused, onIn: onFocus, onOut: onBlur} = useInteractionState()
 
-  const {inputStyles, iconStyles} = React.useMemo(() => {
+  const {chromeFocus, chromeError, chromeErrorHover} = useSharedInputStyles()
-    const input: TextStyle[] = [
-      {
-        paddingLeft: 40,
-      },
-    ]
-    const icon: TextStyle[] = []
-
-    if (hasError) {
-      input.push({
-        borderColor: tokens.color.red_200,
-      })
-      icon.push({
-        color: tokens.color.red_400,
-      })
-    }
-
-    if (focused) {
-      input.push({
-        borderColor: t.atoms.border_contrast.borderColor,
-      })
-
-      if (hasError) {
-        input.push({
-          borderColor: tokens.color.red_500,
-        })
-      }
-    }
-
-    return {inputStyles: input, iconStyles: icon}
-  }, [t, focused, hasError])
 
   const onChangeInternal = React.useCallback<
     Required<DateTimePickerProps>['onChange']
@@ -73,75 +45,53 @@ export function InputDate({
 
       if (date) {
         const formatted = toSimpleDateString(date)
-        onChange(formatted)
+        onChangeDate(formatted)
-        setValue(formatted)
       }
     },
-    [onChange, setOpen, setValue],
+    [onChangeDate, setOpen],
   )
 
   return (
     <View style={[atoms.relative, atoms.w_full]}>
-      {label && (
-        <Text
-          nativeID={labelId}
-          style={[
-            atoms.text_sm,
-            atoms.font_bold,
-            t.atoms.text_contrast_600,
-            atoms.mb_sm,
-          ]}>
-          {label}
-        </Text>
-      )}
-
       <Pressable
-        {...props}
-        aria-labelledby={labelId}
         aria-label={label}
-        accessibilityLabelledBy={labelId}
+        accessibilityLabel={label}
-        accessibilityLabel={accessibilityLabel}
+        accessibilityHint={undefined}
-        accessibilityHint={accessibilityHint}
         onPress={() => setOpen(true)}
+        onPressIn={onPressIn}
+        onPressOut={onPressOut}
         onFocus={onFocus}
         onBlur={onBlur}
         style={[
           {
-            paddingTop: atoms.pt_md.paddingTop + 2,
+            paddingTop: 16,
+            paddingBottom: 16,
+            borderColor: 'transparent',
+            borderWidth: 2,
           },
+          atoms.flex_row,
+          atoms.flex_1,
           atoms.w_full,
           atoms.px_lg,
-          atoms.pb_md,
           atoms.rounded_sm,
-          t.atoms.bg_contrast_100,
+          t.atoms.bg_contrast_50,
-          ...inputStyles,
+          focused || pressed ? chromeFocus : {},
+          isInvalid ? chromeError : {},
+          isInvalid && (focused || pressed) ? chromeErrorHover : {},
         ]}>
-        <Text style={[atoms.text_md, t.atoms.text]}>{localizeDate(value)}</Text>
+        <TextField.Icon icon={CalendarDays} />
-      </Pressable>
 
-      <View
+        <Text
-        style={[
+          style={[atoms.text_md, atoms.pl_xs, t.atoms.text, {paddingTop: 3}]}>
-          atoms.absolute,
+          {localizeDate(value)}
-          atoms.inset_0,
+        </Text>
-          atoms.align_center,
+      </Pressable>
-          atoms.justify_center,
-          atoms.pl_md,
-          {right: 'auto'},
-        ]}>
-        <Logo
-          style={[
-            {color: t.atoms.border_contrast.borderColor},
-            {
-              width: 20,
-              pointerEvents: 'none',
-            },
-            ...iconStyles,
-          ]}
-        />
-      </View>
 
       {open && (
         <DateTimePicker
+          aria-label={label}
+          accessibilityLabel={label}
+          accessibilityHint={undefined}
           testID={`${testID}-datepicker`}
           mode="date"
           timeZoneName={'Etc/UTC'}
@@ -150,10 +100,6 @@ export function InputDate({
           themeVariant={t.name === 'dark' ? 'dark' : 'light'}
           value={new Date(value)}
           onChange={onChangeInternal}
-          accessibilityLabel={accessibilityLabel}
-          accessibilityHint={accessibilityHint}
-          aria-labelledby={labelId}
-          aria-label={label}
         />
       )}
     </View>

src/components/forms/DateField/index.tsx

@@ -5,11 +5,11 @@ import DateTimePicker, {
 } from '@react-native-community/datetimepicker'
 
 import {useTheme, atoms} from '#/alf'
-import {toSimpleDateString} from '#/components/forms/InputDate/utils'
-import {InputDateProps} from '#/components/forms/InputDate/types'
 import TextField from '#/components/forms/TextField'
+import {toSimpleDateString} from '#/components/forms/DateField/utils'
+import {DateFieldProps} from '#/components/forms/DateField/types'
 
-export * as utils from '#/components/forms/InputDate/utils'
+export * as utils from '#/components/forms/DateField/utils'
 export const Label = TextField.Label
 
 /**
@@ -20,43 +20,36 @@ export const Label = TextField.Label
  * `utils.toSimpleDateString(Date)` export of this file.
  */
 export function DateField({
-  value: initialValue,
+  value,
-  onChange,
+  onChangeDate,
   testID,
   label,
-  accessibilityLabel,
+}: DateFieldProps) {
-  accessibilityHint,
-}: InputDateProps) {
-  const labelId = React.useId()
   const t = useTheme()
-  const [value, setValue] = React.useState(initialValue)
 
   const onChangeInternal = React.useCallback(
     (event: DateTimePickerEvent, date: Date | undefined) => {
       if (date) {
         const formatted = toSimpleDateString(date)
-        onChange(formatted)
+        onChangeDate(formatted)
-        setValue(formatted)
       }
     },
-    [onChange],
+    [onChangeDate],
   )
 
   return (
     <View style={[atoms.relative, atoms.w_full]}>
       <DateTimePicker
+        aria-label={label}
+        accessibilityLabel={label}
+        accessibilityHint={undefined}
         testID={`${testID}-datepicker`}
         mode="date"
         timeZoneName={'Etc/UTC'}
         display="spinner"
-        // @ts-ignore applies in iOS only -prf
         themeVariant={t.name === 'dark' ? 'dark' : 'light'}
         value={new Date(value)}
         onChange={onChangeInternal}
-        accessibilityLabel={accessibilityLabel}
-        accessibilityHint={accessibilityHint}
-        aria-labelledby={labelId}
-        aria-label={label}
       />
     </View>
   )

src/components/forms/DateField/index.web.tsx

@@ -4,10 +4,10 @@ import {TextInput, TextInputProps, StyleSheet} from 'react-native'
 import {unstable_createElement} from 'react-native-web'
 
 import TextField, {createInput} from '#/components/forms/TextField'
+import {toSimpleDateString} from '#/components/forms/DateField/utils'
+import {DateFieldProps} from '#/components/forms/DateField/types'
 
-import {toSimpleDateString} from '#/components/forms/InputDate/utils'
+export * as utils from '#/components/forms/DateField/utils'
-
-export * as utils from '#/components/forms/InputDate/utils'
 export const Label = TextField.Label
 
 const InputBase = React.forwardRef<HTMLInputElement, TextInputProps>(
@@ -33,37 +33,30 @@ const Input = createInput(InputBase as unknown as typeof TextInput)
 
 export function DateField({
   value,
-  onChange,
+  onChangeDate,
   label,
   isInvalid,
   testID,
-}: {
+}: DateFieldProps) {
-  value: string
-  onChange: (value: string) => void
-  label: string
-  isInvalid?: boolean
-  testID?: string
-}) {
   const handleOnChange = React.useCallback(
     (e: any) => {
       const date = e.target.valueAsDate || e.target.value
 
       if (date) {
         const formatted = toSimpleDateString(date)
-        onChange(formatted)
+        onChangeDate(formatted)
       }
     },
-    [onChange],
+    [onChangeDate],
   )
 
   return (
-    <TextField.Root>
+    <TextField.Root isInvalid={isInvalid}>
       <Input
         value={value}
         label={label}
         onChange={handleOnChange}
         onChangeText={() => {}}
-        isInvalid={isInvalid}
         testID={testID}
       />
     </TextField.Root>

src/components/forms/DateField/types.ts

@@ -1,10 +1,7 @@
-import {TextInputProps} from 'react-native'
+export type DateFieldProps = {
-
+  value: string
-import {BaseProps} from '#/components/forms/types'
+  onChangeDate: (date: string) => void
-
+  label: string
-export type InputDateProps = BaseProps & {
+  isInvalid?: boolean
-  /**
+  testID?: string
-   * **NOTE:** Available only on web
-   */
-  autoFocus?: TextInputProps['autoFocus']
 }

src/components/forms/InputDate/index.android.tsx

@@ -1,161 +0,0 @@
-import React from 'react'
-import {View, TextStyle, Pressable} from 'react-native'
-import DateTimePicker, {
-  BaseProps as DateTimePickerProps,
-} from '@react-native-community/datetimepicker'
-
-import {Logo} from '#/view/icons/Logo'
-import {useTheme, atoms, tokens} from '#/alf'
-import {Text} from '#/components/Typography'
-import {useInteractionState} from '#/components/hooks/useInteractionState'
-
-import {InputDateProps} from '#/components/forms/InputDate/types'
-import {
-  localizeDate,
-  toSimpleDateString,
-} from '#/components/forms/InputDate/utils'
-
-export * as utils from '#/components/forms/InputDate/utils'
-
-export function InputDate({
-  value: initialValue,
-  onChange,
-  testID,
-  label,
-  hasError,
-  accessibilityLabel,
-  accessibilityHint,
-  ...props
-}: InputDateProps) {
-  const labelId = React.useId()
-  const t = useTheme()
-  const [open, setOpen] = React.useState(false)
-  const [value, setValue] = React.useState(initialValue)
-  const {state: focused, onIn: onFocus, onOut: onBlur} = useInteractionState()
-
-  const {inputStyles, iconStyles} = React.useMemo(() => {
-    const input: TextStyle[] = [
-      {
-        paddingLeft: 40,
-      },
-    ]
-    const icon: TextStyle[] = []
-
-    if (hasError) {
-      input.push({
-        borderColor: tokens.color.red_200,
-      })
-      icon.push({
-        color: tokens.color.red_400,
-      })
-    }
-
-    if (focused) {
-      input.push({
-        borderColor: t.atoms.border_contrast.borderColor,
-      })
-
-      if (hasError) {
-        input.push({
-          borderColor: tokens.color.red_500,
-        })
-      }
-    }
-
-    return {inputStyles: input, iconStyles: icon}
-  }, [t, focused, hasError])
-
-  const onChangeInternal = React.useCallback<
-    Required<DateTimePickerProps>['onChange']
-  >(
-    (_event, date) => {
-      setOpen(false)
-
-      if (date) {
-        const formatted = toSimpleDateString(date)
-        onChange(formatted)
-        setValue(formatted)
-      }
-    },
-    [onChange, setOpen, setValue],
-  )
-
-  return (
-    <View style={[atoms.relative, atoms.w_full]}>
-      {label && (
-        <Text
-          nativeID={labelId}
-          style={[
-            atoms.text_sm,
-            atoms.font_bold,
-            t.atoms.text_contrast_600,
-            atoms.mb_sm,
-          ]}>
-          {label}
-        </Text>
-      )}
-
-      <Pressable
-        {...props}
-        aria-labelledby={labelId}
-        aria-label={label}
-        accessibilityLabelledBy={labelId}
-        accessibilityLabel={accessibilityLabel}
-        accessibilityHint={accessibilityHint}
-        onPress={() => setOpen(true)}
-        onFocus={onFocus}
-        onBlur={onBlur}
-        style={[
-          {
-            paddingTop: atoms.pt_md.paddingTop + 2,
-          },
-          atoms.w_full,
-          atoms.px_lg,
-          atoms.pb_md,
-          atoms.rounded_sm,
-          t.atoms.bg_contrast_100,
-          ...inputStyles,
-        ]}>
-        <Text style={[atoms.text_md, t.atoms.text]}>{localizeDate(value)}</Text>
-      </Pressable>
-
-      <View
-        style={[
-          atoms.absolute,
-          atoms.inset_0,
-          atoms.align_center,
-          atoms.justify_center,
-          atoms.pl_md,
-          {right: 'auto'},
-        ]}>
-        <Logo
-          style={[
-            {color: t.atoms.border_contrast.borderColor},
-            {
-              width: 20,
-              pointerEvents: 'none',
-            },
-            ...iconStyles,
-          ]}
-        />
-      </View>
-
-      {open && (
-        <DateTimePicker
-          testID={`${testID}-datepicker`}
-          mode="date"
-          timeZoneName={'Etc/UTC'}
-          display="spinner"
-          // @ts-ignore applies in iOS only -prf
-          themeVariant={t.name === 'dark' ? 'dark' : 'light'}
-          value={new Date(value)}
-          onChange={onChangeInternal}
-          accessibilityLabel={accessibilityLabel}
-          accessibilityHint={accessibilityHint}
-          aria-labelledby={labelId}
-          aria-label={label}
-        />
-      )}
-    </View>
-  )
-}

src/components/forms/InputDate/index.tsx

@@ -1,75 +0,0 @@
-import React from 'react'
-import {View} from 'react-native'
-import DateTimePicker, {
-  DateTimePickerEvent,
-} from '@react-native-community/datetimepicker'
-
-import {useTheme, atoms} from '#/alf'
-import {Text} from '#/components/Typography'
-import {toSimpleDateString} from '#/components/forms/InputDate/utils'
-
-import {InputDateProps} from '#/components/forms/InputDate/types'
-export * as utils from '#/components/forms/InputDate/utils'
-
-/**
- * Date-only input. Accepts a date in the format YYYY-MM-DD, and reports date
- * changes in the same format.
- *
- * For dates of unknown format, convert with the
- * `utils.toSimpleDateString(Date)` export of this file.
- */
-export function InputDate({
-  value: initialValue,
-  onChange,
-  testID,
-  label,
-  accessibilityLabel,
-  accessibilityHint,
-}: InputDateProps) {
-  const labelId = React.useId()
-  const t = useTheme()
-  const [value, setValue] = React.useState(initialValue)
-
-  const onChangeInternal = React.useCallback(
-    (event: DateTimePickerEvent, date: Date | undefined) => {
-      if (date) {
-        const formatted = toSimpleDateString(date)
-        onChange(formatted)
-        setValue(formatted)
-      }
-    },
-    [onChange],
-  )
-
-  return (
-    <View style={[atoms.relative, atoms.w_full]}>
-      {label && (
-        <Text
-          nativeID={labelId}
-          style={[
-            atoms.text_sm,
-            atoms.font_bold,
-            t.atoms.text_contrast_600,
-            atoms.mb_sm,
-          ]}>
-          {label}
-        </Text>
-      )}
-
-      <DateTimePicker
-        testID={`${testID}-datepicker`}
-        mode="date"
-        timeZoneName={'Etc/UTC'}
-        display="spinner"
-        // @ts-ignore applies in iOS only -prf
-        themeVariant={t.name === 'dark' ? 'dark' : 'light'}
-        value={new Date(value)}
-        onChange={onChangeInternal}
-        accessibilityLabel={accessibilityLabel}
-        accessibilityHint={accessibilityHint}
-        aria-labelledby={labelId}
-        aria-label={label}
-      />
-    </View>
-  )
-}

src/components/forms/InputDate/index.web.tsx

@@ -1,152 +0,0 @@
-import React from 'react'
-import {View, TextStyle} from 'react-native'
-// @ts-ignore
-import {unstable_createElement} from 'react-native-web'
-
-import {Logo} from '#/view/icons/Logo'
-import {useTheme, atoms, tokens} from '#/alf'
-import {Text} from '#/components/Typography'
-import {useInteractionState} from '#/components/hooks/useInteractionState'
-
-import {InputDateProps} from '#/components/forms/InputDate/types'
-import {toSimpleDateString} from '#/components/forms/InputDate/utils'
-
-export * as utils from '#/components/forms/InputDate/utils'
-
-export function InputDate({
-  label,
-  hasError,
-  testID,
-  value: initialValue,
-  onChange,
-  accessibilityLabel,
-  accessibilityHint,
-  ...props
-}: InputDateProps) {
-  const labelId = React.useId()
-  const t = useTheme()
-  const [value, setValue] = React.useState<string>(initialValue)
-  const {
-    state: hovered,
-    onIn: onHoverIn,
-    onOut: onHoverOut,
-  } = useInteractionState()
-  const {state: focused, onIn: onFocus, onOut: onBlur} = useInteractionState()
-
-  const {inputStyles, iconStyles} = React.useMemo(() => {
-    const input: TextStyle[] = [
-      {
-        paddingLeft: 40,
-      },
-    ]
-    const icon: TextStyle[] = []
-
-    if (hasError) {
-      input.push({
-        borderColor: tokens.color.red_200,
-      })
-      icon.push({
-        color: tokens.color.red_400,
-      })
-    }
-
-    if (hovered || focused) {
-      input.push({
-        borderColor: t.atoms.border_contrast.borderColor,
-      })
-
-      if (hasError) {
-        input.push({
-          borderColor: tokens.color.red_500,
-        })
-      }
-    }
-
-    return {inputStyles: input, iconStyles: icon}
-  }, [t, hovered, focused, hasError])
-
-  const handleOnChange = React.useCallback(
-    (e: any) => {
-      const date = e.currentTarget.valueAsDate
-
-      if (date) {
-        const formatted = toSimpleDateString(date)
-        onChange(formatted)
-        setValue(formatted)
-      }
-    },
-    [onChange, setValue],
-  )
-
-  return (
-    <View style={[atoms.relative, atoms.w_full]}>
-      {label && (
-        <Text
-          nativeID={labelId}
-          style={[
-            atoms.text_sm,
-            atoms.font_bold,
-            t.atoms.text_contrast_600,
-            atoms.mb_sm,
-          ]}>
-          {label}
-        </Text>
-      )}
-
-      {unstable_createElement('input', {
-        ...props,
-        testID: `${testID}-datepicker`,
-        'aria-labelledby': labelId,
-        'aria-label': label,
-        accessibilityLabel: accessibilityLabel,
-        accessibilityHint: accessibilityHint,
-        type: 'date',
-        value: value,
-        onFocus: onFocus,
-        onBlur: onBlur,
-        onChange: handleOnChange,
-        onMouseEnter: onHoverIn,
-        onMouseLeave: onHoverOut,
-        style: [
-          {
-            outline: 0,
-            border: 0,
-            appearance: 'none',
-            boxSizing: 'border-box',
-            lineHeight: atoms.text_md.lineHeight * 1.1875,
-            paddingTop: atoms.pt_md.paddingTop - 1,
-          },
-          atoms.w_full,
-          atoms.px_lg,
-          atoms.pb_md,
-          atoms.rounded_sm,
-          atoms.text_md,
-          t.atoms.bg_contrast_100,
-          t.atoms.text,
-          ...inputStyles,
-        ],
-      })}
-
-      <View
-        style={[
-          atoms.absolute,
-          atoms.inset_0,
-          atoms.align_center,
-          atoms.justify_center,
-          atoms.pl_md,
-          {right: 'auto'},
-        ]}>
-        <Logo
-          style={[
-            {color: t.atoms.border_contrast.borderColor},
-            {
-              width: 20,
-              pointerEvents: 'none',
-            },
-            ...iconStyles,
-          ]}
-        />
-      </View>
-    </View>
-  )
-}

src/components/forms/InputDate/types.ts

@@ -1,10 +0,0 @@
-import {TextInputProps} from 'react-native'
-
-import {BaseProps} from '#/components/forms/types'
-
-export type InputDateProps = BaseProps & {
-  /**
-   * **NOTE:** Available only on web
-   */
-  autoFocus?: TextInputProps['autoFocus']
-}

src/components/forms/InputDate/utils.ts

@@ -1,16 +0,0 @@
-import {getLocales} from 'expo-localization'
-
-const LOCALE = getLocales()[0]
-
-// we need the date in the form yyyy-MM-dd to pass to the input
-export function toSimpleDateString(date: Date | string): string {
-  const _date = typeof date === 'string' ? new Date(date) : date
-  return _date.toISOString().split('T')[0]
-}
-
-export function localizeDate(date: Date | string): string {
-  const _date = typeof date === 'string' ? new Date(date) : date
-  return new Intl.DateTimeFormat(LOCALE.languageTag, {
-    timeZone: 'UTC',
-  }).format(_date)
-}

src/components/forms/TextField.tsx

@@ -215,8 +215,8 @@ export function createInput(Component: typeof TextInput) {
             {borderColor: 'transparent', borderWidth: 2},
             ctx.hovered ? chromeHover : {},
             ctx.focused ? chromeFocus : {},
-            ctx.isInvalid ? chromeError : {},
+            ctx.isInvalid || isInvalid ? chromeError : {},
-            ctx.isInvalid && (ctx.hovered || ctx.focused)
+            (ctx.isInvalid || isInvalid) && (ctx.hovered || ctx.focused)
               ? chromeErrorHover
               : {},
           ]}

src/view/screens/Storybook/Forms.tsx

@@ -41,7 +41,7 @@ export function Forms() {
           />
         </TextField.Root>
 
-        <View>
+        <View style={[a.w_full]}>
           <TextField.Label>Text field</TextField.Label>
           <TextField.Root>
             <TextField.Icon icon={Globe} />
@@ -54,14 +54,26 @@ export function Forms() {
           </TextField.Root>
         </View>
 
+        <View style={[a.w_full]}>
+          <TextField.Label>Textarea</TextField.Label>
+          <TextField.Input
+            multiline
+            numberOfLines={4}
+            value={value}
+            onChangeText={setValue}
+            label="Text field"
+          />
+        </View>
+
         <H3>DateField</H3>
 
-        <View>
+        <View style={[a.w_full]}>
           <Label>Date</Label>
           <DateField
+            isInvalid
             testID="date"
             value={date}
-            onChange={date => {
+            onChangeDate={date => {
               console.log(date)
               setDate(date)
             }}