chore: Move keyboard button to UI #3289
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Skipped Deployment
|
|
Warning Rate limit exceeded@MichaelUnkey has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 15 minutes and 43 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughThe changes consolidate the import of the Changes
Sequence Diagram(s)sequenceDiagram
participant AppComponent as App Component
participant UIlib as @unkey/ui
participant KeyboardButton as KeyboardButton
AppComponent->>UIlib: import { KeyboardButton }
UIlib->>KeyboardButton: Provide component implementation
AppComponent->>KeyboardButton: Render in UI
Suggested reviewers
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 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 (
|
|
Thank you for following the naming conventions for pull request titles! 🙏 |
…board-button-to-ui
…board-button-to-ui
…board-button-to-ui
MichaelUnkey
requested review from
perkinsjr,
chronark,
mcstepp and
ogzhanolguncu
as code owners
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🔭 Outside diff range comments (1)
internal/ui/src/components/keyboard-button.tsx (1)
23-30:⚠️ Potential issueFix merging of custom
className.
Passing{ className }tocnwill include the literal"className"instead of merging the user-defined classes. You should append theclassNamestring directly:- className={cn( + className={cn( /* existing classes */, - { className }, + className, )}This ensures consumer-provided classes are applied correctly.
🧹 Nitpick comments (2)
internal/ui/src/index.ts (1)
16-16: AddKeyboardButtonto public API.
The new export makesKeyboardButtonavailable for consumers of@unkey/ui. Confirm that this aligns with the documented components and update any related type definitions if necessary.Optionally, consider sorting exports alphabetically for consistency across the index.
apps/engineering/content/design/components/buttons/keyboard-button.examples.tsx (1)
12-12: Review utility classes onKeyboardButton.
Applyingw-full m-0 p-0 gap-2to theKeyboardButtonmay conflict with its internal padding and sizing. Confirm this override is intentional for the example or adjust to maintain visual consistency.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (13)
apps/dashboard/app/(app)/logs/components/controls/components/logs-display/components/display-popover.tsx(1 hunks)apps/dashboard/components/logs/checkbox/filter-item.tsx(1 hunks)apps/dashboard/components/logs/checkbox/filters-popover.tsx(1 hunks)apps/dashboard/components/logs/control-cloud/index.tsx(1 hunks)apps/dashboard/components/logs/datetime/datetime-popover.tsx(1 hunks)apps/dashboard/components/logs/live-switch-button/index.tsx(1 hunks)apps/dashboard/components/logs/queries/queries-popover.tsx(1 hunks)apps/dashboard/components/logs/refresh-button/index.tsx(1 hunks)apps/dashboard/components/navbar-popover.tsx(1 hunks)apps/engineering/content/design/components/buttons/keyboard-button.examples.tsx(1 hunks)apps/engineering/content/design/components/keyboard-button.mdx(1 hunks)internal/ui/src/components/keyboard-button.tsx(3 hunks)internal/ui/src/index.ts(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (13)
- GitHub Check: Test Go API Local / Test (Shard 5/8)
- GitHub Check: Test Go API Local / Test (Shard 4/8)
- GitHub Check: Test Go API Local / Test (Shard 7/8)
- GitHub Check: Test Go API Local / Test (Shard 8/8)
- GitHub Check: Test Go API Local / Test (Shard 3/8)
- GitHub Check: Test Go API Local / Test (Shard 6/8)
- GitHub Check: Test Go API Local / Test (Shard 1/8)
- GitHub Check: Test Go API Local / Test (Shard 2/8)
- GitHub Check: Build / Build
- GitHub Check: Test API / API Test Local
- GitHub Check: Test Packages / Test ./internal/clickhouse
- GitHub Check: autofix
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (14)
apps/dashboard/components/logs/queries/queries-popover.tsx (1)
5-5: ConsolidateKeyboardButtonimport to the UI library.
Switched from a local import to@unkey/ui, aligning with the refactor and centralizing component usage. Ensure@unkey/uiis declared in package.json and exporting this component.apps/dashboard/app/(app)/logs/components/controls/components/logs-display/components/display-popover.tsx (1)
4-4: UseKeyboardButtonfrom@unkey/ui.
Standardizing on the external UI package improves maintainability. Verify that the import path matches the published package API.apps/dashboard/components/logs/checkbox/filters-popover.tsx (1)
3-3: Standardize import ofKeyboardButtonto@unkey/ui.
This consolidates keyboard shortcuts into the UI library. Confirm removal of the old local implementation to avoid dead code.apps/dashboard/components/logs/control-cloud/index.tsx (1)
2-2: SwitchKeyboardButtonimport to the UI package.
Aligns with the component migration. Double-check that@unkey/uiexports the expected symbol at this path.apps/dashboard/components/navbar-popover.tsx (1)
6-6: ImportButtonandKeyboardButtonfrom@unkey/ui.
Combining these imports promotes consistency. Consider grouping this import with other@unkey/uiimports and verifying the package exports.apps/dashboard/components/logs/datetime/datetime-popover.tsx (1)
9-9: LGTM! Clean import consolidation.The
KeyboardButtonimport has been successfully consolidated with other UI components from the@unkey/uipackage. This aligns perfectly with the PR objective of moving the keyboard button to the UI layer.apps/dashboard/components/logs/live-switch-button/index.tsx (1)
3-3: LGTM! Consistent import consolidation.The
KeyboardButtonimport has been properly moved to the@unkey/uipackage alongsideButton, maintaining consistency with the centralized UI component approach.apps/dashboard/components/logs/refresh-button/index.tsx (1)
3-3: LGTM! Excellent import consolidation.This change demonstrates the ideal outcome of the refactoring by consolidating all UI components (
Button,InfoTooltip,KeyboardButton) into a single import from@unkey/ui. This improves maintainability and consistency.apps/dashboard/components/logs/checkbox/filter-item.tsx (1)
3-3: LGTM! Import consolidation maintains functionality.The
KeyboardButtonimport has been successfully moved to the@unkey/uipackage alongsideButton. The component usage on line 130 maintains all accessibility attributes and functionality, ensuring a seamless migration.internal/ui/src/components/keyboard-button.tsx (4)
1-5: Ensure client-side directive and imports are correct.
The"use client";directive is required for Next.js 13+ client components, and the namespace import for React alongside the relativecnimport is appropriate.
14-19: Refactor to function expression and adddisplayName.
Converting the component to a constant function and assigningKeyboardButton.displayNameimproves consistency and aids in debugging with React DevTools.
21-27: Review ARIA attributes for semantics.
The element hasrole="presentation"but alsoaria-haspopup="true". Since this component doesn’t open a popup,aria-haspopupmay be misleading. Consider removing it or adjusting the role/attributes to accurately reflect its purpose.
37-39: Prevent markdown rendering issues.
AddingclassName="not-prose"to<kbd>elements is a solid workaround to avoid MDX/markdown parsing quirks in documentation contexts.apps/engineering/content/design/components/keyboard-button.mdx (1)
1-50: Documentation looks comprehensive.
The MDX covers the component’s purpose, props, accessibility, design considerations, and usage example. Frontmatter and content structure align well with existing documentation standards.
apps/engineering/content/design/components/buttons/keyboard-button.examples.tsx
Outdated
Show resolved
Hide resolved
…tton.examples.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
What does this PR do?
Fixes # (issue)
If there is not an issue for this, please create one first. This is used to tracking purposes and also helps use understand why this PR exists
Type of change
How should this be tested?
Checklist
Required
pnpm buildpnpm fmtconsole.logsgit pull origin mainAppreciated
Summary by CodeRabbit
New Features
Documentation
Refactor
Chores