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

package/skills/maestro-examples/references/cadence/cadence-web/app/components/rich-text-editor.tsx

@@ -0,0 +1,352 @@
+import * as React from 'react'
+import { twMerge } from 'tailwind-merge'
+import { Icon } from '~/components/icon'
+
+// Lazy-load Tiptap since it requires DOM
+const LazyEditor = React.lazy(() =>
+  import('@tiptap/react').then((mod) => ({
+    default: function TiptapEditor({
+      content,
+      onChange,
+      placeholder
+    }: {
+      content: string
+      onChange: (html: string) => void
+      placeholder: string
+    }) {
+      const { useEditor, EditorContent } = mod
+      const [linkPopover, setLinkPopover] = React.useState(false)
+      const [linkUrl, setLinkUrl] = React.useState('')
+      const linkInputRef = React.useRef<HTMLInputElement>(null)
+
+      const editor = useEditor({
+        extensions: [
+          require('@tiptap/starter-kit').default.configure({
+            heading: { levels: [1, 2, 3] }
+          }),
+          require('@tiptap/extension-link').default.configure({
+            openOnClick: false,
+            autolink: true
+          }),
+          require('@tiptap/extension-placeholder').default.configure({
+            placeholder
+          })
+        ],
+        content,
+        onUpdate: ({ editor: e }) => {
+          onChange(e.getHTML())
+        }
+      })
+
+      // This won't work with lazy require — we need a different approach
+      return <EditorContent editor={editor} />
+    }
+  }))
+)
+
+// We can't use require with ESM. Instead, build the editor inline with dynamic imports.
+// Let's use a simpler approach: a single component that imports everything at mount time.
+
+export interface RichTextEditorProps {
+  content: string
+  onChange: (html: string) => void
+  placeholder?: string
+}
+
+export function RichTextEditor({ content, onChange, placeholder = '' }: RichTextEditorProps) {
+  const [isMounted, setIsMounted] = React.useState(false)
+
+  React.useEffect(() => {
+    setIsMounted(true)
+  }, [])
+
+  if (!isMounted) {
+    return (
+      <div className="rounded-md border border-neutral-300">
+        <div className="rounded-t-md border-b border-neutral-200 bg-neutral-50 px-2 py-1.5">
+          <div className="h-8" />
+        </div>
+        <div className="min-h-[200px] px-4 py-3 text-sm text-neutral-400">{placeholder}</div>
+      </div>
+    )
+  }
+
+  return (
+    <React.Suspense
+      fallback={
+        <div className="rounded-md border border-neutral-300">
+          <div className="rounded-t-md border-b border-neutral-200 bg-neutral-50 px-2 py-1.5">
+            <div className="h-8" />
+          </div>
+          <div className="min-h-[200px] px-4 py-3 text-sm text-neutral-400">{placeholder}</div>
+        </div>
+      }
+    >
+      <TiptapEditorWrapper content={content} onChange={onChange} placeholder={placeholder} />
+    </React.Suspense>
+  )
+}
+
+const TiptapEditorWrapper = React.lazy(async () => {
+  const [{ useEditor, EditorContent }, { default: StarterKit }, { default: Link }, { default: Placeholder }] =
+    await Promise.all([
+      import('@tiptap/react'),
+      import('@tiptap/starter-kit'),
+      import('@tiptap/extension-link'),
+      import('@tiptap/extension-placeholder')
+    ])
+
+  function TiptapEditor({
+    content,
+    onChange,
+    placeholder
+  }: {
+    content: string
+    onChange: (html: string) => void
+    placeholder: string
+  }) {
+    const [linkPopover, setLinkPopover] = React.useState(false)
+    const [linkUrl, setLinkUrl] = React.useState('')
+    const linkInputRef = React.useRef<HTMLInputElement>(null)
+
+    const editor = useEditor({
+      extensions: [
+        StarterKit.configure({
+          heading: { levels: [1, 2, 3] }
+        }),
+        Link.configure({
+          openOnClick: false,
+          autolink: true
+        }),
+        Placeholder.configure({
+          placeholder
+        })
+      ],
+      content,
+      onUpdate: ({ editor: e }) => {
+        onChange(e.getHTML())
+      }
+    })
+
+    React.useEffect(() => {
+      if (linkPopover && linkInputRef.current) {
+        linkInputRef.current.focus()
+      }
+    }, [linkPopover])
+
+    if (!editor) return null
+
+    function openLinkPopover() {
+      if (!editor) return
+      const existingHref = editor.getAttributes('link').href
+      setLinkUrl(existingHref ?? '')
+      setLinkPopover(true)
+    }
+
+    function applyLink() {
+      if (!editor) return
+      if (linkUrl.trim()) {
+        editor.chain().focus().extendMarkRange('link').setLink({ href: linkUrl.trim() }).run()
+      }
+      setLinkPopover(false)
+      setLinkUrl('')
+    }
+
+    function removeLink() {
+      if (!editor) return
+      editor.chain().focus().extendMarkRange('link').unsetLink().run()
+      setLinkPopover(false)
+      setLinkUrl('')
+    }
+
+    return (
+      <div className="rounded-md border border-neutral-300 focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500/20">
+        {/* Toolbar */}
+        <div className="flex flex-wrap items-center gap-0.5 rounded-t-md border-b border-neutral-200 bg-neutral-50 px-2 py-1.5">
+          {/* Text group */}
+          <ToolbarButton
+            onClick={() => editor.chain().focus().toggleBold().run()}
+            isActive={editor.isActive('bold')}
+            title="Bold"
+          >
+            <span className="font-bold">B</span>
+          </ToolbarButton>
+          <ToolbarButton
+            onClick={() => editor.chain().focus().toggleItalic().run()}
+            isActive={editor.isActive('italic')}
+            title="Italic"
+          >
+            <span className="italic">I</span>
+          </ToolbarButton>
+          <ToolbarButton
+            onClick={() => editor.chain().focus().toggleStrike().run()}
+            isActive={editor.isActive('strike')}
+            title="Strikethrough"
+          >
+            <span className="line-through">S</span>
+          </ToolbarButton>
+
+          <ToolbarDivider />
+
+          {/* Heading group */}
+          <ToolbarButton
+            onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
+            isActive={editor.isActive('heading', { level: 1 })}
+            title="Heading 1"
+          >
+            H1
+          </ToolbarButton>
+          <ToolbarButton
+            onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
+            isActive={editor.isActive('heading', { level: 2 })}
+            title="Heading 2"
+          >
+            H2
+          </ToolbarButton>
+          <ToolbarButton
+            onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
+            isActive={editor.isActive('heading', { level: 3 })}
+            title="Heading 3"
+          >
+            H3
+          </ToolbarButton>
+
+          <ToolbarDivider />
+
+          {/* List group */}
+          <ToolbarButton
+            onClick={() => editor.chain().focus().toggleBulletList().run()}
+            isActive={editor.isActive('bulletList')}
+            title="Bullet List"
+          >
+            <Icon name="list-bullet" className="h-4 w-4" />
+          </ToolbarButton>
+          <ToolbarButton
+            onClick={() => editor.chain().focus().toggleOrderedList().run()}
+            isActive={editor.isActive('orderedList')}
+            title="Ordered List"
+          >
+            <Icon name="queue-list" className="h-4 w-4" />
+          </ToolbarButton>
+
+          <ToolbarDivider />
+
+          {/* Block group */}
+          <ToolbarButton
+            onClick={() => editor.chain().focus().toggleBlockquote().run()}
+            isActive={editor.isActive('blockquote')}
+            title="Blockquote"
+          >
+            <Icon name="chat-bubble-bottom-center-text" className="h-4 w-4" />
+          </ToolbarButton>
+          <ToolbarButton
+            onClick={() => editor.chain().focus().toggleCodeBlock().run()}
+            isActive={editor.isActive('codeBlock')}
+            title="Code Block"
+          >
+            <Icon name="code-bracket" className="h-4 w-4" />
+          </ToolbarButton>
+
+          <ToolbarDivider />
+
+          {/* Insert group */}
+          <ToolbarButton
+            onClick={() => editor.chain().focus().setHorizontalRule().run()}
+            title="Horizontal Rule"
+          >
+            <Icon name="minus" className="h-4 w-4" />
+          </ToolbarButton>
+          <div className="relative">
+            <ToolbarButton
+              onClick={openLinkPopover}
+              isActive={editor.isActive('link')}
+              title="Link"
+            >
+              <Icon name="link" className="h-4 w-4" />
+            </ToolbarButton>
+
+            {/* Link popover */}
+            {linkPopover && (
+              <div className="absolute left-0 top-full z-20 mt-1 flex items-center gap-1.5 rounded-md border border-neutral-200 bg-white p-2 shadow-lg">
+                <input
+                  ref={linkInputRef}
+                  type="url"
+                  value={linkUrl}
+                  onChange={(e) => setLinkUrl(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') {
+                      e.preventDefault()
+                      applyLink()
+                    }
+                    if (e.key === 'Escape') {
+                      setLinkPopover(false)
+                      setLinkUrl('')
+                    }
+                  }}
+                  placeholder="https://"
+                  className="w-56 rounded border border-neutral-300 px-2 py-1 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500/20"
+                />
+                <button
+                  type="button"
+                  onClick={applyLink}
+                  className="rounded bg-blue-600 px-2 py-1 text-xs font-medium text-white hover:bg-blue-700"
+                >
+                  Apply
+                </button>
+                {editor.isActive('link') && (
+                  <button
+                    type="button"
+                    onClick={removeLink}
+                    className="rounded bg-red-100 px-2 py-1 text-xs font-medium text-red-700 hover:bg-red-200"
+                  >
+                    Remove
+                  </button>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Editor content */}
+        <EditorContent
+          editor={editor}
+          className="prose prose-sm max-w-none px-4 py-3 focus:outline-none [&_.ProseMirror]:min-h-[200px] [&_.ProseMirror]:outline-none [&_.ProseMirror_p.is-editor-empty:first-child::before]:pointer-events-none [&_.ProseMirror_p.is-editor-empty:first-child::before]:float-left [&_.ProseMirror_p.is-editor-empty:first-child::before]:h-0 [&_.ProseMirror_p.is-editor-empty:first-child::before]:text-neutral-400 [&_.ProseMirror_p.is-editor-empty:first-child::before]:content-[attr(data-placeholder)]"
+        />
+      </div>
+    )
+  }
+
+  return { default: TiptapEditor }
+})
+
+function ToolbarButton({
+  onClick,
+  isActive,
+  title,
+  children
+}: {
+  onClick: () => void
+  isActive?: boolean
+  title: string
+  children: React.ReactNode
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      title={title}
+      className={twMerge(
+        'inline-flex h-8 w-8 items-center justify-center rounded text-sm transition-colors',
+        isActive
+          ? 'bg-neutral-200 text-neutral-900'
+          : 'text-neutral-600 hover:bg-neutral-100 hover:text-neutral-900'
+      )}
+    >
+      {children}
+    </button>
+  )
+}
+
+function ToolbarDivider() {
+  return <div className="mx-1 h-6 w-px bg-neutral-200" />
+}

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

@@ -0,0 +1,219 @@
+// From @maestro-js/components
+// Install with: pnpm maestro components:add select --directory app
+
+import * as React from 'react'
+import { Select as AriaSelect, Button, ListBoxItem } from 'react-aria-components'
+import { AnimatedPopover } from './helpers/animated-popover'
+import { HeadlessForm } from '@maestro-js/form'
+import type { ValidationFunction, ValidationResult } from '@maestro-js/form'
+import { tw } from '../utils/tw'
+import { FormFieldComponents } from './helpers/form-field'
+import { Icon } from './icon'
+import { getColor, stringToNumber } from '../utils/colors'
+
+// ── Types ──────────────────────────────────────────────────────────────────────
+
+export type SelectOption = {
+  value: string | number | null
+  label: string
+  secondary?: string
+  isDisabled?: boolean
+}
+
+export type SelectProps<T extends SelectOption = SelectOption> = {
+  // 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
+  shape?: 'rectangle' | 'oval'
+}
+
+// ── Component ──────────────────────────────────────────────────────────────────
+
+export function Select<T extends SelectOption = SelectOption>(props: SelectProps<T>) {
+  const hiddenInputRef = React.useRef<HTMLInputElement>(null)
+  const buttonRef = React.useRef<HTMLButtonElement>(null)
+  const helpTextId = React.useId()
+  const labelId = React.useId()
+
+  // Controlled state management
+  const [value, setValue] = HeadlessForm.useControlledState(props.value, props.defaultValue ?? null, props.onChange)
+
+  // Form validation
+  const {
+    validationMessage,
+    isInvalid: validationInvalid,
+    commitValidation
+  } = HeadlessForm.useValidation(
+    {
+      validate: props.validate,
+      value,
+      name: props.name,
+      isRequired: props.isRequired,
+      form: props.form,
+      focus() {
+        buttonRef.current?.focus()
+      }
+    },
+    hiddenInputRef
+  )
+
+  const isInvalid = props.isInvalid || validationInvalid
+  const hasWarning = Boolean(props.warningMessage) && !isInvalid
+
+  // Find the selected option for display
+  const selectedOption = React.useMemo(() => {
+    return props.options.find((option) => option.value === value) ?? null
+  }, [props.options, value])
+
+  const selectedKey = value != null ? toKey(value) : null
+
+  return (
+    <div className="relative">
+      {/* Hidden input for form submission */}
+      <HeadlessForm.HiddenInput ref={hiddenInputRef} name={props.name} value={value ?? ''} form={props.form} />
+
+      <FormFieldComponents.LabelRow label={props.label} cornerHint={props.cornerHint} labelId={labelId} />
+
+      <AriaSelect
+        aria-labelledby={props.label ? labelId : undefined}
+        aria-label={!props.label ? 'Select' : undefined}
+        selectedKey={selectedKey}
+        onSelectionChange={(key) => {
+          const newValue = fromKey(key, props.options)
+          setValue(newValue)
+          commitValidation()
+        }}
+        isDisabled={props.isDisabled || props.isReadonly}
+        isInvalid={isInvalid}
+        isRequired={props.isRequired}
+      >
+        {/* Select button */}
+        <Button
+          ref={buttonRef}
+          className={tw(
+            'relative overflow-hidden ring-1 shadow-sm transition-all duration-200 max-w-96',
+            props.shape === 'oval' ? 'rounded-full' : 'rounded',
+            'focus:outline-2 focus:-outline-offset-1',
+            (props.isDisabled || props.isReadonly) &&
+              'ring-neutral-200 bg-neutral-50 text-neutral-400 shadow-none cursor-not-allowed',
+            isInvalid && 'ring-negative-300 bg-negative-50 focus:outline-negative-500',
+            hasWarning && 'ring-notice-300 bg-notice-50 focus:outline-notice-500',
+            !isInvalid &&
+              !hasWarning &&
+              !props.isDisabled &&
+              !props.isReadonly &&
+              'ring-black/10 hover:ring-black/20 focus:outline-primary-500',
+            'w-full cursor-default py-2 pl-3 pr-10 text-left text-sm max-sm:text-base placeholder:text-neutral-400'
+          )}
+          aria-invalid={isInvalid || undefined}
+          aria-describedby={helpTextId}
+        >
+          {props.colored && selectedOption ? (
+            <div
+              className="absolute left-0 top-0 w-[3px] h-full"
+              style={{ backgroundColor: getColor(stringToNumber(String(selectedOption.value))) }}
+            />
+          ) : null}
+          {selectedOption ? (
+            <span className="block truncate text-sm min-h-5">{selectedOption.label}</span>
+          ) : (
+            <span className="block truncate text-sm min-h-5 text-neutral-400 italic">
+              {props.placeholder ?? 'Select an option'}
+            </span>
+          )}
+          <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+            <Icon name="chevron-up-down" className="h-4 w-4 text-neutral-400" />
+          </span>
+        </Button>
+
+        {/* Options dropdown */}
+        <AnimatedPopover offset={4} className="w-(--trigger-width)">
+          <FormFieldComponents.DropdownListBox
+            items={props.options.map((option, index) => ({ ...option, index, id: toKey(option.value) }))}
+            renderEmptyState={() => <div className="px-3 py-2 text-neutral-500 text-sm">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}
+                    isDisabled={option.isDisabled}
+                    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}
+                  isDisabled={option.isDisabled}
+                  color={color}
+                />
+              )
+            }}
+          </FormFieldComponents.DropdownListBox>
+        </AnimatedPopover>
+      </AriaSelect>
+
+      <FormFieldComponents.FormFieldHelpText
+        id={helpTextId}
+        isInvalid={isInvalid}
+        validationMessage={validationMessage}
+        hasWarning={hasWarning}
+        warningMessage={props.warningMessage}
+        helpText={props.helpText}
+      />
+    </div>
+  )
+}
+
+// ── Helpers ─────────────────────────────────────────────────────────────────────
+
+const NULL_KEY = '__select_null__'
+
+function toKey(value: string | number | null): string {
+  if (value === null) return NULL_KEY
+  return String(value)
+}
+
+function fromKey<T extends SelectOption>(key: React.Key | null, options: T[]): T['value'] | null {
+  if (key === null || key === undefined) return null
+  const keyStr = String(key)
+  if (keyStr === NULL_KEY) return null
+  const option = options.find((o) => toKey(o.value) === keyStr)
+  return option?.value ?? null
+}

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

@@ -0,0 +1,19 @@
+// From @maestro-js/components
+// Install with: pnpm maestro components:add spinner --directory app
+
+import { ProgressBar } from 'react-aria-components'
+import { Icon } from './icon'
+import { tw } from '../utils/tw'
+
+interface SpinnerProps {
+  className?: string
+  'aria-label'?: string
+}
+
+export function Spinner({ className, 'aria-label': ariaLabel = 'Loading…' }: SpinnerProps) {
+  return (
+    <ProgressBar isIndeterminate aria-label={ariaLabel}>
+      <Icon name="arrow-path" className={tw('animate-spin', className)} />
+    </ProgressBar>
+  )
+}