Add start of visual Leptos tests

Cargo.toml

@@ -1,5 +1,5 @@
 [workspace]
-members = ["packages/*", "packages/*/example"]
+members = ["packages/*", "packages/*/example", "packages/*/test/*"]
 resolver = "2"
 
 [workspace.package]

packages/leptos/test/visual/Cargo.toml

@@ -0,0 +1,20 @@
+[package]
+name = "floating-ui-leptos-test-visual"
+description = "Visual tests for Floating UI Leptos."
+publish = false
+
+authors.workspace = true
+edition.workspace = true
+license.workspace = true
+repository.workspace = true
+version.workspace = true
+
+[dependencies]
+console_log = "1.0.0"
+console_error_panic_hook = "0.1.7"
+leptos = { version = "0.6.9", features = ["csr", "nightly"] }
+log = "0.4.21"
+floating-ui-leptos = { path = "../.." }
+wasm-bindgen.workspace = true
+web-sys.workspace = true
+leptos_router = { version = "0.6.9", features = ["csr", "nightly"] }

packages/leptos/test/visual/index.css

@@ -0,0 +1,229 @@
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+    font-family: sans-serif;
+}
+
+body {
+    margin: 0;
+    padding-bottom: 200px;
+}
+
+nav {
+    background: #edeff7;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    top: 0;
+    width: 15rem;
+    overflow-y: auto;
+    padding-bottom: 1rem;
+}
+
+nav h2 {
+    margin-left: 1rem;
+}
+
+nav ul {
+    list-style-type: none;
+    padding: 0;
+}
+
+nav button {
+    width: 100%;
+    text-align: left;
+    font-size: 1rem;
+    border: none;
+    cursor: pointer;
+    padding: 0.25rem 0;
+    padding-left: 2rem;
+    background: none;
+}
+
+.home-button {
+    font-size: 2rem;
+    font-weight: bold;
+    margin-top: 1rem;
+    text-decoration: none;
+    color: black;
+}
+
+.new-button {
+    background: royalblue;
+    width: max-content;
+    text-decoration: none;
+    color: white;
+    font-size: 1.25rem;
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.25rem;
+}
+
+.nav-top {
+    display: flex;
+    flex-direction: column;
+    padding: 0.5rem;
+    margin-left: 1.5rem;
+    gap: 0.5rem;
+}
+
+.nav-link {
+    display: block;
+    text-decoration: none;
+    margin-left: 2rem;
+    margin-right: 1rem;
+    font-size: 1.125rem;
+    padding: 0.25rem 0;
+    color: #646870;
+    text-transform: capitalize;
+}
+
+.nav-link[aria-current='page'] {
+    color: black;
+    font-weight: bold;
+}
+
+.nav-link:visited {
+    color: #646870;
+}
+
+h1 {
+    font-size: 3rem;
+}
+
+main {
+    margin-left: 15rem;
+    padding-left: 2rem;
+    max-width: 800px;
+}
+
+.reference {
+    display: grid;
+    place-items: center;
+    font: inherit;
+    width: 160px;
+    height: 160px;
+    background: #ed4f73;
+    color: white;
+}
+
+.floating {
+    display: grid;
+    place-items: center;
+    background: turquoise;
+    width: 80px;
+    height: 80px;
+    outline: none;
+}
+
+.arrow {
+    width: 15px;
+    height: 15px;
+    background: yellow;
+}
+
+.container {
+    border: 1px solid black;
+    display: grid;
+    place-items: center;
+    width: 700px;
+    height: 500px;
+    margin-bottom: 1rem;
+}
+
+.container[data-flexible] {
+    width: 100%;
+}
+
+.controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    width: 100%;
+    background: #edeff7;
+    padding: 16px;
+}
+
+.controls button {
+    all: unset;
+    text-align: center;
+    background: royalblue;
+    padding: 8px;
+    color: white;
+    font-size: 1.125rem;
+    border-radius: 4px;
+    width: 200px;
+}
+
+.controls button:hover {
+    background: navy;
+}
+
+.controls button:focus-visible {
+    outline: 2px solid black;
+}
+
+.scroll {
+    display: grid;
+    place-items: center;
+    overflow: scroll;
+    background: #edeff7;
+    border: 1px solid;
+    width: 450px;
+    height: 450px;
+}
+
+.scroll::before {
+    content: '';
+    display: block;
+    width: 1px;
+    height: 750px;
+}
+
+.scroll::after {
+    content: '';
+    display: block;
+    width: 1px;
+    height: 750px;
+}
+
+.scroll[data-x]::before,
+.scroll[data-x]::after {
+    width: 1500px;
+}
+
+.scroll-indicator {
+    background: #edeff726;
+    z-index: 10;
+    width: fit-content;
+    padding: 5px;
+    border-radius: 5px;
+    display: none;
+}
+
+.prose {
+    font-size: 1.125rem;
+    color: #555;
+    line-height: 1.75;
+}
+
+@keyframes scale {
+    from {
+        transform: scale(0.5);
+    }
+
+    to {
+        transform: scale(1.25);
+    }
+}
+
+@media (max-width: 600px) {
+    nav {
+        display: none;
+    }
+
+    main {
+        margin: 0;
+        padding: 0 1rem;
+    }
+}

packages/leptos/test/visual/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html>
+    <head>
+        <title>Rust Floating UI Testing Grounds</title>
+        <meta name="viewport" content="width=device-width" />
+
+        <link data-trunk rel="css" href="index.css" />
+    </head>
+    <body>
+        <div id="root"></div>
+    </body>
+</html>

packages/leptos/test/visual/src/app.rs

@@ -0,0 +1,72 @@
+use leptos::*;
+use leptos_router::{Outlet, Route, Router, Routes, A};
+
+use crate::spec::placement::Placement;
+use crate::spec::relative::Relative;
+use crate::utils::new::New;
+
+const ROUTES: [&str; 2] = ["placement", "relative"];
+
+#[component]
+pub fn AppWrapper() -> impl IntoView {
+    view! {
+        <div>
+            <main>
+                <Outlet />
+            </main>
+            <nav>
+                <div class="nav-top">
+                    <A href="/" class="home-button">
+                        Tests
+                    </A>
+                    <A href="/new" class="new-button">
+                        New
+                    </A>
+                </div>
+                <ul>
+                    <For
+                        each=|| ROUTES
+                        key=|path| path.to_string()
+                        children=move |path| {
+                            view! {
+                                <A href=format!("/{path}") class="nav-link">
+                                    {path.replace('-', "")}
+                                </A>
+                            }
+                        }
+                    />
+                </ul>
+            </nav>
+        </div>
+    }
+}
+
+#[component]
+pub fn Index() -> impl IntoView {
+    view! {
+        <h1>Floating UI Testing Grounds</h1>
+        <p>
+            Welcome! On the left is a navigation bar to browse through
+            different testing files. These files, and the control buttons, are
+            used by Playwright to take screenshots of the page for visual
+            snapshot testing.
+        </p>
+    }
+}
+
+#[component]
+pub fn App() -> impl IntoView {
+    view! {
+        <Router>
+            <Routes>
+                <Route path="/" view=AppWrapper>
+                    <Route path="" view=Index />
+
+                    <Route path="new" view=New />
+                    <Route path="placement" view=Placement />
+                    <Route path="relative" view=Relative />
+                </Route>
+            </Routes>
+        </Router>
+    }
+}

packages/leptos/test/visual/src/main.rs

@@ -0,0 +1,21 @@
+mod app;
+mod spec;
+mod utils;
+
+use wasm_bindgen::JsCast;
+use web_sys::HtmlElement;
+
+use crate::app::App;
+
+pub fn main() {
+    _ = console_log::init_with_level(log::Level::Debug);
+    console_error_panic_hook::set_once();
+
+    leptos::mount_to(
+        leptos::document()
+            .get_element_by_id("root")
+            .unwrap()
+            .unchecked_into::<HtmlElement>(),
+        App,
+    );
+}

packages/leptos/test/visual/src/spec.rs

@@ -0,0 +1,2 @@
+pub mod placement;
+pub mod relative;