Uh oh!
There was an error while loading. Please reload this page.
Enhance playground examples to demonstrate complete component library - #170
Conversation
Deployment failed with the following error: Learn More: https://vercel.com/xuyushun441-sys-projects?upgradeToPro=build-rate-limit |
- Enhanced Form example: Added proper labels, multi-column layout, select dropdown, separator, newsletter checkbox, and better styling - Enhanced Dashboard example: Added 4 statistics cards with icons and trend indicators, Recent Activity section with avatars and badges, Top Products section with categorized items - Added new Data Table example: User management table with proper columns, status indicators, and pagination - Added new E-commerce example: Product cards with images (icon placeholders), ratings, pricing, badges, and add-to-cart functionality - Improved example button labels for better clarity - All examples now demonstrate ObjectUI's complete capabilities including icons, badges, avatars, cards, grids, and proper component composition Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Pull request overview
This PR enhances the playground examples to better demonstrate ObjectUI's component library capabilities. The changes transform minimal examples into comprehensive, real-world UI patterns that showcase the library's features.
Changes:
- Enhanced form example with multi-column layout, labels, select dropdown, separator, and multiple button patterns
- Expanded dashboard example from 3 to 4 stat cards with icons and trend indicators, plus new "Recent Activity" and "Top Products" sections
- Added new Data Table example demonstrating user management with pagination
- Added new E-commerce example showing product cards with ratings, pricing, and badges
- Improved example navigation labels for better clarity
| label: "Download Report", | ||
| icon: "Download" |
There was a problem hiding this comment.
The icon prop on buttons is not currently supported by the button renderer implementation. The ButtonSchema type definition includes this property, but the button renderer in packages/components/src/renderers/form/button.tsx does not render icons. This will result in the icon being ignored when this schema is rendered.
To fix this, the button renderer needs to be updated to import and render Lucide icons based on the icon and iconPosition schema properties.
| label: "Download Report", | |
| icon: "Download" | |
| label: "Download Report" |
| type: "label", | ||
| htmlFor: "firstName", | ||
| label: "First Name" |
There was a problem hiding this comment.
The htmlFor attribute is specified in the label schema but the label renderer in packages/components/src/renderers/form/label.tsx does not pass this attribute to the underlying Label component. This breaks the association between labels and their corresponding form inputs, which is critical for accessibility.
The label renderer should be updated to pass schema.htmlFor as the htmlFor prop to the Label component.
| ], | ||
| hoverable: true, | ||
| striped: true |
There was a problem hiding this comment.
The hoverable and striped properties are defined in the TableSchema type but are not implemented in the table renderer at packages/components/src/renderers/complex/table.tsx. These properties will be ignored when the schema is rendered, resulting in tables that don't have the expected visual styling.
The table renderer should be updated to conditionally apply hover and striped row classes based on these schema properties.
| ], | |
| hoverable: true, | |
| striped: true | |
| ] |
| data: [ | ||
| { | ||
| user: "John Doe", | ||
| email: "john@example.com", | ||
| role: "Admin", | ||
| status: "Active", | ||
| actions: "•••" | ||
| }, | ||
| { | ||
| user: "Jane Smith", | ||
| email: "jane@example.com", | ||
| role: "Editor", | ||
| status: "Active", | ||
| actions: "•••" | ||
| }, | ||
| { | ||
| user: "Bob Johnson", | ||
| email: "bob@example.com", | ||
| role: "Viewer", | ||
| status: "Inactive", | ||
| actions: "•••" | ||
| }, | ||
| { | ||
| user: "Alice Williams", | ||
| email: "alice@example.com", | ||
| role: "Editor", | ||
| status: "Active", | ||
| actions: "•••" | ||
| }, | ||
| { | ||
| user: "Charlie Brown", | ||
| email: "charlie@example.com", | ||
| role: "Viewer", | ||
| status: "Active", | ||
| actions: "•••" | ||
| } | ||
| ], |
There was a problem hiding this comment.
According to ObjectUI's architectural guidelines (Rule #1: Protocol Agnostic), hardcoded data in schemas should be avoided in favor of data binding patterns. This example contains extensive hardcoded table data (user information, emails, roles, etc.) directly in the JSON schema.
While this is acceptable for a playground example to demonstrate functionality, consider adding a comment or documentation noting that in production, this data should be fetched via the DataSource interface pattern (e.g., using bind properties or data adapters) rather than being hardcoded in the schema.
Playground examples were minimal and didn't showcase ObjectUI's full capabilities. Users couldn't see how components work together or understand real-world usage patterns.
Changes
Enhanced Form Example
Enhanced Dashboard Example
New Data Table Example
New E-commerce Example
Navigation
Impact
label,select,separator,icon,badge,avatar,table,paginationExample of enhanced schema structure:
Warning
Firewall rules blocked me from connecting to one or more addresses (expand for details)
I tried to connect to the following addresses, but was blocked by firewall rules:
fonts.googleapis.com/usr/local/bin/node node /home/REDACTED/work/objectui/objectui/apps/site/node_modules/.bin/../next/dist/bin/next build(dns block)If you need me to access, download, or install something from one of these locations, you can either:
Original prompt
💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.