create-appraisejs 0.2.0-alpha.6 → 0.3.0-alpha.0

package/templates/default/src/app/(base)/template-steps/paramChip.tsx

@@ -1,213 +1,233 @@
-'use client'
-
-import type React from 'react'
-
-import { useState, useEffect } from 'react'
-import { PlusCircle } from 'lucide-react'
-import { Button } from '@/components/ui/button'
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
-import { Input } from '@/components/ui/input'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
-import { Badge } from '@/components/ui/badge'
-import { Label } from '@/components/ui/label'
-import { z } from 'zod'
-
-// Define the form schema
-const formSchema = z.object({
-  name: z.string().min(2, { message: 'Name must be at least 2 characters' }),
-  type: z.string().min(1, { message: 'Please select a type' }),
-  order: z.coerce.number().int().positive(),
-})
-
-type FormValues = z.infer<typeof formSchema>
-
-// Define the item type
-type Param = {
-  id: string
-  name: string
-  type: string
-  order: number
-}
-
-export default function ParamChip({
-  types,
-  onSubmit,
-  defaultValues,
-}: {
-  types: string[]
-  onSubmit: (value: Param[]) => void
-  defaultValues?: Param[]
-}) {
-  const [isOpen, setIsOpen] = useState(false)
-  const [items, setItems] = useState<Param[]>(defaultValues || [])
-  // Sync items when defaultValues changes (defer setState to avoid sync setState in effect)
-  useEffect(() => {
-    queueMicrotask(() => setItems(defaultValues || []))
-  }, [defaultValues])
-
-  // Form state
-  const [formValues, setFormValues] = useState<FormValues>({
-    name: '',
-    type: '',
-    order: 1,
-  })
-
-  // Form errors
-  const [errors, setErrors] = useState<Record<string, string>>({})
-
-  // Handle input change
-  const handleChange = (field: keyof FormValues, value: string) => {
-    setFormValues(prev => ({
-      ...prev,
-      [field]: field === 'order' ? Number(value) : value,
-    }))
-
-    // Clear error for this field when user types
-    if (errors[field]) {
-      setErrors(prev => {
-        const newErrors = { ...prev }
-        delete newErrors[field]
-        return newErrors
-      })
-    }
-  }
-
-  // Validate form
-  const validateForm = (): boolean => {
-    try {
-      formSchema.parse(formValues)
-      setErrors({})
-      return true
-    } catch (error) {
-      if (error instanceof z.ZodError) {
-        const newErrors: Record<string, string> = {}
-        error.errors.forEach(err => {
-          if (err.path[0]) {
-            newErrors[err.path[0] as string] = err.message
-          }
-        })
-        setErrors(newErrors)
-      }
-      return false
-    }
-  }
-
-  // Handle form submission
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault()
-
-    if (validateForm()) {
-      // Create a new item with the form values
-      const newItem = {
-        id: crypto.randomUUID(),
-        ...formValues,
-      }
-
-      // Add the new item to the items array
-      setItems([...items, newItem])
-
-      // Reset the form
-      setFormValues({
-        name: '',
-        type: '',
-        order: 1,
-      })
-
-      // Call the onSubmit callback with the new item
-      onSubmit([...items, newItem])
-
-      // Close the modal
-      setIsOpen(false)
-    }
-  }
-
-  // Handle removing an item
-  const removeItem = (id: string) => {
-    setItems(items.filter(item => item.id !== id))
-    onSubmit(items.filter(item => item.id !== id))
-  }
-
-  return (
-    <div className="space-y-6">
-      <Button type="button" onClick={() => setIsOpen(true)} variant="outline" size="icon">
-        <PlusCircle className="h-4 w-4" />
-      </Button>
-
-      {/* Display the added items as chips */}
-      <div className="flex flex-wrap gap-2">
-        {items.map(item => (
-          <Badge key={item.id} variant="secondary" className="px-3 py-1 text-sm">
-            {item.name}
-            <button
-              type="button"
-              className="ml-2 text-muted-foreground hover:text-foreground"
-              onClick={() => removeItem(item.id)}
-            >
-              ×
-            </button>
-          </Badge>
-        ))}
-        {items.length === 0 && <p className="text-sm text-muted-foreground">No items added yet.</p>}
-      </div>
-
-      {/* Modal with form */}
-      <Dialog open={isOpen} onOpenChange={setIsOpen}>
-        <DialogContent className="sm:max-w-[425px]">
-          <DialogHeader>
-            <DialogTitle>Add New Item</DialogTitle>
-          </DialogHeader>
-          <div className="space-y-4">
-            <div className="space-y-2">
-              <Label htmlFor="name">Name</Label>
-              <Input
-                id="name"
-                value={formValues.name}
-                onChange={e => handleChange('name', e.target.value)}
-                placeholder="Enter name"
-              />
-              {errors.name && <p className="text-sm font-medium text-destructive">{errors.name}</p>}
-            </div>
-
-            <div className="space-y-2">
-              <Label htmlFor="type">Type</Label>
-              <Select value={formValues.type} onValueChange={value => handleChange('type', value)}>
-                <SelectTrigger id="type">
-                  <SelectValue placeholder="Select a type" />
-                </SelectTrigger>
-                <SelectContent isEmpty={types.length === 0}>
-                  {types.map(type => (
-                    <SelectItem key={type} value={type}>
-                      {type}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-              {errors.type && <p className="text-sm font-medium text-destructive">{errors.type}</p>}
-            </div>
-
-            <div className="space-y-2">
-              <Label htmlFor="order">Order</Label>
-              <Input
-                id="order"
-                type="number"
-                min="1"
-                value={formValues.order}
-                onChange={e => handleChange('order', e.target.value)}
-              />
-              {errors.order && <p className="text-sm font-medium text-destructive">{errors.order}</p>}
-            </div>
-
-            <DialogFooter className="mt-4">
-              <Button type="button" variant="outline" onClick={() => setIsOpen(false)}>
-                Cancel
-              </Button>
-              <Button type="button" onClick={handleSubmit}>
-                Save
-              </Button>
-            </DialogFooter>
-          </div>
-        </DialogContent>
-      </Dialog>
-    </div>
-  )
-}
+'use client'
+
+import type React from 'react'
+
+import { useState, useEffect } from 'react'
+import { PlusCircle } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Badge } from '@/components/ui/badge'
+import { Label } from '@/components/ui/label'
+import { z } from 'zod'
+
+// Define the form schema
+const formSchema = z.object({
+  name: z.string().min(2, { message: 'Name must be at least 2 characters' }),
+  type: z.string().min(1, { message: 'Please select a type' }),
+  order: z.coerce.number().int().positive(),
+})
+
+type FormValues = z.infer<typeof formSchema>
+
+export type ParamChipValue = {
+  name: string
+  type: string
+  order: number
+}
+
+type ParamItem = ParamChipValue & {
+  id: string
+}
+
+export default function ParamChip({
+  types,
+  onSubmit,
+  defaultValues,
+}: {
+  types: string[]
+  onSubmit: (value: ParamChipValue[]) => void
+  defaultValues?: ParamChipValue[]
+}) {
+  const stripItemId = (item: ParamItem): ParamChipValue => ({
+    name: item.name,
+    type: item.type,
+    order: item.order,
+  })
+  const [isOpen, setIsOpen] = useState(false)
+  const [items, setItems] = useState<ParamItem[]>(() =>
+    (defaultValues || []).map(item => ({
+      id: crypto.randomUUID(),
+      ...item,
+    })),
+  )
+  // Sync items when defaultValues changes (defer setState to avoid sync setState in effect)
+  useEffect(() => {
+    queueMicrotask(() =>
+      setItems(
+        (defaultValues || []).map(item => ({
+          id: crypto.randomUUID(),
+          ...item,
+        })),
+      ),
+    )
+  }, [defaultValues])
+
+  // Form state
+  const [formValues, setFormValues] = useState<FormValues>({
+    name: '',
+    type: '',
+    order: 1,
+  })
+
+  // Form errors
+  const [errors, setErrors] = useState<Record<string, string>>({})
+
+  // Handle input change
+  const handleChange = (field: keyof FormValues, value: string) => {
+    setFormValues(prev => ({
+      ...prev,
+      [field]: field === 'order' ? Number(value) : value,
+    }))
+
+    // Clear error for this field when user types
+    if (errors[field]) {
+      setErrors(prev => {
+        const newErrors = { ...prev }
+        delete newErrors[field]
+        return newErrors
+      })
+    }
+  }
+
+  // Validate form
+  const validateForm = (): boolean => {
+    try {
+      formSchema.parse(formValues)
+      setErrors({})
+      return true
+    } catch (error) {
+      if (error instanceof z.ZodError) {
+        const newErrors: Record<string, string> = {}
+        error.errors.forEach(err => {
+          if (err.path[0]) {
+            newErrors[err.path[0] as string] = err.message
+          }
+        })
+        setErrors(newErrors)
+      }
+      return false
+    }
+  }
+
+  // Handle form submission
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+
+    if (validateForm()) {
+      // Create a new item with the form values
+      const newItem = {
+        id: crypto.randomUUID(),
+        ...formValues,
+      }
+
+      // Add the new item to the items array
+      setItems([...items, newItem])
+
+      // Reset the form
+      setFormValues({
+        name: '',
+        type: '',
+        order: 1,
+      })
+
+      // Call the onSubmit callback with the new item
+      onSubmit([...items, newItem].map(stripItemId))
+
+      // Close the modal
+      setIsOpen(false)
+    }
+  }
+
+  // Handle removing an item
+  const removeItem = (id: string) => {
+    const nextItems = items.filter(item => item.id !== id)
+    setItems(nextItems)
+    onSubmit(nextItems.map(stripItemId))
+  }
+
+  return (
+    <div className="space-y-6">
+      <Button type="button" onClick={() => setIsOpen(true)} variant="outline" size="icon">
+        <PlusCircle className="h-4 w-4" />
+      </Button>
+
+      {/* Display the added items as chips */}
+      <div className="flex flex-wrap gap-2">
+        {items.map(item => (
+          <Badge key={item.id} variant="secondary" className="px-3 py-1 text-sm">
+            {item.name}
+            <button
+              type="button"
+              className="ml-2 text-muted-foreground hover:text-foreground"
+              onClick={() => removeItem(item.id)}
+            >
+              ×
+            </button>
+          </Badge>
+        ))}
+        {items.length === 0 && <p className="text-sm text-muted-foreground">No items added yet.</p>}
+      </div>
+
+      {/* Modal with form */}
+      <Dialog open={isOpen} onOpenChange={setIsOpen}>
+        <DialogContent className="sm:max-w-[425px]">
+          <DialogHeader>
+            <DialogTitle>Add New Item</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="name">Name</Label>
+              <Input
+                id="name"
+                value={formValues.name}
+                onChange={e => handleChange('name', e.target.value)}
+                placeholder="Enter name"
+              />
+              {errors.name && <p className="text-sm font-medium text-destructive">{errors.name}</p>}
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="type">Type</Label>
+              <Select value={formValues.type} onValueChange={value => handleChange('type', value)}>
+                <SelectTrigger id="type">
+                  <SelectValue placeholder="Select a type" />
+                </SelectTrigger>
+                <SelectContent isEmpty={types.length === 0}>
+                  {types.map(type => (
+                    <SelectItem key={type} value={type}>
+                      {type}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              {errors.type && <p className="text-sm font-medium text-destructive">{errors.type}</p>}
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="order">Order</Label>
+              <Input
+                id="order"
+                type="number"
+                min="1"
+                value={formValues.order}
+                onChange={e => handleChange('order', e.target.value)}
+              />
+              {errors.order && <p className="text-sm font-medium text-destructive">{errors.order}</p>}
+            </div>
+
+            <DialogFooter className="mt-4">
+              <Button type="button" variant="outline" onClick={() => setIsOpen(false)}>
+                Cancel
+              </Button>
+              <Button type="button" onClick={handleSubmit}>
+                Save
+              </Button>
+            </DialogFooter>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}

package/templates/default/src/app/(base)/template-steps/template-step-form.test.tsx

@@ -0,0 +1,132 @@
+// @vitest-environment jsdom
+
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { StepParameterType } from '@prisma/client'
+import { describe, expect, it, vi } from 'vitest'
+
+import { TemplateStepForm } from './template-step-form'
+
+const { push, toast } = vi.hoisted(() => ({
+  push: vi.fn(),
+  toast: vi.fn(),
+}))
+
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({
+    push,
+  }),
+}))
+
+vi.mock('@/hooks/use-toast', () => ({
+  toast,
+}))
+
+vi.mock('./paramChip', () => ({
+  __esModule: true,
+  default: ({
+    onSubmit,
+  }: {
+    onSubmit: (value: Array<{ name: string; type: StepParameterType; order: number }>) => void
+  }) => (
+    <button type="button" onClick={() => onSubmit([{ name: 'target', type: StepParameterType.STRING, order: 1 }])}>
+      Apply Params
+    </button>
+  ),
+}))
+
+vi.mock('@uiw/react-codemirror', () => ({
+  __esModule: true,
+  default: ({ value }: { value: string }) => <div>{value}</div>,
+  EditorView: { lineWrapping: {} },
+}))
+
+vi.mock('@uiw/codemirror-extensions-langs', () => ({
+  langs: {
+    ts: () => ({}),
+  },
+}))
+
+vi.mock('@uiw/codemirror-theme-github', () => ({
+  githubDark: {},
+}))
+
+vi.mock('@/components/ui/select', async () => {
+  const React = await import('react')
+  const SelectContext = React.createContext<{ value?: string; onValueChange: (value: string) => void }>({
+    value: '',
+    onValueChange: () => {},
+  })
+
+  return {
+    Select: ({
+      value,
+      onValueChange,
+      children,
+    }: {
+      value?: string
+      onValueChange: (value: string) => void
+      children: React.ReactNode
+    }) => <SelectContext.Provider value={{ value, onValueChange }}>{children}</SelectContext.Provider>,
+    SelectTrigger: ({ id, children }: { id?: string; children: React.ReactNode }) => <div id={id}>{children}</div>,
+    SelectValue: ({ placeholder }: { placeholder?: string }) => <span>{placeholder}</span>,
+    SelectContent: ({ children }: { children: React.ReactNode }) => {
+      const { value, onValueChange } = React.useContext(SelectContext)
+      return (
+        <select aria-label="Select" value={value || ''} onChange={event => onValueChange(event.target.value)}>
+          <option value="">Select</option>
+          {children}
+        </select>
+      )
+    },
+    SelectItem: ({ value, children }: { value: string; children: React.ReactNode }) => (
+      <option value={value}>{children}</option>
+    ),
+  }
+})
+
+describe('TemplateStepForm', () => {
+  it('submits valid values and navigates back to template steps', async () => {
+    const user = userEvent.setup()
+    const onSubmitAction = vi.fn().mockResolvedValue({ status: 200 })
+
+    render(
+      <TemplateStepForm
+        successTitle="Template Step Created"
+        successMessage="Created successfully"
+        onSubmitAction={onSubmitAction}
+        templateStepGroups={[{ id: 'group-1', name: 'Actions' }]}
+      />,
+    )
+
+    const selects = screen.getAllByRole('combobox', { name: 'Select' })
+
+    await user.type(screen.getByLabelText('Name'), 'Click button')
+    await user.type(screen.getByLabelText('Description'), 'Clicks a button')
+    await user.selectOptions(selects[0], 'MOUSE')
+    await user.selectOptions(selects[1], 'group-1')
+    await user.selectOptions(selects[2], 'ACTION')
+    fireEvent.change(screen.getByLabelText('Signature'), { target: { value: 'click {string}' } })
+    await user.click(screen.getByRole('button', { name: 'Apply Params' }))
+    await user.click(screen.getByRole('button', { name: 'Save' }))
+
+    await waitFor(() => {
+      expect(onSubmitAction).toHaveBeenCalledWith(
+        undefined,
+        expect.objectContaining({
+          name: 'Click button',
+          description: 'Clicks a button',
+          icon: 'MOUSE',
+          templateStepGroupId: 'group-1',
+          type: 'ACTION',
+          signature: 'click {string}',
+          params: [{ name: 'target', type: StepParameterType.STRING, order: 1 }],
+          functionDefinition: `When('click {string}', async function(this:CustomWorld, target: string){});`,
+        }),
+        undefined,
+      )
+    })
+
+    expect(push).toHaveBeenCalledWith('/template-steps')
+  })
+})