create-appraisejs 0.2.0-alpha.6 → 0.3.0-alpha.0

package/templates/default/src/components/data-state/empty-state.tsx

@@ -1,40 +1,40 @@
-import React from 'react'
-import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from '../ui/empty'
-import { Button } from '../ui/button'
-import Link from 'next/link'
-import { SquarePen } from 'lucide-react'
-
-const EmptyState = ({
-  icon,
-  title,
-  description,
-  createRoute,
-  createText,
-}: {
-  icon: React.ReactNode
-  title: string
-  description: string
-  createRoute: string
-  createText: string
-}) => {
-  return (
-    <Empty>
-      <EmptyHeader>
-        <EmptyMedia variant="icon">{icon}</EmptyMedia>
-        <EmptyTitle>{title}</EmptyTitle>
-        <EmptyDescription>{description}</EmptyDescription>
-      </EmptyHeader>
-      <EmptyContent>
-        <Button asChild>
-          <Link href={createRoute}>
-            <SquarePen className="h-4 w-4" />
-            <span className="sr-only">{createText}</span>
-            {createText}
-          </Link>
-        </Button>
-      </EmptyContent>
-    </Empty>
-  )
-}
-
-export default EmptyState
+import React from 'react'
+import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from '../ui/empty'
+import { Button } from '../ui/button'
+import Link from 'next/link'
+import { SquarePen } from 'lucide-react'
+
+const EmptyState = ({
+  icon,
+  title,
+  description,
+  createRoute,
+  createText,
+}: {
+  icon: React.ReactNode
+  title: string
+  description: string
+  createRoute: string
+  createText: string
+}) => {
+  return (
+    <Empty>
+      <EmptyHeader>
+        <EmptyMedia variant="icon">{icon}</EmptyMedia>
+        <EmptyTitle>{title}</EmptyTitle>
+        <EmptyDescription>{description}</EmptyDescription>
+      </EmptyHeader>
+      <EmptyContent>
+        <Button asChild>
+          <Link href={createRoute}>
+            <SquarePen className="h-4 w-4" />
+            <span className="sr-only">{createText}</span>
+            {createText}
+          </Link>
+        </Button>
+      </EmptyContent>
+    </Empty>
+  )
+}
+
+export default EmptyState

package/templates/default/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/default/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/default/src/components/diagram/button-edge.tsx

@@ -1,54 +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>
-    </>
-  )
-}
+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/default/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/default/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)
+}