@specverse/engine-realize 3.5.3

package/libs/instance-factories/views/templates/react/index-css-generator.ts

@@ -0,0 +1,209 @@
+/**
+ * React index.css Generator
+ *
+ * Generates base CSS styles for React application
+ */
+
+import type { TemplateContext } from '@specverse/engine-realize';
+
+/**
+ * Generate index.css with base styles
+ */
+export default function generateIndexCss(context: TemplateContext): string {
+  return `/**
+ * Base CSS Styles
+ * Auto-generated by SpecVerse
+ */
+
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+
+button:hover {
+  border-color: #646cff;
+}
+
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+
+  a:hover {
+    color: #747bff;
+  }
+
+  button {
+    background-color: #f9f9f9;
+  }
+}
+
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.app-container {
+  width: 100%;
+}
+
+/* Home page styles */
+.home-page {
+  text-align: left;
+}
+
+.home-page nav {
+  margin-top: 2rem;
+}
+
+.home-page ul {
+  list-style: none;
+  padding: 0;
+}
+
+.home-page li {
+  margin: 0.5rem 0;
+}
+
+.home-page a {
+  display: inline-block;
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  background-color: #1a1a1a;
+  text-decoration: none;
+}
+
+.home-page a:hover {
+  background-color: #2a2a2a;
+}
+
+/* Form styles */
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  max-width: 500px;
+  margin: 2rem auto;
+  text-align: left;
+}
+
+form label {
+  display: block;
+  margin-bottom: 0.25rem;
+  font-weight: 500;
+}
+
+form input,
+form textarea,
+form select {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-family: inherit;
+  font-size: 1em;
+}
+
+form input:focus,
+form textarea:focus,
+form select:focus {
+  outline: 2px solid #646cff;
+}
+
+form .error {
+  color: #ff4444;
+  font-size: 0.875em;
+  margin-top: 0.25rem;
+}
+
+/* Table styles */
+table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 2rem 0;
+}
+
+table th,
+table td {
+  padding: 0.75rem;
+  text-align: left;
+  border-bottom: 1px solid #ddd;
+}
+
+table th {
+  background-color: #1a1a1a;
+  font-weight: 600;
+}
+
+table tr:hover {
+  background-color: #2a2a2a;
+}
+
+/* Loading and error states */
+.loading {
+  padding: 2rem;
+  text-align: center;
+}
+
+.error-message {
+  padding: 1rem;
+  background-color: #ff4444;
+  color: white;
+  border-radius: 4px;
+  margin: 1rem 0;
+}
+`;
+}

package/libs/instance-factories/views/templates/react/index-html-generator.ts

@@ -0,0 +1,34 @@
+/**
+ * React index.html Generator
+ *
+ * Generates the HTML entry point for a React application
+ */
+
+import type { TemplateContext } from '@specverse/engine-realize';
+
+/**
+ * Generate index.html for React application
+ */
+export default function generateIndexHtml(context: TemplateContext): string {
+  const { spec } = context;
+
+  // Extract component name from spec metadata
+  const componentName = spec?.metadata?.component || spec?.component?.name || 'App';
+  const description = spec?.metadata?.description || spec?.component?.description || 'Generated by SpecVerse';
+
+  return `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="${description}" />
+    <title>${componentName}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
+`;
+}

package/libs/instance-factories/views/templates/react/main-tsx-generator.ts

@@ -0,0 +1,29 @@
+/**
+ * React main.tsx Entry Point Generator
+ *
+ * Generates the main.tsx entry point for React application
+ */
+
+import type { TemplateContext } from '@specverse/engine-realize';
+
+/**
+ * Generate main.tsx React entry point
+ */
+export default function generateMainTsx(context: TemplateContext): string {
+  return `/**
+ * React Application Entry Point
+ * Auto-generated by SpecVerse
+ */
+
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+`;
+}

package/libs/instance-factories/views/templates/react/react-component-generator.d.ts

@@ -0,0 +1,152 @@
+/**
+ * React Component Generator
+ *
+ * Extends BaseComponentGenerator to generate React/TypeScript components.
+ * Outputs .tsx files with proper imports, hooks, types, and JSX.
+ *
+ * Features:
+ * - TypeScript with strict typing
+ * - React hooks (useState, useEffect)
+ * - JSX component rendering
+ * - Adapter integration (shadcn, MUI, antd)
+ * - Proper file structure and exports
+ */
+import { BaseComponentGenerator, ViewSpec, StateDefinition, EventDefinition, GeneratorConfig } from '../shared/base-generator.js';
+import type { ComponentAdapter } from '../shared/adapter-types.js';
+/**
+ * React-specific generator configuration
+ */
+export interface ReactGeneratorConfig extends GeneratorConfig {
+    framework: 'react';
+    target: 'shadcn' | 'mui' | 'antd';
+    typescript: boolean;
+    strictMode?: boolean;
+    includeComments?: boolean;
+}
+/**
+ * React component props interface
+ */
+export interface ReactComponentProps {
+    [key: string]: any;
+}
+/**
+ * Generates React/TypeScript components from SpecVerse view specifications
+ *
+ * Output structure:
+ * ```tsx
+ * import React, { useState, useEffect } from 'react';
+ * import { Button } from '@/components/ui/button';
+ *
+ * interface {ComponentName}Props {
+ *   // ... props
+ * }
+ *
+ * export function {ComponentName}({ ...props }: {ComponentName}Props) {
+ *   // State declarations
+ *   const [count, setCount] = useState(0);
+ *
+ *   // Event handlers
+ *   const handleClick = () => { ... };
+ *
+ *   // Component tree
+ *   return (
+ *     <div>
+ *       <Button onClick={handleClick}>Click me</Button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare class ReactComponentGenerator extends BaseComponentGenerator {
+    private readonly reactConfig;
+    constructor(adapter: ComponentAdapter, config: ReactGeneratorConfig);
+    /**
+     * Generate React imports
+     */
+    protected generateImports(viewSpec: ViewSpec): string;
+    /**
+     * Generate complete React component
+     */
+    protected generateComponent(parts: {
+        name: string;
+        imports: string;
+        state: string;
+        events: string;
+        components: string;
+    }): string;
+    /**
+     * Generate state declarations using React hooks
+     */
+    protected generateState(state: Record<string, StateDefinition>): string;
+    /**
+     * Generate event handlers
+     */
+    protected generateEvents(events: Record<string, EventDefinition>): string;
+    /**
+     * Get file extension (.tsx for React/TypeScript)
+     */
+    getFileExtension(): string;
+    /**
+     * Get additional files (styles, types, etc.)
+     */
+    getAdditionalFiles(viewSpec: ViewSpec): Record<string, string>;
+    /**
+     * Get React core imports (useState, useEffect, etc.)
+     */
+    private getReactCoreImports;
+    /**
+     * Get component library imports
+     */
+    private getComponentImports;
+    /**
+     * Generate props interface for TypeScript
+     */
+    private generatePropsInterface;
+    /**
+     * Generate main component function
+     */
+    private generateComponentFunction;
+    /**
+     * Generate separate types file
+     */
+    private generateTypesFile;
+    /**
+     * Check if component needs useEffect hook
+     */
+    private needsUseEffect;
+    /**
+     * Capitalize first letter of string
+     */
+    private capitalize;
+    /**
+     * Override to add React-specific rendering hints
+     */
+    protected renderAdapterComponent(type: string, properties: Record<string, any>, children: string | undefined, context: any): string;
+}
+/**
+ * Create a ReactComponentGenerator instance
+ *
+ * @param adapter - Component adapter (shadcn, mui, antd)
+ * @param config - Generator configuration
+ * @returns ReactComponentGenerator instance
+ */
+export declare function createReactGenerator(adapter: ComponentAdapter, config?: Partial<ReactGeneratorConfig>): ReactComponentGenerator;
+/**
+ * Generate React component from view spec (one-liner)
+ *
+ * @param viewSpec - View specification
+ * @param adapter - Component adapter
+ * @param options - Optional configuration
+ * @returns Generated component code
+ */
+export declare function generateReactComponent(viewSpec: ViewSpec, adapter: ComponentAdapter, options?: Partial<ReactGeneratorConfig>): string;
+/**
+ * Generate React component with all additional files
+ *
+ * @param viewSpec - View specification
+ * @param adapter - Component adapter
+ * @param options - Optional configuration
+ * @returns Map of filename to content
+ */
+export declare function generateReactComponentFiles(viewSpec: ViewSpec, adapter: ComponentAdapter, options?: Partial<ReactGeneratorConfig>): Map<string, string>;
+//# sourceMappingURL=react-component-generator.d.ts.map

package/libs/instance-factories/views/templates/react/react-component-generator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-component-generator.d.ts","sourceRoot":"","sources":["react-component-generator.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,EACL,sBAAsB,EACtB,QAAQ,EACR,eAAe,EACf,eAAe,EACf,eAAe,EAChB,MAAM,6BAA6B,CAAC;AAGrC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAMnE;;GAEG;AACH,MAAM,WAAW,oBAAqB,SAAQ,eAAe;IAC3D,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAC;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,qBAAa,uBAAwB,SAAQ,sBAAsB;IACjE,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAuB;gBAEvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,EAAE,oBAAoB;IASnE;;OAEG;IACH,SAAS,CAAC,eAAe,CAAC,QAAQ,EAAE,QAAQ,GAAG,MAAM;IAiBrD;;OAEG;IACH,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE;QACjC,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,EAAE,MAAM,CAAC;QAChB,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;QACf,UAAU,EAAE,MAAM,CAAC;KACpB,GAAG,MAAM;IA6BV;;OAEG;IACH,SAAS,CAAC,aAAa,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,GAAG,MAAM;IAqBvE;;OAEG;IACH,SAAS,CAAC,cAAc,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,GAAG,MAAM;IAoBzE;;OAEG;IACI,gBAAgB,IAAI,MAAM;IAIjC;;OAEG;IACI,kBAAkB,CAAC,QAAQ,EAAE,QAAQ,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;IAerE;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAsB3B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAmC3B;;OAEG;IACH,OAAO,CAAC,sBAAsB;IAqB9B;;OAEG;IACH,OAAO,CAAC,yBAAyB;IA6CjC;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAwCzB;;OAEG;IACH,OAAO,CAAC,cAAc;IActB;;OAEG;IACH,OAAO,CAAC,UAAU;IAQlB;;OAEG;IACH,SAAS,CAAC,sBAAsB,CAC9B,IAAI,EAAE,MAAM,EACZ,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC/B,QAAQ,EAAE,MAAM,GAAG,SAAS,EAC5B,OAAO,EAAE,GAAG,GACX,MAAM;CASV;AAMD;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,gBAAgB,EACzB,MAAM,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,GACrC,uBAAuB,CAczB;AAMD;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CACpC,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,gBAAgB,EACzB,OAAO,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,GACtC,MAAM,CASR;AAED;;;;;;;GAOG;AACH,wBAAgB,2BAA2B,CACzC,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,gBAAgB,EACzB,OAAO,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,GACtC,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAiBrB"}