implement a multi-file template interpreter

2025-09-05 01:46:26 -06:00
parent 0bccd28134
commit 88d757546a
25 changed files with 1525 additions and 1 deletions
--- a/examples/react-app-generator/templates/react-component.tmpl
+++ b/examples/react-app-generator/templates/react-component.tmpl
@ -0,0 +1,113 @@
+import React from 'react';
+{{if .Component.Entity}}import { {{.Component.Entity}} } from '../types/{{.Component.Entity}}';
+{{end}}
+
+interface {{.Component.Type | title}}ComponentProps {
+  className?: string;
+  {{if .Component.Entity}}data?: {{.Component.Entity}}[];
+  {{end}}
+}
+
+export default function {{.Component.Type | title}}Component({
+  className = '',
+  {{if .Component.Entity}}data{{end}}
+}: {{.Component.Type | title}}ComponentProps) {
+  {{if eq .Component.Type "form"}}
+  const [formData, setFormData] = React.useState({});
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    console.log('Form submitted:', formData);
+    // TODO: Implement form submission
+  };
+
+  return (
+    <div className={`bg-white p-6 rounded-lg shadow ${className}`}>
+      <form onSubmit={handleSubmit} className="space-y-4">
+        {{range .Component.Elements}}{{if .Field}}
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+            {{.Field.Name | title}}
+          </label>
+          <input
+            type="{{if eq .Field.Type "text"}}text{{else if eq .Field.Type "email"}}email{{else}}text{{end}}"
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+            onChange={(e) => setFormData({...formData, {{.Field.Name}}: e.target.value})}
+          />
+        </div>
+        {{end}}{{end}}
+        <button
+          type="submit"
+          className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
+        >
+          Submit
+        </button>
+      </form>
+    </div>
+  );
+  {{else if eq .Component.Type "table"}}
+  return (
+    <div className={`bg-white rounded-lg shadow overflow-hidden ${className}`}>
+      <table className="min-w-full divide-y divide-gray-200">
+        <thead className="bg-gray-50">
+          <tr>
+            {{range .Component.Elements}}{{if .Field}}
+            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+              {{.Field.Name | title}}
+            </th>
+            {{end}}{{end}}
+            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+              Actions
+            </th>
+          </tr>
+        </thead>
+        <tbody className="bg-white divide-y divide-gray-200">
+          {data?.map((item, index) => (
+            <tr key={index}>
+              {{range .Component.Elements}}{{if .Field}}
+              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+                {item.{{.Field.Name}}}
+              </td>
+              {{end}}{{end}}
+              <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
+                <button className="text-blue-600 hover:text-blue-900 mr-2">
+                  Edit
+                </button>
+                <button className="text-red-600 hover:text-red-900">
+                  Delete
+                </button>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+  {{else if eq .Component.Type "list"}}
+  return (
+    <div className={`space-y-4 ${className}`}>
+      {data?.map((item, index) => (
+        <div key={index} className="bg-white p-6 rounded-lg shadow">
+          {{range .Component.Elements}}{{if .Field}}
+          <div className="mb-2">
+            <span className="font-semibold text-gray-700">{{.Field.Name | title}}:</span>
+            <span className="ml-2 text-gray-900">{item.{{.Field.Name}}}</span>
+          </div>
+          {{end}}{{end}}
+        </div>
+      ))}
+    </div>
+  );
+  {{else}}
+  return (
+    <div className={`bg-white p-6 rounded-lg shadow ${className}`}>
+      <h3 className="text-lg font-semibold text-gray-900 mb-4">
+        {{.Component.Type | title}} Component
+      </h3>
+      <p className="text-gray-600">
+        This is a {{.Component.Type}} component. Add your custom implementation here.
+      </p>
+    </div>
+  );
+  {{end}}
+}