@argus-vrt/web 0.1.0

package/src/routes/tests/index.tsx

@@ -0,0 +1,128 @@
+import { createFileRoute, Link } from '@tanstack/react-router'
+import { createServerFn } from '@tanstack/react-start'
+import { GitBranch, Hash } from 'lucide-react'
+import { desc } from 'drizzle-orm'
+import { getDb, tests } from '../../db'
+import { formatRelativeTime } from '../../lib/utils'
+import { StatusBadge } from '../../components/ui/StatusBadge'
+
+const getAllTests = createServerFn({ method: 'GET' }).handler(async () => {
+  const db = getDb()
+  const allTests = await db
+    .select()
+    .from(tests)
+    .orderBy(desc(tests.createdAt))
+    .limit(50)
+
+  return allTests.map((test) => ({
+    ...test,
+    createdAt: test.createdAt.toISOString(),
+  }))
+})
+
+export const Route = createFileRoute('/tests/')({
+  component: TestsIndex,
+  loader: () => getAllTests(),
+})
+
+function TestsIndex() {
+  const tests = Route.useLoaderData()
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      <div className="mb-8">
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">All Tests</h1>
+        <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+          View all visual regression test runs
+        </p>
+      </div>
+
+      <div className="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
+        <div className="overflow-x-auto">
+          <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+            <thead className="bg-gray-50 dark:bg-gray-900">
+              <tr>
+                <th className="px-4 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  Branch
+                </th>
+                <th className="px-4 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider hidden sm:table-cell">
+                  Commit
+                </th>
+                <th className="px-4 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  Status
+                </th>
+                <th className="px-4 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider hidden md:table-cell">
+                  Changes
+                </th>
+                <th className="px-4 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider hidden lg:table-cell">
+                  Created
+                </th>
+                <th className="px-4 sm:px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  Actions
+                </th>
+              </tr>
+            </thead>
+            <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
+              {tests.map((test) => (
+                <tr key={test.id} className="hover:bg-gray-50 dark:hover:bg-gray-700">
+                  <td className="px-4 sm:px-6 py-4 whitespace-nowrap">
+                    <div className="flex items-center gap-2">
+                      <GitBranch className="w-4 h-4 text-gray-400 flex-shrink-0" />
+                      <span className="text-sm font-medium text-gray-900 dark:text-white truncate max-w-[120px] sm:max-w-none">
+                        {test.branch}
+                      </span>
+                    </div>
+                    <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                      vs {test.baseBranch}
+                    </div>
+                  </td>
+                  <td className="px-4 sm:px-6 py-4 whitespace-nowrap hidden sm:table-cell">
+                    <div className="flex items-center gap-2">
+                      <Hash className="w-4 h-4 text-gray-400" />
+                      <span className="text-sm font-mono text-gray-600 dark:text-gray-300">
+                        {test.commitHash}
+                      </span>
+                    </div>
+                    <div className="text-xs text-gray-500 dark:text-gray-400 mt-1 max-w-xs truncate">
+                      {test.commitMessage}
+                    </div>
+                  </td>
+                  <td className="px-4 sm:px-6 py-4 whitespace-nowrap">
+                    <StatusBadge status={test.status} />
+                  </td>
+                  <td className="px-4 sm:px-6 py-4 whitespace-nowrap text-sm hidden md:table-cell">
+                    <div className="flex items-center gap-4">
+                      <span className="text-warning-600 dark:text-warning-400">
+                        {test.changedCount} changed
+                      </span>
+                      <span className="text-success-600 dark:text-success-400">
+                        {test.passedCount} passed
+                      </span>
+                      {test.failedCount > 0 && (
+                        <span className="text-error-600 dark:text-error-400">
+                          {test.failedCount} failed
+                        </span>
+                      )}
+                    </div>
+                  </td>
+                  <td className="px-4 sm:px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400 hidden lg:table-cell">
+                    {formatRelativeTime(test.createdAt)}
+                  </td>
+                  <td className="px-4 sm:px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                    <Link
+                      to="/tests/$id"
+                      params={{ id: test.id }}
+                      className="text-primary-600 dark:text-primary-400 hover:text-primary-900 dark:hover:text-primary-300"
+                    >
+                      View Details
+                    </Link>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/routes/upload.tsx

@@ -0,0 +1,108 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { createServerFn } from '@tanstack/react-start'
+import { getDb, tests, storyResults } from '../db'
+
+interface UploadPayload {
+  branch: string
+  baseBranch?: string
+  commitHash: string
+  commitMessage?: string
+  stories: Array<{
+    storyId: string
+    componentName: string
+    storyName: string
+    baselineUrl?: string
+    currentUrl: string
+    diffUrl?: string
+    pixelDiff: number
+    ssimScore: number
+    hasDiff: boolean
+    isNew: boolean
+  }>
+}
+
+// Exported server function for uploading test results
+export const uploadTestResults = createServerFn({ method: 'POST' })
+  .inputValidator((data: UploadPayload) => data)
+  .handler(async ({ data }) => {
+    const db = getDb()
+
+    const {
+      branch,
+      baseBranch = 'main',
+      commitHash,
+      commitMessage,
+      stories,
+    } = data
+
+    // Calculate counts
+    const totalStories = stories.length
+    const changedCount = stories.filter((s) => s.hasDiff || s.isNew).length
+    const passedCount = stories.filter((s) => !s.hasDiff && !s.isNew).length
+    const failedCount = stories.filter((s) => s.hasDiff).length
+
+    // Create test record
+    const [test] = await db
+      .insert(tests)
+      .values({
+        branch,
+        baseBranch,
+        commitHash,
+        commitMessage,
+        status: 'PENDING',
+        totalStories,
+        changedCount,
+        passedCount,
+        failedCount,
+      })
+      .returning()
+
+    // Create story results
+    if (stories.length > 0) {
+      await db.insert(storyResults).values(
+        stories.map((story) => ({
+          testId: test.id,
+          storyId: story.storyId,
+          componentName: story.componentName,
+          storyName: story.storyName,
+          baselineUrl: story.baselineUrl,
+          currentUrl: story.currentUrl,
+          diffUrl: story.diffUrl,
+          pixelDiff: story.pixelDiff,
+          ssimScore: story.ssimScore,
+          hasDiff: story.hasDiff,
+          isNew: story.isNew,
+        }))
+      )
+    }
+
+    return {
+      success: true,
+      testId: test.id,
+      url: `/tests/${test.id}`,
+    }
+  })
+
+export const Route = createFileRoute('/upload')({
+  component: UploadPage,
+})
+
+function UploadPage() {
+  return (
+    <div className="max-w-2xl mx-auto px-4 py-8">
+      <h1 className="text-2xl font-bold text-gray-900 mb-4">Upload API</h1>
+      <p className="text-gray-600 mb-4">
+        This endpoint accepts test results from the CLI tool.
+      </p>
+      <div className="bg-gray-100 rounded-lg p-4">
+        <h2 className="font-semibold mb-2">Usage</h2>
+        <p className="text-sm text-gray-600 mb-2">
+          The CLI uses server functions to upload results. Run:
+        </p>
+        <code className="block bg-gray-800 text-green-400 p-3 rounded text-sm">
+          rn-visual-test upload --api-url http://localhost:3000
+        </code>
+      </div>
+    </div>
+  )
+}

package/src/styles.css

@@ -0,0 +1,213 @@
+@import "tailwindcss";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  /* Font families */
+  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+  --font-heading: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "JetBrains Mono", ui-monospace, monospace;
+
+  /* Primary colors - Indigo */
+  --color-primary-50: oklch(0.97 0.01 264);
+  --color-primary-100: oklch(0.94 0.03 264);
+  --color-primary-200: oklch(0.87 0.06 264);
+  --color-primary-300: oklch(0.78 0.10 264);
+  --color-primary-400: oklch(0.67 0.15 264);
+  --color-primary-500: oklch(0.55 0.19 264);
+  --color-primary-600: oklch(0.47 0.20 264);
+  --color-primary-700: oklch(0.42 0.17 264);
+  --color-primary-800: oklch(0.36 0.14 264);
+  --color-primary-900: oklch(0.31 0.11 264);
+
+  /* Success colors - Green */
+  --color-success-50: oklch(0.98 0.02 145);
+  --color-success-100: oklch(0.94 0.05 145);
+  --color-success-200: oklch(0.87 0.10 145);
+  --color-success-300: oklch(0.78 0.14 145);
+  --color-success-400: oklch(0.68 0.17 145);
+  --color-success-500: oklch(0.59 0.18 145);
+  --color-success-600: oklch(0.50 0.16 145);
+  --color-success-700: oklch(0.43 0.13 145);
+  --color-success-800: oklch(0.37 0.10 145);
+  --color-success-900: oklch(0.32 0.08 145);
+
+  /* Warning colors - Yellow/Amber */
+  --color-warning-50: oklch(0.98 0.02 85);
+  --color-warning-100: oklch(0.95 0.05 85);
+  --color-warning-200: oklch(0.90 0.10 85);
+  --color-warning-300: oklch(0.84 0.14 85);
+  --color-warning-400: oklch(0.78 0.16 85);
+  --color-warning-500: oklch(0.72 0.16 85);
+  --color-warning-600: oklch(0.62 0.15 85);
+  --color-warning-700: oklch(0.52 0.13 85);
+  --color-warning-800: oklch(0.44 0.10 85);
+  --color-warning-900: oklch(0.38 0.08 85);
+
+  /* Error colors - Red */
+  --color-error-50: oklch(0.97 0.02 25);
+  --color-error-100: oklch(0.94 0.05 25);
+  --color-error-200: oklch(0.87 0.10 25);
+  --color-error-300: oklch(0.78 0.14 25);
+  --color-error-400: oklch(0.68 0.17 25);
+  --color-error-500: oklch(0.59 0.20 25);
+  --color-error-600: oklch(0.50 0.19 25);
+  --color-error-700: oklch(0.43 0.16 25);
+  --color-error-800: oklch(0.37 0.13 25);
+  --color-error-900: oklch(0.32 0.10 25);
+
+  /* Info colors - Blue */
+  --color-info-50: oklch(0.97 0.01 240);
+  --color-info-100: oklch(0.94 0.03 240);
+  --color-info-200: oklch(0.87 0.07 240);
+  --color-info-300: oklch(0.78 0.11 240);
+  --color-info-400: oklch(0.67 0.15 240);
+  --color-info-500: oklch(0.55 0.18 240);
+  --color-info-600: oklch(0.47 0.17 240);
+  --color-info-700: oklch(0.42 0.14 240);
+  --color-info-800: oklch(0.36 0.11 240);
+  --color-info-900: oklch(0.31 0.09 240);
+
+  /* Surface colors - Light mode defaults */
+  --color-surface-bg: oklch(0.98 0.00 0);
+  --color-surface-card: oklch(1.00 0.00 0);
+  --color-surface-hover: oklch(0.96 0.00 0);
+  --color-surface-border: oklch(0.90 0.00 0);
+  --color-surface-border-subtle: oklch(0.94 0.00 0);
+
+  /* Text colors - Light mode defaults */
+  --color-text-primary: oklch(0.15 0.00 0);
+  --color-text-secondary: oklch(0.40 0.00 0);
+  --color-text-muted: oklch(0.55 0.00 0);
+  --color-text-inverted: oklch(1.00 0.00 0);
+}
+
+/* Dark mode overrides using CSS custom properties */
+:root {
+  --bg: var(--color-surface-bg);
+  --card: var(--color-surface-card);
+  --card-hover: var(--color-surface-hover);
+  --border: var(--color-surface-border);
+  --border-subtle: var(--color-surface-border-subtle);
+  --text: var(--color-text-primary);
+  --text-secondary: var(--color-text-secondary);
+  --text-muted: var(--color-text-muted);
+}
+
+.dark {
+  --bg: oklch(0.15 0.00 0);
+  --card: oklch(0.20 0.00 0);
+  --card-hover: oklch(0.25 0.00 0);
+  --border: oklch(0.30 0.00 0);
+  --border-subtle: oklch(0.25 0.00 0);
+  --text: oklch(0.95 0.00 0);
+  --text-secondary: oklch(0.70 0.00 0);
+  --text-muted: oklch(0.55 0.00 0);
+}
+
+body {
+  @apply m-0;
+  font-family: var(--font-sans);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: var(--font-mono);
+}
+
+/* Heading font utility */
+.font-heading {
+  font-family: var(--font-heading);
+}
+
+/* Apply heading font to h1-h3 by default */
+h1, h2, h3 {
+  font-family: var(--font-heading);
+}
+
+/* Drawer animations */
+@keyframes drawer-slide-in {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes drawer-slide-out {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+.drawer-enter {
+  animation: drawer-slide-in 0.3s ease-out forwards;
+}
+
+.drawer-exit {
+  animation: drawer-slide-out 0.3s ease-in forwards;
+}
+
+.backdrop-enter {
+  animation: fade-in 0.3s ease-out forwards;
+}
+
+.backdrop-exit {
+  animation: fade-out 0.3s ease-in forwards;
+}
+
+/* Custom scrollbar for story list */
+.custom-scrollbar::-webkit-scrollbar {
+  width: 6px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background-color: oklch(0.70 0.00 0);
+  border-radius: 3px;
+}
+
+.dark .custom-scrollbar::-webkit-scrollbar-thumb {
+  background-color: oklch(0.40 0.00 0);
+}
+
+/* Tree view expand/collapse animation */
+.tree-content {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.2s ease-out;
+}
+
+.tree-content.expanded {
+  grid-template-rows: 1fr;
+}
+
+.tree-content > div {
+  overflow: hidden;
+}

package/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "include": ["**/*.ts", "**/*.tsx"],
+  "compilerOptions": {
+    "target": "ES2022",
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": ["vite/client"],
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": false,
+    "noEmit": true,
+
+    /* Linting */
+    "skipLibCheck": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

package/vite.config.ts

@@ -0,0 +1,30 @@
+import { defineConfig } from 'vite'
+import { devtools } from '@tanstack/devtools-vite'
+import { tanstackStart } from '@tanstack/react-start/plugin/vite'
+import viteReact from '@vitejs/plugin-react'
+import viteTsConfigPaths from 'vite-tsconfig-paths'
+import { fileURLToPath, URL } from 'url'
+
+import tailwindcss from '@tailwindcss/vite'
+import { apiPlugin } from './src/api-plugin'
+
+const config = defineConfig({
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
+  plugins: [
+    apiPlugin(), // API endpoints for CLI
+    devtools(),
+    // this is the plugin that enables path aliases
+    viteTsConfigPaths({
+      projects: ['./tsconfig.json'],
+    }),
+    tailwindcss(),
+    tanstackStart(),
+    viteReact(),
+  ],
+})
+
+export default config