130 lines
4.3 KiB
Markdown
130 lines
4.3 KiB
Markdown
# 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:**
|
|
|
|
1. User clicks sidebar menu item
|
|
2. React Router `<Link>` handles navigation
|
|
3. `routes.ts` matches path to view component
|
|
4. `DashboardLayout` renders with `<Outlet />` for view
|
|
5. View component mounts and renders content
|
|
6. 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*
|