@multiplatform.one/config 6.0.0

package/src/playwright.ts

@@ -0,0 +1,239 @@
+import { defineConfig, devices } from "@playwright/test";
+import type { PlaywrightTestConfig } from "@playwright/test";
+
+export type PlaywrightBrowser =
+  | "chromium"
+  | "firefox"
+  | "webkit"
+  | "mobile-chrome"
+  | "mobile-safari";
+
+export interface CreatePlaywrightConfigOptions {
+  /**
+   * Test directory path. Defaults to "./tests/e2e".
+   */
+  testDir?: string;
+
+  /**
+   * Base URL for tests. Defaults to process.env.BASE_URL || "http://localhost:8000".
+   */
+  baseURL?: string;
+
+  /**
+   * Browsers to test against.
+   * Defaults to ["chromium", "firefox", "webkit", "mobile-chrome", "mobile-safari"].
+   */
+  browsers?: PlaywrightBrowser[];
+
+  /**
+   * Number of retries. Defaults to 2 in CI, 1 locally.
+   */
+  retries?: number;
+
+  /**
+   * Number of parallel workers. Defaults to 1.
+   */
+  workers?: number;
+
+  /**
+   * Global test timeout in ms. Defaults to 60000.
+   */
+  timeout?: number;
+
+  /**
+   * Run tests fully in parallel. Defaults to false.
+   */
+  fullyParallel?: boolean;
+
+  /**
+   * Reporter to use. Defaults to "html".
+   */
+  reporter?: PlaywrightTestConfig["reporter"];
+
+  /**
+   * Run in headless mode. Defaults to true.
+   */
+  headless?: boolean;
+
+  /**
+   * Trace collection strategy. Defaults to "on-first-retry".
+   */
+  trace?:
+    | "on"
+    | "off"
+    | "on-first-retry"
+    | "on-all-retries"
+    | "retain-on-failure"
+    | "retain-on-first-failure";
+
+  /**
+   * Screenshot strategy. Defaults to "only-on-failure".
+   */
+  screenshot?: "on" | "off" | "only-on-failure";
+
+  /**
+   * Navigation timeout in ms. Defaults to 30000.
+   */
+  navigationTimeout?: number;
+
+  /**
+   * Action timeout in ms (clicks, fills, etc). Defaults to 10000.
+   */
+  actionTimeout?: number;
+
+  /**
+   * Forbid test.only in CI. Defaults to true when process.env.CI is set.
+   */
+  forbidOnly?: boolean;
+
+  /**
+   * Web server configuration to start before tests.
+   */
+  webServer?: PlaywrightTestConfig["webServer"];
+
+  /**
+   * Path to a module that is run once before all test files.
+   * Useful for global setup like generating auth tokens.
+   */
+  globalSetup?: string;
+
+  /**
+   * Glob patterns or regexps matching files to ignore.
+   * Defaults to undefined (no ignore).
+   */
+  testIgnore?: PlaywrightTestConfig["testIgnore"];
+
+  /**
+   * Override projects entirely (ignores the browsers option when provided).
+   */
+  projects?: PlaywrightTestConfig["projects"];
+
+  /**
+   * Additional shared use options merged with defaults.
+   */
+  use?: PlaywrightTestConfig["use"];
+}
+
+const chromiumSandboxArgs = ["--no-sandbox", "--disable-setuid-sandbox", "--disable-dev-shm-usage"];
+
+function browserToProject(
+  browser: PlaywrightBrowser,
+): NonNullable<PlaywrightTestConfig["projects"]>[number] {
+  switch (browser) {
+    case "chromium":
+      return {
+        name: "chromium",
+        use: {
+          ...devices["Desktop Chrome"],
+          launchOptions: { args: chromiumSandboxArgs },
+        },
+      };
+    case "firefox":
+      return {
+        name: "firefox",
+        use: {
+          ...devices["Desktop Firefox"],
+          launchOptions: { args: chromiumSandboxArgs },
+        },
+      };
+    case "webkit":
+      return {
+        name: "webkit",
+        use: { ...devices["Desktop Safari"] },
+      };
+    case "mobile-chrome":
+      return {
+        name: "Mobile Chrome",
+        use: {
+          ...devices["Pixel 5"],
+          launchOptions: { args: chromiumSandboxArgs },
+        },
+      };
+    case "mobile-safari":
+      return {
+        name: "Mobile Safari",
+        use: { ...devices["iPhone 12"] },
+      };
+  }
+}
+
+/**
+ * Creates a shared Playwright configuration for multiplatform.one apps.
+ *
+ * This abstracts away the boilerplate multi-browser Playwright config,
+ * providing sensible defaults for CI/local environments, browser projects,
+ * timeouts, and trace/screenshot settings.
+ *
+ * @example
+ * ```ts
+ * // apps/one/playwright.config.ts
+ * import { createPlaywrightConfig } from "@multiplatform.one/config/playwright";
+ *
+ * export default createPlaywrightConfig();
+ * ```
+ *
+ * @example
+ * ```ts
+ * // Custom configuration
+ * import { createPlaywrightConfig } from "@multiplatform.one/config/playwright";
+ *
+ * export default createPlaywrightConfig({
+ *   testDir: "./tests",
+ *   browsers: ["chromium", "firefox"],
+ *   webServer: {
+ *     command: "pnpm dev --port 3000",
+ *     url: "http://localhost:3000",
+ *     reuseExistingServer: true,
+ *   },
+ * });
+ * ```
+ */
+export function createPlaywrightConfig(
+  options: CreatePlaywrightConfigOptions = {},
+): PlaywrightTestConfig {
+  const isCI = !!process.env.CI;
+  const {
+    testDir = "./tests/e2e",
+    baseURL = process.env.BASE_URL || "http://localhost:8000",
+    browsers = ["chromium", "firefox", "webkit", "mobile-chrome", "mobile-safari"],
+    retries = isCI ? 2 : 1,
+    workers = 1,
+    timeout = 60000,
+    fullyParallel = false,
+    reporter = "html",
+    headless = true,
+    trace = "on-first-retry",
+    screenshot = "only-on-failure",
+    navigationTimeout = 30000,
+    actionTimeout = 10000,
+    forbidOnly = isCI,
+    webServer,
+    globalSetup,
+    testIgnore,
+    projects,
+    use,
+  } = options;
+
+  return defineConfig({
+    testDir,
+    fullyParallel,
+    forbidOnly,
+    retries,
+    workers,
+    reporter,
+    timeout,
+    use: {
+      baseURL,
+      trace,
+      screenshot,
+      navigationTimeout,
+      actionTimeout,
+      headless,
+      ...use,
+    },
+    projects: projects ?? browsers.map(browserToProject),
+    ...(webServer ? { webServer } : {}),
+    ...(globalSetup ? { globalSetup } : {}),
+    ...(testIgnore ? { testIgnore } : {}),
+  });
+}

package/src/reactNative.config.cjs

@@ -0,0 +1,5 @@
+"use strict";
+
+module.exports = {
+  commands: [...require("vxrn/react-native-commands")],
+};

package/src/storybook.ts

@@ -0,0 +1,318 @@
+import fs from "node:fs";
+import path from "node:path";
+import type { Plugin, UserConfig } from "vite";
+import { discoverPublicPackageRoots, resolvePackageMainSource } from "./workspacePublicPackages.js";
+
+export interface CreateStorybookViteConfigOptions {
+  /**
+   * Absolute path to the monorepo workspace root.
+   * Auto-detected by walking up from cwd looking for pnpm-workspace.yaml.
+   */
+  workspaceRoot?: string;
+
+  /**
+   * Additional resolve aliases merged after auto-discovered ones.
+   * Use this for packages outside the standard workspace structure.
+   */
+  aliases?: Record<string, string>;
+
+  /**
+   * Additional Vite plugins appended after the built-in React plugin.
+   */
+  plugins?: UserConfig["plugins"];
+
+  /**
+   * Additional Vite define values merged with the defaults.
+   */
+  define?: UserConfig["define"];
+}
+
+/**
+ * Creates a Vite configuration for Storybook in the multiplatform.one monorepo.
+ *
+ * Auto-discovers packages/ entries (multiplatform.one, package, and root
+ * multiplatform.one scopes) and every workspace package under public/ with a
+ * package.json name (including other scopes such as bitspur). Aliases point at
+ * TypeScript source; sub-path exports come from each package exports field.
+ *
+ * Includes React plugin, node:async_hooks stub, and Storybook optimizeDeps.
+ *
+ * @example
+ * ```ts
+ * // apps/storybook/vite.config.ts
+ * import { createStorybookViteConfig } from "@multiplatform.one/config/storybook";
+ *
+ * export default createStorybookViteConfig();
+ * ```
+ */
+export function createStorybookViteConfig(
+  options: CreateStorybookViteConfigOptions = {},
+): UserConfig {
+  const workspaceRoot = options.workspaceRoot || findWorkspaceRoot();
+  const packagesDir = path.join(workspaceRoot, "packages");
+
+  const aliases = {
+    ...discoverPackageAliases(packagesDir),
+    ...discoverPublicPackageViteAliases(workspaceRoot),
+  };
+
+  if (options.aliases) {
+    Object.assign(aliases, options.aliases);
+  }
+
+  // Sort by key length descending so more-specific aliases match first
+  const sortedAliases: Record<string, string> = {};
+  for (const key of Object.keys(aliases).sort((a, b) => b.length - a.length)) {
+    sortedAliases[key] = aliases[key];
+  }
+
+  return {
+    define: {
+      "process.env.VITE_ENVIRONMENT": JSON.stringify("client"),
+      ...options.define,
+    },
+    resolve: {
+      // Do NOT add "source" here. Workspace packages are already mapped to
+      // their TypeScript source via resolve.alias. Adding "source" to the
+      // global conditions causes third-party packages like @react-navigation/*
+      // (which also have a "source" export condition pointing to .tsx files)
+      // to resolve to TypeScript. Vite's dep optimizer cannot pre-bundle .tsx
+      // files and logs "Cannot optimize dependency", leaving their CJS
+      // transitive deps (color, query-string, etc.) to be served raw,
+      // causing "require is not defined" / missing-export errors in the browser.
+      //
+      // "default" must be included: Rolldown 8 strictly enforces exports fields
+      // and requires "default" in the conditions list to resolve unconditional
+      // (plain-string) sub-path exports, e.g. @react-navigation/core's
+      // "./lib/module/EnsureSingleNavigator" entry.
+      conditions: ["default"],
+      extensions: [
+        ".storybook.ts",
+        ".storybook.tsx",
+        ".storybook.js",
+        ".storybook.jsx",
+        ".web.ts",
+        ".web.tsx",
+        ".web.js",
+        ".web.jsx",
+        ".ts",
+        ".tsx",
+        ".js",
+        ".jsx",
+        ".mjs",
+        ".json",
+      ],
+      alias: sortedAliases,
+    },
+    optimizeDeps: {
+      include: [
+        // Force dedup — these have ESM exports but must share a single instance
+        "react",
+        "react-dom",
+        "react-native-web",
+        "@tamagui/core",
+        "@tamagui/web",
+        "@tamagui/helpers-icon",
+        "tamagui",
+        "@mdx-js/react",
+        "i18next",
+        "react-i18next",
+        "@storybook-community/storybook-dark-mode",
+        // Packages with broken ESM wrappers — advertise "import" condition but
+        // the .mjs entry just re-imports a CJS file, or are ESM-only with no
+        // default export, so Vite must pre-bundle them for interop
+        "use-latest-callback",
+        "escape-string-regexp",
+        // Pure CJS with no "import" condition — must be pre-bundled so Rolldown
+        // generates ESM wrappers with synthetic named exports.
+        "use-sync-external-store",
+        "use-sync-external-store/with-selector",
+        "fast-deep-equal",
+        "color",
+        // query-string v7 is CJS-only (require/exports), pulled in by
+        // @react-navigation/core for URL parsing. Unlike the One app which
+        // aliases it to @vxrn/query-string (ESM), Storybook has no such alias.
+        "query-string",
+        "react-is",
+      ],
+      // Rolldown rc.10+ enforces exports fields strictly — @react-navigation/core has
+      // internal files (EnsureSingleNavigator etc.) not listed in its exports map,
+      // causing dep pre-bundle to crash. Exclude the nav packages from pre-bundling;
+      // their CJS transitive deps (color, use-sync-external-store, fast-deep-equal)
+      // are already explicitly in include above so they are still pre-bundled.
+      exclude: [
+        "one/dist/esm/vite/one-server-only.mjs",
+        "@storybook/preview-api",
+        "@storybook/theming",
+        "@react-navigation/core",
+        "@react-navigation/native",
+        "@react-navigation/routers",
+        "@react-navigation/elements",
+        "@react-navigation/bottom-tabs",
+        "@react-navigation/native-stack",
+      ],
+    },
+    plugins: [nodeAsyncHooksStub(), ...(options.plugins || [])],
+  };
+}
+
+/**
+ * Scans packages/ for workspace packages (multiplatform.one and package scopes)
+ * and returns resolve aliases.
+ */
+function discoverPackageAliases(packagesDir: string): Record<string, string> {
+  const aliases: Record<string, string> = {};
+
+  if (!fs.existsSync(packagesDir)) return aliases;
+
+  const entries = fs.readdirSync(packagesDir, { withFileTypes: true });
+
+  for (const entry of entries) {
+    if (!entry.isDirectory()) continue;
+
+    const pkgDir = path.join(packagesDir, entry.name);
+    const pkgJsonPath = path.join(pkgDir, "package.json");
+
+    if (!fs.existsSync(pkgJsonPath)) continue;
+
+    let pkgJson: { name?: string; exports?: Record<string, unknown> };
+    try {
+      pkgJson = JSON.parse(fs.readFileSync(pkgJsonPath, "utf-8"));
+    } catch {
+      continue;
+    }
+
+    const pkgName = pkgJson.name;
+    if (!pkgName) continue;
+    if (
+      !pkgName.startsWith("@multiplatform.one/") &&
+      !pkgName.startsWith("@package/") &&
+      pkgName !== "multiplatform.one"
+    )
+      continue;
+
+    mergePackageResolveAliases(pkgDir, pkgName, pkgJson, aliases);
+  }
+
+  return aliases;
+}
+
+/** All workspace packages under public/ (any npm scope), including export subpaths. */
+function discoverPublicPackageViteAliases(workspaceRoot: string): Record<string, string> {
+  const aliases: Record<string, string> = {};
+  for (const [pkgName, pkgDir] of discoverPublicPackageRoots(workspaceRoot)) {
+    const pkgJsonPath = path.join(pkgDir, "package.json");
+    let pkgJson: { name?: string; exports?: Record<string, unknown> };
+    try {
+      pkgJson = JSON.parse(fs.readFileSync(pkgJsonPath, "utf-8"));
+    } catch {
+      continue;
+    }
+    mergePackageResolveAliases(pkgDir, pkgName, pkgJson, aliases);
+  }
+  return aliases;
+}
+
+function mergePackageResolveAliases(
+  pkgDir: string,
+  pkgName: string,
+  pkgJson: { exports?: Record<string, unknown> },
+  aliases: Record<string, string>,
+) {
+  const mainEntry = resolvePackageMainSource(pkgDir);
+  if (mainEntry) {
+    aliases[pkgName] = mainEntry;
+  }
+
+  if (pkgJson.exports && typeof pkgJson.exports === "object") {
+    for (const exportKey of Object.keys(pkgJson.exports)) {
+      if (exportKey === "." || exportKey === "./package.json") continue;
+
+      const subpath = exportKey.replace(/^\.\//, "");
+      const ext = path.extname(subpath);
+
+      if (ext) {
+        const parentDir = path.dirname(subpath);
+        if (parentDir && parentDir !== ".") {
+          const fullParentDir = path.join(pkgDir, parentDir);
+          if (fs.existsSync(fullParentDir) && fs.statSync(fullParentDir).isDirectory()) {
+            aliases[`${pkgName}/${parentDir}`] = fullParentDir;
+          }
+        }
+      } else {
+        const resolved = resolveSubpathSource(pkgDir, subpath);
+        if (resolved) {
+          aliases[`${pkgName}/${subpath}`] = resolved;
+        }
+      }
+    }
+  }
+}
+
+function resolveSubpathSource(pkgDir: string, subpath: string): string | undefined {
+  const candidates = [
+    path.join(pkgDir, "src", `${subpath}.storybook.ts`),
+    path.join(pkgDir, "src", `${subpath}.storybook.tsx`),
+    path.join(pkgDir, "src", `${subpath}.ts`),
+    path.join(pkgDir, "src", `${subpath}.tsx`),
+    path.join(pkgDir, "src", subpath, "index.storybook.ts"),
+    path.join(pkgDir, "src", subpath, "index.storybook.tsx"),
+    path.join(pkgDir, "src", subpath, "index.ts"),
+    path.join(pkgDir, "src", subpath, "index.tsx"),
+    path.join(pkgDir, `${subpath}.storybook.ts`),
+    path.join(pkgDir, `${subpath}.storybook.tsx`),
+    path.join(pkgDir, `${subpath}.ts`),
+    path.join(pkgDir, `${subpath}.tsx`),
+    path.join(pkgDir, subpath, "index.storybook.ts"),
+    path.join(pkgDir, subpath, "index.storybook.tsx"),
+    path.join(pkgDir, subpath, "index.ts"),
+    path.join(pkgDir, subpath, "index.tsx"),
+    path.join(pkgDir, subpath, "index.js"),
+  ];
+
+  for (const c of candidates) {
+    if (fs.existsSync(c)) return c;
+  }
+
+  const dirPath = path.join(pkgDir, subpath);
+  if (fs.existsSync(dirPath) && fs.statSync(dirPath).isDirectory()) {
+    return dirPath;
+  }
+
+  return undefined;
+}
+
+/** Virtual module plugin that stubs `node:async_hooks` for browser environments. */
+function nodeAsyncHooksStub(): Plugin {
+  return {
+    name: "storybook:node-async-hooks-stub",
+    resolveId(id) {
+      if (id === "node:async_hooks") return "\0node:async_hooks";
+    },
+    load(id) {
+      if (id === "\0node:async_hooks") {
+        return "export class AsyncLocalStorage {}";
+      }
+    },
+  };
+}
+
+function findWorkspaceRoot(): string {
+  let dir = process.cwd();
+  while (dir !== path.dirname(dir)) {
+    if (fs.existsSync(path.join(dir, "pnpm-workspace.yaml"))) {
+      return dir;
+    }
+    const pkgJsonPath = path.join(dir, "package.json");
+    if (fs.existsSync(pkgJsonPath)) {
+      try {
+        const pkgJson = JSON.parse(fs.readFileSync(pkgJsonPath, "utf-8"));
+        if (pkgJson.workspaces) return dir;
+      } catch {
+        // ignore parse errors
+      }
+    }
+    dir = path.dirname(dir);
+  }
+  return process.cwd();
+}