Deprecate div/span components in favor of Shadcn semantic components #247
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
…tion Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
|
@copilot 13:56:48.094 Running build in Washington, D.C., USA (East) – iad1 |
There was a problem hiding this comment.
Pull request overview
This PR deprecates the div and span components in favor of semantic Shadcn-based components, aligning with ObjectUI's architectural goal of being a "Serializable Shadcn" system. The changes add runtime deprecation warnings and migrate over 100 documentation examples to use semantic alternatives like stack, flex, grid, card, badge, and container.
Changes:
- Added deprecation warnings to
div.tsxandspan.tsxcomponents with guidance on Shadcn alternatives - Updated component registry labels to "(Deprecated)"
- Migrated all documentation examples from
div/spanto semantic components (stack,flex,grid,card,badge,container) - Added migration guides in
div.mdxandspan.mdxdocumentation - Updated
.gitignoreto exclude backup files
Reviewed changes
Copilot reviewed 10 out of 11 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/components/src/renderers/basic/div.tsx | Added deprecation warning and updated label to indicate deprecation |
| packages/components/src/renderers/basic/span.tsx | Added deprecation warning and updated label to indicate deprecation |
| content/docs/components/basic/div.mdx | Added deprecation notice and migration guide with examples |
| content/docs/components/basic/span.mdx | Added deprecation notice and migration guide with examples |
| content/docs/guide/layout.md | Replaced div with semantic components (container) in examples |
| content/docs/blocks/forms.mdx | Migrated all div instances to stack, grid, and flex components |
| content/docs/blocks/dashboard.mdx | Migrated all div instances to stack, grid, flex, and container components |
| content/docs/blocks/marketing.mdx | Migrated all div and span instances to semantic Shadcn components |
| content/docs/blocks/ecommerce.mdx | Migrated all div instances to stack and flex components |
| content/docs/blocks/authentication.mdx | Migrated all div instances to stack, grid, and flex components |
| .gitignore | Added patterns for backup files (*.bak, *.backup, *~) |
content/docs/blocks/marketing.mdx
Outdated
| type: "div", | ||
| children: [ | ||
| type: "stack", | ||
| spacing: 2, [ |
There was a problem hiding this comment.
Critical syntax errors throughout this file that will cause JSON parsing failures:
-
Double commas after property values: Lines 49, 93, 155, 210, 288, 332, 446, 478, 510, 542, 574, 606, 652, 780, 853, 926 have patterns like
spacing: 4,,orspacing: 2,,which should be single commas. -
Malformed children property declarations: Lines 53, 159, 292, 825, 898, 971 have
spacing: 2, [which incorrectly merges the children array with the spacing property. This should be two separate lines:spacing: 2,followed bychildren: [
These errors need to be fixed before the PR can be merged as they will break JSON schema parsing.
| spacing: 2, [ | |
| spacing: 2, | |
| children: [ |
| const DivRenderer = forwardRef<HTMLDivElement, { schema: DivSchema; className?: string; [key: string]: any }>( | ||
| ({ schema, className, ...props }, ref) => { | ||
| // Deprecation warning | ||
| if (process.env.NODE_ENV !== 'production') { | ||
| console.warn( | ||
| '[ObjectUI] The "div" component is deprecated. Please use Shadcn components instead:\n' + | ||
| ' - For containers: use "card", "flex", or semantic layout components\n' + | ||
| ' - For simple wrappers: use layout components like "container", "stack", or "grid"\n' + | ||
| 'See documentation at https://www.objectui.org/docs/components for alternatives.' | ||
| ); |
There was a problem hiding this comment.
The deprecation warning will fire on every render of the component, potentially flooding the console with warnings. Consider using a pattern that warns only once per component type, such as storing a flag in a module-level Set or Map to track whether the warning has already been shown.
| const DivRenderer = forwardRef<HTMLDivElement, { schema: DivSchema; className?: string; [key: string]: any }>( | |
| ({ schema, className, ...props }, ref) => { | |
| // Deprecation warning | |
| if (process.env.NODE_ENV !== 'production') { | |
| console.warn( | |
| '[ObjectUI] The "div" component is deprecated. Please use Shadcn components instead:\n' + | |
| ' - For containers: use "card", "flex", or semantic layout components\n' + | |
| ' - For simple wrappers: use layout components like "container", "stack", or "grid"\n' + | |
| 'See documentation at https://www.objectui.org/docs/components for alternatives.' | |
| ); | |
| let hasShownDivDeprecationWarning = false; | |
| const DivRenderer = forwardRef<HTMLDivElement, { schema: DivSchema; className?: string; [key: string]: any }>( | |
| ({ schema, className, ...props }, ref) => { | |
| // Deprecation warning | |
| if (process.env.NODE_ENV !== 'production' && !hasShownDivDeprecationWarning) { | |
| console.warn( | |
| '[ObjectUI] The "div" component is deprecated. Please use Shadcn components instead:\n' + | |
| ' - For containers: use "card", "flex", or semantic layout components\n' + | |
| ' - For simple wrappers: use layout components like "container", "stack", or "grid"\n' + | |
| 'See documentation at https://www.objectui.org/docs/components for alternatives.' | |
| ); | |
| hasShownDivDeprecationWarning = true; |
| const SpanRenderer = forwardRef<HTMLSpanElement, { schema: SpanSchema; className?: string; [key: string]: any }>( | ||
| ({ schema, className, ...props }, ref) => { | ||
| // Deprecation warning | ||
| if (process.env.NODE_ENV !== 'production') { | ||
| console.warn( | ||
| '[ObjectUI] The "span" component is deprecated. Please use Shadcn components instead:\n' + | ||
| ' - For badges/labels: use "badge" component\n' + | ||
| ' - For inline text emphasis: use "text" component with appropriate className\n' + | ||
| 'See documentation at https://www.objectui.org/docs/components for alternatives.' | ||
| ); |
There was a problem hiding this comment.
The deprecation warning will fire on every render of the component, potentially flooding the console with warnings. Consider using a pattern that warns only once per component type, such as storing a flag in a module-level Set or Map to track whether the warning has already been shown.
| const SpanRenderer = forwardRef<HTMLSpanElement, { schema: SpanSchema; className?: string; [key: string]: any }>( | |
| ({ schema, className, ...props }, ref) => { | |
| // Deprecation warning | |
| if (process.env.NODE_ENV !== 'production') { | |
| console.warn( | |
| '[ObjectUI] The "span" component is deprecated. Please use Shadcn components instead:\n' + | |
| ' - For badges/labels: use "badge" component\n' + | |
| ' - For inline text emphasis: use "text" component with appropriate className\n' + | |
| 'See documentation at https://www.objectui.org/docs/components for alternatives.' | |
| ); | |
| let hasShownSpanDeprecationWarning = false; | |
| const SpanRenderer = forwardRef<HTMLSpanElement, { schema: SpanSchema; className?: string; [key: string]: any }>( | |
| ({ schema, className, ...props }, ref) => { | |
| // Deprecation warning (show only once in non-production) | |
| if (!hasShownSpanDeprecationWarning && process.env.NODE_ENV !== 'production') { | |
| console.warn( | |
| '[ObjectUI] The "span" component is deprecated. Please use Shadcn components instead:\n' + | |
| ' - For badges/labels: use "badge" component\n' + | |
| ' - For inline text emphasis: use "text" component with appropriate className\n' + | |
| 'See documentation at https://www.objectui.org/docs/components for alternatives.' | |
| ); | |
| hasShownSpanDeprecationWarning = true; |
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
📦 Bundle Size Report
Size Limits
|
|
✅ All checks passed!
|
The
divandspanrenderers are deprecated. All documentation examples now use semantic Shadcn components (Card, Flex, Grid, Stack, Badge).Changes
Component deprecation
div.tsxandspan.tsxpointing to recommended alternativesDocumentation migration (100+ replacements)
divwithspace-y-*→stackwithspacingpropdivwith grid classes →gridcomponentdivwith flex classes →flexcomponentspanfor badges →badgecomponentFiles updated
div.mdx,span.mdx: Added migration guides with code examplesforms.mdx,dashboard.mdx,authentication.mdx,ecommerce.mdx,marketing.mdx,layout.md: Migrated all examplesMigration Example
Developers using deprecated components receive console warnings during development with specific replacement recommendations.
Original prompt
✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.