387 lines
9.3 KiB
Markdown
387 lines
9.3 KiB
Markdown
# Extractable UI Components
|
|
|
|
This document identifies reusable UI components that could be extracted, packaged, and reused across other projects.
|
|
|
|
---
|
|
|
|
## Form Components
|
|
|
|
### 1. Search Input with Debounce
|
|
**Source:** `resources/views/livewire/public/station-search.blade.php` (lines 8-16)
|
|
**Category:** Forms
|
|
**Complexity:** Low
|
|
|
|
**Props:**
|
|
- `name`: Input field name
|
|
- `wire:model`: Livewire property binding
|
|
- `label`: Display label
|
|
- `placeholder`: Placeholder text
|
|
|
|
**Features:**
|
|
- Flux form styling
|
|
- Wire model binding support
|
|
- Error message display
|
|
|
|
**Extractable:** Yes - Generic search input wrapper
|
|
|
|
---
|
|
|
|
### 2. Multi-Option Select Dropdown
|
|
**Source:** `resources/views/livewire/public/station-search.blade.php` (lines 20-28, 34-42, 44-52)
|
|
**Category:** Forms
|
|
**Complexity:** Low
|
|
|
|
**Props:**
|
|
- `wire:model.live` or `wire:model`: Binding
|
|
- `name`: Field name
|
|
- `label`: Label text
|
|
- Options as slot
|
|
|
|
**Features:**
|
|
- Reactive updates via `wire:model.live`
|
|
- Error display
|
|
- Multiple select options
|
|
|
|
**Variants:**
|
|
- Fuel type selector (6 options)
|
|
- Radius selector (5 options)
|
|
- Sort selector (5 options)
|
|
|
|
**Extractable:** Yes - Reusable select component wrapper
|
|
|
|
---
|
|
|
|
### 3. Form Submission Button with Loading State
|
|
**Source:** `resources/views/livewire/public/station-search.blade.php` (lines 54-59)
|
|
**Category:** Forms
|
|
**Complexity:** Low
|
|
|
|
**Props:**
|
|
- `type`: button type
|
|
- `variant`: "primary", etc.
|
|
- `wire:loading.attr`: Disabled state during loading
|
|
- `wire:target`: Target action
|
|
|
|
**Features:**
|
|
- Dynamic text based on loading state
|
|
- Wire loading indicators
|
|
- Primary variant styling
|
|
|
|
**Extractable:** Yes - Generic loading button component
|
|
|
|
---
|
|
|
|
## Data Display Components
|
|
|
|
### 4. Station Result Card
|
|
**Source:** `resources/views/livewire/public/station-search.blade.php` (lines 94-128)
|
|
**Category:** Data Display
|
|
**Complexity:** Medium
|
|
|
|
**Props:**
|
|
- `station`: Object with station data
|
|
- `name`: Station name
|
|
- `address`: Street address
|
|
- `postcode`: Postcode
|
|
- `distance_km`: Distance in kilometers
|
|
- `price`: Fuel price in pence
|
|
- `price_classification`: One of (current, recent, stale, outdated)
|
|
- `price_classification_label`: Human label
|
|
- `price_updated_at`: ISO date string
|
|
- `is_supermarket`: Boolean
|
|
|
|
**Features:**
|
|
- Responsive layout (flex items-center justify-between)
|
|
- Color-coded price based on freshness
|
|
- Supermarket badge display
|
|
- Distance/address display
|
|
- Time-ago formatting
|
|
|
|
**Extractable:** Yes - Could be standalone component for displaying station data
|
|
|
|
---
|
|
|
|
### 5. Results Count Summary
|
|
**Source:** `resources/views/livewire/public/station-search.blade.php` (lines 72-76)
|
|
**Category:** Data Display
|
|
**Complexity:** Low
|
|
|
|
**Props:**
|
|
- `count`: Total stations found
|
|
- `lowest_pence`: Lowest price in pence
|
|
- `avg_pence`: Average price in pence
|
|
|
|
**Features:**
|
|
- Formatted currency display
|
|
- Singular/plural handling
|
|
- Stats display on one line
|
|
|
|
**Extractable:** Yes - Generic stats summary component
|
|
|
|
---
|
|
|
|
### 6. Classification Legend/Color Code Guide
|
|
**Source:** `resources/views/livewire/public/station-search.blade.php` (lines 84-90)
|
|
**Category:** Data Display
|
|
**Complexity:** Low
|
|
|
|
**Props:**
|
|
- Array of classification items with colors and labels
|
|
|
|
**Features:**
|
|
- Inline color swatches
|
|
- Legend item labels
|
|
- Responsive flex layout
|
|
|
|
**Extractable:** Yes - Reusable legend component
|
|
|
|
---
|
|
|
|
## Navigation Components
|
|
|
|
### 7. Settings Sidebar Navigation
|
|
**Source:** `resources/views/pages/settings/layout.blade.php` (lines 3-7)
|
|
**Category:** Navigation
|
|
**Complexity:** Low
|
|
|
|
**Props:**
|
|
- Navigation items array with:
|
|
- `label`: Display text
|
|
- `route`: Route name
|
|
- `icon`: Optional icon name
|
|
|
|
**Features:**
|
|
- flux:navlist component
|
|
- wire:navigate support
|
|
- Active state detection
|
|
- Mobile/desktop responsive
|
|
|
|
**Extractable:** Yes - Generic sidebar nav for multi-section pages
|
|
|
|
---
|
|
|
|
### 8. User Profile Dropdown Menu
|
|
**Source:** `resources/views/components/desktop-user-menu.blade.php`
|
|
**Category:** Navigation
|
|
**Complexity:** Medium
|
|
|
|
**Props:**
|
|
- User object with:
|
|
- `name`: User name
|
|
- `email`: User email
|
|
- `initials()`: Method to get initials
|
|
|
|
**Features:**
|
|
- Flux dropdown + menu
|
|
- Avatar display with initials
|
|
- Settings link
|
|
- Logout form with CSRF
|
|
- Test attributes for QA
|
|
|
|
**Extractable:** Yes - Standalone user menu component for authenticated apps
|
|
|
|
---
|
|
|
|
## Layout Components
|
|
|
|
### 9. Centered Authentication Layout Container
|
|
**Source:** `resources/views/layouts/auth/simple.blade.php`
|
|
**Category:** Layouts
|
|
**Complexity:** Low
|
|
|
|
**Props:**
|
|
- None (slot-based)
|
|
|
|
**Features:**
|
|
- Centered flex layout
|
|
- Max-width constraint (sm)
|
|
- Dark gradient background
|
|
- Logo link at top
|
|
- Responsive padding
|
|
|
|
**Extractable:** Yes - Generic centered auth layout
|
|
|
|
---
|
|
|
|
### 10. Card-Based Form Container
|
|
**Source:** `resources/views/layouts/auth/card.blade.php`
|
|
**Category:** Layouts
|
|
**Complexity:** Low
|
|
|
|
**Props:**
|
|
- None (slot-based)
|
|
|
|
**Features:**
|
|
- White card on dark background
|
|
- Rounded borders with shadow
|
|
- Dark mode support
|
|
- Centered with max-width
|
|
- Padding inside card
|
|
|
|
**Extractable:** Yes - Modal/card wrapper component
|
|
|
|
---
|
|
|
|
### 11. Split-Screen Auth Layout
|
|
**Source:** `resources/views/layouts/auth/split.blade.php`
|
|
**Category:** Layouts
|
|
**Complexity:** Medium
|
|
|
|
**Props:**
|
|
- Quote display (generated from Inspiring::quotes)
|
|
|
|
**Features:**
|
|
- Two-column grid (desktop only)
|
|
- Dark sidebar with quote/branding
|
|
- Form content on right
|
|
- Mobile-friendly (single column)
|
|
- Absolute background fill
|
|
|
|
**Extractable:** Yes - Premium auth layout component
|
|
|
|
---
|
|
|
|
## Status/Feedback Components
|
|
|
|
### 12. Temporary Action Message
|
|
**Source:** `resources/views/components/action-message.blade.php`
|
|
**Category:** Feedback
|
|
**Complexity:** Low
|
|
|
|
**Props:**
|
|
- `on`: Livewire event to listen to
|
|
- Slot for custom message (defaults to "Saved.")
|
|
|
|
**Features:**
|
|
- Alpine.js event listener
|
|
- Auto-hide after 2 seconds
|
|
- Fade transition
|
|
- Livewire integration
|
|
|
|
**Extractable:** Yes - Generic toast/message component
|
|
|
|
---
|
|
|
|
### 13. Session Status Message
|
|
**Source:** `resources/views/components/auth-session-status.blade.php`
|
|
**Category:** Feedback
|
|
**Complexity:** Low
|
|
|
|
**Props:**
|
|
- `status`: Status message text
|
|
|
|
**Features:**
|
|
- Conditional rendering
|
|
- Green success styling
|
|
- Used in auth forms
|
|
|
|
**Extractable:** Yes - Simple status display component
|
|
|
|
---
|
|
|
|
## Map/Visualization Components
|
|
|
|
### 14. Leaflet Map Integration
|
|
**Source:** `resources/js/maps/station-map.js`
|
|
**Category:** Map/Visualization
|
|
**Complexity:** High
|
|
|
|
**Props:**
|
|
- `results`: Array of station data with lat/lng/classifications
|
|
|
|
**Features:**
|
|
- Leaflet map initialization
|
|
- OpenStreetMap tiles
|
|
- Custom circle markers with colors
|
|
- Popup on marker click
|
|
- Auto-fit bounds
|
|
- Reactive to data changes
|
|
|
|
**Extractable:** Yes - Could be abstracted into reusable Leaflet component
|
|
|
|
**Note:** Currently tightly coupled to Alpine.js and station data structure. Would require prop mapping for reuse.
|
|
|
|
---
|
|
|
|
## Typography/Header Components
|
|
|
|
### 15. Auth Page Header
|
|
**Source:** `resources/views/components/auth-header.blade.php`
|
|
**Category:** Typography
|
|
**Complexity:** Low
|
|
|
|
**Props:**
|
|
- `title`: Main heading
|
|
- `description`: Subheading
|
|
|
|
**Features:**
|
|
- Centered text
|
|
- Flux typography (heading + subheading)
|
|
- Used on all auth pages
|
|
|
|
**Extractable:** Yes - Generic header for centered pages
|
|
|
|
---
|
|
|
|
### 16. Settings Page Header
|
|
**Source:** `resources/views/partials/settings-heading.blade.php`
|
|
**Category:** Typography
|
|
**Complexity:** Low
|
|
|
|
**Props:**
|
|
- None (hardcoded for settings)
|
|
|
|
**Features:**
|
|
- Page title "Settings"
|
|
- Subheading text
|
|
- Separator line
|
|
|
|
**Extractable:** Maybe - Specific to settings but pattern is reusable
|
|
|
|
---
|
|
|
|
## Reusability Summary Table
|
|
|
|
| Component | Type | Complexity | Reusable | Dependencies | Extraction Cost |
|
|
|-----------|------|-----------|----------|---|---|
|
|
| Search Input | Form | Low | High | Flux | Very Low |
|
|
| Select Dropdown | Form | Low | High | Flux | Very Low |
|
|
| Loading Button | Form | Low | High | Flux, Livewire | Very Low |
|
|
| Station Card | Display | Medium | High | Flux | Low |
|
|
| Stats Summary | Display | Low | High | None | Very Low |
|
|
| Legend | Display | Low | High | Tailwind | Very Low |
|
|
| Settings Nav | Nav | Low | High | Flux | Very Low |
|
|
| User Menu | Nav | Medium | High | Flux, Auth | Low |
|
|
| Simple Auth Layout | Layout | Low | High | Tailwind | Very Low |
|
|
| Card Container | Layout | Low | High | Tailwind | Very Low |
|
|
| Split Layout | Layout | Medium | High | Tailwind | Low |
|
|
| Action Message | Feedback | Low | High | Alpine, Livewire | Very Low |
|
|
| Status Message | Feedback | Low | High | None | Very Low |
|
|
| Leaflet Map | Visualization | High | Medium | Leaflet, Alpine | Medium |
|
|
| Auth Header | Typography | Low | High | Flux | Very Low |
|
|
| Settings Header | Typography | Low | Medium | Flux | Very Low |
|
|
|
|
---
|
|
|
|
## Top Candidates for Extraction
|
|
|
|
1. **Search Input Component** - Generic, simple, widely useful
|
|
2. **Station Card Component** - Good showcase of complex data display
|
|
3. **User Menu Component** - Authentication pattern, widely needed
|
|
4. **Loading Button Component** - Form UX pattern, commonly needed
|
|
5. **Simple Auth Layout** - Authentication flows are common
|
|
|
|
---
|
|
|
|
## Framework Package Recommendations
|
|
|
|
If extracting these components into a package:
|
|
|
|
1. Make them framework-agnostic (or have adapters)
|
|
2. Ensure Flux/Livewire are peer dependencies
|
|
3. Document required Alpine.js versions
|
|
4. Provide TypeScript declarations for props
|
|
5. Include Storybook examples
|
|
6. Consider CSS-in-JS vs Tailwind integration
|
|
|