create-appraise 0.1.0

package/templates/default/src/components/diagram/node-form.tsx

@@ -0,0 +1,262 @@
+import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { NodeData } from '@/constants/form-opts/diagram/node-form'
+import { Locator, LocatorGroup, StepParameterType, TemplateStep, TemplateStepIcon } from '@prisma/client'
+import { TemplateStepParameter } from '@prisma/client'
+import React, { useState, useEffect, useRef, useCallback } from 'react'
+import TemplateStepCombobox from './template-step-combobox'
+import { type TemplateStepWithGroup } from '@/types/diagram/template-step'
+import DynamicFormFields, { DynamicFormFieldsRef } from './dynamic-parameters'
+import { generateGherkinStep } from '@/lib/transformers/gherkin-converter'
+import { z } from 'zod'
+import ErrorMessage from '@/components/form/error-message'
+import { format } from 'date-fns'
+
+const errorSchema = z.object({
+  label: z.string().min(3, { message: 'Label must be at least 3 characters' }),
+  templateStepId: z.string().min(1, { message: 'Template step is required' }),
+})
+
+const NodeForm = ({
+  onSubmitAction,
+  initialValues,
+  templateSteps,
+  templateStepParams,
+  showAddNodeDialog,
+  locators,
+  locatorGroups,
+  setShowAddNodeDialog,
+  defaultValueInput = false,
+}: {
+  onSubmitAction: (values: NodeData) => void
+  initialValues: NodeData
+  templateSteps: TemplateStep[]
+  templateStepParams: TemplateStepParameter[]
+  showAddNodeDialog: boolean
+  locators: Locator[]
+  locatorGroups: LocatorGroup[]
+  setShowAddNodeDialog: (show: boolean) => void
+  defaultValueInput?: boolean
+}) => {
+  const dynamicFormRef = useRef<DynamicFormFieldsRef>(null)
+  const [selectedTemplateId, setSelectedTemplateId] = useState(initialValues.templateStepId)
+  // states for dynamic form fields
+  const [selectedTemplateStep, setSelectedTemplateStep] = useState<TemplateStep | null>(
+    templateSteps.find(step => step.id === initialValues.templateStepId) ?? null,
+  )
+  const [selectedTemplateStepParams, setSelectedTemplateStepParams] = useState<TemplateStepParameter[]>(
+    templateStepParams.filter(param => param.templateStepId === initialValues.templateStepId) ?? [],
+  )
+  const [parameters, setParameters] = useState<
+    {
+      name: string
+      value: string
+      type: StepParameterType
+      order: number
+    }[]
+  >(initialValues.parameters ?? [])
+  const [gherkinStep, setGherkinStep] = useState<string>(initialValues.gherkinStep ?? '')
+  const [errors, setErrors] = useState<z.inferFlattenedErrors<typeof errorSchema>['fieldErrors']>({})
+  // Synchronize state with initialValues when they change (defer setState to avoid sync setState in effect)
+  useEffect(() => {
+    queueMicrotask(() => {
+      setSelectedTemplateId(initialValues.templateStepId)
+      const step = templateSteps.find(s => s.id === initialValues.templateStepId) ?? null
+      setSelectedTemplateStep(step)
+      setSelectedTemplateStepParams(
+        templateStepParams.filter(param => param.templateStepId === initialValues.templateStepId),
+      )
+      setParameters(initialValues.parameters ?? [])
+      setGherkinStep(initialValues.gherkinStep ?? '')
+    })
+  }, [
+    initialValues.templateStepId,
+    initialValues.parameters,
+    initialValues.gherkinStep,
+    templateSteps,
+    templateStepParams,
+  ])
+
+  const handleTemplateStepChange = useCallback(
+    (value: string) => {
+      setErrors(prev => ({
+        ...prev,
+        templateStepId: value ? undefined : ['Template step is required'],
+      }))
+      setSelectedTemplateId(value)
+      const step = templateSteps.find(s => s.id === value)
+      if (step) {
+        setSelectedTemplateStep(step)
+        const newParams = templateStepParams.filter(param => param.templateStepId === step.id)
+        setSelectedTemplateStepParams(newParams)
+        const initialParamsForStep = newParams.map(param => {
+          let defaultValue = ''
+          switch (param.type) {
+            case 'NUMBER':
+              defaultValue = '0'
+              break
+            case 'STRING':
+              defaultValue = ''
+              break
+            case 'LOCATOR':
+              defaultValue = ''
+              break
+            case 'BOOLEAN':
+              defaultValue = 'false'
+              break
+            case 'DATE':
+              defaultValue = format(new Date(), 'PPP')
+              break
+          }
+          return {
+            name: param.name,
+            value: defaultValue,
+            type: param.type,
+            order: param.order,
+          }
+        })
+        setParameters(initialParamsForStep)
+        if (step.signature) {
+          const gherkin = generateGherkinStep(step.type, step.signature, initialParamsForStep)
+          setGherkinStep(gherkin)
+        }
+      }
+    },
+    [
+      templateSteps,
+      templateStepParams,
+    ],
+  )
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+
+    const isDynamicFormValid = dynamicFormRef.current?.validate()
+
+    const formData = new FormData(e.currentTarget)
+    const formValues = Object.fromEntries(formData.entries())
+
+    const dataToValidate = {
+      label: formValues.label,
+      templateStepId: selectedTemplateId,
+    }
+
+    const parsed = errorSchema.safeParse(dataToValidate)
+
+    if (!parsed.success || !isDynamicFormValid) {
+      if (!parsed.success) {
+        setErrors(parsed.error.flatten().fieldErrors)
+      }
+      return
+    }
+
+    setErrors({})
+    const nodeData: NodeData = {
+      ...formValues,
+      parameters: parameters,
+      label: formValues.label as string,
+      gherkinStep: gherkinStep,
+      templateStepId: selectedTemplateId as string,
+    }
+    onSubmitAction(nodeData)
+  }
+
+  return (
+    <Dialog open={showAddNodeDialog} onOpenChange={setShowAddNodeDialog}>
+      <DialogTrigger asChild>
+        <Button type="button" onClick={e => e.preventDefault()}>
+          Add Node
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <form onSubmit={handleSubmit}>
+          <DialogHeader>
+            <DialogTitle>Add Node</DialogTitle>
+          </DialogHeader>
+          <DialogDescription>Insert a new node to the diagram</DialogDescription>
+          <div className="my-4">
+            <div className="mb-4 flex flex-col gap-2">
+              <Label htmlFor="label">Label</Label>
+              <Input
+                id="label"
+                name="label"
+                defaultValue={initialValues.label}
+                onChange={e => {
+                  setErrors(prev => ({
+                    ...prev,
+                    label: e.target.value ? undefined : ['Label is required'],
+                  }))
+                }}
+              />
+              <ErrorMessage message={errors.label?.[0] ?? ''} visible={!!errors.label} />
+            </div>
+            <div className="mb-4 flex flex-col gap-2">
+              <Label htmlFor="templateStepId">Template Step</Label>
+              <TemplateStepCombobox
+                id="templateStepId"
+                value={selectedTemplateId}
+                onValueChange={handleTemplateStepChange}
+                templateSteps={templateSteps as TemplateStepWithGroup[]}
+                placeholder="Select a template step"
+              />
+              <input type="hidden" name="templateStepId" value={selectedTemplateId} />
+              <ErrorMessage message={errors.templateStepId?.[0] ?? ''} visible={!!errors.templateStepId} />
+            </div>
+            <div className="mb-4 flex flex-col gap-2">
+              <DynamicFormFields
+                ref={dynamicFormRef}
+                templateStepParams={selectedTemplateStepParams}
+                locators={locators}
+                locatorGroups={locatorGroups}
+                initialParameterValues={initialValues.parameters}
+                onChange={values => {
+                  setParameters([...values])
+                  // Generate gherkin step directly when parameters change
+                  if (selectedTemplateStep && selectedTemplateStep.signature) {
+                    const gherkin = generateGherkinStep(
+                      selectedTemplateStep.type,
+                      selectedTemplateStep.signature,
+                      values,
+                    )
+                    setGherkinStep(gherkin)
+                  }
+                }}
+                defaultValueInput={defaultValueInput}
+              />
+            </div>
+            {selectedTemplateStep && (
+              <div className="mb-4 flex flex-col gap-2">
+                <Label htmlFor="gherkinStep">Gherkin Step</Label>
+                <Input disabled id="gherkinStep" name="gherkinStep" value={gherkinStep} />
+              </div>
+            )}
+            <input
+              type="hidden"
+              name="icon"
+              value={selectedTemplateStep?.icon ? selectedTemplateStep.icon : TemplateStepIcon.MOUSE}
+            />
+          </div>
+          <DialogFooter>
+            <DialogClose asChild>
+              <Button variant="outline">Cancel</Button>
+            </DialogClose>
+            <Button type="submit">Save</Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export default NodeForm

package/templates/default/src/components/diagram/options-header-node.tsx

@@ -0,0 +1,57 @@
+import { memo } from 'react'
+
+import { NodeProps, Handle, Position } from '@xyflow/react'
+
+import { BaseNode } from '@/components/base-node'
+import {
+  NodeHeader,
+  NodeHeaderTitle,
+  NodeHeaderActions,
+  NodeHeaderIcon,
+  NodeHeaderDeleteAction,
+} from '@/components/node-header'
+import { NodeHeaderEditAction } from './edit-header-option'
+import { TemplateStepIcon } from '@prisma/client'
+import { KeyToIconTransformer } from '@/lib/transformers/key-to-icon-transformer'
+import { cn } from '@/lib/utils'
+
+interface OptionsHeaderNodeData {
+  label: string
+  gherkinStep: string
+  isFirstNode?: boolean
+  icon?: TemplateStepIcon
+  isMissingParams?: boolean
+}
+
+interface OptionsHeaderNodeProps extends NodeProps {
+  onEdit: (nodeId: string) => void
+}
+
+const OptionsHeaderNode = memo(({ selected, data, onEdit }: OptionsHeaderNodeProps) => {
+  OptionsHeaderNode.displayName = 'OptionsHeaderNode'
+
+  const { label, gherkinStep, isFirstNode, icon, isMissingParams } = data as unknown as OptionsHeaderNodeData
+
+  return (
+    <BaseNode selected={selected} className={cn('w-52 border-none px-3 py-2', isMissingParams && 'bg-red-700')}>
+      {!isFirstNode && <Handle type="target" position={Position.Left} />}
+      <NodeHeader className="-mx-3 -mt-2 border-b">
+        <NodeHeaderIcon>{KeyToIconTransformer(icon as TemplateStepIcon)}</NodeHeaderIcon>
+        <NodeHeaderTitle>{label}</NodeHeaderTitle>
+        <NodeHeaderActions>
+          <NodeHeaderEditAction
+            label="Edit"
+            onClick={nodeId => {
+              onEdit(nodeId)
+            }}
+          />
+          <NodeHeaderDeleteAction />
+        </NodeHeaderActions>
+      </NodeHeader>
+      <div className="mt-2">{gherkinStep}</div>
+      <Handle type="source" position={Position.Right} />
+    </BaseNode>
+  )
+})
+
+export default OptionsHeaderNode

package/templates/default/src/components/diagram/template-step-combobox.tsx

@@ -0,0 +1,155 @@
+'use client'
+
+import * as React from 'react'
+import { ChevronDown } from 'lucide-react'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command'
+import { cn } from '@/lib/utils'
+import {
+  capitalizeGroupName,
+  type TemplateStepWithGroup,
+} from '@/types/diagram/template-step'
+
+const GROUP_KEY_OTHER = 'Other'
+
+function groupStepsByGroupName(
+  steps: TemplateStepWithGroup[],
+): Map<string, TemplateStepWithGroup[]> {
+  const map = new Map<string, TemplateStepWithGroup[]>()
+  for (const step of steps) {
+    const key = step.templateStepGroup?.name ?? GROUP_KEY_OTHER
+    const list = map.get(key) ?? []
+    list.push(step)
+    map.set(key, list)
+  }
+  return map
+}
+
+export type TemplateStepComboboxProps = {
+  value: string
+  onValueChange: (value: string) => void
+  templateSteps: TemplateStepWithGroup[]
+  placeholder?: string
+  disabled?: boolean
+  id?: string
+}
+
+const TemplateStepCombobox = ({
+  value,
+  onValueChange,
+  templateSteps,
+  placeholder = 'Select a template step',
+  disabled = false,
+  id,
+}: TemplateStepComboboxProps) => {
+  const [open, setOpen] = React.useState(false)
+  const containerRef = React.useRef<HTMLDivElement>(null)
+  const searchInputRef = React.useRef<HTMLInputElement>(null)
+
+  const selectedStep = React.useMemo(
+    () => templateSteps.find(s => s.id === value) ?? null,
+    [templateSteps, value],
+  )
+
+  const groups = React.useMemo(() => {
+    const map = groupStepsByGroupName(templateSteps)
+    return Array.from(map.entries()).sort(([a], [b]) =>
+      a.localeCompare(b, undefined, { sensitivity: 'base' }),
+    )
+  }, [templateSteps])
+
+  const handleSelect = React.useCallback(
+    (stepId: string) => {
+      onValueChange(stepId)
+      setOpen(false)
+    },
+    [onValueChange],
+  )
+
+  React.useEffect(() => {
+    if (!open) return
+    // Focus search input when dropdown opens so user can type immediately
+    const focusSearch = () => searchInputRef.current?.focus()
+    const id = requestAnimationFrame(focusSearch)
+    return () => cancelAnimationFrame(id)
+  }, [open])
+
+  React.useEffect(() => {
+    if (!open) return
+    const handleClickOutside = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setOpen(false)
+      }
+    }
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setOpen(false)
+    }
+    document.addEventListener('mousedown', handleClickOutside)
+    document.addEventListener('keydown', handleEscape)
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+      document.removeEventListener('keydown', handleEscape)
+    }
+  }, [open])
+
+  return (
+    <div ref={containerRef} className="relative w-full">
+      <button
+        type="button"
+        id={id}
+        role="combobox"
+        aria-expanded={open}
+        aria-controls={open ? `${id}-listbox` : undefined}
+        aria-haspopup="listbox"
+        aria-label={placeholder}
+        disabled={disabled}
+        onClick={() => setOpen(prev => !prev)}
+        className={cn(
+          'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background',
+          'focus:outline-none focus:ring-1 focus:ring-ring',
+          'disabled:cursor-not-allowed disabled:opacity-50',
+          'data-[placeholder]:text-muted-foreground [&>span]:line-clamp-1',
+        )}
+      >
+        <span className={cn(!selectedStep && 'text-muted-foreground')}>
+          {selectedStep ? selectedStep.name : placeholder}
+        </span>
+        <ChevronDown className="h-4 w-4 shrink-0 opacity-50" />
+      </button>
+      {open && (
+        <div id={`${id}-listbox`} role="listbox" className="absolute left-0 right-0 top-full z-50 mt-1">
+          <Command shouldFilter className="rounded-md border border-input bg-popover shadow-md">
+            <CommandInput ref={searchInputRef} placeholder="Search template steps…" />
+            <CommandList>
+              <CommandEmpty>No step found.</CommandEmpty>
+              {groups.map(([groupKey, steps]) => (
+                <CommandGroup
+                  key={groupKey}
+                  heading={capitalizeGroupName(groupKey)}
+                >
+                  {steps.map(step => (
+                    <CommandItem
+                      key={step.id}
+                      value={step.name}
+                      onSelect={() => handleSelect(step.id)}
+                    >
+                      {step.name}
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              ))}
+            </CommandList>
+          </Command>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default TemplateStepCombobox

package/templates/default/src/components/form/error-message.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+const ErrorMessage = ({ message, visible }: { message: string; visible: boolean }) => {
+  return <div className={`text-sm text-pink-600 ${visible ? 'visible' : 'invisible'}`}>{message}</div>
+}
+
+export default ErrorMessage