create-appraisejs 0.2.0 → 0.3.0-alpha.1

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

@@ -1,262 +0,0 @@
-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

@@ -1,57 +0,0 @@
-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('max-w-80 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

@@ -1,155 +0,0 @@
-'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

@@ -1,7 +0,0 @@
-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