flights_web_raw/docs/superpowers/plans/2026-04-05-angular-react-migration-implementation.md

Angular → React Migration Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Migrate Aeroflot Flights Angular 12 application to React 18 with pixel-perfect visual and functional parity, validated by 1,225+ e2e tests and BackstopJS visual regression.

Architecture: Monorepo structure with both Angular and React versions running simultaneously. Single e2e test suite validates both. SCSS copied directly (no CSS Modules). PrimeReact replaces PrimeNG (identical CSS classes). Vite for dev speed, future Rsbuild support.

Tech Stack: React 18, Vite, PrimeReact, react-router-dom, i18next, axios, @tanstack/react-query, Zustand, Cypress, BackstopJS

---

Phase 1: Infrastructure Setup

Task 1: Create monorepo structure and move Angular app to apps/angular

Files:

• Create: apps/angular/ (move existing ClientApp/ here)

• Create: apps/react/ (new React app)

• Create: e2e/ (shared e2e tests)

• Create: package.json (root monorepo config)

• Step 1: Create root package.json for monorepo

{
  "name": "aeroflot-flights",
  "private": true,
  "workspaces": [
    "apps/angular",
    "apps/react",
    "e2e"
  ],
  "scripts": {
    "dev:angular": "cd apps/angular && npm start",
    "dev:react": "cd apps/react && npm run dev",
    "dev:both": "concurrently \"npm run dev:angular\" \"npm run dev:react\"",
    "validate": "cd e2e && bash ../scripts/full-validation.sh"
  },
  "devDependencies": {
    "concurrently": "^8.2.0"
  }
}

• Step 2: Move Angular ClientApp to apps/angular

mkdir -p apps
mv ClientApp apps/angular
cd apps/angular
# Verify angular.json exists
test -f angular.json && echo "✅ Angular app moved"

• Step 3: Create apps/react directory structure

mkdir -p apps/react/src/{app,styles,assets,components,features}
mkdir -p apps/react/public

• Step 4: Create e2e directory structure

mkdir -p e2e/{cypress/integration/{online-board,flight-details,schedule,flights-map,components,navigation,responsive,i18n,error-handling,search-history,integration,performance,accessibility},cypress/support/helpers,backstop/{engine_scripts/{puppet,playwright},bitmaps_reference,bitmaps_test,html_report_react,results},scripts}

• Step 5: Commit

git add -A
git commit -m "infrastructure: create monorepo structure with apps/angular, apps/react, e2e directories"

---

Task 2: Scaffold React app with Vite

Files:

• Create: apps/react/package.json

• Create: apps/react/vite.config.ts

• Create: apps/react/tsconfig.json

• Create: apps/react/src/main.tsx

• Create: apps/react/src/index.html

• Create: apps/react/src/app/App.tsx

• Step 1: Create React package.json

{
  "name": "@aeroflot-flights/react",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.15.0",
    "primereact": "^10.0.0",
    "primeicons": "^6.0.0",
    "leaflet": "^1.7.1",
    "i18next": "^23.7.0",
    "i18next-http-backend": "^2.4.0",
    "react-i18next": "^13.5.0",
    "axios": "^1.6.0",
    "@tanstack/react-query": "^5.28.0",
    "zustand": "^4.4.0"
  },
  "devDependencies": {
    "vite": "^5.0.0",
    "@vitejs/plugin-react": "^4.2.0",
    "typescript": "^5.3.0",
    "@types/react": "^18.2.0",
    "@types/react-dom": "^18.2.0",
    "sass": "^1.69.0"
  }
}

• Step 2: Create vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3001,
    open: false,
  },
  resolve: {
    alias: {
      '@app': path.resolve(__dirname, './src/app'),
      '@styles': path.resolve(__dirname, './src/styles'),
      '@assets': path.resolve(__dirname, './src/assets'),
    },
  },
  build: {
    outDir: 'dist',
    sourcemap: false,
  },
})

• Step 3: Create tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "resolveJsonModule": true,
    "moduleResolution": "bundler",
    "baseUrl": ".",
    "paths": {
      "@app/*": ["./src/app/*"],
      "@styles/*": ["./src/styles/*"],
      "@assets/*": ["./src/assets/*"]
    }
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

• Step 4: Create tsconfig.node.json

{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

• Step 5: Create src/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Aeroflot Flights</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

• Step 6: Create src/main.tsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './app/App'
import './styles/index.scss'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

• Step 7: Create src/app/App.tsx

import React from 'react'

export default function App() {
  return (
    <div className="app" data-testid="page-loaded">
      <h1>Aeroflot Flights - React Migration</h1>
      <p>Coming soon...</p>
    </div>
  )
}

• Step 8: Test React app builds

cd apps/react
npm install
npm run build
# Expected: dist/ folder created with index.html, assets/
echo "✅ React app builds successfully"

• Step 9: Commit

git add apps/react/
git commit -m "infrastructure: scaffold React app with Vite, TypeScript, and basic App component"

---

Task 3: Set up e2e folder with Cypress config

Files:

• Create: e2e/package.json

• Create: e2e/cypress.config.ts

• Create: e2e/tsconfig.json

• Create: e2e/cypress/support/commands.ts

• Create: e2e/cypress/support/index.ts

• Step 1: Create e2e/package.json

{
  "name": "@aeroflot-flights/e2e",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "cypress:open": "cypress open",
    "cypress:run": "cypress run",
    "backstop:reference": "backstop reference --config=backstop/backstop-angular.json",
    "backstop:test": "backstop test --config=backstop/backstop-react.json",
    "validate": "bash ../scripts/full-validation.sh"
  },
  "devDependencies": {
    "cypress": "^13.6.0",
    "backstopjs": "^6.3.0",
    "@cypress/schematic": "^2.5.0",
    "typescript": "^5.3.0"
  }
}

• Step 2: Create cypress.config.ts

import { defineConfig } from 'cypress'

export default defineConfig({
  e2e: {
    baseUrl: 'http://localhost:3000',
    supportFile: 'cypress/support/index.ts',
    specPattern: 'cypress/integration/**/*.cy.ts',
    viewportWidth: 1440,
    viewportHeight: 900,
    video: false,
    screenshotOnRunFailure: true,
    requestTimeout: 10000,
    responseTimeout: 10000,
    defaultCommandTimeout: 10000,
  },
  component: {
    devServer: {
      framework: 'react',
      bundler: 'vite',
    },
  },
})

• Step 3: Create cypress/support/commands.ts

/// <reference types="cypress" />

Cypress.Commands.add('getByTestId', (id: string, timeout = 8000) => {
  return cy.get(`[data-testid="${id}"]`, { timeout })
})

Cypress.Commands.add('forbidGeolocation', () => {
  cy.window().then(win => {
    cy.stub(win.navigator.geolocation, 'getCurrentPosition').rejects(
      new Error('Geolocation forbidden')
    )
  })
})

declare global {
  namespace Cypress {
    interface Chainable {
      getByTestId(id: string, timeout?: number): Chainable<JQuery<HTMLElement>>
      forbidGeolocation(): Chainable<void>
    }
  }
}

export {}

• Step 4: Create cypress/support/index.ts

import './commands'

beforeEach(() => {
  // Clear localStorage before each test
  cy.window().then(win => {
    win.localStorage.clear()
  })
})

afterEach(() => {
  // Clean up after each test
  cy.window().then(win => {
    win.localStorage.clear()
  })
})

• Step 5: Create e2e/tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "lib": ["ES2020", "DOM"],
    "module": "ESNext",
    "moduleResolution": "node",
    "strict": true,
    "resolveJsonModule": true,
    "types": ["cypress", "node"]
  },
  "include": ["cypress/**/*.ts", "cypress/**/*.tsx"]
}

• Step 6: Verify Cypress installs

cd e2e
npm install
npx cypress --version
# Expected: Version output like "13.6.0"
echo "✅ Cypress installed"

• Step 7: Commit

git add e2e/
git commit -m "infrastructure: set up e2e folder with Cypress config and support commands"

---

Phase 2: Styling Foundation

Task 4: Copy global SCSS files from Angular to React

Files:

• Create: apps/react/src/styles/ (all 30 global SCSS files from Angular)

• Step 1: Copy framework and global style files

cd apps/react/src/styles

# Copy from Angular
cp ../../../apps/angular/src/styles/framework.scss .
cp ../../../apps/angular/src/styles/_reset.scss .
cp ../../../apps/angular/src/styles/_colors.scss .
cp ../../../apps/angular/src/styles/_fonts.scss .
cp ../../../apps/angular/src/styles/_fonts.classes.scss .
cp ../../../apps/angular/src/styles/_shadows.scss .
cp ../../../apps/angular/src/styles/_variables.scss .
cp ../../../apps/angular/src/styles/_prime-styles.scss .
cp ../../../apps/angular/src/styles/_prime-calendar.scss .
cp ../../../apps/angular/src/styles/_layout.scss .
cp ../../../apps/angular/src/styles/_icons.scss .
cp ../../../apps/angular/src/styles/_buttons.scss .
cp ../../../apps/angular/src/styles/_tooltips.scss .
cp ../../../apps/angular/src/styles/_overrides.scss .
cp ../../../apps/angular/src/styles/_banners.scss .
cp ../../../apps/angular/src/styles/_logos.scss .
cp ../../../apps/angular/src/styles/_common.scss .
cp ../../../apps/angular/src/styles/_scrollbar.scss .
cp ../../../apps/angular/src/styles/_grid-sizes.scss .
cp ../../../apps/angular/src/styles/_leaflet-popup.scss .
cp ../../../apps/angular/src/styles/styles/_mixins.scss ./
cp ../../../apps/angular/src/styles/_screen.scss .
cp ../../../apps/angular/src/styles/_positioning.scss .
cp ../../../apps/angular/src/styles/_layouts.scss .

echo "✅ Global SCSS files copied"

• Step 2: Copy pages and adaptive styles

# Create page directories
mkdir -p pages/board pages/schedule adaptive

# Copy page styles
cp ../../../apps/angular/src/styles/pages/board/*.scss pages/board/
cp ../../../apps/angular/src/styles/pages/schedule/*.scss pages/schedule/
cp ../../../apps/angular/src/styles/pages/adaptive/*.scss adaptive/

echo "✅ Page and adaptive styles copied"

• Step 3: Create index.scss that imports all styles

@import 'framework';
@import 'reset';
@import 'screen';
@import 'layouts';
@import 'colors';
@import 'fonts';
@import 'fonts.classes';
@import 'shadows';
@import 'variables';
@import 'prime-styles';
@import 'layout';
@import 'icons';
@import 'buttons';
@import 'tooltips';
@import 'overrides';
@import 'prime-calendar';
@import 'pages/board/index';
@import 'pages/schedule/index';
@import 'banners';
@import 'logos';
@import 'common';
@import 'scrollbar';
@import 'grid-sizes';
@import 'leaflet-popup';
@import 'positioning';
@import 'mixins';

• Step 4: Copy assets (fonts, images)

# Copy fonts
mkdir -p ../assets/fonts
cp ../../../apps/angular/src/assets/fonts/* ../assets/fonts/

# Copy images
mkdir -p ../assets/images
cp -r ../../../apps/angular/src/assets/*.{png,jpg,jpeg,svg,ico} ../assets/ 2>/dev/null || true

echo "✅ Assets copied"

• Step 5: Verify SCSS compiles without errors

cd apps/react
npm install

# Try building
npm run build 2>&1 | grep -i "error" || echo "✅ SCSS compiles successfully"

• Step 6: Commit

git add apps/react/src/styles apps/react/src/assets
git commit -m "styles: copy all global and page SCSS files and assets from Angular"

---

Task 5: Copy component SCSS files from Angular to React

Files:

• Create: apps/react/src/app/ (75+ component SCSS files from Angular)

• Step 1: Create component directory structure

# Create all component directories matching Angular structure
mkdir -p apps/react/src/app/components/city-autocomplete
mkdir -p apps/react/src/app/components/page-layout
mkdir -p apps/react/src/app/features/online-board/pages
mkdir -p apps/react/src/app/features/online-board/components
mkdir -p apps/react/src/app/features/schedule/pages
mkdir -p apps/react/src/app/features/flights-map
mkdir -p apps/react/src/app/modules/components
mkdir -p apps/react/src/app/modules/pages

echo "✅ Component directories created"

• Step 2: Copy component SCSS files

# This is a bulk copy operation - copy all .scss files from Angular components
find apps/angular/src/app -name "*.component.scss" | while read file; do
  # Get relative path
  rel_path="${file#apps/angular/src/app/}"
  # Create target directory
  target_dir="apps/react/src/app/$(dirname "$rel_path")"
  mkdir -p "$target_dir"
  # Copy file, renaming .component.scss to .scss
  target_file="${file#apps/angular/}"
  target_file="${target_file%.component.scss}.scss"
  cp "$file" "apps/react/${target_file%.component.scss}.scss"
done

echo "✅ Component SCSS files copied"

• Step 3: Verify all SCSS files copied

# Count SCSS files
angular_count=$(find apps/angular/src/app -name "*.component.scss" | wc -l)
react_count=$(find apps/react/src/app -name "*.scss" | wc -l)

echo "Angular SCSS components: $angular_count"
echo "React SCSS files: $react_count"

if [ "$react_count" -gt "50" ]; then
  echo "✅ All component SCSS files copied"
else
  echo "⚠️  Warning: React has fewer SCSS files than expected"
fi

• Step 4: Create component index files that import SCSS

Each component will have minimal TypeScript that imports its styles:

cat > apps/react/src/app/components/city-autocomplete/city-autocomplete.scss << 'EOF'
@use "src/styles/framework" as *;

.city-autocomplete {
  display: flex;
  flex-direction: column;

  &__labels-container {
    justify-content: space-between;
    margin-bottom: $space-m;
    width: 100%;
    display: flex;
    align-items: center;
  }

  &__label {
    @include font-overflow();
    @include font-small($gray);
  }

  &__input {
    display: flex;
    flex-direction: row;
    position: relative;
    align-items: center;
    width: 100%;
    @include control-border-shadow();
  }

  // Copy all remaining styles from Angular
}
EOF

• Step 5: Commit

git add apps/react/src/app
git commit -m "styles: copy all 75+ component SCSS files from Angular maintaining folder structure"

---

Phase 3: Core Components

Task 6: Create Button component (first core UI component)

Files:

• Create: apps/react/src/app/components/button/button.tsx

• Create: apps/react/src/app/components/button/button.scss

• Create: apps/react/src/app/components/button/index.ts

• Step 1: Create button component

// apps/react/src/app/components/button/button.tsx
import React from 'react'
import './button.scss'

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary' | 'tertiary'
  size?: 'small' | 'medium' | 'large'
  disabled?: boolean
  loading?: boolean
  children: React.ReactNode
}

export const Button: React.FC<ButtonProps> = ({
  variant = 'primary',
  size = 'medium',
  disabled = false,
  loading = false,
  className = '',
  ...props
}) => {
  return (
    <button
      className={`button button--${variant} button--${size} ${className}`.trim()}
      disabled={disabled || loading}
      data-testid={props['data-testid'] || 'button'}
      {...props}
    >
      {loading ? <span className="button__loader">Loading...</span> : props.children}
    </button>
  )
}

• Step 2: Copy button SCSS from Angular

# Copy from Angular's button styles
cp apps/angular/src/styles/_buttons.scss apps/react/src/app/components/button/button.scss

# Verify it exists
test -f apps/react/src/app/components/button/button.scss && echo "✅ Button SCSS copied"

• Step 3: Create index.ts for exports

// apps/react/src/app/components/button/index.ts
export { Button } from './button'
export type { ButtonProps } from './button'

• Step 4: Create test file

// e2e/cypress/integration/components/button.cy.ts
describe('Button Component', () => {
  beforeEach(() => {
    cy.visit('http://localhost:3001')
  })

  it('should render button with text', () => {
    cy.getByTestId('button').should('exist')
  })

  it('should have correct styling', () => {
    cy.getByTestId('button')
      .should('have.css', 'padding')
      .should('have.css', 'border-radius')
  })
})

• Step 5: Verify button compiles

cd apps/react
npm run build 2>&1 | grep -i "error" || echo "✅ Button component compiles"

• Step 6: Commit

git add apps/react/src/app/components/button e2e/cypress/integration/components/button.cy.ts
git commit -m "feat: implement Button component with styling from Angular"

---

Task 7: Create Input component

Files:

• Create: apps/react/src/app/components/input/input.tsx

• Create: apps/react/src/app/components/input/input.scss

• Create: apps/react/src/app/components/input/index.ts

• Step 1: Create input component

// apps/react/src/app/components/input/input.tsx
import React from 'react'
import './input.scss'

export interface InputProps
  extends React.InputHTMLAttributes<HTMLInputElement> {
  label?: string
  error?: string
  helperText?: string
}

export const Input: React.FC<InputProps> = ({
  label,
  error,
  helperText,
  className = '',
  ...props
}) => {
  return (
    <div className="input-wrapper">
      {label && <label className="input-label">{label}</label>}
      <input
        className={`input ${error ? 'input--error' : ''} ${className}`.trim()}
        data-testid={props['data-testid'] || 'input'}
        {...props}
      />
      {error && <span className="input-error">{error}</span>}
      {helperText && <span className="input-helper">{helperText}</span>}
    </div>
  )
}

• Step 2: Create input SCSS

// apps/react/src/app/components/input/input.scss
@use "src/styles/framework" as *;

.input-wrapper {
  display: flex;
  flex-direction: column;
  margin-bottom: $space-m;
}

.input-label {
  @include font-small($gray);
  margin-bottom: $space-s2;
  font-weight: 600;
}

.input {
  padding: $space-s2 $space-m;
  border: 1px solid $border-input;
  border-radius: $border-radius;
  font-size: 16px;
  transition: border-color 0.3s ease;

  &:focus {
    outline: none;
    border-color: $primary-color;
  }

  &--error {
    border-color: $red;
  }
}

.input-error {
  @include font-small($red);
  margin-top: $space-s;
}

.input-helper {
  @include font-small($gray);
  margin-top: $space-s;
}

• Step 3: Create index.ts

// apps/react/src/app/components/input/index.ts
export { Input } from './input'
export type { InputProps } from './input'

• Step 4: Create test

// e2e/cypress/integration/components/input.cy.ts
describe('Input Component', () => {
  beforeEach(() => {
    cy.visit('http://localhost:3001')
  })

  it('should render input with label', () => {
    cy.getByTestId('input').should('exist')
  })

  it('should show error state', () => {
    cy.getByTestId('input')
      .should('exist')
  })
})

• Step 5: Commit

git add apps/react/src/app/components/input e2e/cypress/integration/components/input.cy.ts
git commit -m "feat: implement Input component with error and helper text support"

---

Task 8: Create core component collection (Modal, Tabs, DatePicker)

Files: Create 3 more core components (Modal, Tabs, DatePicker)

• Step 1: Create Modal component

// apps/react/src/app/components/modal/modal.tsx
import React from 'react'
import './modal.scss'

export interface ModalProps {
  isOpen: boolean
  onClose: () => void
  title?: string
  children: React.ReactNode
  size?: 'small' | 'medium' | 'large'
}

export const Modal: React.FC<ModalProps> = ({
  isOpen,
  onClose,
  title,
  children,
  size = 'medium',
}) => {
  if (!isOpen) return null

  return (
    <>
      <div className="modal-overlay" onClick={onClose} data-testid="modal-overlay" />
      <div className={`modal modal--${size}`} data-testid="modal">
        {title && (
          <div className="modal-header">
            <h2 className="modal-title">{title}</h2>
            <button
              className="modal-close"
              onClick={onClose}
              data-testid="modal-close"
              aria-label="Close modal"
            >
              ✕
            </button>
          </div>
        )}
        <div className="modal-content">{children}</div>
      </div>
    </>
  )
}

• Step 2: Create Tabs component

// apps/react/src/app/components/tabs/tabs.tsx
import React, { useState } from 'react'
import './tabs.scss'

export interface Tab {
  id: string
  label: string
  content: React.ReactNode
}

export interface TabsProps {
  tabs: Tab[]
  defaultTab?: string
  onTabChange?: (tabId: string) => void
}

export const Tabs: React.FC<TabsProps> = ({
  tabs,
  defaultTab = tabs[0]?.id,
  onTabChange,
}) => {
  const [activeTab, setActiveTab] = useState(defaultTab)

  const handleTabClick = (tabId: string) => {
    setActiveTab(tabId)
    onTabChange?.(tabId)
  }

  return (
    <div className="tabs" data-testid="tabs">
      <div className="tabs-header">
        {tabs.map(tab => (
          <button
            key={tab.id}
            className={`tab-button ${activeTab === tab.id ? 'tab-button--active' : ''}`}
            onClick={() => handleTabClick(tab.id)}
            data-testid={`tab-${tab.id}`}
          >
            {tab.label}
          </button>
        ))}
      </div>
      <div className="tabs-content">
        {tabs.map(tab => (
          <div
            key={tab.id}
            className={`tab-panel ${activeTab === tab.id ? 'tab-panel--active' : ''}`}
            hidden={activeTab !== tab.id}
            data-testid={`tab-panel-${tab.id}`}
          >
            {tab.content}
          </div>
        ))}
      </div>
    </div>
  )
}

• Step 3: Create DatePicker component

// apps/react/src/app/components/date-picker/date-picker.tsx
import React from 'react'
import './date-picker.scss'

export interface DatePickerProps {
  value?: string
  onChange?: (date: string) => void
  placeholder?: string
  label?: string
  error?: string
}

export const DatePicker: React.FC<DatePickerProps> = ({
  value,
  onChange,
  placeholder = 'DD.MM.YYYY',
  label,
  error,
}) => {
  return (
    <div className="date-picker">
      {label && <label className="date-picker-label">{label}</label>}
      <input
        type="text"
        className={`date-picker-input ${error ? 'date-picker-input--error' : ''}`}
        value={value}
        onChange={e => onChange?.(e.target.value)}
        placeholder={placeholder}
        data-testid="date-picker-input"
      />
      {error && <span className="date-picker-error">{error}</span>}
    </div>
  )
}

• Step 4: Create SCSS for all three components

# Copy SCSS from Angular for modals, tabs, date pickers
cp apps/angular/src/styles/pages/board/components/page-tabs.scss apps/react/src/app/components/tabs/tabs.scss
cp apps/angular/src/styles/styles/_prime-calendar.scss apps/react/src/app/components/date-picker/date-picker.scss

# Create modal SCSS
cat > apps/react/src/app/components/modal/modal.scss << 'EOF'
@use "src/styles/framework" as *;

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 999;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  border-radius: $border-radius;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  max-height: 90vh;
  overflow-y: auto;

  &--small {
    width: 400px;
  }

  &--medium {
    width: 600px;
  }

  &--large {
    width: 800px;
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: $space-l;
  border-bottom: 1px solid #e0e0e0;
}

.modal-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;

  &:hover {
    color: #000;
  }
}

.modal-content {
  padding: $space-l;
}
EOF

• Step 5: Create index.ts for each component

cat > apps/react/src/app/components/modal/index.ts << 'EOF'
export { Modal } from './modal'
export type { ModalProps } from './modal'
EOF

cat > apps/react/src/app/components/tabs/index.ts << 'EOF'
export { Tabs } from './tabs'
export type { TabsProps, Tab } from './tabs'
EOF

cat > apps/react/src/app/components/date-picker/index.ts << 'EOF'
export { DatePicker } from './date-picker'
export type { DatePickerProps } from './date-picker'
EOF

• Step 6: Create tests for all three

// e2e/cypress/integration/components/modal.cy.ts
describe('Modal Component', () => {
  it('should render modal when open', () => {
    cy.visit('http://localhost:3001')
    cy.getByTestId('modal').should('exist')
  })
})

// e2e/cypress/integration/components/tabs.cy.ts
describe('Tabs Component', () => {
  it('should switch tabs when clicked', () => {
    cy.visit('http://localhost:3001')
    cy.getByTestId('tabs').should('exist')
  })
})

// e2e/cypress/integration/components/date-picker.cy.ts
describe('DatePicker Component', () => {
  it('should accept date input', () => {
    cy.visit('http://localhost:3001')
    cy.getByTestId('date-picker-input').type('01.01.2024')
  })
})

• Step 7: Commit

git add apps/react/src/app/components/{modal,tabs,date-picker}
git add e2e/cypress/integration/components/{modal,tabs,date-picker}.cy.ts
git commit -m "feat: implement core UI components (Modal, Tabs, DatePicker) with styling and tests"

---

Phase 4: Routing Setup

Task 9: Create React Router configuration

Files:

• Create: apps/react/src/app/App.tsx (with routing)

• Create: apps/react/src/app/router.tsx

• Create: apps/react/src/app/pages/ (stub pages)

• Step 1: Create router configuration

// apps/react/src/app/router.tsx
import { createBrowserRouter } from 'react-router-dom'
import App from './App'
import Home from './pages/Home'
import NotFound from './pages/NotFound'

export const router = createBrowserRouter(
  [
    {
      path: '/',
      element: <App />,
      children: [
        {
          index: true,
          element: <Home />,
        },
        {
          path: ':lang/onlineboard/arrival/:code/:datetime',
          element: <div>Arrival Board Page</div>,
        },
        {
          path: ':lang/onlineboard/departure/:code/:datetime',
          element: <div>Departure Board Page</div>,
        },
        {
          path: ':lang/schedule/:code/:datetime',
          element: <div>Schedule Page</div>,
        },
        {
          path: '*',
          element: <NotFound />,
        },
      ],
    },
  ],
  {
    basename: '/',
  }
)

• Step 2: Update App.tsx to use router

// apps/react/src/app/App.tsx
import React from 'react'
import { Outlet } from 'react-router-dom'
import './App.scss'

export default function App() {
  return (
    <div className="app" data-testid="page-loaded">
      <header className="app-header">
        <h1>Aeroflot Flights</h1>
      </header>
      <main className="app-main">
        <Outlet />
      </main>
      <footer className="app-footer">
        <p>&copy; 2024 Aeroflot</p>
      </footer>
    </div>
  )
}

• Step 3: Create stub pages

// apps/react/src/app/pages/Home.tsx
import React from 'react'

export default function Home() {
  return (
    <div className="home-page" data-testid="home-page">
      <h2>Home</h2>
      <p>Welcome to Aeroflot Flights</p>
    </div>
  )
}

// apps/react/src/app/pages/NotFound.tsx
import React from 'react'

export default function NotFound() {
  return (
    <div className="not-found-page">
      <h2>404 - Page Not Found</h2>
    </div>
  )
}

• Step 4: Update main.tsx to use router

// apps/react/src/main.tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import { RouterProvider } from 'react-router-dom'
import { router } from './app/router'
import './styles/index.scss'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>,
)

• Step 5: Create App.scss

// apps/react/src/app/App.scss
@use "src/styles/framework" as *;

.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.app-header {
  background-color: white;
  padding: $space-xl;
  border-bottom: 1px solid #e0e0e0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

  h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
  }
}

.app-main {
  flex: 1;
  padding: $space-xl;
  max-width: $site-width;
  width: 100%;
  margin: 0 auto;
}

.app-footer {
  background-color: #f5f5f5;
  padding: $space-xl;
  text-align: center;
  border-top: 1px solid #e0e0e0;

  p {
    margin: 0;
    color: #666;
    font-size: 14px;
  }
}

• Step 6: Verify routing works

cd apps/react
npm run dev &
sleep 3
curl -s http://localhost:3001 | grep -q "Aeroflot Flights" && echo "✅ React routing works"
pkill -f "vite"

• Step 7: Commit

git add apps/react/src/app/{router.tsx,App.tsx,App.scss,pages/}
git add apps/react/src/main.tsx
git commit -m "feat: set up React Router with basic routing and layout structure"

---

Phase 5: E2E Test Infrastructure (Expanded)

Task 10: Create test helper files and base test templates

Files:

• Create: e2e/cypress/support/helpers/api.helpers.ts

• Create: e2e/cypress/support/helpers/navigation.helpers.ts

• Create: e2e/cypress/support/helpers/assertions.helpers.ts

• Create: e2e/cypress/support/helpers/data.helpers.ts

• Create: e2e/cypress/integration/online-board/01-arrival-search.cy.ts

• Step 1: Create API helpers

// e2e/cypress/support/helpers/api.helpers.ts
export const setupApiInterceptors = () => {
  cy.intercept('GET', '**/api/flights/**', { fixture: 'flights.json' }).as('getFlights')
  cy.intercept('GET', '**/api/cities/**', { fixture: 'cities.json' }).as('getCities')
  cy.intercept('GET', '**/api/schedule/**', { fixture: 'schedule.json' }).as('getSchedule')
}

export const mockApiError = (endpoint: string, statusCode: number = 500) => {
  cy.intercept('GET', endpoint, {
    statusCode,
    body: { error: 'API Error' },
  }).as('apiError')
}

export const mockApiSuccess = (endpoint: string, fixture: string) => {
  cy.intercept('GET', endpoint, { fixture }).as('apiSuccess')
}

• Step 2: Create navigation helpers

// e2e/cypress/support/helpers/navigation.helpers.ts
export const navigateToHome = () => {
  cy.visit('/')
}

export const navigateToArrivalBoard = (cityCode: string, date: string) => {
  cy.visit(`/ru-ru/onlineboard/arrival/${cityCode}/${date}-0000-2400`)
}

export const navigateToDepartureBoard = (cityCode: string, date: string) => {
  cy.visit(`/ru-ru/onlineboard/departure/${cityCode}/${date}-0000-2400`)
}

export const navigateToSchedule = (cityCode: string, date: string) => {
  cy.visit(`/ru-ru/schedule/${cityCode}/${date}`)
}

• Step 3: Create assertions helpers

// e2e/cypress/support/helpers/assertions.helpers.ts
export const assertButtonStylesCorrect = (selector: string) => {
  cy.get(selector)
    .should('have.css', 'padding')
    .should('have.css', 'border-radius')
    .should('have.css', 'background-color')
}

export const assertInputStylesCorrect = (selector: string) => {
  cy.get(selector)
    .should('have.css', 'padding')
    .should('have.css', 'border-radius')
    .should('have.css', 'border')
}

export const assertModalStylesCorrect = (selector: string) => {
  cy.get(selector)
    .should('have.css', 'position', 'fixed')
    .should('have.css', 'background-color')
    .should('have.css', 'z-index')
}

export const assertResponsiveLayout = () => {
  // Mobile
  cy.viewport(375, 667)
  cy.getByTestId('page-loaded').should('be.visible')

  // Tablet
  cy.viewport(768, 1024)
  cy.getByTestId('page-loaded').should('be.visible')

  // Desktop
  cy.viewport(1440, 900)
  cy.getByTestId('page-loaded').should('be.visible')
}

• Step 4: Create data helpers

// e2e/cypress/support/helpers/data.helpers.ts
export const TEST_DATA = {
  cities: {
    moscow: { code: 'SVO', name: 'Москва' },
    spb: { code: 'LED', name: 'Санкт-Петербург' },
    anapa: { code: 'AAQ', name: 'Анапа' },
  },
  dates: {
    today: new Date().toLocaleDateString('ru-RU'),
    tomorrow: new Date(Date.now() + 86400000).toLocaleDateString('ru-RU'),
    nextWeek: new Date(Date.now() + 604800000).toLocaleDateString('ru-RU'),
  },
}

export const generateFlightNumber = () => {
  return `SU${Math.floor(Math.random() * 1000)}`
}

export const getCurrentDate = (format = 'DD.MM.YYYY') => {
  const now = new Date()
  const day = String(now.getDate()).padStart(2, '0')
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const year = now.getFullYear()
  return `${day}.${month}.${year}`
}

• Step 5: Create first test suite template

// e2e/cypress/integration/online-board/01-arrival-search.cy.ts
import * as moment from 'moment'

describe('Online Board: Arrival Search', () => {
  const BASE_URLS = {
    angular: 'http://localhost:3000',
    react: 'http://localhost:3001',
  }

  const arrivalCity = {
    name: 'Анапа',
    code: 'AAQ',
  }

  const today = moment().format('DD.MM.YYYY')

  ;['angular', 'react'].forEach(version => {
    describe(`${version.toUpperCase()} version`, () => {
      beforeEach(() => {
        cy.visit(`${BASE_URLS[version]}/`)
        cy.intercept('GET', '**api/flights/**').as('getFlights')
      })

      it('should render home page', () => {
        cy.getByTestId('page-loaded').should('exist')
      })

      it('should have arrival search button', () => {
        cy.getByTestId('arrival-search-button').should('be.visible')
      })

      it('should search flights with city input', () => {
        cy.getByTestId('city-autocomplete-input')
          .should('exist')
          .type(`${arrivalCity.name}`)
        cy.getByTestId('calendar-input').type(today)
        cy.getByTestId('arrival-search-button').click()

        cy.wait('@getFlights')
        cy.getByTestId('flight-result').should('have.length.at.least', 0)
      })

      it('should display search results', () => {
        cy.getByTestId('city-autocomplete-input').type(`${arrivalCity.name}`)
        cy.getByTestId('calendar-input').type(today)
        cy.getByTestId('arrival-search-button').click()

        cy.wait('@getFlights')
        // Results should be visible or empty state should show
        cy.getByTestId('board-search-result')
          .or(cy.getByTestId('empty-state'))
          .should('be.visible')
      })
    })
  })
})

• Step 6: Update cypress support/index.ts to load helpers

// e2e/cypress/support/index.ts
import './commands'
import './helpers/api.helpers'
import './helpers/navigation.helpers'
import './helpers/assertions.helpers'
import './helpers/data.helpers'

beforeEach(() => {
  cy.window().then(win => {
    win.localStorage.clear()
  })
})

afterEach(() => {
  cy.window().then(win => {
    win.localStorage.clear()
  })
})

• Step 7: Verify tests can run (will fail, which is expected)

cd e2e
npm run cypress:run -- --config baseUrl=http://localhost:3001 --spec "cypress/integration/online-board/01-arrival-search.cy.ts" || echo "⚠️  Tests running (failures expected at this stage)"

• Step 8: Commit

git add e2e/cypress/support/helpers/ e2e/cypress/integration/online-board/
git commit -m "test: create e2e test helpers and first Arrival Search test suite"

---

Phase 6: Feature Implementation (Online Board Arrival)

Task 11: Implement CityAutocomplete component

Files:

• Create: apps/react/src/app/components/city-autocomplete/city-autocomplete.tsx
• Create: apps/react/src/app/components/city-autocomplete/city-autocomplete.scss
• Create: apps/react/src/app/components/city-autocomplete/index.ts

(Detailed component implementation following the same pattern as Button - copy logic from Angular, update React patterns)

• Step 1-5: [Same pattern as Task 6 - Button component]
  • Create component with React hooks
  • Copy SCSS from Angular
  • Create index.ts
  • Add data-testid attributes matching Angular version
  • Test and commit

---

Task 12: Implement OnlineBoard Arrival feature

(High-level feature integrating multiple components)

• Steps 1-8: Build Arrivalsearch page using components from Task 11 and earlier core components

---

Phase 7: BackstopJS Setup

Task 13: Create BackstopJS configuration for Angular (baseline)

Files:

• Create: e2e/backstop/backstop-angular.json
• Create: e2e/backstop/engine_scripts/puppet/runBefore.js
• Create: e2e/backstop/engine_scripts/puppet/runAfter.js

(Detailed configuration as specified in design document)

---

Task 14: Create BackstopJS configuration for React (comparison)

Files:

• Create: e2e/backstop/backstop-react.json

(Mirror of angular config, pointing to React localhost:3001)

---

Phase 8: Validation Scripts

Task 15: Create full-validation.sh script

Files:

• Create: scripts/full-validation.sh

(Complete automation script as specified in design document)

---

Phase 9: Complete Test Suite

Tasks 16-55: Write remaining 1,000+ tests

Organized by feature:

• Tasks 16-20: Online Board tests (80+ tests each module)
• Tasks 21-25: Flight Details tests (50+ tests)
• Tasks 26-30: Schedule tests (50+ tests)
• Tasks 31-35: Components tests (50+ tests)
• Tasks 36-40: Navigation tests (30+ tests)
• Tasks 41-45: Responsive tests (50+ tests)
• Tasks 46-50: i18n tests (30+ tests)
• Tasks 51-55: Error handling & integration tests (100+ tests)

Each task follows same pattern:

1. Write failing tests
2. Verify they fail
3. Implement feature/component
4. Verify tests pass
5. Commit

---

Phase 10: Visual Validation & Final Checks

Task 56: Generate BackstopJS baseline from Angular

• Step 1: Start Angular version

cd apps/angular && npm start &
sleep 10

• Step 2: Run BackstopJS reference capture

cd e2e
npm run backstop:reference

• Step 3: Verify baseline images created

test -d backstop/bitmaps_reference && [ $(ls -1 backstop/bitmaps_reference | wc -l) -gt 100 ] && echo "✅ Baseline created"

• Step 4: Commit baseline

git add e2e/backstop/bitmaps_reference/
git commit -m "test: generate BackstopJS baseline from Angular version"

---

Task 57: Run BackstopJS comparison on React

• Step 1: Start React version

cd apps/react && npm run dev &
sleep 10

• Step 2: Run BackstopJS test comparison

cd e2e
npm run backstop:test

• Step 3: Review visual diff report

open e2e/backstop/html_report_react/index.html

• Step 4: Document any visual differences**

If differences exist, note them and create issues for fixes.

• Step 5: Commit results

git add e2e/backstop/bitmaps_test_react/
git commit -m "test: run BackstopJS comparison - React vs Angular baseline"

---

Task 58: Fix any visual differences

For each visual diff found:

• Step 1: Identify the CSS property causing diff
• Step 2: Update React component SCSS
• Step 3: Regenerate BackstopJS screenshot
• Step 4: Verify 0% diff
• Step 5: Commit fix

---

Task 59: Run full validation suite

• Step 1: Start both versions

npm run dev:both &
sleep 10

• Step 2: Run full validation

npm run validate

• Step 3: Verify all tests pass Expected output:

✅ Angular E2E Tests:      PASSED (1225 tests)
✅ React E2E Tests:        PASSED (1225 tests)
✅ Visual Regression:      PASSED (0% diff)

🎉 ALL VALIDATIONS PASSED

• Step 4: Final commit**

git commit -m "test: complete full validation - 1,225 tests pass, 0% visual diff"

---

Execution Checklist

After all tasks completed:

• All 1,225+ e2e tests pass on both Angular and React
• BackstopJS shows 0% visual diff
• npm run validate completes successfully
• Both versions run on localhost:3000 and 3001
• All commits are clean and descriptive
• Repository ready for production testing

---

Notes

• Each task should produce working, testable code
• Commit after every logical step
• Use exact file paths provided
• Follow TDD when applicable (write test, watch fail, implement, watch pass)
• Update this checklist as you progress
• Stop if you encounter blockers and document them