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

package/skills/maestro-examples/references/chorus/chorus-web/app/components/image-input.tsx

@@ -0,0 +1,268 @@
+// From @maestro-js/components
+// Install with: pnpm maestro components:add image-input --directory app
+
+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/skills/maestro-examples/references/chorus/chorus-web/app/components/inline-alert.tsx

@@ -0,0 +1,57 @@
+// From @maestro-js/components
+// Install with: pnpm maestro components:add inline-alert --directory app
+
+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-50 text-info-800 border-info-200',
+  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-50 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-lg 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>
+  )
+}

package/skills/maestro-examples/references/chorus/chorus-web/app/components/like-button.tsx

@@ -0,0 +1,48 @@
+import { useFetcher } from 'react-router'
+import { CsrfHiddenInput } from '../features/csrf-hidden-input'
+import { useProfile } from '../utils/use-profile'
+import { tw } from '../utils/tw'
+import { Icon } from './icon'
+
+export interface LikeButtonProps {
+  postId: number
+  liked: boolean
+  count: number
+  compact?: boolean
+}
+
+export function LikeButton({ postId, liked, count, compact }: LikeButtonProps) {
+  const profile = useProfile()
+  const loggedIn = profile != null
+  const fetcher = useFetcher()
+
+  const optimisticLiked = fetcher.formData ? fetcher.formData.get('liked') === 'true' : liked
+  const optimisticCount = fetcher.formData
+    ? count + (optimisticLiked === liked ? 0 : optimisticLiked ? 1 : -1)
+    : count
+
+  return (
+    <fetcher.Form method="post" action={`/api/like/${postId}`} className="flex items-center">
+      <CsrfHiddenInput />
+      <input type="hidden" name="intent" value={liked ? 'unlike' : 'like'} />
+      <input type="hidden" name="liked" value={String(!liked)} />
+      <button
+        type="submit"
+        disabled={!loggedIn}
+        className={tw(
+          'inline-flex items-center gap-1',
+          compact ? 'text-sm' : 'text-base',
+          !loggedIn
+            ? 'text-neutral-400 cursor-not-allowed'
+            : optimisticLiked
+              ? 'text-red-500'
+              : 'text-neutral-500 hover:text-neutral-700'
+        )}
+        aria-label={optimisticLiked ? `Unlike post (${optimisticCount} likes)` : `Like post (${optimisticCount} likes)`}
+      >
+        <Icon name={optimisticLiked ? 'heart-solid' : 'heart'} className={compact ? 'size-4' : 'size-5'} />
+        <span>{optimisticCount}</span>
+      </button>
+    </fetcher.Form>
+  )
+}

package/skills/maestro-examples/references/chorus/chorus-web/app/components/menu.tsx

@@ -0,0 +1,189 @@
+// From @maestro-js/components
+// Install with: pnpm maestro components:add menu --directory app
+
+import * as React from 'react'
+import {
+  Menu as AriaMenu,
+  MenuItem as AriaMenuItem,
+  MenuSection as AriaMenuSection,
+  MenuTrigger as AriaMenuTrigger,
+  Pressable,
+  Separator as AriaSeparator
+} from 'react-aria-components'
+import { Link, useHref, type RelativeRoutingType, type To } from 'react-router'
+import { AnimatedPopover } from './helpers/animated-popover'
+import { tw } from '../utils/tw'
+
+// ── Types ──────────────────────────────────────────────────────────────────────
+
+export type MenuProps = {
+  /** Trigger element. Can be a ReactNode or render function receiving `{ isOpen }`. */
+  Button: React.ReactNode | ((props: { isOpen: boolean }) => React.ReactElement)
+  children?: React.ReactNode
+  className?: string
+  containerClassName?: string
+  placement?: 'bottom' | 'bottom start' | 'bottom end' | 'top' | 'top start' | 'top end' | 'left' | 'right'
+}
+
+export type MenuItemProps = {
+  children?: React.ReactNode
+  className?: string
+  isDisabled?: boolean
+  id?: string
+  textValue?: string
+  type?: 'button' | 'submit'
+  onAction?: () => void
+  onClick?: ((e: React.MouseEvent<Element & HTMLOrSVGElement, MouseEvent>) => void) | undefined
+  form?: string
+  name?: string
+  value?: string
+}
+
+export type MenuLinkItemProps = {
+  to: To
+  relative?: RelativeRoutingType
+  children?: React.ReactNode
+  className?: string
+  isDisabled?: boolean
+  target?: React.HTMLAttributeAnchorTarget
+  rel?: string
+  id?: string
+  textValue?: string
+}
+
+export type MenuGroupProps = {
+  children?: React.ReactNode
+}
+
+// ── Helpers ──────────────────────────────────────────────────────────────────
+
+function itemClassName({ isFocused, isDisabled }: { isFocused: boolean; isDisabled: boolean }, className?: string) {
+  return tw(
+    isFocused ? 'bg-neutral-50 text-neutral-900' : 'text-neutral-700',
+    'group flex w-full items-center px-4 py-2 text-sm gap-2 outline-none',
+    isDisabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',
+    className
+  )
+}
+
+// ── MenuMain ──────────────────────────────────────────────────────────────────
+
+function MenuMain({ Button: ButtonProp, children, className, containerClassName, placement = 'bottom end' }: MenuProps) {
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  const triggerContent = typeof ButtonProp === 'function' ? ButtonProp({ isOpen }) : ButtonProp
+
+  return (
+    <div className={tw('relative inline-block text-left', containerClassName)}>
+      <AriaMenuTrigger isOpen={isOpen} onOpenChange={setIsOpen}>
+        <Pressable>
+          {React.isValidElement(triggerContent) ? (
+            triggerContent
+          ) : (
+            <button type="button" className="inline-flex items-center focus:outline-none">
+              {triggerContent}
+            </button>
+          )}
+        </Pressable>
+        <AnimatedPopover placement={placement} offset={8}>
+          <AriaMenu
+            className={tw(
+              'overflow-hidden min-w-56 w-max rounded-lg bg-white py-1 shadow-lg ring-1 ring-black/5 focus:outline-none',
+              className
+            )}
+            autoFocus="first"
+          >
+            {children}
+          </AriaMenu>
+        </AnimatedPopover>
+      </AriaMenuTrigger>
+    </div>
+  )
+}
+
+MenuMain.displayName = 'Menu'
+
+// ── MenuItem ──────────────────────────────────────────────────────────────────
+
+function Item({
+  children,
+  className,
+  isDisabled,
+  id,
+  textValue,
+  type,
+  onAction,
+  onClick,
+  form,
+  name,
+  value
+}: MenuItemProps) {
+  const itemRef = React.useRef<HTMLDivElement>(null)
+  const isSubmit = type === 'submit'
+
+  return (
+    <AriaMenuItem
+      id={id}
+      ref={isSubmit ? itemRef : undefined}
+      onClick={onClick}
+      textValue={textValue ?? (typeof children === 'string' ? children : undefined)}
+      onAction={
+        isSubmit
+          ? () => {
+              onAction?.()
+              const targetForm = form
+                ? (document.getElementById(form) as HTMLFormElement | null)
+                : (itemRef.current?.closest('form') ?? null)
+              if (!targetForm) return
+              targetForm.requestSubmit()
+            }
+          : onAction
+      }
+      isDisabled={isDisabled}
+      className={(renderProps) => itemClassName(renderProps, className)}
+    >
+      {children}
+      {isSubmit && <input type="submit" className="sr-only" name={name} value={value ?? ''} form={form} />}
+    </AriaMenuItem>
+  )
+}
+
+// ── LinkItem ──────────────────────────────────────────────────────────────────
+
+function LinkItem({ to, children, className, relative, isDisabled, target, rel, id, textValue }: MenuLinkItemProps) {
+  return (
+    <AriaMenuItem
+      id={id}
+      href={useHref(to, { relative })}
+      target={target}
+      rel={rel}
+      textValue={textValue ?? (typeof children === 'string' ? children : undefined)}
+      isDisabled={isDisabled}
+      className={(renderProps) => itemClassName(renderProps, className)}
+      render={(props) => <Link {...(props as React.AnchorHTMLAttributes<HTMLAnchorElement>)} relative={relative} to={to} />}
+    >
+      {children}
+    </AriaMenuItem>
+  )
+}
+
+// ── Group ─────────────────────────────────────────────────────────────────────
+
+function Group({ children }: MenuGroupProps) {
+  return <AriaMenuSection className="py-1">{children}</AriaMenuSection>
+}
+
+// ── Separator ─────────────────────────────────────────────────────────────────
+
+function MenuSeparator() {
+  return <AriaSeparator className="border-t border-neutral-950/5" />
+}
+
+// ── Export ─────────────────────────────────────────────────────────────────────
+
+export const Menu = Object.assign(MenuMain, {
+  Item,
+  LinkItem,
+  Group,
+  Separator: MenuSeparator
+})