create-appraisejs 0.2.0 → 0.3.0-alpha.1

package/templates/starter/src/components/diagram/button-edge.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import { BaseEdge, EdgeLabelRenderer, getBezierPath, useReactFlow, type EdgeProps } from '@xyflow/react'
+import { Trash2 } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+
+export default function ButtonEdge({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  style = {},
+  markerEnd,
+}: EdgeProps) {
+  const { setEdges } = useReactFlow()
+  const [edgePath, labelX, labelY] = getBezierPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+  })
+
+  const onEdgeClick = () => {
+    setEdges(edges => edges.filter(edge => edge.id !== id))
+  }
+
+  return (
+    <>
+      <BaseEdge path={edgePath} markerEnd={markerEnd} style={style} />
+      <EdgeLabelRenderer>
+        <div
+          className={`nodrag nopan pointer-events-auto absolute flex items-center justify-center`}
+          style={{
+            transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+          }}
+        >
+          <Button
+            variant="outline"
+            onClick={onEdgeClick}
+            title="Delete Edge"
+            size="icon"
+            className="h-7 w-7 rounded-full p-0"
+          >
+            <Trash2 className="text-muted-foreground" />
+          </Button>
+        </div>
+      </EdgeLabelRenderer>
+    </>
+  )
+}

package/templates/starter/src/components/diagram/dynamic-parameters-helpers.test.ts

@@ -0,0 +1,83 @@
+import { StepParameterType } from '@prisma/client'
+import { describe, expect, it } from 'vitest'
+
+import {
+  formatDynamicParameterValues,
+  getDynamicParameterInitialValues,
+  getInitialSelectedLocatorGroups,
+  getLocatorsForGroup,
+  validateDynamicParameters,
+} from './dynamic-parameters-helpers'
+
+describe('dynamic-parameters helpers', () => {
+  const templateStepParams = [
+    { name: 'count', type: StepParameterType.NUMBER, order: 1 },
+    { name: 'title', type: StepParameterType.STRING, order: 2 },
+    { name: 'startDate', type: StepParameterType.DATE, order: 3 },
+    { name: 'enabled', type: StepParameterType.BOOLEAN, order: 4 },
+    { name: 'target', type: StepParameterType.LOCATOR, order: 5 },
+  ] as never
+
+  it('builds initial values from persisted parameter input', () => {
+    const values = getDynamicParameterInitialValues(templateStepParams, [
+      { name: 'count', value: '4', type: StepParameterType.NUMBER, order: 1 },
+      { name: 'enabled', value: 'true', type: StepParameterType.BOOLEAN, order: 4 },
+      { name: 'target', value: 'loginButton', type: StepParameterType.LOCATOR, order: 5 },
+    ])
+
+    expect(values.count).toBe(4)
+    expect(values.enabled).toBe(true)
+    expect(values.target).toBe('loginButton')
+    expect(values.title).toBe('')
+  })
+
+  it('derives locator groups from selected locator names', () => {
+    const selectedGroups = getInitialSelectedLocatorGroups(
+      templateStepParams,
+      [{ name: 'target', value: 'loginButton', type: StepParameterType.LOCATOR, order: 5 }],
+      [{ id: 'locator-1', name: 'loginButton', locatorGroupId: 'group-1' }] as never,
+    )
+
+    expect(selectedGroups).toEqual({ target: 'group-1' })
+    expect(getLocatorsForGroup([{ id: 'locator-1', locatorGroupId: 'group-1' }] as never, 'group-1')).toHaveLength(1)
+  })
+
+  it('validates required locator and scalar fields when default values are disabled', () => {
+    const errors = validateDynamicParameters(
+      templateStepParams,
+      {
+        count: 0,
+        title: '',
+        startDate: new Date('2024-01-01T00:00:00.000Z'),
+        enabled: false,
+        target: '',
+      },
+      {},
+      false,
+    )
+
+    expect(errors).toEqual({
+      count: 'This field is required',
+      title: 'This field is required',
+      target: 'Locator group is required',
+    })
+  })
+
+  it('formats dynamic values into the submit shape', () => {
+    const values = formatDynamicParameterValues(templateStepParams, {
+      count: 5,
+      title: 'Smoke',
+      startDate: new Date('2024-01-01T00:00:00.000Z'),
+      enabled: true,
+      target: 'loginButton',
+    })
+
+    expect(values).toEqual([
+      expect.objectContaining({ name: 'count', value: '5' }),
+      expect.objectContaining({ name: 'title', value: 'Smoke' }),
+      expect.objectContaining({ name: 'startDate', value: expect.any(String) }),
+      expect.objectContaining({ name: 'enabled', value: 'true' }),
+      expect.objectContaining({ name: 'target', value: 'loginButton' }),
+    ])
+  })
+})

package/templates/starter/src/components/diagram/dynamic-parameters-helpers.ts

@@ -0,0 +1,158 @@
+import { format } from 'date-fns'
+import { StepParameterType, type Locator, type TemplateStepParameter } from '@prisma/client'
+
+type DynamicParameterValue = string | number | boolean | Date
+
+type DynamicParameterInput = {
+  name: string
+  value: string
+  type: StepParameterType
+  order: number
+}
+
+export type DynamicParameterValuesMap = Record<string, DynamicParameterValue>
+
+function getDefaultParameterValue(type: StepParameterType): DynamicParameterValue {
+  switch (type) {
+    case StepParameterType.NUMBER:
+      return 0
+    case StepParameterType.STRING:
+    case StepParameterType.LOCATOR:
+      return ''
+    case StepParameterType.DATE:
+      return new Date()
+    case StepParameterType.BOOLEAN:
+      return false
+  }
+}
+
+function parseInitialParameterValue(type: StepParameterType, value: string): DynamicParameterValue {
+  switch (type) {
+    case StepParameterType.NUMBER:
+      return Number(value)
+    case StepParameterType.STRING:
+    case StepParameterType.LOCATOR:
+      return value
+    case StepParameterType.DATE: {
+      const date = new Date(value)
+      return Number.isNaN(date.getTime()) ? new Date() : date
+    }
+    case StepParameterType.BOOLEAN:
+      return value === 'true'
+  }
+}
+
+export function getDynamicParameterInitialValues(
+  templateStepParams: TemplateStepParameter[],
+  initialParameterValues?: DynamicParameterInput[],
+): DynamicParameterValuesMap {
+  const initialValueMap = Object.fromEntries(
+    (initialParameterValues ?? []).map(parameter => [parameter.name, parameter]),
+  )
+
+  return Object.fromEntries(
+    templateStepParams.map(parameter => {
+      const initialValue = initialValueMap[parameter.name]
+      return [
+        parameter.name,
+        initialValue
+          ? parseInitialParameterValue(parameter.type, initialValue.value)
+          : getDefaultParameterValue(parameter.type),
+      ]
+    }),
+  )
+}
+
+export function getInitialSelectedLocatorGroups(
+  templateStepParams: TemplateStepParameter[],
+  initialParameterValues: DynamicParameterInput[] | undefined,
+  locators: Array<Pick<Locator, 'id' | 'name' | 'locatorGroupId'>>,
+) {
+  const initialValueMap = Object.fromEntries((initialParameterValues ?? []).map(parameter => [parameter.name, parameter]))
+
+  return Object.fromEntries(
+    templateStepParams.flatMap(parameter => {
+      if (parameter.type !== StepParameterType.LOCATOR) {
+        return []
+      }
+
+      const locatorName = initialValueMap[parameter.name]?.value
+      if (!locatorName) {
+        return []
+      }
+
+      const locator = locators.find(locatorRow => locatorRow.name === locatorName)
+      return locator?.locatorGroupId ? [[parameter.name, locator.locatorGroupId]] : []
+    }),
+  )
+}
+
+export function validateDynamicParameters(
+  templateStepParams: TemplateStepParameter[],
+  values: DynamicParameterValuesMap,
+  selectedLocatorGroups: Record<string, string>,
+  defaultValueInput: boolean,
+) {
+  if (defaultValueInput) {
+    return {}
+  }
+
+  const errors: Record<string, string> = {}
+
+  templateStepParams.forEach(parameter => {
+    const value = values[parameter.name]
+
+    if (parameter.type === StepParameterType.LOCATOR) {
+      if (!selectedLocatorGroups[parameter.name]) {
+        errors[parameter.name] = 'Locator group is required'
+      } else if (!value) {
+        errors[parameter.name] = 'Locator is required'
+      }
+      return
+    }
+
+    if ((parameter.type === StepParameterType.STRING || parameter.type === StepParameterType.NUMBER) && !value) {
+      errors[parameter.name] = 'This field is required'
+    }
+  })
+
+  return errors
+}
+
+export function formatDynamicParameterValues(
+  templateStepParams: TemplateStepParameter[],
+  values: DynamicParameterValuesMap,
+): DynamicParameterInput[] {
+  return templateStepParams.map(parameter => {
+    const value = values[parameter.name]
+
+    let formattedValue = ''
+    switch (parameter.type) {
+      case StepParameterType.NUMBER:
+        formattedValue = value !== undefined && value !== null ? String(value) : ''
+        break
+      case StepParameterType.STRING:
+      case StepParameterType.LOCATOR:
+        formattedValue = value !== undefined && value !== null ? String(value) : ''
+        break
+      case StepParameterType.DATE:
+        formattedValue =
+          value instanceof Date && !Number.isNaN(value.getTime()) ? format(value, 'PPP') : ''
+        break
+      case StepParameterType.BOOLEAN:
+        formattedValue = value !== undefined && value !== null ? String(value) : ''
+        break
+    }
+
+    return {
+      name: parameter.name,
+      value: formattedValue,
+      type: parameter.type,
+      order: parameter.order,
+    }
+  })
+}
+
+export function getLocatorsForGroup(locators: Array<Pick<Locator, 'id' | 'name' | 'locatorGroupId'>>, groupId: string) {
+  return locators.filter(locator => locator.locatorGroupId === groupId)
+}

package/templates/starter/src/components/diagram/dynamic-parameters.tsx

@@ -0,0 +1,350 @@
+'use client'
+
+import { useState, useMemo, forwardRef, useImperativeHandle, useEffect } from 'react'
+import { Calendar } from '@/components/ui/calendar'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { CalendarIcon } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { StepParameterType, TemplateStepParameter, type Locator, type LocatorGroup } from '@prisma/client'
+import { format } from 'date-fns'
+import ErrorMessage from '@/components/form/error-message'
+import {
+  formatDynamicParameterValues,
+  getDynamicParameterInitialValues,
+  getInitialSelectedLocatorGroups,
+  getLocatorsForGroup,
+  validateDynamicParameters,
+} from './dynamic-parameters-helpers'
+
+type DynamicParameterValue = string | number | boolean | Date
+
+type DynamicFormFieldsProps = {
+  templateStepParams: TemplateStepParameter[]
+  locators: Array<Pick<Locator, 'id' | 'name' | 'locatorGroupId'>>
+  locatorGroups: Array<Pick<LocatorGroup, 'id' | 'name'>>
+  defaultValueInput?: boolean
+  onChange?: (
+    values: {
+      name: string
+      value: string
+      type: StepParameterType
+      order: number
+    }[],
+  ) => void
+  initialParameterValues?: {
+    name: string
+    value: string
+      type: StepParameterType
+      order: number
+    }[]
+}
+
+export interface DynamicFormFieldsRef {
+  validate: () => boolean
+}
+
+const DynamicFormFields = forwardRef<DynamicFormFieldsRef, DynamicFormFieldsProps>((props, ref) => {
+  const {
+    templateStepParams,
+    locators,
+    locatorGroups,
+    defaultValueInput = false,
+    onChange,
+    initialParameterValues,
+  } = props
+
+  const resetKey = useMemo(() => {
+    return JSON.stringify({
+      params: templateStepParams.map(p => ({ name: p.name, type: p.type })),
+      initialParameterValues,
+    })
+  }, [templateStepParams, initialParameterValues])
+
+  // Create initial values only once when component mounts
+  const initialValues = useMemo(
+    () => getDynamicParameterInitialValues(templateStepParams, initialParameterValues),
+    [templateStepParams, initialParameterValues],
+  )
+
+  // Derive initial locator groups from initialParameterValues (locator name -> group id via locators lookup)
+  const initialSelectedLocatorGroups = useMemo(
+    () => getInitialSelectedLocatorGroups(templateStepParams, initialParameterValues, locators),
+    [templateStepParams, initialParameterValues, locators],
+  )
+
+  // Initialize state with initial values
+  const [values, setValues] = useState<Record<string, DynamicParameterValue>>(initialValues)
+  const [errors, setErrors] = useState<Record<string, string>>({})
+
+  // State for locator group selection (initialized from initial data so edit restores group + locator)
+  const [selectedLocatorGroups, setSelectedLocatorGroups] = useState<Record<string, string>>(
+    initialSelectedLocatorGroups,
+  )
+
+  useEffect(() => {
+    queueMicrotask(() => setErrors({}))
+  }, [templateStepParams])
+
+  // Sync state when initial data changes (e.g. opening edit for a different node)
+  useEffect(() => {
+    queueMicrotask(() => {
+      setValues(initialValues)
+      setSelectedLocatorGroups(initialSelectedLocatorGroups)
+    })
+  }, [initialValues, initialSelectedLocatorGroups])
+
+  useImperativeHandle(ref, () => ({
+    validate: () => {
+      const newErrors = validateDynamicParameters(templateStepParams, values, selectedLocatorGroups, defaultValueInput)
+      setErrors(newErrors)
+      return Object.keys(newErrors).length === 0
+    },
+  }))
+
+  // Update values when an input changes
+  const handleInputChange = (name: string, value: string | number | boolean | Date) => {
+    const newValues: Record<string, DynamicParameterValue> = {
+      ...values,
+      [name]: value,
+    }
+
+    setValues(newValues)
+
+    // Clear error for the field being edited
+    if (errors[name]) {
+      const newErrors = { ...errors }
+      delete newErrors[name]
+      setErrors(newErrors)
+    }
+
+    // Notify parent component of changes
+    if (onChange) {
+      onChange(formatDynamicParameterValues(templateStepParams, newValues))
+    }
+  }
+
+  // Handle locator group selection
+  const handleLocatorGroupChange = (paramName: string, groupId: string) => {
+    setSelectedLocatorGroups(prev => ({
+      ...prev,
+      [paramName]: groupId,
+    }))
+
+    // Clear the locator selection when group changes
+    setValues(prev => ({
+      ...prev,
+      [paramName]: '',
+    }))
+
+    // Clear errors for this field
+    if (errors[paramName]) {
+      const newErrors = { ...errors }
+      delete newErrors[paramName]
+      setErrors(newErrors)
+    }
+  }
+
+  // Get locators for a specific group
+  // Render the appropriate input field based on the parameter type
+  const renderInputField = (param: TemplateStepParameter) => {
+    const { name, type } = param
+    const errorMessage = errors[name]
+
+    switch (type) {
+      case 'NUMBER':
+        return (
+          <div className="grid w-full items-center gap-1.5 rounded-md bg-gray-500/10 p-4">
+            <Label htmlFor={`input-${name}`} className="text-primary">
+              {defaultValueInput ? `Default ${name}` : name}{' '}
+              {!defaultValueInput && <span className="text-red-500">*</span>}
+            </Label>
+            <Input
+              id={`input-${name}`}
+              type="number"
+              value={typeof values[name] === 'number' ? values[name] : 0}
+              onChange={e => handleInputChange(name, Number(e.target.value))}
+              className="w-full"
+            />
+            <ErrorMessage message={errorMessage || ''} visible={!!errorMessage} />
+          </div>
+        )
+
+      case 'STRING':
+        return (
+          <div className="grid w-full items-center gap-1.5 rounded-md bg-gray-500/10 p-4">
+            <Label htmlFor={`input-${name}`} className="text-primary">
+              {defaultValueInput ? `Default ${name}` : name}{' '}
+              {!defaultValueInput && <span className="text-red-500">*</span>}
+            </Label>
+            <Input
+              id={`input-${name}`}
+              type="text"
+              value={typeof values[name] === 'string' ? values[name] : ''}
+              onChange={e => handleInputChange(name, e.target.value)}
+              className="w-full"
+            />
+            <ErrorMessage message={errorMessage || ''} visible={!!errorMessage} />
+          </div>
+        )
+
+      case 'DATE':
+        return (
+          <div className="grid w-full items-center gap-1.5 rounded-md bg-gray-500/10 p-4">
+            <Label className="text-primary">
+              {defaultValueInput ? `Default ${name}` : name}{' '}
+              {!defaultValueInput && <span className="text-red-500">*</span>}
+            </Label>
+            <Popover>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  className={cn('w-full justify-start text-left font-normal', !values[name] && 'text-muted-foreground')}
+                  aria-required={!defaultValueInput}
+                >
+                  <CalendarIcon className="mr-2 h-4 w-4" />
+                  {values[name] instanceof Date ? (
+                    format(values[name] as Date, 'PPP')
+                  ) : (
+                    <span className={defaultValueInput ? 'text-muted-foreground' : 'text-red-500'}>
+                      {defaultValueInput ? 'Pick a date (optional)' : 'Pick a date *'}
+                    </span>
+                  )}
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="w-auto p-0" align="start">
+                <Calendar
+                  mode="single"
+                  selected={values[name] instanceof Date ? (values[name] as Date) : undefined}
+                  onSelect={(date: Date | undefined) => handleInputChange(name, date as Date)}
+                  initialFocus
+                  required={!defaultValueInput}
+                />
+              </PopoverContent>
+            </Popover>
+          </div>
+        )
+
+      case 'BOOLEAN':
+        return (
+          <div className="grid w-full items-center gap-1.5 rounded-md bg-gray-500/10 p-4">
+            <Label htmlFor={`select-${name}`} className="text-primary">
+              {defaultValueInput ? `Default ${name}` : name}{' '}
+              {!defaultValueInput && <span className="text-red-500">*</span>}
+            </Label>
+            <Select
+              value={typeof values[name] === 'boolean' ? String(values[name]) : 'false'}
+              onValueChange={value => handleInputChange(name, value === 'true')}
+              required={!defaultValueInput}
+            >
+              <SelectTrigger id={`select-${name}`} className="w-full">
+                <SelectValue placeholder={defaultValueInput ? 'Select a value (optional)' : 'Select a value *'} />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="true">True</SelectItem>
+                <SelectItem value="false">False</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        )
+
+      case 'LOCATOR':
+        const selectedGroupId = selectedLocatorGroups[name] || ''
+        const availableLocators = selectedGroupId ? getLocatorsForGroup(locators, selectedGroupId) : []
+
+        return (
+          <div className="grid w-full items-center gap-1.5 rounded-md bg-gray-500/10 p-4">
+            <Label htmlFor={`select-${name}`} className="text-primary">
+              {defaultValueInput ? `Default ${name}` : name}{' '}
+              {!defaultValueInput && <span className="text-red-500">*</span>}
+            </Label>
+
+            {/* Locator Group Selection */}
+            <div className="mb-2">
+              <Label htmlFor={`group-${name}`} className="text-sm text-muted-foreground">
+                Locator Group
+              </Label>
+              <Select
+                value={selectedGroupId}
+                onValueChange={value => handleLocatorGroupChange(name, value)}
+                required={!defaultValueInput}
+              >
+                <SelectTrigger id={`group-${name}`} className="w-full">
+                  <SelectValue placeholder="Select a locator group" />
+                </SelectTrigger>
+                <SelectContent isEmpty={locatorGroups.length === 0}>
+                  {locatorGroups.map(group => (
+                    <SelectItem key={group.id} value={group.id}>
+                      {group.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* Locator Selection */}
+            <div>
+              <Label htmlFor={`select-${name}`} className="text-sm text-muted-foreground">
+                Locator
+              </Label>
+              <Select
+                value={typeof values[name] === 'string' ? values[name] : ''}
+                onValueChange={value => handleInputChange(name, value)}
+                required={!defaultValueInput}
+                disabled={!selectedGroupId}
+              >
+                <SelectTrigger id={`select-${name}`} className="w-full">
+                  <SelectValue
+                    placeholder={
+                      !selectedGroupId
+                        ? 'Select a locator group first'
+                        : defaultValueInput
+                          ? 'Select a locator (optional)'
+                          : 'Select a locator *'
+                    }
+                  />
+                </SelectTrigger>
+                <SelectContent isEmpty={availableLocators.length === 0}>
+                  {availableLocators.map(locator => (
+                    <SelectItem key={locator.id} value={locator.name}>
+                      {locator.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <ErrorMessage message={errorMessage || ''} visible={!!errorMessage} />
+          </div>
+        )
+
+      default:
+        return null
+    }
+  }
+
+  // Guard: do not render if no parameters
+  if (!templateStepParams || templateStepParams.length === 0) {
+    return null
+  }
+
+  return (
+    <Card className="border-gray-700 bg-transparent shadow-none" key={resetKey}>
+      <CardHeader className="py-3">
+        <CardTitle className="text-xs font-bold text-primary">Parameters</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-6">
+          {templateStepParams.map(param => (
+            <div key={param.name}>{renderInputField(param)}</div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  )
+})
+DynamicFormFields.displayName = 'DynamicFormFields'
+export default DynamicFormFields

package/templates/starter/src/components/diagram/edit-header-option.tsx

@@ -0,0 +1,36 @@
+import { NodeHeaderAction, NodeHeaderActionProps } from '@/components/node-header'
+import { useCallback } from 'react'
+import { useNodeId } from '@xyflow/react'
+import { Pencil } from 'lucide-react'
+import React from 'react'
+
+export interface NodeHeaderEditActionProps extends Omit<NodeHeaderActionProps, 'onClick'> {
+  onClick?: (nodeId: string, event: React.MouseEvent) => void
+}
+
+/**
+ * A copy action button that passes the node's id to the `onClick` handler when
+ * clicked.
+ */
+export const NodeHeaderEditAction = React.forwardRef<HTMLButtonElement, NodeHeaderEditActionProps>(
+  ({ onClick, ...props }, ref) => {
+    const id = useNodeId()
+
+    const handleClick = useCallback(
+      (event: React.MouseEvent) => {
+        if (!onClick || !id) return
+
+        onClick(id, event)
+      },
+      [onClick, id],
+    )
+
+    return (
+      <NodeHeaderAction ref={ref} onClick={handleClick} variant="ghost" {...props}>
+        <Pencil />
+      </NodeHeaderAction>
+    )
+  },
+)
+
+NodeHeaderEditAction.displayName = 'NodeHeaderEditAction'