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

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

@@ -0,0 +1,252 @@
+// From @maestro-js/components
+// Install with: pnpm maestro components:add pdf-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'
+import { Pdf } from './pdf'
+
+export type PdfInputProps = {
+  // 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: PdfInputPreviewProps) => 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
+
+  maxSize?: number // in bytes
+}
+
+export interface PdfInputPreviewProps {
+  fileUrl: string
+  isDisabled: boolean
+  onChange(value: string | null | File): unknown
+  inputId: string
+  name: string | undefined
+  inputRef: React.Ref<HTMLInputElement>
+}
+
+export function PdfInput(props: PdfInputProps) {
+  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, 'application/pdf')
+    }
+    return null
+  }, [])
+
+  // 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 PdfPreview = props.renderPreview ?? DefaultPdfInputPreview
+
+  const emptyState = props.emptyState ?? (
+    <div className="px-6 py-12">
+      <Icon name="document" 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">PDF</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(
+                  'pdf-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 ? (
+                  PdfPreview({
+                    isDisabled: !!props.isDisabled,
+                    fileUrl: files[0]!.fileUrl,
+                    onChange: (v) => {
+                      setValue(v)
+                      commitValidation()
+                    },
+                    inputId,
+                    inputRef,
+                    name: props.name
+                  })
+                ) : (
+                  <HeadlessFileInput.DropZone
+                    inputRef={inputRef}
+                    accept="application/pdf"
+                    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 a PDF</span>
+      </div>
+    </div>
+  )
+}
+
+export function DefaultPdfInputPreview({ name, fileUrl, inputRef, isDisabled, onChange, inputId }: PdfInputPreviewProps) {
+  return (
+    <>
+      <HeadlessFileInput.DropZone
+        inputRef={inputRef}
+        accept="application/pdf"
+        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"
+              />
+              <Pdf src={fileUrl} className="w-full min-h-96 rounded-md border-0" />
+            </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/pdf.tsx

@@ -0,0 +1,89 @@
+// From @maestro-js/components
+// Install with: pnpm maestro components:add pdf --directory app
+
+import React from 'react'
+import { usePdf } from 'react-pdf-hook'
+import { tw } from '../utils/tw'
+import { usePagination } from '../utils/use-pagination'
+import { Icon } from './icon'
+import pdfjs from './helpers/pdf-dist.client'
+
+export interface PdfProps extends React.ComponentProps<'div'> {
+  src: string
+  onDownload?: () => void
+}
+
+export function Pdf({ src, onDownload, className, ...props }: PdfProps) {
+  const containerRef = React.useRef<HTMLDivElement>(null)
+  const [pageNumber, setPageNumber] = React.useState(0)
+
+  const { pdf, canvasRef } = usePdf(pdfjs, src, pageNumber + 1, { width: containerRef.current?.clientWidth })
+
+  const numPages = pdf?.numPages
+
+  return (
+    <div ref={containerRef} className={tw('relative overflow-hidden border border-neutral-300', className)} {...props}>
+      <canvas
+        ref={canvasRef}
+        style={{ display: !pdf ? 'none' : undefined, maxWidth: '100%' }}
+        className={tw('pdf-page', onDownload && 'cursor-pointer')}
+        onClick={onDownload}
+      />
+      {!pdf || !containerRef.current?.clientWidth ? <div className="w-full h-full m-auto rounded" /> : null}
+      {numPages && numPages > 1 ? (
+        <div className="flex absolute bottom-5 w-full justify-center">
+          <Pagination page={pageNumber} setPageNumber={setPageNumber} count={numPages} />
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+Pdf.displayName = 'Pdf'
+
+function Pagination({ page, count, setPageNumber }: { page: number; count: number; setPageNumber: (n: number) => void }) {
+  const pages = usePagination({ currentPage: page, pageCount: count })
+
+  return (
+    <div className="inline-flex items-center gap-1 pointer-events-auto">
+      <button
+        type="button"
+        onClick={() => setPageNumber(page > 0 ? page - 1 : 0)}
+        disabled={page === 0}
+        className="p-1 rounded bg-white border border-neutral-300 hover:bg-neutral-50 disabled:opacity-50 disabled:cursor-not-allowed"
+        aria-label="Previous page"
+      >
+        <Icon name="chevron-left" className="h-4 w-4" aria-hidden="true" />
+      </button>
+
+      {pages.map((p, i) => (
+        <button
+          type="button"
+          key={p.readonly ? `ellipsis-${i}` : p.label}
+          onClick={() => setPageNumber(p.readonly ? page : (p.value as number))}
+          disabled={p.readonly}
+          className={tw(
+            'min-w-[28px] bg-white h-7 px-2 text-xs font-medium rounded border transition-colors',
+            p.selected
+              ? 'bg-primary-500 text-white border-primary-500'
+              : p.readonly
+                ? 'border-transparent cursor-default'
+                : 'border-neutral-300 hover:bg-neutral-50'
+          )}
+        >
+          {p.label}
+        </button>
+      ))}
+
+      <button
+        type="button"
+        onClick={() => setPageNumber(page < count - 1 ? page + 1 : page)}
+        disabled={page === count - 1}
+        className="p-1 rounded bg-white border border-neutral-300 hover:bg-neutral-50 disabled:opacity-50 disabled:cursor-not-allowed"
+        aria-label="Next page"
+      >
+        <Icon name="chevron-right" className="h-4 w-4" aria-hidden="true" />
+      </button>
+    </div>
+  )
+}

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

@@ -0,0 +1,147 @@
+import * as React from 'react'
+import { Link, useNavigate, useFetcher } from 'react-router'
+import { Avatar } from './avatar'
+import { Icon } from './icon'
+import { ImageGrid } from './image-grid'
+import { LikeButton } from './like-button'
+import { Menu } from './menu'
+import { AlertDialog } from './alert-dialog'
+import { Button } from './button'
+import { CsrfHiddenInput } from '../features/csrf-hidden-input'
+import { useProfile } from '../utils/use-profile'
+
+export interface PostCardProps {
+  post: {
+    id: number
+    content: string
+    images: string[]
+    profileId: number
+    createdDate: string
+    likeCount: number
+    replyCount: number
+    likedByCurrentUser: boolean
+    hiddenDate: string | null
+    authorUsername: string | null
+    authorProfileImage: string | null
+  }
+  channelSlug: string
+  detail?: boolean
+}
+
+function formatRelativeTime(dateString: string): string {
+  const now = Date.now()
+  const then = new Date(dateString).getTime()
+  const seconds = Math.floor((now - then) / 1000)
+
+  if (seconds < 60) return 'just now'
+  const minutes = Math.floor(seconds / 60)
+  if (minutes < 60) return `${minutes}m ago`
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) return `${hours}h ago`
+  const days = Math.floor(hours / 24)
+  if (days < 30) return `${days}d ago`
+  return new Date(dateString).toLocaleDateString()
+}
+
+export function PostCard({ post, channelSlug, detail }: PostCardProps) {
+  const [showDeleteDialog, setShowDeleteDialog] = React.useState(false)
+  const fetcher = useFetcher()
+  const profile = useProfile()
+
+  if (post.hiddenDate) {
+    return (
+      <div className="rounded-lg border border-neutral-200 bg-neutral-50 p-4 text-neutral-400">
+        This post has been deleted.
+      </div>
+    )
+  }
+
+  const navigate = useNavigate()
+  const href = `/c/${channelSlug}/post/${post.id}`
+  const displayName = post.authorUsername ?? `User #${post.profileId}`
+  const isAuthor = profile != null && profile.profileId === post.profileId
+
+  return (
+    <div
+      className={
+        detail
+          ? 'rounded-lg border border-neutral-200 bg-white p-4'
+          : 'cursor-pointer rounded-lg border border-neutral-200 bg-white p-4 transition-colors hover:border-neutral-300 hover:shadow-sm'
+      }
+      onClick={detail ? undefined : () => navigate(href)}
+    >
+      <div className="flex items-center gap-2">
+        <Avatar src={post.authorProfileImage ?? undefined} alt={displayName} className="size-6 text-[10px]" />
+        <p className="text-sm text-neutral-500">
+          {displayName} &middot; {formatRelativeTime(post.createdDate)}
+        </p>
+        {isAuthor && (
+          <div className="ml-auto" onClick={(e) => e.stopPropagation()}>
+            <Menu
+              Button={
+                <button type="button" className="rounded p-1 text-neutral-400 hover:bg-neutral-100 hover:text-neutral-600">
+                  <Icon name="ellipsis-vertical" className="size-5" />
+                </button>
+              }
+            >
+              <Menu.Item onClick={() => setShowDeleteDialog(true)}>
+                <Icon name="trash" className="mr-2 size-4 text-negative-500" />
+                <span className="text-negative-600">Delete</span>
+              </Menu.Item>
+            </Menu>
+            <AlertDialog
+              title="Delete post?"
+              description="This action cannot be undone. The post will be hidden from everyone."
+              variant="negative"
+              isOpen={showDeleteDialog}
+              onOpenChange={setShowDeleteDialog}
+            >
+              {({ close }) => (
+                <fetcher.Form method="post" action={`/api/hide-post/${post.id}`} className="flex-1 w-full">
+                  <CsrfHiddenInput />
+                  <div className="flex w-full gap-2">
+                    <AlertDialog.CancelButton />
+
+                    <Button
+                      type="submit"
+                      color="negative"
+                      variant="soft"
+                      shape="rectangle"
+                      fullWidth
+                      onClick={() => {
+                        requestAnimationFrame(() => close())
+                      }}
+                    >
+                      Delete
+                    </Button>
+                  </div>
+                </fetcher.Form>
+              )}
+            </AlertDialog>
+          </div>
+        )}
+      </div>
+      {post.images.length > 0 && <ImageGrid images={post.images} className="mt-2 mb-3" />}
+      {detail ? (
+        <div className="mt-1 whitespace-pre-wrap text-neutral-900">{post.content}</div>
+      ) : (
+        <Link to={href} className="mt-1 line-clamp-3 text-neutral-900 hover:underline" onClick={(e) => e.stopPropagation()}>
+          {post.content}
+        </Link>
+      )}
+      <div className="mt-3 flex items-center gap-4 text-sm text-neutral-500" onClick={(e) => e.stopPropagation()}>
+        <LikeButton postId={post.id} liked={post.likedByCurrentUser} count={post.likeCount} compact />
+        <Link to={href} className="hover:text-primary-500">
+          {post.replyCount} {post.replyCount === 1 ? 'reply' : 'replies'}
+        </Link>
+        <Link
+          to={profile != null ? `${href}?reply` : '/login'}
+          className="ml-auto flex items-center gap-1 hover:text-primary-500"
+        >
+          <Icon name="chat-bubble-left" className="size-4" />
+          Reply
+        </Link>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,166 @@
+import * as React from 'react'
+import { Button, type ButtonProps } from './button'
+import { HeadlessFileInput } from './headless-file-input'
+import { Icon } from './icon'
+import { ImageGrid } from './image-grid'
+import { tw } from '../utils/tw'
+
+type PostComposerContext = {
+  content: string
+  setContent: React.Dispatch<React.SetStateAction<string>>
+  maxImages: number
+  fileInputId: string
+}
+
+const Context = React.createContext<PostComposerContext | null>(null)
+
+function usePostComposer() {
+  const ctx = React.useContext(Context)
+  if (!ctx) throw new Error('PostComposer compound components must be used within <PostComposer>')
+  return ctx
+}
+
+// ── Root ─────────────────────────────────────────────────────────────────────
+
+function Root({
+  children,
+  maxImages = 4,
+  imageName = 'images',
+  imageAccept = 'image/*'
+}: {
+  children: React.ReactNode
+  maxImages?: number
+  imageName?: string
+  imageAccept?: string
+}) {
+  const [content, setContent] = React.useState('')
+  const [images, setImages] = React.useState<(string | File)[]>([])
+  const fileInputId = React.useId()
+
+  return (
+    <Context.Provider value={{ content, setContent, maxImages, fileInputId }}>
+      <HeadlessFileInput value={images} onChange={setImages} multiple>
+        {children}
+        <HeadlessFileInput.Input
+          id={fileInputId}
+          name={imageName}
+          accept={imageAccept}
+          style={{ position: 'absolute', opacity: 0, width: 0, height: 0, overflow: 'hidden' }}
+        />
+      </HeadlessFileInput>
+    </Context.Provider>
+  )
+}
+
+// ── Textarea ─────────────────────────────────────────────────────────────────
+
+function Textarea({
+  name = 'content',
+  placeholder,
+  rows = 3,
+  autoFocus,
+  className
+}: {
+  name?: string
+  placeholder?: string
+  rows?: number
+  autoFocus?: boolean
+  className?: string
+}) {
+  const { content, setContent } = usePostComposer()
+
+  return (
+    <div className={tw('grid', className)}>
+      <p
+        className="pointer-events-none col-span-full row-span-full m-0 overflow-hidden whitespace-pre-wrap border-0 px-4 py-2 text-sm text-transparent"
+        style={{ minHeight: `${rows * 1.5}rem` }}
+        aria-hidden="true"
+      >
+        {content ? content + ' ' : ' '}
+      </p>
+      <textarea
+        name={name}
+        value={content}
+        onChange={(e) => setContent(e.target.value)}
+        placeholder={placeholder}
+        required
+        autoFocus={autoFocus}
+        rows={rows}
+        className="col-span-full row-span-full w-full resize-none overflow-hidden border-0 bg-transparent px-4 py-2 text-sm text-neutral-900 placeholder:text-neutral-400 focus:ring-0 focus:outline-none"
+      />
+    </div>
+  )
+}
+
+// ── Image Preview ────────────────────────────────────────────────────────────
+
+function ImagePreview({ className }: { className?: string }) {
+  return (
+    <HeadlessFileInput.Preview>
+      {(files) =>
+        files.length > 0 && (
+          <div className={className}>
+            <ImageGrid
+              images={files.map((f) => f.fileUrl)}
+              renderOverlay={(i) => (
+                <button
+                  type="button"
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    files[i]?.remove()
+                  }}
+                  className="absolute top-1.5 right-1.5 rounded-full bg-black/50 p-1 transition-colors hover:bg-red-600"
+                >
+                  <Icon name="x-mark" className="h-3.5 w-3.5 text-white" />
+                </button>
+              )}
+            />
+          </div>
+        )
+      }
+    </HeadlessFileInput.Preview>
+  )
+}
+
+// ── Image Trigger ────────────────────────────────────────────────────────────
+
+function ImageTrigger({ className }: { className?: string }) {
+  const { maxImages, fileInputId } = usePostComposer()
+
+  return (
+    <HeadlessFileInput.Preview>
+      {(files) =>
+        files.length < maxImages && (
+          <label
+            htmlFor={fileInputId}
+            className={tw('cursor-pointer text-neutral-400 transition-colors hover:text-neutral-600', className)}
+          >
+            <Icon name="photo" className="h-5 w-5" />
+          </label>
+        )
+      }
+    </HeadlessFileInput.Preview>
+  )
+}
+
+// ── Submit Button ────────────────────────────────────────────────────────────
+
+function SubmitButton({
+  children = 'Post',
+  ...props
+}: Omit<ButtonProps, 'type'> & { children?: React.ReactNode }) {
+  return (
+    <Button type="submit" variant="contained" color="primary" size="sm" {...props}>
+      {children}
+    </Button>
+  )
+}
+
+// ── Export ────────────────────────────────────────────────────────────────────
+
+export const PostComposer = Object.assign(Root, {
+  Textarea,
+  ImagePreview,
+  ImageTrigger,
+  SubmitButton
+})