@maestro-js/components 1.0.0-alpha.0

package/src/components/menu.tsx

@@ -0,0 +1,152 @@
+import * as React from 'react'
+import {
+  Menu as AriaMenu,
+  MenuItem as AriaMenuItem,
+  MenuSection as AriaMenuSection,
+  MenuTrigger as AriaMenuTrigger,
+  Pressable,
+  Separator as AriaSeparator
+} from 'react-aria-components'
+import { AnimatedPopover } from './helpers/animated-popover'
+import { tw } from '../utils/tw'
+
+// ── Types ──────────────────────────────────────────────────────────────────────
+
+export type MenuProps = {
+  /** Trigger element. Can be a ReactNode or render function receiving `{ isOpen }`. */
+  Button: React.ReactNode | ((props: { isOpen: boolean }) => React.ReactElement)
+  children?: React.ReactNode
+  className?: string
+  containerClassName?: string
+  placement?: 'bottom' | 'bottom start' | 'bottom end' | 'top' | 'top start' | 'top end'
+}
+
+export type MenuItemProps = {
+  children?: React.ReactNode
+  className?: string
+  isDisabled?: boolean
+  onAction?: () => void
+  id?: string
+  textValue?: string
+}
+
+export type MenuLinkItemProps = {
+  href: string
+  children?: React.ReactNode
+  className?: string
+  isDisabled?: boolean
+  target?: React.HTMLAttributeAnchorTarget
+  rel?: string
+  id?: string
+  textValue?: string
+}
+
+export type MenuGroupProps = {
+  children?: React.ReactNode
+}
+
+// ── MenuMain ──────────────────────────────────────────────────────────────────
+
+function MenuMain({ Button: ButtonProp, children, className, containerClassName, placement = 'bottom end' }: MenuProps) {
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  const triggerContent = typeof ButtonProp === 'function' ? ButtonProp({ isOpen }) : ButtonProp
+
+  return (
+    <div className={tw('relative inline-block text-left', containerClassName)}>
+      <AriaMenuTrigger isOpen={isOpen} onOpenChange={setIsOpen}>
+        <Pressable>
+          {React.isValidElement(triggerContent) ? (
+            triggerContent
+          ) : (
+            <button type="button" className="inline-flex items-center focus:outline-none">
+              {triggerContent}
+            </button>
+          )}
+        </Pressable>
+        <AnimatedPopover placement={placement} offset={8}>
+          <AriaMenu
+            className={tw(
+              'overflow-hidden min-w-56 w-max rounded bg-white py-1 shadow-lg ring-1 ring-black/5 focus:outline-none',
+              className
+            )}
+            autoFocus="first"
+          >
+            {children}
+          </AriaMenu>
+        </AnimatedPopover>
+      </AriaMenuTrigger>
+    </div>
+  )
+}
+
+MenuMain.displayName = 'Menu'
+
+// ── MenuItem ──────────────────────────────────────────────────────────────────
+
+function Item({ children, className, isDisabled, onAction, id, textValue }: MenuItemProps) {
+  return (
+    <AriaMenuItem
+      id={id}
+      textValue={textValue ?? (typeof children === 'string' ? children : undefined)}
+      onAction={onAction}
+      isDisabled={isDisabled}
+      className={({ isFocused, isDisabled }) =>
+        tw(
+          isFocused ? 'bg-neutral-100 text-neutral-900' : 'text-neutral-700',
+          'group flex w-full items-center px-4 py-2 text-sm outline-none',
+          isDisabled ? 'cursor-not-allowed opacity-50 pointer-events-none' : 'cursor-pointer',
+          className
+        )
+      }
+    >
+      {children}
+    </AriaMenuItem>
+  )
+}
+
+// ── LinkItem ──────────────────────────────────────────────────────────────────
+
+function LinkItem({ href, children, className, isDisabled, target, rel, id, textValue }: MenuLinkItemProps) {
+  return (
+    <AriaMenuItem
+      id={id}
+      textValue={textValue ?? (typeof children === 'string' ? children : undefined)}
+      href={href}
+      target={target}
+      rel={rel}
+      isDisabled={isDisabled}
+      className={({ isFocused, isDisabled }) =>
+        tw(
+          isFocused ? 'bg-neutral-100 text-neutral-900' : 'text-neutral-700',
+          'group flex items-center px-4 py-2 text-sm gap-2 outline-none',
+          isDisabled ? 'cursor-not-allowed opacity-50 pointer-events-none' : 'cursor-pointer',
+          className
+        )
+      }
+    >
+      {children}
+    </AriaMenuItem>
+  )
+}
+
+// ── Group ─────────────────────────────────────────────────────────────────────
+
+function Group({ children }: MenuGroupProps) {
+  return <AriaMenuSection className="py-1">{children}</AriaMenuSection>
+}
+
+// ── Separator ─────────────────────────────────────────────────────────────────
+
+function MenuSeparator() {
+  return <AriaSeparator className="border-t border-neutral-100" />
+}
+
+// ── Export ─────────────────────────────────────────────────────────────────────
+
+export const Menu = Object.assign(MenuMain, {
+  Item,
+  LinkItem,
+  Group,
+  Separator: MenuSeparator
+})

package/src/components/month-day-input.tsx

@@ -0,0 +1,176 @@
+import * as React from 'react'
+import { DateField, DateInput as AriaDateInput, DateSegment, I18nProvider } from 'react-aria-components'
+import { CalendarDate } 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 { monthDayFns, type Iso } from 'iso-fns'
+
+export type MonthDayInputProps = {
+  // 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.MonthDay | null>
+  errorMessage?: React.ReactNode | ((v: ValidationResult) => React.ReactNode)
+
+  // Value management (ISO month-day string --MM-DD)
+  value?: Iso.MonthDay | null
+  defaultValue?: Iso.MonthDay | null
+  onChange?: (value: Iso.MonthDay | null) => void
+
+  // Locale
+  locale?: string
+  shape?: 'rectangle' | 'oval'
+}
+
+export function MonthDayInput(props: MonthDayInputProps) {
+  const hiddenInputRef = React.useRef<HTMLInputElement>(null)
+  const helpTextId = React.useId()
+  const labelId = React.useId()
+
+  // Internal state for CalendarDate (using placeholder year 1972)
+  const [value, _setValue] = React.useState(() => {
+    try {
+      const startingDate = props.value === undefined ? (props.defaultValue ?? null) : props.value
+      return startingDate ? parseMonthDay(startingDate) : null
+    } catch {
+      return null
+    }
+  })
+
+  function setValue(d: CalendarDate | null) {
+    _setValue(d)
+    const monthDay = formatMonthDay(d)
+    props.onChange?.(monthDay)
+    commitValidation()
+  }
+
+  // Sync controlled value
+  if (props.value !== undefined) {
+    const currentMonthDay = formatMonthDay(value)
+    if (props.value !== currentMonthDay) {
+      try {
+        _setValue(props.value ? parseMonthDay(props.value) : null)
+      } catch {
+        _setValue(null)
+      }
+    }
+  }
+
+  // Form validation
+  const {
+    validationMessage,
+    isInvalid: validationInvalid,
+    commitValidation
+  } = HeadlessForm.useValidation(
+    {
+      validate: props.validate,
+      value: formatMonthDay(value),
+      name: props.name,
+      isRequired: props.isRequired,
+      form: props.form,
+      focus() {
+        // Focus handled by DateField
+      }
+    },
+    hiddenInputRef as React.RefObject<HTMLInputElement>
+  )
+
+  const isInvalid = props.isInvalid || validationInvalid
+  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={formatMonthDay(value) ?? ''}
+          form={props.form}
+        />
+
+        <FormFieldComponents.LabelRow label={props.label} cornerHint={props.cornerHint} labelId={labelId} />
+
+        {/* Month/Day input using DateField */}
+        <DateField
+          aria-labelledby={labelId}
+          aria-describedby={helpTextId}
+          value={value}
+          onChange={setValue}
+          placeholderValue={new CalendarDate(1972, 1, 1)}
+          isDisabled={props.isDisabled}
+          isReadOnly={props.isReadonly}
+          isInvalid={isInvalid}
+          isRequired={props.isRequired}
+          granularity="day"
+          hideTimeZone
+        >
+          <FormFieldComponents.FieldGroup
+            isDisabled={props.isDisabled}
+            isReadonly={props.isReadonly}
+            isInvalid={isInvalid}
+            hasWarning={hasWarning}
+            shape={props.shape}
+          >
+            <AriaDateInput className="flex px-3 py-2 text-sm [&>[data-literal]:not(:has(~[data-literal]))]:hidden">
+              {(segment) => {
+                const isHidden = segment.type === 'year'
+
+                return (
+                  <DateSegment
+                    segment={segment}
+                    data-literal={segment.type === 'literal' ? true : undefined}
+                    className={tw(
+                      'px-0.5 tabular-nums outline-none rounded-sm',
+                      'focus:bg-primary-500 focus:text-white',
+                      segment.isPlaceholder && 'text-neutral-400',
+                      'last-of-type:hidden',
+                      isHidden && 'hidden'
+                    )}
+                  />
+                )
+              }}
+            </AriaDateInput>
+          </FormFieldComponents.FieldGroup>
+        </DateField>
+
+        <FormFieldComponents.FormFieldHelpText
+          id={helpTextId}
+          isInvalid={isInvalid}
+          validationMessage={validationMessage}
+          hasWarning={hasWarning}
+          warningMessage={props.warningMessage}
+          helpText={props.helpText}
+        />
+      </div>
+    </I18nProvider>
+  )
+}
+
+function parseMonthDay(monthDay: Iso.MonthDay): CalendarDate | null {
+  if (!monthDayFns.isValid(monthDay)) return null
+  // Use a leap-year placeholder so Feb 29 is valid
+  return new CalendarDate(1972, monthDayFns.getMonth(monthDay), monthDayFns.getDay(monthDay))
+}
+
+function formatMonthDay(date: CalendarDate | null): Iso.MonthDay | null {
+  if (!date) return null
+  const month = date.month.toString().padStart(2, '0')
+  const day = date.day.toString().padStart(2, '0')
+  return `--${month}-${day}` as Iso.MonthDay
+}

package/src/components/multi-file-input.tsx

@@ -0,0 +1,244 @@
+import * as React from 'react'
+import { HeadlessForm } from '@maestro-js/form'
+import type { ValidationFunction, ValidationResult } from '@maestro-js/form'
+import { tw } from '../utils/tw'
+import { formatFileSize, checkFileType, checkFileMaxSize } from '../utils/file-input'
+import { FormFieldComponents } from './helpers/form-field'
+import { HeadlessFileInput } from './headless-file-input'
+import { Icon } from './icon'
+
+export interface UrlFileReference {
+  name: string
+  url: string
+}
+
+export type FileLike = File | string | UrlFileReference
+
+export type MultiFileInputProps = {
+  // Form identification
+  name?: string
+  form?: string
+
+  // Display elements
+  label?: React.ReactNode
+  cornerHint?: React.ReactNode
+  helpText?: React.ReactNode
+  warningMessage?: React.ReactNode
+
+  // Validation and state
+  isRequired?: boolean
+  isDisabled?: boolean
+  isReadonly?: boolean
+  isInvalid?: boolean
+  validate?: ValidationFunction<FileLike[]>
+  errorMessage?: React.ReactNode | ((v: ValidationResult) => React.ReactNode)
+
+  // Value management (File objects array or strings, held in memory until form submit)
+  value?: FileLike[]
+  defaultValue?: FileLike[]
+  onChange?: (value: FileLike[], hasError: boolean) => void
+
+  // File specific
+  accept?: string | null
+  maxSize?: number // in bytes per file
+  maxFiles?: number
+}
+
+export function MultiFileInput(props: MultiFileInputProps) {
+  const inputRef = React.useRef<HTMLInputElement>(null)
+  const helpTextId = React.useId()
+  const inputId = React.useId()
+
+  const exceededMaxSizeFn = React.useCallback(
+    (value: FileLike[]) => {
+      for (let i = 0; i < value.length; i++) {
+        const v = value[i]
+        if (v instanceof File && props.maxSize) {
+          const error = checkFileMaxSize(v, props.maxSize)
+          if (error) return `File ${i + 1} exceeded max size of ${formatFileSize(props.maxSize)}`
+        }
+      }
+      return null
+    },
+    [props.maxSize]
+  )
+
+  const formatNotSupportedFn = React.useCallback(
+    (value: FileLike[]) => {
+      if (!props.accept) return null
+      for (const v of value) {
+        if (v instanceof File) {
+          const error = checkFileType(v, props.accept)
+          if (error) return error
+        }
+      }
+      return null
+    },
+    [props.accept]
+  )
+
+  // Controlled state management
+  const [value, setValue] = HeadlessForm.useControlledState(props.value, props.defaultValue ?? [], (value) => {
+    if (props.onChange) {
+      props.onChange(value, Boolean(exceededMaxSizeFn(value) || formatNotSupportedFn(value)))
+    }
+  })
+
+  // Form validation
+  const {
+    validationMessage,
+    isInvalid: validationInvalid,
+    commitValidation
+  } = HeadlessForm.useValidation(
+    {
+      validate(files) {
+        const exceededMaxSize = exceededMaxSizeFn(files)
+        const formatNotSupported = formatNotSupportedFn(files)
+        const exceededMaxFiles = props.maxFiles !== undefined && files.length > props.maxFiles ? 'Too many files' : null
+        const custom = [props.validate ? props.validate(files) : []].flat()
+
+        const errors = [exceededMaxSize, formatNotSupported, exceededMaxFiles, ...custom].filter(Boolean)
+        return errors as string[]
+      },
+      value,
+      name: props.name,
+      isRequired: props.isRequired,
+      form: props.form,
+      focus() {
+        inputRef.current?.focus()
+      }
+    },
+    inputRef
+  )
+
+  const isInvalid = props.isInvalid || validationInvalid
+  const hasWarning = Boolean(props.warningMessage) && !isInvalid
+  const errorMessage = validationMessage
+
+  const handleRemove = (index: number) => {
+    const newFiles = value.filter((_, i) => i !== index)
+    setValue(newFiles)
+  }
+
+  return (
+    <HeadlessFileInput
+      value={value.map((v) => (v instanceof File ? v : typeof v === 'string' ? v : v.url))}
+      onChange={(v) => {
+        setValue(
+          v.map((a) =>
+            a instanceof File
+              ? a
+              : (value.find((b) => (b instanceof File || typeof b === 'string' ? false : b.url === a)) ?? {
+                  name: a,
+                  url: a
+                })
+          )
+        )
+        commitValidation()
+      }}
+      multiple
+    >
+      <HeadlessForm.HiddenInput value="" form={props.form} name={undefined} ref={inputRef} />
+      <div className="relative">
+        <FormFieldComponents.LabelRow label={props.label} cornerHint={props.cornerHint} htmlFor={inputId} />
+
+        <HeadlessFileInput.Preview>
+          {(files) => (
+            <>
+              {files.length > 0 && (
+                <div className="space-y-2 mb-3">
+                  {files.map((fileItem, index) => {
+                    const fileName = fileItem.file
+                      ? fileItem.file.name
+                      : (value.filter((v) => !(v instanceof File) && typeof v !== 'string') as UrlFileReference[]).find(
+                          (v) => v.url === fileItem.fileUrl
+                        )?.name
+                    return (
+                      <div
+                        key={index}
+                        className="flex items-center text-left justify-between px-6 py-2 rounded border border-neutral-200 bg-white"
+                      >
+                        <div className="flex items-center gap-2">
+                          <Icon name="document" className="h-5 w-5 text-neutral-400" />
+                          <div className="min-w-0">
+                            <p className="text-sm font-medium text-neutral-900 truncate">{fileName || 'File'}</p>
+                            {fileItem.file && <p className="text-xs text-neutral-500">{formatFileSize(fileItem.file.size)}</p>}
+                          </div>
+                        </div>
+                        {!props.isDisabled && !props.isReadonly && (
+                          <button
+                            type="button"
+                            onClick={() => handleRemove(index)}
+                            className="p-1 hover:bg-neutral-100 rounded transition-colors"
+                          >
+                            <Icon name="x-mark" className="h-4 w-4 text-neutral-500" />
+                          </button>
+                        )}
+                      </div>
+                    )
+                  })}
+                </div>
+              )}
+            </>
+          )}
+        </HeadlessFileInput.Preview>
+
+        <HeadlessFileInput.DropZone
+          accept={props.accept ?? undefined}
+          name={props.name}
+          inputId={inputId}
+          disabled={props.isDisabled || props.isReadonly}
+        >
+          {({ dragOver }) => (
+            <div
+              className={tw(
+                'relative block w-full rounded-md text-center focus:outline-none focus-within:ring-2 focus-within:ring-primary-500 focus-within:ring-offset-2',
+                'border-2 border-dashed border-neutral-200 hover:border-neutral-300',
+                'px-6 py-2 min-h-[60px] flex items-center justify-center',
+                (props.isDisabled || props.isReadonly) && 'border-neutral-100 cursor-not-allowed',
+                hasWarning &&
+                  'border-notice-300 hover:border-notice-400 text-notice-900 placeholder-notice-300 focus-within:border-notice-500 focus-within:ring-notice-500',
+                isInvalid &&
+                  'border-negative-300 hover:border-negative-400 text-negative-900 placeholder-negative-300 focus-within:border-negative-500 focus-within:ring-negative-500'
+              )}
+            >
+              {dragOver ? (
+                <DragOverContent />
+              ) : (
+                <div className="flex items-center w-full gap-3">
+                  <Icon name="cloud-arrow-up" className="h-5 w-5 text-neutral-400 flex-shrink-0" />
+                  <div className="text-left">
+                    <p className="text-sm font-medium text-neutral-600">Click to upload or drag and drop</p>
+                    <p className="text-xs text-neutral-500">
+                      {value.length > 0 ? 'Add more files' : 'Select files'}
+                      {props.accept && ` (${props.accept})`}
+                      {props.maxSize && ` • Max: ${formatFileSize(props.maxSize)}`}
+                    </p>
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+        </HeadlessFileInput.DropZone>
+
+        <FormFieldComponents.FormFieldHelpText
+          id={helpTextId}
+          isInvalid={isInvalid}
+          validationMessage={errorMessage}
+          hasWarning={hasWarning}
+          warningMessage={props.warningMessage}
+          helpText={props.helpText}
+        />
+      </div>
+    </HeadlessFileInput>
+  )
+}
+
+function DragOverContent() {
+  return (
+    <div className="flex items-center gap-3">
+      <Icon name="cloud-arrow-up" className="h-5 w-5 text-gray-400 flex-shrink-0" />
+      <span className="text-sm font-semibold text-gray-900">Drop files here</span>
+    </div>
+  )
+}