create-appraisejs 0.3.0-alpha.0 → 0.3.0

package/templates/starter/src/app/globals.css

@@ -0,0 +1,90 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+@layer base {
+  :root {
+    --background: oklch(0.2077 0.0398 265.7549);
+    --foreground: oklch(0.8717 0.0093 258.3382);
+    --card: oklch(0.2795 0.0368 260.031);
+    --card-foreground: oklch(0.8717 0.0093 258.3382);
+    --popover: oklch(0.2795 0.0368 260.031);
+    --popover-foreground: oklch(0.8717 0.0093 258.3382);
+    --primary: oklch(0.7729 0.1535 163.2231);
+    --primary-foreground: oklch(0.2077 0.0398 265.7549);
+    --secondary: oklch(0.3351 0.0331 260.912);
+    --secondary-foreground: oklch(0.7118 0.0129 286.0665);
+    --muted: oklch(0.2463 0.0275 259.9628);
+    --muted-foreground: oklch(0.551 0.0234 264.3637);
+    --accent: oklch(0.3729 0.0306 259.7328);
+    --accent-foreground: oklch(0.7118 0.0129 286.0665);
+    --destructive: oklch(0.6368 0.2078 25.3313);
+    --destructive-foreground: oklch(0.2077 0.0398 265.7549);
+    --border: oklch(0.4461 0.0263 256.8018);
+    --input: oklch(0.4461 0.0263 256.8018);
+    --ring: oklch(0.7729 0.1535 163.2231);
+    --chart-1: oklch(0.7729 0.1535 163.2231);
+    --chart-2: oklch(0.7845 0.1325 181.912);
+    --chart-3: oklch(0.7227 0.192 149.5793);
+    --chart-4: oklch(0.6959 0.1491 162.4796);
+    --chart-5: oklch(0.596 0.1274 163.2254);
+    --sidebar: oklch(0.2795 0.0368 260.031);
+    --sidebar-foreground: oklch(0.8717 0.0093 258.3382);
+    --sidebar-primary: oklch(0.7729 0.1535 163.2231);
+    --sidebar-primary-foreground: oklch(0.2077 0.0398 265.7549);
+    --sidebar-accent: oklch(0.3729 0.0306 259.7328);
+    --sidebar-accent-foreground: oklch(0.7118 0.0129 286.0665);
+    --sidebar-border: oklch(0.4461 0.0263 256.8018);
+    --sidebar-ring: oklch(0.7729 0.1535 163.2231);
+    --font-sans: DM Sans, sans-serif;
+    --font-serif: Lora, serif;
+    --font-mono: IBM Plex Mono, monospace;
+    --radius: 0.5rem;
+    --shadow-x: 0px;
+    --shadow-y: 4px;
+    --shadow-blur: 8px;
+    --shadow-spread: -1px;
+    --shadow-opacity: 0.1;
+    --shadow-color: hsl(0 0% 0%);
+    --shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
+    --shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
+    --shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 1px 2px -2px hsl(0 0% 0% / 0.1);
+    --shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 1px 2px -2px hsl(0 0% 0% / 0.1);
+    --shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 2px 4px -2px hsl(0 0% 0% / 0.1);
+    --shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 4px 6px -2px hsl(0 0% 0% / 0.1);
+    --shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 8px 10px -2px hsl(0 0% 0% / 0.1);
+    --shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25);
+    --shadow-offset-x: 0px;
+    --shadow-offset-y: 4px;
+    --letter-spacing: 0em;
+    --spacing: 0.25rem;
+  }
+
+  .theme {
+    --font-sans: DM Sans, sans-serif;
+    --font-mono: IBM Plex Mono, monospace;
+    --font-serif: Lora, serif;
+    --radius: 0.5rem;
+    --tracking-tighter: calc(var(--tracking-normal) - 0.05em);
+    --tracking-tight: calc(var(--tracking-normal) - 0.025em);
+    --tracking-wide: calc(var(--tracking-normal) + 0.025em);
+    --tracking-wider: calc(var(--tracking-normal) + 0.05em);
+    --tracking-widest: calc(var(--tracking-normal) + 0.1em);
+  }
+  body {
+    letter-spacing: var(--tracking-normal);
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/templates/starter/src/app/layout.tsx

@@ -0,0 +1,207 @@
+import type { Metadata, Viewport } from 'next'
+import { Inter, Inter_Tight } from 'next/font/google'
+import './globals.css'
+import { ThemeProvider } from '@/components/theme/theme-provider'
+import { Toaster } from '@/components/ui/toaster'
+import Logo from '@/components/logo'
+import Link from 'next/link'
+import NavMenuCardDeck from '@/components/navigation/nav-menu-card-deck'
+import NavCommand from '@/components/navigation/nav-command'
+import NavLink from '@/components/navigation/nav-link'
+import {
+  Blocks,
+  Bot,
+  BrickWall,
+  Code,
+  Component,
+  FileCheck,
+  FileSliders,
+  Group,
+  LayoutDashboard,
+  LayoutTemplate,
+  ListChecks,
+  Puzzle,
+  Server,
+  Settings2,
+  Tag,
+  TestTubeDiagonal,
+  TestTubes,
+} from 'lucide-react'
+
+const inter = Inter({
+  variable: '--font-inter',
+  subsets: ['latin'],
+})
+
+const interTight = Inter_Tight({
+  variable: '--font-inter-tight',
+  subsets: ['latin'],
+})
+
+const appTitle = 'AppraiseJS'
+const appDescription =
+  'AppraiseJS helps teams organize automated tests, execute suites, and review results from one dashboard.'
+
+export const viewport: Viewport = {
+  colorScheme: 'dark',
+  themeColor: '#09090b',
+}
+
+export const metadata: Metadata = {
+  title: {
+    default: appTitle,
+    template: `%s | ${appTitle}`,
+  },
+  description: appDescription,
+  applicationName: appTitle,
+  keywords: ['AppraiseJS', 'test automation', 'QA', 'dashboard', 'test execution'],
+  openGraph: {
+    title: appTitle,
+    description: appDescription,
+    siteName: appTitle,
+    type: 'website',
+  },
+  twitter: {
+    card: 'summary',
+    title: appTitle,
+    description: appDescription,
+  },
+  appleWebApp: {
+    capable: true,
+    title: appTitle,
+    statusBarStyle: 'black-translucent',
+  },
+  icons: {
+    icon: [
+      { url: '/favicon.svg', type: 'image/svg+xml' },
+      { url: '/favicon.ico', sizes: 'any' },
+    ],
+    shortcut: ['/favicon.svg'],
+    other: [{ rel: 'mask-icon', url: '/favicon.svg', color: '#5cb85c' }],
+  },
+}
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return (
+    <html lang="en" className="dark" suppressHydrationWarning>
+      <body className={`${inter.variable} ${interTight.variable} min-h-screen antialiased`}>
+        <ThemeProvider>
+          <div className="mx-auto lg:max-w-screen-xl 2xl:max-w-screen-2xl">
+            <nav className="mb-6 py-2">
+              <div className="flex items-center gap-1">
+                <div className="-ml-2">
+                  <Link href="/">
+                    <Logo />
+                  </Link>
+                </div>
+                <NavLink href="/" icon={<LayoutDashboard className="h-5 w-5 text-primary" />}>
+                  Dashboard
+                </NavLink>
+                <NavMenuCardDeck
+                  containerButtonText="Automate"
+                  containerButtonIcon={<Bot className="h-5 w-5 text-primary" />}
+                  dropdownItems={[
+                    {
+                      text: 'Test Suites',
+                      icon: <TestTubes className="h-6 w-6 text-primary" />,
+                      href: '/test-suites',
+                      description: 'Group tests into logical units',
+                    },
+                    {
+                      text: 'Test Cases',
+                      icon: <TestTubeDiagonal className="h-6 w-6 text-primary" />,
+                      href: '/test-cases',
+                      description: 'Define test scenarios',
+                    },
+                    {
+                      text: 'Test Runs',
+                      icon: <ListChecks className="h-6 w-6 text-primary" />,
+                      href: '/test-runs',
+                      description: 'Execute test scenarios',
+                    },
+                    {
+                      text: 'Reports',
+                      icon: <FileCheck className="h-6 w-6 text-primary" />,
+                      href: '/reports',
+                      description: 'Analyze test results',
+                    },
+                  ]}
+                />
+                <NavMenuCardDeck
+                  containerButtonText="Template"
+                  containerButtonIcon={<BrickWall className="h-5 w-5 text-primary" />}
+                  dropdownItems={[
+                    {
+                      text: 'Template Steps',
+                      icon: <LayoutTemplate className="h-6 w-6 text-primary" />,
+                      href: '/template-steps',
+                      description: 'Define reusable test steps',
+                    },
+                    {
+                      text: 'Template Step Groups',
+                      icon: <Component className="h-6 w-6 text-primary" />,
+                      href: '/template-step-groups',
+                      description: 'Organize template steps into logical groups',
+                    },
+                    {
+                      text: 'Template Test Cases',
+                      icon: <Blocks className="h-6 w-6 text-primary" />,
+                      href: '/template-test-cases',
+                      description: 'Define reusable test scenario templates',
+                    },
+                  ]}
+                />
+                <NavMenuCardDeck
+                  containerButtonText="Configuration"
+                  containerButtonIcon={<FileSliders className="h-5 w-5 text-primary" />}
+                  dropdownItems={[
+                    {
+                      text: 'Locators',
+                      icon: <Code className="h-6 w-6 text-primary" />,
+                      href: '/locators',
+                      description: 'Define reusable locators',
+                    },
+                    {
+                      text: 'Locator Groups',
+                      icon: <Group className="h-6 w-6 text-primary" />,
+                      href: '/locator-groups',
+                      description: 'Organize locators into logical groups',
+                    },
+                    {
+                      text: 'Modules',
+                      icon: <Puzzle className="h-6 w-6 text-primary" />,
+                      href: '/modules',
+                      description: 'Organize tests into logical units',
+                    },
+                    {
+                      text: 'Environments',
+                      icon: <Server className="h-6 w-6 text-primary" />,
+                      href: '/environments',
+                      description: 'Define test environment configurations',
+                    },
+                    {
+                      text: 'Tags',
+                      icon: <Tag className="h-6 w-6 text-primary" />,
+                      href: '/tags',
+                      description: 'Define tags for test scenarios and suites',
+                    },
+                  ]}
+                />
+                <NavLink href="/settings" icon={<Settings2 className="h-5 w-5 text-primary" />}>
+                  Settings
+                </NavLink>
+                <NavCommand className="ml-auto" />
+              </div>
+            </nav>
+            {children}
+            <Toaster />
+          </div>
+        </ThemeProvider>
+      </body>
+    </html>
+  )
+}

package/templates/starter/src/app/page.tsx

@@ -0,0 +1,65 @@
+import PageHeader from '@/components/typography/page-header'
+import HeaderSubtitle from '@/components/typography/page-header-subtitle'
+import AppDrawer from './(dashboard-components)/app-drawer'
+import {
+  EntityMetrics,
+  getDashboardMetricsAction,
+  getEntityMetricsAction,
+  getTestSuiteExecutionDataAction,
+} from '@/actions/dashboard/dashboard-actions'
+import type { TestSuiteExecutionData } from '@/services/dashboard/dashboard-service'
+import { DashboardMetrics } from '@prisma/client'
+import QuickActionsDrawer from './(dashboard-components)/quick-actions-drawer'
+import DataCard from './(dashboard-components)/data-card'
+import OngoingTestRunsCard from './(dashboard-components)/ongoing-test-runs-card'
+import { DataCardGrid } from './(dashboard-components)/data-card-grid'
+import { ExecutionHealthPanel } from './(dashboard-components)/execution-health-panel'
+
+export const dynamic = 'force-dynamic'
+
+const Dashboard = async () => {
+  const metricsResponse = await getDashboardMetricsAction()
+  const metrics = metricsResponse.status === 200 ? (metricsResponse.data as DashboardMetrics | null) : null
+
+  const entityMetricsResponse = await getEntityMetricsAction()
+  const entityMetrics =
+    entityMetricsResponse.status === 200 ? (entityMetricsResponse.data as unknown as EntityMetrics) : null
+  if (!entityMetrics) {
+    return <div>Error loading entity metrics</div>
+  }
+
+  const { testCasesCount, testSuitesCount, templateStepsCount, runningTestRunsCount } = entityMetrics
+
+  // Fetch test suite execution data
+  const testSuiteExecutionResponse = await getTestSuiteExecutionDataAction()
+  const testSuiteExecutionData =
+    testSuiteExecutionResponse.status === 200 ? (testSuiteExecutionResponse.data as TestSuiteExecutionData) : []
+
+  return (
+    <div>
+      <div className="mb-8">
+        <PageHeader>Dashboard</PageHeader>
+        <HeaderSubtitle>Check metrics, entity states, execution health, and more</HeaderSubtitle>
+      </div>
+      <div className="flex gap-7" id="dashboard-content">
+        <div className="flex flex-col gap-7">
+          <div className="flex gap-7">
+            <AppDrawer metrics={metrics} title="Attention Needed" description="Issues that require immediate action" />
+            <DataCardGrid>
+              <DataCard title="Test Cases" value={testCasesCount} link="/test-cases" />
+              <DataCard title="Test Suites" value={testSuitesCount} link="/test-suites" />
+              <DataCard title="Template Steps" value={templateStepsCount} link="/template-steps" />
+              <OngoingTestRunsCard initialCount={runningTestRunsCount} link="/test-runs" />
+            </DataCardGrid>
+          </div>
+          <QuickActionsDrawer />
+        </div>
+        <div className="flex-1">
+          <ExecutionHealthPanel featureData={testSuiteExecutionData} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Dashboard

package/templates/starter/src/assets/icons/empty-tube.tsx

@@ -0,0 +1,23 @@
+import { cn } from '@/lib/utils'
+
+const EmptyTube = ({ className }: { className?: string }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={cn('lucide lucide-test-tube-icon lucide-test-tube', className)}
+    >
+      <path d="M14.5 2v17.5c0 1.4-1.1 2.5-2.5 2.5c-1.4 0-2.5-1.1-2.5-2.5V2" />
+      <path d="M8.5 2h7" />
+    </svg>
+  )
+}
+
+export default EmptyTube

package/templates/starter/src/assets/icons/tube-plus.tsx

@@ -0,0 +1,29 @@
+import { cn } from '@/lib/utils'
+
+export const TubePlus = ({ className }: { className?: string }) => {
+  return (
+    <>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className={cn('lucide', className)}
+      >
+        {/* Empty tube icon */}
+        <path d="M14.5 2v17.5c0 1.4-1.1 2.5-2.5 2.5c-1.4 0-2.5-1.1-2.5-2.5V2" />
+        <path d="M8.5 2h7" />
+        {/* Half-filled level indicator */}
+        <line x1="10.5" y1="15.5" x2="13.5" y2="15.5" />
+        {/* Plus icon - positioned at bottom right */}
+        <line x1="17.5" y1="19.5" x2="21.5" y2="19.5" strokeWidth="1.5" />
+        <line x1="19.5" y1="17.5" x2="19.5" y2="21.5" strokeWidth="1.5" />
+      </svg>
+    </>
+  )
+}

package/templates/starter/src/components/base-node.tsx

@@ -0,0 +1,21 @@
+import { forwardRef, HTMLAttributes } from 'react'
+
+import { cn } from '@/lib/utils'
+
+export const BaseNode = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement> & { selected?: boolean }>(
+  ({ className, selected, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        'relative rounded-md border bg-card p-5 text-card-foreground',
+        className,
+        selected ? 'border-muted-foreground shadow-lg' : '',
+        'hover:ring-1',
+      )}
+      tabIndex={0}
+      {...props}
+    />
+  ),
+)
+
+BaseNode.displayName = 'BaseNode'

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

@@ -0,0 +1,73 @@
+'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-helpers.test.ts

@@ -0,0 +1,32 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+  createLocatorInspectorInjectionScript,
+  generateCSSPath,
+  generateXPath,
+  getLocatorInspectorOrigin,
+  isLocatorInspectorMessage,
+} from './locator-inspector-helpers'
+
+describe('locator-inspector helpers', () => {
+  it('builds selector helpers and validates message payloads', () => {
+    expect(generateCSSPath({ tagName: 'BUTTON', id: 'submit' })).toBe('#submit')
+    expect(generateCSSPath({ tagName: 'DIV', className: 'hero primary' })).toBe('div.hero.primary')
+    expect(generateXPath({ tagName: 'BUTTON', id: 'submit' })).toBe('//*[@id="submit"]')
+    expect(
+      isLocatorInspectorMessage({
+        type: 'ELEMENT_SELECTED',
+        elementData: {
+          tagName: 'BUTTON',
+          outerHTML: '<button>Save</button>',
+        },
+      }),
+    ).toBe(true)
+    expect(isLocatorInspectorMessage({ type: 'UNKNOWN' })).toBe(false)
+  })
+
+  it('derives iframe origins and scopes the injected script to the parent origin', () => {
+    expect(getLocatorInspectorOrigin('/sample-page', 'https://appraise.dev/locators')).toBe('https://appraise.dev')
+    expect(createLocatorInspectorInjectionScript('https://appraise.dev')).toContain('"https://appraise.dev"')
+  })
+})