Add metadata-driven ObjectGridTable and ObjectForm components with automatic field type recognition by Copilot · Pull Request #33 · objectstack-ai/objectos

Copilot · 2026-01-12T02:17:20Z

Code Review Fixes - Final Update ✅

object-form.tsx

✅ Fixed custom regex precedence issue (Comment #2680739153)
- Custom regex now takes precedence over built-in email/URL validation
- Built-in patterns only apply when !fieldConfig.regex
- Prevents user-defined validation from being overwritten
✅ Improved email validation regex (Comment #2680739146)
- Updated to more robust pattern: /^[a-zA-Z0-9.!#$%&'*+/=?^_{|}~-]+@a-zA-Z0-9?(?:.a-zA-Z0-9?)*$/`
- Handles longer TLDs (not limited to 2 chars)
- Better validation of domain structure

Previously Fixed (in commit `298ad6e`)

✅ useCallback for getHeaders
✅ XSS prevention with sanitization
✅ Date validation with isNaN check
✅ Type safety with RegisterOptions

All code review issues now fully addressed. Build passes ✅

Original prompt

ag-grid 组件应该调用标准的对象元数据接口，应该识别所有的字段类型，会调用用对应的字段控件来显示

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

…tion Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

hotlong · 2026-01-12T02:41:17Z

类似的，开发ObjectForm

hotlong · 2026-01-12T02:41:29Z

类似的，开发ObjectForm

@copilot

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Copilot · 2026-01-12T02:46:25Z

类似的，开发ObjectForm

@copilot

✅ 已完成 ObjectForm 组件开发 (ObjectForm component completed)

Created a metadata-driven form component similar to ObjectGridTable:

Core Features:

Auto-generates form fields from ObjectConfig
Built-in validation (required, min/max, length, email/URL format, regex)
Supports all ObjectQL field types
Smart layout (full-width for textarea/markdown)
React Hook Form integration

Usage:

import { ObjectForm } from '@objectos/ui';

<ObjectForm
  objectConfig={objectConfig}
  onSubmit={handleSubmit}
  initialValues={data}  // for editing
/>

Documentation:

English: OBJECT_FORM.md
中文: OBJECT_FORM_CN.md
Example: ObjectFormExample.tsx

Commit: 7a924e1

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Copilot

Pull request overview

This pull request adds metadata-driven UI components to ObjectOS, enabling automatic generation of AG Grid tables and forms from ObjectQL metadata. The implementation eliminates the need for manual column and field configuration by recognizing field types and applying appropriate renderers and validation.

Changes:

Added ObjectGridTable component with automatic column generation and type-specific cell renderers for all ObjectQL field types
Added ObjectForm component with automatic field generation and validation based on metadata configuration
Integrated @objectql/types dependency for type consistency across the platform

Reviewed changes

Copilot reviewed 14 out of 15 changed files in this pull request and generated 10 comments.

Show a summary per file

File	Description
`packages/ui/src/components/object-grid-table.tsx`	Core AG Grid component with 8 specialized cell renderers for boolean, date, number, currency, percent, select, lookup, email, and URL field types
`packages/ui/src/components/object-form.tsx`	Metadata-driven form component with React Hook Form integration and automatic validation rule generation
`packages/ui/src/components/examples/ObjectGridTableExample.tsx`	Demo component showcasing all field type renderers with sample data
`packages/ui/src/components/examples/ObjectFormExample.tsx`	Demo component demonstrating form creation and editing modes
`apps/web/src/components/dashboard/EnhancedObjectListView.tsx`	Production example integrating ObjectGridTable with API data fetching
`packages/ui/src/index.ts`	Export statements for new components and types
`packages/ui/package.json`	Added @objectql/types dependency
`packages/ui/OBJECT_GRID_TABLE.md`	Comprehensive English documentation for ObjectGridTable
`packages/ui/OBJECT_GRID_TABLE_CN.md`	Chinese documentation for ObjectGridTable
`packages/ui/OBJECT_FORM.md`	Comprehensive English documentation for ObjectForm
`packages/ui/OBJECT_FORM_CN.md`	Chinese documentation for ObjectForm
`docs/OBJECT_GRID_INTEGRATION.md`	Integration guide for adopting ObjectGridTable
`IMPLEMENTATION_SUMMARY.md`	Technical implementation summary
`OBJECTFORM_IMPLEMENTATION.md`	ObjectForm implementation summary

Copilot · 2026-01-12T03:06:10Z

apps/web/src/components/dashboard/EnhancedObjectListView.tsx

+    const getHeaders = () => {
+        const headers: Record<string, string> = { 'Content-Type': 'application/json' };
+        // Use the actual user ID from props instead of hard-coded value
+        if (user?.id || user?._id) {
+            headers['x-user-id'] = user.id || user._id;
+        }
+        return headers;
+    };


The getHeaders function is recreated on every render, and is used as a dependency in useEffect hooks. This can cause the useEffect hooks to run more often than necessary because the function reference changes on each render. Move getHeaders outside the component or wrap it in useCallback to prevent unnecessary re-fetches of metadata and data.

@copilot fix

Fixed all code review issues in commit 298ad6e:

✅ getHeaders now wrapped in useCallback to prevent unnecessary re-renders

✅ Dependencies updated to use getHeaders instead of user

✅ Added XSS prevention with email/URL sanitization

✅ Added date validation with isNaN check

✅ Improved type safety (RegisterOptions, better object checks)

All changes tested and building successfully.

apps/web/src/components/dashboard/EnhancedObjectListView.tsx

Copilot · 2026-01-12T03:06:11Z

packages/ui/src/components/object-grid-table.tsx

+const EmailCellRenderer = (props: ICellRendererParams) => {
+  const { value } = props
+
+  if (!value) {
+    return <span className="text-muted-foreground">-</span>
+  }
+
+  return (
+    <a 
+      href={`mailto:${value}`} 
+      className="text-primary hover:underline"
+      onClick={(e) => e.stopPropagation()}
+    >
+      {value}
+    </a>
+  )
+}
+
+/**
+ * Cell renderer for URL fields
+ */
+const UrlCellRenderer = (props: ICellRendererParams) => {
+  const { value } = props
+
+  if (!value) {
+    return <span className="text-muted-foreground">-</span>
+  }
+
+  return (
+    <a 
+      href={value} 
+      target="_blank" 
+      rel="noopener noreferrer"
+      className="text-primary hover:underline"
+      onClick={(e) => e.stopPropagation()}
+    >
+      {value}
+    </a>
+  )


The email and URL renderers create links without sanitizing the input values. For email fields, a malicious value could potentially inject JavaScript through the mailto: protocol (e.g., javascript:alert('XSS')). For URL fields, while the code requires http:// or https://, there's no validation of the actual URL content before rendering it as a link. Consider validating/sanitizing these values before using them in href attributes to prevent potential XSS attacks.

@copilot fix

Fixed in commit 298ad6e with sanitization functions:

sanitizeEmail(): Blocks javascript: protocol injection

sanitizeUrl(): Only allows http/https, blocks dangerous protocols

Copilot · 2026-01-12T03:06:11Z

packages/ui/src/components/object-grid-table.tsx

+  try {
+    const date = value instanceof Date ? value : new Date(value)
+    // Format based on field type from colDef
+    const extendedColDef = colDef as ExtendedColDef
+    const fieldType = extendedColDef.fieldType
+
+    if (fieldType === 'datetime') {
+      return (
+        <div className="flex items-center gap-1.5">
+          <CalendarIcon className="w-3 h-3 text-muted-foreground" />
+          <span>{format(date, "PPp")}</span>
+        </div>
+      )
+    }
+
+    return (
+      <div className="flex items-center gap-1.5">
+        <CalendarIcon className="w-3 h-3 text-muted-foreground" />
+        <span>{format(date, "PP")}</span>
+      </div>
+    )
+  } catch (e) {
+    return <span className="text-muted-foreground">{String(value)}</span>
+  }
+}


The DateCellRenderer does not handle invalid dates gracefully. If the date parsing fails (caught in the try-catch), it displays the raw value as a string. However, there's no validation to check if the Date object is actually valid after construction. JavaScript's Date constructor can create "Invalid Date" objects that won't throw an error but will cause the format function to throw. Consider checking isNaN(date.getTime()) after creating the Date object to ensure it's valid before calling format.

@copilot fix

Fixed in commit 298ad6e - added isNaN(date.getTime()) check before formatting to handle Invalid Date objects gracefully.

Copilot · 2026-01-12T03:06:11Z

packages/ui/src/components/object-form.tsx

+ * Generate validation rules for react-hook-form based on field config
+ */
+function getValidationRules(fieldConfig: FieldConfig) {
+  const rules: any = {}


The validation rules object uses any type instead of a more specific type from react-hook-form. This reduces type safety and could lead to runtime errors if incorrect validation rules are constructed. Consider using the proper type from react-hook-form, such as RegisterOptions or a custom interface that extends it, to ensure type safety for the validation rules.

@copilot fix

Fixed in commit 298ad6e - changed type from any to RegisterOptions from react-hook-form for better type safety.

Copilot · 2026-01-12T03:06:11Z

packages/ui/src/components/object-form.tsx

+      value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+      message: 'Invalid email address'
+    }


The email validation regex may not handle all valid email formats correctly. The pattern /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i does not allow for top-level domains longer than the minimum of 2 characters, but some newer TLDs can be longer. Additionally, it doesn't handle special cases like multiple consecutive dots or trailing dots in the domain, which could lead to false positives. Consider using a more robust email validation pattern or a library like validator.js for more comprehensive email validation.

@copilot fix

Fixed in commit 3ae142d - improved email regex to handle longer TLDs and better domain validation:
/^[a-zA-Z0-9.!#$%&'*+/=?^_{|}~-]+@a-zA-Z0-9?(?:.a-zA-Z0-9?)*$/`

packages/ui/src/components/object-form.tsx

Copilot · 2026-01-12T03:06:12Z

packages/ui/src/components/object-form.tsx

+  if (fieldConfig.regex) {
+    rules.pattern = {
+      value: new RegExp(fieldConfig.regex),
+      message: 'Invalid format'
+    }
+  }
+
+  // Email validation
+  if (fieldConfig.type === 'email') {
+    rules.pattern = {
+      value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+      message: 'Invalid email address'
+    }
+  }
+
+  // URL validation
+  if (fieldConfig.type === 'url') {
+    rules.pattern = {
+      value: /^https?:\/\/.+/i,
+      message: 'Invalid URL (must start with http:// or https://)'
+    }
+  }


When a field has type 'email' or 'url' AND a custom regex pattern is defined, the custom regex will be overwritten by the built-in email/URL pattern. The code should check if a custom regex already exists and either combine the validations or give precedence to the custom regex. This could break user expectations if they define a custom regex for stricter validation on email or URL fields.

@copilot fix

Fixed in commit 3ae142d - custom regex now takes precedence. Built-in email/URL patterns only apply when !fieldConfig.regex is true.

packages/ui/src/components/object-grid-table.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Deleted OBJECT_FORM_CN.md and OBJECT_GRID_TABLE_CN.md documentation files. Moved example files to a new location. Added @objectql/types dependency to apps/web/package.json.

Enhanced the authentication client to support PostgreSQL, MongoDB, and SQLite databases. Updated configuration to use a file-based SQLite database by default. Added 'better-sqlite3' and 'mongodb' dependencies, and improved user role assignment logic for all supported databases.

…development workflow

…_REFERENCE.md

…ridTable integration

Copilot AI assigned Copilot and hotlong Jan 12, 2026

Initial plan

5b6d9b6

Copilot started work on behalf of hotlong January 12, 2026 02:19 View session

Copilot AI and others added 6 commits January 12, 2026 02:26

Add ObjectGridTable component with metadata-driven field type recogni…

79cbdac

…tion Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Add integration guide and enhanced ObjectListView example

c5e544f

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Add Chinese documentation for ObjectGridTable

f4d8d69

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Fix type safety issues and improve currency formatting

4a480e6

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Remove unused import and add currency configuration notes

976c9bc

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Add comprehensive implementation summary document

ac69081

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Add field type recognition for ag-grid component~~ Add metadata-driven ObjectGridTable component with automatic field type recognition Jan 12, 2026

Copilot AI requested a review from hotlong January 12, 2026 02:37

Copilot finished work on behalf of hotlong January 12, 2026 02:37

Copilot started work on behalf of hotlong January 12, 2026 02:41 View session

Add ObjectForm: metadata-driven form component with automatic validation

7a924e1

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Add ObjectForm implementation summary document

3ab2567

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Copilot AI changed the title ~~Add metadata-driven ObjectGridTable component with automatic field type recognition~~ Add metadata-driven ObjectGridTable and ObjectForm components with automatic field type recognition Jan 12, 2026

Copilot finished work on behalf of hotlong January 12, 2026 02:48

hotlong requested review from Copilot and removed request for hotlong January 12, 2026 02:58

Copilot started reviewing on behalf of hotlong January 12, 2026 02:58 View session

Copilot AI reviewed Jan 12, 2026

View reviewed changes

更新 EnhancedObjectListView.tsx

f5914ad

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Copilot started work on behalf of hotlong January 12, 2026 03:58 View session

hotlong and others added 3 commits January 12, 2026 11:58

更新 object-form.tsx

40119bf

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

更新 object-grid-table.tsx

23b016d

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

更新 object-grid-table.tsx

c2a25af

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Address code review feedback: useCallback, type safety, XSS prevention

298ad6e

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Copilot AI requested a review from hotlong January 12, 2026 04:05

Copilot finished work on behalf of hotlong January 12, 2026 04:06

Copilot started work on behalf of hotlong January 12, 2026 04:06 View session

Fix custom regex precedence and improve email validation

3ae142d

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Copilot finished work on behalf of hotlong January 12, 2026 04:09

hotlong approved these changes Jan 12, 2026

View reviewed changes

hotlong added 8 commits January 12, 2026 12:13

Add '@objectql/types' dependency version 1.4.0 to pnpm-lock.yaml

30c1e98

Remove Chinese docs and update dependencies

10410ba

Deleted OBJECT_FORM_CN.md and OBJECT_GRID_TABLE_CN.md documentation files. Moved example files to a new location. Added @objectql/types dependency to apps/web/package.json.

Add '@objectos/web' dependency and update build scripts for improved …

a506188

…development workflow

Update development workflow instructions in CONTRIBUTING.md and QUICK…

b9deb09

…_REFERENCE.md

Remove outdated documentation files for AG Grid migration and ObjectG…

ed7bbfe

…ridTable integration

Add architecture overview and UI framework documentation

643d2de

Enhance field type recognition in UI framework documentation

de66a76

hotlong marked this pull request as ready for review January 12, 2026 06:16

hotlong merged commit ebd639c into main Jan 12, 2026
1 check passed

Conversation

Copilot AI commented Jan 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Review Fixes - Final Update ✅

object-form.tsx

Previously Fixed (in commit 298ad6e)

Uh oh!

hotlong commented Jan 12, 2026

Uh oh!

hotlong commented Jan 12, 2026

Uh oh!

Copilot AI commented Jan 12, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

hotlong Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

hotlong Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

hotlong Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

hotlong Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

hotlong Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

hotlong Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Copilot AI commented Jan 12, 2026 •

edited

Loading

Previously Fixed (in commit `298ad6e`)