@maestro-js/components 1.0.0-alpha.0

package/scripts/build.ts

@@ -0,0 +1,44 @@
+import { readFile, writeFile } from 'fs/promises'
+import { basename, dirname, resolve } from 'path'
+import { fileURLToPath } from 'url'
+
+interface RegistryFile {
+  path: string
+  type: string
+}
+
+interface RegistryEntry {
+  name: string
+  files: RegistryFile[]
+}
+
+interface OutputFile {
+  name: string
+  content: string
+}
+
+interface OutputEntry {
+  name: string
+  files: OutputFile[]
+}
+
+const packageRoot = resolve(dirname(fileURLToPath(import.meta.url)), '..')
+
+const registry: RegistryEntry[] = JSON.parse(await readFile(resolve(packageRoot, 'registry.json'), 'utf-8'))
+
+const output: OutputEntry[] = await Promise.all(
+  registry.map(async (entry) => {
+    const files = await Promise.all(
+      entry.files.map(async (file) => ({
+        name: `${file.type}/${basename(file.path)}`,
+        content: await readFile(resolve(packageRoot, file.path), 'utf-8')
+      }))
+    )
+
+    return {
+      name: entry.name,
+      files
+    }
+  })
+)
+writeFile('./dist/components.json', JSON.stringify(output))

package/src/components/alert-dialog.tsx

@@ -0,0 +1,150 @@
+import * as React from 'react'
+import { Dialog, Modal, ModalOverlay, Heading } from 'react-aria-components'
+import { tw } from '../utils/tw'
+import { Icon } from './icon'
+import { Button } from './button'
+import { ButtonGroupContext } from './button-group'
+import { ButtonContext } from './helpers/button-context'
+
+export type AlertDialogProps = {
+  title: string
+  description?: string
+  variant?: 'info' | 'positive' | 'neutral' | 'negative' | 'notice'
+  icon?: React.ReactNode
+  children?: React.ReactNode | ((props: { close(): void }) => React.ReactNode)
+  isOpen?: boolean
+  onOpenChange?: (isOpen: boolean) => void
+  isDismissable?: boolean
+  className?: string
+}
+
+const variantStyles = {
+  info: {
+    container: 'border-info-500/20',
+    icon: 'text-info-500',
+    iconBg: 'bg-info-500/10',
+    header: 'text-info-500'
+  },
+  positive: {
+    container: 'border-positive-200',
+    icon: 'text-positive-600',
+    iconBg: 'bg-positive-100',
+    header: 'text-positive-800'
+  },
+  notice: {
+    container: 'border-notice-200',
+    icon: 'text-notice-600',
+    iconBg: 'bg-notice-100',
+    header: 'text-notice-800'
+  },
+  negative: {
+    container: 'border-negative-200',
+    icon: 'text-negative-600',
+    iconBg: 'bg-negative-100',
+    header: 'text-negative-800'
+  },
+  neutral: {
+    container: 'border-neutral-200',
+    icon: 'text-neutral-600',
+    iconBg: 'bg-neutral-100',
+    header: 'text-neutral-700'
+  }
+}
+
+const defaultIconNames = {
+  info: 'information-circle',
+  positive: 'check',
+  neutral: 'information-circle',
+  negative: 'x-mark',
+  notice: 'exclamation-triangle'
+} as const
+
+interface AlertDialogContextValue {
+  close(): void
+}
+
+const AlertDialogContext = React.createContext<AlertDialogContextValue>({ close: () => undefined })
+
+function AlertDialog_({
+  description,
+  title,
+  variant = 'info',
+  icon,
+  isOpen,
+  onOpenChange,
+  isDismissable = true,
+  className,
+  children
+}: AlertDialogProps) {
+  const displayIcon = icon !== undefined ? icon : <Icon name={defaultIconNames[variant]} className="h-8 w-8" />
+  const styles = variantStyles[variant]
+
+  return (
+    <ModalOverlay
+      isOpen={isOpen}
+      onOpenChange={onOpenChange}
+      isDismissable={isDismissable}
+      isKeyboardDismissDisabled={!isDismissable}
+      className={tw(
+        'fixed inset-0 z-[4000] flex items-center justify-center  bg-black/70 backdrop-blur-lg',
+        'transition-opacity duration-200 ease-out',
+        'data-[entering]:opacity-0',
+        'data-[exiting]:opacity-0'
+      )}
+    >
+      <Modal
+        className={tw(
+          'w-[calc(100%-2rem)] max-w-sm',
+          'transition-all duration-200 ease-out',
+          'data-[entering]:scale-95 data-[entering]:opacity-0 data-[entering]:translate-y-2',
+          'data-[exiting]:scale-95 data-[exiting]:opacity-0 data-[exiting]:translate-y-2'
+        )}
+      >
+        <Dialog className={tw('outline-none bg-white rounded-lg shadow-2xl w-full', className)} role="alertdialog">
+          {({ close }) => (
+            <AlertDialogContext.Provider value={{ close }}>
+              <ButtonGroupContext.Provider
+                value={{ orientation: 'horizontal', alignment: 'center', fullWidth: true, className: 'flex-nowrap' }}
+              >
+                <ButtonContext.Provider value={{ shape: 'rectangle', variant: 'soft', fullWidth: true }}>
+                  <div className={tw('border rounded-lg p-6', styles.container)}>
+                    <div className="flex flex-col items-center text-center">
+                      {displayIcon && (
+                        <div className={tw('w-12 h-12 rounded-xl flex items-center justify-center mb-4', styles.iconBg)}>
+                          <div className={tw(styles.icon)}>{displayIcon}</div>
+                        </div>
+                      )}
+                      <Heading
+                        slot="title"
+                        className={tw('text-xl font-semibold', description ? 'mb-2' : 'mb-5', styles.header)}
+                      >
+                        {title}
+                      </Heading>
+                      {description && <div className="text-sm text-neutral-600 mb-5">{description}</div>}
+                      {typeof children === 'function' ? children({ close }) : children}
+                    </div>
+                  </div>
+                </ButtonContext.Provider>
+              </ButtonGroupContext.Provider>
+            </AlertDialogContext.Provider>
+          )}
+        </Dialog>
+      </Modal>
+    </ModalOverlay>
+  )
+}
+
+AlertDialog_.displayName = 'AlertDialog'
+
+function CancelButton({ children = 'Cancel' }: { children?: React.ReactNode }) {
+  const context = React.useContext(AlertDialogContext)
+  return (
+    <Button color="neutral" onClick={context.close} variant="soft" shape="rectangle">
+      {children}
+    </Button>
+  )
+}
+
+export const AlertDialog = Object.assign(AlertDialog_, {
+  CancelButton
+})

package/src/components/autocomplete.tsx

@@ -0,0 +1,288 @@
+import * as React from 'react'
+import { ComboBox as AriaComboBox, ListBoxItem } from 'react-aria-components'
+import { AnimatedPopover } from './helpers/animated-popover'
+import type { Key } from 'react-aria-components'
+import { HeadlessForm } from '@maestro-js/form'
+import type { ValidationFunction, ValidationResult } from '@maestro-js/form'
+import { getColor, stringToNumber } from '../utils/colors'
+import { FormFieldComponents } from './helpers/form-field'
+import { matchSorter } from 'match-sorter'
+
+// ── Types ──────────────────────────────────────────────────────────────────────
+
+export type AutocompleteOption = {
+  value: string | number
+  label: string
+  secondary?: string
+}
+
+export type AutocompleteProps<T extends AutocompleteOption = AutocompleteOption> = {
+  // 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
+  isReadonly?: boolean
+  isInvalid?: boolean
+  validate?: ValidationFunction<T['value'] | null>
+  errorMessage?: React.ReactNode | ((v: ValidationResult) => React.ReactNode)
+
+  // Value management
+  value?: T['value'] | null
+  defaultValue?: T['value'] | null
+  onChange?: (value: T['value'] | null) => void
+
+  // Options
+  options: T[]
+  renderOption?: (props: { option: T; colored: boolean; index: number }) => React.ReactNode
+
+  colored?: boolean
+
+  // Filtering
+  filterFunction?: ((items: readonly T[], value: string) => T[]) | (keyof T)[]
+
+  // Loading
+  isLoading?: boolean
+
+  // Input
+  inputAutocomplete?: React.ComponentProps<'input'>['autoComplete']
+  id?: string
+  shape?: 'rectangle' | 'oval'
+}
+
+// ── Component ──────────────────────────────────────────────────────────────────
+
+export function Autocomplete<T extends AutocompleteOption = AutocompleteOption>(props: AutocompleteProps<T>) {
+  const hiddenInputRef = React.useRef<HTMLInputElement>(null)
+  const inputRef = React.useRef<HTMLInputElement>(null)
+  const helpTextId = React.useId()
+  const labelId = React.useId()
+
+  // Controlled state for the selected value
+  const [selectedValue, setSelectedValue] = HeadlessForm.useControlledState(
+    props.value,
+    props.defaultValue ?? null,
+    props.onChange
+  )
+
+  // Form validation
+  const {
+    validationMessage,
+    isInvalid: validationInvalid,
+    commitValidation
+  } = HeadlessForm.useValidation(
+    {
+      validate: props.validate,
+      value: selectedValue,
+      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
+
+  // Find the selected option
+  const selectedOption = React.useMemo(() => {
+    return props.options.find((option) => option.value === selectedValue) ?? null
+  }, [props.options, selectedValue])
+
+  // Input value state (what's displayed in the input)
+  const [inputValue, setInputValue] = React.useState(() => {
+    const initial = props.value ?? props.defaultValue ?? null
+    if (initial != null) {
+      const option = props.options.find((o) => o.value === initial)
+      return option?.label ?? ''
+    }
+    return ''
+  })
+
+  // Sync inputValue when external props.value changes
+  const lastPropsValue = React.useRef(props.value)
+  React.useEffect(() => {
+    if (props.value !== lastPropsValue.current) {
+      lastPropsValue.current = props.value
+      if (props.value != null) {
+        const option = props.options.find((o) => o.value === props.value)
+        setInputValue(option?.label ?? '')
+      } else {
+        setInputValue('')
+      }
+    }
+  }, [props.value, props.options])
+
+  // Filter options based on input value
+  const filteredOptions = React.useMemo(() => {
+    if (props.isLoading) return []
+
+    // When input matches the selected option's label, show all options (not filtered)
+    const isShowingSelectedLabel = selectedOption && inputValue === selectedOption.label
+    const searchTerm = isShowingSelectedLabel ? '' : inputValue
+
+    const filterFn = props.filterFunction
+    let filtered: T[]
+
+    if (typeof filterFn === 'function') {
+      filtered = filterFn(props.options, searchTerm).slice(0, 50)
+    } else if (Array.isArray(filterFn)) {
+      filtered = matchSorter(props.options, searchTerm, {
+        keys: filterFn as string[]
+      }).slice(0, 50)
+    } else {
+      filtered = defaultFilterFunction(props.options, searchTerm).slice(0, 50)
+    }
+
+    // Ensure selected option is always included
+    if (selectedOption && !filtered.some((o) => o.value === selectedOption.value)) {
+      filtered = [selectedOption, ...filtered]
+    }
+
+    return filtered
+  }, [props.options, inputValue, props.filterFunction, props.isLoading, selectedOption])
+
+  // Items for React Aria (with id for key management)
+  const items = React.useMemo(
+    () => filteredOptions.map((option, index) => ({ ...option, index, id: String(option.value) })),
+    [filteredOptions]
+  )
+
+  // Selected key for React Aria
+  const selectedKey = selectedValue != null ? String(selectedValue) : null
+
+  const handleSelectionChange = (key: Key | null) => {
+    if (key === null) {
+      setSelectedValue(null)
+      setInputValue('')
+    } else {
+      const option = props.options.find((o) => String(o.value) === String(key))
+      setSelectedValue(option?.value ?? null)
+      setInputValue(option?.label ?? '')
+    }
+    commitValidation()
+  }
+
+  const handleInputChange = (value: string) => {
+    setInputValue(value)
+    // Clear selection when input doesn't match any option label
+    const matchingOption = props.options.find((o) => o.label === value)
+    if (!matchingOption) {
+      setSelectedValue(null)
+    }
+  }
+
+  return (
+    <div className="relative">
+      {/* Hidden input for form submission */}
+      <HeadlessForm.HiddenInput ref={hiddenInputRef} name={props.name} value={selectedValue ?? ''} form={props.form} />
+
+      <FormFieldComponents.LabelRow label={props.label} cornerHint={props.cornerHint} labelId={labelId} />
+
+      <AriaComboBox
+        aria-labelledby={props.label ? labelId : undefined}
+        aria-label={!props.label ? 'Autocomplete' : undefined}
+        selectedKey={selectedKey}
+        onSelectionChange={handleSelectionChange}
+        inputValue={inputValue}
+        onInputChange={handleInputChange}
+        items={items}
+        isDisabled={props.isDisabled || props.isReadonly}
+        isInvalid={isInvalid}
+        isRequired={props.isRequired}
+        allowsEmptyCollection
+        menuTrigger="focus"
+        onBlur={() => commitValidation()}
+      >
+        {/* Input and button wrapper */}
+        <FormFieldComponents.FieldGroup
+          isDisabled={props.isDisabled}
+          isReadonly={props.isReadonly}
+          isInvalid={isInvalid}
+          hasWarning={hasWarning}
+          shape={props.shape}
+          className="flex w-full items-center cursor-default"
+        >
+          {props.colored && selectedOption ? (
+            <div
+              className="absolute left-0 top-0 w-[3px] h-full"
+              style={{ backgroundColor: getColor(stringToNumber(String(selectedOption.value))) }}
+            />
+          ) : null}
+          <FormFieldComponents.FieldInput
+            ref={inputRef}
+            autoComplete={props.inputAutocomplete ?? 'off'}
+            className="pr-1"
+            placeholder={props.placeholder ?? undefined}
+            aria-describedby={helpTextId}
+            id={props.id}
+          />
+          <FormFieldComponents.ChevronButton />
+        </FormFieldComponents.FieldGroup>
+
+        {/* Dropdown */}
+        <AnimatedPopover offset={4} className="w-(--trigger-width)">
+          <FormFieldComponents.DropdownListBox
+            renderEmptyState={() => (
+              <div className="px-3 py-2 text-neutral-500 text-sm">
+                {props.isLoading ? 'Loading...' : inputValue ? 'No results found' : 'No options available'}
+              </div>
+            )}
+          >
+            {(item) => {
+              const option = item as T & { index: number; id: string }
+              if (props.renderOption) {
+                return (
+                  <ListBoxItem id={option.id} textValue={option.label} className="outline-none">
+                    {props.renderOption({ option, colored: props.colored ?? false, index: option.index })}
+                  </ListBoxItem>
+                )
+              }
+
+              const color = props.colored ? getColor(stringToNumber(String(option.value))) : null
+              return (
+                <FormFieldComponents.DropdownItem
+                  id={option.id}
+                  textValue={option.label}
+                  label={option.label}
+                  secondary={option.secondary}
+                  color={color}
+                />
+              )
+            }}
+          </FormFieldComponents.DropdownListBox>
+        </AnimatedPopover>
+      </AriaComboBox>
+
+      <FormFieldComponents.FormFieldHelpText
+        id={helpTextId}
+        isInvalid={isInvalid}
+        validationMessage={validationMessage}
+        hasWarning={hasWarning}
+        warningMessage={props.warningMessage}
+        helpText={props.helpText}
+      />
+    </div>
+  )
+}
+
+// ── Helpers ──────────────────────────────────────────────────────────────────────
+
+function defaultFilterFunction<T extends AutocompleteOption>(options: readonly T[], inputValue: string): T[] {
+  if (!inputValue) return [...options]
+  return matchSorter(options, inputValue, {
+    keys: ['label', 'secondary']
+  })
+}