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

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

@@ -1,268 +0,0 @@
-// 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

@@ -1,57 +0,0 @@
-// 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

@@ -1,48 +0,0 @@
-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

@@ -1,189 +0,0 @@
-// 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
-})