Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
… colSpan, and create-mode filtering Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
This PR implements an auto-layout engine for ObjectForm that provides intelligent, zero-configuration default layouts for metadata-driven forms. The feature addresses a longstanding UX issue where all forms rendered as single-column layouts regardless of field count or type, resulting in unnecessarily long forms.
Changes:
- New
autoLayout.tsmodule with pure utility functions for column inference (≤3 fields → 1 col, ≥4 → 2 cols), auto colSpan for wide fields, and create-mode filtering of auto-generated fields - Integration in
ObjectForm.tsxwith 4-line implementation that applies auto-layout as a fallback when no explicit layout is configured - Comprehensive unit tests (26 tests) covering all utility functions, edge cases, and immutability guarantees
- ROADMAP updates documenting the completed auto-layout features
Reviewed changes
Copilot reviewed 5 out of 6 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
packages/plugin-form/src/autoLayout.ts |
New auto-layout engine with utility functions for intelligent form layout inference |
packages/plugin-form/src/__tests__/autoLayout.test.ts |
Comprehensive unit tests (26 tests) covering all auto-layout functionality |
packages/plugin-form/src/ObjectForm.tsx |
Integration of auto-layout logic into SimpleObjectForm component |
packages/plugin-form/src/index.tsx |
Exports auto-layout utility functions as part of public API |
pnpm-lock.yaml |
Lockfile regeneration with hotcrm submodule packages included |
ROADMAP.md |
Documentation of completed auto-layout features |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
| // Apply auto-layout: infer columns and colSpan when not explicitly configured | ||
| const hasSections = schema.sections?.length; | ||
| const autoLayoutResult = !hasSections | ||
| ? applyAutoLayout(formFields, objectSchema, schema.columns, schema.mode) | ||
| : { fields: formFields, columns: schema.columns }; |
There was a problem hiding this comment.
Auto-layout (including create-mode filtering of formula/summary/auto_number fields and auto colSpan for wide fields) is completely skipped when sections are defined. This creates inconsistent behavior: forms without sections get intelligent auto-generated field filtering in create mode, but forms with sections do not. Consider applying at least the filterCreateModeFields logic before the sections check to ensure consistent behavior across all form variants.
| */ | ||
| export function filterCreateModeFields( | ||
| fields: FormField[], | ||
| objectSchema: any |
There was a problem hiding this comment.
The objectSchema parameter is typed as any, which defeats TypeScript's type safety. Consider creating a proper interface or type for the object schema structure. At minimum, it should define the expected shape with a fields property that is a record of field definitions with a type property.
| export function applyAutoLayout( | ||
| formFields: FormField[], | ||
| objectSchema: any, | ||
| schemaColumns: number | undefined, |
There was a problem hiding this comment.
The objectSchema parameter is typed as any, which defeats TypeScript's type safety. Consider creating a proper interface or type for the object schema structure. At minimum, it should define the expected shape with a fields property that is a record of field definitions with a type property.
| export { | ||
| applyAutoLayout, | ||
| inferColumns, | ||
| isWideFieldType, | ||
| isAutoGeneratedFieldType, | ||
| applyAutoColSpan, | ||
| filterCreateModeFields, | ||
| } from './autoLayout'; |
There was a problem hiding this comment.
According to Rule #2 (Documentation Driven Development) in the coding guidelines, for EVERY feature implemented or refactored, you MUST update the corresponding documentation including the package README.md and content/docs/guide/*.md files. The auto-layout feature is a significant platform-level enhancement but is not documented in packages/plugin-form/README.md or the guide documentation. Users need to know about this zero-config default behavior, when it activates, and how to override it.
ObjectForm's default layout renders all fields in a single flat column regardless of count or type, producing unnecessarily long forms for typical business objects.
Auto-layout engine (
autoLayout.ts)Pure utility functions applied as a fallback when no explicit layout config is provided:
textarea,markdown,html,grid,rich-textauto-span full rowformula,summary,auto_numberfields hidden (server-computed, not user-editable)columns,colSpan, orsectionsin schema are never overriddenIntegration
4-line integration in
SimpleObjectFormbeforeFormSchemaconstruction. Skipped entirely when sections are configured.Tests
26 unit tests covering all utility functions, edge cases (empty fields, user overrides, create-mode filtering affecting column inference), and immutability guarantees.
Original prompt
💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.