@maestro-js/components 1.0.0-alpha.0

package/src/components/drawer.tsx

@@ -0,0 +1,78 @@
+import React from 'react'
+import { Drawer as VaulDrawer } from 'vaul'
+import { tw } from '../utils/tw'
+
+export type DrawerProps = {
+  children?: React.ReactNode
+  title?: React.ReactNode
+  isOpen?: boolean
+  onOpenChange?: (isOpen: boolean) => void
+  size?: 'sm' | 'md' | 'lg'
+  className?: string
+  isDismissable?: boolean
+  position?: 'left' | 'right' | 'top' | 'bottom'
+  actions?: React.ReactNode
+  contentsContainerClassName?: string
+}
+
+export function Drawer({
+  children,
+  title,
+  isOpen = false,
+  onOpenChange,
+  size = 'md',
+  className,
+  isDismissable = true,
+  position = 'right',
+  actions,
+  contentsContainerClassName
+}: DrawerProps) {
+  return (
+    <VaulDrawer.Root open={isOpen} onOpenChange={onOpenChange} direction={position} dismissible={isDismissable}>
+      <VaulDrawer.Portal>
+        <VaulDrawer.Overlay className="fixed inset-0 z-49 bg-black/70 backdrop-blur-lg" />
+        <VaulDrawer.Content
+          className={tw(
+            'flex h-auto flex-col text-sm group/drawer-content fixed z-50',
+            'data-[vaul-drawer-direction=bottom]:bottom-2 data-[vaul-drawer-direction=bottom]:left-2 data-[vaul-drawer-direction=bottom]:right-2 data-[vaul-drawer-direction=bottom]:max-h-[80vh]',
+            'data-[vaul-drawer-direction=left]:left-2 data-[vaul-drawer-direction=left]:top-2 data-[vaul-drawer-direction=left]:bottom-2 data-[vaul-drawer-direction=left]:h-[calc(100%-1rem)] data-[vaul-drawer-direction=left]:w-3/4',
+            'data-[vaul-drawer-direction=right]:right-2 data-[vaul-drawer-direction=right]:top-2 data-[vaul-drawer-direction=right]:bottom-2 data-[vaul-drawer-direction=right]:h-[calc(100%-1rem)] data-[vaul-drawer-direction=right]:w-3/4',
+            'data-[vaul-drawer-direction=top]:top-2 data-[vaul-drawer-direction=top]:left-2 data-[vaul-drawer-direction=top]:right-2 data-[vaul-drawer-direction=top]:max-h-[80vh]',
+            size === 'sm'
+              ? 'data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm'
+              : size === 'md'
+                ? 'data-[vaul-drawer-direction=left]:sm:max-w-lg data-[vaul-drawer-direction=right]:sm:max-w-lg'
+                : 'data-[vaul-drawer-direction=left]:sm:max-w-3xl data-[vaul-drawer-direction=right]:sm:max-w-3xl',
+            className
+          )}
+          style={{ '--initial-transform': 'calc(100% + 8px)' } as React.CSSProperties}
+        >
+          {isDismissable ? (
+            <div
+              className={tw(
+                'absolute bg-neutral-200 rounded-full shrink-0 group-data-[vaul-drawer-direction=bottom]/drawer-content:block',
+                'group-data-[vaul-drawer-direction=left]/drawer-content:h-25 group-data-[vaul-drawer-direction=left]/drawer-content:w-1 group-data-[vaul-drawer-direction=left]/drawer-content:right-2 group-data-[vaul-drawer-direction=left]/drawer-content:top-[calc(50%-50px)]',
+                'group-data-[vaul-drawer-direction=right]/drawer-content:h-25 group-data-[vaul-drawer-direction=right]/drawer-content:w-1 group-data-[vaul-drawer-direction=right]/drawer-content:left-2 group-data-[vaul-drawer-direction=right]/drawer-content:top-[calc(50%-50px)]',
+                'group-data-[vaul-drawer-direction=top]/drawer-content:w-25 group-data-[vaul-drawer-direction=top]/drawer-content:h-1 group-data-[vaul-drawer-direction=top]/drawer-content:bottom-2 group-data-[vaul-drawer-direction=top]/drawer-content:left-[calc(50%-50px)]',
+                'group-data-[vaul-drawer-direction=bottom]/drawer-content:w-25 group-data-[vaul-drawer-direction=bottom]/drawer-content:h-1 group-data-[vaul-drawer-direction=bottom]/drawer-content:top-2 group-data-[vaul-drawer-direction=bottom]/drawer-content:left-[calc(50%-50px)]'
+              )}
+            />
+          ) : null}
+
+          <div className="bg-white size-full pt-6 px-6 pb-6 rounded-md shadow-xl">
+            <div className="flex items-start justify-between gap-4 pb-5">
+              {title ? (
+                <VaulDrawer.Title className="flex-1 text-xl font-semibold text-neutral-900">{title}</VaulDrawer.Title>
+              ) : (
+                <div />
+              )}
+              <div className="flex gap-2 items-start">{actions}</div>
+            </div>
+
+            <div className={tw(contentsContainerClassName)}>{children}</div>
+          </div>
+        </VaulDrawer.Content>
+      </VaulDrawer.Portal>
+    </VaulDrawer.Root>
+  )
+}

package/src/components/enum-chip.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react'
+import { Chip, type ChipProps } from './chip'
+import { getColor, stringToNumber } from '../utils/enum-colors'
+
+export type EnumChipProps = {
+  options: string[] | Readonly<string[]>
+  value: string
+  enumLabels?: { [key: string]: string }
+} & Omit<ChipProps, 'children'>
+
+export function EnumChip({ options, enumLabels, value, style, ...props }: EnumChipProps) {
+  const colorIndex = Object.values(options).indexOf(value)
+  const colorSeed = colorIndex >= 0 ? colorIndex : stringToNumber(value)
+  const color = getColor(colorSeed)
+
+  const label = value ? (enumLabels ? enumLabels[value] : value) : ''
+
+  return (
+    <Chip
+      {...props}
+      style={{
+        backgroundColor: `${color}19`,
+        color: color,
+        ...style
+      }}
+    >
+      {label}
+    </Chip>
+  )
+}

package/src/components/file-input.tsx

@@ -0,0 +1,245 @@
+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, validateFileMaxSize, validateFileType } from '../utils/file-input'
+import { FormFieldComponents } from './helpers/form-field'
+import { HeadlessFileInput } from './headless-file-input'
+import { Icon } from './icon'
+
+export type FileInputProps = {
+  // Form identification
+  name?: string
+  form?: string
+
+  // Display elements
+  label?: React.ReactNode
+  cornerHint?: React.ReactNode
+  helpText?: React.ReactNode
+  warningMessage?: React.ReactNode
+  renderPreview?: (props: FileInputPreviewProps) => 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, hasError: boolean) => void
+
+  // File specific
+  accept?: string
+  maxSize?: number // in bytes
+}
+
+export interface FileInputPreviewProps {
+  file: File | null
+  fileUrl: string | null
+  isDisabled: boolean
+  onChange(value: string | null | File): unknown
+  inputId: string
+  name: string | undefined
+  accept: string | undefined
+  inputRef: React.Ref<HTMLInputElement>
+  formatFileSize: (bytes: number) => string
+  setDragging: (dragging: boolean) => void
+  maxSize?: number
+}
+
+export function FileInput(props: FileInputProps) {
+  const inputRef = React.useRef<HTMLInputElement>(null)
+  const helpTextId = React.useId()
+  const inputId = React.useId()
+  const [, setDragging] = React.useState(false)
+
+  // Controlled state management
+  const [value, setValue] = HeadlessForm.useControlledState(props.value, props.defaultValue ?? null, (value) => {
+    if (props.onChange) {
+      props.onChange(value, Boolean(validateFileMaxSize(value, props.maxSize) || validateFileType(value, props.accept)))
+    }
+  })
+
+  const exceededMaxSize = React.useMemo(() => validateFileMaxSize(value, props.maxSize), [value, props.maxSize])
+  const formatNotSupported = React.useMemo(() => validateFileType(value, props.accept), [value, props.accept])
+
+  // 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 FilePreview = props.renderPreview ?? DefaultFileInputFilePreview
+
+  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 file = files.length !== 0 ? files[0]!.file : null
+            const fileUrl = files.length !== 0 ? files[0]!.fileUrl : null
+
+            return (
+              <div
+                className={tw(
+                  'relative',
+                  hasWarning &&
+                    '[&_.file-preview-border]:border-notice-300 [&_.file-preview-border]:hover:border-notice-400 [&_.file-preview-border]:text-notice-900 [&_.file-preview-border]:placeholder-notice-300 [&_.file-preview-border]:focus-within:border-notice-500 [&_.file-preview-border]:focus-within:ring-notice-500',
+                  isInvalid &&
+                    '[&_.file-preview-border]:border-negative-300 [&_.file-preview-border]:hover:border-negative-400 [&_.file-preview-border]:text-negative-900 [&_.file-preview-border]:placeholder-negative-300 [&_.file-preview-border]:focus-within:border-negative-500 [&_.file-preview-border]:focus-within:ring-negative-500'
+                )}
+              >
+                {FilePreview({
+                  file,
+                  fileUrl,
+                  isDisabled: !!props.isDisabled,
+                  onChange: (v) => {
+                    setValue(v)
+                    commitValidation()
+                  },
+                  inputId,
+                  inputRef,
+                  name: props.name,
+                  accept: props.accept,
+                  formatFileSize,
+                  setDragging,
+                  maxSize: props.maxSize
+                })}
+              </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 File</span>
+      </div>
+    </div>
+  )
+}
+
+export function DefaultFileInputFilePreview({
+  file,
+  isDisabled,
+  onChange,
+  inputId,
+  name,
+  accept,
+  formatFileSize,
+  setDragging,
+  maxSize
+}: FileInputPreviewProps) {
+  return (
+    <>
+      <HeadlessFileInput.DropZone
+        accept={accept}
+        name={name}
+        inputId={inputId}
+        onDragChange={setDragging}
+        disabled={isDisabled}
+      >
+        {({ dragOver }) => (
+          <div
+            className={tw(
+              'file-preview-border 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-neutral-200 hover:border-neutral-300',
+              file ? '' : 'border-dashed',
+              isDisabled && 'border-neutral-100 cursor-not-allowed'
+            )}
+          >
+            {file ? (
+              <div className="relative text-left">
+                <div className="flex items-center justify-between p-3 rounded">
+                  <div className="flex items-center gap-3">
+                    <Icon name="document" className="h-8 w-8 text-neutral-400" />
+                    <div>
+                      <p className="text-sm font-medium text-neutral-900">{file.name || 'File'}</p>
+                      <p className="text-xs text-neutral-500">{formatFileSize(file.size)}</p>
+                    </div>
+                  </div>
+                </div>
+                {dragOver && <DragOverContent />}
+              </div>
+            ) : dragOver ? (
+              <DragOverContent />
+            ) : (
+              <div className="flex items-center justify-between p-3">
+                <div className="flex items-center gap-3">
+                  <Icon name="cloud-arrow-up" className="h-8 w-8 text-neutral-400" />
+                  <div className="text-left">
+                    <p className="text-sm text-neutral-600 font-medium">Click to upload or drag and drop</p>
+                    <div className="text-xs text-neutral-500 mt-0.5">
+                      {accept && <span>{accept}</span>}
+                      {accept && maxSize && <span> • </span>}
+                      {maxSize && <span>Max: {formatFileSize(maxSize)}</span>}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </HeadlessFileInput.DropZone>
+
+      {file && !isDisabled && (
+        <button
+          type="button"
+          aria-label="Remove file"
+          onClick={() => onChange(null)}
+          className="absolute top-1/2 -translate-y-1/2 right-3 p-1 hover:bg-neutral-50 rounded transition-colors"
+        >
+          <Icon name="x-mark" className="h-5 w-5 text-neutral-500" />
+        </button>
+      )}
+    </>
+  )
+}

package/src/components/form.tsx

@@ -0,0 +1,82 @@
+import {
+  type FormProps as ReactRouterFormProps,
+  Form as ReactRouterForm,
+  data,
+  type ClientActionFunctionArgs
+} from 'react-router'
+import { HeadlessForm } from '@maestro-js/form'
+import { serverOnly$ } from 'vite-env-only/macros'
+
+function _Form({ children, ...props }: ReactRouterFormProps) {
+  return (
+    <HeadlessForm as={ReactRouterForm} {...props}>
+      {children}
+    </HeadlessForm>
+  )
+}
+
+export const Form = Object.assign(_Form, {
+  HiddenInput: HeadlessForm.HiddenInput,
+  HiddenFileInput: HeadlessForm.HiddenFileInput,
+  HiddenSelect: HeadlessForm.HiddenSelect,
+  useControlledState: HeadlessForm.useControlledState,
+  useTopLevelFormValidation: HeadlessForm.useTopLevelFormValidation,
+  useReset: HeadlessForm.useReset,
+  clientSafeParse: HeadlessForm.parseFormDataClientSide,
+  serverSafeParse: HeadlessForm.parseFormData,
+  validationError: serverOnly$(validationError) as typeof validationError,
+  customValidationError: serverOnly$(customValidationError) as typeof customValidationError,
+  composeValidators: HeadlessForm.composeValidators,
+  FormError
+})
+
+async function validationError(
+  {
+    issues,
+    formData,
+    formId
+  }: {
+    issues: { path?: ((string | number | symbol) | { key: string | number | symbol })[] | undefined; message: string }[]
+    formData: FormData
+    formId?: string | null
+  },
+  init: RequestInit = {}
+) {
+  console.error(issues)
+  return data(
+    {
+      success: false as const,
+      formSubmissionError: {
+        issues: issues.map((i) => ({
+          path: i.path?.map((p) => (p && typeof p === 'object' && 'key' in p ? p.key : p))?.join('.') ?? '',
+          message: i.message
+        })),
+        formId: formId ?? formData.get('__formId')
+      }
+    },
+    { status: 422, ...init }
+  )
+}
+
+async function customValidationError(
+  { message, formData }: { message: string; formData: FormData },
+  init?: number | ResponseInit
+) {
+  console.error(message)
+  return data(
+    {
+      success: false as const,
+      formSubmissionError: {
+        issues: [{ path: '', message: message }],
+        formId: formData.get('__formId')
+      }
+    },
+    { status: typeof init === 'number' ? init : 422, ...(typeof init === 'object' ? init : {}) }
+  )
+}
+
+function FormError({ formId, children }: { formId?: string; children(message: string): React.ReactNode }) {
+  const serverErrors = HeadlessForm.useServerErrors(formId)
+  const formErrors = serverErrors.filter((s) => !s.path)
+  return formErrors.length ? <>{children(formErrors[0]!.message)}</> : null
+}