feat: 添加 HeroUI（NextUI）组件库 Codegen

artifacts/hero-ui-renderer/.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

artifacts/hero-ui-renderer/.npmrc

@@ -0,0 +1,2 @@
+public-hoist-pattern[]=*@heroui/*
+package-lock=true

artifacts/hero-ui-renderer/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

artifacts/hero-ui-renderer/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Next UI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

artifacts/hero-ui-renderer/README.md

@@ -0,0 +1,53 @@
+# Next.js & HeroUI Template
+
+This is a template for creating applications using Next.js 14 (app directory) and HeroUI (v2).
+
+[Try it on CodeSandbox](https://githubbox.com/heroui-inc/heroui/next-app-template)
+
+## Technologies Used
+
+- [Next.js 14](https://nextjs.org/docs/getting-started)
+- [HeroUI v2](https://heroui.com/)
+- [Tailwind CSS](https://tailwindcss.com/)
+- [Tailwind Variants](https://tailwind-variants.org)
+- [TypeScript](https://www.typescriptlang.org/)
+- [Framer Motion](https://www.framer.com/motion/)
+- [next-themes](https://github.com/pacocoursey/next-themes)
+
+## How to Use
+
+### Use the template with create-next-app
+
+To create a new project based on this template using `create-next-app`, run the following command:
+
+```bash
+npx create-next-app -e https://github.com/heroui-inc/next-app-template
+```
+
+### Install dependencies
+
+You can use one of them `npm`, `yarn`, `pnpm`, `bun`, Example using `npm`:
+
+```bash
+npm install
+```
+
+### Run the development server
+
+```bash
+npm run dev
+```
+
+### Setup pnpm (optional)
+
+If you are using `pnpm`, you need to add the following code to your `.npmrc` file:
+
+```bash
+public-hoist-pattern[]=*@heroui/*
+```
+
+After modifying the `.npmrc` file, you need to run `pnpm install` again to ensure that the dependencies are installed correctly.
+
+## License
+
+Licensed under the [MIT license](https://github.com/heroui-inc/next-app-template/blob/main/LICENSE).

artifacts/hero-ui-renderer/app/ReactCodeRenderer/ErrorBoundary/ErrorBoundary.tsx

@@ -0,0 +1,90 @@
+import { Component, ErrorInfo } from "react"
+import { ErrorDisplay } from "../ErrorDisplay"
+import { ErrorBoundaryProps, ErrorBoundaryState } from "./interface"
+
+class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props)
+    this.state = {
+      hasError: false,
+      errorMessage: null,
+    }
+  }
+
+  static getDerivedStateFromError(): ErrorBoundaryState {
+    return { hasError: true }
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    // 增强错误信息 - 检测未定义组件错误
+    const enhancedErrorMessage = this.processErrorMessage(error, errorInfo)
+
+    this.setState({ errorMessage: enhancedErrorMessage, errorInfo })
+    this.props.onError(enhancedErrorMessage)
+  }
+
+  // 处理错误信息，提供更有意义的反馈
+  processErrorMessage(error: Error, errorInfo: ErrorInfo): string {
+    // 检测React典型的未定义组件错误
+    const undefinedComponentMatch = error.message.match(
+      /type is invalid.*?but got: undefined.*?You likely forgot to export/i,
+    )
+
+    if (undefinedComponentMatch) {
+      // 从错误堆栈中提取组件名称
+      let componentName = "Unknown"
+      let importSource = "unknown module"
+
+      // 尝试从错误堆栈中获取有用的信息
+      if (errorInfo.componentStack) {
+        // 提取组件名称 - 通常是第一行包含的信息
+        const componentMatch = errorInfo.componentStack.match(
+          /\s+at\s+([A-Za-z0-9_]+)/,
+        )
+        if (componentMatch && componentMatch[1]) {
+          componentName = componentMatch[1]
+        }
+
+        // 尝试提取可能的导入源
+        const lines = error.stack?.split("\n") || []
+        for (const line of lines) {
+          const moduleMatch = line.match(/from ['"]([^'"]+)['"]/)
+          if (moduleMatch) {
+            importSource = moduleMatch[1]
+            break
+          }
+        }
+      }
+
+      return `Component error: The component "${componentName}" being rendered is undefined. This likely happens when:
+1. You're importing a component that doesn't exist in "${importSource}"
+2. You've misspelled the component name during import or usage
+3. The component exists but wasn't properly exported
+
+Check your imports and component usage.`
+    }
+
+    return error.message
+  }
+
+  componentDidUpdate(prevProps: ErrorBoundaryProps) {
+    // Reset error state when files prop changes to allow retry
+    if (this.state.hasError && this.props.files !== prevProps.files) {
+      this.setState({
+        hasError: false,
+        errorMessage: null,
+        errorInfo: null,
+      })
+    }
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return <ErrorDisplay errorMessage={this.state.errorMessage} />
+    }
+
+    return this.props.children
+  }
+}
+
+export default ErrorBoundary

artifacts/hero-ui-renderer/app/ReactCodeRenderer/ErrorBoundary/index.ts

@@ -0,0 +1 @@
+export { default as ErrorBoundary } from "./ErrorBoundary";

artifacts/hero-ui-renderer/app/ReactCodeRenderer/ErrorBoundary/interface.ts

@@ -0,0 +1,15 @@
+import { ErrorInfo } from "react"
+
+import { ReactNode } from "react"
+
+export interface ErrorBoundaryProps {
+  children: ReactNode
+  onError: (errorMessage: string) => void
+  files?: Record<string, string>
+}
+
+export interface ErrorBoundaryState {
+  hasError: boolean
+  errorMessage?: string | null
+  errorInfo?: ErrorInfo | null
+}

artifacts/hero-ui-renderer/app/ReactCodeRenderer/ErrorDisplay/ErrorDisplay.tsx

@@ -0,0 +1,140 @@
+import React, { useEffect, useState } from "react";
+import type { ErrorDisplayProps } from "./interface";
+
+const ErrorDisplay: React.FC<ErrorDisplayProps> = ({ errorMessage }) => {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    setTimeout(() => setVisible(true), 100);
+  }, []);
+
+  return (
+    <div
+      style={{
+        width: "90%",
+        maxWidth: "800px",
+        margin: "20px auto",
+        padding: "24px",
+        backgroundColor: "#1a1a1a",
+        borderRadius: "8px",
+        boxShadow: "0 0 10px rgba(0, 255, 0, 0.2)",
+        opacity: visible ? 1 : 0,
+        transform: `translateY(${visible ? 0 : "20px"})`,
+        transition: "all 0.3s ease-out",
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          marginBottom: "20px",
+          borderBottom: "1px solid #333",
+          paddingBottom: "12px",
+        }}
+      >
+        <div
+          style={{
+            width: "12px",
+            height: "12px",
+            backgroundColor: "#ff5f56",
+            borderRadius: "50%",
+            marginRight: "8px",
+          }}
+        />
+        <div
+          style={{
+            width: "12px",
+            height: "12px",
+            backgroundColor: "#ffbd2e",
+            borderRadius: "50%",
+            marginRight: "8px",
+          }}
+        />
+        <div
+          style={{
+            width: "12px",
+            height: "12px",
+            backgroundColor: "#27c93f",
+            borderRadius: "50%",
+          }}
+        />
+      </div>
+
+      <h1
+        style={{
+          fontSize: "24px",
+          fontWeight: "600",
+          color: "#00ff00",
+          margin: "0 0 20px 0",
+          fontFamily: "monospace",
+          textShadow: "0 0 5px rgba(0, 255, 0, 0.5)",
+        }}
+      >
+        {">"} SYSTEM ERROR DETECTED
+      </h1>
+
+      <div
+        style={{
+          padding: "16px",
+          backgroundColor: "#000",
+          borderRadius: "4px",
+          border: "1px solid #333",
+          fontFamily: "monospace",
+          position: "relative",
+        }}
+      >
+        <div style={{ color: "#ff0000", marginBottom: "8px" }}>
+          {">"} Error Stack Trace:
+        </div>
+        <pre
+          style={{
+            margin: 0,
+            color: "#fff",
+            fontSize: "14px",
+            lineHeight: 1.5,
+            whiteSpace: "pre-wrap",
+            wordBreak: "break-word",
+          }}
+        >
+          {errorMessage?.split("\n").map((line, index) => (
+            <div
+              key={index}
+              style={{
+                opacity: visible ? 1 : 0,
+                transform: `translateX(${visible ? 0 : "20px"})`,
+                transition: `all 0.3s ease-out ${index * 0.1}s`,
+              }}
+            >
+              {line}
+            </div>
+          ))}
+        </pre>
+      </div>
+
+      <div
+        style={{
+          marginTop: "20px",
+          color: "#666",
+          fontSize: "12px",
+          fontFamily: "monospace",
+          textAlign: "center",
+        }}
+      >
+        * Please try clicking &quot;
+        <span style={{ fontWeight: "bold" }}>EXECUTE AUTO FIX</span>
+        &quot; in the bottom right corner to fix the issue. If you think this is
+        a bug, please{" "}
+        <a
+          href="https://github.com/IamLiuLv/compoder/issues"
+          target="_blank"
+          rel="noopener noreferrer"
+          style={{ color: "#666", textDecoration: "underline" }}
+        >
+          report it in Compoder&apos;s GitHub issues
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export default ErrorDisplay;

artifacts/hero-ui-renderer/app/ReactCodeRenderer/ErrorDisplay/index.ts

@@ -0,0 +1,2 @@
+export { default as ErrorDisplay } from './ErrorDisplay';
+export type { ErrorDisplayProps } from './interface';

artifacts/hero-ui-renderer/app/ReactCodeRenderer/ErrorDisplay/interface.ts

@@ -0,0 +1,3 @@
+export interface ErrorDisplayProps {
+  errorMessage?: string | null;
+}