75 lines
2.7 KiB
Markdown
75 lines
2.7 KiB
Markdown
# Copilot Instructions for in-car-system-fe
|
|
|
|
## Project Overview
|
|
|
|
- **Type:** React + TypeScript SPA using Vite
|
|
- **Purpose:** In-car system frontend for camera management, sighting history, and system settings
|
|
- **Key Directories:**
|
|
- `src/components/`: UI components grouped by feature (Camera, Sighting, Settings, etc.)
|
|
- `src/context/`: React context for global state (e.g., AlertHit, NPEDUser, SightingFeed)
|
|
- `src/hooks/`: Custom React hooks for data fetching, config, and UI logic
|
|
- `src/pages/`: Top-level route views (Dashboard, Camera, Session, SystemSettings)
|
|
- `src/types/`: Shared TypeScript types
|
|
- `src/utils/`: Utility functions and config helpers
|
|
|
|
## Architecture & Patterns
|
|
|
|
- **Component Structure:**
|
|
- Feature-based folders (e.g., `CameraSettings`, `SightingOverview`)
|
|
- Components are mostly functional, using hooks and context for state
|
|
- **State Management:**
|
|
- Uses React Context for cross-component state (see `src/context/providers/`)
|
|
- Reducers in `src/context/reducers/` for complex state updates
|
|
- **Data Flow:**
|
|
- Data is fetched and managed via custom hooks (see `src/hooks/`)
|
|
- Context providers wrap the app in `main.tsx`
|
|
- **Styling:**
|
|
- CSS modules (e.g., `App.css`, `index.css`)
|
|
- No CSS-in-JS or styled-components
|
|
|
|
## Developer Workflows
|
|
|
|
- **Install:** `npm install`
|
|
- **Start Dev Server:** `npm run dev`
|
|
- **Build:** `npm run build`
|
|
- **Preview Build:** `npm run preview`
|
|
- **Lint:** `npm run lint` (uses ESLint, see `eslint.config.js`)
|
|
- **Type Check:** `tsc --noEmit`
|
|
- **Test:** _No test framework configured by default_
|
|
|
|
## Project Conventions
|
|
|
|
- **TypeScript:**
|
|
- All components and hooks are typed; shared types in `src/types/types.ts`
|
|
- **Component Naming:**
|
|
- Use PascalCase for components and folders
|
|
- Suffix with `Container`, `Card`, or `Modal` for UI roles
|
|
- **Assets:**
|
|
- Images in `public/` or `src/assets/`
|
|
- Sounds in `src/assets/sounds/`
|
|
- **No Redux, MobX, or external state libraries**
|
|
- **No backend API code in this repo**
|
|
|
|
## Integration Points
|
|
|
|
- **External:**
|
|
- No direct backend integration code; data is assumed to come from context/hooks
|
|
- Sound assets for UI feedback in `src/assets/sounds/ui/`
|
|
|
|
## Examples
|
|
|
|
- **Add a new camera setting:**
|
|
- Create a new component in `src/components/CameraSettings/`
|
|
- Add state via context or a custom hook if needed
|
|
- **Add a new page:**
|
|
- Add a file to `src/pages/` and update routing in the main app (see `main.tsx`)
|
|
|
|
## References
|
|
|
|
- See `README.md` for Vite/ESLint setup details
|
|
- See `src/context/` and `src/hooks/` for app-specific state/data patterns
|
|
|
|
---
|
|
|
|
_If any conventions or workflows are unclear, please ask for clarification or examples from the codebase._
|