Files

T

SluijsensandJunie e299f1c745 Initial commit: React frontend (SLP Software) + AIDLC workflow docs

Co-authored-by: Junie <junie@jetbrains.com>

2026-07-20 00:19:44 +02:00

3.6 KiB

Raw Blame History

Code Summary — react-frontend-app

Application Code (Workspace Root)

Project Configuration

package.json, vite.config.ts, tsconfig.json, tsconfig.node.json, index.html, .gitignore
tailwind.config.ts, postcss.config.js — Tailwind theme mapped to CSS custom properties
eslint.config.js (ESLint 9 flat config), .prettierrc
README.md — setup/run/build/test instructions

Domain Data & Theme

src/data/content.ts — typed static content (NavLink, HeroContent, PackageCardData, ProcessStepData, AboutContent, ContactInfo), copied 1-to-1 from the reference designs
src/theme/tokens.ts — theme value model (red/purple), storage key, validation/fallback (BR-1/BR-3)
src/theme/ThemeProvider.tsx — theme context, localStorage persistence (BR-2), applies theme-red/theme-purple class to <html>
src/index.css — theme token CSS variables (.theme-red, .theme-purple), global styles, caret animation, reduced-motion handling
src/fonts.ts — self-hosted font imports (@fontsource/sora, @fontsource/instrument-sans, @fontsource/jetbrains-mono)

Application Shell

src/queryClient.ts — shared QueryClient (staleTime: Infinity)
src/hooks/usePackagesQuery.ts — placeholder query hook wrapping static package data
src/components/ErrorBoundary.tsx — top-level on-brand error boundary
src/routes/__root.tsx — root route composing ErrorBoundary → ThemeProvider → QueryClientProvider → RootLayout
src/routes/index.tsx — index route assembling the page sections
src/router.tsx — router instance with hash-based history
src/main.tsx — application entry point

Components

src/components/RootLayout.tsx, Nav.tsx, ThemeToggle.tsx, Hero.tsx, PackagesSection.tsx, PackageCard.tsx, ProcessSection.tsx, ProcessStep.tsx, AboutSection.tsx, ContactSection.tsx, Footer.tsx

Tests

src/theme/__tests__/ThemeProvider.test.tsx — 4 tests covering BR-1, BR-2, BR-3
src/components/__tests__/Nav.test.tsx — 3 tests (nav links, accessible toggle label, toggle interaction)
src/components/__tests__/PackagesSection.test.tsx — 2 tests (package rendering, featured badge)
src/test/setup.ts — Testing Library / jest-dom setup for Vitest

Verification (Step 13.5)

Build: ✅ Success (npm run build — tsc -b && vite build)
Unit Tests: ✅ 9 passed, 0 failed (npm run test — Vitest)
Lint: ✅ 0 errors (2 non-blocking react-refresh/only-export-components warnings on files that intentionally export a hook alongside a component)

Post-Review Fix: Deprecated Package Warnings

After initial review, the user requested that the npm install deprecation warnings (eslint@8.57.1, @humanwhocodes/config-array, @humanwhocodes/object-schema, and related transitive packages) be resolved. Resolved by migrating from ESLint 8 (.eslintrc.cjs) to ESLint 9 flat config (eslint.config.js), using typescript-eslint, @eslint/js, globals, and eslint-plugin-react-hooks v5. Re-verified: build, tests (9/9), and lint (0 errors) all still pass after the migration, and npm install no longer reports deprecation warnings for these packages.

Traceability

Requirements: FR-1 (content parity), FR-2 (componentization), FR-3 (theme switching), FR-4 (preserved micro-interactions), FR-5 (TanStack Router/Query scaffolding), NFR-1 through NFR-5
Functional Design business rules BR-1 through BR-6 implemented as described above
NFR Design patterns (error boundary, query caching, self-hosted fonts, hash routing) implemented as described above

3.6 KiB Raw Blame History