@maestro-js/components 1.0.0-alpha.0

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

@@ -0,0 +1,362 @@
+import React from 'react'
+import { useComposedRefs } from '../utils/compose-refs'
+
+export type HeadlessFileInputProps = {
+  children?: React.ReactNode
+} & (
+  | {
+      multiple: true
+      value?: (string | File)[]
+      defaultValue?: (string | File)[]
+      onChange?(value: (string | File)[]): unknown
+    }
+  | {
+      multiple?: false
+      value?: string | File | null
+      defaultValue?: string | File | null
+      onChange?(value: string | File | null): unknown
+    }
+)
+
+type FileInputContext =
+  | { multiple?: false; value: File | string | null; onChange(value: File | string | null): unknown }
+  | { multiple: true; value: (File | string)[]; onChange(value: (File | string)[]): unknown }
+
+const fileInputContext = React.createContext<FileInputContext>({
+  multiple: false,
+  value: null,
+  onChange: () => null
+})
+
+function FileInputContainer({ multiple, value, defaultValue, onChange, children }: HeadlessFileInputProps) {
+  const controlled = useControlled({ multiple, value, defaultValue, onChange }) as FileInputContext
+  return <fileInputContext.Provider value={controlled}>{children}</fileInputContext.Provider>
+}
+
+FileInputContainer.displayName = 'HeadlessFileInput'
+
+const FileInputDropZone = React.forwardRef<
+  HTMLLabelElement,
+  {
+    name?: string
+    children: ((props: { dragOver: boolean }) => React.ReactElement) | React.ReactElement
+    inputId?: string
+    accept?: string | undefined
+    onDragChange?(value: boolean): unknown
+    capture?: React.InputHTMLAttributes<'file'>['capture']
+    disabled?: React.InputHTMLAttributes<'file'>['disabled']
+    processFile?: (file: File) => Promise<File>
+    inputRef?: React.Ref<HTMLInputElement>
+  } & Omit<React.ComponentProps<'label'>, 'children'>
+>(({ children, inputId, inputRef, onDragChange, name, accept, capture, disabled, processFile, ...props }, ref) => {
+  const { onChange, value, multiple } = React.useContext(fileInputContext)
+  const [dragOver, setDragOver] = React.useState(false)
+  const startDrag = React.useCallback(
+    (e: React.DragEvent<HTMLInputElement>) => {
+      e.preventDefault()
+      e.stopPropagation()
+      setDragOver(true)
+      onDragChange && onDragChange(true)
+    },
+    [setDragOver, onDragChange]
+  )
+  const stopDrag = React.useCallback(
+    (e: React.DragEvent<HTMLInputElement>) => {
+      e.preventDefault()
+      e.stopPropagation()
+      setDragOver(false)
+      onDragChange && onDragChange(false)
+    },
+    [setDragOver, onDragChange]
+  )
+
+  const childrenResult = typeof children === 'function' ? children({ dragOver }) : children
+  const childProps = childrenResult.props as Record<string, unknown>
+  const cloned = React.cloneElement(
+    childrenResult,
+    {
+      ...childProps
+    },
+    [
+      ...React.Children.toArray(childProps.children as React.ReactNode),
+      <FileInputInput
+        key="file-input-hidden"
+        id={inputId}
+        name={name}
+        accept={accept}
+        ref={inputRef}
+        style={{ width: '0.1px', height: '0.1px', opacity: 0, overflow: 'hidden', position: 'absolute', zIndex: -10 }}
+        capture={capture}
+        disabled={disabled}
+        processFile={processFile}
+      />
+    ]
+  )
+
+  return (
+    <label {...props} ref={ref}>
+      <div
+        onDrag={cancel}
+        onDragStart={cancel}
+        onDragOver={cancel}
+        onDragEnter={startDrag}
+        onDragLeave={stopDrag}
+        onDrop={(e) => {
+          e.preventDefault()
+          e.stopPropagation()
+          setDragOver(false)
+          onDragChange && onDragChange(false)
+          if (e.dataTransfer.files.length) {
+            if (multiple) {
+              onChange([...value, ...Array.from(e.dataTransfer.files)])
+            } else {
+              onChange(e.dataTransfer.files.item(0) || null)
+            }
+          } else {
+            const uri = e.dataTransfer.getData('text/uri-list')
+            if (uri) {
+              fetchFileFromUri(uri).then((file) => {
+                if (multiple) {
+                  onChange([...value, file])
+                } else {
+                  onChange(file)
+                }
+              })
+            }
+          }
+        }}
+      >
+        {cloned}
+      </div>
+    </label>
+  )
+})
+FileInputDropZone.displayName = 'FileInputDropZone'
+
+const FileInputInput = React.forwardRef<
+  HTMLInputElement,
+  React.ComponentPropsWithoutRef<'input'> & { processFile?: (file: File) => Promise<File> }
+>(({ name, processFile, form, ...props }, refProp) => {
+  const { multiple, value, onChange } = React.useContext(fileInputContext)
+  const localRef = React.useRef<HTMLInputElement>(null)
+  const ref = useComposedRefs(localRef, refProp)
+
+  React.useEffect(() => {
+    if (localRef.current) {
+      const dt = new DataTransfer()
+      if (Array.isArray(value)) {
+        value.forEach(async (v) => v instanceof File && dt.items.add(v))
+      } else if (value && value instanceof File) {
+        dt.items.add(value)
+      }
+      localRef.current.files = dt.files
+    }
+  }, [value, processFile])
+
+  const urls = React.useMemo(() => {
+    if (Array.isArray(value)) {
+      return value.map((v, i) => (typeof v === 'string' ? { name: `${name}.${i}`, value: v } : null)).filter(Boolean) as {
+        name: string
+        value: string
+      }[]
+    } else if (value && typeof value === 'string') {
+      return [{ name: name, value: value }]
+    } else {
+      return []
+    }
+  }, [value, name])
+
+  const hasFiles =
+    typeof value !== 'string' &&
+    !!value &&
+    !(Array.isArray(value) && !value.filter((v) => v && typeof v !== 'string').length)
+  const hasUrls = !!urls.length
+
+  return (
+    <>
+      <input
+        {...props}
+        type="file"
+        form={form}
+        ref={hasFiles ? ref : undefined}
+        name={hasFiles ? name : undefined}
+        onChange={async (e) => {
+          const newValue = (
+            multiple
+              ? e.currentTarget.files
+                ? [
+                    ...value,
+                    ...(await Promise.all(
+                      Array.from(e.currentTarget.files).map(async (file) => (processFile ? processFile(file) : file))
+                    ))
+                  ]
+                : []
+              : processFile && e.currentTarget.files?.item(0)
+                ? await processFile(e.currentTarget.files?.item(0) as File)
+                : e.currentTarget.files?.item(0)
+          ) as any
+
+          onChange(newValue)
+        }}
+        multiple={multiple}
+      />
+      {urls.map((url, i) => (
+        <input
+          type="hidden"
+          ref={i === 0 && !hasFiles ? ref : undefined}
+          form={form}
+          value={url.value}
+          name={url.name}
+          key={url.name}
+        />
+      ))}
+      {!hasUrls && !hasFiles ? <input type="hidden" ref={ref} form={form} name={name} value="" /> : null}
+    </>
+  )
+})
+FileInputInput.displayName = 'FileInputInput'
+
+function FilePreview({
+  children
+}: {
+  children(
+    props: {
+      file: File | null
+      fileUrl: string
+      remove(): unknown
+      replace(newFile: File | string): unknown
+    }[]
+  ): React.ReactNode
+}) {
+  const { value, onChange } = React.useContext(fileInputContext)
+  const urlMap = useFileUrls(value)
+  const removeSingle = React.useCallback(() => onChange(null as any), [onChange])
+  const replaceSingle = React.useCallback((file: File | string) => onChange(file as any), [onChange])
+
+  const removeMultiple = React.useCallback(
+    (index: number) => onChange((value as File[]).filter((f, i) => i !== index) as any),
+    [value, onChange]
+  )
+  const replaceMultiple = React.useCallback(
+    (index: number, file: File | string) =>
+      onChange((value as (File | string)[]).map((f, i) => (i === index ? file : f)) as any),
+    [value, onChange]
+  )
+
+  if (!value) {
+    return <>{children([])}</>
+  } else if (Array.isArray(value)) {
+    return (
+      <>
+        {children(
+          value.map((v, i) => ({
+            file: typeof v === 'string' ? null : v,
+            fileUrl: urlMap.get(v) ?? (typeof v === 'string' ? v : ''),
+            remove: () => removeMultiple(i),
+            replace: (f) => replaceMultiple(i, f)
+          }))
+        )}
+      </>
+    )
+  } else {
+    return (
+      <>
+        {children([
+          {
+            file: typeof value === 'string' ? null : value,
+            fileUrl: urlMap.get(value) ?? (typeof value === 'string' ? value : ''),
+            remove: removeSingle,
+            replace: replaceSingle
+          }
+        ])}
+      </>
+    )
+  }
+}
+
+export const HeadlessFileInput = Object.assign(FileInputContainer, {
+  Input: FileInputInput,
+  Preview: FilePreview,
+  DropZone: FileInputDropZone
+})
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+function cancel(e: React.SyntheticEvent) {
+  e.stopPropagation()
+  e.preventDefault()
+}
+
+function useControlled<T extends string | File | null | (string | File)[]>({
+  defaultValue,
+  value,
+  onChange: onChangeRaw,
+  multiple
+}: {
+  value?: T
+  defaultValue?: T
+  onChange?(value: null | string | File | (string | File)[]): unknown
+  multiple?: boolean
+}) {
+  const [state, setState] = React.useState(defaultValue)
+
+  const onChange = React.useCallback(
+    (v: T) => {
+      setState(v)
+      onChangeRaw && onChangeRaw(v)
+    },
+    [onChangeRaw, setState]
+  )
+
+  const proposed = value === undefined ? state : value
+
+  return { value: !proposed && multiple ? [] : proposed || null, onChange, multiple: !!multiple }
+}
+
+function useFileUrls(value: (File | string)[] | File | string | null): Map<File | string, string> {
+  const urlMapRef = React.useRef(new Map<File | string, string>())
+
+  const items = value === null ? [] : Array.isArray(value) ? value : [value]
+
+  // Create blob URLs for new items only
+  for (const item of items) {
+    if (!urlMapRef.current.has(item)) {
+      urlMapRef.current.set(item, typeof item === 'string' ? item : URL.createObjectURL(item))
+    }
+  }
+
+  // Prune stale entries and revoke their blob URLs
+  const currentKeys = new Set(items)
+  React.useEffect(() => {
+    for (const [key, url] of urlMapRef.current) {
+      if (!currentKeys.has(key)) {
+        if (typeof key !== 'string') URL.revokeObjectURL(url)
+        urlMapRef.current.delete(key)
+      }
+    }
+  })
+
+  // Revoke all blob URLs on unmount
+  React.useEffect(() => {
+    const map = urlMapRef.current
+    return () => {
+      for (const [key, url] of map) {
+        if (typeof key !== 'string') URL.revokeObjectURL(url)
+      }
+      map.clear()
+    }
+  }, [])
+
+  return urlMapRef.current
+}
+
+async function fetchFileFromUri(uri: string): Promise<File> {
+  const res = await fetch(uri)
+  const blob = await res.blob()
+  const contentType = res.headers.get('content-type') || blob.type || ''
+  const contentDisposition = res.headers.get('content-disposition')
+  let filename = new URL(uri).pathname.split('/').pop() || 'file'
+  const match = contentDisposition?.match(/filename\*?=(?:UTF-8'')?["']?([^"';\n]+)/)
+  if (match) filename = decodeURIComponent(match[1]!)
+  return new File([blob], filename, { type: contentType })
+}

package/src/components/helpers/animated-popover.tsx

@@ -0,0 +1,24 @@
+import { Popover, type PopoverProps } from 'react-aria-components'
+import { tw } from '../../utils/tw'
+
+const animationClasses = tw(
+  'transition-all duration-150 ease-out',
+  // resting state: keep transform properties defined so transitions have endpoints
+  'translate-x-0 translate-y-0',
+  // entering: fade + slide from trigger direction
+  'data-[entering]:opacity-0',
+  'data-[entering]:data-[placement=bottom]:-translate-y-1',
+  'data-[entering]:data-[placement=top]:translate-y-1',
+  'data-[entering]:data-[placement=left]:translate-x-1',
+  'data-[entering]:data-[placement=right]:-translate-x-1',
+  // exiting: fade + slide toward trigger direction
+  'data-[exiting]:opacity-0',
+  'data-[exiting]:data-[placement=bottom]:-translate-y-1',
+  'data-[exiting]:data-[placement=top]:translate-y-1',
+  'data-[exiting]:data-[placement=left]:translate-x-1',
+  'data-[exiting]:data-[placement=right]:-translate-x-1'
+)
+
+export function AnimatedPopover({ className, ...props }: PopoverProps) {
+  return <Popover {...props} className={tw(animationClasses, className)} />
+}

package/src/components/helpers/button-context.ts

@@ -0,0 +1,10 @@
+import React from 'react'
+import type { ButtonVariant, ButtonColor, ButtonSize, ButtonShape } from './get-button-classes'
+
+export const ButtonContext = React.createContext<{
+  variant?: ButtonVariant
+  color?: ButtonColor
+  size?: ButtonSize
+  shape?: ButtonShape
+  fullWidth?: boolean
+}>({})

package/src/components/helpers/calendar-month-year-picker.tsx

@@ -0,0 +1,280 @@
+import * as React from 'react'
+import {
+  Button,
+  Calendar,
+  CalendarGrid,
+  CalendarCell,
+  Heading,
+  CalendarGridHeader,
+  CalendarHeaderCell,
+  CalendarGridBody
+} from 'react-aria-components'
+import { CalendarDate, CalendarDateTime } from '@internationalized/date'
+import { tw } from '../../utils/tw'
+import { Icon } from '../icon'
+
+type MonthYearPickerProps = {
+  currentDate: CalendarDate | CalendarDateTime
+  onSelect: (year: number, month: number) => void
+  onCancel: () => void
+}
+
+export function MonthYearPicker({ currentDate, onSelect, onCancel }: MonthYearPickerProps) {
+  const [selectedYear, setSelectedYear] = React.useState(currentDate.year)
+  const [viewingYear, setViewingYear] = React.useState(currentDate.year)
+
+  const months = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December'
+  ]
+
+  // Generate year range (current year ± 50 years)
+  const startYear = currentDate.year - 50
+  const endYear = currentDate.year + 50
+  const years = Array.from({ length: endYear - startYear + 1 }, (_, i) => startYear + i)
+
+  // Find years to display (show 12 years at a time, 3x4 grid)
+  const yearIndex = years.indexOf(viewingYear)
+  const displayYears = years.slice(Math.max(0, yearIndex - 5), Math.min(years.length, yearIndex + 7))
+
+  const handlePreviousYears = () => {
+    setViewingYear((prev) => prev - 12)
+  }
+
+  const handleNextYears = () => {
+    setViewingYear((prev) => prev + 12)
+  }
+
+  return (
+    <div className="bg-white border border-neutral-200 rounded-md shadow-lg p-4 w-80">
+      {/* Year selection header */}
+      <div className="mb-4">
+        <header className="flex items-center justify-between mb-3">
+          <Button className="p-1 hover:bg-neutral-100 rounded" onPress={handlePreviousYears}>
+            <Icon name="chevron-left" className="h-4 w-4" />
+          </Button>
+          <div className="text-sm font-semibold text-neutral-900">
+            {displayYears[0]} - {displayYears[displayYears.length - 1]}
+          </div>
+          <Button className="p-1 hover:bg-neutral-100 rounded" onPress={handleNextYears}>
+            <Icon name="chevron-right" className="h-4 w-4" />
+          </Button>
+        </header>
+
+        {/* Year grid */}
+        <div className="grid grid-cols-3 gap-2">
+          {displayYears.map((year) => (
+            <button
+              key={year}
+              type="button"
+              onClick={() => setSelectedYear(year)}
+              className={tw(
+                'py-2 px-3 text-sm rounded cursor-pointer transition-colors',
+                'hover:bg-neutral-100',
+                selectedYear === year && 'bg-primary-500 text-white hover:bg-primary-500',
+                year === currentDate.year && selectedYear !== year && 'font-semibold'
+              )}
+            >
+              {year}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Month selection */}
+      <div>
+        <div className="text-sm font-semibold text-neutral-900 mb-2">{selectedYear}</div>
+        <div className="grid grid-cols-3 gap-2">
+          {months.map((month, index) => {
+            const monthNum = index + 1
+            const isCurrentMonth = selectedYear === currentDate.year && monthNum === currentDate.month
+
+            return (
+              <button
+                key={month}
+                type="button"
+                onClick={() => onSelect(selectedYear, monthNum)}
+                className={tw(
+                  'py-2 px-2 text-sm rounded cursor-pointer transition-colors',
+                  'hover:bg-neutral-100',
+                  isCurrentMonth && 'font-semibold border border-primary-500'
+                )}
+              >
+                {month.slice(0, 3)}
+              </button>
+            )
+          })}
+        </div>
+      </div>
+
+      {/* Cancel button */}
+      <div className="mt-4 flex justify-end">
+        <button
+          type="button"
+          onClick={onCancel}
+          className="py-1 px-3 text-sm text-neutral-600 hover:text-neutral-900 hover:bg-neutral-100 rounded transition-colors"
+        >
+          Cancel
+        </button>
+      </div>
+    </div>
+  )
+}
+
+type CustomCalendarPropsBase = {
+  isDateUnavailable?: (date: CalendarDate | CalendarDateTime) => boolean
+}
+
+type CustomCalendarPropsDate = CustomCalendarPropsBase & {
+  value: CalendarDate | null
+  onChange: (date: CalendarDate | null) => void
+  minValue?: CalendarDate
+  maxValue?: CalendarDate
+}
+
+type CustomCalendarPropsDateTime = CustomCalendarPropsBase & {
+  value: CalendarDateTime | null
+  onChange: (date: CalendarDateTime | null) => void
+  minValue?: CalendarDateTime
+  maxValue?: CalendarDateTime
+}
+
+type CustomCalendarProps = CustomCalendarPropsDate | CustomCalendarPropsDateTime
+
+export function CustomCalendar(props: CustomCalendarProps) {
+  const { value, onChange, minValue, maxValue, isDateUnavailable } = props
+  const [showMonthYearPicker, setShowMonthYearPicker] = React.useState(false)
+
+  // Create a default focused date
+  const createDefaultDate = () => {
+    const now = new Date()
+    const year = now.getFullYear()
+    const month = now.getMonth() + 1
+    const day = now.getDate()
+
+    // Check if we're working with CalendarDateTime
+    if (value && 'hour' in value) {
+      return new CalendarDateTime(year, month, day, 0, 0, 0)
+    }
+    return new CalendarDate(year, month, day)
+  }
+
+  const [focusedDate, setFocusedDate] = React.useState(value || createDefaultDate())
+
+  const handleMonthYearSelect = (year: number, month: number) => {
+    if ('hour' in focusedDate) {
+      // CalendarDateTime
+      const newDate = focusedDate.set({ year, month })
+      setFocusedDate(newDate)
+    } else {
+      // CalendarDate - use safe day value
+      const newDate = new CalendarDate(year, month, Math.min(focusedDate.day, 28))
+      setFocusedDate(newDate)
+    }
+    setShowMonthYearPicker(false)
+  }
+
+  const handleFocusChange = (date: CalendarDate) => {
+    if ('hour' in focusedDate) {
+      // Convert CalendarDate to CalendarDateTime by preserving time from focusedDate
+      const newDateTime = focusedDate.set({
+        year: date.year,
+        month: date.month,
+        day: date.day
+      })
+      setFocusedDate(newDateTime)
+    } else {
+      setFocusedDate(date)
+    }
+  }
+
+  if (showMonthYearPicker) {
+    return (
+      <MonthYearPicker
+        currentDate={focusedDate}
+        onSelect={handleMonthYearSelect}
+        onCancel={() => setShowMonthYearPicker(false)}
+      />
+    )
+  }
+
+  const handleCalendarChange = (date: CalendarDate | CalendarDateTime | null) => {
+    if (typeof onChange === 'function') {
+      // Type assertion needed due to union type constraints
+      ;(onChange as (date: CalendarDate | CalendarDateTime | null) => void)(date)
+    }
+  }
+
+  return (
+    <Calendar
+      value={value ?? undefined}
+      onChange={handleCalendarChange}
+      focusedValue={focusedDate}
+      onFocusChange={handleFocusChange}
+      minValue={minValue !== undefined && minValue !== null ? minValue : undefined}
+      maxValue={maxValue !== undefined && maxValue !== null ? maxValue : undefined}
+      isDateUnavailable={
+        isDateUnavailable
+          ? (date) => {
+              // Convert DateValue to CalendarDate for the callback
+              if ('hour' in date) {
+                // It's a CalendarDateTime, convert to CalendarDate
+                const calendarDate = new CalendarDate(date.year, date.month, date.day)
+                return isDateUnavailable(calendarDate)
+              }
+              return isDateUnavailable(date as CalendarDate)
+            }
+          : undefined
+      }
+      className="bg-white border border-neutral-200 rounded-md shadow-lg p-3"
+    >
+      <header className="flex items-center justify-between mb-2">
+        <Button slot="previous" className="p-1 hover:bg-neutral-100 rounded">
+          <Icon name="chevron-left" className="h-4 w-4" />
+        </Button>
+        <button
+          type="button"
+          onClick={() => setShowMonthYearPicker(true)}
+          className="text-sm font-semibold text-neutral-900 hover:bg-neutral-100 px-2 py-1 rounded transition-colors"
+        >
+          <Heading />
+        </button>
+        <Button slot="next" className="p-1 hover:bg-neutral-100 rounded">
+          <Icon name="chevron-right" className="h-4 w-4" />
+        </Button>
+      </header>
+      <CalendarGrid>
+        <CalendarGridHeader>
+          {(day) => <CalendarHeaderCell className="text-xs text-neutral-500 font-medium w-8 h-8">{day}</CalendarHeaderCell>}
+        </CalendarGridHeader>
+        <CalendarGridBody>
+          {(date) => (
+            <CalendarCell
+              date={date}
+              className={({ isSelected, isOutsideMonth, isDisabled, isUnavailable, isFocusVisible }) =>
+                tw(
+                  'w-8 h-8 text-sm rounded cursor-pointer flex items-center justify-center',
+                  'hover:bg-neutral-100',
+                  isOutsideMonth && 'text-neutral-300',
+                  (isDisabled || isUnavailable) && 'text-neutral-300 cursor-not-allowed',
+                  isSelected && 'bg-primary-500 text-white hover:bg-primary-500',
+                  isFocusVisible && 'ring-2 ring-primary-500 ring-offset-1'
+                )
+              }
+            />
+          )}
+        </CalendarGridBody>
+      </CalendarGrid>
+    </Calendar>
+  )
+}