create-appraisejs 0.3.0 → 0.3.1-alpha.0

package/templates/blank/src/components/data-visualization/info-card.tsx

@@ -1,70 +1,70 @@
-import React from 'react'
-import { Card, CardContent } from '../ui/card'
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip'
-
-const InfoCard = ({
-  showHighlightGroup,
-  highlight,
-  legend,
-  defaultText,
-  icon,
-}: {
-  showHighlightGroup: boolean
-  highlight: string
-  legend: string
-  defaultText: string
-  icon: React.ReactNode
-}) => {
-  // Dynamic text size based on highlight text length
-  const getHighlightTextSize = (text: string) => {
-    const length = text.length
-    if (length <= 3) return 'text-2xl'
-    if (length <= 6) return 'text-xl'
-    if (length <= 10) return 'text-lg'
-    if (length <= 15) return 'text-base'
-    return 'text-sm'
-  }
-
-  return (
-    <>
-      <Card className="flex w-[10vw] max-w-[20rem] items-center bg-inherit">
-        <CardContent className="p-2">
-          <div className="flex items-center gap-4 text-primary">
-            {showHighlightGroup ? (
-              <>
-                {icon}
-                <div className="flex h-full flex-col">
-                  <div className="flex h-full items-center text-xs text-muted-foreground">{legend}</div>
-                  <div
-                    className={`mr-2 h-full items-center font-mono text-primary ${getHighlightTextSize(highlight)} ${
-                      highlight.length > 15 ? 'w-[6rem] overflow-hidden text-ellipsis whitespace-nowrap' : ''
-                    }`}
-                  >
-                    {highlight.length > 15 ? (
-                      <>
-                        <TooltipProvider>
-                          <Tooltip delayDuration={200}>
-                            <TooltipTrigger asChild>
-                              <span>{highlight}</span>
-                            </TooltipTrigger>
-                            <TooltipContent>{highlight}</TooltipContent>
-                          </Tooltip>
-                        </TooltipProvider>
-                      </>
-                    ) : (
-                      highlight
-                    )}
-                  </div>
-                </div>
-              </>
-            ) : (
-              <div className="flex items-center text-xs text-muted-foreground">{defaultText}</div>
-            )}
-          </div>
-        </CardContent>
-      </Card>
-    </>
-  )
-}
-
-export default InfoCard
+import React from 'react'
+import { Card, CardContent } from '../ui/card'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip'
+
+const InfoCard = ({
+  showHighlightGroup,
+  highlight,
+  legend,
+  defaultText,
+  icon,
+}: {
+  showHighlightGroup: boolean
+  highlight: string
+  legend: string
+  defaultText: string
+  icon: React.ReactNode
+}) => {
+  // Dynamic text size based on highlight text length
+  const getHighlightTextSize = (text: string) => {
+    const length = text.length
+    if (length <= 3) return 'text-2xl'
+    if (length <= 6) return 'text-xl'
+    if (length <= 10) return 'text-lg'
+    if (length <= 15) return 'text-base'
+    return 'text-sm'
+  }
+
+  return (
+    <>
+      <Card className="flex w-[10vw] max-w-[20rem] items-center bg-inherit">
+        <CardContent className="p-2">
+          <div className="flex items-center gap-4 text-primary">
+            {showHighlightGroup ? (
+              <>
+                {icon}
+                <div className="flex h-full flex-col">
+                  <div className="flex h-full items-center text-xs text-muted-foreground">{legend}</div>
+                  <div
+                    className={`mr-2 h-full items-center font-mono text-primary ${getHighlightTextSize(highlight)} ${
+                      highlight.length > 15 ? 'w-[6rem] overflow-hidden text-ellipsis whitespace-nowrap' : ''
+                    }`}
+                  >
+                    {highlight.length > 15 ? (
+                      <>
+                        <TooltipProvider>
+                          <Tooltip delayDuration={200}>
+                            <TooltipTrigger asChild>
+                              <span>{highlight}</span>
+                            </TooltipTrigger>
+                            <TooltipContent>{highlight}</TooltipContent>
+                          </Tooltip>
+                        </TooltipProvider>
+                      </>
+                    ) : (
+                      highlight
+                    )}
+                  </div>
+                </div>
+              </>
+            ) : (
+              <div className="flex items-center text-xs text-muted-foreground">{defaultText}</div>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    </>
+  )
+}
+
+export default InfoCard

package/templates/blank/src/components/data-visualization/info-grid.tsx

@@ -1,22 +1,22 @@
-import React from 'react'
-import InfoCard from './info-card'
-
-interface InfoCards {
-  showHighlightGroup: boolean
-  highlight: string
-  legend: string
-  defaultText: string
-  icon: React.ReactNode
-}
-
-const InfoGrid = ({ infoCards }: { infoCards: InfoCards[] }) => {
-  return (
-    <div className="my-4 flex flex-wrap gap-4">
-      {infoCards.map(card => (
-        <InfoCard key={card.legend} {...card} />
-      ))}
-    </div>
-  )
-}
-
-export default InfoGrid
+import React from 'react'
+import InfoCard from './info-card'
+
+interface InfoCards {
+  showHighlightGroup: boolean
+  highlight: string
+  legend: string
+  defaultText: string
+  icon: React.ReactNode
+}
+
+const InfoGrid = ({ infoCards }: { infoCards: InfoCards[] }) => {
+  return (
+    <div className="my-4 flex flex-wrap gap-4">
+      {infoCards.map(card => (
+        <InfoCard key={card.legend} {...card} />
+      ))}
+    </div>
+  )
+}
+
+export default InfoGrid

package/templates/blank/src/components/diagram/add-node-prompt-node.tsx

@@ -0,0 +1,30 @@
+import type { Node, NodeProps } from '@xyflow/react'
+import { memo } from 'react'
+
+import { BaseNode } from '@/components/base-node'
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+
+import { ADD_NODE_PROMPT_NODE_TYPE, type AddNodePromptNodeData } from './flow-diagram-helpers'
+
+export type AddNodePromptFlowNode = Node<AddNodePromptNodeData, typeof ADD_NODE_PROMPT_NODE_TYPE>
+
+type AddNodePromptNodeComponentProps = NodeProps<AddNodePromptFlowNode> & {
+  onOpenAddNode: () => void
+}
+
+export const AddNodePromptNode = memo(function AddNodePromptNode({
+  selected,
+  onOpenAddNode,
+}: AddNodePromptNodeComponentProps) {
+  return (
+    <BaseNode selected={selected} className="max-w-80 border-dashed border-muted-foreground/50 bg-muted/30 px-4 py-3">
+      <p className="mb-3 text-sm text-muted-foreground">No steps yet. Add your first node to build the flow.</p>
+      <Button type="button" className={cn('nodrag w-full')} variant="outline" onClick={onOpenAddNode}>
+        Add node
+      </Button>
+    </BaseNode>
+  )
+})
+
+AddNodePromptNode.displayName = 'AddNodePromptNode'

package/templates/blank/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/blank/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/blank/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/blank/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/blank/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
+  }
+}