Skip to content

Add default props to all components to prevent collapse in designer - #4

Merged
huangyiirene merged 5 commits into
mainfrom
copilot/add-initial-state-to-components
Jan 13, 2026
Merged

Add default props to all components to prevent collapse in designer#4
huangyiirene merged 5 commits into
mainfrom
copilot/add-initial-state-to-components

Conversation

CopilotAI commented Jan 13, 2026

Copy link
Copy Markdown
Contributor

Components collapsed into invisible heaps when dragged into the designer due to missing initial dimensions and content.

Changes

Added defaultProps to 40+ component registrations across:

  • Basic (div, text, span, separator) - added minimum dimensions and padding
  • Form (button, input, checkbox, select, textarea, etc.) - added labels, placeholders, sample data
  • Layout (card, tabs) - added titles, descriptions, sample content
  • Data display (alert, avatar, badge) - added sample text and proper sizing
  • Overlay (dialog, drawer, popover, sheet, tooltip, etc.) - added trigger buttons and content
  • Complex (table, carousel, resizable, scroll-area) - added complete sample data structures
  • Navigation (sidebar, header-bar) - added default menu structures
  • Feedback (progress, skeleton, toaster) - added initial values and dimensions

Example before/after:

// Before - component collapses when droppedComponentRegistry.register('input',InputComponent,{label: 'Input Field',inputs: [...]});// After - component appears with proper dimensions and contentComponentRegistry.register('input',InputComponent,{label: 'Input Field',inputs: [...],defaultProps: {label: 'Label',placeholder: 'Enter text...',inputType: 'text',id: 'input-field'}});

The Canvas component already spreads defaultProps when creating nodes (lines 67-71), so no designer changes needed.

Tests added to verify all components have defaults and maintain proper structure.

Original prompt

每一个组件都应该有一个初始状态,否则拖到设计器里面缩成一团


💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

CopilotAIand others added 3 commits January 13, 2026 14:00
Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>
Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>
Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>
CopilotAI changed the title [WIP] Add initial state to all componentsAdd default props to all components to prevent collapse in designerJan 13, 2026
@huangyiirene
huangyiirene requested review from Copilot and removed request for huangyiireneJanuary 13, 2026 14:22

CopilotAI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR adds defaultProps to component registrations to prevent components from collapsing when dragged into the designer. Components now appear with meaningful initial dimensions, content, and configurations.

Changes:

  • Added defaultProps with initial dimensions, labels, placeholders, and sample content to 40+ component registrations
  • Added defaultChildren to container components that require nested elements
  • Added comprehensive test coverage for default props validation

Reviewed changes

Copilot reviewed 42 out of 42 changed files in this pull request and generated no comments.

Show a summary per file
FileDescription
packages/renderer/src/renderers/overlay/tooltip.tsxAdded default trigger button, content text, delay, and side positioning
packages/renderer/src/renderers/overlay/sheet.tsxAdded default title, description, trigger button, and sample content
packages/renderer/src/renderers/overlay/popover.tsxAdded default trigger button, content, alignment, and side positioning
packages/renderer/src/renderers/overlay/hover-card.tsxAdded default trigger button, hover content, and side positioning
packages/renderer/src/renderers/overlay/dropdown-menu.tsxAdded default trigger button and sample menu items with separator
packages/renderer/src/renderers/overlay/drawer.tsxAdded default title, description, trigger button, and content
packages/renderer/src/renderers/overlay/dialog.tsxAdded default title, description, modal flag, trigger button, and content
packages/renderer/src/renderers/overlay/context-menu.tsxAdded default menu items with separator and trigger text
packages/renderer/src/renderers/overlay/alert-dialog.tsxAdded default title, description, action/cancel text, and trigger button
packages/renderer/src/renderers/navigation/sidebar.tsxAdded default props and children structure for sidebar components
packages/renderer/src/renderers/navigation/header-bar.tsxAdded default breadcrumb structure
packages/renderer/src/renderers/layout/tabs.tsxAdded default tab items with values and content
packages/renderer/src/renderers/layout/card.tsxAdded default title, description, and width class
packages/renderer/src/renderers/form/toggle.tsxAdded default label, variant, and size for toggle components
packages/renderer/src/renderers/form/textarea.tsxAdded default label, placeholder, and ID
packages/renderer/src/renderers/form/switch.tsxAdded default label and ID
packages/renderer/src/renderers/form/slider.tsxAdded default value, range, and width
packages/renderer/src/renderers/form/select.tsxAdded default label, placeholder, and sample options
packages/renderer/src/renderers/form/radio-group.tsxAdded default ID and sample radio items
packages/renderer/src/renderers/form/input.tsxAdded default label, placeholder, type, and ID
packages/renderer/src/renderers/form/input-otp.tsxAdded default max length
packages/renderer/src/renderers/form/checkbox.tsxAdded default label and ID
packages/renderer/src/renderers/form/calendar.tsxAdded default mode and border styling
packages/renderer/src/renderers/form/button.tsxAdded default label, variant, and size
packages/renderer/src/renderers/feedback/toaster.tsxAdded default provider type
packages/renderer/src/renderers/feedback/skeleton.tsxAdded default width, height, and styling
packages/renderer/src/renderers/feedback/progress.tsxAdded default value and width
packages/renderer/src/renderers/disclosure/collapsible.tsxAdded default trigger button, content, and width
packages/renderer/src/renderers/disclosure/accordion.tsxAdded default accordion items with content
packages/renderer/src/renderers/data-display/badge.tsxAdded default label and variant
packages/renderer/src/renderers/data-display/avatar.tsxAdded default fallback initials and alt text
packages/renderer/src/renderers/data-display/alert.tsxAdded default title, description, and variant
packages/renderer/src/renderers/complex/table.tsxAdded default caption, columns, and sample data rows
packages/renderer/src/renderers/complex/scroll-area.tsxAdded default dimensions, orientation, and sample content
packages/renderer/src/renderers/complex/resizable.tsxAdded default direction, dimensions, and sample panels
packages/renderer/src/renderers/complex/carousel.tsxAdded default orientation, arrows, and sample slides
packages/renderer/src/renderers/basic/text.tsxAdded default text content
packages/renderer/src/renderers/basic/span.tsxAdded default padding and child text
packages/renderer/src/renderers/basic/separator.tsxAdded default orientation and margin
packages/renderer/src/renderers/basic/div.tsxAdded default padding, border, and minimum height
packages/renderer/src/tests/registry.test.tsxAdded tests for defaultProps and defaultChildren support
packages/renderer/src/tests/defaultProps.test.tsxAdded comprehensive test suite validating all component defaults

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@github-actions

Copy link
Copy Markdown
Contributor

✅ All checks passed!

  • ✅ Type check passed
  • ✅ Tests passed
  • ✅ Lint check completed

@huangyiirene
huangyiirene marked this pull request as ready for review January 13, 2026 14:26
@huangyiirene
huangyiirene merged commit 0c94c51 into mainJan 13, 2026
5 checks passed
CopilotAI added a commit that referenced this pull request Jan 24, 2026
- Fix handleExportCSV to guard on gridRef.current?.api (issue #1)
- Add dedicated onContextMenuAction callback instead of overloading onCellClicked (issue #2)
- Remove icon property from customItems to prevent HTML injection (issue #3)
- Remove validation claim from README - only basic AG Grid editing (issue #4)
- Add test assertions for all new inputs (editable, exportConfig, etc.) (issue #5)
- Fix onExport type to only support 'csv' format (issue #6)
- Remove unused ColumnConfig properties (autoSize, groupable) (issue #9)
- Type schema props with proper interfaces instead of 'any' (issue #10)
- Update export description to only mention CSV (issue #11)
- Add AG Grid Community vs Enterprise section to docs (issue #8)
- Update README and docs with new callback and clarifications
All tests pass (8/8), lint clean (0 errors)
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
CopilotAI added a commit that referenced this pull request Feb 28, 2026
…y chip (#7)
- ConfigRow: add label maxWidth (45%), text truncation with title tooltip for both label and value
- Toolbar section: add summary chip showing "X of Y enabled" at top of expanded section
- Add toolbarEnabledCount i18n key to all 10 locales
- Update view-config-schema tests for new _toolbarSummary field
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
os-zhuang added a commit that referenced this pull request Jun 29, 2026
… AI slot (#2060)
* feat(console): Studio WYSIWYG design surface dev harness (ADR-0080 slice-1)
Additive /dev/studio-design route + DevStudioDesign four-zone shell reusing
getMetadataPreview/getMetadataInspector + SchemaRenderer. Touches no existing surface.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
* refactor(app-shell): promote Studio design surface + open-core AI slot (ADR-0080)
Move the design surface out of the apps/console dev harness into
@object-ui/app-shell as StudioDesignSurface. The left AI copilot becomes an
injected aiSlot prop — OSS renders three zones (nav/canvas/inspector); the
cloud edition injects AI. Repoint /dev/studio-design at the promoted component.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
* feat(app-shell): wire Studio design surface to real metadata (ADR-0080 #3/#4)
Replace the fixture with the shared MetadataClient: the single-App nav lists
real pages, clicking loads that surface into the canvas (real PagePreview +
live data), and the toolbar saves drafts / publishes through the real pipeline.
Route moves inside ProtectedRoute for the connected client + data adapter.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
* refactor(app-shell): route Studio as /studio/:packageId/{data,automations,interfaces}
Three pillars are now real routes scoped to the package being designed. The
shell renders the package + pillar route links; Interfaces drives the real
MetadataClient (nav/canvas/inspector + draft/publish), Data/Automations are
scaffolded placeholders pending the App-nav + object/flow surface reuse map.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
* feat(app-shell): real 3-pillar Studio — App-nav Interfaces + Data + Automations
Interfaces: load the real App by package id and render its navigation tree
(groups + typed leaves page/object/dashboard/report); clicking loads the bound
surface (PagePreview/DashboardPreview/object-grid). Data: object list + record
grid (object-grid) + field table. Automations: flow list + FlowPreview graph.
All reuse existing renderers — no new editor code.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
* feat(app-shell): Data pillar = primary full-height record grid (Airtable parity)
Drop the redundant field table — the record grid's columns ARE the fields.
Data mode now reads like a spreadsheet (objects on the left, the records
directly viewable), matching Airtable's Data tab.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
* feat(app-shell): object surface = object-view (our list-view model, not raw grid)
Per design direction, the Data pillar (and Interfaces object items) render an
object via object-view — its named list views + ViewSwitcher + record actions,
falling back to a grid — instead of the raw object-grid. Matches our view model.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
* feat(app-shell): scope Data/Automations lists to the current package (#9)
Pass packageId into DataPillar/AutomationsPillar and use client.list(type,
{ packageId }) (=> ?package=) so each pillar lists only the current package's
objects/flows, not all env metadata.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
* fix(app-shell): render flow preview via createElement (satisfy react-hooks/static-components)
AutomationsPillar assigned `const Preview = getMetadataPreview(...)` and rendered
it as JSX, which react-hooks/static-components flags as a component created during
render. Render via React.createElement instead, and derive the type from the
selected flow (current.type) to mirror InterfacesPillar.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---------
Co-authored-by: Jack Zhuang <277994282+os-zhuang@users.noreply.github.com>
Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
This was referenced Jul 13, 2026
@github-actionsgithub-actionsBot mentioned this pull request Jul 13, 2026
os-zhuang added a commit that referenced this pull request Jul 14, 2026
…h (ADR-0057 UX, #2477) (#2480)
- #4: transition the rail width (200ms ease) on Live Canvas auto-maximize/tuck
instead of snapping; suppressed during a manual resize drag (width tracks the
pointer 1:1).
- #6: parameterize the width storage key (persistWidthKey); the Studio dock
uses its own so a wide console chat no longer squeezes the design canvas.
Refs #2477 (ADR-0057 UX follow-ups)
Co-authored-by: Jack Zhuang <277994282+os-zhuang@users.noreply.github.com>
Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants

@huangyiirene@qq9340100