Skip to content

Add Field canvas component and fix Firebase/env configuration#18

Open
DigitalBlueprint239 wants to merge 5 commits intomasterfrom
claude/infrastructure-repair-Uz0uG
Open

Add Field canvas component and fix Firebase/env configuration#18
DigitalBlueprint239 wants to merge 5 commits intomasterfrom
claude/infrastructure-repair-Uz0uG

Conversation

@DigitalBlueprint239
Copy link
Owner

@DigitalBlueprint239 DigitalBlueprint239 commented Feb 26, 2026

Summary

This PR adds a new stateless Field canvas component for the Smart Playbook and resolves critical Firebase configuration and environment variable issues across the codebase.

Key Changes

New Components

  • src/components/SmartPlaybook/Field.js – Stateless, memoized canvas component for rendering football field, players, and routes
    • Pure functional component with no internal state management
    • Optimized with React.memo and useCallback for performance
    • Supports player dragging, route selection, and touch/mouse events
    • Includes utility functions for hit detection and canvas drawing
    • Comprehensive error handling and debug mode support

Environment & Configuration

  • src/config/env.ts (new) – Centralized environment variable validation

    • Exports all REACT_APP_* prefixed variables (CRA standard)
    • Provides validateFirebaseConfig() function to check Firebase setup
    • Exports convenience firebaseConfig object for Firebase initialization
    • Replaces scattered import.meta.env.VITE_* calls throughout codebase

  • src/services/firebase.ts – Refactored to use centralized env config

    • Now imports from src/config/env instead of using NEXT_PUBLIC_* prefix
    • Gracefully handles missing Firebase credentials (warns but doesn't crash)
    • Guards Firebase initialization behind validateFirebaseConfig() check
    • Prevents auth/invalid-api-key crashes in test environments

  • src/services/firestore.ts – Updated to use centralized env config

    • Imports firebaseConfig and validateFirebaseConfig from src/config/env
    • Guards onAuthStateChanged behind null check
    • Prevents crashes when Firebase is not configured

Bug Fixes

  • Environment variable prefix corrections across multiple files:

    • src/ai-brain/AIContext.tsx – Changed VITE_OPENAI_API_KEY to REACT_APP_OPENAI_API_KEY
    • src/services/ai-proxy.ts – Fixed AI proxy token env var
    • src/services/push-notifications.ts – Fixed VAPID key env var
    • src/components/ErrorBoundary.tsx – Fixed version env var
    • src/components/FirebaseTest.tsx – Fixed environment detection
    • src/components/IntegrationTest.tsx – Fixed environment detection

  • TypeScript/React fixes:

    • src/components/SmartPlaybook/DebugPanel.js – Fixed Rules of Hooks violations (moved prop validation after hook calls)
    • src/components/SmartPlaybook/SmartPlaybook.tsx – Added proper type annotations to state variables
    • src/components/SmartPlaybook/TouchOptimizedPlaybook.tsx – Fixed type casting in setState
    • src/hooks/useAuth.tsx – Added missing React import
    • src/contexts/TeamContext.tsx – Added null-safety guards for Firebase services
    • src/components/AuthProvider.tsx – Fixed to use auth from services/firebase instead of calling getAuth() directly

  • Test configuration:

    • src/setupTests.ts – Added window.matchMedia mock for jsdom compatibility
    • src/App.test.tsx – Fixed to use getAllByText for multiple matching elements

  • Build configuration:

    • Deleted tailwind.config.js (removed Tailwind v4 + react-scripts auto-detection conflict)
    • Updated src/index.css to use Tailwind v4 @import syntax
    • Updated tsconfig.json to exclude 9+ legacy/orphaned files causing 166+ TS errors

Type Definitions

Added .d.ts declaration files for JavaScript components:

  • src/components/SmartPlaybook/Field.d.ts
  • src/components/SmartPlaybook/DebugPanel.d.ts
  • `src/components/SmartPlaybook/Play

https://claude.ai/code/session_01R7wcmQQLSC2pNoemAUJwwT

@claude
feat(infra): Phase 1–3 — fix build, env vars, TypeScript compilation
635fe2e 
CRIT-001: Delete tailwind.config.js (react-scripts auto-detected it and
injected require('tailwindcss') as a PostCSS plugin; Tailwind v4 throws).
Update src/index.css from @tailwind directives to @import "tailwindcss".

CRIT-002/HIGH-002/HIGH-003: Create src/config/env.ts with centralized
REACT_APP_* env var access and validateFirebaseConfig(). Replace all
import.meta.env.VITE_* and NEXT_PUBLIC_* references across 7 active files.

CRIT-003: Add 11 orphaned/broken files to tsconfig.json exclude array
(legacy files with spaces in names, missing deps, or JSX in .ts files).

App renders without crashing when Firebase env vars are not set.

HIGH-004/Phase 4: Fix test setup (matchMedia mock, AuthProvider context
mismatch, multiple /Coach Core/ matches). Tests now pass.

https://claude.ai/code/session_01R7wcmQQLSC2pNoemAUJwwT
@claude
fix(firebase): null-safe initialization; fix AuthProvider context mis…
6a54f7b 
…match

firebase.ts: rewrite with graceful null handling — app/auth/db are null
when env vars are missing; app renders with console warning instead of crash.

firestore.ts: guard getAuth() behind validateFirebaseConfig() to prevent
auth/invalid-api-key in test environment; guard onAuthStateChanged call.

AuthProvider.tsx: use auth from services/firebase instead of calling
getAuth() unconditionally (prevented crash when no Firebase app exists).

App.tsx: use AuthProvider from hooks/useAuth (Dashboard.tsx uses useAuth
from hooks/useAuth — mismatched contexts caused 'useAuth must be used
within AuthProvider' error).

useAuth.tsx, TeamContext.tsx, useFirestore.ts: null-safe Firebase usage;
fix import shadowing (firestoreAddPlay aliases); fix missing React import.

PracticePlanner.tsx: map non-existent generateSmartPractice → generatePracticePlan.

https://claude.ai/code/session_01R7wcmQQLSC2pNoemAUJwwT
@claude
fix(smartplaybook): TypeScript declarations, hooks rules, type annota…
bcabb51 
…tions

Add .d.ts stubs for all untyped JS components (Field, DebugPanel,
PlayLibrary, PlayController, and 8 sub-components) so TypeScript strict
mode accepts them without allowJs.

Field.js: copy of colon-named ':components:SmartPlaybook:Field.js' to
a valid filename that can be imported on all platforms.

DebugPanel.js: fix React Hooks rules violation — move all useCallback/
useMemo hooks before early-return prop validation guards.

SmartPlaybook.tsx: add type annotations to all useState calls and callback
parameters; fix mode narrowing bug; fix TouchEvent/MouseEvent types.

TouchOptimizedPlaybook.tsx: fix styled-jsx → <style>; fix typed updater.

CanvasArea.tsx: fix import from colon-named file to '../Field'.

https://claude.ai/code/session_01R7wcmQQLSC2pNoemAUJwwT
@claude
fix(components): remove styled-jsx; fix matchMedia; patch npm vulns
981c0bd 
OnboardingModal.tsx, PWAInstallPrompt.tsx: replace Next.js <style jsx>
with plain <style> (styled-jsx is not valid in CRA TypeScript projects).

PWAInstallPrompt.tsx: fix Navigator.standalone type with intersection cast.

package-lock.json: npm audit fix --legacy-peer-deps — reduced from 24
vulnerabilities (1 critical, 14 high) to 11 (8 high, 3 moderate).
Remaining vulns are in webpack-dev-server, fixable only via --force
(would install react-scripts@0.0.0 — deferred to next session).

https://claude.ai/code/session_01R7wcmQQLSC2pNoemAUJwwT
@claude
chore: delete tailwind.config.js (CRIT-001 fix)
8b6a2c3 
react-scripts v5 auto-detects tailwind.config.js and injects
require('tailwindcss') as a PostCSS plugin. Tailwind v4 throws when
used directly as a plugin (v4 requires @tailwindcss/postcss).
Deleting this file removes the auto-detection trigger.

https://claude.ai/code/session_01R7wcmQQLSC2pNoemAUJwwT
@netlify
Copy link

netlify bot commented Feb 26, 2026 •
edited
Loading

❌ Deploy Preview for magical-starlight-0c1207 failed.

Name Link
🔨 Latest commit 8b6a2c3
🔍 Latest deploy log https://app.netlify.com/projects/magical-starlight-0c1207/deploys/699fa3c869d37b00087ee04c

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

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@DigitalBlueprint239 @claude