4.3 KiB
4.3 KiB
Architecture
Analysis Date: 2025-03-13
Pattern Overview
Overall: Component-based SPA with centralized routing
Key Characteristics:
- Single-page application using React Router v7
- View-based architecture where each view is a self-contained component
- Centralized navigation with collapsible sidebar
- Dark-first theme designed for industrial touch displays
- No state management library (local state only)
- UI components from shadcn/ui pattern with Radix primitives
Layers
Application Layer:
- Purpose: Entry point and routing configuration
- Location:
sample_interface/src/app/ - Contains: App.tsx, routes.ts
- Depends on: Components layer, Views layer
- Used by: Vite build system
Layout Layer:
- Purpose: Shell components providing page structure
- Location:
sample_interface/src/app/components/ - Contains: DashboardLayout.tsx, Sidebar.tsx, Header.tsx, NavigationButtons.tsx
- Depends on: UI component layer
- Used by: React Router
Views Layer:
- Purpose: Page-level components representing routes
- Location:
sample_interface/src/app/components/views/ - Contains: RainfallView.tsx, GraphView.tsx, ADCSettingView.tsx, LoginView.tsx, etc.
- Depends on: UI component layer
- Used by: React Router via routes.ts
UI Component Layer:
- Purpose: Reusable primitive and composite components
- Location:
sample_interface/src/app/components/ui/ - Contains: button.tsx, card.tsx, input.tsx, sidebar.tsx (shadcn), ~40+ components
- Depends on: Radix UI primitives, Tailwind CSS
- Used by: Views, Layouts, other UI components
Style Layer:
- Purpose: Global styles and design tokens
- Location:
sample_interface/src/styles/ - Contains: index.css, tailwind.css, theme.css
- Depends on: Tailwind CSS v4
- Used by: All components
Data Flow
Navigation Flow:
- User clicks sidebar menu item
- React Router
<Link>handles navigation routes.tsmatches path to view componentDashboardLayoutrenders with<Outlet />for view- View component mounts and renders content
- UI components receive props and render
State Management:
- Local component state only - No Redux, Zustand, or Context API for global state
- Sidebar collapsed state:
DashboardLayout.tsx(useState) - Menu expanded items:
Sidebar.tsx(useState) - Form data: Managed within each view component
- Time/status:
Header.tsx(useState + useEffect)
Key Abstractions
View Component Pattern:
- Purpose: Page-level route handlers
- Examples:
sample_interface/src/app/components/views/RainfallView.tsx,sample_interface/src/app/components/views/ADCSettingView.tsx - Pattern: Function component that returns JSX with Card-based layouts
UI Component Pattern (shadcn/ui):
- Purpose: Atomic reusable components
- Examples:
sample_interface/src/app/components/ui/button.tsx,sample_interface/src/app/components/ui/card.tsx - Pattern: Compositional components with
cn()utility for class merging - Sub-pattern: Each component exports named exports (e.g.,
Card,CardHeader,CardContent)
Utility Pattern:
- Purpose: Shared helper functions
- Examples:
sample_interface/src/app/components/ui/utils.ts(cn function) - Pattern: Named exports, single responsibility
Entry Points
Application Entry:
- Location:
sample_interface/src/app/App.tsx - Triggers: Vite dev server or production build
- Responsibilities: Provides RouterProvider with configured router
Routing Entry:
- Location:
sample_interface/src/app/routes.ts - Triggers: Browser URL changes
- Responsibilities: Defines all routes, maps paths to view components
Style Entry:
- Location:
sample_interface/src/styles/index.css - Triggers: Component rendering
- Responsibilities: Imports fonts, Tailwind, theme variables
Error Handling
Strategy: No centralized error handling detected
Patterns:
- Components render static content with no error boundaries
- Form validation handled inline within views
- No try/catch blocks observed in view components
- Image fallback component:
sample_interface/src/app/components/figma/ImageWithFallback.tsx
Cross-Cutting Concerns
Logging: Console-based (no logging framework detected)
Validation: Inline form validation within view components
Authentication: UI-only in LoginView.tsx, no auth flow implemented
Theming: Tailwind CSS with dark color palette (gray-900, gray-950 base)
Architecture analysis: 2025-03-13