feat(core): upgrade to next.js (#42)

Vite => Next.js
Emotion => Tailwind

Author: vault-developer

.github/workflows/gh-pages-deploy.yml

@@ -0,0 +1,24 @@
+name: Playwright Tests
+on:
+  workflow_dispatch:
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+    - name: Install dependencies
+      run: npm ci
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+    - name: Run Playwright tests
+      run: npx playwright test
+    - uses: actions/upload-artifact@v4
+      if: ${{ !cancelled() }}
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.github/workflows/playwright.yml

@@ -22,16 +22,16 @@ jobs:
           node-version: 22.13.0
 
       - name: Install dependencies
-        run: yarn install
+        run: npm install
 
       - name: Run linter
-        run: yarn lint
+        run: npm run lint
 
       - name: Run type check
-        run: yarn typecheck
+        run: npm run typecheck
 
       - name: Run unit tests
-        run: yarn test
+        run: npm run test
 
       - name: Run build
-        run: yarn build
+        run: npm run build

.github/workflows/pr-check.yml

@@ -1,35 +1,36 @@
-# Logs
-logs
-*.log
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
 npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-dist
-dist-ssr
-*.local
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+#IDEs
 .idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
-
-.pnp.*
-.yarn/*
-!.yarn/patches
-!.yarn/plugins
-!.yarn/releases
-!.yarn/sdks
-!.yarn/versions
+.vscode
 
 # Playwright
 /test-results/
@@ -39,3 +40,5 @@ dist-ssr
 
 # Jest
 /coverage
+
+

.gitignore

@@ -1 +1 @@
-yarn commitlint --edit $1
+commitlint --edit $1

.husky/commit-msg

@@ -1 +1 @@
-yarn lint-staged --allow-empty
+lint-staged --allow-empty

.husky/pre-commit

@@ -1,9 +1,9 @@
 export default {
 	'*.{js,jsx,ts,tsx}': [
-		'yarn prettier --write',
-		'yarn eslint --fix',
-		'yarn test',
-		() => 'yarn typecheck',
+		'prettier --write',
+		'eslint --fix',
+		'jest --passWithNoTests',
+		() => 'npm run typecheck',
 	],
-	'*.{json,css,scss,md}': ['yarn prettier --write', 'yarn eslint --fix'],
+	'*.{json,css,scss,md}': ['prettier --write', 'eslint --fix'],
 };

.lintstagedrc.mjs

@@ -43,9 +43,9 @@ git clone git@github.com:vault-developer/event-loop-explorer.git
 
 cd event-loop-explorer
 
-yarn install
+npm install
 
-yarn dev
+npm run dev
 ```
 
 ### Future Plans:

README.md

@@ -0,0 +1,27 @@
+import { ThemeToggle } from './themeToggle';
+import { Repeat, Github } from 'lucide-react';
+import { Button } from '@/components/chadcdn/button';
+import Link from 'next/link';
+
+export function Header() {
+	return (
+		<div className="flex px-4 py-2 lg:px-6 lg:py-4 items-center justify-between border-b">
+			<div className="flex items-center gap-2">
+				<Repeat />
+				<h2>Event loop explorer</h2>
+			</div>
+
+			<div className="flex items-center gap-2">
+				<Button asChild variant="ghost" size="iconBig">
+					<Link
+						href="https://github.com/vault-developer/event-loop-explorer"
+						target="_blank"
+					>
+						<Github className="size-6" />
+					</Link>
+				</Button>
+				<ThemeToggle />
+			</div>
+		</div>
+	);
+}

app/(main)/header/header.tsx

@@ -0,0 +1,22 @@
+import { useTheme } from 'next-themes';
+import { Button } from '@/components/chadcdn/button';
+import { Moon, Sun } from 'lucide-react';
+
+export function ThemeToggle() {
+	const { setTheme, theme } = useTheme();
+	const onToggle = () => setTheme(theme === 'light' ? 'dark' : 'light');
+
+	return (
+		<Button variant="ghost" size="iconBig" onClick={onToggle}>
+			<Sun
+				className="absolute scale-100 dark:scale-0 rotate-0 dark:rotate-90 transition-all size-6"
+				size={24}
+			/>
+			<Moon
+				className="absolute scale-0 dark:scale-100 rotate-90 dark:rotate-0 transition-all size-6"
+				size={24}
+			/>
+			<span className="sr-only">Toggle theme</span>
+		</Button>
+	);
+}