create-appraisejs 0.3.0-alpha.0 → 0.3.0

package/templates/starter/src/components/diagram/flow-host-helpers.ts

@@ -0,0 +1,51 @@
+import type { NodeOrderMap, TemplateTestCaseNodeOrderMap } from '@/types/diagram/diagram'
+
+type DiagramNodeOrder = NodeOrderMap | TemplateTestCaseNodeOrderMap
+type DiagramNodeParameter =
+  | NodeOrderMap[string]['parameters'][number]
+  | TemplateTestCaseNodeOrderMap[string]['parameters'][number]
+
+export function toNodeOrderMap(nodeOrder: DiagramNodeOrder): NodeOrderMap {
+  const convertedNodeOrder: NodeOrderMap = {}
+
+  Object.entries(nodeOrder).forEach(([key, nodeData]) => {
+    convertedNodeOrder[key] = {
+      order: nodeData.order,
+      label: nodeData.label,
+      gherkinStep: nodeData.gherkinStep,
+      icon: nodeData.icon,
+      isFirstNode: 'isFirstNode' in nodeData ? nodeData.isFirstNode : undefined,
+      parameters: nodeData.parameters.map((parameter: DiagramNodeParameter) => ({
+        name: parameter.name,
+        value: 'defaultValue' in parameter ? parameter.defaultValue : parameter.value,
+        type: parameter.type,
+        order: parameter.order,
+      })),
+      templateStepId: nodeData.templateStepId,
+    }
+  })
+
+  return convertedNodeOrder
+}
+
+export function toTemplateTestCaseNodeOrderMap(nodeOrder: DiagramNodeOrder): TemplateTestCaseNodeOrderMap {
+  const convertedNodeOrder: TemplateTestCaseNodeOrderMap = {}
+
+  Object.entries(nodeOrder).forEach(([key, nodeData]) => {
+    convertedNodeOrder[key] = {
+      order: nodeData.order,
+      label: nodeData.label,
+      gherkinStep: nodeData.gherkinStep,
+      icon: nodeData.icon,
+      parameters: nodeData.parameters.map((parameter: DiagramNodeParameter) => ({
+        name: parameter.name,
+        defaultValue: 'value' in parameter ? parameter.value : parameter.defaultValue,
+        type: parameter.type,
+        order: parameter.order,
+      })),
+      templateStepId: nodeData.templateStepId,
+    }
+  })
+
+  return convertedNodeOrder
+}

package/templates/starter/src/components/diagram/node-form-helpers.test.ts

@@ -0,0 +1,92 @@
+import { StepParameterType, TemplateStepIcon, TemplateStepType } from '@prisma/client'
+import { describe, expect, it } from 'vitest'
+
+import {
+  buildNodeFormSubmitValue,
+  createInitialParametersForTemplateStep,
+  getGherkinPreview,
+  getSelectedTemplateIcon,
+  getSelectedTemplateStep,
+  getSelectedTemplateStepParams,
+  validateNodeFormValues,
+} from './node-form-helpers'
+
+describe('node-form helpers', () => {
+  const templateSteps = [
+    {
+      id: 'step-1',
+      name: 'Click',
+      icon: TemplateStepIcon.MOUSE,
+      signature: 'click {string}',
+      type: TemplateStepType.ACTION,
+    },
+    {
+      id: 'step-2',
+      name: 'Check',
+      icon: TemplateStepIcon.VALIDATION,
+      signature: 'see {string}',
+      type: TemplateStepType.ASSERTION,
+    },
+  ] as never
+
+  const templateStepParams = [
+    {
+      id: 'param-1',
+      name: 'target',
+      type: StepParameterType.STRING,
+      order: 1,
+      templateStepId: 'step-1',
+    },
+    {
+      id: 'param-2',
+      name: 'expected',
+      type: StepParameterType.STRING,
+      order: 1,
+      templateStepId: 'step-2',
+    },
+  ] as never
+
+  it('selects template steps and related params', () => {
+    expect(getSelectedTemplateStep(templateSteps, 'step-1')?.name).toBe('Click')
+    expect(getSelectedTemplateStepParams(templateStepParams, 'step-2')).toEqual([
+      expect.objectContaining({ name: 'expected' }),
+    ])
+  })
+
+  it('creates initial parameters and gherkin previews', () => {
+    const parameters = createInitialParametersForTemplateStep(getSelectedTemplateStepParams(templateStepParams, 'step-1'))
+
+    expect(parameters).toEqual([
+      {
+        name: 'target',
+        value: '',
+        type: StepParameterType.STRING,
+        order: 1,
+      },
+    ])
+    expect(
+      getGherkinPreview(templateSteps[0], [
+        { name: 'target', value: 'Submit', type: StepParameterType.STRING, order: 1 },
+      ]),
+    ).toBe('When click "Submit"')
+  })
+
+  it('validates and shapes submit payloads', () => {
+    expect(validateNodeFormValues('', '')).toMatchObject({ success: false })
+    expect(getSelectedTemplateIcon(templateSteps[0])).toBe(TemplateStepIcon.MOUSE)
+
+    expect(
+      buildNodeFormSubmitValue(
+        { label: 'Submit click' },
+        [{ name: 'target', value: 'Submit', type: StepParameterType.STRING, order: 1 }],
+        'When click "Submit"',
+        'step-1',
+      ),
+    ).toEqual({
+      label: 'Submit click',
+      parameters: [{ name: 'target', value: 'Submit', type: StepParameterType.STRING, order: 1 }],
+      gherkinStep: 'When click "Submit"',
+      templateStepId: 'step-1',
+    })
+  })
+})

package/templates/starter/src/components/diagram/node-form-helpers.ts

@@ -0,0 +1,100 @@
+import { format } from 'date-fns'
+import {
+  StepParameterType,
+  TemplateStepIcon,
+  type Locator,
+  type LocatorGroup,
+  type TemplateStep,
+  type TemplateStepParameter,
+} from '@prisma/client'
+import { z } from 'zod'
+
+import type { NodeData } from '@/constants/form-opts/diagram/node-form'
+import { generateGherkinStep } from '@/lib/transformers/gherkin-converter'
+
+export const nodeFormErrorSchema = 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' }),
+})
+
+export type NodeFormErrors = z.inferFlattenedErrors<typeof nodeFormErrorSchema>['fieldErrors']
+
+export type NodeFormProps = {
+  onSubmitAction: (values: NodeData) => void
+  initialValues: NodeData
+  templateSteps: TemplateStep[]
+  templateStepParams: TemplateStepParameter[]
+  showAddNodeDialog: boolean
+  locators: Array<Pick<Locator, 'id' | 'name' | 'locatorGroupId'>>
+  locatorGroups: Array<Pick<LocatorGroup, 'id' | 'name'>>
+  setShowAddNodeDialog: (show: boolean) => void
+  defaultValueInput?: boolean
+}
+
+export function getSelectedTemplateStep(templateSteps: TemplateStep[], templateStepId: string) {
+  return templateSteps.find(step => step.id === templateStepId) ?? null
+}
+
+export function getSelectedTemplateStepParams(templateStepParams: TemplateStepParameter[], templateStepId: string) {
+  return templateStepParams.filter(parameter => parameter.templateStepId === templateStepId)
+}
+
+function getDefaultParameterValue(type: StepParameterType) {
+  switch (type) {
+    case StepParameterType.NUMBER:
+      return '0'
+    case StepParameterType.STRING:
+    case StepParameterType.LOCATOR:
+      return ''
+    case StepParameterType.BOOLEAN:
+      return 'false'
+    case StepParameterType.DATE:
+      return format(new Date(), 'PPP')
+  }
+}
+
+export function createInitialParametersForTemplateStep(templateStepParams: TemplateStepParameter[]) {
+  return templateStepParams.map(parameter => ({
+    name: parameter.name,
+    value: getDefaultParameterValue(parameter.type),
+    type: parameter.type,
+    order: parameter.order,
+  }))
+}
+
+export function getGherkinPreview(
+  templateStep: TemplateStep | null,
+  parameters: NodeData['parameters'],
+) {
+  if (!templateStep?.signature) {
+    return ''
+  }
+
+  return generateGherkinStep(templateStep.type, templateStep.signature, parameters)
+}
+
+export function validateNodeFormValues(label: FormDataEntryValue | undefined, templateStepId: string) {
+  return nodeFormErrorSchema.safeParse({
+    label,
+    templateStepId,
+  })
+}
+
+export function buildNodeFormSubmitValue(
+  formValues: Record<string, FormDataEntryValue>,
+  parameters: NodeData['parameters'],
+  gherkinStep: string,
+  templateStepId: string,
+) {
+  return {
+    ...formValues,
+    parameters,
+    label: String(formValues.label ?? ''),
+    gherkinStep,
+    templateStepId,
+  } satisfies NodeData
+}
+
+export function getSelectedTemplateIcon(templateStep: TemplateStep | null) {
+  return templateStep?.icon ?? TemplateStepIcon.MOUSE
+}

package/templates/starter/src/components/diagram/node-form.test.tsx

@@ -0,0 +1,168 @@
+// @vitest-environment jsdom
+
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { StepParameterType, TemplateStepIcon, TemplateStepType } from '@prisma/client'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import NodeForm from './node-form'
+
+const validateMock = vi.fn(() => true)
+
+vi.mock('./dynamic-parameters', async () => {
+  const React = await import('react')
+
+  const MockDynamicFormFields = React.forwardRef<
+    { validate: () => boolean },
+    {
+      onChange?: (values: Array<{ name: string; value: string; type: StepParameterType; order: number }>) => void
+    }
+  >(({ onChange }, ref) => {
+    React.useImperativeHandle(ref, () => ({
+      validate: validateMock,
+    }))
+    return (
+      <button
+        type="button"
+        onClick={() =>
+          onChange?.([
+            {
+              name: 'target',
+              value: 'Submit',
+              type: StepParameterType.STRING,
+              order: 1,
+            },
+          ])
+        }
+      >
+        Apply Parameters
+      </button>
+    )
+  })
+
+  MockDynamicFormFields.displayName = 'MockDynamicFormFields'
+
+  return {
+    __esModule: true,
+    default: MockDynamicFormFields,
+  }
+})
+
+vi.mock('./template-step-combobox', () => ({
+  __esModule: true,
+  default: ({
+    value,
+    onValueChange,
+    templateSteps,
+    id,
+  }: {
+    value: string
+    onValueChange: (value: string) => void
+    templateSteps: Array<{ id: string; name: string }>
+    id?: string
+  }) => (
+    <select aria-label="Template Step" id={id} value={value} onChange={event => onValueChange(event.target.value)}>
+      <option value="">Select a template step</option>
+      {templateSteps.map(step => (
+        <option key={step.id} value={step.id}>
+          {step.name}
+        </option>
+      ))}
+    </select>
+  ),
+}))
+
+describe('NodeForm', () => {
+  beforeEach(() => {
+    validateMock.mockReturnValue(true)
+  })
+
+  it('submits the shaped node payload', async () => {
+    const user = userEvent.setup()
+    const onSubmitAction = vi.fn()
+
+    render(
+      <NodeForm
+        onSubmitAction={onSubmitAction}
+        initialValues={{
+          label: '',
+          gherkinStep: '',
+          templateStepId: '',
+          parameters: [],
+        }}
+        templateSteps={[
+          {
+            id: 'step-1',
+            name: 'Click',
+            icon: TemplateStepIcon.MOUSE,
+            signature: 'click {string}',
+            type: TemplateStepType.ACTION,
+          } as never,
+        ]}
+        templateStepParams={[
+          {
+            id: 'param-1',
+            name: 'target',
+            type: StepParameterType.STRING,
+            order: 1,
+            templateStepId: 'step-1',
+          } as never,
+        ]}
+        showAddNodeDialog
+        locators={[]}
+        locatorGroups={[]}
+        setShowAddNodeDialog={vi.fn()}
+      />,
+    )
+
+    await user.type(screen.getByLabelText('Label'), 'Click submit')
+    await user.selectOptions(screen.getByLabelText('Template Step'), 'step-1')
+    await user.click(screen.getByRole('button', { name: 'Apply Parameters' }))
+
+    await user.click(screen.getByRole('button', { name: 'Save' }))
+
+    await waitFor(() => {
+      expect(onSubmitAction).toHaveBeenCalledWith({
+        icon: TemplateStepIcon.MOUSE,
+        label: 'Click submit',
+        parameters: [
+          {
+            name: 'target',
+            value: 'Submit',
+            type: StepParameterType.STRING,
+            order: 1,
+          },
+        ],
+        gherkinStep: 'When click "Submit"',
+        templateStepId: 'step-1',
+      })
+    })
+  })
+
+  it('shows validation feedback when required fields are missing', async () => {
+    const user = userEvent.setup()
+
+    render(
+      <NodeForm
+        onSubmitAction={vi.fn()}
+        initialValues={{
+          label: '',
+          gherkinStep: '',
+          templateStepId: '',
+          parameters: [],
+        }}
+        templateSteps={[]}
+        templateStepParams={[]}
+        showAddNodeDialog
+        locators={[]}
+        locatorGroups={[]}
+        setShowAddNodeDialog={vi.fn()}
+      />,
+    )
+
+    await user.click(screen.getByRole('button', { name: 'Save' }))
+
+    expect(screen.getByText('Label must be at least 3 characters')).toBeInTheDocument()
+    expect(screen.getByText('Template step is required')).toBeInTheDocument()
+  })
+})

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

@@ -0,0 +1,199 @@
+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 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 ErrorMessage from '@/components/form/error-message'
+import {
+  buildNodeFormSubmitValue,
+  createInitialParametersForTemplateStep,
+  getGherkinPreview,
+  getSelectedTemplateIcon,
+  getSelectedTemplateStep,
+  getSelectedTemplateStepParams,
+  type NodeFormErrors,
+  type NodeFormProps,
+  validateNodeFormValues,
+} from './node-form-helpers'
+
+const NodeForm = ({
+  onSubmitAction,
+  initialValues,
+  templateSteps,
+  templateStepParams,
+  showAddNodeDialog,
+  locators,
+  locatorGroups,
+  setShowAddNodeDialog,
+  defaultValueInput = false,
+}: NodeFormProps) => {
+  const dynamicFormRef = useRef<DynamicFormFieldsRef>(null)
+  const [selectedTemplateId, setSelectedTemplateId] = useState(initialValues.templateStepId)
+  const [selectedTemplateStep, setSelectedTemplateStep] = useState(() =>
+    getSelectedTemplateStep(templateSteps, initialValues.templateStepId),
+  )
+  const [selectedTemplateStepParams, setSelectedTemplateStepParams] = useState(() =>
+    getSelectedTemplateStepParams(templateStepParams, initialValues.templateStepId),
+  )
+  const [parameters, setParameters] = useState<
+    {
+      name: string
+      value: string
+      type: NodeData['parameters'][number]['type']
+      order: number
+    }[]
+  >(initialValues.parameters ?? [])
+  const [gherkinStep, setGherkinStep] = useState<string>(initialValues.gherkinStep ?? '')
+  const [errors, setErrors] = useState<NodeFormErrors>({})
+
+  useEffect(() => {
+    queueMicrotask(() => {
+      setSelectedTemplateId(initialValues.templateStepId)
+      const step = getSelectedTemplateStep(templateSteps, initialValues.templateStepId)
+      setSelectedTemplateStep(step)
+      setSelectedTemplateStepParams(getSelectedTemplateStepParams(templateStepParams, 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 = getSelectedTemplateStep(templateSteps, value)
+      if (step) {
+        setSelectedTemplateStep(step)
+        const newParams = getSelectedTemplateStepParams(templateStepParams, step.id)
+        setSelectedTemplateStepParams(newParams)
+        const initialParamsForStep = createInitialParametersForTemplateStep(newParams)
+        setParameters(initialParamsForStep)
+        setGherkinStep(getGherkinPreview(step, initialParamsForStep))
+      }
+    },
+    [templateStepParams, templateSteps],
+  )
+
+  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 parsed = validateNodeFormValues(formValues.label, selectedTemplateId)
+
+    if (!parsed.success || !isDynamicFormValid) {
+      if (!parsed.success) {
+        setErrors(parsed.error.flatten().fieldErrors)
+      }
+      return
+    }
+
+    setErrors({})
+    onSubmitAction(buildNodeFormSubmitValue(formValues, parameters, gherkinStep, selectedTemplateId))
+  }
+
+  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])
+                  setGherkinStep(getGherkinPreview(selectedTemplateStep, values))
+                }}
+                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={getSelectedTemplateIcon(selectedTemplateStep)}
+            />
+          </div>
+          <DialogFooter>
+            <DialogClose asChild>
+              <Button variant="outline">Cancel</Button>
+            </DialogClose>
+            <Button type="submit">Save</Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export default NodeForm

package/templates/starter/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('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