Merge pull request #20 from objectstack-ai/copilot/add-full-form-component

Author: huangyiirene

.github/workflows/ci.yml

@@ -97,7 +97,7 @@ jobs:
 
       - name: Check for build artifacts
         run: |
-          if [ ! -d "packages/protocol/dist" ]; then
+          if [ ! -d "packages/core/dist" ]; then
             echo "Protocol package build failed"
             exit 1
           fi

.github/workflows/pr-checks.yml

@@ -4,6 +4,11 @@ on:
   pull_request:
     types: [opened, synchronize, reopened]
 
+permissions:
+  contents: read
+  pull-requests: write
+  issues: write
+
 jobs:
   validate:
     name: Validate PR

.npmrc

@@ -0,0 +1 @@
+auto-install-peers=true

apps/playground/eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

apps/playground/package.json

@@ -19,14 +19,20 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
+    "@eslint/js": "^9.39.2",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^5.1.1",
     "autoprefixer": "^10.4.23",
+    "eslint": "^9.39.2",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.26",
+    "globals": "^16.5.0",
     "postcss": "^8.5.6",
     "tailwindcss": "^3.4.19",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "~5.9.3",
+    "typescript-eslint": "^8.53.0",
     "vite": "^7.2.4"
   }
 }

apps/playground/src/App.tsx

@@ -9,26 +9,34 @@ type ViewportSize = 'desktop' | 'tablet' | 'mobile';
 export default function Playground() {
   const [selectedExample, setSelectedExample] = useState<ExampleKey>('dashboard');
   const [code, setCode] = useState(examples['dashboard']);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [schema, setSchema] = useState<any>(null);
   const [jsonError, setJsonError] = useState<string | null>(null);
   const [viewportSize, setViewportSize] = useState<ViewportSize>('desktop');
   const [copied, setCopied] = useState(false);
 
-  // Real-time JSON parsing
-  useEffect(() => {
+  const updateSchema = (newCode: string) => {
     try {
-      const parsed = JSON.parse(code);
+      const parsed = JSON.parse(newCode);
       setSchema(parsed);
       setJsonError(null);
     } catch (e) {
       setJsonError((e as Error).message);
       // Keep previous schema on error
     }
-  }, [code]);
+  };
+
+  // Initial parse usage
+  useEffect(() => {
+    updateSchema(code);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // Run once on mount
 
   const handleExampleChange = (key: ExampleKey) => {
     setSelectedExample(key);
-    setCode(examples[key]);
+    const newCode = examples[key];
+    setCode(newCode);
+    updateSchema(newCode);
   };
 
   const handleCopySchema = async () => {
@@ -118,7 +126,11 @@ export default function Playground() {
         <div className="flex-1 overflow-hidden">
           <textarea
             value={code}
-            onChange={(e) => setCode(e.target.value)}
+            onChange={(e) => {
+              const val = e.target.value;
+              setCode(val);
+              updateSchema(val);
+            }}
             className="w-full h-full p-4 font-mono text-sm resize-none focus:outline-none border-0 bg-background"
             spellCheck={false}
             style={{ 

apps/playground/src/data/examples.ts

@@ -608,6 +608,142 @@ export const examples = {
   ]
 }`,
 
+  'airtable-form': `{
+  "type": "div",
+  "className": "max-w-4xl space-y-6",
+  "body": [
+    {
+      "type": "div",
+      "className": "space-y-2",
+      "body": [
+        {
+          "type": "text",
+          "content": "Airtable-Style Feature-Complete Form",
+          "className": "text-3xl font-bold"
+        },
+        {
+          "type": "text",
+          "content": "A comprehensive form component with validation, multi-column layout, and conditional fields",
+          "className": "text-muted-foreground"
+        }
+      ]
+    },
+    {
+      "type": "card",
+      "className": "shadow-sm",
+      "body": {
+        "type": "form",
+        "className": "p-6",
+        "submitLabel": "Create Project",
+        "cancelLabel": "Reset",
+        "showCancel": true,
+        "columns": 2,
+        "validationMode": "onBlur",
+        "resetOnSubmit": false,
+        "defaultValues": {
+          "projectType": "personal",
+          "priority": "medium",
+          "notifications": true
+        },
+        "fields": [
+          {
+            "name": "projectName",
+            "label": "Project Name",
+            "type": "input",
+            "required": true,
+            "placeholder": "Enter project name",
+            "validation": {
+              "minLength": {
+                "value": 3,
+                "message": "Project name must be at least 3 characters"
+              }
+            }
+          },
+          {
+            "name": "projectType",
+            "label": "Project Type",
+            "type": "select",
+            "required": true,
+            "options": [
+              { "label": "Personal", "value": "personal" },
+              { "label": "Team", "value": "team" },
+              { "label": "Enterprise", "value": "enterprise" }
+            ]
+          },
+          {
+            "name": "teamSize",
+            "label": "Team Size",
+            "type": "input",
+            "inputType": "number",
+            "placeholder": "Number of team members",
+            "condition": {
+              "field": "projectType",
+              "in": ["team", "enterprise"]
+            },
+            "validation": {
+              "min": {
+                "value": 2,
+                "message": "Team must have at least 2 members"
+              }
+            }
+          },
+          {
+            "name": "budget",
+            "label": "Budget",
+            "type": "input",
+            "inputType": "number",
+            "placeholder": "Project budget",
+            "condition": {
+              "field": "projectType",
+              "equals": "enterprise"
+            }
+          },
+          {
+            "name": "priority",
+            "label": "Priority Level",
+            "type": "select",
+            "required": true,
+            "options": [
+              { "label": "Low", "value": "low" },
+              { "label": "Medium", "value": "medium" },
+              { "label": "High", "value": "high" },
+              { "label": "Critical", "value": "critical" }
+            ]
+          },
+          {
+            "name": "deadline",
+            "label": "Deadline",
+            "type": "input",
+            "inputType": "date",
+            "condition": {
+              "field": "priority",
+              "in": ["high", "critical"]
+            }
+          },
+          {
+            "name": "description",
+            "label": "Project Description",
+            "type": "textarea",
+            "placeholder": "Describe your project goals and objectives",
+            "validation": {
+              "maxLength": {
+                "value": 500,
+                "message": "Description must not exceed 500 characters"
+              }
+            }
+          },
+          {
+            "name": "notifications",
+            "label": "Enable Notifications",
+            "type": "checkbox",
+            "description": "Receive updates about project progress"
+          }
+        ]
+      }
+    }
+  ]
+}`,
+
   'simple-page': `{
   "type": "div",
   "className": "space-y-4",
@@ -733,6 +869,6 @@ export type ExampleKey = keyof typeof examples;
 export const exampleCategories = {
   'Primitives': ['simple-page', 'input-states', 'button-variants'],
   'Layouts': ['grid-layout', 'dashboard', 'tabs-demo'],
-  'Forms': ['form-demo'],
+  'Forms': ['form-demo', 'airtable-form'],
   'Data Display': ['calendar-view']
 };

apps/playground/tailwind.config.js

@@ -1,3 +1,5 @@
+import tailwindcssAnimate from "tailwindcss-animate";
+
 /** @type {import('tailwindcss').Config} */
 export default {
   darkMode: ["class"],
@@ -57,5 +59,5 @@ export default {
       }
     }
   },
-  plugins: [require("tailwindcss-animate")],
+  plugins: [tailwindcssAnimate],
 }