Add Component Blocks #122
Merged
Add Component Blocks #122
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Added new Radix UI components including Badge, Button, ContextMenu, DropdownMenu, and Tooltip to enhance the UI. - Introduced a SplatViewer component for displaying Gaussian splats with built-in camera controls and UI slots. - Updated package.json and package-lock.json to include new dependencies for Radix UI and related libraries. - Created a new components.json file to define component structure and aliases for better organization. - Enhanced global styles in globals.css to support new components and improve overall design consistency. - Updated documentation to include new blocks and examples for the SplatViewer component. These changes improve the UI capabilities and documentation clarity, providing a better developer experience.
…json; update global styles in globals.css to streamline codebase and improve design consistency.
commit: |
…ponent - Included @testing-library/dom version 10.4.0 in package.json and package-lock.json for enhanced testing capabilities. - Updated MenuButton component to improve UI structure by repositioning the DropdownMenuLabel and DropdownMenuSeparator for better accessibility. - Revised documentation for Splat Viewer component to clarify its functionality and responsiveness.
- Added a new Slider component for timeline control in the Splat Viewer. - Integrated animation capabilities by introducing a Timeline component and associated animation utilities. - Updated package.json and package-lock.json to include new dependencies for Radix UI components. - Enhanced the Splat Viewer to support animation tracks, improving user interaction and experience. - Revised documentation to reflect the new features and usage examples for the Splat Viewer and Timeline components.
- Introduced a new SplatViewer component with animation capabilities, including a timeline for controlling playback. - Added utility components such as DownloadButton, FullScreenButton, and MenuButton to enhance user interaction. - Updated package.json and package-lock.json to include new dependencies for animation and UI components. - Revised documentation to reflect the new features, including usage examples and improved clarity in the _meta.tsx file. - Adjusted global styles in globals.css to support the new components and improve design consistency.
- Simplified the update method in AnimCamera by removing the cursor update line, streamlining the animation logic. - Cleaned up imports in pose.ts by removing an unused import, enhancing code clarity and maintainability.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
3D Component Blocks
This PR adds a new feature called Component Blocks - a set of high level 3d react primitives. The components are themed, composable and responsive following modern component design principles.
Each component can be installed using shadcn using a custom registry hosted on playcanvas-react.vercel.app
SplatViewer
A new composable and theme-able
<SplatViewer/>block for rendering gaussian splatspc-react-blocks.mp4
Usage
Composable & Theme-able
The SplatViewer block is composable - providing a consistent UX with customisable controls and layout. It aims to align with existing media players such as the
<video />element - supporting props such asposterfor placeholder content, but with a more flexible approach to the layout of controls - controls can be omitted or re-ordered.The block can also easily be styled and react to the system light/dark theme.
Tasks
<SplatViewer />Blockposterfor loading states