create-appraisejs 0.3.0 → 0.3.1-alpha.1

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

@@ -1,30 +1,48 @@
 import React from 'react'
-import { BaseEdge, EdgeLabelRenderer, getBezierPath, useReactFlow, type EdgeProps } from '@xyflow/react'
+import { BaseEdge, EdgeLabelRenderer, getStraightPath, useReactFlow, type EdgeProps } from '@xyflow/react'
 import { Trash2 } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 
+const DEFAULT_EDGE_STYLE: React.CSSProperties = {}
+
+type FlowEdgeMutationGuard = {
+  isEdgeDeleteBlocked: (edge: { id: string; source: string; target: string }) => boolean
+  isNodeDeleteBlocked: (nodeId: string) => boolean
+  onBlocked: () => void
+}
+
+export const flowEdgeMutationGuardRef: { current: FlowEdgeMutationGuard } = {
+  current: {
+    isEdgeDeleteBlocked: () => false,
+    isNodeDeleteBlocked: () => false,
+    onBlocked: () => {},
+  },
+}
+
 export default function ButtonEdge({
   id,
+  source,
+  target,
   sourceX,
   sourceY,
   targetX,
   targetY,
-  sourcePosition,
-  targetPosition,
-  style = {},
+  style = DEFAULT_EDGE_STYLE,
   markerEnd,
 }: EdgeProps) {
   const { setEdges } = useReactFlow()
-  const [edgePath, labelX, labelY] = getBezierPath({
+  const [edgePath, labelX, labelY] = getStraightPath({
     sourceX,
     sourceY,
-    sourcePosition,
     targetX,
     targetY,
-    targetPosition,
   })
 
   const onEdgeClick = () => {
+    if (flowEdgeMutationGuardRef.current.isEdgeDeleteBlocked({ id, source, target })) {
+      flowEdgeMutationGuardRef.current.onBlocked()
+      return
+    }
     setEdges(edges => edges.filter(edge => edge.id !== id))
   }
 
@@ -33,7 +51,7 @@ export default function ButtonEdge({
       <BaseEdge path={edgePath} markerEnd={markerEnd} style={style} />
       <EdgeLabelRenderer>
         <div
-          className={`nodrag nopan pointer-events-auto absolute flex items-center justify-center`}
+          className={`nodrag nopan pointer-events-auto absolute z-30 flex items-center justify-center`}
           style={{
             transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
           }}
@@ -43,7 +61,7 @@ export default function ButtonEdge({
             onClick={onEdgeClick}
             title="Delete Edge"
             size="icon"
-            className="h-7 w-7 rounded-full p-0"
+            className="size-7 rounded-full p-0"
           >
             <Trash2 className="text-muted-foreground" />
           </Button>

package/templates/starter/src/components/diagram/dynamic-parameter-field-label.tsx

@@ -0,0 +1,19 @@
+'use client'
+
+import { Label } from '@/components/ui/label'
+
+export function DynamicParameterFieldLabel({
+  name,
+  defaultValueInput,
+  htmlFor,
+}: {
+  name: string
+  defaultValueInput: boolean
+  htmlFor?: string
+}) {
+  return (
+    <Label htmlFor={htmlFor} className="text-primary">
+      {defaultValueInput ? `Default ${name}` : name} {!defaultValueInput && <span className="text-red-500">*</span>}
+    </Label>
+  )
+}

package/templates/starter/src/components/diagram/dynamic-parameter-field-shell.tsx

@@ -0,0 +1,30 @@
+'use client'
+
+import ErrorMessage from '@/components/form/error-message'
+import type { ReactNode } from 'react'
+
+import { DynamicParameterFieldLabel } from './dynamic-parameter-field-label'
+
+type DynamicParameterFieldShellProps = {
+  name: string
+  defaultValueInput: boolean
+  htmlFor?: string
+  errorMessage?: string
+  children: ReactNode
+}
+
+export function DynamicParameterFieldShell({
+  name,
+  defaultValueInput,
+  htmlFor,
+  errorMessage,
+  children,
+}: DynamicParameterFieldShellProps) {
+  return (
+    <div className="grid w-full items-center gap-1.5 rounded-md bg-zinc-500/10 p-4">
+      <DynamicParameterFieldLabel name={name} defaultValueInput={defaultValueInput} htmlFor={htmlFor} />
+      {children}
+      <ErrorMessage message={errorMessage || ''} visible={!!errorMessage} />
+    </div>
+  )
+}

package/templates/starter/src/components/diagram/dynamic-parameter-field-types.ts

@@ -0,0 +1,32 @@
+import type { TemplateStepParameter } from '@prisma/client'
+import type {
+  InlineLocatorSaveResult,
+  LocatorWorkspaceEnvironment,
+} from '@/app/(base)/locators/create/create-locator-workspace-helpers'
+import type { Locator, LocatorGroup, Module } from '@prisma/client'
+
+export type DynamicParameterValue = string | number | boolean | Date
+export type LocatorOption = Pick<Locator, 'id' | 'name' | 'locatorGroupId'>
+export type LocatorGroupOption = Pick<LocatorGroup, 'id' | 'name' | 'route' | 'moduleId'>
+export type LocatorSelectionMode = 'existing' | 'new'
+
+export type DynamicParameterInputFieldProps = {
+  param: TemplateStepParameter
+  values: Record<string, DynamicParameterValue>
+  errors: Record<string, string>
+  defaultValueInput: boolean
+  fieldClassName: string
+  selectedLocatorGroups: Record<string, string>
+  locatorSelectionModes: Record<string, LocatorSelectionMode>
+  createdLocatorSelections: Record<string, InlineLocatorSaveResult>
+  availableLocatorGroups: LocatorGroupOption[]
+  availableLocatorOptions: LocatorOption[]
+  createLocatorParamName: string | null
+  environments: LocatorWorkspaceEnvironment[]
+  modules: Array<Pick<Module, 'id' | 'name' | 'parentId'>>
+  onInputChange: (name: string, value: DynamicParameterValue) => void
+  onLocatorGroupChange: (paramName: string, groupId: string) => void
+  onLocatorSelectionModeChange: (paramName: string, mode: LocatorSelectionMode) => void
+  onInlineLocatorSave: (paramName: string, result: InlineLocatorSaveResult) => void
+  onOpenCreateLocator: (paramName: string | null) => void
+}

package/templates/starter/src/components/diagram/dynamic-parameter-fields.tsx

@@ -0,0 +1,140 @@
+'use client'
+
+import { Button } from '@/components/ui/button'
+import { Calendar } from '@/components/ui/calendar'
+import { Input } from '@/components/ui/input'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { format } from 'date-fns'
+import { CalendarIcon } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+import { DynamicParameterFieldShell } from './dynamic-parameter-field-shell'
+import { DynamicParameterLocatorField } from './dynamic-parameter-locator-field'
+import type { DynamicParameterInputFieldProps } from './dynamic-parameter-field-types'
+
+function DynamicParameterNumberField(props: DynamicParameterInputFieldProps) {
+  const { param, values, errors, defaultValueInput, fieldClassName, onInputChange } = props
+  const { name } = param
+
+  return (
+    <DynamicParameterFieldShell
+      name={name}
+      defaultValueInput={defaultValueInput}
+      htmlFor={`input-${name}`}
+      errorMessage={errors[name]}
+    >
+      <Input
+        id={`input-${name}`}
+        type="number"
+        value={typeof values[name] === 'number' ? values[name] : 0}
+        onChange={e => onInputChange(name, Number(e.target.value))}
+        className={fieldClassName}
+      />
+    </DynamicParameterFieldShell>
+  )
+}
+
+function DynamicParameterStringField(props: DynamicParameterInputFieldProps) {
+  const { param, values, errors, defaultValueInput, fieldClassName, onInputChange } = props
+  const { name } = param
+
+  return (
+    <DynamicParameterFieldShell
+      name={name}
+      defaultValueInput={defaultValueInput}
+      htmlFor={`input-${name}`}
+      errorMessage={errors[name]}
+    >
+      <Input
+        id={`input-${name}`}
+        type="text"
+        value={typeof values[name] === 'string' ? values[name] : ''}
+        onChange={e => onInputChange(name, e.target.value)}
+        className={fieldClassName}
+      />
+    </DynamicParameterFieldShell>
+  )
+}
+
+function DynamicParameterDateField(props: DynamicParameterInputFieldProps) {
+  const { param, values, errors, defaultValueInput, onInputChange } = props
+  const { name } = param
+
+  return (
+    <DynamicParameterFieldShell name={name} defaultValueInput={defaultValueInput} errorMessage={errors[name]}>
+      <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 size-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) => onInputChange(name, date as Date)}
+            initialFocus
+            required={!defaultValueInput}
+          />
+        </PopoverContent>
+      </Popover>
+    </DynamicParameterFieldShell>
+  )
+}
+
+function DynamicParameterBooleanField(props: DynamicParameterInputFieldProps) {
+  const { param, values, errors, defaultValueInput, fieldClassName, onInputChange } = props
+  const { name } = param
+
+  return (
+    <DynamicParameterFieldShell
+      name={name}
+      defaultValueInput={defaultValueInput}
+      htmlFor={`select-${name}`}
+      errorMessage={errors[name]}
+    >
+      <Select
+        value={typeof values[name] === 'boolean' ? String(values[name]) : 'false'}
+        onValueChange={value => onInputChange(name, value === 'true')}
+        required={!defaultValueInput}
+      >
+        <SelectTrigger id={`select-${name}`} className={fieldClassName}>
+          <SelectValue placeholder={defaultValueInput ? 'Select a value (optional)' : 'Select a value *'} />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="true">True</SelectItem>
+          <SelectItem value="false">False</SelectItem>
+        </SelectContent>
+      </Select>
+    </DynamicParameterFieldShell>
+  )
+}
+
+export function DynamicParameterInputField(props: DynamicParameterInputFieldProps) {
+  switch (props.param.type) {
+    case 'NUMBER':
+      return <DynamicParameterNumberField {...props} />
+    case 'STRING':
+      return <DynamicParameterStringField {...props} />
+    case 'DATE':
+      return <DynamicParameterDateField {...props} />
+    case 'BOOLEAN':
+      return <DynamicParameterBooleanField {...props} />
+    case 'LOCATOR':
+      return <DynamicParameterLocatorField {...props} />
+    default:
+      return null
+  }
+}

package/templates/starter/src/components/diagram/dynamic-parameter-locator-field.tsx

@@ -0,0 +1,288 @@
+'use client'
+
+import CreateLocatorWorkspace from '@/app/(base)/locators/create/create-locator-workspace'
+import { Button } from '@/components/ui/button'
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Sparkles } from 'lucide-react'
+
+import { DynamicParameterFieldShell } from './dynamic-parameter-field-shell'
+import type { InlineLocatorSaveResult } from '@/app/(base)/locators/create/create-locator-workspace-helpers'
+
+import type { DynamicParameterInputFieldProps, LocatorSelectionMode } from './dynamic-parameter-field-types'
+import { getLocatorsForGroup } from './dynamic-parameters-helpers'
+
+type LocatorFieldSectionProps = DynamicParameterInputFieldProps & {
+  name: string
+  fieldClassName: string
+  defaultValueInput: boolean
+}
+
+function DynamicParameterLocatorModeSelect({
+  name,
+  fieldClassName,
+  locatorSelectionMode,
+  onLocatorSelectionModeChange,
+}: {
+  name: string
+  fieldClassName: string
+  locatorSelectionMode: LocatorSelectionMode
+  onLocatorSelectionModeChange: DynamicParameterInputFieldProps['onLocatorSelectionModeChange']
+}) {
+  return (
+    <div className="space-y-2">
+      <Label htmlFor={`locator-mode-${name}`} className="text-sm text-muted-foreground">
+        Selector Source
+      </Label>
+      <Select
+        value={locatorSelectionMode}
+        onValueChange={value => onLocatorSelectionModeChange(name, value as LocatorSelectionMode)}
+      >
+        <SelectTrigger id={`locator-mode-${name}`} className={fieldClassName}>
+          <SelectValue placeholder="Choose selector source" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="existing">Use Existing</SelectItem>
+          <SelectItem value="new">Create New Selector</SelectItem>
+        </SelectContent>
+      </Select>
+    </div>
+  )
+}
+
+function DynamicParameterLocatorNewSection({
+  name,
+  fieldClassName,
+  createLocatorParamName,
+  createdLocatorSelection,
+  environments,
+  modules,
+  availableLocatorGroups,
+  onInlineLocatorSave,
+  onOpenCreateLocator,
+}: LocatorFieldSectionProps & {
+  createLocatorParamName: string | null
+  createdLocatorSelection: DynamicParameterInputFieldProps['createdLocatorSelections'][string] | undefined
+}) {
+  return (
+    <div className="bg-background/40 space-y-3 rounded-md border border-border p-3">
+      <div className="space-y-2">
+        <Label className="block text-sm font-semibold text-primary">Create New Selector</Label>
+        <Button type="button" variant="outline" size="sm" className="gap-1.5" onClick={() => onOpenCreateLocator(name)}>
+          <Sparkles className="size-4" />
+          Create Selector
+        </Button>
+      </div>
+      <Dialog open={createLocatorParamName === name} onOpenChange={open => !open && onOpenCreateLocator(null)}>
+        <DialogContent className="max-h-[90vh] max-w-6xl overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>Create New Selector</DialogTitle>
+            <DialogDescription>Save a selector here to use it in this node immediately.</DialogDescription>
+          </DialogHeader>
+          <CreateLocatorWorkspace
+            environments={environments}
+            locatorGroups={availableLocatorGroups}
+            modules={modules}
+            displayMode="inline"
+            onSaveSuccess={result => onInlineLocatorSave(name, result)}
+            onClose={() => onOpenCreateLocator(null)}
+          />
+        </DialogContent>
+      </Dialog>
+      <DynamicParameterLocatorCreatedSummary
+        name={name}
+        fieldClassName={fieldClassName}
+        createdLocatorSelection={createdLocatorSelection}
+      />
+    </div>
+  )
+}
+
+function DynamicParameterLocatorCreatedSummary({
+  name,
+  fieldClassName,
+  createdLocatorSelection,
+}: {
+  name: string
+  fieldClassName: string
+  createdLocatorSelection: InlineLocatorSaveResult | undefined
+}) {
+  return (
+    <div className="space-y-3">
+      <div className="space-y-2">
+        <Label
+          htmlFor={`created-group-${name}`}
+          className="pointer-events-none cursor-not-allowed select-none text-sm text-muted-foreground"
+        >
+          Locator Group
+        </Label>
+        <Input
+          id={`created-group-${name}`}
+          value={createdLocatorSelection?.locatorGroupName ?? ''}
+          placeholder="Created group will appear here"
+          readOnly
+          tabIndex={-1}
+          onMouseDown={event => event.preventDefault()}
+          className={`${fieldClassName} cursor-not-allowed select-none`}
+        />
+      </div>
+      <div className="space-y-2">
+        <Label
+          htmlFor={`created-locator-${name}`}
+          className="pointer-events-none cursor-not-allowed select-none text-sm text-muted-foreground"
+        >
+          Locator
+        </Label>
+        <Input
+          id={`created-locator-${name}`}
+          value={createdLocatorSelection?.locatorName ?? ''}
+          placeholder="Created locator will appear here"
+          readOnly
+          tabIndex={-1}
+          onMouseDown={event => event.preventDefault()}
+          className={`${fieldClassName} cursor-not-allowed select-none`}
+        />
+      </div>
+    </div>
+  )
+}
+
+function DynamicParameterLocatorExistingSection({
+  name,
+  values,
+  fieldClassName,
+  defaultValueInput,
+  selectedGroupId,
+  availableLocatorGroups,
+  availableLocators,
+  onInputChange,
+  onLocatorGroupChange,
+}: LocatorFieldSectionProps & {
+  selectedGroupId: string
+  availableLocators: ReturnType<typeof getLocatorsForGroup>
+}) {
+  return (
+    <div className="bg-background/40 space-y-3 rounded-md border border-border p-3">
+      <Label className="text-sm font-semibold text-primary">Use Existing</Label>
+      <div className="space-y-2">
+        <Label htmlFor={`group-${name}`} className="text-sm text-muted-foreground">
+          Locator Group
+        </Label>
+        <Select
+          value={selectedGroupId}
+          onValueChange={value => onLocatorGroupChange(name, value)}
+          required={!defaultValueInput}
+        >
+          <SelectTrigger id={`group-${name}`} className={fieldClassName}>
+            <SelectValue placeholder="Select a locator group" />
+          </SelectTrigger>
+          <SelectContent isEmpty={availableLocatorGroups.length === 0}>
+            {availableLocatorGroups.map(group => (
+              <SelectItem key={group.id} value={group.id}>
+                {group.name}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor={`select-${name}`} className="text-sm text-muted-foreground">
+          Locator
+        </Label>
+        <Select
+          value={typeof values[name] === 'string' ? values[name] : ''}
+          onValueChange={value => onInputChange(name, value)}
+          required={!defaultValueInput}
+          disabled={!selectedGroupId}
+        >
+          <SelectTrigger id={`select-${name}`} className={fieldClassName}>
+            <SelectValue placeholder={getLocatorPlaceholder(defaultValueInput, selectedGroupId)} />
+          </SelectTrigger>
+          <SelectContent isEmpty={availableLocators.length === 0}>
+            {availableLocators.map(locator => (
+              <SelectItem key={locator.id} value={locator.name}>
+                {locator.name}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+    </div>
+  )
+}
+
+function getLocatorPlaceholder(defaultValueInput: boolean, selectedGroupId: string) {
+  if (!selectedGroupId) {
+    return 'Select a locator group first'
+  }
+
+  return defaultValueInput ? 'Select a locator (optional)' : 'Select a locator *'
+}
+
+export function DynamicParameterLocatorField(props: DynamicParameterInputFieldProps) {
+  const {
+    param,
+    values,
+    errors,
+    defaultValueInput,
+    fieldClassName,
+    selectedLocatorGroups,
+    locatorSelectionModes,
+    createdLocatorSelections,
+    availableLocatorGroups,
+    availableLocatorOptions,
+    createLocatorParamName,
+    environments,
+    modules,
+    onInputChange,
+    onLocatorGroupChange,
+    onLocatorSelectionModeChange,
+    onInlineLocatorSave,
+    onOpenCreateLocator,
+  } = props
+  const { name } = param
+  const locatorSelectionMode = locatorSelectionModes[name] ?? 'existing'
+  const selectedGroupId = selectedLocatorGroups[name] || ''
+  const availableLocators = selectedGroupId ? getLocatorsForGroup(availableLocatorOptions, selectedGroupId) : []
+  const sectionProps = { ...props, name, fieldClassName, defaultValueInput }
+
+  return (
+    <DynamicParameterFieldShell
+      name={name}
+      defaultValueInput={defaultValueInput}
+      htmlFor={`select-${name}`}
+      errorMessage={errors[name]}
+    >
+      <DynamicParameterLocatorModeSelect
+        name={name}
+        fieldClassName={fieldClassName}
+        locatorSelectionMode={locatorSelectionMode}
+        onLocatorSelectionModeChange={onLocatorSelectionModeChange}
+      />
+      {locatorSelectionMode === 'new' ? (
+        <DynamicParameterLocatorNewSection
+          {...sectionProps}
+          createLocatorParamName={createLocatorParamName}
+          createdLocatorSelection={createdLocatorSelections[name]}
+          environments={environments}
+          modules={modules}
+          availableLocatorGroups={availableLocatorGroups}
+          onInlineLocatorSave={onInlineLocatorSave}
+          onOpenCreateLocator={onOpenCreateLocator}
+        />
+      ) : (
+        <DynamicParameterLocatorExistingSection
+          {...sectionProps}
+          values={values}
+          selectedGroupId={selectedGroupId}
+          availableLocatorGroups={availableLocatorGroups}
+          availableLocators={availableLocators}
+          onInputChange={onInputChange}
+          onLocatorGroupChange={onLocatorGroupChange}
+        />
+      )}
+    </DynamicParameterFieldShell>
+  )
+}

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

@@ -68,7 +68,9 @@ export function getInitialSelectedLocatorGroups(
   initialParameterValues: DynamicParameterInput[] | undefined,
   locators: Array<Pick<Locator, 'id' | 'name' | 'locatorGroupId'>>,
 ) {
-  const initialValueMap = Object.fromEntries((initialParameterValues ?? []).map(parameter => [parameter.name, parameter]))
+  const initialValueMap = Object.fromEntries(
+    (initialParameterValues ?? []).map(parameter => [parameter.name, parameter]),
+  )
 
   return Object.fromEntries(
     templateStepParams.flatMap(parameter => {
@@ -92,6 +94,7 @@ export function validateDynamicParameters(
   values: DynamicParameterValuesMap,
   selectedLocatorGroups: Record<string, string>,
   defaultValueInput: boolean,
+  locatorSelectionModes: Record<string, 'existing' | 'new'> = {},
 ) {
   if (defaultValueInput) {
     return {}
@@ -103,7 +106,11 @@ export function validateDynamicParameters(
     const value = values[parameter.name]
 
     if (parameter.type === StepParameterType.LOCATOR) {
-      if (!selectedLocatorGroups[parameter.name]) {
+      if (locatorSelectionModes[parameter.name] === 'new') {
+        if (!value) {
+          errors[parameter.name] = 'Locator is required'
+        }
+      } else if (!selectedLocatorGroups[parameter.name]) {
         errors[parameter.name] = 'Locator group is required'
       } else if (!value) {
         errors[parameter.name] = 'Locator is required'
@@ -136,8 +143,7 @@ export function formatDynamicParameterValues(
         formattedValue = value !== undefined && value !== null ? String(value) : ''
         break
       case StepParameterType.DATE:
-        formattedValue =
-          value instanceof Date && !Number.isNaN(value.getTime()) ? format(value, 'PPP') : ''
+        formattedValue = value instanceof Date && !Number.isNaN(value.getTime()) ? format(value, 'PPP') : ''
         break
       case StepParameterType.BOOLEAN:
         formattedValue = value !== undefined && value !== null ? String(value) : ''