@maestro-js/components 1.0.0-alpha.0

package/src/components/numeric-tag-field.tsx

@@ -0,0 +1,271 @@
+import * as React from 'react'
+import { HeadlessForm } from '@maestro-js/form'
+import type { ValidationFunction } from '@maestro-js/form'
+import { tw } from '../utils/tw'
+import { FormFieldComponents } from './helpers/form-field'
+import { Icon } from './icon'
+
+export type NumericTagFieldProps = {
+  // 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
+  isInvalid?: boolean
+  validate?: ValidationFunction<number[]>
+
+  // Value management
+  value?: number[]
+  defaultValue?: number[]
+  onChange?: (value: number[]) => void
+
+  // Tag specific
+  maxTags?: number
+  hideTagCount?: boolean
+  allowDuplicates?: boolean
+  separator?: string | RegExp | (string | RegExp)[]
+  validateTag?: (tag: number) => boolean
+  transformTag?: (tag: number) => number
+  min?: number
+  max?: number
+  shape?: 'rectangle' | 'oval'
+}
+
+export function NumericTagField(props: NumericTagFieldProps) {
+  const inputRef = React.useRef<HTMLInputElement>(null)
+  const hiddenInputRef = React.useRef<HTMLInputElement>(null)
+  const helpTextId = React.useId()
+  const inputId = React.useId()
+  const [query, setQuery] = React.useState('')
+
+  // Controlled state management
+  const [tags, setTags] = HeadlessForm.useControlledState(props.value, props.defaultValue ?? [], props.onChange)
+
+  // Form validation
+  const {
+    validationMessage,
+    isInvalid: validationInvalid,
+    commitValidation
+  } = HeadlessForm.useValidation(
+    {
+      validate: props.validate,
+      value: tags,
+      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
+
+  const separators = React.useMemo(() => {
+    const sep = props.separator ?? [',', '\n']
+    return Array.isArray(sep) ? sep : [sep]
+  }, [props.separator])
+
+  const addTag = React.useCallback(
+    (raw: string) => {
+      const trimmed = raw.trim()
+      if (!trimmed || Number.isNaN(Number(trimmed))) return
+
+      let num = Number(trimmed)
+
+      // Transform tag if needed
+      if (props.transformTag) num = props.transformTag(num)
+
+      // Check min/max bounds
+      if (props.min !== undefined && num < props.min) return
+      if (props.max !== undefined && num > props.max) return
+
+      // Validate tag
+      if (props.validateTag && !props.validateTag(num)) return
+
+      // Check for duplicates
+      if (!props.allowDuplicates && tags.includes(num)) return
+
+      // Check max tags
+      if (props.maxTags !== undefined && tags.length >= props.maxTags) return
+
+      setTags([...tags, num])
+      setQuery('')
+      commitValidation()
+    },
+    [
+      tags,
+      setTags,
+      commitValidation,
+      props.transformTag,
+      props.validateTag,
+      props.allowDuplicates,
+      props.maxTags,
+      props.min,
+      props.max
+    ]
+  )
+
+  const removeTag = React.useCallback(
+    (index: number) => {
+      setTags(tags.filter((_, i) => i !== index))
+      commitValidation()
+    },
+    [tags, setTags, commitValidation]
+  )
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value
+
+    for (const sep of separators) {
+      const matches = typeof sep === 'string' ? value.includes(sep) : sep.test(value)
+      if (matches) {
+        const parts = typeof sep === 'string' ? value.split(sep) : value.split(sep)
+        for (const part of parts) {
+          if (part.trim()) addTag(part)
+        }
+        setQuery('')
+        return
+      }
+    }
+
+    setQuery(value)
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      if (query) addTag(query)
+    } else if (e.key === 'Backspace' && !query && tags.length > 0) {
+      removeTag(tags.length - 1)
+    }
+  }
+
+  const atMax = props.maxTags !== undefined && tags.length >= props.maxTags
+  const isDisabled = props.isDisabled || atMax
+
+  const defaultPlaceholder =
+    props.min !== undefined && props.max !== undefined
+      ? `Add numbers (${props.min}–${props.max})...`
+      : props.min !== undefined
+        ? `Add numbers (min: ${props.min})...`
+        : props.max !== undefined
+          ? `Add numbers (max: ${props.max})...`
+          : 'Add numbers...'
+
+  return (
+    <div className="relative">
+      {/* Hidden inputs for form submission */}
+      {tags.map((tag, i) => (
+        <HeadlessForm.HiddenInput
+          key={i}
+          ref={i === 0 ? hiddenInputRef : undefined}
+          name={props.name}
+          value={tag}
+          form={props.form}
+        />
+      ))}
+      {tags.length === 0 && <HeadlessForm.HiddenInput ref={hiddenInputRef} name={props.name} value="" form={props.form} />}
+
+      <FormFieldComponents.LabelRow label={props.label} cornerHint={props.cornerHint} htmlFor={inputId} />
+
+      <FormFieldComponents.FieldGroup isDisabled={props.isDisabled} isInvalid={isInvalid} hasWarning={hasWarning} shape={props.shape} onClick={() => inputRef.current?.focus()}>
+        <div className="flex flex-wrap items-center gap-1.5 px-3 py-1.5 min-h-[38px] w-full">
+          {/* Display existing tags */}
+          {tags.map((tag, index) => (
+            <Tag key={index} onRemove={!props.isDisabled ? () => removeTag(index) : undefined} isDisabled={props.isDisabled}>
+              {tag}
+            </Tag>
+          ))}
+
+          {/* Text input for adding tags */}
+          <input
+            id={inputId}
+            ref={inputRef}
+            className={tw(
+              'flex-1 min-w-[120px] bg-transparent p-0 border-0 focus:ring-0 focus:outline-none text-sm text-neutral-900 placeholder:text-neutral-400',
+              props.isDisabled && 'cursor-not-allowed'
+            )}
+            value={query}
+            onChange={handleInputChange}
+            onKeyDown={handleKeyDown}
+            onBlur={() => {
+              if (query) addTag(query)
+              commitValidation()
+            }}
+            placeholder={
+              tags.length === 0 ? (props.placeholder ?? defaultPlaceholder) : atMax ? `Maximum ${props.maxTags} tags` : ''
+            }
+            disabled={isDisabled}
+            aria-invalid={isInvalid || undefined}
+            aria-describedby={helpTextId}
+            autoComplete="off"
+            inputMode="numeric"
+          />
+        </div>
+      </FormFieldComponents.FieldGroup>
+
+      {/* Tag count */}
+      {!props.hideTagCount && props.maxTags !== undefined && (
+        <div className="mt-1 text-xs text-neutral-500">
+          {tags.length} / {props.maxTags} tags
+        </div>
+      )}
+
+      <FormFieldComponents.FormFieldHelpText
+        id={helpTextId}
+        isInvalid={isInvalid}
+        validationMessage={validationMessage}
+        hasWarning={hasWarning}
+        warningMessage={props.warningMessage}
+        helpText={props.helpText}
+      />
+    </div>
+  )
+}
+
+function Tag({
+  children,
+  onRemove,
+  isDisabled
+}: {
+  children: React.ReactNode
+  onRemove?: () => void
+  isDisabled?: boolean
+}) {
+  return (
+    <span
+      className={tw(
+        'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-normal bg-primary-500/10 text-primary-500',
+        isDisabled && 'opacity-50'
+      )}
+    >
+      <span className="truncate">{children}</span>
+      {onRemove && (
+        <button
+          type="button"
+          onClick={(e) => {
+            e.stopPropagation()
+            onRemove()
+          }}
+          className="inline-flex items-center justify-center h-4 w-4 -m-0.5 p-0.5 rounded-full translate-x-1 hover:bg-black/10"
+          aria-label="Remove"
+          tabIndex={-1}
+        >
+          <Icon name="x-mark" className="h-2 w-2" aria-hidden="true" />
+        </button>
+      )}
+    </span>
+  )
+}

package/src/components/pdf-input.tsx

@@ -0,0 +1,249 @@
+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'
+import { Pdf } from './pdf'
+
+export type PdfInputProps = {
+  // Form identification
+  name?: string
+  form?: string
+
+  // Display elements
+  label?: React.ReactNode
+  cornerHint?: React.ReactNode
+  helpText?: React.ReactNode
+  warningMessage?: React.ReactNode
+  emptyState?: React.ReactNode
+  renderPreview?: (props: PdfInputPreviewProps) => React.ReactNode
+
+  // Validation and state
+  isRequired?: boolean
+  isDisabled?: boolean
+  isInvalid?: boolean
+  validate?: ValidationFunction<string | File | null>
+  errorMessage?: React.ReactNode | ((v: ValidationResult) => React.ReactNode)
+
+  // Value management (File object or string URL, held in memory until form submit)
+  value?: string | File | null
+  defaultValue?: string | File | null
+  onChange?: (value: string | File | null) => void
+
+  maxSize?: number // in bytes
+}
+
+export interface PdfInputPreviewProps {
+  fileUrl: string
+  isDisabled: boolean
+  onChange(value: string | null | File): unknown
+  inputId: string
+  name: string | undefined
+  inputRef: React.Ref<HTMLInputElement>
+}
+
+export function PdfInput(props: PdfInputProps) {
+  const inputRef = React.useRef<HTMLInputElement>(null)
+  const helpTextId = React.useId()
+  const inputId = React.useId()
+
+  const exceededMaxSizeFn = React.useCallback(
+    (value: string | File | null) => {
+      if (value && props.maxSize && value instanceof File) {
+        return checkFileMaxSize(value, props.maxSize)
+      }
+      return null
+    },
+    [props.maxSize]
+  )
+
+  const formatNotSupportedFn = React.useCallback((value: string | File | null) => {
+    if (value instanceof File) {
+      return checkFileType(value, 'application/pdf')
+    }
+    return null
+  }, [])
+
+  // Controlled state management
+  const [value, setValue] = HeadlessForm.useControlledState(props.value, props.defaultValue ?? null, (value) => {
+    if (props.onChange) {
+      props.onChange(value)
+    }
+  })
+
+  const exceededMaxSize = React.useMemo(() => exceededMaxSizeFn(value), [value, exceededMaxSizeFn])
+  const formatNotSupported = React.useMemo(() => formatNotSupportedFn(value), [value, formatNotSupportedFn])
+
+  // Form validation
+  const {
+    validationMessage,
+    isInvalid: validationInvalid,
+    commitValidation
+  } = HeadlessForm.useValidation(
+    {
+      validate: props.validate,
+      value,
+      name: props.name,
+      isRequired: props.isRequired,
+      form: props.form,
+      focus() {
+        inputRef.current?.focus()
+      }
+    },
+    inputRef
+  )
+
+  const isInvalid = props.isInvalid || validationInvalid || Boolean(exceededMaxSize || formatNotSupported)
+  const hasWarning = Boolean(props.warningMessage) && !isInvalid
+  const errorMessage = exceededMaxSize || formatNotSupported || validationMessage
+
+  const PdfPreview = props.renderPreview ?? DefaultPdfInputPreview
+
+  const emptyState = props.emptyState ?? (
+    <div className="px-6 py-12">
+      <Icon name="document" className="h-12 w-12 mx-auto mb-3 text-neutral-400" />
+      <p className="text-sm text-neutral-600 font-medium">Click to upload or drag and drop</p>
+      <p className="text-xs text-neutral-500 mt-1">PDF</p>
+      {props.maxSize ? <p className="text-xs text-neutral-500 mt-1">Max size: {formatFileSize(props.maxSize)}</p> : null}
+    </div>
+  )
+
+  return (
+    <HeadlessFileInput
+      value={value}
+      onChange={(v) => {
+        setValue(v)
+        commitValidation()
+      }}
+    >
+      <div className="relative">
+        <FormFieldComponents.LabelRow label={props.label} cornerHint={props.cornerHint} htmlFor={inputId} />
+
+        <HeadlessFileInput.Preview>
+          {(files) => {
+            const hasFile = files.length > 0
+            return (
+              <div
+                className={tw(
+                  'pdf-input-border relative block w-full rounded-md overflow-hidden text-center focus:outline-none focus-within:ring-2 focus-within:ring-primary-500 focus-within:ring-offset-2',
+                  'border-2 border-neutral-200 hover:border-neutral-300 min-h-56',
+                  !hasFile && 'border-dashed',
+                  props.isDisabled && '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'
+                )}
+              >
+                {hasFile ? (
+                  PdfPreview({
+                    isDisabled: !!props.isDisabled,
+                    fileUrl: files[0]!.fileUrl,
+                    onChange: (v) => {
+                      setValue(v)
+                      commitValidation()
+                    },
+                    inputId,
+                    inputRef,
+                    name: props.name
+                  })
+                ) : (
+                  <HeadlessFileInput.DropZone
+                    inputRef={inputRef}
+                    accept="application/pdf"
+                    name={props.name}
+                    inputId={inputId}
+                    disabled={props.isDisabled}
+                    className="size-full"
+                  >
+                    {({ dragOver }) => (
+                      <div className="relative pointer-events-none">
+                        {emptyState}
+                        {dragOver ? (
+                          <div className="absolute inset-0">
+                            <DragOverContent />
+                          </div>
+                        ) : null}
+                      </div>
+                    )}
+                  </HeadlessFileInput.DropZone>
+                )}
+              </div>
+            )
+          }}
+        </HeadlessFileInput.Preview>
+
+        <FormFieldComponents.FormFieldHelpText
+          id={helpTextId}
+          isInvalid={isInvalid}
+          validationMessage={errorMessage}
+          hasWarning={hasWarning}
+          warningMessage={props.warningMessage}
+          helpText={props.helpText}
+        />
+      </div>
+    </HeadlessFileInput>
+  )
+}
+
+function DragOverContent() {
+  return (
+    <div
+      className="absolute inset-0 p-12 rounded flex items-center justify-center"
+      style={{
+        background: `repeating-linear-gradient(45deg, #e5e7eb, #e5e7eb 20px, #d1d5db 20px, #d1d5db 50px)`
+      }}
+    >
+      <div>
+        <Icon name="cloud-arrow-up" className="h-12 w-12 mx-auto text-gray-400" />
+        <span className="mt-2 block text-sm font-semibold text-gray-900">Upload a PDF</span>
+      </div>
+    </div>
+  )
+}
+
+export function DefaultPdfInputPreview({ name, fileUrl, inputRef, isDisabled, onChange, inputId }: PdfInputPreviewProps) {
+  return (
+    <>
+      <HeadlessFileInput.DropZone
+        inputRef={inputRef}
+        accept="application/pdf"
+        name={name}
+        inputId={inputId}
+        disabled={isDisabled}
+      >
+        {({ dragOver }) => (
+          <div className="min-h-56 pointer-events-none">
+            {dragOver ? (
+              <div className="absolute inset-0">
+                <DragOverContent />
+              </div>
+            ) : null}
+            <div className="relative">
+              <div
+                aria-hidden="true"
+                className="absolute inset-x-0 top-0 rounded-t-md h-20 bg-gradient-to-b from-white opacity-75 mix-blend-lighten"
+              />
+              <Pdf src={fileUrl} className="w-full min-h-96 rounded-md border-0" />
+            </div>
+          </div>
+        )}
+      </HeadlessFileInput.DropZone>
+      <div className="absolute top-2 right-2">
+        {!isDisabled ? (
+          <button
+            type="button"
+            aria-label="Remove"
+            onClick={() => onChange(null)}
+            className="p-1 h-5 w-5 flex items-center justify-center bg-gray-800/60 hover:bg-gray-500/60 rounded-full transition-colors"
+          >
+            <Icon name="x-mark" className="h-4 w-4 text-gray-200" />
+          </button>
+        ) : null}
+      </div>
+    </>
+  )
+}

package/src/components/pdf.tsx

@@ -0,0 +1,86 @@
+import React from 'react'
+import { usePdf } from 'react-pdf-hook'
+import { tw } from '../utils/tw'
+import { usePagination } from '../utils/use-pagination'
+import { Icon } from './icon'
+import pdfjs from './helpers/pdf-dist.client'
+
+export interface PdfProps extends React.ComponentProps<'div'> {
+  src: string
+  onDownload?: () => void
+}
+
+export function Pdf({ src, onDownload, className, ...props }: PdfProps) {
+  const containerRef = React.useRef<HTMLDivElement>(null)
+  const [pageNumber, setPageNumber] = React.useState(0)
+
+  const { pdf, canvasRef } = usePdf(pdfjs, src, pageNumber + 1, { width: containerRef.current?.clientWidth })
+
+  const numPages = pdf?.numPages
+
+  return (
+    <div ref={containerRef} className={tw('relative overflow-hidden border border-neutral-300', className)} {...props}>
+      <canvas
+        ref={canvasRef}
+        style={{ display: !pdf ? 'none' : undefined, maxWidth: '100%' }}
+        className={tw('pdf-page', onDownload && 'cursor-pointer')}
+        onClick={onDownload}
+      />
+      {!pdf || !containerRef.current?.clientWidth ? <div className="w-full h-full m-auto rounded" /> : null}
+      {numPages && numPages > 1 ? (
+        <div className="flex absolute bottom-5 w-full justify-center">
+          <Pagination page={pageNumber} setPageNumber={setPageNumber} count={numPages} />
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+Pdf.displayName = 'Pdf'
+
+function Pagination({ page, count, setPageNumber }: { page: number; count: number; setPageNumber: (n: number) => void }) {
+  const pages = usePagination({ currentPage: page, pageCount: count })
+
+  return (
+    <div className="inline-flex items-center gap-1 pointer-events-auto">
+      <button
+        type="button"
+        onClick={() => setPageNumber(page > 0 ? page - 1 : 0)}
+        disabled={page === 0}
+        className="p-1 rounded bg-white border border-neutral-300 hover:bg-neutral-50 disabled:opacity-50 disabled:cursor-not-allowed"
+        aria-label="Previous page"
+      >
+        <Icon name="chevron-left" className="h-4 w-4" aria-hidden="true" />
+      </button>
+
+      {pages.map((p, i) => (
+        <button
+          type="button"
+          key={p.readonly ? `ellipsis-${i}` : p.label}
+          onClick={() => setPageNumber(p.readonly ? page : (p.value as number))}
+          disabled={p.readonly}
+          className={tw(
+            'min-w-[28px] bg-white h-7 px-2 text-xs font-medium rounded border transition-colors',
+            p.selected
+              ? 'bg-primary-500 text-white border-primary-500'
+              : p.readonly
+                ? 'border-transparent cursor-default'
+                : 'border-neutral-300 hover:bg-neutral-50'
+          )}
+        >
+          {p.label}
+        </button>
+      ))}
+
+      <button
+        type="button"
+        onClick={() => setPageNumber(page < count - 1 ? page + 1 : page)}
+        disabled={page === count - 1}
+        className="p-1 rounded bg-white border border-neutral-300 hover:bg-neutral-50 disabled:opacity-50 disabled:cursor-not-allowed"
+        aria-label="Next page"
+      >
+        <Icon name="chevron-right" className="h-4 w-4" aria-hidden="true" />
+      </button>
+    </div>
+  )
+}