Add Edge Component showcase screens and re-enable form demos

app/NativeComponents/DemoLauncher.php

@@ -59,6 +59,20 @@ class DemoLauncher extends NativeComponent
                 ['id' => 'numberswitcher', 'title' => 'Number Switcher', 'subtitle' => 'content-transition — rolling in-place digit changes', 'icon' => 'textformat.123', 'color' => '#14B8A6', 'url' => '/number-switcher'],
             ],
         ],
+        [
+            'title' => 'Edge Components',
+            'demos' => [
+                ['id' => 'edge-top-bar', 'title' => 'Top Bar', 'subtitle' => 'Title, subtitle, and trailing actions', 'icon' => 'rectangle.topthird.inset.filled', 'color' => '#0EA5E9', 'url' => '/edge-components/top-bar'],
+                ['id' => 'edge-top-bar-large-title', 'title' => 'Top Bar — Large Title', 'subtitle' => 'The large display mode', 'icon' => 'textformat.size.larger', 'color' => '#0EA5E9', 'url' => '/edge-components/top-bar-large-title'],
+                ['id' => 'edge-top-bar-search', 'title' => 'Top Bar — Search', 'subtitle' => 'An attached native search field', 'icon' => 'magnifyingglass', 'color' => '#0EA5E9', 'url' => '/edge-components/top-bar-search'],
+                ['id' => 'edge-top-bar-destructive-action', 'title' => 'Top Bar — Destructive Action', 'subtitle' => 'An action tinted for a destructive tap', 'icon' => 'trash', 'color' => '#EF4444', 'url' => '/edge-components/top-bar-destructive-action'],
+                ['id' => 'edge-top-bar-logo', 'title' => 'Top Bar — Logo', 'subtitle' => 'An image in the title slot', 'icon' => 'photo', 'color' => '#0EA5E9', 'url' => '/edge-components/top-bar-logo'],
+                ['id' => 'edge-bottom-nav', 'title' => 'Bottom Nav', 'subtitle' => 'Active, news, and badge items', 'icon' => 'square.grid.2x2', 'color' => '#22C55E', 'url' => '/edge-components/bottom-nav'],
+                ['id' => 'edge-bottom-nav-search-item', 'title' => 'Bottom Nav — Search Item', 'subtitle' => 'A dedicated search tab', 'icon' => 'magnifyingglass.circle', 'color' => '#22C55E', 'url' => '/edge-components/bottom-nav-search-item'],
+                ['id' => 'edge-side-nav', 'title' => 'Side Nav', 'subtitle' => 'Header, collapsed group, and a divider', 'icon' => 'sidebar.left', 'color' => '#A855F7', 'url' => '/edge-components/side-nav'],
+                ['id' => 'edge-side-nav-header-image', 'title' => 'Side Nav — Header Image', 'subtitle' => 'A background image behind the header', 'icon' => 'photo.on.rectangle', 'color' => '#A855F7', 'url' => '/edge-components/side-nav-header-image'],
+            ],
+        ],
         [
             'title' => 'Mini Apps',
             'demos' => [

app/NativeComponents/EdgeComponents/BottomNav.php

@@ -0,0 +1,21 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\NativeComponents\EdgeComponents;
+
+use Illuminate\View\View;
+use Native\Mobile\Edge\NativeComponent;
+
+final class BottomNav extends NativeComponent
+{
+    public function navTitle(): string
+    {
+        return 'Bottom Nav';
+    }
+
+    public function render(): View
+    {
+        return view('native.edge-components.bottom-nav');
+    }
+}

app/NativeComponents/EdgeComponents/BottomNavSearchItem.php

@@ -0,0 +1,21 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\NativeComponents\EdgeComponents;
+
+use Illuminate\View\View;
+use Native\Mobile\Edge\NativeComponent;
+
+final class BottomNavSearchItem extends NativeComponent
+{
+    public function navTitle(): string
+    {
+        return 'Bottom Nav Search Item';
+    }
+
+    public function render(): View
+    {
+        return view('native.edge-components.bottom-nav-search-item');
+    }
+}

app/NativeComponents/EdgeComponents/SideNav.php

@@ -0,0 +1,32 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\NativeComponents\EdgeComponents;
+
+use Illuminate\View\View;
+use Native\Mobile\Edge\NativeComponent;
+use Native\Mobile\UI\Builders\Drawer;
+use Native\Mobile\UI\Concerns\InteractsWithDrawer;
+
+final class SideNav extends NativeComponent
+{
+    use InteractsWithDrawer;
+
+    protected bool $hidesNavBar = true;
+
+    public function navTitle(): string
+    {
+        return 'Side Nav';
+    }
+
+    public function drawerOverride(): ?Drawer
+    {
+        return Drawer::make(view('native.edge-components.side-nav-drawer'));
+    }
+
+    public function render(): View
+    {
+        return view('native.edge-components.side-nav-body');
+    }
+}

app/NativeComponents/EdgeComponents/SideNavHeaderImage.php

@@ -0,0 +1,30 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\NativeComponents\EdgeComponents;
+
+use Illuminate\View\View;
+use Native\Mobile\Edge\NativeComponent;
+use Native\Mobile\UI\Builders\Drawer;
+use Native\Mobile\UI\Concerns\InteractsWithDrawer;
+
+final class SideNavHeaderImage extends NativeComponent
+{
+    use InteractsWithDrawer;
+
+    public function navTitle(): string
+    {
+        return 'Side Nav Header Image';
+    }
+
+    public function drawerOverride(): ?Drawer
+    {
+        return Drawer::make(view('native.edge-components.side-nav-header-image'));
+    }
+
+    public function render(): View
+    {
+        return view('native.edge-components.side-nav-body');
+    }
+}

app/NativeComponents/EdgeComponents/TopBar.php

@@ -0,0 +1,18 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\NativeComponents\EdgeComponents;
+
+use Illuminate\View\View;
+use Native\Mobile\Edge\NativeComponent;
+
+final class TopBar extends NativeComponent
+{
+    public function openSearch(): void {}
+
+    public function render(): View
+    {
+        return view('native.edge-components.top-bar');
+    }
+}

app/NativeComponents/EdgeComponents/TopBarDestructiveAction.php

@@ -0,0 +1,16 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\NativeComponents\EdgeComponents;
+
+use Illuminate\View\View;
+use Native\Mobile\Edge\NativeComponent;
+
+final class TopBarDestructiveAction extends NativeComponent
+{
+    public function render(): View
+    {
+        return view('native.edge-components.top-bar-destructive-action');
+    }
+}

app/NativeComponents/EdgeComponents/TopBarLargeTitle.php

@@ -0,0 +1,16 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\NativeComponents\EdgeComponents;
+
+use Illuminate\View\View;
+use Native\Mobile\Edge\NativeComponent;
+
+final class TopBarLargeTitle extends NativeComponent
+{
+    public function render(): View
+    {
+        return view('native.edge-components.top-bar-large-title');
+    }
+}

app/NativeComponents/EdgeComponents/TopBarLogo.php

@@ -0,0 +1,16 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\NativeComponents\EdgeComponents;
+
+use Illuminate\View\View;
+use Native\Mobile\Edge\NativeComponent;
+
+final class TopBarLogo extends NativeComponent
+{
+    public function render(): View
+    {
+        return view('native.edge-components.top-bar-logo');
+    }
+}

app/NativeComponents/EdgeComponents/TopBarSearch.php

@@ -0,0 +1,16 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\NativeComponents\EdgeComponents;
+
+use Illuminate\View\View;
+use Native\Mobile\Edge\NativeComponent;
+
+final class TopBarSearch extends NativeComponent
+{
+    public function render(): View
+    {
+        return view('native.edge-components.top-bar-search');
+    }
+}

resources/views/native/edge-components/bottom-nav-search-item.blade.php

@@ -0,0 +1,13 @@
+@include('native.partials.edge-component-note', ['caption' => 'Edge Component showcase — this screen exists to show off the bottom nav below.'])
+
+<native:bottom-nav>
+    <native:bottom-nav-item id="home" icon="home" label="Home" url="/edge-components/bottom-nav-search-item" :active="true" />
+    <native:bottom-nav-item
+        id="search"
+        icon="search"
+        label="Search"
+        search="true"
+        search-placeholder="Search"
+    />
+    <native:bottom-nav-item id="profile" icon="person" label="Profile" url="/edge-components/bottom-nav-search-item" />
+</native:bottom-nav>

resources/views/native/edge-components/bottom-nav.blade.php

@@ -0,0 +1,7 @@
+@include('native.partials.edge-component-note', ['caption' => 'Edge Component showcase — this screen exists to show off the bottom nav below.'])
+
+<native:bottom-nav label-visibility="labeled">
+    <native:bottom-nav-item id="home" icon="home" label="Home" url="/edge-components/bottom-nav" :active="true" />
+    <native:bottom-nav-item id="friends" icon="person" label="Friends" url="/edge-components/bottom-nav" :news="true" />
+    <native:bottom-nav-item id="profile" icon="person" label="Profile" url="/edge-components/bottom-nav" badge="3" />
+</native:bottom-nav>

resources/views/native/edge-components/side-nav-body.blade.php

@@ -0,0 +1,5 @@
+<scroll-view>
+    <column class="px-4 pb-3 pt-16 safe-area-top">
+        <text class="text-sm text-theme-on-surface-variant">Edge Component showcase — this screen exists to show off the side drawer. Its nav bar is hidden so the drawer's own ☰ affordance is the only leading icon on screen.</text>
+    </column>
+</scroll-view>

resources/views/native/edge-components/side-nav-drawer.blade.php

@@ -0,0 +1,15 @@
+<native:column class="safe-area-top">
+    <native:list-item headline="My App" supporting="user@example.com" leadingIcon="person" disabled="true" />
+
+    <native:divider />
+
+    <native:list-item headline="Home" leadingIcon="home" containerColor="blue-50" leadingIconColor="blue-600" headlineColor="blue-600" />
+
+    <native:list-item headline="Profile" leadingIcon="person" />
+
+    <native:list-item headline="Settings" leadingIcon="settings" />
+
+    <native:divider />
+
+    <native:list-item headline="Help" leadingIcon="help" trailingIcon="forward" />
+</native:column>

resources/views/native/edge-components/side-nav-header-image.blade.php

@@ -0,0 +1,7 @@
+<native:side-nav-header
+    title="My App"
+    subtitle="user@example.com"
+    image-url="https://images.nationalgeographic.org/image/upload/v1638892520/EducationHub/photos/stream-in-colorado.jpg"
+/>
+
+<native:side-nav-item id="home" label="Home" icon="home" url="/edge-components/side-nav-header-image" :active="true" />

resources/views/native/edge-components/top-bar-destructive-action.blade.php

@@ -0,0 +1,5 @@
+<native:top-bar title="Conversation" back="true">
+    <native:top-bar-action id="delete" icon="delete" label="Delete" destructive="true" />
+</native:top-bar>
+
+@include('native.partials.edge-component-note', ['caption' => 'Edge Component showcase — this screen exists to show off the top bar above.'])

resources/views/native/edge-components/top-bar-large-title.blade.php

@@ -0,0 +1,5 @@
+<native:top-bar title="Dashboard" display-mode="large" back="true">
+    <native:top-bar-action id="search" icon="search" label="Search" />
+</native:top-bar>
+
+@include('native.partials.edge-component-note', ['caption' => 'Edge Component showcase — this screen exists to show off the top bar above.'])

resources/views/native/edge-components/top-bar-logo.blade.php

@@ -0,0 +1,7 @@
+<native:top-bar display-mode="inline" back="true">
+    <native:top-bar-title>
+        <native:image src="https://nativephp.com/favicon.svg" height="28" />
+    </native:top-bar-title>
+</native:top-bar>
+
+@include('native.partials.edge-component-note', ['caption' => 'Edge Component showcase — this screen exists to show off the top bar above.'])

resources/views/native/edge-components/top-bar-search.blade.php

@@ -0,0 +1,3 @@
+<native:top-bar title="Dashboard" search-placeholder="Search" scroll-behavior="pinned" back="true" />
+
+@include('native.partials.edge-component-note', ['caption' => 'Edge Component showcase — this screen exists to show off the top bar above.'])

resources/views/native/edge-components/top-bar.blade.php

@@ -0,0 +1,16 @@
+<native:top-bar title="Dashboard" subtitle="Welcome back" back="true">
+    <native:top-bar-action
+        id="search"
+        label="Search"
+        icon="search"
+        @tap="openSearch"
+    />
+    <native:top-bar-action
+        id="settings"
+        icon="settings"
+        label="Settings"
+        url="https://yourapp.com/my-account"
+    />
+</native:top-bar>
+
+@include('native.partials.edge-component-note', ['caption' => 'Edge Component showcase — this screen exists to show off the top bar above.'])