@wopr-network/platform-ui-core 1.0.0

package/src/__tests__/__snapshots__/layout-snapshots.test.tsx.snap

@@ -0,0 +1,741 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Layout snapshots > AdminLayout renders desktop sidebar + admin nav + mobile fallback 1`] = `
+<div>
+  <div
+    class="hidden lg:flex h-screen"
+  >
+    <div
+      data-testid="sidebar"
+    >
+      Sidebar
+    </div>
+    <div
+      class="flex flex-1 flex-col overflow-auto"
+    >
+      <nav
+        data-testid="admin-nav"
+      >
+        AdminNav
+      </nav>
+      <main
+        class="flex-1 overflow-auto"
+        style="opacity: 0;"
+      >
+        <div>
+          admin child
+        </div>
+      </main>
+    </div>
+  </div>
+  <div
+    class="flex lg:hidden h-screen items-center justify-center p-6"
+  >
+    <p
+      class="text-center text-sm text-muted-foreground"
+    >
+      Admin panel requires desktop. Minimum width: 1024px.
+    </p>
+  </div>
+</div>
+`;
+
+exports[`Layout snapshots > AuthLayout renders centered card structure 1`] = `
+<div>
+  <div
+    class="relative flex min-h-screen items-center justify-center bg-background px-4 overflow-hidden"
+  >
+    <div
+      class="pointer-events-none absolute inset-0 flex items-center justify-center"
+    >
+      <div
+        class="h-[500px] w-[500px] rounded-full bg-terminal/5 blur-[120px]"
+      />
+    </div>
+    <div
+      class="relative z-10 w-full max-w-sm"
+    >
+      <div>
+        auth child
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Layout snapshots > BillingLayout renders billing nav sidebar + content area 1`] = `
+<div>
+  <div
+    class="flex h-full"
+  >
+    <nav
+      class="w-48 shrink-0 border-r p-4"
+    >
+      <h2
+        class="mb-4 text-sm font-semibold text-muted-foreground"
+      >
+        Billing
+      </h2>
+      <ul
+        class="space-y-1"
+      >
+        <li
+          class=""
+        >
+          <a
+            class="block rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground text-muted-foreground"
+            href="/billing/plans"
+          >
+            Your Plan
+          </a>
+        </li>
+        <li
+          class=""
+        >
+          <a
+            class="block rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground text-muted-foreground"
+            href="/billing/credits"
+          >
+            Credits
+          </a>
+        </li>
+        <li
+          class=""
+        >
+          <a
+            class="block rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground text-muted-foreground"
+            href="/billing/usage"
+          >
+            Usage
+          </a>
+        </li>
+        <li
+          class="hidden"
+        >
+          <a
+            class="block rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground text-muted-foreground"
+            href="/billing/usage/hosted"
+          >
+            Hosted Usage
+          </a>
+        </li>
+        <li
+          class=""
+        >
+          <a
+            class="block rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground text-muted-foreground"
+            href="/billing/payment"
+          >
+            Payment
+          </a>
+        </li>
+        <li
+          class=""
+        >
+          <a
+            class="block rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground text-muted-foreground"
+            href="/billing/referrals"
+          >
+            Refer & Earn
+          </a>
+        </li>
+      </ul>
+    </nav>
+    <div
+      class="flex-1 overflow-auto p-6"
+    >
+      <div>
+        billing child
+      </div>
+      <footer
+        class="mt-8 border-t pt-4 text-xs text-muted-foreground"
+      >
+        <div
+          class="flex gap-4"
+        >
+          <a
+            class="underline underline-offset-4 hover:text-foreground"
+            href="/terms"
+          >
+            Terms of Service
+          </a>
+          <a
+            class="underline underline-offset-4 hover:text-foreground"
+            href="/privacy"
+          >
+            Privacy Policy
+          </a>
+        </div>
+      </footer>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Layout snapshots > DashboardLayout renders sidebar + main with mobile sheet 1`] = `
+<div>
+  <div
+    class="hidden lg:flex h-screen"
+  >
+    <div
+      data-testid="sidebar"
+    >
+      Sidebar
+    </div>
+    <div
+      class="crt-scanlines flex flex-1 flex-col overflow-auto"
+    >
+      <main
+        class="flex-1 overflow-auto"
+        style="opacity: 0;"
+      >
+        <div>
+          dashboard child
+        </div>
+      </main>
+    </div>
+  </div>
+  <div
+    class="crt-scanlines flex lg:hidden h-screen flex-col"
+  >
+    <header
+      class="flex h-14 shrink-0 items-center border-b border-sidebar-border bg-sidebar px-4 gap-3"
+    >
+      <button
+        aria-controls="radix-_r_2_"
+        aria-expanded="false"
+        aria-haspopup="dialog"
+        aria-label="Open navigation menu"
+        class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-sm text-sm font-medium font-mono transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 size-9"
+        data-size="icon"
+        data-slot="sheet-trigger"
+        data-state="closed"
+        data-variant="ghost"
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          class="lucide lucide-menu size-5"
+          fill="none"
+          height="24"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M4 5h16"
+          />
+          <path
+            d="M4 12h16"
+          />
+          <path
+            d="M4 19h16"
+          />
+        </svg>
+      </button>
+      <span
+        class="text-lg font-semibold tracking-tight"
+      >
+        Platform
+      </span>
+    </header>
+    <main
+      class="flex-1 overflow-auto"
+      style="opacity: 0;"
+    >
+      <div>
+        dashboard child
+      </div>
+    </main>
+  </div>
+  <div
+    data-testid="chat-widget"
+  >
+    ChatWidget
+  </div>
+</div>
+`;
+
+exports[`Layout snapshots > FleetLayout renders sidebar + main 1`] = `
+<div>
+  <div
+    class="flex h-screen"
+  >
+    <div
+      data-testid="sidebar"
+    >
+      Sidebar
+    </div>
+    <main
+      class="flex-1 overflow-auto"
+    >
+      <div>
+        fleet child
+      </div>
+    </main>
+  </div>
+</div>
+`;
+
+exports[`Layout snapshots > PluginsLayout renders sidebar + main 1`] = `
+<div>
+  <div
+    class="flex h-screen"
+  >
+    <div
+      data-testid="sidebar"
+    >
+      Sidebar
+    </div>
+    <main
+      class="flex-1 overflow-auto"
+    >
+      <div>
+        plugins child
+      </div>
+    </main>
+  </div>
+</div>
+`;
+
+exports[`Layout snapshots > SettingsLayout renders desktop nav + mobile sheet 1`] = `
+<div>
+  <div
+    class="flex h-full flex-col md:flex-row"
+  >
+    <div
+      class="flex items-center gap-2 border-b p-4 md:hidden"
+    >
+      <button
+        aria-controls="radix-_r_9_"
+        aria-expanded="false"
+        aria-haspopup="dialog"
+        class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-sm text-sm font-medium font-mono transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 size-8"
+        data-size="icon-sm"
+        data-slot="sheet-trigger"
+        data-state="closed"
+        data-variant="ghost"
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          class="lucide lucide-menu size-4"
+          fill="none"
+          height="24"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M4 5h16"
+          />
+          <path
+            d="M4 12h16"
+          />
+          <path
+            d="M4 19h16"
+          />
+        </svg>
+      </button>
+      <h2
+        class="text-sm font-semibold"
+      >
+        Settings
+      </h2>
+    </div>
+    <nav
+      class="hidden w-48 shrink-0 border-r p-4 md:block"
+    >
+      <h2
+        class="mb-4 text-sm font-semibold text-muted-foreground"
+      >
+        Settings
+      </h2>
+      <ul
+        class="space-y-1"
+      >
+        <li
+          class="relative"
+        >
+          <a
+            class="relative flex items-center gap-2 rounded-sm px-3 py-2 text-sm font-medium transition-colors hover:text-accent-foreground text-muted-foreground"
+            href="/settings/profile"
+          >
+            <span
+              class="relative z-10 flex items-center gap-2"
+            >
+              <svg
+                aria-hidden="true"
+                class="lucide lucide-user size-4"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"
+                />
+                <circle
+                  cx="12"
+                  cy="7"
+                  r="4"
+                />
+              </svg>
+              Profile
+            </span>
+          </a>
+        </li>
+        <li
+          class="relative"
+        >
+          <a
+            class="relative flex items-center gap-2 rounded-sm px-3 py-2 text-sm font-medium transition-colors hover:text-accent-foreground text-muted-foreground"
+            href="/settings/account"
+          >
+            <span
+              class="relative z-10 flex items-center gap-2"
+            >
+              <svg
+                aria-hidden="true"
+                class="lucide lucide-key-round size-4"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z"
+                />
+                <circle
+                  cx="16.5"
+                  cy="7.5"
+                  fill="currentColor"
+                  r=".5"
+                />
+              </svg>
+              Account
+            </span>
+          </a>
+        </li>
+        <li
+          class="relative"
+        >
+          <a
+            class="relative flex items-center gap-2 rounded-sm px-3 py-2 text-sm font-medium transition-colors hover:text-accent-foreground text-muted-foreground"
+            href="/settings/security"
+          >
+            <span
+              class="relative z-10 flex items-center gap-2"
+            >
+              <svg
+                aria-hidden="true"
+                class="lucide lucide-shield size-4"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"
+                />
+              </svg>
+              Security
+            </span>
+          </a>
+        </li>
+        <li
+          class="relative"
+        >
+          <a
+            class="relative flex items-center gap-2 rounded-sm px-3 py-2 text-sm font-medium transition-colors hover:text-accent-foreground text-muted-foreground"
+            href="/settings/brain"
+          >
+            <span
+              class="relative z-10 flex items-center gap-2"
+            >
+              <svg
+                aria-hidden="true"
+                class="lucide lucide-brain size-4"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M12 18V5"
+                />
+                <path
+                  d="M15 13a4.17 4.17 0 0 1-3-4 4.17 4.17 0 0 1-3 4"
+                />
+                <path
+                  d="M17.598 6.5A3 3 0 1 0 12 5a3 3 0 1 0-5.598 1.5"
+                />
+                <path
+                  d="M17.997 5.125a4 4 0 0 1 2.526 5.77"
+                />
+                <path
+                  d="M18 18a4 4 0 0 0 2-7.464"
+                />
+                <path
+                  d="M19.967 17.483A4 4 0 1 1 12 18a4 4 0 1 1-7.967-.517"
+                />
+                <path
+                  d="M6 18a4 4 0 0 1-2-7.464"
+                />
+                <path
+                  d="M6.003 5.125a4 4 0 0 0-2.526 5.77"
+                />
+              </svg>
+              Brain
+            </span>
+          </a>
+        </li>
+        <li
+          class="relative"
+        >
+          <a
+            class="relative flex items-center gap-2 rounded-sm px-3 py-2 text-sm font-medium transition-colors hover:text-accent-foreground text-muted-foreground"
+            href="/settings/providers"
+          >
+            <span
+              class="relative z-10 flex items-center gap-2"
+            >
+              <svg
+                aria-hidden="true"
+                class="lucide lucide-server size-4"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <rect
+                  height="8"
+                  rx="2"
+                  ry="2"
+                  width="20"
+                  x="2"
+                  y="2"
+                />
+                <rect
+                  height="8"
+                  rx="2"
+                  ry="2"
+                  width="20"
+                  x="2"
+                  y="14"
+                />
+                <line
+                  x1="6"
+                  x2="6.01"
+                  y1="6"
+                  y2="6"
+                />
+                <line
+                  x1="6"
+                  x2="6.01"
+                  y1="18"
+                  y2="18"
+                />
+              </svg>
+              Provider Keys
+            </span>
+          </a>
+        </li>
+        <li
+          class="relative"
+        >
+          <a
+            class="relative flex items-center gap-2 rounded-sm px-3 py-2 text-sm font-medium transition-colors hover:text-accent-foreground text-muted-foreground"
+            href="/settings/api-keys"
+          >
+            <span
+              class="relative z-10 flex items-center gap-2"
+            >
+              <svg
+                aria-hidden="true"
+                class="lucide lucide-key size-4"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="m15.5 7.5 2.3 2.3a1 1 0 0 0 1.4 0l2.1-2.1a1 1 0 0 0 0-1.4L19 4"
+                />
+                <path
+                  d="m21 2-9.6 9.6"
+                />
+                <circle
+                  cx="7.5"
+                  cy="15.5"
+                  r="5.5"
+                />
+              </svg>
+              API Keys
+            </span>
+          </a>
+        </li>
+        <li
+          class="relative"
+        >
+          <a
+            class="relative flex items-center gap-2 rounded-sm px-3 py-2 text-sm font-medium transition-colors hover:text-accent-foreground text-muted-foreground"
+            href="/settings/secrets"
+          >
+            <span
+              class="relative z-10 flex items-center gap-2"
+            >
+              <svg
+                aria-hidden="true"
+                class="lucide lucide-lock-keyhole size-4"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <circle
+                  cx="12"
+                  cy="16"
+                  r="1"
+                />
+                <rect
+                  height="12"
+                  rx="2"
+                  width="18"
+                  x="3"
+                  y="10"
+                />
+                <path
+                  d="M7 10V7a5 5 0 0 1 10 0v3"
+                />
+              </svg>
+              Secrets
+            </span>
+          </a>
+        </li>
+        <li
+          class="relative"
+        >
+          <a
+            class="relative flex items-center gap-2 rounded-sm px-3 py-2 text-sm font-medium transition-colors hover:text-accent-foreground text-muted-foreground"
+            href="/settings/notifications"
+          >
+            <span
+              class="relative z-10 flex items-center gap-2"
+            >
+              <svg
+                aria-hidden="true"
+                class="lucide lucide-bell size-4"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M10.268 21a2 2 0 0 0 3.464 0"
+                />
+                <path
+                  d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"
+                />
+              </svg>
+              Notifications
+            </span>
+          </a>
+        </li>
+        <li
+          class="relative"
+        >
+          <a
+            class="relative flex items-center gap-2 rounded-sm px-3 py-2 text-sm font-medium transition-colors hover:text-accent-foreground text-muted-foreground"
+            href="/settings/activity"
+          >
+            <span
+              class="relative z-10 flex items-center gap-2"
+            >
+              <svg
+                aria-hidden="true"
+                class="lucide lucide-history size-4"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"
+                />
+                <path
+                  d="M3 3v5h5"
+                />
+                <path
+                  d="M12 7v5l4 2"
+                />
+              </svg>
+              Activity
+            </span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+    <div
+      class="flex-1 overflow-auto p-4 md:p-6"
+    >
+      <div>
+        settings child
+      </div>
+    </div>
+  </div>
+</div>
+`;