@maestro-js/components 1.0.0-alpha.0

package/src/components/image-input.tsx

@@ -0,0 +1,265 @@
+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 type ImageInputProps = {
+  // 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: ImageInputPreviewProps) => 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
+
+  // Image specific
+  accept?: string
+  maxSize?: number // in bytes
+}
+
+export interface ImageInputPreviewProps {
+  fileUrl: string
+  isDisabled: boolean
+  onChange(value: string | null | File): unknown
+  inputId: string
+  name: string | undefined
+  accept: string | undefined
+  inputRef: React.Ref<HTMLInputElement>
+}
+
+export function ImageInput(props: ImageInputProps) {
+  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, props.accept ?? 'image/*')
+      }
+      return null
+    },
+    [props.accept]
+  )
+
+  // 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 ImagePreview = props.renderPreview ?? DefaultImageInputPreview
+
+  const accept = props.accept ?? 'image/*'
+
+  const emptyState = props.emptyState ?? (
+    <div className="px-6 py-12">
+      <Icon name="photo" 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">{accept}</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(
+                  'image-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 ? (
+                  ImagePreview({
+                    isDisabled: !!props.isDisabled,
+                    fileUrl: files[0]!.fileUrl,
+                    onChange: (v) => {
+                      setValue(v)
+                      commitValidation()
+                    },
+                    inputId,
+                    inputRef,
+                    name: props.name,
+                    accept
+                  })
+                ) : (
+                  <HeadlessFileInput.DropZone
+                    inputRef={inputRef}
+                    accept={accept}
+                    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 an Image</span>
+      </div>
+    </div>
+  )
+}
+
+export function DefaultImageInputPreview({
+  name,
+  accept,
+  fileUrl,
+  inputRef,
+  isDisabled,
+  onChange,
+  inputId
+}: ImageInputPreviewProps) {
+  return (
+    <>
+      <HeadlessFileInput.DropZone
+        inputRef={inputRef}
+        accept={accept ?? 'image/*'}
+        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"
+              />
+              <img src={fileUrl} alt="Preview" className="w-full object-cover rounded-md" />
+            </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/img.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react'
+import { tw } from '../utils/tw'
+
+export type ImageFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down'
+export type ImageShape = 'rounded' | 'rectangle' | 'circle'
+
+export type ImgProps = {
+  src: string
+  alt?: string
+  className?: string
+  fit?: ImageFit
+  shape?: ImageShape
+  style?: React.CSSProperties
+  onError?: React.ReactEventHandler<HTMLImageElement>
+}
+
+const fitClasses: Record<ImageFit, string> = {
+  cover: 'object-cover object-center',
+  contain: 'object-contain',
+  fill: 'object-fill',
+  none: 'object-none',
+  'scale-down': 'object-scale-down'
+}
+
+const shapeClasses: Record<ImageShape, string> = {
+  rounded: 'rounded',
+  rectangle: 'rounded-none',
+  circle: 'rounded-full'
+}
+
+export const Img = React.forwardRef<HTMLImageElement, ImgProps>(
+  ({ src, alt, className, fit = 'cover', shape = 'rounded', style, onError }, ref) => {
+    return (
+      <img
+        ref={ref}
+        src={src}
+        alt={alt}
+        className={tw('w-full h-full', fitClasses[fit], shapeClasses[shape], className)}
+        style={style}
+        onError={onError}
+      />
+    )
+  }
+)
+
+Img.displayName = 'Img'

package/src/components/inline-alert.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react'
+import { tw } from '../utils/tw'
+import { Icon } from './icon'
+
+export type InlineAlertProps = {
+  children?: React.ReactNode
+  variant: 'info' | 'positive' | 'notice' | 'negative' | 'neutral'
+  icon?: React.ReactNode
+  className?: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  actions?: React.ReactNode
+}
+
+const variantClasses = {
+  info: 'bg-info-500/10 text-info-500 border-info-500/20',
+  positive: 'bg-positive-50 text-positive-800 border-positive-200',
+  notice: 'bg-notice-50 text-notice-800 border-notice-200',
+  negative: 'bg-negative-50 text-negative-800 border-negative-200',
+  neutral: 'bg-neutral-100 text-neutral-700 border-neutral-200'
+}
+
+const defaultIconNames = {
+  info: 'information-circle',
+  positive: 'check',
+  notice: 'exclamation-triangle',
+  negative: 'x-mark',
+  neutral: 'information-circle'
+} as const
+
+export function InlineAlert({ children, actions, variant, icon, className, title, description }: InlineAlertProps) {
+  const displayIcon = icon !== undefined ? icon : <Icon name={defaultIconNames[variant]} className="h-5 w-5" />
+
+  return (
+    <div
+      className={tw(
+        'rounded-md border px-4 py-3 flex gap-3 items-start justify-between text-left',
+        variantClasses[variant],
+        className
+      )}
+      role="alert"
+    >
+      <div className="flex gap-3 items-start">
+        {displayIcon && <div className="flex-shrink-0">{displayIcon}</div>}
+        <div className="flex-1 gap-1">
+          {title && <div className={tw('font-semibold text-sm')}>{title}</div>}
+          {description && <div className="text-sm">{description}</div>}
+          {children && <div className="text-sm">{children}</div>}
+        </div>
+      </div>
+      {actions}
+    </div>
+  )
+}