create-interview-cockpit 0.4.0 → 0.6.0

package/template/client/src/infraLab.ts

@@ -0,0 +1,124 @@
+import type { InfraLabWorkspace } from "./types";
+
+const DEFAULT_INFRA_FILES: Record<string, string> = {
+  "provider.tf": `terraform {
+  required_providers {
+    aws = {
+      source  = "hashicorp/aws"
+      version = "~> 5.0"
+    }
+  }
+}
+
+provider "aws" {
+  region                      = "us-east-1"
+  access_key                  = "test"
+  secret_key                  = "test"
+  skip_credentials_validation = true
+  skip_metadata_api_check     = true
+  skip_requesting_account_id  = true
+  s3_use_path_style           = true
+
+  endpoints {
+    s3 = "http://localhost:4566"
+  }
+}
+`,
+  "main.tf": `resource "aws_s3_bucket" "example" {
+  bucket = "practice-bucket"
+}
+`,
+};
+
+export const DEFAULT_INFRA_LAB: InfraLabWorkspace = {
+  version: 1,
+  label: "AWS LocalStack Lab",
+  provider: "aws",
+  executionMode: "localstack",
+  activeFile: "main.tf",
+  files: DEFAULT_INFRA_FILES,
+};
+
+export function cloneInfraLabWorkspace(
+  workspace?: InfraLabWorkspace | null,
+): InfraLabWorkspace {
+  const source = workspace ?? DEFAULT_INFRA_LAB;
+  // Only seed defaults when the source has no files of its own
+  const files =
+    source.files && Object.keys(source.files).length > 0
+      ? { ...source.files }
+      : { ...DEFAULT_INFRA_FILES };
+  const activeFile = files[source.activeFile]
+    ? source.activeFile
+    : (Object.keys(files)[0] ?? "main.tf");
+
+  return {
+    version: 1,
+    label: source.label || DEFAULT_INFRA_LAB.label,
+    provider: "aws",
+    executionMode:
+      source.executionMode === "plan-only" ? "plan-only" : "localstack",
+    activeFile,
+    files,
+  };
+}
+
+export function getInfraLabFileOrder(workspace: InfraLabWorkspace): string[] {
+  const preferred = [
+    "main.tf",
+    "provider.tf",
+    "variables.tf",
+    "terraform.tfvars",
+    "outputs.tf",
+    "locals.tf",
+    "README.md",
+  ];
+  const extras = Object.keys(workspace.files)
+    .filter((name) => !preferred.includes(name))
+    .sort();
+
+  return preferred.filter((name) => workspace.files[name]).concat(extras);
+}
+
+export function serializeInfraLabWorkspace(
+  workspace: InfraLabWorkspace,
+): string {
+  return JSON.stringify(cloneInfraLabWorkspace(workspace), null, 2);
+}
+
+export function parseInfraLabWorkspace(raw: string): InfraLabWorkspace | null {
+  try {
+    const parsed = JSON.parse(raw) as Partial<InfraLabWorkspace> & {
+      files?: Record<string, unknown>;
+    };
+
+    if (!parsed || typeof parsed !== "object") return null;
+    if (!parsed.files || typeof parsed.files !== "object") return null;
+
+    const files = Object.fromEntries(
+      Object.entries(parsed.files).filter(
+        (entry): entry is [string, string] => typeof entry[1] === "string",
+      ),
+    );
+
+    if (Object.keys(files).length === 0) return null;
+
+    return cloneInfraLabWorkspace({
+      version: 1,
+      label:
+        typeof parsed.label === "string" && parsed.label.trim()
+          ? parsed.label.trim()
+          : DEFAULT_INFRA_LAB.label,
+      provider: "aws",
+      executionMode:
+        parsed.executionMode === "plan-only" ? "plan-only" : "localstack",
+      activeFile:
+        typeof parsed.activeFile === "string"
+          ? parsed.activeFile
+          : DEFAULT_INFRA_LAB.activeFile,
+      files,
+    });
+  } catch {
+    return null;
+  }
+}

package/template/client/src/reactLab.ts

@@ -0,0 +1,477 @@
+import type { FrontendLabWorkspace } from "./types";
+
+// ── Default file contents ────────────────────────────────────────────────────
+
+const REACT_DEFAULT_FILES: Record<string, string> = {
+  "App.tsx": `import { useState } from "react";
+import { Counter } from "./Counter";
+import type { User } from "./types";
+
+const user: User = { name: "Alice", age: 28 };
+
+export default function App() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div style={{ padding: "2rem", fontFamily: "system-ui, sans-serif" }}>
+      <h1 style={{ fontSize: "1.5rem", fontWeight: "bold", marginBottom: "0.5rem" }}>
+        React + TypeScript Lab
+      </h1>
+      <p style={{ color: "#64748b", marginBottom: "1.5rem" }}>
+        Welcome, {user.name}! Practice React fundamentals here.
+      </p>
+      <Counter initialCount={count} onCountChange={setCount} />
+      <p style={{ marginTop: "1rem", color: "#94a3b8", fontSize: "0.875rem" }}>
+        Parent count: {count}
+      </p>
+    </div>
+  );
+}
+`,
+  "Counter.tsx": `import { useState, useCallback } from "react";
+import type { CounterProps } from "./types";
+
+// Stateful child component — receives props from App
+export function Counter({ initialCount = 0, onCountChange }: CounterProps) {
+  const [count, setCount] = useState(initialCount);
+
+  const increment = useCallback(() => {
+    setCount((c) => {
+      const next = c + 1;
+      onCountChange?.(next);
+      return next;
+    });
+  }, [onCountChange]);
+
+  const decrement = useCallback(() => {
+    setCount((c) => {
+      const next = c - 1;
+      onCountChange?.(next);
+      return next;
+    });
+  }, [onCountChange]);
+
+  return (
+    <div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
+      <button
+        onClick={decrement}
+        style={{
+          padding: "0.5rem 1.25rem",
+          fontSize: "1.25rem",
+          cursor: "pointer",
+          borderRadius: "0.375rem",
+          border: "1px solid #cbd5e1",
+          background: "#f8fafc",
+        }}
+      >
+        −
+      </button>
+      <span style={{ fontSize: "2rem", fontWeight: "bold", minWidth: "3rem", textAlign: "center" }}>
+        {count}
+      </span>
+      <button
+        onClick={increment}
+        style={{
+          padding: "0.5rem 1.25rem",
+          fontSize: "1.25rem",
+          cursor: "pointer",
+          borderRadius: "0.375rem",
+          border: "1px solid #cbd5e1",
+          background: "#f8fafc",
+        }}
+      >
+        +
+      </button>
+    </div>
+  );
+}
+`,
+  "types.ts": `// Type definitions — shared across components
+
+export interface User {
+  name: string;
+  age: number;
+}
+
+export interface CounterProps {
+  initialCount?: number;
+  /** Callback that fires whenever the count changes */
+  onCountChange?: (count: number) => void;
+}
+`,
+};
+
+const NEXTJS_DEFAULT_FILES: Record<string, string> = {
+  "app/page.tsx": `// Server Component (default in App Router — no "use client" needed)
+// In real Next.js this could be async and fetch data directly
+import { Counter } from "../components/Counter";
+
+export default function HomePage() {
+  // In real Next.js: const data = await fetch('/api/...').then(r => r.json())
+  const message = "Server Components render on the server — no useState here!";
+
+  return (
+    <div style={{ padding: "2rem", fontFamily: "system-ui, sans-serif" }}>
+      <h1 style={{ fontSize: "1.5rem", fontWeight: "bold", marginBottom: "0.5rem" }}>
+        Next.js App Router Lab
+      </h1>
+      <p style={{ color: "#64748b", marginBottom: "1.5rem" }}>{message}</p>
+      {/* Counter is a Client Component — it can use useState */}
+      <Counter />
+    </div>
+  );
+}
+`,
+  "app/layout.tsx": `// Root Layout — always a Server Component
+// Wraps ALL pages; persists across navigations without re-mounting
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body style={{ margin: 0, background: "#f8fafc", fontFamily: "system-ui, sans-serif" }}>
+        <nav
+          style={{
+            padding: "0.75rem 2rem",
+            background: "#0070f3",
+            color: "#fff",
+            marginBottom: "0",
+          }}
+        >
+          <strong>My Next.js App</strong>
+        </nav>
+        <main>{children}</main>
+      </body>
+    </html>
+  );
+}
+`,
+  "app/loading.tsx": `// loading.tsx — shown while the page is fetching data (Suspense boundary)
+// Next.js displays this automatically while the page component awaits
+
+export default function Loading() {
+  return (
+    <div style={{ padding: "2rem", color: "#64748b" }}>
+      Loading…
+    </div>
+  );
+}
+`,
+  "components/Counter.tsx": `"use client";
+// "use client" — marks this as a Client Component
+// Only Client Components can use useState, useEffect, and browser APIs
+
+import { useState } from "react";
+
+export function Counter() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
+      <button
+        onClick={() => setCount((c) => c - 1)}
+        style={{ padding: "0.5rem 1.25rem", fontSize: "1.25rem", cursor: "pointer",
+          borderRadius: "0.375rem", border: "1px solid #cbd5e1", background: "#f8fafc" }}
+      >
+        −
+      </button>
+      <span style={{ fontSize: "2rem", fontWeight: "bold", minWidth: "3rem", textAlign: "center" }}>
+        {count}
+      </span>
+      <button
+        onClick={() => setCount((c) => c + 1)}
+        style={{ padding: "0.5rem 1.25rem", fontSize: "1.25rem", cursor: "pointer",
+          borderRadius: "0.375rem", border: "1px solid #cbd5e1", background: "#f8fafc" }}
+      >
+        +
+      </button>
+    </div>
+  );
+}
+`,
+  "types.ts": `// Shared TypeScript types
+
+export interface PageProps {
+  params: { slug: string };
+  searchParams: Record<string, string | string[] | undefined>;
+}
+
+export interface User {
+  id: string;
+  name: string;
+  email: string;
+}
+`,
+};
+
+// ── Lab workspace constructors ────────────────────────────────────────────────
+
+export const DEFAULT_REACT_LAB: FrontendLabWorkspace = {
+  version: 1,
+  label: "React Lab",
+  type: "react",
+  activeFile: "App.tsx",
+  files: REACT_DEFAULT_FILES,
+};
+
+export const DEFAULT_NEXTJS_LAB: FrontendLabWorkspace = {
+  version: 1,
+  label: "Next.js Lab",
+  type: "nextjs",
+  activeFile: "app/page.tsx",
+  files: NEXTJS_DEFAULT_FILES,
+};
+
+export function defaultForType(type: "react" | "nextjs"): FrontendLabWorkspace {
+  return type === "nextjs" ? DEFAULT_NEXTJS_LAB : DEFAULT_REACT_LAB;
+}
+
+export function cloneFrontendLabWorkspace(
+  workspace?: FrontendLabWorkspace | null,
+  type?: "react" | "nextjs",
+): FrontendLabWorkspace {
+  const resolvedType = workspace?.type ?? type ?? "react";
+  const defaults = defaultForType(resolvedType);
+  const source = workspace ?? defaults;
+  const files =
+    source.files && Object.keys(source.files).length > 0
+      ? { ...source.files }
+      : { ...defaults.files };
+  const activeFile = files[source.activeFile]
+    ? source.activeFile
+    : (Object.keys(files)[0] ?? defaults.activeFile);
+
+  return {
+    version: 1,
+    label: source.label?.trim() || defaults.label,
+    type: resolvedType,
+    activeFile,
+    files,
+  };
+}
+
+export function serializeFrontendLabWorkspace(
+  workspace: FrontendLabWorkspace,
+): string {
+  return JSON.stringify(cloneFrontendLabWorkspace(workspace), null, 2);
+}
+
+export function parseFrontendLabWorkspace(
+  raw: string,
+): FrontendLabWorkspace | null {
+  try {
+    const parsed = JSON.parse(raw) as Partial<FrontendLabWorkspace> & {
+      files?: Record<string, unknown>;
+    };
+    if (!parsed || typeof parsed !== "object") return null;
+    if (!parsed.files || typeof parsed.files !== "object") return null;
+
+    const files = Object.fromEntries(
+      Object.entries(parsed.files).filter(
+        (e): e is [string, string] => typeof e[1] === "string",
+      ),
+    );
+    if (Object.keys(files).length === 0) return null;
+
+    const type: "react" | "nextjs" =
+      parsed.type === "nextjs" ? "nextjs" : "react";
+
+    return cloneFrontendLabWorkspace({
+      version: 1,
+      type,
+      label:
+        typeof parsed.label === "string" && parsed.label.trim()
+          ? parsed.label.trim()
+          : defaultForType(type).label,
+      activeFile:
+        typeof parsed.activeFile === "string"
+          ? parsed.activeFile
+          : defaultForType(type).activeFile,
+      files,
+    });
+  } catch {
+    return null;
+  }
+}
+
+/** Returns the canonical entry file for "Run" → preview. */
+export function getEntryFile(workspace: FrontendLabWorkspace): string {
+  if (workspace.type === "nextjs") {
+    return workspace.files["app/page.tsx"]
+      ? "app/page.tsx"
+      : Object.keys(workspace.files)[0];
+  }
+  return workspace.files["App.tsx"]
+    ? "App.tsx"
+    : Object.keys(workspace.files)[0];
+}
+
+/** Preferred display order for the file tree. */
+export function getFrontendLabFileOrder(
+  workspace: FrontendLabWorkspace,
+): string[] {
+  const allFiles = Object.keys(workspace.files).sort((a, b) => {
+    // Sort by folder depth first, then alphabetically
+    const ad = a.split("/").length;
+    const bd = b.split("/").length;
+    return ad !== bd ? ad - bd : a.localeCompare(b);
+  });
+  return allFiles;
+}
+
+// ── Preview HTML generator ────────────────────────────────────────────────────
+
+/**
+ * Resolves which page.tsx file corresponds to a Next.js route path.
+ * Returns null if no matching file exists in `files`.
+ */
+export function resolveNextjsEntry(
+  files: Record<string, string>,
+  routePath: string,
+): string | null {
+  const segments = routePath.replace(/^\//, "").split("/").filter(Boolean);
+  const base =
+    segments.length === 0 ? "app/page" : `app/${segments.join("/")}/page`;
+  for (const ext of [".tsx", ".ts", ".jsx", ".js"]) {
+    if (files[base + ext] !== undefined) return base + ext;
+  }
+  return null;
+}
+
+/**
+ * Generates a self-contained HTML page for the preview iframe.
+ *
+ * Approach: loads React 18 UMD + Babel standalone from CDN, runs a
+ * custom module system built on top of Babel's CJS transform plugin,
+ * then renders the default export from `entryFile`.
+ *
+ * CDN URLs are version-pinned so the preview is reproducible.
+ */
+export function generatePreviewHTML(
+  files: Record<string, string>,
+  entryFile: string,
+  sandboxUrl?: string,
+  isNextjs?: boolean,
+): string {
+  const filesJSON = JSON.stringify(files);
+  const entryJSON = JSON.stringify(entryFile);
+  const sandboxJSON = JSON.stringify(sandboxUrl ?? "");
+  const isNextjsJSON = isNextjs ? "true" : "false";
+  // _i breaks up the 'import' keyword so Vite/Babel doesn't misparse
+  // the template literal below as containing real module import declarations
+  const _i = "import";
+
+  return `<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<script>window.__F__=${filesJSON};window.__E__=${entryJSON};window.SANDBOX_URL=${sandboxJSON};window.__NX__=${isNextjsJSON};</script>
+<script src="https://unpkg.com/@babel/standalone@7.26.10/babel.min.js"></script>
+<style>
+*{box-sizing:border-box}
+body{margin:0;background:#fff;font-family:system-ui,sans-serif}
+#__err{display:none;position:fixed;bottom:0;left:0;right:0;padding:0.75rem 1rem;background:#fef2f2;color:#991b1b;font:12px/1.5 monospace;white-space:pre-wrap;border-top:2px solid #fca5a5;max-height:50%;overflow:auto;z-index:9999}
+</style>
+</head>
+<body>
+<div id="root"></div>
+<div id="__err"></div>
+<script type="module">
+${_i} React from 'https://esm.sh/react@19.1.0';
+${_i} * as ReactDOM from 'https://esm.sh/react-dom@19.1.0/client?deps=react@19.1.0';
+window.React = React;
+window.ReactDOM = ReactDOM;
+(function(){
+  var files=window.__F__,entry=window.__E__,reg={};
+  function norm(from,id){
+    if(id==='react'||id==='react/jsx-runtime'||id==='react/jsx-dev-runtime')return'__react__';
+    if(id==='react-dom'||id==='react-dom/server')return'__reactdom__';
+    if(id==='react-dom/client')return'__reactdomclient__';
+    if(!id.startsWith('.')){return'__ext__:'+id;}
+    var dir=from.includes('/')?from.slice(0,from.lastIndexOf('/')+1):'';
+    var parts=(dir+id).split('/').reduce(function(a,p){
+      if(p==='..')a.pop();else if(p&&p!=='.')a.push(p);return a;
+    },[]);
+    var base=parts.join('/');
+    var exts=['','.tsx','.ts','.jsx','.js'];
+    for(var i=0;i<exts.length;i++){if(files[base+exts[i]]!=null)return base+exts[i];}
+    return base;
+  }
+  function makeReq(from){
+    return function(id){
+      if(id==='react'||id==='react/jsx-runtime'||id==='react/jsx-dev-runtime')return window.React;
+      if(id==='react-dom/client')return{createRoot:window.ReactDOM.createRoot.bind(window.ReactDOM)};
+      if(id==='react-dom')return window.ReactDOM;
+      var key=norm(from,id);
+      if(key.startsWith('__ext__:'))return{};
+      if(reg[key])return reg[key].exports;
+      for(var e of['.tsx','.ts','.jsx','.js']){if(reg[key+e])return reg[key+e].exports;}
+      console.warn('Module not found:',id,'from',from);return{};
+    };
+  }
+  function loadMod(name){
+    if(reg[name])return;
+    var src=files[name];if(src==null)return;
+    var m={exports:{}};
+    reg[name]=m;
+    try{
+      var out=Babel.transform(src,{
+        presets:[['react',{runtime:'classic'}],['typescript',{allExtensions:true,isTSX:true}]],
+        plugins:['transform-modules-commonjs','transform-dynamic-import'],
+        filename:name,sourceType:'module'
+      }).code;
+      (new Function('require','module','exports',out))(makeReq(name),m,m.exports);
+    }catch(e){throw new Error(name+': '+e.message);}
+  }
+  function deps(name){
+    var src=files[name]||'',re=/from\\s+['""]([^'"]+)['"]/g,d=[],m;
+    while((m=re.exec(src))!==null){
+      var k=norm(name,m[1]);
+      if(k&&!k.startsWith('__')&&files[k])d.push(k);
+    }
+    return d;
+  }
+  var vis=new Set(),order=[];
+  function visit(n){if(vis.has(n))return;vis.add(n);deps(n).forEach(visit);order.push(n);}
+  Object.keys(files).forEach(visit);
+  function showErr(msg){
+    var el=document.getElementById('__err');
+    el.style.display='block';el.innerText=msg;
+    try{parent.postMessage({type:'rlab-err',error:msg},'*');}catch(e){}
+  }
+  window.onerror=function(msg,s,l,c,err){showErr(err?err.message+'\\n'+(err.stack||''):String(msg));return true;};
+  window.addEventListener('unhandledrejection',function(e){showErr(e.reason&&e.reason.message?e.reason.message:String(e.reason));});
+  try{
+    order.forEach(loadMod);
+    var em=reg[entry];
+    if(!em)throw new Error('Entry not found: '+entry);
+    var Comp=em.exports.default;
+    if(typeof Comp!=='function')throw new Error('No default export (function/component) in '+entry);
+    // Expose a navigate helper so in-preview code can trigger URL bar changes:
+    //   window.__nxNavigate('/dashboard')
+    window.__nxNavigate=function(to){try{parent.postMessage({type:'rlab-nav',to:to},'*');}catch(e){}};
+    var pageEl=React.createElement(Comp,null);
+    // In Next.js mode: wrap the page in app/layout.tsx if it exists
+    if(window.__NX__){
+      var lk=null;
+      for(var _le of['app/layout.tsx','app/layout.ts','app/layout.jsx','app/layout.js']){
+        if(reg[_le]){lk=_le;break;}
+      }
+      if(lk&&typeof reg[lk].exports.default==='function'){
+        pageEl=React.createElement(reg[lk].exports.default,null,pageEl);
+      }
+    }
+    ReactDOM.createRoot(document.getElementById('root')).render(
+      React.createElement(React.StrictMode,null,pageEl)
+    );
+    try{parent.postMessage({type:'rlab-ready'},'*');}catch(e){}
+  }catch(err){showErr(err.message+(err.stack?'\\n\\n'+err.stack:''));}
+})();
+</script>
+</body>
+</html>`;
+}