@maestro-js/components 1.0.0-alpha.0

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

@@ -0,0 +1,389 @@
+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 { useStableAccessor } from '../utils/use-stable-accessor'
+import { FormFieldComponents } from './helpers/form-field'
+import { HeadlessFileInput } from './headless-file-input'
+import { Icon } from './icon'
+
+export type MultiImageInputProps = {
+  // Form identification
+  name?: string
+  form?: string
+
+  // Display elements
+  label?: React.ReactNode
+  cornerHint?: React.ReactNode
+  helpText?: React.ReactNode
+  warningMessage?: React.ReactNode
+  placeholder?: string
+
+  // Validation and state
+  isRequired?: boolean
+  isDisabled?: boolean
+  isInvalid?: boolean
+  validate?: ValidationFunction<(string | File)[]>
+  errorMessage?: React.ReactNode | ((v: ValidationResult) => React.ReactNode)
+
+  // Value management (File objects array or strings, held in memory until form submit)
+  value?: (string | File)[]
+  defaultValue?: (string | File)[]
+  onChange?: (value: (string | File)[]) => void
+
+  // Image specific
+  accept?: string
+  maxSize?: number // in bytes per image
+  maxImages?: number
+  aspectRatio?: number // width/height ratio
+  columns?: number // Grid columns for display
+  allowReordering?: boolean
+
+  renderPreview?: (props: MultiImageInputPreviewProps) => React.ReactNode
+}
+
+export interface MultiImageInputPreviewProps {
+  fileUrl: string
+  isDisabled: boolean
+  index: number
+  onChange(value: string | null | File): unknown
+}
+
+export function MultiImageInput(props: MultiImageInputProps) {
+  const inputRef = React.useRef<HTMLInputElement>(null)
+  const helpTextId = React.useId()
+  const inputId = React.useId()
+  const labelRef = React.useRef<HTMLLabelElement>(null)
+
+  const exceededMaxSizeFn = React.useCallback(
+    (value: (string | File)[]) => {
+      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 `Image ${i + 1} exceeded max size of ${formatFileSize(props.maxSize)}`
+        }
+      }
+      return null
+    },
+    [props.maxSize]
+  )
+
+  const formatNotSupportedFn = React.useCallback(
+    (value: (string | File)[]) => {
+      const accept = props.accept ?? 'image/*'
+      for (const v of value) {
+        if (v instanceof File) {
+          const error = checkFileType(v, 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)
+    }
+  })
+
+  // Form validation
+  const {
+    validationMessage,
+    isInvalid: validationInvalid,
+    commitValidation
+  } = HeadlessForm.useValidation(
+    {
+      validate(files) {
+        const exceededMaxSize = exceededMaxSizeFn(files)
+        const formatNotSupported = formatNotSupportedFn(files)
+        const exceededMaxImages = props.maxImages !== undefined && files.length > props.maxImages ? 'Too many images' : null
+        const custom = [props.validate ? props.validate(files) : []].flat()
+
+        const errors = [exceededMaxSize, formatNotSupported, exceededMaxImages, ...custom].filter(Boolean)
+        return errors as string[]
+      },
+      value,
+      name: props.name,
+      isRequired: props.isRequired,
+      form: props.form,
+      focus() {
+        labelRef.current?.focus()
+      }
+    },
+    inputRef
+  )
+
+  const isInvalid = props.isInvalid || validationInvalid
+  const hasWarning = Boolean(props.warningMessage) && !isInvalid
+  const errorMessage = validationMessage
+
+  // Stable handlers via useStableAccessor to avoid re-creating on every render
+  const getValue = useStableAccessor(value)
+  const getSetValue = useStableAccessor(setValue)
+
+  const handleReorder = React.useCallback(
+    (fromIndex: number, toIndex: number) => {
+      const newFiles = [...getValue()]
+      const [movedFile] = newFiles.splice(fromIndex, 1)
+      newFiles.splice(toIndex, 0, movedFile!)
+      getSetValue()(newFiles)
+    },
+    [getValue, getSetValue]
+  )
+
+  const handleRemove = React.useCallback(
+    (index: number) => {
+      getSetValue()(getValue().filter((_: string | File, i: number) => i !== index))
+    },
+    [getValue, getSetValue]
+  )
+
+  const handleReplace = React.useCallback(
+    (index: number, file: string | File) => {
+      getSetValue()(getValue().map((f: string | File, i: number) => (i === index ? file : f)))
+    },
+    [getValue, getSetValue]
+  )
+
+  const getCommitValidation = useStableAccessor(commitValidation)
+  const handleFileInputChange = React.useCallback(
+    (v: (string | File)[]) => {
+      getSetValue()(v)
+      getCommitValidation()()
+    },
+    [getSetValue, getCommitValidation]
+  )
+
+  // Stable component reference
+  const imagePreview = React.useMemo(() => props.renderPreview ?? DefaultImagePreview, [props.renderPreview])
+
+  // Stable keys for grid items
+  const fileKeyMapRef = React.useRef(new WeakMap<File, string>())
+  const fileKeyCounterRef = React.useRef(0)
+  const getFileKey = React.useCallback((item: string | File): string => {
+    if (typeof item === 'string') return item
+    let key = fileKeyMapRef.current.get(item)
+    if (!key) {
+      key = `file-${fileKeyCounterRef.current++}`
+      fileKeyMapRef.current.set(item, key)
+    }
+    return key
+  }, [])
+
+  // Memoize grid style
+  const gridStyle = React.useMemo(
+    () => ({ gridTemplateColumns: `repeat(${props.columns ?? 4}, minmax(0, 1fr))` }),
+    [props.columns]
+  )
+
+  return (
+    <HeadlessFileInput value={value} onChange={handleFileInputChange} multiple>
+      <div className="relative">
+        <FormFieldComponents.LabelRow label={props.label} cornerHint={props.cornerHint} htmlFor={inputId} />
+
+        <HeadlessFileInput.Preview>
+          {(files) => {
+            const canAddMore = !props.maxImages || files.length < props.maxImages
+
+            return (
+              <>
+                {/* Drop zone */}
+                {canAddMore && (
+                  <HeadlessFileInput.DropZone
+                    accept={props.accept ?? 'image/*'}
+                    name={props.name}
+                    inputId={inputId}
+                    inputRef={inputRef}
+                    ref={labelRef}
+                    disabled={props.isDisabled}
+                  >
+                    {({ dragOver }) => (
+                      <div
+                        className={tw(
+                          'relative flex flex-col items-center justify-center rounded-md border-2 border-dashed cursor-pointer transition-all duration-200 mb-2 p-8',
+                          'focus:outline-none focus-within:ring-2 focus-within:ring-primary-500 focus-within:ring-offset-2 pointer-events-none',
+                          'border-neutral-200 hover:border-neutral-300',
+                          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'
+                        )}
+                      >
+                        {dragOver ? (
+                          <div className="min-h-20">
+                            <DragOverContent />
+                          </div>
+                        ) : (
+                          <div className="text-center">
+                            <Icon name="cloud-arrow-up" className="h-10 w-10 mx-auto mb-3 text-neutral-400" />
+                            <p className="text-sm text-neutral-600 font-medium">
+                              {props.placeholder || 'Drop images here or click to browse'}
+                            </p>
+                            {props.maxSize && (
+                              <p className="text-xs text-neutral-500 mt-1">
+                                Max size: {formatFileSize(props.maxSize)} per image
+                              </p>
+                            )}
+                            {props.maxImages && (
+                              <p className="text-xs text-neutral-500 mt-1">
+                                {files.length} / {props.maxImages} images uploaded
+                              </p>
+                            )}
+                          </div>
+                        )}
+                      </div>
+                    )}
+                  </HeadlessFileInput.DropZone>
+                )}
+
+                {/* Image previews grid */}
+                {files.length > 0 && (
+                  <div className={tw('grid gap-3')} style={gridStyle}>
+                    {files.map((fileItem, index) => (
+                      <GridItem
+                        key={getFileKey(value[index]!)}
+                        fileUrl={fileItem.fileUrl}
+                        index={index}
+                        aspectRatio={props.aspectRatio ?? 1}
+                        isDisabled={props.isDisabled ?? false}
+                        allowReordering={props.allowReordering ?? false}
+                        onReorder={handleReorder}
+                        onRemove={handleRemove}
+                        onReplace={handleReplace}
+                        ImagePreview={imagePreview}
+                      />
+                    ))}
+                  </div>
+                )}
+
+                {/* Message when at max capacity */}
+                {!canAddMore && (
+                  <div className="mt-3 text-sm text-neutral-500 text-center">
+                    Maximum of {props.maxImages} images reached
+                  </div>
+                )}
+              </>
+            )
+          }}
+        </HeadlessFileInput.Preview>
+
+        <FormFieldComponents.FormFieldHelpText
+          id={helpTextId}
+          isInvalid={isInvalid}
+          validationMessage={errorMessage}
+          hasWarning={hasWarning}
+          warningMessage={props.warningMessage}
+          helpText={props.helpText}
+        />
+      </div>
+    </HeadlessFileInput>
+  )
+}
+
+// ── Memoized sub-components ─────────────────────────────────────────────────
+
+const GridItem = React.memo(function GridItem({
+  fileUrl,
+  index,
+  aspectRatio,
+  isDisabled,
+  allowReordering,
+  onReorder,
+  onRemove,
+  onReplace,
+  ImagePreview
+}: {
+  fileUrl: string
+  index: number
+  aspectRatio: number
+  isDisabled: boolean
+  allowReordering: boolean
+  onReorder: (fromIndex: number, toIndex: number) => void
+  onRemove: (index: number) => void
+  onReplace: (index: number, file: string | File) => void
+  ImagePreview: (props: MultiImageInputPreviewProps) => React.ReactNode
+}) {
+  const handleDragStart = React.useCallback(
+    (e: React.DragEvent) => e.dataTransfer.setData('index', index.toString()),
+    [index]
+  )
+
+  const handleDrop = React.useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault()
+      const fromIndex = parseInt(e.dataTransfer.getData('index'))
+      if (fromIndex !== index) onReorder(fromIndex, index)
+    },
+    [index, onReorder]
+  )
+
+  const handleChange = React.useCallback(
+    (v: string | null | File) => {
+      if (v === null) onRemove(index)
+      else onReplace(index, v)
+    },
+    [index, onRemove, onReplace]
+  )
+
+  return (
+    <div
+      className="relative group overflow-hidden rounded-md"
+      style={{ aspectRatio }}
+      draggable={!isDisabled && allowReordering}
+      onDragStart={handleDragStart}
+      onDragOver={preventDefaultHandler}
+      onDrop={handleDrop}
+    >
+      <ImagePreview isDisabled={isDisabled} fileUrl={fileUrl} index={index} onChange={handleChange} />
+    </div>
+  )
+})
+
+const DefaultImagePreview = React.memo(function DefaultImagePreview({
+  fileUrl,
+  isDisabled,
+  onChange
+}: MultiImageInputPreviewProps) {
+  return (
+    <>
+      <img src={fileUrl} alt="Preview" className="w-full h-full object-cover rounded-md" />
+      {!isDisabled && (
+        <button
+          type="button"
+          aria-label="Remove image"
+          onClick={() => onChange(null)}
+          className="absolute top-1 right-1 p-1 bg-black/50 hover:bg-red-600 rounded-full transition-all duration-200 hover:scale-110"
+        >
+          <Icon name="x-mark" className="h-4 w-4 text-white" />
+        </button>
+      )}
+    </>
+  )
+})
+
+// ── Static helpers ──────────────────────────────────────────────────────────
+
+const DRAG_OVER_STYLE = {
+  background: 'repeating-linear-gradient(45deg, #e5e7eb, #e5e7eb 20px, #d1d5db 20px, #d1d5db 50px)'
+} as const
+
+function DragOverContent() {
+  return (
+    <div className="absolute inset-0 p-6 rounded-md flex items-center justify-center text-center" style={DRAG_OVER_STYLE}>
+      <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">Drop Image</span>
+      </div>
+    </div>
+  )
+}
+
+function preventDefaultHandler(e: React.DragEvent) {
+  e.preventDefault()
+}