Skip to content

Phase 0: scaffold React (Vite + TS) app alongside Angular - #720

Open
vibhaseshadri-cognition wants to merge 1 commit into
masterfrom
devin/1788362048-react-phase0-scaffold
Open

vibhaseshadri-cognition wants to merge 1 commit into
masterfrom
devin/1788362048-react-phase0-scaffold

Conversation

@vibhaseshadri-cognition

Copy link
Copy Markdown

Summary

PR 1 of the Angular -> React migration. Adds a self-contained react/ app next to the Angular source (nothing under src/ is touched) so both coexist until parity is verified. No feature code yet — only tooling, global styles and a placeholder App that renders the theme wrapper (<div class="default"><div class="body-cover"/><div class="wrapper">…).

Stack: Vite 7 + React 19 + TypeScript (strict), React Router (react-router-dom v7, v6-compatible API), Vitest + React Testing Library (jsdom), Playwright (replaces Protractor), ESLint 9 flat config + Prettier (same singleQuote / tabWidth 4 / printWidth 120 / trailingComma es5 as root package.json), vite-plugin-pwa (Workbox generateSW, autoUpdate, manifest ported from src/manifest.json).

Notes on the SCSS port: _themes.scss now uses @use instead of @import, math.div($skull-size, 8) instead of /, and color.adjust(..., $lightness: -33%) instead of darken() — dart-sass removed/deprecated those forms; output is identical. The app-root:empty + .app-loader splash selector becomes #root:empty + .app-loader.

Also adds .github/workflows/react.yml (lint, typecheck, unit tests w/ coverage, build, Playwright e2e) scoped to react/** since the repo has no CI for the React side.

Angular -> React file mapping

Angular React
src/styles.scss react/src/styles/styles.scss
src/app/shared/scss/_media.scss, _theme_variables.scss, _themes.scss react/src/styles/ (same names)
src/index.html react/index.html
src/manifest.json react/vite.config.ts (VitePWA.manifest)
ngsw-config.json react/vite.config.ts (VitePWA.workbox)
src/assets/**, src/favicon.ico react/public/assets/**, react/public/favicon.ico
e2e/ (Protractor) react/e2e/ + react/playwright.config.ts
karma.conf.js / src/test.ts react/vite.config.ts (test) + react/src/test/setup.ts
tslint.json react/eslint.config.js

Verification

In react/: npm run lint, npm run typecheck, npm test (1 smoke test), npm run build (emits sw.js, manifest.webmanifest, 43 precached entries), npm run e2e (1 Playwright test) all pass.

Phase 0 shell

Devin-Org: engineering

Link to Devin session: https://app.devin.ai/sessions/1e6f5b46badc4852993dc2299512cd3d
Open in Devin Desktop: https://app.devin.ai/desktop/session/1e6f5b46badc4852993dc2299512cd3d?variant=devin
Requested by: @vibhaseshadri-cognition

- Vite + React 19 + TypeScript in react/ with React Router
- Vitest + React Testing Library, Playwright e2e, ESLint + Prettier (shared config)
- vite-plugin-pwa with manifest ported from src/manifest.json
- Global SCSS and theme engine ported from src/styles.scss and src/app/shared/scss
- GitHub Actions workflow for the react/ app

Co-Authored-By: Vibha  Seshadri <vibha.seshadri@cognition.ai>
@devin-ai-integration

Copy link
Copy Markdown

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment, CI, and merge conflict monitoring

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant