rpr-cli 0.1.1__py3-none-any.whl

rpr/commands/generate/ui.py

@@ -0,0 +1,414 @@
+from __future__ import annotations
+
+import json
+from pathlib import Path
+from typing import Annotated
+
+import typer
+from rich.console import Console
+
+from rpr.cli import generate_app
+from rpr.context import RunContext
+from rpr.workspace import ensure_npm_workspaces, write_package_json
+
+console = Console()
+
+_UI_LIBRARY_DEPENDENCIES = {
+    "@mui/material": "^6",
+    "@emotion/react": "^11",
+    "@emotion/styled": "^11",
+    "@tanstack/react-query": "^5",
+    "@tanstack/react-router": "^1",
+    "react": "^19",
+    "react-dom": "^19",
+}
+_UI_LIBRARY_DEV_DEPENDENCIES = {
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "typescript": "^5",
+    "vite": "^6",
+    "vitest": "^3",
+}
+_WEB_APP_DEV_DEPENDENCIES = {
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@vitejs/plugin-react": "^4",
+    "typescript": "^5",
+    "vite": "^6",
+    "vitest": "^3",
+}
+
+
+def _web_app_dependencies(ui_pkg_name: str) -> dict[str, str]:
+    return {
+        f"@repo/{ui_pkg_name}": "workspace:*",
+        "react": "^19",
+        "react-dom": "^19",
+    }
+
+
+@generate_app.command()
+def ui(
+    name: Annotated[
+        str | None, typer.Argument(help="App name (used as package prefix).")
+    ] = None,
+    dry_run: Annotated[
+        bool, typer.Option("--dry-run", help="Preview changes without writing.")
+    ] = False,
+    include_library: Annotated[
+        bool,
+        typer.Option(
+            "--library/--no-library",
+            help="Generate the reusable UI library.",
+        ),
+    ] = True,
+    include_web: Annotated[
+        bool,
+        typer.Option(
+            "--web/--no-web",
+            help="Generate the thin web app shell.",
+        ),
+    ] = True,
+) -> None:
+    """Scaffold a React UI library and slim frontend app."""
+    if not name:
+        name = typer.prompt("App name")
+    if not include_library and not include_web:
+        raise typer.BadParameter("At least one of --library or --web must be enabled.")
+
+    ctx = RunContext(dry_run=dry_run, project_dir=Path.cwd())
+    ui_pkg_name = f"{name}-ui"
+    app_name = f"{name}-web"
+
+    generated_parts = []
+    if include_library:
+        generated_parts.append(ui_pkg_name)
+    if include_web:
+        generated_parts.append(app_name)
+
+    console.print(
+        f"\n[bold]Generating frontend projects:[/] {' + '.join(generated_parts)}\n"
+    )
+
+    ensure_npm_workspaces(ctx, package_name=ctx.project_dir.name)
+    if include_library:
+        _scaffold_ui_library(ctx, ui_pkg_name)
+    if include_web:
+        _scaffold_frontend_app(ctx, app_name, ui_pkg_name)
+
+    if include_library:
+        ctx.preview_dependencies(
+            manager="npm",
+            target=f"packages/node/{ui_pkg_name}",
+            runtime=list(_UI_LIBRARY_DEPENDENCIES),
+            dev=list(_UI_LIBRARY_DEV_DEPENDENCIES),
+        )
+    if include_web:
+        ctx.preview_dependencies(
+            manager="npm",
+            target=f"apps/{app_name}",
+            runtime=list(_web_app_dependencies(ui_pkg_name)),
+            dev=list(_WEB_APP_DEV_DEPENDENCIES),
+        )
+
+    if not dry_run:
+        ctx.run_command(["npm", "install"], cwd=ctx.project_dir)
+
+    console.print("\n[bold green]Done![/] Frontend scaffolding created.")
+    if include_web:
+        console.print(f"  Run with: npx nx serve {app_name}")
+    if include_library:
+        console.print("  Optional templates: rpr add template fetch_service")
+        console.print("                      rpr add template sticky_navigation")
+
+
+def _scaffold_ui_library(ctx: RunContext, ui_pkg_name: str) -> None:
+    lib_root = ctx.project_dir / "packages" / "node" / ui_pkg_name
+    src = lib_root / "src"
+
+    for d in ["hooks", "components", "services/base", "state"]:
+        ctx.ensure_dir(src / d)
+
+    _write_ui_package_json(ctx, lib_root, ui_pkg_name)
+    _write_ui_project_json(ctx, lib_root, ui_pkg_name)
+    _write_ui_tsconfig(ctx, lib_root)
+    _write_ui_eslint_config(ctx, lib_root)
+    ctx.write_file(src / "index.ts", f'export const uiPackageName = "{ui_pkg_name}";\n')
+    _write_ui_test(ctx, src / "index.test.ts", ui_pkg_name)
+    ctx.write_file(src / "hooks" / ".gitkeep", "")
+    ctx.write_file(src / "components" / ".gitkeep", "")
+    ctx.write_file(src / "state" / ".gitkeep", "")
+    ctx.write_file(src / "services" / "base" / ".gitkeep", "")
+
+
+def _scaffold_frontend_app(ctx: RunContext, app_name: str, ui_pkg_name: str) -> None:
+    app_root = ctx.project_dir / "apps" / app_name
+    src = app_root / "src"
+
+    ctx.ensure_dir(src)
+
+    _write_app_package_json(ctx, app_root, app_name, ui_pkg_name)
+    _write_app_project_json(ctx, app_root, app_name)
+    _write_app_tsconfig(ctx, app_root)
+    _write_app_eslint_config(ctx, app_root)
+    _write_app_index_html(ctx, app_root, app_name)
+    _write_app_main_tsx(ctx, src)
+    _write_app_tsx(ctx, src, app_name, ui_pkg_name)
+    _write_app_test(ctx, src / "App.test.ts", app_name)
+    _write_vite_config(ctx, app_root, app_name)
+
+
+def _write_ui_package_json(ctx: RunContext, lib_root: Path, ui_pkg_name: str) -> None:
+    write_package_json(
+        ctx,
+        lib_root / "package.json",
+        defaults={
+            "name": f"@repo/{ui_pkg_name}",
+            "version": "0.1.0",
+            "private": True,
+            "main": "src/index.ts",
+            "types": "src/index.ts",
+        },
+        dependencies=_UI_LIBRARY_DEPENDENCIES,
+        dev_dependencies=_UI_LIBRARY_DEV_DEPENDENCIES,
+    )
+
+
+def _write_ui_project_json(ctx: RunContext, lib_root: Path, ui_pkg_name: str) -> None:
+    project = {
+        "name": ui_pkg_name,
+        "root": f"packages/node/{ui_pkg_name}",
+        "targets": {
+            "build": {
+                "executor": "nx:run-commands",
+                "options": {
+                    "command": "npx tsc -p tsconfig.json",
+                    "cwd": f"packages/node/{ui_pkg_name}",
+                },
+            },
+            "lint": {
+                "executor": "nx:run-commands",
+                "options": {
+                    "command": "npx eslint .",
+                    "cwd": f"packages/node/{ui_pkg_name}",
+                },
+            },
+            "test": {
+                "executor": "nx:run-commands",
+                "options": {
+                    "command": "npx vitest run",
+                    "cwd": f"packages/node/{ui_pkg_name}",
+                },
+            },
+            "typecheck": {
+                "executor": "nx:run-commands",
+                "options": {
+                    "command": "npx tsc --noEmit",
+                    "cwd": f"packages/node/{ui_pkg_name}",
+                },
+            },
+        },
+    }
+    ctx.write_file(lib_root / "project.json", json.dumps(project, indent=2) + "\n")
+
+
+def _write_ui_tsconfig(ctx: RunContext, lib_root: Path) -> None:
+    content = """{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+        "jsx": "react-jsx",
+        "outDir": "dist",
+        "rootDir": "src"
+  },
+  "include": ["src"]
+}
+"""
+    ctx.write_file(lib_root / "tsconfig.json", content)
+
+
+def _write_ui_eslint_config(ctx: RunContext, lib_root: Path) -> None:
+    content = """import baseConfig from \"../../../eslint.config.mjs\";
+
+export default [...baseConfig];
+"""
+    ctx.write_file(lib_root / "eslint.config.mjs", content)
+
+
+def _write_app_package_json(
+    ctx: RunContext, app_root: Path, app_name: str, ui_pkg_name: str
+) -> None:
+    write_package_json(
+        ctx,
+        app_root / "package.json",
+        defaults={
+            "name": f"@repo/{app_name}",
+            "version": "0.1.0",
+            "private": True,
+            "type": "module",
+        },
+        dependencies=_web_app_dependencies(ui_pkg_name),
+        dev_dependencies=_WEB_APP_DEV_DEPENDENCIES,
+    )
+
+
+def _write_app_project_json(ctx: RunContext, app_root: Path, app_name: str) -> None:
+    project = {
+        "name": app_name,
+        "root": f"apps/{app_name}",
+        "targets": {
+            "serve": {
+                "executor": "nx:run-commands",
+                "options": {
+                    "command": "npx vite",
+                    "cwd": f"apps/{app_name}",
+                },
+            },
+            "build": {
+                "executor": "nx:run-commands",
+                "options": {
+                    "command": "npx vite build",
+                    "cwd": f"apps/{app_name}",
+                },
+            },
+            "lint": {
+                "executor": "nx:run-commands",
+                "options": {
+                    "command": "npx eslint .",
+                    "cwd": f"apps/{app_name}",
+                },
+            },
+            "test": {
+                "executor": "nx:run-commands",
+                "options": {
+                    "command": "npx vitest run",
+                    "cwd": f"apps/{app_name}",
+                },
+            },
+            "typecheck": {
+                "executor": "nx:run-commands",
+                "options": {
+                    "command": "npx tsc --noEmit",
+                    "cwd": f"apps/{app_name}",
+                },
+            },
+        },
+    }
+    ctx.write_file(app_root / "project.json", json.dumps(project, indent=2) + "\n")
+
+
+def _write_app_tsconfig(ctx: RunContext, app_root: Path) -> None:
+    content = """{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+        "jsx": "react-jsx",
+    "outDir": "dist",
+    "rootDir": "src"
+  },
+  "include": ["src"]
+}
+"""
+    ctx.write_file(app_root / "tsconfig.json", content)
+
+
+def _write_app_eslint_config(ctx: RunContext, app_root: Path) -> None:
+    content = """import baseConfig from \"../../eslint.config.mjs\";
+
+export default [...baseConfig];
+"""
+    ctx.write_file(app_root / "eslint.config.mjs", content)
+
+
+def _write_app_index_html(ctx: RunContext, app_root: Path, app_name: str) -> None:
+    title = app_name.replace("-", " ").title()
+    content = f"""<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{title}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
+"""
+    ctx.write_file(app_root / "index.html", content)
+
+
+def _write_app_main_tsx(ctx: RunContext, src: Path) -> None:
+    content = """import React from "react";
+import ReactDOM from "react-dom/client";
+import { App } from "./App";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
+"""
+    ctx.write_file(src / "main.tsx", content)
+
+
+def _write_app_tsx(ctx: RunContext, src: Path, app_name: str, ui_pkg_name: str) -> None:
+    title = app_name.replace("-", " ").title()
+    content = f"""import {{ uiPackageName }} from "@repo/{ui_pkg_name}";
+
+export const appTitle = "{title}";
+
+export const App = () => {{
+  return (
+    <div>
+            <h1>{{appTitle}}</h1>
+      <p>Shared UI package: {{uiPackageName}}</p>
+    </div>
+  );
+}};
+"""
+    ctx.write_file(src / "App.tsx", content)
+
+
+def _write_vite_config(ctx: RunContext, app_root: Path, app_name: str) -> None:
+    content = """import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 3000,
+    open: true,
+  },
+});
+"""
+    ctx.write_file(app_root / "vite.config.ts", content)
+
+
+def _write_ui_test(ctx: RunContext, path: Path, ui_pkg_name: str) -> None:
+        content = f"""import {{ describe, expect, it }} from "vitest";
+
+import {{ uiPackageName }} from "./index";
+
+
+describe("ui package", () => {{
+    it("exports the package name", () => {{
+        expect(uiPackageName).toBe("{ui_pkg_name}");
+    }});
+}});
+"""
+        ctx.write_file(path, content)
+
+
+def _write_app_test(ctx: RunContext, path: Path, app_name: str) -> None:
+        title = app_name.replace("-", " ").title()
+        content = f"""import {{ describe, expect, it }} from "vitest";
+
+import {{ appTitle }} from "./App";
+
+
+describe("web app", () => {{
+    it("exports the app title", () => {{
+        expect(appTitle).toBe("{title}");
+    }});
+}});
+"""
+        ctx.write_file(path, content)