@mostrom/app-shell 0.1.1 → 0.1.3

package/src/vite.js

@@ -1,11 +1,15 @@
 import fs from "node:fs";
 import path from "node:path";
+import { fileURLToPath } from "node:url";
 
 /**
  * Returns the monorepo root directory (platform/).
  * @param {string} currentDir
  * @returns {string}
  */
+const APP_SHELL_SRC_DIR = path.dirname(fileURLToPath(import.meta.url));
+const APP_SHELL_PACKAGE_DIR = path.resolve(APP_SHELL_SRC_DIR, "..");
+
 function getMonorepoRoot(currentDir) {
   let dir = currentDir;
   while (dir !== "/") {
@@ -97,11 +101,45 @@ function ssrCssStubPlugin() {
  * });
  */
 export function getSharedViteConfig(appDir) {
+  const installedAppShellSrc = path.resolve(appDir, "node_modules/@platform/app-shell/src");
+  const resolvedAppShellSrc = fs.existsSync(installedAppShellSrc) ? installedAppShellSrc : APP_SHELL_SRC_DIR;
+
+  // NPM-first shared config: keep only essential aliases/SSR handling.
+  return {
+    plugins: [ssrCssStubPlugin()],
+    resolve: {
+      preserveSymlinks: true,
+      alias: [
+        {
+          find: /^@\/(.*)$/,
+          replacement: `${resolvedAppShellSrc}/$1`,
+        },
+      ],
+      dedupe: ["react", "react-dom"],
+    },
+    ssr: {
+      external: [
+        /^react(\/.*)?$/,
+        /^react-dom(\/.*)?$/,
+        /^katex\/dist\/.*\.css$/,
+      ],
+      noExternal: [
+        /^@platform\/app-shell/,
+        /^@platform\/service-catalog/,
+        /^@copilotkit\//,
+        /^@copilotkitnext\//,
+        /^streamdown/,
+        /^rehype-katex/,
+        /^katex$/,
+      ],
+    },
+  };
+
   const monorepoRoot = getMonorepoRoot(appDir);
   const appNodeModules = path.resolve(appDir, "node_modules");
-  const sharedPackages = path.resolve(monorepoRoot, "shared/packages");
-  const appShellSrc = path.resolve(sharedPackages, "app-shell/src");
-  const appShellNodeModules = path.resolve(sharedPackages, "app-shell/node_modules");
+  const appShellSrc = APP_SHELL_SRC_DIR;
+  const packageNodeModules = path.resolve(APP_SHELL_PACKAGE_DIR, "node_modules");
+  const appShellNodeModules = fs.existsSync(packageNodeModules) ? packageNodeModules : appNodeModules;
   const appHasDndKit = fs.existsSync(path.resolve(appNodeModules, "@dnd-kit/core"));
   const dndKitNodeModules = appHasDndKit ? appNodeModules : appShellNodeModules;
 
@@ -111,10 +149,6 @@ export function getSharedViteConfig(appDir) {
       preserveSymlinks: true,
       alias: [
         // Source aliases for HMR during development
-        {
-          find: /^@platform\/service-catalog(\/.*)?$/,
-          replacement: `${path.resolve(sharedPackages, "service-catalog/src")}$1`,
-        },
         {
           find: /^@platform\/app-shell(\/.*)?$/,
           replacement: `${appShellSrc}$1`,
@@ -206,7 +240,6 @@ export function getSharedViteConfig(appDir) {
         /^katex\/dist\/.*\.css$/,
       ],
       noExternal: [
-        /^@cloudscape-design\//,
         /^@radix-ui\//,
         /^@base-ui\//,
         /^radix-ui/,

package/bin/init.js

@@ -1,269 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * @platform/app-shell init
- *
- * Sets up a new app to use the app-shell package correctly.
- * Similar to `shadcn init` but configured for our monorepo structure.
- *
- * Usage (from your app's frontend directory):
- *   node ../../../shared/packages/app-shell/bin/init.js
- *   node ../../../shared/packages/app-shell/bin/init.js --force
- *
- * Note: npx/bunx won't work - this is a private monorepo package, not published to npm.
- *
- * What it does:
- *   1. Creates minimal app/tailwind.css (delegates to app-shell)
- *   2. Creates components.json (shadcn/ui configuration)
- *   3. Creates app/lib/utils.ts (cn utility + getBasePathHref)
- *   4. Creates tailwind.config.ts
- *   5. Validates vite.config.ts uses getSharedViteConfig()
- */
-
-import fs from "node:fs";
-import path from "node:path";
-import { fileURLToPath } from "node:url";
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-const cwd = process.cwd();
-
-// ANSI colors
-const green = (s) => `\x1b[32m${s}\x1b[0m`;
-const yellow = (s) => `\x1b[33m${s}\x1b[0m`;
-const red = (s) => `\x1b[31m${s}\x1b[0m`;
-const cyan = (s) => `\x1b[36m${s}\x1b[0m`;
-const dim = (s) => `\x1b[2m${s}\x1b[0m`;
-
-console.log();
-console.log(cyan("@platform/app-shell init"));
-console.log(dim("Setting up app-shell configuration..."));
-console.log();
-
-// Templates
-const TAILWIND_CSS = `@import "https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;600;700&display=swap";
-@import "tw-animate-css";
-@import "tailwindcss";
-@import "@platform/app-shell/styles.css";
-@config "../tailwind.config.ts";
-`;
-
-// Compute relative path to app-shell from current directory
-function getAppShellRelativePath() {
-  // The init script is at app-shell/bin/init.js
-  // So app-shell src is at ../src relative to this script
-  const appShellSrc = path.resolve(__dirname, "../src");
-  const relativePath = path.relative(cwd, appShellSrc);
-  return relativePath.replace(/\\/g, "/"); // Normalize for all platforms
-}
-
-const appShellPath = getAppShellRelativePath();
-
-const TAILWIND_CONFIG = `export default {
-  darkMode: "class",
-  content: [
-    "./app/**/*.{ts,tsx,js,jsx}",
-    // Include app-shell components for Tailwind to scan
-    "${appShellPath}/**/*.{ts,tsx}",
-  ],
-};
-`;
-
-const COMPONENTS_JSON = `{
-  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "new-york",
-  "rsc": false,
-  "tsx": true,
-  "tailwind": {
-    "config": "tailwind.config.ts",
-    "css": "app/tailwind.css",
-    "baseColor": "neutral",
-    "cssVariables": true,
-    "prefix": ""
-  },
-  "iconLibrary": "lucide",
-  "rtl": false,
-  "aliases": {
-    "components": "~/components",
-    "utils": "~/lib/utils",
-    "ui": "~/components/ui",
-    "lib": "~/lib",
-    "hooks": "~/hooks"
-  },
-  "registries": {}
-}
-`;
-
-const UTILS_TS = `import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}
-
-/**
- * Returns a path with the VITE_BASE_PATH prefix for use in href attributes.
- * React Router's navigate() handles basename automatically, but href attributes
- * on Cloudscape Link components (or native <a> tags) do not.
- *
- * @param path - The relative path (e.g., "/clients/123" or "/scheduling/abc")
- * @returns The path prefixed with the base path (e.g., "/client-management/clients/123")
- */
-export function getBasePathHref(path: string): string {
-  const configuredBasePath = import.meta.env.VITE_BASE_PATH;
-  if (typeof configuredBasePath !== "string") {
-    throw new Error("VITE_BASE_PATH must be defined");
-  }
-  const basePath = configuredBasePath.replace(/\\/$/, "");
-  const normalizedPath = path.startsWith("/") ? path : \`/\${path}\`;
-  if (basePath === "" || basePath === "/") {
-    return normalizedPath;
-  }
-  return \`\${basePath}\${normalizedPath}\`;
-}
-`;
-
-// Helper functions
-function ensureDir(dir) {
-  if (!fs.existsSync(dir)) {
-    fs.mkdirSync(dir, { recursive: true });
-  }
-}
-
-function writeFile(filePath, content, overwrite = false) {
-  const relativePath = path.relative(cwd, filePath);
-
-  if (fs.existsSync(filePath) && !overwrite) {
-    // Check if content is different
-    const existing = fs.readFileSync(filePath, "utf-8");
-    if (existing === content) {
-      console.log(dim(`  ${relativePath} (unchanged)`));
-      return false;
-    }
-    console.log(yellow(`  ${relativePath} (exists, skipping - use --force to overwrite)`));
-    return false;
-  }
-
-  fs.writeFileSync(filePath, content);
-  console.log(green(`  ${relativePath}`));
-  return true;
-}
-
-function checkViteConfig() {
-  const viteConfigPath = path.join(cwd, "vite.config.ts");
-  if (!fs.existsSync(viteConfigPath)) {
-    console.log(yellow("  vite.config.ts not found - skipping validation"));
-    return;
-  }
-
-  const content = fs.readFileSync(viteConfigPath, "utf-8");
-
-  if (!content.includes("getSharedViteConfig")) {
-    console.log();
-    console.log(yellow("Warning: vite.config.ts does not use getSharedViteConfig()"));
-    console.log(dim("Consider updating it to use the shared config:"));
-    console.log();
-    console.log(dim(`  import { getSharedViteConfig } from "@platform/app-shell/vite";`));
-    console.log(dim(`  import { mergeConfig } from "vite";`));
-    console.log();
-    console.log(dim(`  export default defineConfig(({ mode }) => {`));
-    console.log(dim(`    const shared = getSharedViteConfig(__dirname);`));
-    console.log(dim(`    return mergeConfig(shared, { /* app-specific config */ });`));
-    console.log(dim(`  });`));
-  } else {
-    console.log(green("  vite.config.ts uses getSharedViteConfig()"));
-  }
-}
-
-function checkConflictingCss() {
-  // Check for app.css or other CSS files that might conflict with app-shell
-  const conflictingFiles = ["app/app.css", "app/global.css", "app/globals.css"];
-  const found = [];
-
-  for (const file of conflictingFiles) {
-    const filePath = path.join(cwd, file);
-    if (fs.existsSync(filePath)) {
-      const content = fs.readFileSync(filePath, "utf-8");
-      // Check if it has html/body/root blocks with hardcoded colors
-      // These patterns specifically target global style overrides
-      const hasGlobalColorOverride =
-        /(?:html|body|\:root)\s*\{[^}]*(?:background-color|background|color)\s*:/i.test(content);
-
-      if (hasGlobalColorOverride) {
-        found.push(file);
-      }
-    }
-  }
-
-  if (found.length > 0) {
-    console.log();
-    console.log(yellow("Warning: Found CSS files that may conflict with app-shell:"));
-    for (const file of found) {
-      console.log(red(`  ${file}`));
-    }
-    console.log(dim("These files have html/body/:root blocks with hardcoded colors."));
-    console.log(dim("Remove these blocks and rely on app-shell/styles.css for theming."));
-  } else {
-    console.log(green("  No conflicting CSS files found"));
-  }
-}
-
-// Check for --force flag
-const force = process.argv.includes("--force") || process.argv.includes("-f");
-
-// Preflight checks
-console.log("Preflight checks:");
-
-// Check if we're in a frontend directory
-const packageJsonPath = path.join(cwd, "package.json");
-if (!fs.existsSync(packageJsonPath)) {
-  console.log(red("  package.json not found"));
-  console.log(dim("  Run this command from your frontend directory"));
-  process.exit(1);
-}
-console.log(green("  Found package.json"));
-
-// Check for app directory (React Router convention)
-const appDir = path.join(cwd, "app");
-if (!fs.existsSync(appDir)) {
-  console.log(yellow("  app/ directory not found - will create it"));
-}
-console.log(green("  Found app/ directory"));
-
-// Check for @platform/app-shell dependency
-const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, "utf-8"));
-const hasAppShell = packageJson.dependencies?.["@platform/app-shell"] ||
-                    packageJson.devDependencies?.["@platform/app-shell"];
-if (!hasAppShell) {
-  console.log(yellow("  @platform/app-shell not in dependencies"));
-  console.log(dim("  Add it: \"@platform/app-shell\": \"file:../../../shared/packages/app-shell\""));
-} else {
-  console.log(green("  Found @platform/app-shell dependency"));
-}
-
-console.log();
-console.log("Creating files:");
-
-// Ensure directories exist
-ensureDir(path.join(cwd, "app"));
-ensureDir(path.join(cwd, "app/lib"));
-
-// Create files
-writeFile(path.join(cwd, "app/tailwind.css"), TAILWIND_CSS, force);
-writeFile(path.join(cwd, "tailwind.config.ts"), TAILWIND_CONFIG, force);
-writeFile(path.join(cwd, "components.json"), COMPONENTS_JSON, force);
-writeFile(path.join(cwd, "app/lib/utils.ts"), UTILS_TS, force);
-
-console.log();
-console.log("Validating configuration:");
-checkViteConfig();
-checkConflictingCss();
-
-console.log();
-console.log(green("Done!"));
-console.log();
-console.log("Next steps:");
-console.log(dim("  1. Run 'bun install' to install dependencies"));
-console.log(dim("  2. Import '@platform/app-shell' in your layout component"));
-console.log(dim("  3. Run 'bun run dev' to start the dev server"));
-console.log();