@k2b/cloud 0.6.0-rc.0 → 0.7.0

package/src/ssr/Layout.render.test.tsx

@@ -1,148 +0,0 @@
-import { describe, expect, test } from "bun:test";
-import { mkdtempSync, rmSync } from "node:fs";
-import { tmpdir } from "node:os";
-import { resolve } from "node:path";
-import { createConfig } from "@k2b/ssr";
-import { Hono } from "hono";
-import { createComponent } from "solid-js";
-
-const root = mkdtempSync(resolve(tmpdir(), "cloud-layout-render-tests-"));
-const { plugin } = createConfig({ dev: true, rootDir: root });
-Bun.plugin(plugin());
-process.once("exit", () => rmSync(root, { recursive: true, force: true }));
-
-const { defineApp } = await import("../_internal/define-app");
-const { default: Layout } = await import("./Layout");
-const { default: MinimalLayout } = await import("./MinimalLayout");
-const { default: AdminLayout } = await import("./AdminLayout");
-
-const app = defineApp({
-  id: "layout-render-probe",
-  name: "Layout render probe",
-  icon: "ti ti-layout",
-  description: "Anonymous and minimal layout render probe",
-  baseUrl: "http://layout-render-probe:3000",
-  routes: ["/layout", "/minimal"],
-});
-
-type LayoutContextArg = Parameters<typeof Layout>[0]["c"];
-type MinimalLayoutContextArg = Parameters<typeof MinimalLayout>[0]["c"];
-type PreferencePosition = Exclude<Parameters<typeof MinimalLayout>[0]["preferences"], false | undefined>;
-const preferencePositions: PreferencePosition[] = ["top-left", "top-right", "bottom-left", "bottom-right"];
-
-const server = new Hono()
-  .use("*", async (c, next) => {
-    c.set("runtime" as never, { apps: [] } as never);
-    await next();
-  })
-  .get(
-    "/admin",
-    ...app.ssr(
-      (c) => () =>
-        createComponent(AdminLayout, {
-          c,
-          title: "Settings",
-          scroll: c.req.query("scroll") !== "false",
-          children: "Admin content",
-        }),
-    ),
-  )
-  .get(
-    "/layout",
-    ...app.ssr(
-      (c) => () =>
-        createComponent(Layout, {
-          c: c as unknown as LayoutContextArg,
-          fullPage: true,
-          title: "Public tools",
-          children: "Anonymous content",
-        }),
-    ),
-  )
-  .get(
-    "/minimal/:position",
-    ...app.ssr((c) => {
-      const requested = c.req.param("position");
-      const preferences = preferencePositions.find((position) => position === requested) ?? false;
-      return () =>
-        createComponent(MinimalLayout, {
-          c: c as unknown as MinimalLayoutContextArg,
-          preferences,
-          children: "Minimal content",
-        });
-    }),
-  );
-
-describe("Cloud layouts SSR", () => {
-  test("admin shell is viewport-bound and delegates scrolling only when requested", async () => {
-    const ordinary = await (await server.request("/admin")).text();
-    const bounded = await (await server.request("/admin?scroll=false")).text();
-    for (const html of [ordinary, bounded]) {
-      expect(html).toContain("h-dvh overflow-hidden");
-      expect(html).toContain("Admin content");
-      expect(html).toContain('data-scroll-preserve="admin-sidebar"');
-    }
-    expect(ordinary).not.toMatch(/k2b-app-workspace__main[^>]+data-scroll="false"/);
-    expect(bounded).toMatch(/k2b-app-workspace__main[^>]+data-scroll="false"/);
-    expect(bounded).not.toContain("p-[var(--ui-space-shell)]");
-  });
-  test("keeps anonymous login and preferences visible without rendering the application rail", async () => {
-    const response = await server.request("/layout", {
-      headers: { Cookie: "theme=dark", "Accept-Language": "de-CH" },
-    });
-    const html = await response.text();
-
-    expect(response.status).toBe(200);
-    expect(html).toContain('<html lang="de-CH" class="dark"');
-    expect(html).toContain("layout-header");
-    expect(html).toContain('href="/auth/login"');
-    expect(html).toContain("Anmelden");
-    expect(html).toContain("Darstellung und Sprache");
-    expect(html).toContain("Heller Modus");
-    expect(html).toContain("English");
-    expect(html).not.toContain("layout-rail-navigation");
-    expect(html).not.toContain('data-layout-authenticated="true"');
-    expect(html).not.toContain('href="/me"');
-  });
-
-  test("positions minimal preferences in every supported corner without adding Cloud chrome", async () => {
-    const expectedMenuPositions = {
-      "top-left": "bottom-right",
-      "top-right": "bottom-left",
-      "bottom-left": "top-right",
-      "bottom-right": "top-left",
-    } as const;
-
-    for (const position of preferencePositions) {
-      const response = await server.request(`/minimal/${position}`, { headers: { "Accept-Language": "en" } });
-      const html = await response.text();
-      expect(response.status).toBe(200);
-      expect(html).toContain(`minimal-layout-preferences--${position}`);
-      expect(html).toContain(`data-position="${expectedMenuPositions[position]}"`);
-      expect(html).toContain("Appearance and language");
-      expect(html).toContain("Minimal content");
-      expect(html).not.toContain("cloud-app-canvas");
-      expect(html).not.toContain("layout-header");
-      expect(html).not.toContain("layout-rail");
-    }
-  });
-
-  test("can disable the minimal preference control completely", async () => {
-    const response = await server.request("/minimal/off");
-    const html = await response.text();
-
-    expect(response.status).toBe(200);
-    expect(html).toContain("Minimal content");
-    expect(html).not.toContain("minimal-layout-preferences");
-    expect(html).not.toContain("Appearance and language");
-  });
-
-  test("keeps every corner safe-area aware", async () => {
-    const css = await Bun.file(new URL("../styles/utilities-navigation.css", import.meta.url)).text();
-    for (const position of preferencePositions) expect(css).toContain(`.minimal-layout-preferences--${position}`);
-    expect(css).toContain("env(safe-area-inset-top)");
-    expect(css).toContain("env(safe-area-inset-right)");
-    expect(css).toContain("env(safe-area-inset-bottom)");
-    expect(css).toContain("env(safe-area-inset-left)");
-  });
-});

package/src/ssr/islands/SearchBar.island.tsx

@@ -1,80 +0,0 @@
-import { TextInput, useLocale } from "@k2b/ui";
-import { createEffect, createSignal, onMount } from "solid-js";
-import { platformMessages } from "../platform-messages";
-
-type SearchBarProps = {
-  action?: string;
-  value?: string;
-  param?: string;
-  pageParam?: string;
-  placeholder?: string;
-  ariaLabel?: string;
-};
-
-/** Search bar that filters content via URL query parameter. */
-export default function SearchBar(props: SearchBarProps = {}) {
-  const locale = useLocale();
-  const t = () => platformMessages.resolve([locale()]).t;
-  const param = props.param ?? "search";
-  const pageParam = props.pageParam ?? "page";
-  const [query, setQuery] = createSignal(props.value ?? "");
-
-  createEffect(() => {
-    if (props.value !== undefined) {
-      setQuery(props.value);
-    }
-  });
-
-  onMount(() => {
-    if (props.value !== undefined) return;
-    const fallback = new URLSearchParams(window.location.search).get(param) ?? "";
-    setQuery(fallback);
-  });
-
-  const handleSubmit = (e: Event): void => {
-    e.preventDefault();
-    const current = new URL(window.location.href);
-    const url = props.action ? new URL(props.action, window.location.origin) : current;
-    const value = query().trim();
-
-    if (value.length > 0) {
-      url.searchParams.set(param, value);
-    } else {
-      url.searchParams.delete(param);
-    }
-    url.searchParams.delete(pageParam);
-
-    window.location.href = url.toString();
-  };
-
-  const handleClear = (): void => {
-    const current = new URL(window.location.href);
-    const url = props.action ? new URL(props.action, window.location.origin) : current;
-
-    url.searchParams.delete(param);
-    url.searchParams.delete(pageParam);
-
-    window.location.href = url.toString();
-  };
-
-  return (
-    <form onSubmit={handleSubmit} role="search" class="w-full">
-      <TextInput
-        name={param}
-        type="search"
-        placeholder={props.placeholder ?? `${t().search}…`}
-        aria-label={props.ariaLabel ?? t().search}
-        icon="ti ti-search"
-        activeIcon="ti ti-search"
-        value={query}
-        onValueChange={setQuery}
-        clearable
-        clearLabel={t().clearSearch}
-        onClear={handleClear}
-      />
-      <button type="submit" class="hidden">
-        {t().search}
-      </button>
-    </form>
-  );
-}