Feat/use tailwind

apps/web/package.json

@@ -3,19 +3,31 @@
  "private": true,
  "version": "1.0.0",
  "scripts": {
- "dev": "vite",
+ "dev": "vite --host",
  "build": "tsc && vite build",
  "preview": "vite preview",
- "lint": "eslint src --fix"
+ "lint": "eslint src --fix",
+ "tailwind": "npx tailwindcss -i ./src/styles/globals.css -o ./dist/output.css --watch"
  },
  "dependencies": {
- "cypress-debugger": "*",
+ "@radix-ui/react-accordion": "^1.1.1",
+ "@radix-ui/react-collapsible": "^1.0.2",
+ "@radix-ui/react-tabs": "^1.0.3",
+ "@radix-ui/react-toast": "^1.1.3",
+ "@radix-ui/react-toggle": "^1.0.2",
+ "@radix-ui/react-tooltip": "^1.0.5",
+ "class-variance-authority": "^0.5.2",
+ "clsx": "^1.2.1",
  "cypress": "^12.8.1",
+ "cypress-debugger": "*",
  "lodash": "^4.17.21",
+ "lucide-react": "^0.162.0",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-router-dom": "^6.9.0",
  "rrweb-player": "^1.0.0-alpha.4",
+ "tailwind-merge": "^1.12.0",
+ "tailwindcss-animate": "^1.0.5",
  "url-parse": "^1.5.10"
  },
  "devDependencies": {
@@ -25,7 +37,7 @@
  "@vitejs/plugin-react": "^3.1.0",
  "eslint": "^8.36.0",
  "eslint-config-custom": "*",
- "sass": "^1.60.0",
+ "tailwindcss": "^3.3.1",
  "tsconfig": "*",
  "typescript": "^4.9.3",
  "vite": "^4.2.0",

apps/web/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+ plugins: {
+ tailwindcss: {},
+ autoprefixer: {},
+ },
+};

apps/web/src/App.tsx

@@ -1,24 +1,31 @@
-import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
-import Layout from './components/Layout/Layout';
+import { Toaster } from '@/components/ui/Toaster';
+import { Route, BrowserRouter as Router, Routes } from 'react-router-dom';
+import Layout from './components/Layout';
+import { useDarkMode } from './components/ui/useDarkMode';
 import CypresEventsContextProvider from './context/cypressEvents';
 import HttpArchiveContextProvider from './context/httpArchiveEntries';
 import PlaybackProvider from './context/playback';
 import ReplayerContextProvider from './context/replayer';
 
 export default function App() {
+ const [isDark] = useDarkMode();
+
  return (
  <Router>
- <CypresEventsContextProvider>
- <ReplayerContextProvider>
- <HttpArchiveContextProvider>
- <PlaybackProvider>
- <Routes>
- <Route path="/" element={<Layout />} />
- </Routes>
- </PlaybackProvider>
- </HttpArchiveContextProvider>
- </ReplayerContextProvider>
- </CypresEventsContextProvider>
+ <div aria-readonly={isDark}>
+ <CypresEventsContextProvider>
+ <ReplayerContextProvider>
+ <HttpArchiveContextProvider>
+ <PlaybackProvider>
+ <Routes>
+ <Route path="/" element={<Layout />} />
+ </Routes>
+ <Toaster />
+ </PlaybackProvider>
+ </HttpArchiveContextProvider>
+ </ReplayerContextProvider>
+ </CypresEventsContextProvider>
+ </div>
  </Router>
  );
 }

apps/web/src/components/Console.tsx

@@ -0,0 +1,169 @@
+import {
+ Collapsible,
+ CollapsibleContent,
+ CollapsibleTrigger,
+} from '@/components/ui/Collapsible';
+import clsx from 'clsx';
+import {
+ BrowserLog,
+ RuntimeStackTrace,
+ TestExecutionResult,
+} from 'cypress-debugger';
+import { orderBy } from 'lodash';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import { useState } from 'react';
+
+type Log = {
+ message?: string;
+ type: string;
+ timestamp: number;
+ stackTrace?: RuntimeStackTrace;
+};
+
+const formatDate = (millis: number): string => new Date(millis).toISOString();
+
+function StackTrace({
+ trace,
+}: {
+ trace: BrowserLog['runtimeConsoleApiCalled'][0]['stackTrace'];
+}) {
+ return (
+ <ul className="pl-6 pr-2 py-3">
+ {trace?.callFrames.map((frame, i) => (
+ <li key={i}>
+ <p className="pb-1 text-sm">
+ at {frame.functionName} (
+ <span className="text-sky-400">{frame.url}</span>:{frame.lineNumber}
+ )
+ </p>
+ </li>
+ ))}
+ </ul>
+ );
+}
+
+function Message({
+ message,
+ type,
+ timestamp,
+ expanded,
+}: {
+ message: string;
+ type: string;
+ timestamp: number;
+ expanded: boolean;
+}) {
+ return (
+ <div
+ className={clsx([
+ 'pl-4 pr-2 py-1',
+ type === 'debug' ? 'text-emerald-700 dark:text-emerald-500' : '',
+ type === 'error' ? 'text-red-400 dark:text-red-400' : '',
+ type === 'warning' ? 'text-amber-600 dark:text-amber-400' : '',
+ type === 'info' ? 'text-sky-700 dark:text-sky-500' : '',
+ ])}
+ >
+ <div className="flex justify-between mb-2">
+ <span>[{type}]</span>
+ <span>{formatDate(timestamp)}</span>
+ </div>
+
+ <p className="text-left break-all">
+ {expanded ? (
+ <ChevronDown className="inline w-4 h-4" />
+ ) : (
+ <ChevronRight className="inline w-4 h-4" />
+ )}{' '}
+ {message}
+ </p>
+ </div>
+ );
+}
+
+function Console({
+ logs,
+}: {
+ logs: TestExecutionResult['browserLogs'] | null;
+}) {
+ const [opened, setOpened] = useState<number[]>([]);
+
+ const handleOpened = (i: number) => {
+ setOpened((o) => {
+ if (o.includes(i)) {
+ const copy = o.slice();
+ copy.splice(
+ o.findIndex((e) => e === i),
+ 1
+ );
+ return copy;
+ }
+
+ return [...o, i];
+ });
+ };
+
+ if (!logs) {
+ return <p className="pl-4 pt-3">No logs</p>;
+ }
+
+ const orderedLogs: Log[] = orderBy(
+ [
+ ...logs.logEntry.map((log) => ({
+ message: log.text,
+ type: log.level,
+ timestamp: log.timestamp,
+ stackTrace: log.stackTrace,
+ })),
+ ...logs.runtimeConsoleApiCalled.map((log) => ({
+ message: log.args[0].value,
+ type: log.type,
+ timestamp: log.timestamp,
+ stackTrace: log.stackTrace,
+ })),
+ ],
+ (log) => log.timestamp,
+ 'asc'
+ );
+
+ if (!orderedLogs.length) {
+ return <p className="pl-4 pt-3">No logs</p>;
+ }
+
+ return (
+ <div className="max-h-[calc(100vh-8rem)] overflow-auto">
+ {orderedLogs.map((log, i) => (
+ <Collapsible
+ key={i}
+ onOpenChange={() => handleOpened(i)}
+ className={clsx([
+ 'py-3 border-b',
+ log.type === 'debug' ? 'bg-emerald-50 dark:bg-emerald-950/30' : '',
+ log.type === 'error'
+ ? 'bg-red-50 dark:border-red-950 dark:bg-red-900/20'
+ : '',
+ log.type === 'warning' ? 'bg-amber-50 dark:bg-amber-500/10' : '',
+ log.type === 'info' ? 'bg-sky-50 dark:bg-sky-500/10' : '',
+ ])}
+ >
+ <CollapsibleTrigger className="w-full">
+ <Message
+ message={log.message ?? ''}
+ type={log.type}
+ timestamp={log.timestamp}
+ expanded={opened.includes(i)}
+ />
+ </CollapsibleTrigger>
+ <CollapsibleContent>
+ {log.stackTrace ? (
+ <StackTrace trace={log.stackTrace} />
+ ) : (
+ <p className="pl-6">&#8211;</p>
+ )}
+ </CollapsibleContent>
+ </Collapsible>
+ ))}
+ </div>
+ );
+}
+
+export default Console;