Feat/drawer #195
Feat/drawer #195
Conversation
…ate for the drawer page and example from shadcn
|
@wangshu24 is attempting to deploy a commit to the OrcDev Team on Vercel. A member of the Team first needs to authorize it. |
|
Caution Review failedThe pull request is closed. WalkthroughA new 8-bit styled Drawer UI component was introduced, including its implementation, documentation, registry entry, and navigation integration. The Drawer and its subcomponents are wrapped to apply a retro pixelated font and custom styles. An example usage and documentation page were added, and relevant metadata and navigation updates were made. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant DrawerTrigger
participant Drawer
participant DrawerContent
participant DrawerFooter
User->>DrawerTrigger: Click "Open Drawer"
DrawerTrigger->>Drawer: Open drawer panel
Drawer->>DrawerContent: Render content (goal, chart, controls)
User->>DrawerContent: Adjust goal (increment/decrement)
DrawerContent->>DrawerContent: Update goal state, update chart
User->>DrawerFooter: Click "Submit" or "Cancel"
DrawerFooter->>Drawer: Close drawer (on Cancel or Submit)
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
app/docs/components/drawer/page.tsxOops! Something went wrong! :( ESLint: 9.26.0 ESLint couldn't find the plugin "eslint-plugin-react-hooks". (The package "eslint-plugin-react-hooks" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-react-hooks" was referenced from the config file in " » eslint-config-next/core-web-vitals » /node_modules/.pnpm/eslint-config-next@15.3.2_eslint@9.26.0_jiti@2.4.2__typescript@5.8.3/node_modules/eslint-config-next/index.js". If you still can't figure out the problem, please see https://eslint.org/docs/latest/use/troubleshooting. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (5)
components/examples/drawer.tsx (2)
19-59: Consider using dynamic data for the chartThe chart data is statically defined and doesn't reflect the user's current goal selection. This is a missed opportunity to show how the chart could update based on user input.
You could make the chart more interactive by having it reflect the current goal value:
-const data = [ - { - goal: 400, - }, - // ... other static data points -] +const generateData = (currentGoal) => { + // Generate some data points around the current goal + return [ + { goal: currentGoal - 100 }, + { goal: currentGoal - 50 }, + { goal: currentGoal }, + { goal: currentGoal + 50 }, + { goal: currentGoal - 30 }, + // ... other dynamic data points + ]; +}Then in your component:
-<BarChart data={data}> +<BarChart data={generateData(goal)}>
126-131: Consider implementing Submit button functionalityThe Submit button currently doesn't have any functionality implemented. While this might be intentional for a demo, consider adding at least a placeholder action for completeness.
-<Button>Submit</Button> +<Button onClick={() => alert(`Goal set to ${goal} calories/day`)}>Submit</Button>components/ui/8bit/drawer.tsx (2)
61-80: Remove unnecessary fragmentsThe DrawerTrigger component is wrapped in empty React fragments (
<>...</>) which aren't necessary since there's only a single child element.function DrawerTrigger({ className, children, ...props }: React.ComponentProps<typeof DrawerPrimitive.Trigger>) { return ( - <> <ShadcnDrawerTrigger className={cn( "border-foreground dark:border-ring hover:bg-transparent active:bg-transparent focus:bg-transparent rounded-none border-4 focus:border-foreground hover:border-foreground dark:focus:border-ring bg-transparent data-[state=open]:bg-transparent data-[state=open]:border-foreground dark:data-[state=open]:border-ring", className, pressStart.className )} {...props} > {children} </ShadcnDrawerTrigger> - </> ) }
82-95: Remove empty string from className concatenationIn DrawerContent, DrawerHeader, and DrawerFooter components, you're passing an empty string as the first argument to the
cn()function, which is unnecessary.// For DrawerContent, DrawerHeader, and DrawerFooter components: - className={cn("", className, pressStart.className)} + className={cn(className, pressStart.className)}Also applies to: 97-110, 112-125
app/docs/components/drawer/page.tsx (1)
45-48: Remove unnecessary commentThere's a placeholder comment
{/* {Demo here} */}that's no longer needed since the example component is already implemented.<div className="flex items-center justify-center min-h-[400px] relative"> - {/* {Demo here} */} <DrawerExample /> </div>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Cache: Disabled due to data retention organization setting
Knowledge Base: Disabled due to data retention organization setting
⛔ Files ignored due to path filters (1)
public/assets/8bitcn-drawer-light.pngis excluded by!**/*.png
📒 Files selected for processing (37)
app/docs/components/drawer/page.tsx(1 hunks)components/examples/drawer.tsx(1 hunks)components/ui/8bit/drawer.tsx(1 hunks)config/nav-items.ts(1 hunks)lib/metadata.ts(1 hunks)public/r/8bit-accordion.json(1 hunks)public/r/8bit-alert.json(1 hunks)public/r/8bit-avatar.json(1 hunks)public/r/8bit-badge.json(1 hunks)public/r/8bit-breadcrumb.json(1 hunks)public/r/8bit-calendar.json(1 hunks)public/r/8bit-carousel.json(1 hunks)public/r/8bit-chart.json(1 hunks)public/r/8bit-combo-box.json(1 hunks)public/r/8bit-command.json(1 hunks)public/r/8bit-context-menu.json(1 hunks)public/r/8bit-drawer.json(1 hunks)public/r/8bit-dropdown-menu.json(1 hunks)public/r/8bit-label.json(1 hunks)public/r/8bit-login-form-2.json(2 hunks)public/r/8bit-login-form-with-image.json(2 hunks)public/r/8bit-login-form.json(2 hunks)public/r/8bit-login-page.json(2 hunks)public/r/8bit-menubar.json(1 hunks)public/r/8bit-pagination.json(1 hunks)public/r/8bit-popover.json(1 hunks)public/r/8bit-scroll-area.json(1 hunks)public/r/8bit-select.json(1 hunks)public/r/8bit-sheet.json(1 hunks)public/r/8bit-sidebar.json(1 hunks)public/r/8bit-skeleton.json(1 hunks)public/r/8bit-slider.json(1 hunks)public/r/8bit-switch.json(1 hunks)public/r/8bit-table.json(1 hunks)public/r/8bit-toggle-group.json(1 hunks)public/r/8bit-tooltip.json(1 hunks)registry.json(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
components/ui/8bit/drawer.tsx (1)
lib/utils.ts (1)
cn(4-6)
🔇 Additional comments (44)
public/r/8bit-label.json (1)
13-13: Purely formatting update (CRLF normalization).
The only change here is converting the embeddedcontentfield’s line endings to CRLF to match the rest of the registry entries. No functional or API differences are introduced.public/r/8bit-carousel.json (1)
13-13: Approve line ending conversion.
This change only switches the embeddedcontentfield’s line endings from LF to CRLF (\r\n) for the registry entry ofcomponents/ui/8bit/carousel.tsx. No functional or structural logic was altered.public/r/8bit-login-form.json (2)
16-16: Formatting Update: Convert to Windows-style CRLF
Thelogin-form.tsxcontent string now uses CRLF (\r\n) line endings exclusively. No functional or behavioral changes—this aligns with the other registry components in this PR.
40-40: Formatting Update: Convert to Windows-style CRLF
Thelabel.tsxcontent string now uses CRLF (\r\n) line endings exclusively. No functional or behavioral changes—consistent with the rest of the registry files.public/r/8bit-accordion.json (1)
13-13: Formatting-only change: CRLF line endings
This update converts thecomponents/ui/8bit/accordion.tsxcontent from LF to CRLF. There are no logical or API changes to the 8-bit Accordion component.public/r/8bit-alert.json (1)
13-13: Formatting-only change: CRLF line endings
This change standardizes thecomponents/ui/8bit/alert.tsxfile to use CRLF line endings without altering any component logic or styling.public/r/8bit-table.json (1)
13-13: Formatting-only change: CRLF line endings
Line endings incomponents/ui/8bit/table.tsxwere converted from LF to CRLF. No functional updates were introduced.public/r/8bit-dropdown-menu.json (1)
13-13: Formatting-only change: CRLF line endings
Thecomponents/ui/8bit/dropdown-menu.tsxfile has been reformatted to CRLF line endings only, with no changes to behavior or APIs.public/r/8bit-slider.json (1)
11-11: Formatting-only change: CRLF line endings
This update converts thecomponents/ui/8bit/slider.tsxcontent to CRLF line endings. There are no modifications to the component’s implementation.public/r/8bit-calendar.json (1)
13-13: Registry entry: only line ending normalization
This update converts the embeddedcomponents/ui/8bit/calendar.tsxcontent from LF to CRLF. No schema, logic, or dependency changes were introduced.public/r/8bit-switch.json (1)
13-13: Registry entry: only line ending normalization
This change switches the embeddedcomponents/ui/8bit/switch.tsxcontent to CRLF line endings. There are no functional or API modifications.public/r/8bit-scroll-area.json (1)
11-11: Registry entry: only line ending normalization
Thecomponents/ui/8bit/scroll-area.tsxcontent has been converted from LF to CRLF. No behavior or interface changes.public/r/8bit-skeleton.json (1)
13-13: Registry entry: only line ending normalization
Only the embeddedcomponents/ui/8bit/skeleton.tsxwas reformatted to use CRLF. No functional changes to the skeleton component.public/r/8bit-menubar.json (1)
11-11: Registry entry: only line ending normalization
This update standardizes the embeddedcomponents/ui/8bit/menubar.tsxto CRLF endings without altering any component logic or exports.public/r/8bit-tooltip.json (1)
13-13: Formatting-only change: CRLF normalization for tooltip component
This update converts the line endings in thecomponents/ui/8bit/tooltip.tsxcontent string from LF to CRLF. No functional or semantic changes were introduced.public/r/8bit-badge.json (1)
13-13: Formatting-only change: CRLF normalization for badge component
This change standardizes the line endings in thecomponents/ui/8bit/badge.tsxcontent string to CRLF without altering any logic or exports.public/r/8bit-select.json (1)
13-13: Formatting-only change: CRLF normalization for select component
The line endings in thecomponents/ui/8bit/select.tsxcontent string have been converted to CRLF. There are no code or API modifications.public/r/8bit-breadcrumb.json (1)
13-13: Formatting-only change: CRLF normalization for breadcrumb component
This hunk updates thecomponents/ui/8bit/breadcrumb.tsxcontent string to use CRLF line endings consistently. Functionality remains unchanged.public/r/8bit-combo-box.json (1)
21-21: Formatting-only change: CRLF normalization for popover component
Thecomponents/ui/8bit/popover.tsxcontent string now uses CRLF line endings. No behavioral or interface changes were made.public/r/8bit-toggle-group.json (1)
13-13: Formatting-only change: LF → CRLF line endings
This update normalizes the registry content to use Windows-style CRLF without altering any component logic or exports.public/r/8bit-popover.json (1)
13-13: Formatting-only change: LF → CRLF line endings
Line endings were converted to CRLF in the serialized popover content. No functional impact.public/r/8bit-login-form-2.json (2)
16-16: Formatting-only change: LF → CRLF line endings
Normalized the login-form-2 block file content to CRLF. No behavior change.
40-40: Formatting-only change: LF → CRLF line endings
Normalized the label component content to CRLF. No functional modifications.public/r/8bit-login-form-with-image.json (2)
16-16: Formatting-only change: LF → CRLF line endings
Converted the login-form-with-image block content to CRLF; component logic remains unchanged.
40-40: Formatting-only change: LF → CRLF line endings
Updated the label file content to CRLF; no changes to functionality.public/r/8bit-context-menu.json (1)
11-11: Formatting-only change: LF → CRLF line endings
Line endings in the context-menu registry were normalized to CRLF without affecting component behavior.public/r/8bit-pagination.json (1)
13-13: No semantic changes; purely a line ending normalization to CRLF.public/r/8bit-login-page.json (1)
22-22: No semantic changes; purely a line ending normalization to CRLF.public/r/8bit-avatar.json (1)
13-13: No semantic changes; purely a line ending normalization to CRLF.public/r/8bit-sidebar.json (1)
13-13: No semantic changes; purely a line ending normalization to CRLF.lib/metadata.ts (1)
26-26: Add drawerMetaData export for 8-bit Drawer documentation.
This new constantdrawerMetaDataaligns with existing metadata entries and points to the correct asset path for the Drawer component’s preview image.public/r/8bit-sheet.json (1)
13-13: Skip formatting-only change
This update only converts line endings in the registry item to CRLF. There are no functional or schema changes.config/nav-items.ts (1)
77-81: Approve Drawer navigation entry
The new{ title: "Drawer", url: "/docs/components/drawer", new: true }entry follows the existing pattern. Note that thecomponents.sort(...)call innavMainensures items are alphabetically ordered at runtime.public/r/8bit-command.json (1)
13-13: Skip formatting-only change
This registry update simply switches line endings to CRLF in thecontentfield. No logical modifications were made.public/r/8bit-chart.json (1)
11-11: Skip formatting-only changes
Both entries only convert line endings to CRLF in theircontentstrings. No functional changes occurred.Also applies to: 17-17
registry.json (1)
744-758: Approve new 8bit-drawer registry entry
The"8bit-drawer"item correctly specifies"registryDependencies": ["drawer"]and points tocomponents/ui/8bit/drawer.tsx. This matches the pattern of other 8-bit components and will register the Drawer component properly.public/r/8bit-drawer.json (1)
1-18: LGTM! Well-structured registry item for the 8bit drawer component.The registry item is properly configured with all required fields:
- Name, type, and description
- Correct dependency on the base "drawer" component
- Full component implementation with appropriate styling
The component itself wraps and extends the base drawer components with 8-bit styling, which is a clean approach for creating a themed variant.
components/examples/drawer.tsx (2)
61-66: Good implementation of goal adjustment logicThe adjustment logic efficiently uses Math.max/min to constrain the goal value between 200 and 400, ensuring the state stays within valid bounds.
81-108: Great accessibility implementationThe buttons include screen-reader-only text through the
sr-onlyclass, which improves accessibility for users with screen readers while maintaining a clean visual design.components/ui/8bit/drawer.tsx (2)
18-21: Good implementation of the 8-bit fontThe Press_Start_2P font is correctly initialized with appropriate weight and subset options, ensuring the 8-bit retro aesthetic is consistently applied across the component.
23-29: Clean re-export of base componentsThe simple aliasing of base drawer components without additional modifications is clean and effective for components that don't need custom styling beyond the font.
app/docs/components/drawer/page.tsx (3)
12-18: Well-configured metadataThe metadata is properly set up with title, description, and OpenGraph image, which will improve SEO and social media sharing appearance.
55-57: Great use of environment variables for package URLUsing environment variables for the package URL is a good practice as it allows for flexibility across different environments.
63-198: Comprehensive usage exampleThe code snippet provides a complete reference implementation including imports, state management, UI rendering, and interactivity. This will greatly help developers understand how to use the component.
…t and modify drawer handle
I've made the changes similar to how sheet handles the direction, though not including the top direction/side because of how finicky drawer behaves when applied top direction. Maybe we can log that as an issue in a ticket and fix that after/enhance after. |
|
@wangshu24 added just couple of changes, merging! good job! ⚔️ |
* setting up 8bit version of the drawer component, setting up the template for the drawer page and example from shadcn * made drawer component for content, trigger, footer and header into 8bit pixel style * added example of drawer component, metadata graph image and ran registry build * fix issue with dark mode button border not yellow * reran registry build * rewrite content component to make use of vaul primitive drawer content and modify drawer handle * reran registry build * remove top side for drawer content * reran registry build * refactor: update drawer and sheet components styling and positioning * feat(drawer) change example code --------- Co-authored-by: OrcDev <urosmiric88@gmail.com>
* added syntax highlight * Feat/drawer (#195) * setting up 8bit version of the drawer component, setting up the template for the drawer page and example from shadcn * made drawer component for content, trigger, footer and header into 8bit pixel style * added example of drawer component, metadata graph image and ran registry build * fix issue with dark mode button border not yellow * reran registry build * rewrite content component to make use of vaul primitive drawer content and modify drawer handle * reran registry build * remove top side for drawer content * reran registry build * refactor: update drawer and sheet components styling and positioning * feat(drawer) change example code --------- Co-authored-by: OrcDev <urosmiric88@gmail.com> * chore: add GitHub Sponsors funding configuration file (#197) * docs: add GitHub sponsor badge to README (#198) * refactor: update React.ElementRef to React.ComponentRef in UI components for better type safety (#199) * Feat/toast (#200) * feat(registry) add toast * refactor(toast) change to 8-bit toast * feat(installation-commands) replace sonner with 8-bit toast (#201) * chore: latest dependencies (#202) * Feat navigation menu (#203) * feat: navigation menu * feat: navigation menu fix code rabbit ai comments * feat: navigation menu - create better, more consistent border behavior - fix broken links in demo * feat: navigation menu fix code rabbit ai comments * feat: navigation menu - Address review comment * feat: navigation menu - update registry file * feat(nav-items) add new tag to navigation menu (#204) * Feat/themes (#205) * feat(app) add themes page * feat(themes) add all retro themes * feat: add theme copy dialog and refactor theme management with TypeScript enums * style: update calendar sizing, code snippet layout and theme selector text colors * style: update theme selector UI and adjust accent color values across themes * style: adjust accent and muted color values in dark and light themes * feat(themes) add metadata (#206) * chore: add semicolons and consistent formatting across components (#207) * chore: latest dependencies (#208) * feat(button) add local font for react support (#209) * refactor: replace custom font with Google Fonts for Press Start 2P (#210) * refactor: move retro font to external CSS and simplify button styling (#211) * refactor(app) make all components work on react (#212) * style: add type prefix to VariantProps imports across components (#213) * refactor: remove new badges from nav items (#214) * refactor: remove new badge from mobile navigation items (#215) * fix: adjust YAxis width from 45 to 46 pixels in chart component (#216) * feat(registry) add bar chart component (#217) * feat: add authentication and charts blocks pages with example components (#218) * added syntax highlight * Removed unused code * re added Max height control --------- Co-authored-by: Elias Tran <trandinhphuc1997@gmail.com> Co-authored-by: OrcDev <urosmiric88@gmail.com> Co-authored-by: YangZhao <bit.zhaoyang512@gmail.com>
2 participants
Add 8bit Drawer component along with an example page
Summary by CodeRabbit
New Features
Chores