@maestro-js/components 1.0.0-alpha.0

package/src/components/currency-field.tsx

@@ -0,0 +1,183 @@
+import * as React from 'react'
+import { HeadlessForm } from '@maestro-js/form'
+import type { ValidationFunction } from '@maestro-js/form'
+import { FormFieldComponents } from './helpers/form-field'
+import { useNumberInput } from '../utils/use-number-input'
+
+export type CurrencyFieldProps = {
+  // Form identification
+  name?: string
+  form?: string
+
+  // Display elements
+  label?: React.ReactNode
+  cornerHint?: React.ReactNode
+  helpText?: React.ReactNode
+  placeholder?: string
+  warningMessage?: React.ReactNode
+
+  // Validation and state
+  isRequired?: boolean
+  isDisabled?: boolean
+  isReadonly?: boolean
+  isInvalid?: boolean
+  validate?: ValidationFunction<number>
+  errorMessage?: React.ReactNode | ((v: import('@maestro-js/form').ValidationResult) => React.ReactNode)
+
+  // Value management (in the unit specified by `units`)
+  value?: number | null
+  defaultValue?: number | null
+  onChange?: (value: number | null) => void
+
+  // Number specific
+  min?: number | null
+  max?: number | null
+  autoComplete?: string | null
+  autoFocus?: boolean
+
+  // Currency specific
+  units: 'dollars' | 'cents'
+  shape?: 'rectangle' | 'oval'
+}
+
+const currencyFormatOptions: Intl.NumberFormatOptions = {
+  style: 'currency',
+  currency: 'USD',
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2
+}
+
+export function CurrencyField(props: CurrencyFieldProps) {
+  const inputRef = React.useRef<HTMLInputElement>(null)
+  const hiddenInputRef = React.useRef<HTMLInputElement>(null)
+
+  const helpTextId = React.useId()
+  const inputId = React.useId()
+
+  const isCents = props.units === 'cents'
+
+  // Stable ref for onChange to avoid unnecessary re-renders in useNumberInput
+  const onChangeRef = React.useRef(props.onChange)
+  onChangeRef.current = props.onChange
+
+  const handleChange = React.useCallback(
+    (newValue: number | null) => {
+      onChangeRef.current?.(isCents && newValue !== null ? dollarsToCents(newValue) : newValue)
+    },
+    [isCents]
+  )
+
+  const displayValue = isCents && props.value != null ? centsToDollars(props.value) : props.value
+  const displayDefaultValue = isCents && props.defaultValue != null ? centsToDollars(props.defaultValue) : props.defaultValue
+  const displayMin = isCents && props.min != null ? centsToDollars(props.min) : props.min
+  const displayMax = isCents && props.max != null ? centsToDollars(props.max) : props.max
+
+  const numberInput = useNumberInput({
+    value: displayValue ?? undefined,
+    defaultValue: displayDefaultValue ?? undefined,
+    onChange: handleChange,
+    minValue: displayMin ?? undefined,
+    maxValue: displayMax ?? undefined,
+    step: 0.01,
+    formatOptions: currencyFormatOptions,
+    locale: 'en-US',
+    isDisabled: props.isDisabled,
+    isReadOnly: props.isReadonly ?? false
+  })
+
+  HeadlessForm.useReset(inputRef, numberInput.numberValue, numberInput.setNumberValue)
+
+  // Validation value should be in the original unit
+  const validationValue = isCents ? dollarsToCents(numberInput.numberValue) : numberInput.numberValue
+
+  const {
+    validationMessage,
+    isInvalid: validationInvalid,
+    commitValidation
+  } = HeadlessForm.useValidation(
+    {
+      validate: props.validate,
+      value: validationValue!,
+      name: props.name,
+      isRequired: props.isRequired,
+      form: props.form,
+      focus() {
+        inputRef.current?.focus()
+      }
+    },
+    hiddenInputRef
+  )
+
+  const isInvalid = props.isInvalid || validationInvalid
+  const hasWarning = Boolean(props.warningMessage) && !isInvalid
+
+  // Hidden input value in the original unit
+  const hiddenValue = isCents ? dollarsToCents(numberInput.numberValue) : numberInput.numberValue
+
+  const handleBlur = () => {
+    numberInput.commit(inputRef.current?.value)
+    commitValidation()
+  }
+
+  return (
+    <div className="relative">
+      <FormFieldComponents.LabelRow label={props.label} cornerHint={props.cornerHint} htmlFor={inputId} />
+
+      {/* Hidden input for form submission */}
+      {props.isDisabled ? null : (
+        <HeadlessForm.HiddenInput
+          ref={hiddenInputRef}
+          form={props.form}
+          name={props.name}
+          value={hiddenValue ?? ''}
+          type="number"
+          min={numberInput.minValue}
+          max={numberInput.maxValue}
+        />
+      )}
+
+      <FormFieldComponents.FieldGroup
+        isDisabled={props.isDisabled}
+        isReadonly={props.isReadonly}
+        isInvalid={isInvalid}
+        hasWarning={hasWarning}
+        shape={props.shape}
+        className="flex"
+      >
+        <FormFieldComponents.FieldInput
+          ref={inputRef}
+          id={inputId}
+          type="text"
+          value={numberInput.inputValue}
+          onChange={(e) => numberInput.setInputValue(e.currentTarget.value)}
+          onBlur={handleBlur}
+          placeholder={props.placeholder}
+          disabled={props.isDisabled}
+          readOnly={props.isReadonly}
+          autoComplete={props.autoComplete ?? undefined}
+          autoFocus={props.autoFocus}
+          aria-invalid={isInvalid || undefined}
+          aria-describedby={helpTextId}
+        />
+      </FormFieldComponents.FieldGroup>
+
+      <FormFieldComponents.FormFieldHelpText
+        id={helpTextId}
+        isInvalid={isInvalid}
+        validationMessage={validationMessage}
+        hasWarning={hasWarning}
+        warningMessage={props.warningMessage}
+        helpText={props.helpText}
+      />
+    </div>
+  )
+}
+
+function centsToDollars(cents: number): number {
+  return cents / 100
+}
+
+function dollarsToCents(dollars: number | null): number | null {
+  if (dollars == null) return null
+  return Math.round(dollars * 100)
+}

package/src/components/date-input.tsx

@@ -0,0 +1,189 @@
+import * as React from 'react'
+import { DateField, DateInput as AriaDateInput, DateSegment, I18nProvider } from 'react-aria-components'
+import { CalendarDate, parseDate } from '@internationalized/date'
+import { tw } from '../utils/tw'
+import { FormFieldComponents } from './helpers/form-field'
+import { HeadlessForm } from '@maestro-js/form'
+import type { ValidationFunction, ValidationResult } from '@maestro-js/form'
+import { dateFns, type Iso } from 'iso-fns'
+
+export type DateInputProps = {
+  // Form identification
+  name?: string
+  form?: string
+
+  // Display elements
+  label?: React.ReactNode
+  cornerHint?: React.ReactNode
+  helpText?: React.ReactNode
+  placeholder?: string
+  warningMessage?: React.ReactNode
+
+  // Validation and state
+  isRequired?: boolean
+  isDisabled?: boolean
+  isReadonly?: boolean
+  isInvalid?: boolean
+  validate?: ValidationFunction<Iso.Date | null>
+  errorMessage?: React.ReactNode | ((v: ValidationResult) => React.ReactNode)
+
+  // Value management (ISO date string YYYY-MM-DD)
+  value?: Iso.Date | null
+  defaultValue?: Iso.Date | null
+  onChange?: (value: Iso.Date | null) => void
+
+  // Date specific (ISO date strings)
+  minValue?: Iso.Date
+  maxValue?: Iso.Date
+  isDateUnavailable?: (date: Iso.Date) => boolean
+
+  // Locale
+  locale?: string
+  shape?: 'rectangle' | 'oval'
+}
+
+export function DateInput(props: DateInputProps) {
+  const hiddenInputRef = React.useRef<HTMLInputElement>(null)
+  const helpTextId = React.useId()
+  const labelId = React.useId()
+
+  // Internal state for CalendarDate
+  const [value, _setValue] = React.useState(() => {
+    try {
+      const startingDate = props.value === undefined ? (props.defaultValue ?? null) : props.value
+      return startingDate ? parseDate(startingDate) : null
+    } catch {
+      return null
+    }
+  })
+
+  function setValue(d: CalendarDate | null) {
+    _setValue(d)
+    if (!d || dateFns.isValid(d.toString())) {
+      props.onChange && props.onChange(d ? (d.toString() as Iso.Date) : null)
+    }
+    commitValidation()
+  }
+
+  // Sync controlled value
+  if (props.value !== undefined) {
+    const currentValueAsIso = value && dateFns.isValid(value.toString()) ? value.toString() : null
+    const propValue = props.value && dateFns.isValid(props.value) ? props.value : null
+    if ((!value || dateFns.isValid(value.toString())) && propValue !== currentValueAsIso) {
+      try {
+        _setValue(propValue ? parseDate(propValue) : null)
+      } catch {
+        _setValue(null)
+      }
+    }
+  }
+
+  // Convert min/max dates
+  const minDate = React.useMemo(() => {
+    if (!props.minValue) return undefined
+    try {
+      return parseDate(props.minValue)
+    } catch {
+      return undefined
+    }
+  }, [props.minValue])
+
+  const maxDate = React.useMemo(() => {
+    if (!props.maxValue) return undefined
+    try {
+      return parseDate(props.maxValue)
+    } catch {
+      return undefined
+    }
+  }, [props.maxValue])
+
+  // Form validation
+  const {
+    validationMessage: validationMessageRaw,
+    isInvalid: validationInvalid,
+    commitValidation
+  } = HeadlessForm.useValidation(
+    {
+      validate: props.validate,
+      value: value && dateFns.isValid(value.toString()) ? (value.toString() as Iso.Date) : null,
+      name: props.name,
+      isRequired: props.isRequired,
+      form: props.form,
+      focus() {
+        // Focus handled by DateField
+      }
+    },
+    hiddenInputRef as React.RefObject<HTMLInputElement>
+  )
+
+  const lessThanMin =
+    props.minValue && value && dateFns.isValid(value.toString()) ? value.toString() < props.minValue : false
+  const greaterThanMax =
+    props.maxValue && value && dateFns.isValid(value.toString()) ? value.toString() > props.maxValue : false
+
+  const validationMessage =
+    validationMessageRaw ||
+    (lessThanMin ? `Cannot be less than ${dateFns.format(props.minValue!, 'MM/dd/yyyy')}` : '') ||
+    (greaterThanMax ? `Cannot be greater than ${dateFns.format(props.maxValue!, 'MM/dd/yyyy')}` : '')
+
+  const isInvalid = props.isInvalid || validationInvalid || lessThanMin || greaterThanMax
+  const hasWarning = Boolean(props.warningMessage) && !isInvalid
+
+  return (
+    <I18nProvider locale={props.locale ?? 'en'}>
+      <div className="relative">
+        {/* Hidden input for form submission */}
+        <HeadlessForm.HiddenInput ref={hiddenInputRef} name={props.name} value={value?.toString() ?? ''} form={props.form} />
+
+        <FormFieldComponents.LabelRow label={props.label} cornerHint={props.cornerHint} labelId={labelId} />
+
+        {/* Date input */}
+        <DateField
+          aria-labelledby={labelId}
+          aria-describedby={helpTextId}
+          value={value}
+          onChange={setValue}
+          minValue={minDate}
+          maxValue={maxDate}
+          isDisabled={props.isDisabled}
+          isReadOnly={props.isReadonly}
+          isInvalid={isInvalid}
+          isRequired={props.isRequired}
+          isDateUnavailable={
+            props.isDateUnavailable ? (date) => props.isDateUnavailable!(date.toString() as Iso.Date) : undefined
+          }
+        >
+          <FormFieldComponents.FieldGroup
+            isDisabled={props.isDisabled}
+            isReadonly={props.isReadonly}
+            isInvalid={isInvalid}
+            hasWarning={hasWarning}
+            shape={props.shape}
+          >
+            <AriaDateInput className="flex px-3 py-2 text-sm">
+              {(segment) => (
+                <DateSegment
+                  segment={segment}
+                  className={tw(
+                    'px-0.5 tabular-nums outline-none rounded-sm',
+                    'focus:bg-primary-500 focus:text-white',
+                    segment.isPlaceholder && 'text-neutral-400'
+                  )}
+                />
+              )}
+            </AriaDateInput>
+          </FormFieldComponents.FieldGroup>
+        </DateField>
+
+        <FormFieldComponents.FormFieldHelpText
+          id={helpTextId}
+          isInvalid={isInvalid}
+          validationMessage={validationMessage}
+          hasWarning={hasWarning}
+          warningMessage={props.warningMessage}
+          helpText={props.helpText}
+        />
+      </div>
+    </I18nProvider>
+  )
+}

package/src/components/date-picker.tsx

@@ -0,0 +1,211 @@
+import * as React from 'react'
+import { DatePicker as AriaDatePicker, DateInput, DateSegment, Button, Dialog, I18nProvider } from 'react-aria-components'
+import { AnimatedPopover } from './helpers/animated-popover'
+import { CalendarDate, parseDate } from '@internationalized/date'
+import { tw } from '../utils/tw'
+import { FormFieldComponents } from './helpers/form-field'
+import { Icon } from './icon'
+import { HeadlessForm } from '@maestro-js/form'
+import type { ValidationFunction, ValidationResult } from '@maestro-js/form'
+import { CustomCalendar } from './helpers/calendar-month-year-picker'
+import { dateFns, type Iso } from 'iso-fns'
+
+export type DatePickerProps = {
+  // Form identification
+  name?: string
+  form?: string
+
+  // Display elements
+  label?: React.ReactNode
+  cornerHint?: React.ReactNode
+  helpText?: React.ReactNode
+  placeholder?: string
+  warningMessage?: React.ReactNode
+
+  // Validation and state
+  isRequired?: boolean
+  isDisabled?: boolean
+  isReadonly?: boolean
+  isInvalid?: boolean
+  validate?: ValidationFunction<Iso.Date | null>
+  errorMessage?: React.ReactNode | ((v: ValidationResult) => React.ReactNode)
+
+  // Value management (ISO date string YYYY-MM-DD)
+  value?: Iso.Date | null
+  defaultValue?: Iso.Date | null
+  onChange?: (value: Iso.Date | null) => void
+
+  // Date specific (ISO date strings)
+  minValue?: Iso.Date
+  maxValue?: Iso.Date
+  isDateUnavailable?: (date: Iso.Date) => boolean
+
+  // Calendar display
+  locale?: string
+
+  // Input shape
+  shape?: 'rectangle' | 'oval'
+}
+
+function DatePicker_(props: DatePickerProps) {
+  const hiddenInputRef = React.useRef<HTMLInputElement>(null)
+  const helpTextId = React.useId()
+  const labelId = React.useId()
+
+  // Internal state for CalendarDate
+  const [value, _setValue] = React.useState(() => {
+    try {
+      const startingDate = props.value === undefined ? (props.defaultValue ?? null) : props.value
+      return startingDate ? parseDate(startingDate) : null
+    } catch {
+      return null
+    }
+  })
+
+  function setValue(d: CalendarDate | null) {
+    _setValue(d)
+    if (!d || dateFns.isValid(d.toString())) {
+      props.onChange && props.onChange(d ? (d.toString() as Iso.Date) : null)
+    }
+    commitValidation()
+  }
+
+  // Sync controlled value
+  if (props.value !== undefined) {
+    const currentValueAsIso = value && dateFns.isValid(value.toString()) ? value.toString() : null
+    const propValue = props.value && dateFns.isValid(props.value) ? props.value : null
+    if ((!value || dateFns.isValid(value.toString())) && propValue !== currentValueAsIso) {
+      try {
+        _setValue(propValue ? parseDate(propValue) : null)
+      } catch {
+        _setValue(null)
+      }
+    }
+  }
+
+  // Convert min/max dates
+  const minDate = React.useMemo(() => {
+    if (!props.minValue) return undefined
+    try {
+      return parseDate(props.minValue)
+    } catch {
+      return undefined
+    }
+  }, [props.minValue])
+
+  const maxDate = React.useMemo(() => {
+    if (!props.maxValue) return undefined
+    try {
+      return parseDate(props.maxValue)
+    } catch {
+      return undefined
+    }
+  }, [props.maxValue])
+
+  // Form validation
+  const {
+    validationMessage: validationMessageRaw,
+    isInvalid: validationInvalid,
+    commitValidation
+  } = HeadlessForm.useValidation(
+    {
+      validate: props.validate,
+      value: value && dateFns.isValid(value.toString()) ? (value.toString() as Iso.Date) : null,
+      name: props.name,
+      isRequired: props.isRequired,
+      form: props.form,
+      focus() {
+        // Focus handled by AriaDatePicker
+      }
+    },
+    hiddenInputRef as React.RefObject<HTMLInputElement>
+  )
+
+  const lessThanMin =
+    props.minValue && value && dateFns.isValid(value.toString()) ? value.toString() < props.minValue : false
+  const greaterThanMax =
+    props.maxValue && value && dateFns.isValid(value.toString()) ? value.toString() > props.maxValue : false
+
+  const validationMessage =
+    validationMessageRaw ||
+    (lessThanMin ? `Cannot be less than ${dateFns.format(props.minValue!, 'MM/dd/yyyy')}` : '') ||
+    (greaterThanMax ? `Cannot be greater than ${dateFns.format(props.maxValue!, 'MM/dd/yyyy')}` : '')
+
+  const isInvalid = props.isInvalid || validationInvalid || lessThanMin || greaterThanMax
+  const hasWarning = Boolean(props.warningMessage) && !isInvalid
+
+  return (
+    <I18nProvider locale={props.locale ?? 'en'}>
+      <div className="relative">
+        {/* Hidden input for form submission */}
+        <HeadlessForm.HiddenInput ref={hiddenInputRef} name={props.name} value={value?.toString() ?? ''} form={props.form} />
+
+        <FormFieldComponents.LabelRow label={props.label} cornerHint={props.cornerHint} labelId={labelId} />
+
+        <AriaDatePicker
+          value={value}
+          aria-labelledby={labelId}
+          onChange={setValue}
+          minValue={minDate}
+          maxValue={maxDate}
+          isDateUnavailable={
+            props.isDateUnavailable ? (date) => props.isDateUnavailable!(date.toString() as Iso.Date) : undefined
+          }
+          isDisabled={props.isDisabled}
+          isReadOnly={props.isReadonly}
+          isInvalid={isInvalid}
+          isRequired={props.isRequired}
+        >
+          <FormFieldComponents.FieldGroup
+            isDisabled={props.isDisabled}
+            isReadonly={props.isReadonly}
+            isInvalid={isInvalid}
+            hasWarning={hasWarning}
+            shape={props.shape}
+            className="flex"
+          >
+            <DateInput className="flex-1 grow flex px-3 py-2 text-sm">
+              {(segment) => (
+                <DateSegment
+                  segment={segment}
+                  className={tw('px-0.5 tabular-nums outline-none rounded-sm', 'focus:bg-primary-500 focus:text-white')}
+                />
+              )}
+            </DateInput>
+            <Button className="flex items-center px-2 py-2">
+              <Icon name="calendar" className="h-4 w-4 text-neutral-400" />
+            </Button>
+          </FormFieldComponents.FieldGroup>
+
+          <AnimatedPopover>
+            <Dialog>
+              <CustomCalendar
+                value={value}
+                onChange={setValue}
+                minValue={minDate}
+                maxValue={maxDate}
+                isDateUnavailable={
+                  props.isDateUnavailable ? (date) => props.isDateUnavailable!(date.toString() as Iso.Date) : undefined
+                }
+              />
+            </Dialog>
+          </AnimatedPopover>
+        </AriaDatePicker>
+
+        <FormFieldComponents.FormFieldHelpText
+          id={helpTextId}
+          isInvalid={isInvalid}
+          validationMessage={validationMessage}
+          hasWarning={hasWarning}
+          warningMessage={props.warningMessage}
+          helpText={props.helpText}
+        />
+      </div>
+    </I18nProvider>
+  )
+}
+
+const today = dateFns.now()
+export const DatePicker = Object.assign(DatePicker_, {
+  isDateInPast: (date: Iso.Date) => dateFns.isBefore(date, today)
+})