@maestro-js/agent-skills 1.0.0-alpha.2 → 1.0.0-alpha.21

package/skills/maestro-examples/references/cadence/cadence-web/app/components/chip.tsx

@@ -0,0 +1,161 @@
+// From @maestro-js/components
+// Install with: pnpm maestro components:add chip --directory app
+
+import * as React from 'react'
+import { tw } from '../utils/tw'
+import { Icon } from './icon'
+
+// ── Props ─────────────────────────────────────────────────────────────────────
+
+export type ChipProps = {
+  children: React.ReactNode
+  onRemove?: () => void
+  isDisabled?: boolean
+  size?: 'sm' | 'md' | 'lg'
+  color?: 'stone' | 'info' | 'green' | 'yellow' | 'orange' | 'red'
+  colorMode?: 'light' | 'dark'
+  className?: string
+  style?: React.CSSProperties
+}
+
+export type ChipButtonProps = {
+  children: React.ReactNode
+  disabled?: boolean
+  size?: 'sm' | 'md' | 'lg'
+  color?: 'stone' | 'info' | 'green' | 'yellow' | 'orange' | 'red'
+  colorMode?: 'light' | 'dark'
+  className?: string
+} & Omit<React.ComponentProps<'button'>, 'disabled' | 'size' | 'color'>
+
+// ── Chip ──────────────────────────────────────────────────────────────────────
+
+export function Chip(props: ChipProps) {
+  const {
+    children,
+    onRemove,
+    isDisabled = false,
+    size = 'md',
+    color = 'stone',
+    colorMode = 'light',
+    className,
+    style
+  } = props
+
+  const colorClasses = colorMode === 'dark' ? darkColorClasses : lightColorClasses
+
+  return (
+    <div
+      className={tw(
+        'inline-flex items-center rounded-full font-normal transition-colors max-w-full',
+        sizeClasses[size],
+        !isDisabled && !style && colorClasses[color],
+        isDisabled && 'opacity-50 cursor-not-allowed',
+        className
+      )}
+      style={style}
+    >
+      <span className="truncate">{children}</span>
+      {onRemove && (
+        <button
+          type="button"
+          onClick={onRemove}
+          disabled={isDisabled}
+          className={tw(
+            'inline-flex items-center justify-center rounded-full transition-colors translate-x-1',
+            removeBtnSizeClasses[size],
+            !isDisabled && 'hover:bg-neutral-950/10',
+            isDisabled && 'cursor-not-allowed'
+          )}
+          aria-label="Remove"
+          tabIndex={-1}
+        >
+          <Icon name="x-mark" className={removeIconSizeClasses[size]} aria-hidden="true" />
+        </button>
+      )}
+    </div>
+  )
+}
+
+// ── ChipButton ────────────────────────────────────────────────────────────────
+
+export const ChipButton = React.forwardRef<HTMLButtonElement, ChipButtonProps>((props, ref) => {
+  const { children, size = 'md', color = 'stone', colorMode = 'light', className, disabled, ...rest } = props
+
+  const colorClasses = colorMode === 'dark' ? darkHoverColorClasses : lightHoverColorClasses
+
+  return (
+    <button
+      ref={ref}
+      type="button"
+      disabled={disabled}
+      className={tw(
+        'inline-flex items-center rounded-full font-normal transition-colors',
+        sizeClasses[size],
+        !disabled && colorClasses[color],
+        disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer',
+        className
+      )}
+      {...rest}
+    >
+      {children}
+    </button>
+  )
+})
+
+ChipButton.displayName = 'ChipButton'
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+const sizeClasses = {
+  sm: 'px-2 py-0.5 text-xs',
+  md: 'px-2.5 py-1 text-sm',
+  lg: 'px-3 py-1.5 text-base'
+}
+
+const lightColorClasses = {
+  stone: 'bg-stone-100 text-stone-700',
+  info: 'bg-info-100 text-info-700',
+  green: 'bg-green-100 text-green-700',
+  yellow: 'bg-yellow-100 text-yellow-700',
+  orange: 'bg-orange-100 text-orange-700',
+  red: 'bg-red-100 text-red-700'
+}
+
+const darkColorClasses = {
+  stone: 'bg-stone-600 text-white',
+  info: 'bg-info-600 text-white',
+  green: 'bg-green-600 text-white',
+  yellow: 'bg-yellow-600 text-white',
+  orange: 'bg-orange-600 text-white',
+  red: 'bg-red-600 text-white'
+}
+
+const lightHoverColorClasses = {
+  stone: 'bg-stone-100 text-stone-700 hover:bg-stone-200',
+  info: 'bg-info-100 text-info-700 hover:bg-info-200',
+  green: 'bg-green-100 text-green-700 hover:bg-green-200',
+  yellow: 'bg-yellow-100 text-yellow-700 hover:bg-yellow-200',
+  orange: 'bg-orange-100 text-orange-700 hover:bg-orange-200',
+  red: 'bg-red-100 text-red-700 hover:bg-red-200'
+}
+
+const darkHoverColorClasses = {
+  stone: 'bg-stone-600 text-white hover:bg-stone-700',
+  info: 'bg-info-600 text-white hover:bg-info-700',
+  green: 'bg-green-600 text-white hover:bg-green-700',
+  yellow: 'bg-yellow-600 text-white hover:bg-yellow-700',
+  orange: 'bg-orange-600 text-white hover:bg-orange-700',
+  red: 'bg-red-600 text-white hover:bg-red-700'
+}
+
+const removeBtnSizeClasses = {
+  sm: 'size-4 -m-0.5 p-0.5',
+  md: 'size-5 -m-1 p-1',
+  lg: 'size-6 -m-1.5 p-1.5'
+}
+
+const removeIconSizeClasses = {
+  sm: 'size-2',
+  md: 'size-3',
+  lg: 'size-4'
+}

package/skills/maestro-examples/references/cadence/cadence-web/app/components/container.tsx

@@ -0,0 +1,85 @@
+// From @maestro-js/components
+// Install with: pnpm maestro components:add container --directory app
+
+import * as React from 'react'
+import { tw } from '../utils/tw'
+
+// ── Props ────────────────────────────────────────────────────────────────────
+
+export type ContainerSize = 'lg' | 'md' | 'sm'
+export type ContainerElevation = 0 | -1 | -2 | 'inherit'
+
+export type ContainerProps = React.ComponentProps<'div'> & {
+  size?: ContainerSize
+  elevation?: ContainerElevation
+}
+
+export type ContainerSectionProps = ContainerProps & {
+  label?: React.ReactNode
+  actions?: React.ReactNode
+}
+
+export type SectionProps = {
+  label?: React.ReactNode
+  actions?: React.ReactNode
+  children?: React.ReactNode
+}
+
+// ── Container ────────────────────────────────────────────────────────────────
+
+export function Container({ size = 'lg', elevation = 0, className, ...props }: ContainerProps) {
+  return <div {...props} className={tw(elevationClasses[String(elevation)], sizeClasses[size], className)} />
+}
+
+Container.displayName = 'Container'
+
+// ── ContainerSection ─────────────────────────────────────────────────────────
+
+export function ContainerSection({ label, actions, ...props }: ContainerSectionProps) {
+  return (
+    <div className="flex flex-col gap-1">
+      <div className="flex items-start justify-between">
+        <h3 className="text-lg font-semibold">{label}</h3>
+        {actions}
+      </div>
+      <Container {...props} />
+    </div>
+  )
+}
+
+ContainerSection.displayName = 'ContainerSection'
+
+// ── Section ──────────────────────────────────────────────────────────────────
+
+export function Section({ label, actions, children }: SectionProps) {
+  return (
+    <div className="flex flex-col gap-1">
+      <div className="flex items-start justify-between">
+        <h3 className="text-lg font-semibold">{label}</h3>
+        {actions}
+      </div>
+      <div>{children}</div>
+    </div>
+  )
+}
+
+Section.displayName = 'Section'
+
+// ── Helpers ──────────────────────────────────────────────────────────────────
+
+const sizeClasses: Record<ContainerSize, string> = {
+  lg: 'p-6 rounded-lg',
+  md: 'p-3 rounded',
+  sm: 'p-2 rounded-sm'
+}
+
+const elevationClasses: Record<string, string> = {
+  '0': 'bg-white ring-1 ring-neutral-950/5',
+  '-1': 'bg-neutral-50 ring-1 ring-neutral-950/5',
+  '-2': 'bg-neutral-100 ring-1 ring-neutral-950/10',
+  inherit: ''
+}
+
+export function getSizeClassesForContainer(size: ContainerSize) {
+  return sizeClasses[size]
+}

package/skills/maestro-examples/references/cadence/cadence-web/app/components/date-range.tsx

@@ -0,0 +1,141 @@
+// From @maestro-js/components
+// Install with: pnpm maestro components:add table --directory app
+
+import * as React from 'react'
+import {
+  RangeCalendar,
+  CalendarGrid,
+  CalendarCell,
+  Heading,
+  CalendarGridHeader,
+  CalendarHeaderCell,
+  CalendarGridBody,
+  Button,
+  I18nProvider
+} from 'react-aria-components'
+import { twMerge } from 'tailwind-merge'
+import { parseDate, type CalendarDate, type DateValue } from '@internationalized/date'
+import type { Iso } from 'iso-fns'
+import { Icon } from './icon'
+
+export type DateRangeRootAdditionalProps = {
+  defaultStart: Iso.Date | null
+  defaultEnd: Iso.Date | null
+  shouldDisableDate: (date: string) => boolean
+  shouldDisableStartDate: (date: string) => boolean
+  shouldDisableEndDate: (date: string) => boolean
+}
+
+type DateRangePickerProps = {
+  start: Iso.Date | null
+  end: Iso.Date | null
+  onStartChange: (value: Iso.Date | null, field: 'start' | 'end' | null) => void
+  onEndChange: (value: Iso.Date | null, field: 'start' | 'end' | null) => void
+  currentField: 'start' | 'end' | null
+  shouldDisableDate?: (date: string) => boolean
+  shouldDisableStartDate?: (date: string) => boolean
+  shouldDisableEndDate?: (date: string) => boolean
+}
+
+export function DateRangePicker(props: DateRangePickerProps) {
+  const ariaValue = React.useMemo(() => {
+    if (!props.start || !props.end) return null
+    try {
+      return { start: parseDate(props.start), end: parseDate(props.end) }
+    } catch {
+      return null
+    }
+  }, [props.start, props.end])
+
+  const handleChange = (range: { start: CalendarDate; end: CalendarDate } | null) => {
+    if (!range) {
+      props.onStartChange(null, null)
+      props.onEndChange(null, null)
+      return
+    }
+    const start = range.start.toString() as Iso.Date
+    const end = range.end.toString() as Iso.Date
+    props.onStartChange(start, 'end')
+    props.onEndChange(end, null)
+  }
+
+  const isDateUnavailable = React.useCallback(
+    (date: DateValue) => {
+      const dateStr = date.toString()
+      return props.shouldDisableDate?.(dateStr) ?? false
+    },
+    [props.shouldDisableDate]
+  )
+
+  return (
+    <I18nProvider locale="en">
+      <RangeCalendar
+        value={ariaValue}
+        onChange={handleChange}
+        isDateUnavailable={isDateUnavailable}
+        visibleDuration={{ months: 2 }}
+        className="text-sm"
+      >
+        <header className="flex items-center justify-between mb-2 px-1">
+          <Button slot="previous" className="p-1 hover:bg-neutral-100 rounded cursor-pointer">
+            <Icon name="chevron-left" />
+          </Button>
+          <Heading className="text-sm font-semibold text-neutral-900 flex-1 text-center" />
+          <Button slot="next" className="p-1 hover:bg-neutral-100 rounded cursor-pointer">
+            <Icon name="chevron-right" />
+          </Button>
+        </header>
+        <div className="flex gap-4">
+          <CalendarGrid>
+            <CalendarGridHeader>
+              {(day) => (
+                <CalendarHeaderCell className="text-xs text-neutral-500 font-medium w-8 h-8">{day}</CalendarHeaderCell>
+              )}
+            </CalendarGridHeader>
+            <CalendarGridBody>
+              {(date) => (
+                <CalendarCell
+                  date={date}
+                  className={({ isSelected, isSelectionStart, isSelectionEnd, isOutsideMonth, isDisabled, isUnavailable }) =>
+                    twMerge(
+                      'w-8 h-8 text-sm rounded cursor-pointer flex items-center justify-center',
+                      'hover:bg-neutral-100',
+                      isOutsideMonth && 'text-neutral-300',
+                      (isDisabled || isUnavailable) && 'text-neutral-300 cursor-not-allowed',
+                      isSelected && !isSelectionStart && !isSelectionEnd && 'bg-primary-500/20',
+                      (isSelectionStart || isSelectionEnd) && 'bg-primary-500 text-white hover:bg-primary-500'
+                    )
+                  }
+                />
+              )}
+            </CalendarGridBody>
+          </CalendarGrid>
+          <CalendarGrid offset={{ months: 1 }}>
+            <CalendarGridHeader>
+              {(day) => (
+                <CalendarHeaderCell className="text-xs text-neutral-500 font-medium w-8 h-8">{day}</CalendarHeaderCell>
+              )}
+            </CalendarGridHeader>
+            <CalendarGridBody>
+              {(date) => (
+                <CalendarCell
+                  date={date}
+                  className={({ isSelected, isSelectionStart, isSelectionEnd, isOutsideMonth, isDisabled, isUnavailable }) =>
+                    twMerge(
+                      'w-8 h-8 text-sm rounded cursor-pointer flex items-center justify-center',
+                      'hover:bg-neutral-100',
+                      isOutsideMonth && 'text-neutral-300',
+                      (isDisabled || isUnavailable) && 'text-neutral-300 cursor-not-allowed',
+                      isSelected && !isSelectionStart && !isSelectionEnd && 'bg-primary-500/20',
+                      (isSelectionStart || isSelectionEnd) && 'bg-primary-500 text-white hover:bg-primary-500'
+                    )
+                  }
+                />
+              )}
+            </CalendarGridBody>
+          </CalendarGrid>
+        </div>
+      </RangeCalendar>
+    </I18nProvider>
+  )
+}

package/skills/maestro-examples/references/cadence/cadence-web/app/components/date-time-picker.tsx

@@ -0,0 +1,199 @@
+// From @maestro-js/components
+// Install with: pnpm maestro components:add date-time-picker --directory app
+
+import * as React from 'react'
+import { DatePicker as AriaDatePicker, DateInput, DateSegment, Button, Dialog, I18nProvider } from 'react-aria-components'
+import { AnimatedPopover } from './helpers/animated-popover'
+import { CalendarDateTime, parseDateTime } from '@internationalized/date'
+import { tw } from '../utils/tw'
+import { FormFieldComponents } from './helpers/form-field'
+import { Icon } from './icon'
+import { HeadlessForm } from '@maestro-js/form'
+import type { ValidationFunction, ValidationResult } from '@maestro-js/form'
+import { CustomCalendar } from './helpers/calendar-month-year-picker'
+import { dateFns, dateTimeFns, type Iso } from 'iso-fns'
+
+export type DateTimePickerProps = {
+  // 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<Iso.DateTime | null>
+  errorMessage?: React.ReactNode | ((v: ValidationResult) => React.ReactNode)
+
+  // Value management (ISO datetime string e.g. 2024-01-15T09:30:00)
+  value?: Iso.DateTime | null
+  defaultValue?: Iso.DateTime | null
+  onChange?: (value: Iso.DateTime | null) => void
+
+  // Date/Time specific
+  minValue?: Iso.DateTime
+  maxValue?: Iso.DateTime
+  use24Hour?: boolean
+  minuteStep?: number
+  locale?: string
+  shape?: 'rectangle' | 'oval'
+}
+
+export function DateTimePicker(props: DateTimePickerProps) {
+  const hiddenInputRef = React.useRef<HTMLInputElement>(null)
+  const helpTextId = React.useId()
+  const labelId = React.useId()
+
+  // Internal state for CalendarDateTime
+  const [value, _setValue] = React.useState(() => {
+    try {
+      const startingValue = props.value === undefined ? (props.defaultValue ?? null) : props.value
+      return startingValue ? parseDateTime(startingValue) : null
+    } catch {
+      return null
+    }
+  })
+
+  function setValue(dt: CalendarDateTime | null) {
+    _setValue(dt)
+    if (!dt || dateTimeFns.isValid(dt.toString())) {
+      props.onChange && props.onChange(dt ? (dt.toString() as Iso.DateTime) : null)
+    }
+    commitValidation()
+  }
+
+  // Sync controlled value
+  if (props.value !== undefined) {
+    const currentValueAsIso = value && dateTimeFns.isValid(value.toString()) ? value.toString() : null
+    const propValue = props.value && dateTimeFns.isValid(props.value) ? props.value : null
+    if ((!value || dateTimeFns.isValid(value.toString())) && propValue !== currentValueAsIso) {
+      try {
+        _setValue(propValue ? parseDateTime(propValue) : null)
+      } catch {
+        _setValue(null)
+      }
+    }
+  }
+
+  // Convert min/max values
+  const minDateTime = React.useMemo(() => {
+    if (!props.minValue) return undefined
+    try {
+      return parseDateTime(props.minValue)
+    } catch {
+      return undefined
+    }
+  }, [props.minValue])
+
+  const maxDateTime = React.useMemo(() => {
+    if (!props.maxValue) return undefined
+    try {
+      return parseDateTime(props.maxValue)
+    } catch {
+      return undefined
+    }
+  }, [props.maxValue])
+
+  // Form validation
+  const {
+    validationMessage: validationMessageRaw,
+    isInvalid: validationInvalid,
+    commitValidation
+  } = HeadlessForm.useValidation(
+    {
+      validate: props.validate,
+      value: value && dateTimeFns.isValid(value.toString()) ? (value.toString() as Iso.DateTime) : null,
+      name: props.name,
+      isRequired: props.isRequired,
+      form: props.form,
+      focus() {
+        // Focus handled by AriaDatePicker
+      }
+    },
+    hiddenInputRef as React.RefObject<HTMLInputElement>
+  )
+
+  const lessThanMin =
+    props.minValue && value && dateTimeFns.isValid(value.toString()) ? value.toString() < props.minValue : false
+  const greaterThanMax =
+    props.maxValue && value && dateTimeFns.isValid(value.toString()) ? value.toString() > props.maxValue : false
+
+  const validationMessage =
+    validationMessageRaw ||
+    (lessThanMin ? `Cannot be before ${dateTimeFns.format(props.minValue!, 'MM/dd/yyyy h:mm a')}` : '') ||
+    (greaterThanMax ? `Cannot be after ${dateTimeFns.format(props.maxValue!, 'MM/dd/yyyy h:mm a')}` : '')
+
+  const isInvalid = props.isInvalid || validationInvalid || lessThanMin || greaterThanMax
+  const hasWarning = Boolean(props.warningMessage) && !isInvalid
+
+  return (
+    <I18nProvider locale={props.locale ?? 'en'}>
+      <div className="relative">
+        {/* Hidden input for form submission */}
+        <HeadlessForm.HiddenInput ref={hiddenInputRef} name={props.name} value={value?.toString() ?? ''} form={props.form} />
+
+        <FormFieldComponents.LabelRow label={props.label} cornerHint={props.cornerHint} labelId={labelId} />
+
+        <AriaDatePicker
+          value={value}
+          aria-labelledby={labelId}
+          aria-describedby={helpTextId}
+          onChange={setValue}
+          minValue={minDateTime}
+          maxValue={maxDateTime}
+          isDisabled={props.isDisabled}
+          isReadOnly={props.isReadonly}
+          isInvalid={isInvalid}
+          isRequired={props.isRequired}
+          granularity="minute"
+          hideTimeZone
+          hourCycle={props.use24Hour ? 24 : 12}
+        >
+          <FormFieldComponents.FieldGroup
+            isDisabled={props.isDisabled}
+            isReadonly={props.isReadonly}
+            isInvalid={isInvalid}
+            hasWarning={hasWarning}
+            shape={props.shape}
+            className="flex"
+          >
+            <DateInput className="flex-1 grow flex px-3 py-2 text-sm">
+              {(segment) => (
+                <DateSegment
+                  segment={segment}
+                  className={tw('px-0.5 tabular-nums outline-none rounded-sm', 'focus:bg-primary-500 focus:text-white')}
+                />
+              )}
+            </DateInput>
+            <Button className="flex items-center px-2 py-2">
+              <Icon name="calendar" className="h-4 w-4 text-neutral-400" />
+            </Button>
+          </FormFieldComponents.FieldGroup>
+
+          <AnimatedPopover>
+            <Dialog>
+              <CustomCalendar value={value} onChange={setValue} minValue={minDateTime} maxValue={maxDateTime} />
+            </Dialog>
+          </AnimatedPopover>
+        </AriaDatePicker>
+
+        <FormFieldComponents.FormFieldHelpText
+          id={helpTextId}
+          isInvalid={isInvalid}
+          validationMessage={validationMessage}
+          hasWarning={hasWarning}
+          warningMessage={props.warningMessage}
+          helpText={props.helpText}
+        />
+      </div>
+    </I18nProvider>
+  )
+}

package/skills/maestro-examples/references/cadence/cadence-web/app/components/empty-state.tsx

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react'
+
+interface EmptyStateProps {
+  icon?: ReactNode
+  heading: string
+  description?: string
+  action?: ReactNode
+}
+
+export function EmptyState({ icon, heading, description, action }: EmptyStateProps) {
+  return (
+    <div className="flex flex-col items-center justify-center rounded-md border border-dashed border-neutral-300 bg-white px-6 py-16 text-center">
+      {icon && <div className="mb-4 text-neutral-400">{icon}</div>}
+      <h3 className="typography-h3">{heading}</h3>
+      {description && <p className="mt-1 text-sm text-neutral-500">{description}</p>}
+      {action && <div className="mt-4">{action}</div>}
+    </div>
+  )
+}

package/skills/maestro-examples/references/cadence/cadence-web/app/components/form-page.tsx

@@ -0,0 +1,41 @@
+import type { ReactNode } from 'react'
+import { Link } from 'react-router'
+import { BackLink } from './back-link'
+import { Button } from './button'
+import { Form } from './form'
+
+interface FormPageProps {
+  backTo: string
+  backLabel: string
+  title: string
+  description: string
+  submitLabel: string
+  isSubmitting: boolean
+  children: ReactNode
+}
+
+export function FormPage({ backTo, backLabel, title, description, submitLabel, isSubmitting, children }: FormPageProps) {
+  return (
+    <div className="mx-auto max-w-xl">
+      <BackLink to={backTo}>{backLabel}</BackLink>
+
+      <h1 className="mt-4 typography-h1">{title}</h1>
+      <p className="mt-1 text-sm text-pretty text-neutral-500">{description}</p>
+
+      <Form method="post" className="mt-6 rounded-lg bg-white shadow-sm ring-1 ring-neutral-950/5">
+        <div className="space-y-4 p-6">{children}</div>
+        <div className="flex items-center justify-end gap-3 border-t border-neutral-950/5 px-6 py-4">
+          <Link
+            to={backTo}
+            className="rounded-lg px-3 py-2 typography-button text-neutral-600 transition-colors hover:bg-neutral-100 hover:text-neutral-900"
+          >
+            Cancel
+          </Link>
+          <Button type="submit" isPending={isSubmitting}>
+            {submitLabel}
+          </Button>
+        </div>
+      </Form>
+    </div>
+  )
+}