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

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

@@ -0,0 +1,106 @@
+// From @maestro-js/components
+// Install with: pnpm maestro components:add form --directory app
+
+import {
+  type FormProps as ReactRouterFormProps,
+  Form as ReactRouterForm,
+  data,
+  type ClientActionFunctionArgs
+} from 'react-router'
+import { HeadlessForm, type StandardSchema, type ParseFormDataOptions, type ParseFormDataResult } 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<T>(
+    schema: StandardSchema<T, T>,
+    formData: FormData | Promise<FormData>,
+    options?: {
+      handleFile: ParseFormDataOptions<T>['handleFile']
+    }
+  ): Promise<ParseFormDataResult<T>> {
+    return HeadlessForm.parseFormData(schema, formData, {
+      ...options,
+      jsonSchemaLibraryOptions: {
+        unrepresentable: 'any',
+        override: (ctx) => {
+          const meta = ctx.zodSchema.meta()
+          const custom = meta?.jsonSchema
+
+          if (custom && typeof custom === 'object') {
+            Object.assign(ctx.jsonSchema, custom)
+          }
+        }
+      }
+    })
+  },
+  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
+}

package/skills/maestro-examples/references/cadence/cadence-web/app/components/helpers/animated-popover.tsx

@@ -0,0 +1,27 @@
+// From @maestro-js/components
+// Install with: pnpm maestro components:add animated-popover --directory app
+
+import { Popover, type PopoverProps } from 'react-aria-components'
+import { tw } from '../../utils/tw'
+
+const animationClasses = tw(
+  'transition-all duration-150 ease-out',
+  // resting state: keep transform properties defined so transitions have endpoints
+  'translate-x-0 translate-y-0',
+  // entering: fade + slide from trigger direction
+  'data-[entering]:opacity-0',
+  'data-[entering]:data-[placement=bottom]:-translate-y-1',
+  'data-[entering]:data-[placement=top]:translate-y-1',
+  'data-[entering]:data-[placement=left]:translate-x-1',
+  'data-[entering]:data-[placement=right]:-translate-x-1',
+  // exiting: fade + slide toward trigger direction
+  'data-[exiting]:opacity-0',
+  'data-[exiting]:data-[placement=bottom]:-translate-y-1',
+  'data-[exiting]:data-[placement=top]:translate-y-1',
+  'data-[exiting]:data-[placement=left]:translate-x-1',
+  'data-[exiting]:data-[placement=right]:-translate-x-1'
+)
+
+export function AnimatedPopover({ className, ...props }: PopoverProps) {
+  return <Popover {...props} className={tw(animationClasses, className)} />
+}

package/skills/maestro-examples/references/cadence/cadence-web/app/components/helpers/button-context.ts

@@ -0,0 +1,13 @@
+// From @maestro-js/components
+// Install with: pnpm maestro components:add button-context --directory app
+
+import React from 'react'
+import type { ButtonVariant, ButtonColor, ButtonSize, ButtonShape } from './get-button-classes'
+
+export const ButtonContext = React.createContext<{
+  variant?: ButtonVariant
+  color?: ButtonColor
+  size?: ButtonSize
+  shape?: ButtonShape
+  fullWidth?: boolean
+}>({})

package/skills/maestro-examples/references/cadence/cadence-web/app/components/helpers/calendar-month-year-picker.tsx

@@ -0,0 +1,283 @@
+// From @maestro-js/components
+// Install with: pnpm maestro components:add calendar-month-year-picker --directory app
+
+import * as React from 'react'
+import {
+  Button,
+  Calendar,
+  CalendarGrid,
+  CalendarCell,
+  Heading,
+  CalendarGridHeader,
+  CalendarHeaderCell,
+  CalendarGridBody
+} from 'react-aria-components'
+import { CalendarDate, CalendarDateTime } from '@internationalized/date'
+import { tw } from '../../utils/tw'
+import { Icon } from '../icon'
+
+type MonthYearPickerProps = {
+  currentDate: CalendarDate | CalendarDateTime
+  onSelect: (year: number, month: number) => void
+  onCancel: () => void
+}
+
+export function MonthYearPicker({ currentDate, onSelect, onCancel }: MonthYearPickerProps) {
+  const [selectedYear, setSelectedYear] = React.useState(currentDate.year)
+  const [viewingYear, setViewingYear] = React.useState(currentDate.year)
+
+  const months = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December'
+  ]
+
+  // Generate year range (current year ± 50 years)
+  const startYear = currentDate.year - 50
+  const endYear = currentDate.year + 50
+  const years = Array.from({ length: endYear - startYear + 1 }, (_, i) => startYear + i)
+
+  // Find years to display (show 12 years at a time, 3x4 grid)
+  const yearIndex = years.indexOf(viewingYear)
+  const displayYears = years.slice(Math.max(0, yearIndex - 5), Math.min(years.length, yearIndex + 7))
+
+  const handlePreviousYears = () => {
+    setViewingYear((prev) => prev - 12)
+  }
+
+  const handleNextYears = () => {
+    setViewingYear((prev) => prev + 12)
+  }
+
+  return (
+    <div className="bg-white border border-neutral-200 rounded-md shadow-lg p-4 w-80">
+      {/* Year selection header */}
+      <div className="mb-4">
+        <header className="flex items-center justify-between mb-3">
+          <Button className="p-1 hover:bg-neutral-100 rounded" onPress={handlePreviousYears}>
+            <Icon name="chevron-left" className="h-4 w-4" />
+          </Button>
+          <div className="text-sm font-semibold text-neutral-900">
+            {displayYears[0]} - {displayYears[displayYears.length - 1]}
+          </div>
+          <Button className="p-1 hover:bg-neutral-100 rounded" onPress={handleNextYears}>
+            <Icon name="chevron-right" className="h-4 w-4" />
+          </Button>
+        </header>
+
+        {/* Year grid */}
+        <div className="grid grid-cols-3 gap-2">
+          {displayYears.map((year) => (
+            <button
+              key={year}
+              type="button"
+              onClick={() => setSelectedYear(year)}
+              className={tw(
+                'py-2 px-3 text-sm rounded cursor-pointer transition-colors',
+                'hover:bg-neutral-100',
+                selectedYear === year && 'bg-primary-500 text-white hover:bg-primary-500',
+                year === currentDate.year && selectedYear !== year && 'font-semibold'
+              )}
+            >
+              {year}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Month selection */}
+      <div>
+        <div className="text-sm font-semibold text-neutral-900 mb-2">{selectedYear}</div>
+        <div className="grid grid-cols-3 gap-2">
+          {months.map((month, index) => {
+            const monthNum = index + 1
+            const isCurrentMonth = selectedYear === currentDate.year && monthNum === currentDate.month
+
+            return (
+              <button
+                key={month}
+                type="button"
+                onClick={() => onSelect(selectedYear, monthNum)}
+                className={tw(
+                  'py-2 px-2 text-sm rounded cursor-pointer transition-colors',
+                  'hover:bg-neutral-100',
+                  isCurrentMonth && 'font-semibold border border-primary-500'
+                )}
+              >
+                {month.slice(0, 3)}
+              </button>
+            )
+          })}
+        </div>
+      </div>
+
+      {/* Cancel button */}
+      <div className="mt-4 flex justify-end">
+        <button
+          type="button"
+          onClick={onCancel}
+          className="py-1 px-3 text-sm text-neutral-600 hover:text-neutral-900 hover:bg-neutral-100 rounded transition-colors"
+        >
+          Cancel
+        </button>
+      </div>
+    </div>
+  )
+}
+
+type CustomCalendarPropsBase = {
+  isDateUnavailable?: (date: CalendarDate | CalendarDateTime) => boolean
+}
+
+type CustomCalendarPropsDate = CustomCalendarPropsBase & {
+  value: CalendarDate | null
+  onChange: (date: CalendarDate | null) => void
+  minValue?: CalendarDate
+  maxValue?: CalendarDate
+}
+
+type CustomCalendarPropsDateTime = CustomCalendarPropsBase & {
+  value: CalendarDateTime | null
+  onChange: (date: CalendarDateTime | null) => void
+  minValue?: CalendarDateTime
+  maxValue?: CalendarDateTime
+}
+
+type CustomCalendarProps = CustomCalendarPropsDate | CustomCalendarPropsDateTime
+
+export function CustomCalendar(props: CustomCalendarProps) {
+  const { value, onChange, minValue, maxValue, isDateUnavailable } = props
+  const [showMonthYearPicker, setShowMonthYearPicker] = React.useState(false)
+
+  // Create a default focused date
+  const createDefaultDate = () => {
+    const now = new Date()
+    const year = now.getFullYear()
+    const month = now.getMonth() + 1
+    const day = now.getDate()
+
+    // Check if we're working with CalendarDateTime
+    if (value && 'hour' in value) {
+      return new CalendarDateTime(year, month, day, 0, 0, 0)
+    }
+    return new CalendarDate(year, month, day)
+  }
+
+  const [focusedDate, setFocusedDate] = React.useState(value || createDefaultDate())
+
+  const handleMonthYearSelect = (year: number, month: number) => {
+    if ('hour' in focusedDate) {
+      // CalendarDateTime
+      const newDate = focusedDate.set({ year, month })
+      setFocusedDate(newDate)
+    } else {
+      // CalendarDate - use safe day value
+      const newDate = new CalendarDate(year, month, Math.min(focusedDate.day, 28))
+      setFocusedDate(newDate)
+    }
+    setShowMonthYearPicker(false)
+  }
+
+  const handleFocusChange = (date: CalendarDate) => {
+    if ('hour' in focusedDate) {
+      // Convert CalendarDate to CalendarDateTime by preserving time from focusedDate
+      const newDateTime = focusedDate.set({
+        year: date.year,
+        month: date.month,
+        day: date.day
+      })
+      setFocusedDate(newDateTime)
+    } else {
+      setFocusedDate(date)
+    }
+  }
+
+  if (showMonthYearPicker) {
+    return (
+      <MonthYearPicker
+        currentDate={focusedDate}
+        onSelect={handleMonthYearSelect}
+        onCancel={() => setShowMonthYearPicker(false)}
+      />
+    )
+  }
+
+  const handleCalendarChange = (date: CalendarDate | CalendarDateTime | null) => {
+    if (typeof onChange === 'function') {
+      // Type assertion needed due to union type constraints
+      ;(onChange as (date: CalendarDate | CalendarDateTime | null) => void)(date)
+    }
+  }
+
+  return (
+    <Calendar
+      value={value ?? undefined}
+      onChange={handleCalendarChange}
+      focusedValue={focusedDate}
+      onFocusChange={handleFocusChange}
+      minValue={minValue !== undefined && minValue !== null ? minValue : undefined}
+      maxValue={maxValue !== undefined && maxValue !== null ? maxValue : undefined}
+      isDateUnavailable={
+        isDateUnavailable
+          ? (date) => {
+              // Convert DateValue to CalendarDate for the callback
+              if ('hour' in date) {
+                // It's a CalendarDateTime, convert to CalendarDate
+                const calendarDate = new CalendarDate(date.year, date.month, date.day)
+                return isDateUnavailable(calendarDate)
+              }
+              return isDateUnavailable(date as CalendarDate)
+            }
+          : undefined
+      }
+      className="bg-white border border-neutral-200 rounded-md shadow-lg p-3"
+    >
+      <header className="flex items-center justify-between mb-2">
+        <Button slot="previous" className="p-1 hover:bg-neutral-100 rounded">
+          <Icon name="chevron-left" className="h-4 w-4" />
+        </Button>
+        <button
+          type="button"
+          onClick={() => setShowMonthYearPicker(true)}
+          className="text-sm font-semibold text-neutral-900 hover:bg-neutral-100 px-2 py-1 rounded transition-colors"
+        >
+          <Heading />
+        </button>
+        <Button slot="next" className="p-1 hover:bg-neutral-100 rounded">
+          <Icon name="chevron-right" className="h-4 w-4" />
+        </Button>
+      </header>
+      <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, isOutsideMonth, isDisabled, isUnavailable, isFocusVisible }) =>
+                tw(
+                  '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 && 'bg-primary-500 text-white hover:bg-primary-500',
+                  isFocusVisible && 'ring-2 ring-primary-500 ring-offset-1'
+                )
+              }
+            />
+          )}
+        </CalendarGridBody>
+      </CalendarGrid>
+    </Calendar>
+  )
+}

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

@@ -0,0 +1,231 @@
+// From @maestro-js/components
+// Install with: pnpm maestro components:add form-field --directory app
+
+import * as React from 'react'
+import {
+  Button,
+  Collection,
+  Group,
+  Header,
+  Input,
+  ListBox,
+  ListBoxItem,
+  ListBoxSection,
+  type InputProps
+} from 'react-aria-components'
+import { composeTailwindRenderProps, tw } from '../../utils/tw'
+import { Icon } from '../icon'
+
+const colorClasses = { neutral: 'text-neutral-500', negative: 'text-negative-600', notice: 'text-notice-600' } as const
+
+type LabelProps = {
+  as?: React.ElementType<React.ComponentPropsWithRef<'label'>>
+} & React.ComponentPropsWithRef<'label'>
+
+const Label = React.forwardRef<HTMLLabelElement, LabelProps>(({ as = 'label', ...props }, ref) => {
+  return React.createElement(as, {
+    ...props,
+    ref,
+    className: tw('block text-sm font-medium text-neutral-700', props.className)
+  })
+})
+Label.displayName = 'Label'
+
+function FormFieldHelpText(props: {
+  id: string
+  isInvalid: boolean
+  validationMessage: React.ReactNode
+  hasWarning: boolean
+  warningMessage?: React.ReactNode
+  helpText?: React.ReactNode
+  UNSAFE_className?: string
+}) {
+  const text = props.isInvalid ? props.validationMessage : props.hasWarning ? props.warningMessage : props.helpText
+  const color = props.isInvalid ? 'negative' : props.hasWarning ? 'notice' : 'neutral'
+  return text === null ? null : (
+    <div
+      id={props.id}
+      className={tw('mt-1 text-sm', !text && 'h-5', colorClasses[color], 'text-wrap', props.UNSAFE_className)}
+    >
+      {text ?? ''}
+    </div>
+  )
+}
+
+function LabelRow(
+  props: { label?: React.ReactNode; cornerHint?: React.ReactNode } & ({ labelId: string } | { htmlFor: string })
+): React.JSX.Element | null {
+  if (!props.label) return null
+  return (
+    <div className="flex justify-between items-center mb-1">
+      {'labelId' in props ? (
+        <Label id={props.labelId}>{props.label}</Label>
+      ) : (
+        <Label htmlFor={props.htmlFor}>{props.label}</Label>
+      )}
+      {props.cornerHint && <div className="text-sm text-neutral-500">{props.cornerHint}</div>}
+    </div>
+  )
+}
+
+type FieldGroupProps = {
+  isDisabled?: boolean
+  isReadonly?: boolean
+  isInvalid?: boolean
+  hasWarning?: boolean
+  shape?: 'rectangle' | 'oval'
+  className?: string
+  children: React.ReactNode
+  onClick?: React.MouseEventHandler<HTMLDivElement>
+}
+
+const FieldGroup = React.forwardRef<HTMLDivElement, FieldGroupProps>(
+  ({ children, className, onClick, ...opts }, ref) => {
+    const disabled = opts.isDisabled || opts.isReadonly
+    const shape = opts.shape === 'oval' ? 'rounded-full' : 'rounded'
+
+    return (
+      <Group
+        ref={ref}
+        className={tw(
+          'relative overflow-hidden ring-1 shadow-sm transition-all duration-200 max-w-96',
+          'focus-within:outline-2 focus-within:-outline-offset-1',
+          shape,
+          disabled && 'ring-neutral-200 bg-neutral-50 text-neutral-400 shadow-none cursor-not-allowed',
+          opts.isInvalid && 'ring-negative-300 bg-negative-50 focus-within:outline-negative-500',
+          opts.hasWarning && 'ring-notice-300 bg-notice-50 focus-within:outline-notice-500',
+          !opts.isInvalid &&
+            !opts.hasWarning &&
+            !disabled &&
+            'ring-black/10 hover:ring-black/20 focus-within:outline-primary-500',
+          className
+        )}
+        onClick={onClick}
+      >
+        {children}
+      </Group>
+    )
+  }
+)
+
+const FieldInput = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
+  return (
+    <Input
+      {...props}
+      ref={ref}
+      className={composeTailwindRenderProps(
+        props.className,
+        tw(
+          'flex-1 bg-transparent px-3 py-2 border-0 focus:ring-0 focus:outline-none text-sm max-sm:text-base text-neutral-900 placeholder:text-neutral-400',
+          (props.disabled || props.readOnly) && 'cursor-not-allowed'
+        )
+      )}
+    />
+  )
+})
+
+function DropdownListBox<T extends object>(props: React.ComponentProps<typeof ListBox<T>>) {
+  return (
+    <ListBox<T>
+      {...props}
+      className={composeTailwindRenderProps(
+        props.className,
+        'overflow-hidden rounded bg-white border border-neutral-200 shadow-lg text-sm w-full focus:outline-none max-h-60 overflow-y-auto'
+      )}
+    />
+  )
+}
+
+function DropdownItem(props: {
+  id: string
+  textValue: string
+  label: React.ReactNode
+  secondary?: React.ReactNode
+  isDisabled?: boolean
+  color?: string | null
+  showCheckIcon?: boolean
+  customValuePrefix?: string
+  className?: string
+}) {
+  const isCustom = Boolean(props.customValuePrefix)
+  const showCheck = props.showCheckIcon !== false && !isCustom
+
+  return (
+    <ListBoxItem
+      id={props.id}
+      textValue={props.textValue}
+      isDisabled={props.isDisabled}
+      className={({ isFocused, isSelected }) =>
+        tw(
+          isFocused ? 'bg-neutral-50 text-neutral-900' : 'text-neutral-900 bg-white',
+          'relative cursor-pointer text-sm transition-colors duration-150',
+          'pr-2 pl-3 py-1.5 outline-none',
+          props.isDisabled && 'opacity-50 cursor-not-allowed',
+          isSelected ? (isFocused ? 'bg-primary-100' : 'bg-primary-50') : '',
+          isCustom && 'italic',
+          props.className
+        )
+      }
+    >
+      {({ isSelected }) => (
+        <>
+          {props.color && !isCustom ? (
+            <div className="absolute left-0 top-0 w-[3px] h-full" style={{ backgroundColor: props.color }} />
+          ) : null}
+          <div className="flex items-center justify-between w-full">
+            <div className="flex-1 min-w-0">
+              <div className={tw(showCheck && isSelected ? 'font-medium' : 'font-normal', 'truncate')}>
+                {isCustom ? `${props.customValuePrefix} "${props.label}"` : props.label}
+              </div>
+              {props.secondary && !isCustom && (
+                <div className="text-xs mt-px truncate text-neutral-500">{props.secondary}</div>
+              )}
+            </div>
+            {showCheck && isSelected && (
+              <div className="ml-2 w-fit shrink-0 flex items-center text-primary-500">
+                <Icon name="check" className="h-4 w-4" />
+              </div>
+            )}
+          </div>
+        </>
+      )}
+    </ListBoxItem>
+  )
+}
+
+function DropdownSection<T extends object>(props: {
+  title?: string
+  items?: Iterable<T>
+  children: React.ReactNode | ((item: T) => React.ReactNode)
+}) {
+  return (
+    <ListBoxSection>
+      {props.title && (
+        <Header className="sticky top-0 z-10 bg-white px-3 py-1.5 text-xs font-semibold text-neutral-500 border-b border-neutral-100">
+          {props.title}
+        </Header>
+      )}
+      <Collection items={props.items}>{props.children}</Collection>
+    </ListBoxSection>
+  )
+}
+
+function ChevronButton(props?: { className?: string }) {
+  return (
+    <Button className={tw('flex items-center px-2 py-2', props?.className)}>
+      <Icon name="chevron-up-down" className="h-4 w-4 text-neutral-400 transition-colors" />
+    </Button>
+  )
+}
+
+export const FormFieldComponents = {
+  Label,
+  FormFieldHelpText,
+  LabelRow,
+  FieldGroup,
+  FieldInput,
+  DropdownListBox,
+  DropdownSection,
+  DropdownItem,
+  ChevronButton
+}