Move onto Livewire Material 2.0.0 and leave Tailwind behind

Livewire Material 2.0.0 aligns every component with Material 3 Expressive and carries no Tailwind anywhere, so SealShare drops tailwindcss and its Vite plugin and writes its views in the package's vocabulary: layout components (<x-pane>, <x-stack>, <x-row>, <x-grid>, <x-form>) with M3's spacing tokens, the md-type-*/md-ink-* text classes, and --md-sys-* tokens in its own small stylesheet. - resources/css/app.css opens with the package's layer order, imports foundation.css and the stylesheet of each component the views render, then the scheme, regenerated with the 2025 colour rules at M3's three contrast levels. The app's own rules follow, one section per view, on tokens and on M3's breakpoints (600/840/1200/1600px) only. - Every view is rewritten in that vocabulary while SealShare keeps the shape it had: the admin table, the admin settings, the recovery codes, the share options and the download page are cards, and their fields fill them rather than stopping at the 40rem bound a card already bounds. The user settings pages became cards too, to match the admin's, each with the sections that stand apart from its one subject — deleting the account, the recovery codes — in a card beside it. Material 3 decides how a component behaves, not whether a container survives: buttons keep their label's width, a form's actions end it, and each heading level keeps one type role. - The layouts clear the floating toolbar by the --material-bottom-toolbar the package publishes, and the snackbar clears it by itself. - The two-factor setup QR code comes from QrCodeService, so it keeps a white field and quiet zone in the dark theme and still scans. - Browse Files is a real button that opens the file input, reachable and visibly focused from the keyboard. - Tests: the design test scans views, JS, CSS and app/ and checks the CSS entry both ways (no missing, no unused import). New Chromium suites cover the frame, settings and admin, the share flow, and every page at M3's breakpoint edges (599/600, 839/840, 1199/1200, 1600px). The package's renamed data-md-* hooks replace the 1.x ones. - Boost's update brings the material-3 guideline and skill and drops the Tailwind skill. composer.json requires nonameweb/livewire-material ^2.0 from the Gitea repository, resolved at the 2.0.0 tag. The CHANGELOG records the move as 2.1.0. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-09-15 22:30:51 +02:00
parent 461bc23f0a
commit a88a052d9a
48 changed files with 8311 additions and 2078 deletions
@@ -0,0 +1,271 @@
+<?php
+
+use App\Models\Setting;
+use App\Models\Share;
+use App\Models\User;
+use App\Services\ShareService;
+use Illuminate\Http\UploadedFile;
+use Illuminate\Support\Facades\Storage;
+
+/**
+ * The walk: every page's chrome and content across M3's breakpoint edges — 599, 600, 839, 840,
+ * 1199, 1200, 1600px, height 900, light theme — one visit per page, reused across widths by
+ * resizing the same page rather than revisiting it. FrameTest.php and SettingsAndAdminTest.php
+ * already assert the app-main margin, the auth card's alignment and the stat grid's column count
+ * at their own boundary for the pages they cover; this file re-asserts those three plus the
+ * section navigation's picker/tab-bar switch (untested until now), and walks every page group A/B/C
+ * left unchecked at a breakpoint: the rest of the auth flow, the setup wizard, the system password
+ * prompt, every settings page and a 404.
+ */
+beforeEach(function () {
+    config(['session.driver' => 'file']);
+    Storage::fake('shares');
+});
+
+/**
+ * Resize $page to each of M3's seven edge widths and assert what must hold at all of them: no
+ * horizontal overflow, exactly one <main>, no skipped heading level, and — scrolled to the bottom —
+ * the floating toolbar covers no interactive element and no visible text. $buttonSelector, when
+ * given, is also asserted narrower than the form it sits in (M3: a button's width is "dynamic to
+ * fit label", never stretched). $atEachWidth, when given, runs after those checks with the page and
+ * the current width, for a caller's own edge-specific assertions without a resize of their own.
+ */
+function walkBreakpoints($page, ?string $buttonSelector = null, ?callable $atEachWidth = null): void
+{
+    foreach ([599, 600, 839, 840, 1199, 1200, 1600] as $width) {
+        $page->resize($width, 900);
+
+        $metrics = $page->script(<<<'JS'
+            (() => {
+                const overflowOk = document.documentElement.scrollWidth <= window.innerWidth + 1;
+                const mainCount = document.querySelectorAll('main').length;
+
+                const levels = [...document.querySelectorAll('h1, h2, h3, h4, h5, h6')]
+                    .filter((h) => h.offsetParent !== null)
+                    .map((h) => parseInt(h.tagName.slice(1), 10));
+                let seen = 0;
+                let headingSkipped = false;
+                for (const level of levels) {
+                    if (level > seen + 1) {
+                        headingSkipped = true;
+                        break;
+                    }
+                    seen = Math.max(seen, level);
+                }
+
+                window.scrollTo(0, document.body.scrollHeight);
+
+                const toolbar = document.querySelector('[data-test="app-toolbar"]');
+                let toolbarClear = true;
+                if (toolbar) {
+                    const t = toolbar.getBoundingClientRect();
+                    const clearOf = (r) => r.right <= t.left + 0.5 || r.left >= t.right - 0.5
+                        || r.bottom <= t.top + 0.5 || r.top >= t.bottom - 0.5;
+
+                    const interactive = [...document.querySelectorAll('a, button, input, select, textarea, [tabindex]')];
+                    const textLeaves = [...document.querySelectorAll('*')]
+                        .filter((el) => el.children.length === 0 && el.textContent.trim().length > 0);
+
+                    toolbarClear = [...new Set([...interactive, ...textLeaves])]
+                        .filter((el) => !toolbar.contains(el))
+                        .every((el) => {
+                            const r = el.getBoundingClientRect();
+                            return (r.width === 0 || r.height === 0) || clearOf(r);
+                        });
+                }
+
+                return { overflowOk, mainCount, headingSkipped, toolbarClear };
+            })()
+        JS);
+
+        expect($metrics['overflowOk'])->toBeTrue();
+        expect($metrics['mainCount'])->toBe(1);
+        expect($metrics['headingSkipped'])->toBeFalse();
+        expect($metrics['toolbarClear'])->toBeTrue();
+
+        if ($buttonSelector !== null) {
+            $fits = $page->script("(() => {
+                const button = document.querySelector('{$buttonSelector}');
+                if (! button) { return null; }
+                const form = button.closest('[data-md-form]') ?? button.parentElement;
+                const formRect = form.getBoundingClientRect();
+                const buttonRect = button.getBoundingClientRect();
+                return formRect.width === 0 ? null : buttonRect.width < formRect.width - 0.5;
+            })()");
+
+            if ($fits !== null) {
+                expect($fits)->toBeTrue();
+            }
+        }
+
+        if ($atEachWidth !== null) {
+            $atEachWidth($page, $width);
+        }
+    }
+}
+
+test('the upload page holds at every breakpoint, guest and admin', function (?string $as) {
+    if ($as === 'admin') {
+        $this->actingAs(User::factory()->admin()->create());
+    }
+
+    $margins = [];
+
+    walkBreakpoints(ready(visit('/upload')), null, function ($page, $width) use (&$margins) {
+        if (in_array($width, [599, 600], true)) {
+            $margins[$width] = $page->script("(() => {
+                const style = getComputedStyle(document.querySelector('[data-md-pane-body]'));
+                return { left: parseFloat(style.paddingLeft), right: parseFloat(style.paddingRight) };
+            })()");
+        }
+    });
+
+    // M3's margin: 16px below `medium` (600px), 24px from it (foundations.md § Layout → Breakpoints).
+    expect($margins[599]['left'])->toEqualWithDelta(16, 1);
+    expect($margins[599]['right'])->toEqualWithDelta(16, 1);
+    expect($margins[600]['left'])->toEqualWithDelta(24, 1);
+    expect($margins[600]['right'])->toEqualWithDelta(24, 1);
+})->with([
+    'guest' => [null],
+    'admin' => ['admin'],
+]);
+
+test('the share-created page holds at every breakpoint', function () {
+    $share = app(ShareService::class)->createShare(
+        [['file' => UploadedFile::fake()->create('holiday-photos.zip', 100), 'relativePath' => null]],
+        [],
+    );
+
+    walkBreakpoints(ready(visit(route('share.created', $share, false))));
+});
+
+test('the download page holds locked and unlocked at every breakpoint', function () {
+    $share = app(ShareService::class)->createShare(
+        [['file' => UploadedFile::fake()->create('holiday-photos.zip', 100), 'relativePath' => null]],
+        ['password' => 'let-me-in'],
+    );
+
+    $page = ready(visit(route('share.download', $share, false)));
+
+    walkBreakpoints($page, 'button[type="submit"]');
+
+    $page->resize(1280, 900);
+    $page->type('input[type="password"]', 'let-me-in')->press('Unlock');
+    $page->wait(1);
+
+    walkBreakpoints($page);
+});
+
+test('the auth flow pages hold at every breakpoint', function (Closure $url, string $buttonSelector) {
+    walkBreakpoints(ready(visit($url())), $buttonSelector);
+})->with([
+    'login' => [fn () => route('login', [], false), '[data-test="login-button"]'],
+    'forgot password' => [fn () => route('password.request', [], false), '[data-test="email-password-reset-link-button"]'],
+    'reset password' => [fn () => route('password.reset', ['token' => 'a-fake-token', 'email' => 'test@example.com'], false), '[data-test="reset-password-button"]'],
+]);
+
+test('the two-factor challenge page holds at every breakpoint', function () {
+    $user = User::factory()->create();
+    $this->withSession(['login.id' => $user->getKey()]);
+
+    walkBreakpoints(ready(visit(route('two-factor.login', [], false))), 'button[type="submit"]');
+});
+
+test('the email verification prompt holds at every breakpoint', function () {
+    $this->actingAs(User::factory()->unverified()->create());
+
+    walkBreakpoints(ready(visit(route('verification.notice', [], false))));
+});
+
+test('the password confirmation page holds at every breakpoint', function () {
+    $this->actingAs(User::factory()->create());
+
+    walkBreakpoints(ready(visit(route('password.confirm', [], false))), '[data-test="confirm-password-button"]');
+});
+
+test('the setup wizard holds at every breakpoint', function () {
+    // EnsureSetupComplete only renders /setup while no admin exists; Pest.php's beforeEach creates
+    // one for every test, so this one removes it first.
+    User::query()->where('is_admin', true)->delete();
+
+    walkBreakpoints(ready(visit(route('setup', [], false))), 'button[type="submit"]');
+});
+
+test('the system password prompt holds at every breakpoint', function () {
+    Setting::set('system_password', bcrypt('secret'));
+
+    walkBreakpoints(ready(visit(route('system-password', [], false))), 'button[type="submit"]');
+});
+
+test('the settings pages hold at every breakpoint', function (string $url, ?string $buttonSelector) {
+    $user = User::factory()->create();
+    $this->actingAs($user)->withSession(['auth.password_confirmed_at' => time()]);
+
+    $navSwitch = [];
+
+    walkBreakpoints(ready(visit($url)), $buttonSelector, function ($page, $width) use (&$navSwitch) {
+        if (in_array($width, [599, 600], true)) {
+            $navSwitch[$width] = $page->script("(() => {
+                const picker = document.querySelector('[data-md-section-nav-picker]');
+                const nav = document.querySelector('[data-md-section-nav] > nav');
+                return {
+                    pickerVisible: !!picker && getComputedStyle(picker).display !== 'none',
+                    navVisible: !!nav && getComputedStyle(nav).display !== 'none',
+                };
+            })()");
+        }
+    });
+
+    // <x-section-nav>: a picker below `medium` (600px), M3's secondary tabs from it (section-nav.css).
+    expect($navSwitch[599]['pickerVisible'])->toBeTrue();
+    expect($navSwitch[599]['navVisible'])->toBeFalse();
+    expect($navSwitch[600]['pickerVisible'])->toBeFalse();
+    expect($navSwitch[600]['navVisible'])->toBeTrue();
+})->with([
+    'profile' => ['/settings/profile', '[data-test="update-profile-button"]'],
+    'password' => ['/settings/password', '[data-test="update-password-button"]'],
+    'appearance' => ['/settings/appearance', null],
+    'two-factor' => ['/settings/two-factor', null],
+]);
+
+test('the admin dashboard holds at every breakpoint', function () {
+    $this->actingAs(User::factory()->admin()->create());
+    Share::factory()->count(3)->create();
+
+    $columns = [];
+
+    walkBreakpoints(ready(visit('/admin/dashboard')), null, function ($page, $width) use (&$columns) {
+        if (in_array($width, [839, 840], true)) {
+            $columns[$width] = $page->script("(() => {
+                const rects = [...document.querySelectorAll('[data-md-stat]')].map((el) => el.getBoundingClientRect());
+                return new Set(rects.map((r) => Math.round(r.left))).size;
+            })()");
+        }
+    });
+
+    // <x-grid :columns="['compact' => 2, 'expanded' => 4]">: 2 columns below `expanded` (840px), 4 from it.
+    expect($columns[839])->toBe(2);
+    expect($columns[840])->toBe(4);
+});
+
+test('the admin settings page holds at every breakpoint', function () {
+    $this->actingAs(User::factory()->admin()->create());
+
+    walkBreakpoints(ready(visit('/admin/settings')), '[data-test="save-settings"]');
+});
+
+test('a 404 holds at every breakpoint', function () {
+    // No resources/views/errors/404.blade.php exists in SealShare, but that is not Laravel's own
+    // minimal fallback either: NoNameWeb\LivewireMaterial\LivewireMaterialServiceProvider appends
+    // its own error-view root to `view.paths`, so `errors::404` resolves to the package's own
+    // resources/views/error-pages/errors/404.blade.php first (verified by rendering the route
+    // in-process: the response carries `data-md-error-page`) — a whole document with its own
+    // <main data-md-error-page>, one <h1 data-md-error-headline> and no toolbar (it does not include
+    // partials.toolbar), never Alpine or Livewire, so ready() does not apply; a network-idle wait
+    // stands in for it.
+    config(['app.debug' => false]);
+
+    $page = visit('/this-page-does-not-exist-at-all')->waitForEvent('networkidle');
+
+    walkBreakpoints($page);
+});