@hoardodile/ui 0.0.0

package/src/test/i18n.tsx

@@ -0,0 +1,22 @@
+import { createI18n } from "@hoardodile/i18n"
+import { I18nProvider } from "@hoardodile/i18n/react"
+import { render } from "@testing-library/react"
+import type { ReactElement } from "react"
+
+/**
+ * Shared English i18n instance for component tests. Bind it explicitly
+ * through the provider (never via react-i18next's module-global default:
+ * the workspace keeps more than one physical react-i18next copy, so the
+ * global instance is only reliable within a single package).
+ */
+export const testI18n = createI18n()
+
+/** Render with the shared i18n instance so components resolve the `ui`
+ *  namespace. Tests that assert non-English copy call `changeLanguage`
+ *  on {@link testI18n} and restore `"en"` afterwards. */
+export function renderWithI18n(
+	ui: ReactElement,
+	options?: Parameters<typeof render>[1],
+): ReturnType<typeof render> {
+	return render(<I18nProvider i18n={testI18n}>{ui}</I18nProvider>, options)
+}

package/src/test/setup.ts

@@ -0,0 +1,104 @@
+import "@testing-library/jest-dom/vitest"
+
+import { cleanup } from "@testing-library/react"
+import { afterEach } from "vitest"
+
+// Test components that render `@hoardodile/ui` strings use the
+// `renderWithI18n` helper (see `./i18n.ts`) — it wraps the tree in an
+// I18nProvider bound to the shared test instance.
+
+// jsdom does not implement matchMedia; stub it deterministically so
+// media-query code paths (use-mobile, useMobileBackToClose) have
+// something to consult during tests.
+if (typeof window !== "undefined") {
+	Object.defineProperty(window, "matchMedia", {
+		writable: true,
+		configurable: true,
+		value: (query: string) => ({
+			matches: false,
+			media: query,
+			onchange: null,
+			addListener: () => undefined,
+			removeListener: () => undefined,
+			addEventListener: () => undefined,
+			removeEventListener: () => undefined,
+			dispatchEvent: () => false,
+		}),
+	})
+
+	// jsdom does not implement ResizeObserver; stub it so virtual list
+	// libraries can measure the scroll container during tests.
+	class StubResizeObserver {
+		observe() {}
+		unobserve() {}
+		disconnect() {}
+	}
+
+	Object.defineProperty(window, "ResizeObserver", {
+		writable: true,
+		configurable: true,
+		value: StubResizeObserver,
+	})
+
+	// jsdom does not implement IntersectionObserver; stub it so lazy-loading
+	// sentinel elements do not crash tests.
+	class StubIntersectionObserver {
+		observe() {}
+		unobserve() {}
+		disconnect() {}
+	}
+
+	Object.defineProperty(window, "IntersectionObserver", {
+		writable: true,
+		configurable: true,
+		value: StubIntersectionObserver,
+	})
+
+	Object.defineProperty(window, "scrollTo", {
+		writable: true,
+		configurable: true,
+		value: () => undefined,
+	})
+
+	Object.defineProperty(Element.prototype, "scrollTo", {
+		writable: true,
+		configurable: true,
+		value: () => undefined,
+	})
+}
+
+// jsdom does not implement HTMLCanvasElement#getContext; the image
+// cropping pipeline consults it during tests. Return a no-op 2D context
+// so cropper components can mount without noisy "canvas npm package"
+// warnings.
+if (typeof HTMLCanvasElement !== "undefined") {
+	Object.defineProperty(HTMLCanvasElement.prototype, "getContext", {
+		writable: true,
+		configurable: true,
+		value: (contextId: string) => {
+			if (contextId !== "2d") return null
+			const noOp = () => undefined
+			return new Proxy(
+				{},
+				{
+					get(_target, prop) {
+						if (prop === "canvas") return null
+						if (prop === "getContextAttributes") return () => ({})
+						if (prop === "measureText") return () => ({ width: 0 })
+						if (prop === "getImageData") return () => ({ data: [] })
+						if (prop === "createImageData")
+							return () => ({ data: [], width: 0, height: 0 })
+						if (prop === "isPointInPath") return () => false
+						if (prop === "isPointInStroke") return () => false
+						return noOp
+					},
+				},
+			) as unknown as CanvasRenderingContext2D
+		},
+	})
+}
+
+afterEach(() => {
+	cleanup()
+	if (typeof localStorage !== "undefined") localStorage.clear()
+})

package/src/viewport.ts

@@ -0,0 +1,69 @@
+/**
+ * Mobile viewport initial-scale factor used across the app shell and
+ * plugin iframe previews. Kept in one place so it can be changed
+ * without hunting through HTML templates and CSS rules.
+ */
+export const MOBILE_INITIAL_SCALE = 0.8
+
+/**
+ * Width in pixels at which the app switches from below-md to md+ layouts.
+ *
+ * This value is intentionally aligned with Tailwind's `md` breakpoint
+ * (768 px) so that JS detection and CSS responsive prefixes stay in sync.
+ * Components that need to know whether they are in the "below md" viewport
+ * should use {@link isBelowMd} or {@link useBelowMd} from @hoardodile/ui/hooks/use-mobile.
+ */
+export const MOBILE_BREAKPOINT_PX = 768
+
+/**
+ * Same breakpoint expressed in rems, matching Tailwind's default theme
+ * (`--breakpoint-md: 48rem`). Useful for CSS media queries and comments.
+ */
+export const MOBILE_BREAKPOINT_REM = MOBILE_BREAKPOINT_PX / 16
+
+/**
+ * Media query string that matches viewports below the `md` breakpoint
+ * (< 768 px). Shared between JS hooks and anywhere else that needs to detect
+ * a below-md viewport.
+ *
+ * Keep this in sync with the CSS/Tailwind breakpoint so JS and CSS never
+ * disagree about the viewport size.
+ */
+export const MOBILE_QUERY = `(max-width: ${MOBILE_BREAKPOINT_PX - 1}px)`
+
+/**
+ * Width in pixels at which the app switches from a drawer to a fixed left
+ * sidebar (the "app shell"). Raised above `md` so mid-size viewports keep
+ * the whole width for their content column — below this the sidebar hides
+ * behind the hamburger drawer.
+ *
+ * Use the CSS `sidebar:` / `max-sidebar:` variants (`--breakpoint-sidebar`)
+ * at call sites — this value is the single source of truth for both.
+ */
+export const SIDEBAR_BREAKPOINT_PX = 1150
+
+/**
+ * Media query string that matches viewports below the sidebar breakpoint
+ * (`max-sidebar`), i.e. where the shell shows the drawer instead of the fixed
+ * sidebar. Shared between JS hooks and anywhere else that needs the
+ * below-sidebar viewport.
+ */
+export const SIDEBAR_QUERY = `(max-width: ${SIDEBAR_BREAKPOINT_PX - 1}px)`
+
+/**
+ * Width in pixels at which the right filter rail switches from a fixed
+ * column to a drawer (DESIGN.md — Layout: "the panel becomes an
+ * overlay below 1440px"). Below this the sidebar + panel + content no
+ * longer fit comfortably, so the rail hides behind a Filters button.
+ *
+ * Use the CSS `panel:` / `max-panel:` variants (`--breakpoint-panel`)
+ * at call sites — this value is the single source of truth for both.
+ */
+export const PANEL_BREAKPOINT_PX = 1440
+
+/**
+ * Media query string that matches viewports below the panel breakpoint
+ * (< 1440 px), i.e. where the filter rail lives in a drawer. Shared
+ * between JS hooks and anywhere else that needs the below-panel viewport.
+ */
+export const PANEL_QUERY = `(max-width: ${PANEL_BREAKPOINT_PX - 1}px)`