create-app-ui 1.0.0

package/boilerplate/react-base/src/config/user.ts

@@ -0,0 +1,52 @@
+export const CURRENT_USER = {
+  name: "Admin User",
+  email: "admin@company.com",
+  initials: "AU",
+  avatarUrl: "https://ui-avatars.com/api/?name=Admin+User&background=0D8ABC&color=fff&size=128",
+} as const;
+
+export type NotificationItem = {
+  id: string;
+  title: string;
+  description: string;
+  time: string;
+  read: boolean;
+};
+
+export const MOCK_NOTIFICATIONS: NotificationItem[] = [
+  {
+    id: "1",
+    title: "New user registered",
+    description: "Mia Chen joined the workspace as Viewer.",
+    time: "2 min ago",
+    read: false,
+  },
+  {
+    id: "2",
+    title: "Deployment succeeded",
+    description: "Production release v2.4.1 finished without errors.",
+    time: "1 hour ago",
+    read: false,
+  },
+  {
+    id: "3",
+    title: "Storage threshold",
+    description: "Workspace storage is at 82% capacity.",
+    time: "3 hours ago",
+    read: false,
+  },
+  {
+    id: "4",
+    title: "Weekly report ready",
+    description: "Your analytics summary for last week is available.",
+    time: "Yesterday",
+    read: true,
+  },
+  {
+    id: "5",
+    title: "Password updated",
+    description: "Your account password was changed successfully.",
+    time: "2 days ago",
+    read: true,
+  },
+];

package/boilerplate/react-base/src/context/theme-provider.tsx

@@ -0,0 +1,12 @@
+import { createContext, useContext, type ReactNode } from "react";
+import { THEME, type ThemePreset } from "@/config/theme";
+
+const ThemeContext = createContext<ThemePreset>(THEME);
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  return <ThemeContext.Provider value={THEME}>{children}</ThemeContext.Provider>;
+}
+
+export function useTheme(): ThemePreset {
+  return useContext(ThemeContext);
+}

package/boilerplate/react-base/src/features/auth/authSlice.ts

@@ -0,0 +1,19 @@
+/**
+ * Auth feature module — replace with Redux slice, Zustand store, or context as needed.
+ */
+
+export type AuthUser = {
+  id: string;
+  email: string;
+  name: string;
+};
+
+export type AuthState = {
+  user: AuthUser | null;
+  isAuthenticated: boolean;
+};
+
+export const initialAuthState: AuthState = {
+  user: null,
+  isAuthenticated: false,
+};

package/boilerplate/react-base/src/hooks/index.ts

@@ -0,0 +1 @@
+export { useIsMobile } from "./use-mobile";

package/boilerplate/react-base/src/hooks/use-mobile.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
+
+  React.useEffect(() => {
+    const media = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => setIsMobile(media.matches);
+    onChange();
+    media.addEventListener("change", onChange);
+    return () => media.removeEventListener("change", onChange);
+  }, []);
+
+  return !!isMobile;
+}

package/boilerplate/react-base/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/boilerplate/react-base/src/routes/index.tsx

@@ -0,0 +1,7 @@
+import type { RouteObject } from "react-router-dom";
+
+/**
+ * Central route table — templates extend by exporting their own `appRoutes`
+ * or replacing `App.tsx` with inline routes.
+ */
+export const appRoutes: RouteObject[] = [];

package/boilerplate/react-base/src/styles/globals.css

@@ -0,0 +1,15 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Design tokens are injected from src/config/theme.ts — do not add :root variables here. */
+
+html,
+body,
+#root {
+  height: 100%;
+}
+
+body {
+  @apply bg-background text-foreground antialiased;
+}

package/boilerplate/react-base/src/vite-env.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="vite/client" />
+
+declare module "*.svg" {
+  const src: string;
+  export default src;
+}
+
+declare module "*.png" {
+  const src: string;
+  export default src;
+}
+
+declare module "*.jpg" {
+  const src: string;
+  export default src;
+}
+
+declare module "*.jpeg" {
+  const src: string;
+  export default src;
+}
+
+declare module "*.webp" {
+  const src: string;
+  export default src;
+}
+
+declare module "*.gif" {
+  const src: string;
+  export default src;
+}

package/boilerplate/react-base/tailwind.config.ts

@@ -0,0 +1,75 @@
+import type { Config } from "tailwindcss";
+
+export default {
+  darkMode: ["class"],
+  content: ["./index.html", "./src/**/*.{ts,tsx}"],
+  theme: {
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))" },
+        secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))" },
+        muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))" },
+        accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))" },
+        card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))" },
+        popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))" },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        sidebar: {
+          DEFAULT: "hsl(var(--sidebar-background))",
+          foreground: "hsl(var(--sidebar-foreground))",
+          primary: "hsl(var(--sidebar-primary))",
+          "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+          accent: "hsl(var(--sidebar-accent))",
+          "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+          border: "hsl(var(--sidebar-border))",
+          ring: "hsl(var(--sidebar-ring))",
+        },
+        chart: {
+          1: "hsl(var(--chart-1))",
+          2: "hsl(var(--chart-2))",
+          3: "hsl(var(--chart-3))",
+          4: "hsl(var(--chart-4))",
+          5: "hsl(var(--chart-5))",
+        },
+        brand: {
+          DEFAULT: "hsl(var(--brand))",
+          foreground: "hsl(var(--brand-foreground))",
+        },
+        "auth-page": "hsl(var(--auth-page))",
+        "auth-hero": "hsl(var(--auth-hero))",
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+        "caret-blink": {
+          "0%,70%,100%": { opacity: "1" },
+          "20%,50%": { opacity: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+        "caret-blink": "caret-blink 1.25s ease-out infinite",
+      },
+    },
+  },
+  plugins: [],
+} satisfies Config;

package/boilerplate/react-base/tsconfig.app.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": false,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}

package/boilerplate/react-base/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/boilerplate/react-base/tsconfig.node.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": false,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "strict": true,
+    "types": ["node"]
+  },
+  "include": ["vite.config.ts", "tailwind.config.ts"]
+}

package/boilerplate/react-base/vite.config.ts

@@ -0,0 +1,12 @@
+import path from "node:path";
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+});

package/dist/bin/index.js

@@ -0,0 +1,8 @@
+#!/usr/bin/env node
+import chalk from "chalk";
+import { runCli } from "../src/generator.js";
+runCli(process.argv.slice(2)).catch((error) => {
+    const message = error instanceof Error ? error.message : String(error);
+    console.error(chalk.red(`Fatal error: ${message}`));
+    process.exit(1);
+});

package/dist/src/cli-args.js

@@ -0,0 +1,52 @@
+const TEMPLATE_NAMES = ["admin-portal", "blank"];
+export function parseArgv(argv) {
+    const positional = [];
+    let nonInteractive = false;
+    let template;
+    let installDependencies;
+    let initializeGit;
+    let companyName;
+    for (let i = 0; i < argv.length; i += 1) {
+        const arg = argv[i];
+        if (arg === "--yes" || arg === "-y") {
+            nonInteractive = true;
+            continue;
+        }
+        if (arg === "--template" || arg === "-t") {
+            const value = argv[++i];
+            if (value && TEMPLATE_NAMES.includes(value)) {
+                template = value;
+                nonInteractive = true;
+            }
+            continue;
+        }
+        if (arg === "--no-install") {
+            installDependencies = false;
+            nonInteractive = true;
+            continue;
+        }
+        if (arg === "--git") {
+            initializeGit = true;
+            continue;
+        }
+        if (arg === "--no-git") {
+            initializeGit = false;
+            continue;
+        }
+        if (arg === "--company" || arg === "-c") {
+            companyName = argv[++i]?.trim();
+            continue;
+        }
+        if (!arg.startsWith("-")) {
+            positional.push(arg);
+        }
+    }
+    return {
+        positional,
+        nonInteractive,
+        template,
+        installDependencies,
+        initializeGit,
+        companyName,
+    };
+}

package/dist/src/generator.js

@@ -0,0 +1,85 @@
+import path from "node:path";
+import chalk from "chalk";
+import fs from "fs-extra";
+import ora from "ora";
+import { parseArgv } from "./cli-args.js";
+import { askOverwriteConfirmation, askQuestions } from "./prompts.js";
+import { initializeGit, installDependencies } from "./installer.js";
+import { replacePlaceholders } from "./replace-placeholders.js";
+import { resolveBoilerplateDir, resolveTemplateDir } from "./paths.js";
+import { isValidAppName, resolveTargetDir, toTitleCase } from "./utils.js";
+export async function runCli(args) {
+    const parsed = parseArgv(args);
+    const appNameArg = parsed.positional[0]?.trim();
+    if (appNameArg && !isValidAppName(appNameArg)) {
+        throw new Error("Invalid app name. Use a valid npm package name.");
+    }
+    const answers = await askQuestions(appNameArg, parsed);
+    const cwd = process.cwd();
+    const targetDir = resolveTargetDir(cwd, answers.appName);
+    if (await fs.pathExists(targetDir)) {
+        const shouldOverwrite = await askOverwriteConfirmation(answers.appName);
+        if (!shouldOverwrite) {
+            throw new Error("Aborted to avoid overwriting existing directory.");
+        }
+        await fs.emptyDir(targetDir);
+    }
+    else {
+        await fs.ensureDir(targetDir);
+    }
+    const boilerplateDir = resolveBoilerplateDir();
+    const templateDir = resolveTemplateDir(answers.template);
+    if (!(await fs.pathExists(boilerplateDir))) {
+        throw new Error(`Boilerplate not found: ${boilerplateDir}`);
+    }
+    if (!(await fs.pathExists(templateDir))) {
+        throw new Error(`Template not found: ${templateDir}`);
+    }
+    const baseSpinner = ora("Copying shared boilerplate...").start();
+    await fs.copy(boilerplateDir, targetDir, {
+        filter: (src) => !src.includes(`${path.sep}node_modules${path.sep}`),
+    });
+    baseSpinner.succeed("Boilerplate copied.");
+    const templateSpinner = ora(`Applying "${answers.template}" template...`).start();
+    await fs.copy(templateDir, targetDir, {
+        overwrite: true,
+        filter: (src) => {
+            if (src.includes(`${path.sep}node_modules${path.sep}`)) {
+                return false;
+            }
+            // IDE-only overlay config; generated apps keep boilerplate tsconfig.* only.
+            const rel = path.relative(templateDir, src).replace(/\\/g, "/");
+            if (rel === "tsconfig.json" || rel.endsWith("/tsconfig.json")) {
+                return false;
+            }
+            return true;
+        },
+    });
+    templateSpinner.succeed("Template applied.");
+    const title = toTitleCase(answers.appName.split("/").pop() ?? answers.appName);
+    await replacePlaceholders(targetDir, {
+        "__APP_NAME__": answers.appName,
+        "__APP_TITLE__": title,
+        "__COMPANY_NAME__": answers.companyName,
+    });
+    const packageJsonPath = path.join(targetDir, "package.json");
+    const packageJson = await fs.readJson(packageJsonPath);
+    packageJson.name = answers.appName;
+    await fs.writeJson(packageJsonPath, packageJson, { spaces: 2 });
+    if (answers.installDependencies) {
+        const installSpinner = ora("Installing dependencies...").start();
+        await installDependencies(targetDir);
+        installSpinner.succeed("Dependencies installed.");
+    }
+    if (answers.initializeGit) {
+        const gitSpinner = ora("Initializing git repository...").start();
+        await initializeGit(targetDir);
+        gitSpinner.succeed("Git repository initialized.");
+    }
+    console.log(chalk.green("\nSuccess! Your app is ready.\n"));
+    console.log(`Next steps:\n  cd ${answers.appName}`);
+    if (!answers.installDependencies) {
+        console.log("  npm install");
+    }
+    console.log("  npm run dev\n");
+}

package/dist/src/installer.js

@@ -0,0 +1,7 @@
+import { execa } from "execa";
+export async function installDependencies(targetDir) {
+    await execa("npm", ["install"], { cwd: targetDir, stdio: "inherit" });
+}
+export async function initializeGit(targetDir) {
+    await execa("git", ["init"], { cwd: targetDir, stdio: "inherit" });
+}

package/dist/src/paths.js

@@ -0,0 +1,61 @@
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import fs from "fs-extra";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+function findCreateAppUiPackageRoot() {
+    let dir = __dirname;
+    for (let depth = 0; depth < 10; depth += 1) {
+        const packageJsonPath = path.join(dir, "package.json");
+        if (fs.existsSync(packageJsonPath)) {
+            try {
+                const pkg = fs.readJsonSync(packageJsonPath);
+                if (pkg.name === "create-app-ui") {
+                    return dir;
+                }
+            }
+            catch {
+                // ignore invalid package.json
+            }
+        }
+        const parent = path.dirname(dir);
+        if (parent === dir) {
+            break;
+        }
+        dir = parent;
+    }
+    return null;
+}
+/** Resolves the directory that contains `boilerplate/react-base` and `templates/`. */
+export function resolvePlatformRoot() {
+    const packageRoot = findCreateAppUiPackageRoot();
+    const searchRoots = packageRoot
+        ? [packageRoot, path.dirname(packageRoot), path.dirname(path.dirname(packageRoot))]
+        : [__dirname];
+    const seen = new Set();
+    for (const start of searchRoots) {
+        let dir = start;
+        for (let depth = 0; depth < 10; depth += 1) {
+            if (seen.has(dir)) {
+                break;
+            }
+            seen.add(dir);
+            const boilerplate = path.join(dir, "boilerplate", "react-base");
+            if (fs.existsSync(boilerplate)) {
+                return dir;
+            }
+            const parent = path.dirname(dir);
+            if (parent === dir) {
+                break;
+            }
+            dir = parent;
+        }
+    }
+    throw new Error("Could not locate boilerplate/react-base. Reinstall create-app-ui or run from the ui-platform monorepo.");
+}
+export function resolveBoilerplateDir() {
+    return path.resolve(resolvePlatformRoot(), "boilerplate", "react-base");
+}
+export function resolveTemplateDir(templateName) {
+    return path.resolve(resolvePlatformRoot(), "templates", templateName);
+}

package/dist/src/prompts.js

@@ -0,0 +1,79 @@
+import prompts from "prompts";
+import { isValidAppName } from "./utils.js";
+const DEFAULT_COMPANY_NAME = "Omobio";
+export async function askQuestions(initialAppName, parsed) {
+    if (parsed?.nonInteractive) {
+        const appName = (initialAppName ?? parsed.positional[0] ?? "").trim();
+        if (!isValidAppName(appName)) {
+            throw new Error("Non-interactive mode requires a valid app name: create-app-ui <name> --template <admin-portal|blank> -y");
+        }
+        if (!parsed.template) {
+            throw new Error("Non-interactive mode requires --template admin-portal|blank");
+        }
+        return {
+            appName,
+            template: parsed.template,
+            installDependencies: parsed.installDependencies ?? false,
+            initializeGit: parsed.initializeGit ?? false,
+            overwrite: false,
+            companyName: parsed.companyName?.trim() || DEFAULT_COMPANY_NAME,
+        };
+    }
+    const responses = await prompts([
+        {
+            type: initialAppName ? null : "text",
+            name: "appName",
+            message: "Application name (npm package, lowercase, e.g. my-app)",
+            validate: (value) => {
+                const trimmed = value.trim();
+                if (!trimmed) {
+                    return "Name is required.";
+                }
+                if (isValidAppName(trimmed)) {
+                    return true;
+                }
+                return "Use lowercase letters, numbers, and hyphens only (e.g. my-app, acme-portal).";
+            },
+        },
+        {
+            type: "select",
+            name: "template",
+            message: "Select a template",
+            choices: [
+                { title: "admin-portal", value: "admin-portal" },
+                { title: "blank", value: "blank" },
+            ],
+        },
+        {
+            type: "confirm",
+            name: "installDependencies",
+            message: "Install dependencies now?",
+            initial: true,
+        },
+    ], {
+        onCancel: () => {
+            throw new Error("Operation cancelled by user.");
+        },
+    });
+    const appName = (initialAppName ?? responses.appName ?? "").trim();
+    if (!isValidAppName(appName)) {
+        throw new Error("Invalid application name.");
+    }
+    return {
+        appName,
+        template: responses.template,
+        installDependencies: Boolean(responses.installDependencies),
+        initializeGit: parsed?.initializeGit ?? false,
+        overwrite: false,
+        companyName: parsed?.companyName?.trim() || DEFAULT_COMPANY_NAME,
+    };
+}
+export async function askOverwriteConfirmation(appName) {
+    const response = await prompts({
+        type: "confirm",
+        name: "overwrite",
+        message: `Directory "${appName}" already exists. Overwrite?`,
+        initial: false,
+    });
+    return Boolean(response.overwrite);
+}

package/dist/src/replace-placeholders.js

@@ -0,0 +1,22 @@
+import fs from "fs-extra";
+import path from "node:path";
+const BINARY_EXTENSIONS = new Set([".png", ".jpg", ".jpeg", ".gif", ".webp", ".ico", ".woff", ".woff2"]);
+export async function replacePlaceholders(rootDir, replacements) {
+    const entries = await fs.readdir(rootDir);
+    for (const entry of entries) {
+        const absolute = path.join(rootDir, entry);
+        const stats = await fs.stat(absolute);
+        if (stats.isDirectory()) {
+            await replacePlaceholders(absolute, replacements);
+            continue;
+        }
+        if (BINARY_EXTENSIONS.has(path.extname(absolute))) {
+            continue;
+        }
+        const content = await fs.readFile(absolute, "utf8");
+        const next = Object.entries(replacements).reduce((acc, [key, value]) => acc.replaceAll(key, value), content);
+        if (next !== content) {
+            await fs.writeFile(absolute, next, "utf8");
+        }
+    }
+}

package/dist/src/utils.js

@@ -0,0 +1,16 @@
+import path from "node:path";
+const APP_NAME_REGEX = /^(?:@[a-z0-9-~][a-z0-9-._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/;
+export function isValidAppName(name) {
+    return APP_NAME_REGEX.test(name);
+}
+export function toTitleCase(input) {
+    return input
+        .replace(/[-_]/g, " ")
+        .split(" ")
+        .filter(Boolean)
+        .map((part) => part[0].toUpperCase() + part.slice(1))
+        .join(" ");
+}
+export function resolveTargetDir(cwd, appName) {
+    return path.resolve(cwd, appName);
+}