create-appraisejs 0.3.0 → 0.3.1-alpha.0

package/templates/starter/src/app/(base)/test-cases/create-from-template/template-selection-form.tsx

@@ -1,83 +0,0 @@
-'use client'
-
-import { Button } from '@/components/ui/button'
-import { Label } from '@/components/ui/label'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
-import { formOpts } from '@/constants/form-opts/template-selection-form-opts'
-import { useForm } from '@tanstack/react-form'
-import { ArrowRight } from 'lucide-react'
-import { useRouter } from 'next/navigation'
-import React from 'react'
-
-import {
-  getFieldErrorMessage,
-  getTemplateSelectionOptions,
-  type TemplateSelectionRow,
-  templateSelectionFieldValidator,
-} from './create-from-template-helpers'
-
-type TemplateSelectionFormProps = {
-  templateTestCases: TemplateSelectionRow[]
-}
-
-const TemplateSelectionForm = ({ templateTestCases }: TemplateSelectionFormProps) => {
-  const router = useRouter()
-  const templateOptions = getTemplateSelectionOptions(templateTestCases)
-  const form = useForm({
-    defaultValues: formOpts?.defaultValues,
-    validators: formOpts?.validators,
-    onSubmit: async ({ value }) => {
-      router.push(`/test-cases/create-from-template/generate/${value.templateTestCaseId}`)
-    },
-  })
-  return (
-    <div>
-      <form
-        onSubmit={e => {
-          e.preventDefault()
-          e.stopPropagation()
-          form.handleSubmit()
-        }}
-      >
-        <form.Field
-          name="templateTestCaseId"
-          validators={{
-            onChange: templateSelectionFieldValidator,
-          }}
-        >
-          {field => {
-            return (
-              <div className="mb-4 flex flex-col gap-2 lg:w-1/3">
-                <Label htmlFor={field.name}>Template Test Case</Label>
-                <Select onValueChange={field.handleChange} value={field.state.value}>
-                  <SelectTrigger id={field.name} aria-label="Template Test Case">
-                    <SelectValue placeholder="Select a template test case" />
-                  </SelectTrigger>
-                  <SelectContent isEmpty={templateOptions.length === 0}>
-                    {templateOptions.map(templateOption => (
-                      <SelectItem key={templateOption.value} value={templateOption.value}>
-                        {templateOption.label}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-                {field.state.meta.errors.map((error, index) => (
-                  <p key={index} className="text-xs text-pink-500">
-                    {getFieldErrorMessage(error)}
-                  </p>
-                ))}
-              </div>
-            )
-          }}
-        </form.Field>
-
-        <Button type="submit" className="w-fit hover:bg-emerald-500">
-          <span className="font-bold">Next</span>
-          <ArrowRight className="h-4 w-4" />
-        </Button>
-      </form>
-    </div>
-  )
-}
-
-export default TemplateSelectionForm

package/templates/starter/src/components/chart/pie-chart.tsx

@@ -1,73 +0,0 @@
-'use client'
-
-import React from 'react'
-import { Label } from 'recharts'
-import { ChartConfig, ChartLegend, ChartLegendContent, ChartTooltipContent } from '../ui/chart'
-import { ChartTooltip } from '../ui/chart'
-import { ChartContainer } from '../ui/chart'
-import { Pie, PieChart } from 'recharts'
-import { CardContent, CardHeader, CardTitle } from '../ui/card'
-import { Card, CardDescription } from '../ui/card'
-import { cn } from '@/lib/utils'
-
-const PieChartGraph = ({
-  chartConfig,
-  chartData,
-  chartLabelValue,
-  chartLabelText,
-  chartTitle,
-  chartDescription,
-  chartValueKey,
-  chartNameKey,
-  className,
-}: {
-  chartConfig: ChartConfig
-  chartData: Record<string, unknown>[]
-  chartLabelValue: string
-  chartLabelText: string
-  chartTitle: string
-  chartDescription: string
-  chartValueKey: string
-  chartNameKey: string
-  className?: React.ComponentProps<'div'>['className']
-}) => {
-  return (
-    <Card className={cn('flex flex-col', className)}>
-      <CardHeader className="items-center pb-0">
-        <CardTitle>{chartTitle}</CardTitle>
-        <CardDescription>{chartDescription}</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <ChartContainer config={chartConfig} className="mx-auto aspect-square max-h-[250px]">
-          <PieChart>
-            <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
-            <Pie data={chartData} dataKey={chartValueKey} nameKey={chartNameKey} innerRadius={60} strokeWidth={5}>
-              <Label
-                content={({ viewBox }) => {
-                  if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {
-                    return (
-                      <text x={viewBox.cx} y={viewBox.cy} textAnchor="middle" dominantBaseline="middle">
-                        <tspan x={viewBox.cx} y={viewBox.cy} className="fill-foreground text-3xl font-bold">
-                          {chartLabelValue}
-                        </tspan>
-                        <tspan x={viewBox.cx} y={(viewBox.cy || 0) + 24} className="fill-muted-foreground">
-                          {chartLabelText}
-                        </tspan>
-                      </text>
-                    )
-                  }
-                }}
-              />
-            </Pie>
-            <ChartLegend
-              content={<ChartLegendContent nameKey={chartNameKey} />}
-              className="-translate-y-2 flex-wrap gap-2 [&>*]:basis-1/4 [&>*]:justify-center"
-            />
-          </PieChart>
-        </ChartContainer>
-      </CardContent>
-    </Card>
-  )
-}
-
-export default PieChartGraph

package/templates/starter/src/components/data-extraction/locator-inspector.tsx

@@ -1,349 +0,0 @@
-'use client'
-
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { Separator } from '@/components/ui/separator'
-import { Badge } from '@/components/ui/badge'
-import { Textarea } from '@/components/ui/textarea'
-import { ScrollArea } from '@/components/ui/scroll-area'
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
-import { Alert, AlertDescription } from '@/components/ui/alert'
-import { Copy, Target, MousePointer, Info } from 'lucide-react'
-import { useState, useEffect, useRef } from 'react'
-import {
-  createLocatorInspectorInjectionScript,
-  generateCSSPath,
-  generateXPath,
-  getLocatorInspectorOrigin,
-  isLocatorInspectorMessage,
-} from './locator-inspector-helpers'
-
-interface SelectedElementDetails {
-  tag: string
-  id?: string
-  className?: string
-  name?: string
-  text?: string
-  cssPath: string
-  xpath: string
-  html: string
-}
-
-interface LocatorInspectorProps {
-  iframeUrl?: string
-}
-
-export default function LocatorInspector({ iframeUrl = '/sample-page' }: LocatorInspectorProps) {
-  const [isSelectionMode, setIsSelectionMode] = useState(false)
-  const [selectedElementDetails, setSelectedElementDetails] = useState<SelectedElementDetails | undefined>()
-  const iframeRef = useRef<HTMLIFrameElement>(null)
-
-  // Inject script when iframe loads
-  const handleIframeLoad = () => {
-    const iframe = iframeRef.current
-    if (!iframe?.contentWindow) return
-
-    try {
-      const script = iframe.contentDocument?.createElement('script')
-      if (script) {
-        script.textContent = createLocatorInspectorInjectionScript(window.location.origin)
-        iframe.contentDocument?.head.appendChild(script)
-      }
-    } catch (error) {
-      console.warn('Could not inject script into iframe:', error)
-    }
-  }
-
-  // Listen for messages from iframe
-  useEffect(() => {
-    const handleMessage = (event: MessageEvent) => {
-      const iframeWindow = iframeRef.current?.contentWindow
-      const iframeOrigin = getLocatorInspectorOrigin(iframeUrl, window.location.href)
-
-      if (event.source !== iframeWindow || event.origin !== iframeOrigin || !isLocatorInspectorMessage(event.data)) {
-        return
-      }
-
-      if (event.data.type === 'SELECTION_MODE_OFF') {
-        setIsSelectionMode(false)
-      } else if (event.data.type === 'ELEMENT_SELECTED') {
-        const { elementData } = event.data
-        setSelectedElementDetails({
-          tag: elementData.tagName.toLowerCase(),
-          id: elementData.id || undefined,
-          className: elementData.className || undefined,
-          name: elementData.name || undefined,
-          text: elementData.textContent || undefined,
-          cssPath: generateCSSPath(elementData),
-          xpath: generateXPath(elementData),
-          html: elementData.outerHTML,
-        })
-      }
-    }
-
-    window.addEventListener('message', handleMessage)
-    return () => window.removeEventListener('message', handleMessage)
-  }, [iframeUrl])
-
-  const copyToClipboard = (text: string) => {
-    navigator.clipboard.writeText(text)
-  }
-
-  const toggleSelectionMode = () => {
-    const newSelectionMode = !isSelectionMode
-    setIsSelectionMode(newSelectionMode)
-
-    const iframe = iframeRef.current
-    const iframeOrigin = getLocatorInspectorOrigin(iframeUrl, window.location.href)
-    if (iframe?.contentWindow) {
-      iframe.contentWindow.postMessage(
-        {
-          type: 'TOGGLE_SELECTION_MODE',
-          isSelectionMode: newSelectionMode,
-        },
-        iframeOrigin,
-      )
-    }
-  }
-
-  // Render property field with copy button
-  const renderPropertyField = (id: string, label: string, value: string, bgColor?: string, borderColor?: string) => (
-    <div className="space-y-2">
-      <Label htmlFor={id} className="text-sm font-medium">
-        {label}
-      </Label>
-      <div className="flex">
-        <Input
-          id={id}
-          value={value}
-          readOnly
-          className={`rounded-r-none border-r-0 font-mono text-sm ${bgColor || ''} ${borderColor || ''}`}
-        />
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              size="sm"
-              variant="outline"
-              className="h-10 w-10 rounded-l-none border-l-0 p-0"
-              onClick={() => copyToClipboard(value)}
-            >
-              <Copy className="h-3 w-3" />
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent>
-            <p>Copy {label.toLowerCase()}</p>
-          </TooltipContent>
-        </Tooltip>
-      </div>
-    </div>
-  )
-
-  return (
-    <TooltipProvider>
-      <div className="min-h-screen bg-gray-50">
-        {/* Header */}
-        <header className="border-b bg-background shadow-sm">
-          <div className="container mx-auto flex items-center justify-between px-6 py-4">
-            <div className="space-y-1">
-              <h1 className="text-2xl font-bold tracking-tight">Locator Explorer</h1>
-              <p className="text-sm text-muted-foreground">Inspect and generate locators for test automation</p>
-            </div>
-            <div className="flex items-center gap-3">
-              <Button
-                onClick={toggleSelectionMode}
-                variant={isSelectionMode ? 'default' : 'outline'}
-                size="sm"
-                className="flex items-center gap-2"
-              >
-                {isSelectionMode ? (
-                  <>
-                    <MousePointer className="h-4 w-4" />
-                    Exit Selection
-                  </>
-                ) : (
-                  <>
-                    <Target className="h-4 w-4" />
-                    Select Element
-                  </>
-                )}
-              </Button>
-              {isSelectionMode && (
-                <Badge variant="secondary" className="flex items-center gap-2">
-                  <div className="h-2 w-2 animate-pulse rounded-full bg-blue-500"></div>
-                  Click an element to inspect
-                </Badge>
-              )}
-            </div>
-          </div>
-        </header>
-
-        {/* Main Content */}
-        <div className="flex h-[calc(100vh-80px)]">
-          {/* Left Column - Application Under Test */}
-          <div className="flex-1 p-6">
-            <Card className="h-full shadow-lg">
-              <CardHeader className="pb-3">
-                <CardTitle className="text-lg font-semibold text-gray-800">Application Under Test</CardTitle>
-              </CardHeader>
-              <CardContent className="p-0">
-                <div className="h-[80vh] overflow-hidden rounded-b-lg bg-gray-100">
-                  <iframe
-                    ref={iframeRef}
-                    src={iframeUrl}
-                    className="h-full w-full border-0"
-                    title="Application Under Test"
-                    sandbox="allow-same-origin allow-scripts allow-forms"
-                    onLoad={handleIframeLoad}
-                  />
-                </div>
-              </CardContent>
-            </Card>
-          </div>
-
-          {/* Right Column - Inspector Sidebar */}
-          <div className="w-96 p-6 pl-0">
-            <Card className="h-full shadow-lg">
-              <CardHeader className="pb-3">
-                <CardTitle className="flex items-center gap-2 text-lg font-semibold">
-                  <span className="truncate">Selected Element</span>
-                  {selectedElementDetails && (
-                    <Badge variant="outline" className="shrink-0 font-mono text-xs">
-                      {selectedElementDetails.tag.toUpperCase()}
-                    </Badge>
-                  )}
-                </CardTitle>
-              </CardHeader>
-              <CardContent className="p-0">
-                <ScrollArea className="h-[calc(80vh-60px)] p-6">
-                  {selectedElementDetails ? (
-                    <div className="space-y-6">
-                      {/* Element Properties */}
-                      <div className="space-y-4">
-                        <h3 className="text-sm font-medium uppercase tracking-wide text-muted-foreground">
-                          Properties
-                        </h3>
-                        <div className="space-y-3">
-                          {renderPropertyField(
-                            'tag',
-                            'Tag Name',
-                            selectedElementDetails.tag,
-                            'bg-blue-50',
-                            'border-blue-200',
-                          )}
-                          {selectedElementDetails.id && renderPropertyField('id', 'ID', selectedElementDetails.id)}
-                          {selectedElementDetails.className &&
-                            renderPropertyField('class', 'Class', selectedElementDetails.className)}
-                          {selectedElementDetails.name &&
-                            renderPropertyField('name', 'Name', selectedElementDetails.name)}
-                          {selectedElementDetails.text &&
-                            renderPropertyField('text', 'Text Content', selectedElementDetails.text)}
-                        </div>
-                      </div>
-
-                      <Separator />
-
-                      {/* Selectors */}
-                      <div className="space-y-4">
-                        <h3 className="text-sm font-medium uppercase tracking-wide text-muted-foreground">Locators</h3>
-                        <div className="space-y-3">
-                          <div className="space-y-2">
-                            <Label htmlFor="css" className="flex flex-wrap items-center gap-2 text-sm font-medium">
-                              <span>CSS Selector</span>
-                              <Badge variant="secondary" className="shrink-0 text-xs">
-                                Recommended
-                              </Badge>
-                            </Label>
-                            <div className="flex">
-                              <Input
-                                id="css"
-                                value={selectedElementDetails.cssPath}
-                                readOnly
-                                className="rounded-r-none border-r-0 border-green-200 bg-green-50 font-mono text-sm"
-                              />
-                              <Tooltip>
-                                <TooltipTrigger asChild>
-                                  <Button
-                                    size="sm"
-                                    variant="outline"
-                                    className="h-10 w-10 rounded-l-none border-l-0 p-0"
-                                    onClick={() => copyToClipboard(selectedElementDetails.cssPath)}
-                                  >
-                                    <Copy className="h-3 w-3" />
-                                  </Button>
-                                </TooltipTrigger>
-                                <TooltipContent>
-                                  <p>Copy CSS selector</p>
-                                </TooltipContent>
-                              </Tooltip>
-                            </div>
-                          </div>
-
-                          {renderPropertyField(
-                            'xpath',
-                            'XPath',
-                            selectedElementDetails.xpath,
-                            'bg-yellow-50',
-                            'border-yellow-200',
-                          )}
-                        </div>
-                      </div>
-
-                      <Separator />
-
-                      {/* HTML Snippet */}
-                      <div className="space-y-3">
-                        <Label className="text-sm font-medium">HTML Snippet</Label>
-                        <div className="flex">
-                          <Textarea
-                            value={selectedElementDetails.html}
-                            readOnly
-                            className="min-h-[120px] flex-1 resize-none rounded-r-none border-r-0 font-mono text-xs"
-                          />
-                          <Tooltip>
-                            <TooltipTrigger asChild>
-                              <Button
-                                size="sm"
-                                variant="outline"
-                                className="w-10 self-start rounded-l-none border-l-0"
-                                style={{ height: '120px' }}
-                                onClick={() => copyToClipboard(selectedElementDetails.html)}
-                              >
-                                <Copy className="h-3 w-3" />
-                              </Button>
-                            </TooltipTrigger>
-                            <TooltipContent>
-                              <p>Copy HTML</p>
-                            </TooltipContent>
-                          </Tooltip>
-                        </div>
-                      </div>
-                    </div>
-                  ) : (
-                    <div className="flex h-full flex-col items-center justify-center p-8 text-center">
-                      <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-muted">
-                        <Target className="h-8 w-8 text-muted-foreground" />
-                      </div>
-                      <h3 className="mb-2 text-lg font-semibold">No Element Selected</h3>
-                      <p className="mb-4 max-w-sm break-words text-sm text-muted-foreground">
-                        Click the &quot;Select Element&quot; button above, then click on any element in the application
-                        to inspect its properties.
-                      </p>
-                      <Alert className="max-w-sm">
-                        <Info className="h-4 w-4" />
-                        <AlertDescription className="break-words">
-                          Use the element selector to generate reliable locators for your test automation scripts.
-                        </AlertDescription>
-                      </Alert>
-                    </div>
-                  )}
-                </ScrollArea>
-              </CardContent>
-            </Card>
-          </div>
-        </div>
-      </div>
-    </TooltipProvider>
-  )
-}

package/templates/starter/src/components/diagram/edit-header-option.tsx

@@ -1,36 +0,0 @@
-import { NodeHeaderAction, NodeHeaderActionProps } from '@/components/node-header'
-import { useCallback } from 'react'
-import { useNodeId } from '@xyflow/react'
-import { Pencil } from 'lucide-react'
-import React from 'react'
-
-export interface NodeHeaderEditActionProps extends Omit<NodeHeaderActionProps, 'onClick'> {
-  onClick?: (nodeId: string, event: React.MouseEvent) => void
-}
-
-/**
- * A copy action button that passes the node's id to the `onClick` handler when
- * clicked.
- */
-export const NodeHeaderEditAction = React.forwardRef<HTMLButtonElement, NodeHeaderEditActionProps>(
-  ({ onClick, ...props }, ref) => {
-    const id = useNodeId()
-
-    const handleClick = useCallback(
-      (event: React.MouseEvent) => {
-        if (!onClick || !id) return
-
-        onClick(id, event)
-      },
-      [onClick, id],
-    )
-
-    return (
-      <NodeHeaderAction ref={ref} onClick={handleClick} variant="ghost" {...props}>
-        <Pencil />
-      </NodeHeaderAction>
-    )
-  },
-)
-
-NodeHeaderEditAction.displayName = 'NodeHeaderEditAction'