@mohasinac/appkit 2.4.10 → 2.5.0

package/scripts/smoke-theme.mjs

@@ -0,0 +1,105 @@
+#!/usr/bin/env node
+/**
+ * appkit-smoke-theme — theme repaint verification.
+ *
+ * Reads appkit.config.js from cwd. For each route in routes.themeProbe:
+ *   1. Takes a baseline screenshot with default theme.
+ *   2. Injects themeOverrides CSS variables via page.evaluate.
+ *   3. Takes an override screenshot.
+ *   4. Diffs pixel hashes — if a page doesn't change, a hardcoded color likely escaped.
+ *
+ * Requires Playwright: npm install -D @playwright/test playwright
+ *
+ * Usage: npx appkit-smoke-theme
+ */
+
+import { existsSync } from "fs";
+import { join } from "path";
+import { pathToFileURL } from "url";
+
+const CWD = process.cwd();
+
+let config = null;
+const CONFIG_PATHS = [join(CWD, "appkit.config.js"), join(CWD, "appkit.config.mjs")];
+for (const p of CONFIG_PATHS) {
+  if (existsSync(p)) {
+    const mod = await import(pathToFileURL(p).href);
+    config = mod.default ?? mod;
+    break;
+  }
+}
+
+if (!config) {
+  console.error("appkit-smoke-theme: no appkit.config.js found. Run npx appkit-init-config first.");
+  process.exit(1);
+}
+
+const probeRoutes = config.routes?.themeProbe ?? [];
+if (probeRoutes.length === 0) {
+  console.log("appkit-smoke-theme: no themeProbe routes configured.");
+  process.exit(0);
+}
+
+const themeOverrides = config.themeOverrides ?? {};
+if (Object.keys(themeOverrides).length === 0) {
+  console.log("appkit-smoke-theme: no themeOverrides configured — nothing to compare.");
+  process.exit(0);
+}
+
+// Check playwright is available
+let chromium;
+try {
+  ({ chromium } = await import("playwright"));
+} catch {
+  console.error("appkit-smoke-theme: Playwright not installed. Run: npm install -D @playwright/test playwright");
+  process.exit(1);
+}
+
+const base = config.baseUrl ?? "http://localhost:3000";
+const browser = await chromium.launch();
+let failed = 0;
+let passed = 0;
+
+for (const route of probeRoutes) {
+  const url = `${base}${route.path}`;
+  const page = await browser.newPage();
+
+  try {
+    if (route.auth && config.authFixtures?.[route.auth]) {
+      const cookie = config.authFixtures[route.auth].cookie;
+      const [name, value] = cookie.split("=");
+      await page.context().addCookies([{ name, value, domain: new URL(base).hostname, path: "/" }]);
+    }
+
+    await page.goto(url, { waitUntil: "networkidle" });
+    const baselineScreenshot = await page.screenshot();
+
+    // Inject theme overrides
+    await page.evaluate((overrides) => {
+      const root = document.documentElement;
+      for (const [key, value] of Object.entries(overrides)) {
+        root.style.setProperty(key, value);
+      }
+    }, themeOverrides);
+
+    const overrideScreenshot = await page.screenshot();
+
+    // Simple pixel-level comparison: compare lengths as a quick proxy
+    if (baselineScreenshot.equals(overrideScreenshot)) {
+      console.error(`[FAIL] ${route.path} — screenshots identical; possible hardcoded color`);
+      failed++;
+    } else {
+      console.log(`[PASS] ${route.path} — theme repaint detected`);
+      passed++;
+    }
+  } catch (err) {
+    console.error(`[FAIL] ${route.path} — ${err.message}`);
+    failed++;
+  } finally {
+    await page.close();
+  }
+}
+
+await browser.close();
+console.log(`\nappkit-smoke-theme: ${passed} passed, ${failed} failed.`);
+process.exit(failed > 0 ? 1 : 0);

package/scripts/verify-css-build.mjs

@@ -0,0 +1,49 @@
+/**
+ * Post-build guard: verifies that critical responsive Tailwind classes are present
+ * in the compiled dist/tailwind-utilities.css. Fails the build if any are missing,
+ * catching cases where a stale or incomplete CSS bundle was published.
+ *
+ * Run via: node scripts/verify-css-build.mjs
+ * Called automatically at the end of `npm run build`.
+ */
+import { readFileSync } from "fs";
+import { resolve, dirname } from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const CSS_PATH = resolve(__dirname, "../dist/tailwind-utilities.css");
+
+const REQUIRED_CLASSES = [
+  // Responsive display utilities used by MainNavbar (NavbarLayout) and TitleBar
+  "lg\\:block",
+  "lg\\:flex",
+  "lg\\:hidden",
+  "md\\:block",
+  "md\\:flex",
+  "md\\:hidden",
+  // Responsive breakpoints must exist as @media rules
+  "min-width:1024px",
+  "min-width:768px",
+];
+
+let css;
+try {
+  css = readFileSync(CSS_PATH, "utf8");
+} catch {
+  console.error(`[verify-css-build] ERROR: Could not read ${CSS_PATH}`);
+  console.error("  Run 'npm run build' in appkit/ before publishing.");
+  process.exit(1);
+}
+
+const missing = REQUIRED_CLASSES.filter((cls) => !css.includes(cls));
+
+if (missing.length > 0) {
+  console.error("[verify-css-build] FAIL: Missing critical CSS classes in dist/tailwind-utilities.css:");
+  missing.forEach((cls) => console.error(`  - ${cls}`));
+  console.error("");
+  console.error("  This usually means the Tailwind build ran on stale source files.");
+  console.error("  Fix: rebuild appkit with 'npm run build' and re-verify.");
+  process.exit(1);
+}
+
+console.log(`[verify-css-build] OK: all ${REQUIRED_CLASSES.length} required classes/breakpoints present.`);

package/scripts/verify-entries.mjs

@@ -0,0 +1,55 @@
+#!/usr/bin/env node
+/**
+ * appkit-verify-entries — asserts firebase-admin is not reachable from the client entry.
+ *
+ * Loads dist/client-entry.js in a synthetic browser-like environment and checks
+ * that the module graph does not attempt to require firebase-admin.
+ *
+ * Exits 0 on clean, 1 on failure.
+ */
+
+import { createRequire } from "module";
+import { fileURLToPath } from "url";
+import { join } from "path";
+
+const ROOT = fileURLToPath(new URL("..", import.meta.url));
+const CLIENT_ENTRY = join(ROOT, "dist", "client-entry.js");
+
+// Intercept any attempt to load firebase-admin at the top level
+const intercepted = [];
+const require = createRequire(import.meta.url);
+const originalLoad = require.extensions?.[".js"];
+
+// For ESM we rely on dynamic import with a module mock
+// Simple approach: scan the compiled output for top-level firebase-admin imports
+
+import { readFile } from "fs/promises";
+import { existsSync } from "fs";
+
+if (!existsSync(CLIENT_ENTRY)) {
+  console.log("appkit-verify-entries: dist/client-entry.js not found — run npm run build first.");
+  process.exit(0);
+}
+
+const src = await readFile(CLIENT_ENTRY, "utf8");
+
+// Check for direct firebase-admin imports in the entry (not in a conditional)
+const FORBIDDEN = ["firebase-admin"];
+
+let failed = false;
+for (const pkg of FORBIDDEN) {
+  // Look for import statements (not commented)
+  const importPattern = new RegExp(`^(?!\\s*\\/\\/).*from ['"]${pkg}`, "m");
+  const requirePattern = new RegExp(`require\\(['"]${pkg}`, "m");
+  if (importPattern.test(src) || requirePattern.test(src)) {
+    console.error(`[FAIL] Client entry imports '${pkg}' directly.`);
+    failed = true;
+  }
+}
+
+if (!failed) {
+  console.log("appkit-verify-entries: client entry is firebase-admin free ✓");
+  process.exit(0);
+} else {
+  process.exit(1);
+}

package/tsconfig.base.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "skipLibCheck": true,
+    "strict": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true
+  }
+}