Scaffold project foundation
Fresh start: Vite + React 19 + strict TS, Tailwind v4, PWA, Vitest/Playwright. Replaces the prior DeepSeek-built app (deleted; ~135 documented bugs, no VCS). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
+13
@@ -0,0 +1,13 @@
|
|||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dev-dist
|
||||||
|
*.local
|
||||||
|
.DS_Store
|
||||||
|
playwright-report
|
||||||
|
test-results
|
||||||
|
.vite
|
||||||
|
|
||||||
|
# Editor
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
@@ -0,0 +1,26 @@
|
|||||||
|
import js from '@eslint/js';
|
||||||
|
import globals from 'globals';
|
||||||
|
import reactHooks from 'eslint-plugin-react-hooks';
|
||||||
|
import reactRefresh from 'eslint-plugin-react-refresh';
|
||||||
|
import tseslint from 'typescript-eslint';
|
||||||
|
|
||||||
|
export default tseslint.config(
|
||||||
|
{ ignores: ['dist', 'dev-dist', 'src/data/srd/generated', 'playwright-report', 'test-results'] },
|
||||||
|
{
|
||||||
|
extends: [js.configs.recommended, ...tseslint.configs.recommended],
|
||||||
|
files: ['**/*.{ts,tsx}'],
|
||||||
|
languageOptions: {
|
||||||
|
ecmaVersion: 2022,
|
||||||
|
globals: globals.browser,
|
||||||
|
},
|
||||||
|
plugins: {
|
||||||
|
'react-hooks': reactHooks,
|
||||||
|
'react-refresh': reactRefresh,
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
...reactHooks.configs.recommended.rules,
|
||||||
|
'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
|
||||||
|
'@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
);
|
||||||
+15
@@ -0,0 +1,15 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en" class="dark">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
||||||
|
<meta name="theme-color" content="#0f0f17" />
|
||||||
|
<!--CSP-PLACEHOLDER-->
|
||||||
|
<title>TTRPG Manager</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,57 @@
|
|||||||
|
{
|
||||||
|
"name": "ttrpg-manager",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.1.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "tsc -b && vite build",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"lint": "eslint .",
|
||||||
|
"typecheck": "tsc -b --noEmit",
|
||||||
|
"test": "vitest run",
|
||||||
|
"test:watch": "vitest",
|
||||||
|
"test:e2e": "playwright test",
|
||||||
|
"data:build": "tsx scripts/build-srd.ts"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@tanstack/react-router": "^1.95.0",
|
||||||
|
"clsx": "^2.1.1",
|
||||||
|
"dexie": "^4.0.10",
|
||||||
|
"dexie-react-hooks": "^1.1.7",
|
||||||
|
"dompurify": "^3.2.3",
|
||||||
|
"fuse.js": "^7.0.0",
|
||||||
|
"nanoid": "^5.0.9",
|
||||||
|
"react": "^19.0.0",
|
||||||
|
"react-dom": "^19.0.0",
|
||||||
|
"tailwind-merge": "^2.6.0",
|
||||||
|
"zod": "^3.24.1",
|
||||||
|
"zustand": "^5.0.2"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@eslint/js": "^9.17.0",
|
||||||
|
"@playwright/test": "^1.49.1",
|
||||||
|
"@tailwindcss/vite": "^4.0.0",
|
||||||
|
"@testing-library/jest-dom": "^6.6.3",
|
||||||
|
"@testing-library/react": "^16.1.0",
|
||||||
|
"@testing-library/user-event": "^14.5.2",
|
||||||
|
"@types/dompurify": "^3.0.5",
|
||||||
|
"@types/node": "^22.10.5",
|
||||||
|
"@types/react": "^19.0.2",
|
||||||
|
"@types/react-dom": "^19.0.2",
|
||||||
|
"@vitejs/plugin-react": "^4.3.4",
|
||||||
|
"eslint": "^9.17.0",
|
||||||
|
"eslint-plugin-react-hooks": "^5.1.0",
|
||||||
|
"eslint-plugin-react-refresh": "^0.4.16",
|
||||||
|
"fake-indexeddb": "^6.0.0",
|
||||||
|
"globals": "^15.14.0",
|
||||||
|
"jsdom": "^25.0.1",
|
||||||
|
"tailwindcss": "^4.0.0",
|
||||||
|
"tsx": "^4.19.2",
|
||||||
|
"typescript": "^5.7.2",
|
||||||
|
"typescript-eslint": "^8.19.0",
|
||||||
|
"vite": "^6.0.7",
|
||||||
|
"vite-plugin-pwa": "^0.21.1",
|
||||||
|
"vitest": "^2.1.8"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,86 @@
|
|||||||
|
@import 'tailwindcss';
|
||||||
|
|
||||||
|
/* Class-based dark mode: toggling `.dark` on <html> swaps the token values below. */
|
||||||
|
@custom-variant dark (&:where(.dark, .dark *));
|
||||||
|
|
||||||
|
/* ---- Semantic design tokens (light defaults) ---- */
|
||||||
|
:root {
|
||||||
|
--app-surface: #f5f2ec; /* page background */
|
||||||
|
--app-panel: #fffdf9; /* cards / panels */
|
||||||
|
--app-elevated: #ece6da; /* raised controls */
|
||||||
|
--app-line: #d8cfbe; /* borders */
|
||||||
|
--app-ink: #232018; /* primary text */
|
||||||
|
--app-muted: #6b6457; /* secondary text */
|
||||||
|
--app-accent: #9a6b1f; /* brand (deep gold) */
|
||||||
|
--app-accent-soft: #c79a4a;
|
||||||
|
--app-accent-ink: #fffdf9; /* text on accent */
|
||||||
|
--app-danger: #b3261e;
|
||||||
|
--app-success: #2e7d32;
|
||||||
|
--app-warning: #b06f00;
|
||||||
|
--app-info: #1565c0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark {
|
||||||
|
--app-surface: #0f0f17;
|
||||||
|
--app-panel: #181826;
|
||||||
|
--app-elevated: #21212f;
|
||||||
|
--app-line: #2e2e40;
|
||||||
|
--app-ink: #e9e7ef;
|
||||||
|
--app-muted: #9a98ab;
|
||||||
|
--app-accent: #d4af37; /* gold */
|
||||||
|
--app-accent-soft: #b08d2e;
|
||||||
|
--app-accent-ink: #15151f;
|
||||||
|
--app-danger: #ef5350;
|
||||||
|
--app-success: #66bb6a;
|
||||||
|
--app-warning: #ffb74d;
|
||||||
|
--app-info: #64b5f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Expose tokens as Tailwind color utilities: bg-surface, text-ink, border-line, etc. */
|
||||||
|
@theme inline {
|
||||||
|
--color-surface: var(--app-surface);
|
||||||
|
--color-panel: var(--app-panel);
|
||||||
|
--color-elevated: var(--app-elevated);
|
||||||
|
--color-line: var(--app-line);
|
||||||
|
--color-ink: var(--app-ink);
|
||||||
|
--color-muted: var(--app-muted);
|
||||||
|
--color-accent: var(--app-accent);
|
||||||
|
--color-accent-soft: var(--app-accent-soft);
|
||||||
|
--color-accent-ink: var(--app-accent-ink);
|
||||||
|
--color-danger: var(--app-danger);
|
||||||
|
--color-success: var(--app-success);
|
||||||
|
--color-warning: var(--app-warning);
|
||||||
|
--color-info: var(--app-info);
|
||||||
|
|
||||||
|
--font-display: 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body,
|
||||||
|
#root {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
background: var(--app-surface);
|
||||||
|
color: var(--app-ink);
|
||||||
|
font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Reduced-motion friendliness */
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
animation-duration: 0.01ms !important;
|
||||||
|
transition-duration: 0.01ms !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Thin themed scrollbars */
|
||||||
|
* {
|
||||||
|
scrollbar-width: thin;
|
||||||
|
scrollbar-color: var(--app-line) transparent;
|
||||||
|
}
|
||||||
@@ -0,0 +1,34 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2022",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"lib": ["ES2023", "DOM", "DOM.Iterable"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"verbatimModuleSyntax": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
|
||||||
|
/* Strictness — the old app shipped without these and it cost it. */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"noUncheckedSideEffectImports": true,
|
||||||
|
"exactOptionalPropertyTypes": true,
|
||||||
|
"noImplicitOverride": true,
|
||||||
|
"noUncheckedIndexedAccess": true,
|
||||||
|
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"include": ["src", "vitest.setup.ts"]
|
||||||
|
}
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"files": [],
|
||||||
|
"references": [
|
||||||
|
{ "path": "./tsconfig.app.json" },
|
||||||
|
{ "path": "./tsconfig.node.json" }
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2023",
|
||||||
|
"lib": ["ES2023"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"verbatimModuleSyntax": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"types": ["node"]
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts", "scripts/**/*.ts"]
|
||||||
|
}
|
||||||
@@ -0,0 +1,66 @@
|
|||||||
|
/// <reference types="vitest/config" />
|
||||||
|
import { defineConfig } from 'vite';
|
||||||
|
import react from '@vitejs/plugin-react';
|
||||||
|
import tailwindcss from '@tailwindcss/vite';
|
||||||
|
import { VitePWA } from 'vite-plugin-pwa';
|
||||||
|
import { fileURLToPath, URL } from 'node:url';
|
||||||
|
|
||||||
|
// Strict CSP injected at build time only. In dev, Vite's react-refresh needs
|
||||||
|
// inline scripts, so we leave the placeholder empty there.
|
||||||
|
const PROD_CSP =
|
||||||
|
"default-src 'self'; img-src 'self' data: blob:; style-src 'self' 'unsafe-inline'; " +
|
||||||
|
"script-src 'self'; connect-src 'self'; font-src 'self' data:; worker-src 'self' blob:; " +
|
||||||
|
"manifest-src 'self'; object-src 'none'; base-uri 'self'";
|
||||||
|
|
||||||
|
function cspPlugin() {
|
||||||
|
return {
|
||||||
|
name: 'inject-csp',
|
||||||
|
transformIndexHtml(html: string) {
|
||||||
|
const tag = `<meta http-equiv="Content-Security-Policy" content="${PROD_CSP}" />`;
|
||||||
|
return html.replace('<!--CSP-PLACEHOLDER-->', tag);
|
||||||
|
},
|
||||||
|
apply: 'build' as const,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [
|
||||||
|
react(),
|
||||||
|
tailwindcss(),
|
||||||
|
cspPlugin(),
|
||||||
|
VitePWA({
|
||||||
|
registerType: 'prompt',
|
||||||
|
includeAssets: ['favicon.svg'],
|
||||||
|
manifest: {
|
||||||
|
name: 'TTRPG Manager',
|
||||||
|
short_name: 'TTRPG',
|
||||||
|
description: 'A local-first manager for D&D 5e and Pathfinder 2e campaigns.',
|
||||||
|
theme_color: '#0f0f17',
|
||||||
|
background_color: '#0f0f17',
|
||||||
|
display: 'standalone',
|
||||||
|
icons: [
|
||||||
|
{ src: 'pwa-192x192.png', sizes: '192x192', type: 'image/png' },
|
||||||
|
{ src: 'pwa-512x512.png', sizes: '512x512', type: 'image/png' },
|
||||||
|
{ src: 'pwa-512x512.png', sizes: '512x512', type: 'image/png', purpose: 'maskable' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
workbox: {
|
||||||
|
globPatterns: ['**/*.{js,css,html,svg,png,woff2}'],
|
||||||
|
// SRD data chunks can be large; allow them to be precached.
|
||||||
|
maximumFileSizeToCacheInBytes: 6 * 1024 * 1024,
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'@': fileURLToPath(new URL('./src', import.meta.url)),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
test: {
|
||||||
|
globals: true,
|
||||||
|
environment: 'jsdom',
|
||||||
|
setupFiles: ['./vitest.setup.ts'],
|
||||||
|
css: false,
|
||||||
|
exclude: ['**/node_modules/**', '**/e2e/**', '**/dist/**'],
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
import '@testing-library/jest-dom/vitest';
|
||||||
|
import 'fake-indexeddb/auto';
|
||||||
|
import { cleanup } from '@testing-library/react';
|
||||||
|
import { afterEach } from 'vitest';
|
||||||
|
|
||||||
|
afterEach(() => {
|
||||||
|
cleanup();
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user