superdesign

2026-04-06 20:01:46 +01:00
parent 5bc6ca720c
commit 41be8e2806
13 changed files with 3102 additions and 0 deletions
--- a/.superdesign/init/components.md
+++ b/.superdesign/init/components.md
@@ -0,0 +1,274 @@
+# Shared UI Components
+
+## Blade Components (Reusable)
+
+### 1. `x-action-message`
+**Path:** `resources/views/components/action-message.blade.php`
+
+Displays a temporary status message that auto-hides after 2 seconds using Alpine.js.
+
+**Props:**
+- `on`: Event name to listen for (Livewire event)
+
+**Features:**
+- Transition animation with fade-out
+- Auto-hide timeout (2000ms)
+- Default text: "Saved."
+
+```blade
+@props([
+    'on',
+])
+
+<div
+    x-data="{ shown: false, timeout: null }"
+    x-init="@this.on('{{ $on }}', () => { clearTimeout(timeout); shown = true; timeout = setTimeout(() => { shown = false }, 2000); })"
+    x-show.transition.out.opacity.duration.1500ms="shown"
+    x-transition:leave.opacity.duration.1500ms
+    style="display: none"
+    {{ $attributes->merge(['class' => 'text-sm']) }}
+>
+    {{ $slot->isEmpty() ? __('Saved.') : $slot }}
+</div>
+```
+
+---
+
+### 2. `x-app-logo`
+**Path:** `resources/views/components/app-logo.blade.php`
+
+Main app branding component. Renders as `flux:brand` (header) or `flux:sidebar.brand` (sidebar variant).
+
+**Props:**
+- `sidebar` (bool): If true, renders sidebar variant
+- Inherits Flux component attributes
+
+**Features:**
+- Dynamic logo rendering based on context (header vs sidebar)
+- Uses `x-app-logo-icon` for icon
+- Passes through attributes to Flux components
+
+```blade
+@props([
+    'sidebar' => false,
+])
+
+@if($sidebar)
+    <flux:sidebar.brand name="Laravel Starter Kit" {{ $attributes }}>
+        <x-slot name="logo" class="flex aspect-square size-8 items-center justify-center rounded-md bg-accent-content text-accent-foreground">
+            <x-app-logo-icon class="size-5 fill-current text-white dark:text-black" />
+        </x-slot>
+    </flux:sidebar.brand>
+@else
+    <flux:brand name="Laravel Starter Kit" {{ $attributes }}>
+        <x-slot name="logo" class="flex aspect-square size-8 items-center justify-center rounded-md bg-accent-content text-accent-foreground">
+            <x-app-logo-icon class="size-5 fill-current text-white dark:text-black" />
+        </x-slot>
+    </flux:brand>
+@endif
+```
+
+---
+
+### 3. `x-app-logo-icon`
+**Path:** `resources/views/components/app-logo-icon.blade.php`
+
+SVG icon for the application logo. Geometric design with fills.
+
+**Features:**
+- Scalable SVG
+- Uses `currentColor` for dynamic styling
+- Can be sized with Tailwind classes
+
+```blade
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 42" {{ $attributes }}>
+    <path 
+        fill="currentColor" 
+        fill-rule="evenodd" 
+        clip-rule="evenodd"
+        d="M17.2 5.633 8.6.855 0 5.633v26.51l16.2 9 16.2-9v-8.442l7.6-4.223V9.856l-8.6-4.777-8.6 4.777V18.3l-5.6 3.111V5.633ZM38 18.301l-5.6 3.11v-6.157l5.6-3.11V18.3Zm-1.06-7.856-5.54 3.078-5.54-3.079 5.54-3.078 5.54 3.079ZM24.8 18.3v-6.157l5.6 3.111v6.158L24.8 18.3Zm-1 1.732 5.54 3.078-13.14 7.302-5.54-3.078 13.14-7.3v-.002Zm-16.2 7.89 7.6 4.222V38.3L2 30.966V7.92l5.6 3.111v16.892ZM8.6 9.3 3.06 6.222 8.6 3.143l5.54 3.08L8.6 9.3Zm21.8 15.51-13.2 7.334V38.3l13.2-7.334v-6.156ZM9.6 11.034l5.6-3.11v14.6l-5.6 3.11v-14.6Z"
+    />
+</svg>
+```
+
+---
+
+### 4. `x-auth-header`
+**Path:** `resources/views/components/auth-header.blade.php`
+
+Centered header for authentication pages with title and description.
+
+**Props:**
+- `title`: Main heading text
+- `description`: Subheading/description text
+
+**Features:**
+- Centered layout
+- Uses Flux typography components
+
+```blade
+@props([
+    'title',
+    'description',
+])
+
+<div class="flex w-full flex-col text-center">
+    <flux:heading size="xl">{{ $title }}</flux:heading>
+    <flux:subheading>{{ $description }}</flux:subheading>
+</div>
+```
+
+---
+
+### 5. `x-auth-session-status`
+**Path:** `resources/views/components/auth-session-status.blade.php`
+
+Displays session status messages (typically success messages after redirect).
+
+**Props:**
+- `status`: Status message text (if present)
+- Passes through attributes
+
+**Features:**
+- Conditional rendering (only shows if status exists)
+- Green success styling
+
+```blade
+@props([
+    'status',
+])
+
+@if ($status)
+    <div {{ $attributes->merge(['class' => 'font-medium text-sm text-green-600']) }}>
+        {{ $status }}
+    </div>
+@endif
+```
+
+---
+
+### 6. `x-desktop-user-menu`
+**Path:** `resources/views/components/desktop-user-menu.blade.php`
+
+User profile dropdown menu with settings and logout options. Uses Flux components.
+
+**Features:**
+- Sidebar profile with dropdown
+- Shows user avatar, name, and email
+- Menu items: Settings (cog icon), Logout (arrow icon)
+- Logout form with CSRF protection
+- Data test attributes for testing
+
+```blade
+<flux:dropdown position="bottom" align="start">
+    <flux:sidebar.profile
+        :name="auth()->user()->name"
+        :initials="auth()->user()->initials()"
+        icon:trailing="chevrons-up-down"
+        data-test="sidebar-menu-button"
+    />
+
+    <flux:menu>
+        <div class="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
+            <flux:avatar
+                :name="auth()->user()->name"
+                :initials="auth()->user()->initials()"
+            />
+            <div class="grid flex-1 text-start text-sm leading-tight">
+                <flux:heading class="truncate">{{ auth()->user()->name }}</flux:heading>
+                <flux:text class="truncate">{{ auth()->user()->email }}</flux:text>
+            </div>
+        </div>
+        <flux:menu.separator />
+        <flux:menu.radio.group>
+            <flux:menu.item :href="route('profile.edit')" icon="cog" wire:navigate>
+                {{ __('Settings') }}
+            </flux:menu.item>
+            <form method="POST" action="{{ route('logout') }}" class="w-full">
+                @csrf
+                <flux:menu.item
+                    as="button"
+                    type="submit"
+                    icon="arrow-right-start-on-rectangle"
+                    class="w-full cursor-pointer"
+                    data-test="logout-button"
+                >
+                    {{ __('Log out') }}
+                </flux:menu.item>
+            </form>
+        </flux:menu.radio.group>
+    </flux:menu>
+</flux:dropdown>
+```
+
+---
+
+### 7. `x-placeholder-pattern`
+**Path:** `resources/views/components/placeholder-pattern.blade.php`
+
+SVG placeholder pattern for skeleton/loading states. Diagonal line pattern.
+
+**Props:**
+- `id`: Unique pattern ID (auto-generated)
+
+**Features:**
+- Reusable SVG pattern definition
+- Can be styled with Tailwind stroke classes
+- Used in dashboard placeholder cards
+
+```blade
+@props([
+    'id' => uniqid(),
+])
+
+<svg {{ $attributes }} fill="none">
+    <defs>
+        <pattern id="pattern-{{ $id }}" x="0" y="0" width="8" height="8" patternUnits="userSpaceOnUse">
+            <path d="M-1 5L5 -1M3 9L8.5 3.5" stroke-width="0.5"></path>
+        </pattern>
+    </defs>
+    <rect stroke="none" fill="url(#pattern-{{ $id }})" width="100%" height="100%"></rect>
+</svg>
+```
+
+---
+
+## Flux UI Components Used
+
+Flux v2 components extensively used throughout the application:
+
+- **Layout:** `flux:header`, `flux:sidebar`, `flux:main`, `flux:spacer`
+- **Navigation:** `flux:navbar`, `flux:navbar.item`, `flux:sidebar.nav`, `flux:sidebar.item`, `flux:sidebar.group`
+- **Forms:** `flux:input`, `flux:select`, `flux:checkbox`, `flux:button`
+- **Typography:** `flux:heading`, `flux:subheading`, `flux:text`
+- **Dropdowns/Menus:** `flux:dropdown`, `flux:menu`, `flux:menu.item`, `flux:menu.separator`
+- **UI Elements:** `flux:badge`, `flux:avatar`, `flux:brand`, `flux:profile`
+- **Other:** `flux:tooltip`, `flux:separator`, `flux:link`
+
+---
+
+## Flux Custom Icons
+
+Located in `resources/views/flux/icon/`:
+- `layout-grid.blade.php`
+- `folder-git-2.blade.php`
+- `chevrons-up-down.blade.php`
+- `book-open-text.blade.php`
+
+These extend Flux's default icon library.
+
+---
+
+## Alpine.js Data Objects
+
+### `stationMap`
+**Path:** `resources/js/maps/station-map.js`
+
+Leaflet map integration for displaying fuel stations:
+- Initializes map centered on UK
+- Plots colored circle markers for stations
+- Color coding: green (current), slate (recent), amber (stale), red (outdated)
+- Popup display with station details
+- Responsive bounds fitting
+- Watches for data changes via Alpine
+