168 lines
6.2 KiB
Markdown
168 lines
6.2 KiB
Markdown
# Codebase Structure
|
|
|
|
**Analysis Date:** 2025-03-13
|
|
|
|
## Directory Layout
|
|
|
|
```
|
|
sample_interface/
|
|
├── src/
|
|
│ ├── app/
|
|
│ │ ├── App.tsx # Application entry point
|
|
│ │ ├── routes.ts # Route definitions
|
|
│ │ └── components/
|
|
│ │ ├── DashboardLayout.tsx # Main layout shell
|
|
│ │ ├── Header.tsx # Top status bar
|
|
│ │ ├── NavigationButtons.tsx # Scroll controls
|
|
│ │ ├── Sidebar.tsx # Navigation sidebar
|
|
│ │ ├── figma/
|
|
│ │ │ └── ImageWithFallback.tsx
|
|
│ │ ├── ui/ # 40+ shadcn/ui components
|
|
│ │ │ ├── button.tsx
|
|
│ │ │ ├── card.tsx
|
|
│ │ │ ├── input.tsx
|
|
│ │ │ ├── utils.ts
|
|
│ │ │ └── ...
|
|
│ │ └── views/ # Page/route components
|
|
│ │ ├── ADCSettingView.tsx
|
|
│ │ ├── CalibrationView.tsx
|
|
│ │ ├── DateTimeSettingView.tsx
|
|
│ │ ├── EVAPSettingView.tsx
|
|
│ │ ├── FlashMemoryView.tsx
|
|
│ │ ├── GPRSSettingView.tsx
|
|
│ │ ├── GraphView.tsx
|
|
│ │ ├── LevelSettingView.tsx
|
|
│ │ ├── LoginView.tsx
|
|
│ │ ├── MobileSettingView.tsx
|
|
│ │ ├── NetworkSetupView.tsx
|
|
│ │ ├── RainfallSettingView.tsx
|
|
│ │ ├── RainfallView.tsx
|
|
│ │ ├── SettingView.tsx
|
|
│ │ ├── SirenSettingView.tsx
|
|
│ │ └── StationInfoView.tsx
|
|
│ └── styles/
|
|
│ ├── index.css # Main stylesheet entry
|
|
│ ├── tailwind.css # Tailwind imports
|
|
│ └── theme.css # Theme variables
|
|
├── guidelines/
|
|
│ └── Guidelines.md # Design system documentation
|
|
├── package.json # Dependencies
|
|
├── postcss.config.mjs # PostCSS configuration
|
|
└── vite.config.ts # Vite build configuration
|
|
```
|
|
|
|
## Directory Purposes
|
|
|
|
**src/app/:**
|
|
- Purpose: Application logic and component tree
|
|
- Contains: Entry point, routing, components
|
|
- Key files: `App.tsx`, `routes.ts`
|
|
|
|
**src/app/components/:**
|
|
- Purpose: Layout and structural components
|
|
- Contains: DashboardLayout, Header, Sidebar, NavigationButtons
|
|
- Key files: `DashboardLayout.tsx`, `Sidebar.tsx`
|
|
|
|
**src/app/components/ui/:**
|
|
- Purpose: shadcn/ui primitive components
|
|
- Contains: 40+ UI components (button, card, input, etc.)
|
|
- Key files: `utils.ts` (cn function), `button.tsx`, `card.tsx`
|
|
- Pattern: Each component in separate file with PascalCase naming
|
|
|
|
**src/app/components/views/:**
|
|
- Purpose: Route/page-level components
|
|
- Contains: 16 view components (one per route)
|
|
- Key files: `RainfallView.tsx` (default), `LoginView.tsx`, `GraphView.tsx`
|
|
- Pattern: `{Name}View.tsx` naming convention
|
|
|
|
**src/app/components/figma/:**
|
|
- Purpose: Figma-related utilities
|
|
- Contains: `ImageWithFallback.tsx`
|
|
- Usage: Image loading with error fallback
|
|
|
|
**src/styles/:**
|
|
- Purpose: Global styles and CSS configuration
|
|
- Contains: CSS imports and theme definitions
|
|
- Key files: `index.css` (entry), `tailwind.css`, `theme.css`
|
|
|
|
**guidelines/:**
|
|
- Purpose: Design system documentation
|
|
- Contains: `Guidelines.md` (458 lines of design specs)
|
|
- Usage: Color palette, typography, spacing standards
|
|
|
|
## Key File Locations
|
|
|
|
**Entry Points:**
|
|
- `sample_interface/src/app/App.tsx`: React application root
|
|
- `sample_interface/src/app/routes.ts`: Route configuration
|
|
- `sample_interface/src/styles/index.css`: Style entry
|
|
|
|
**Configuration:**
|
|
- `sample_interface/vite.config.ts`: Vite build config with @ alias
|
|
- `sample_interface/package.json`: Dependencies (React 18, React Router 7, Radix, Tailwind 4)
|
|
- `sample_interface/postcss.config.mjs`: PostCSS configuration
|
|
|
|
**Core Layout:**
|
|
- `sample_interface/src/app/components/DashboardLayout.tsx`: Main layout with Outlet
|
|
- `sample_interface/src/app/components/Sidebar.tsx`: Navigation with 7 menu items
|
|
- `sample_interface/src/app/components/Header.tsx`: Status bar with time, connection, battery
|
|
|
|
**Core UI:**
|
|
- `sample_interface/src/app/components/ui/utils.ts`: `cn()` class merging utility
|
|
- `sample_interface/src/app/components/ui/button.tsx`: Primary button component
|
|
- `sample_interface/src/app/components/ui/card.tsx`: Card container component
|
|
|
|
## Naming Conventions
|
|
|
|
**Files:**
|
|
- Components: PascalCase.tsx (e.g., `RainfallView.tsx`, `Button.tsx`)
|
|
- Utilities: camelCase.ts (e.g., `utils.ts`)
|
|
- Config: kebab-case.ts (e.g., `vite.config.ts`)
|
|
- Styles: lowercase.css (e.g., `index.css`)
|
|
|
|
**Directories:**
|
|
- Lowercase: `ui/`, `views/`, `styles/`, `figma/`
|
|
|
|
**Exports:**
|
|
- Components: Named exports (e.g., `export function Button`)
|
|
- Utilities: Named exports (e.g., `export function cn`)
|
|
- View suffix: All route components end with `View` (e.g., `RainfallView`, `LoginView`)
|
|
|
|
## Where to Add New Code
|
|
|
|
**New Route/View:**
|
|
- Implementation: `sample_interface/src/app/components/views/{Name}View.tsx`
|
|
- Registration: `sample_interface/src/app/routes.ts` (add to children array)
|
|
- Menu item: `sample_interface/src/app/components/Sidebar.tsx` (add to menuItems array)
|
|
|
|
**New UI Component:**
|
|
- Implementation: `sample_interface/src/app/components/ui/{component}.tsx`
|
|
- Pattern: Follow shadcn/ui style with `cn()` utility
|
|
- Re-export from other components as needed
|
|
|
|
**New Layout Component:**
|
|
- Implementation: `sample_interface/src/app/components/{Component}.tsx`
|
|
- Import in: `DashboardLayout.tsx` or `Sidebar.tsx` as needed
|
|
|
|
**Styles/Theme:**
|
|
- Global styles: `sample_interface/src/styles/theme.css`
|
|
- Tailwind config: `sample_interface/vite.config.ts` (Tailwind v4 uses CSS config)
|
|
|
|
## Special Directories
|
|
|
|
**sample_interface/src/app/components/ui/:**
|
|
- Purpose: shadcn/ui component library
|
|
- Generated: Partially (shadcn init pattern)
|
|
- Committed: Yes
|
|
- Note: 40+ components from Radix UI primitives
|
|
|
|
**sample_interface/guidelines/:**
|
|
- Purpose: Design documentation
|
|
- Generated: No (manually maintained)
|
|
- Committed: Yes
|
|
- Note: Contains 458 lines of design system specs
|
|
|
|
---
|
|
|
|
*Structure analysis: 2025-03-13*
|