Chore/build configuration #77
Conversation
WalkthroughThis update restructures the build configuration and output paths for a UI components library. The package entry points and style paths in Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant DraggableList
participant ListData
participant ReactAria
participant ReactState
User->>DraggableList: Interact with list (drag, drop, delete, select)
DraggableList->>ListData: Manage list state (reorder, remove)
DraggableList->>ReactAria: Handle drag-and-drop behavior
DraggableList->>ReactState: Update selection state
DraggableList->>User: Render updated list and drag preview
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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}
tractorss
dismissed stale reviews from alcercu and coderabbitai[bot]
via
f89d9df
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (3)
src/lib/draggable-list/index.tsx (3)
17-21: Consider using a more specific type forvalueproperty.The
valueproperty inListItemis typed asany, which reduces type safety. Consider using a more specific type or making it generic to maintain type safety throughout the component.type ListItem = { id: string | number; name: string; - value: any; + value: unknown; };Or make it generic:
-type ListItem = { +type ListItem<T = unknown> = { id: string | number; name: string; - value: any; + value: T; };
98-104: Consider extracting complex conditional classNames.The conditional className logic is complex and might be difficult to maintain. Consider extracting it to a separate function or constant for better readability.
className={({ isHovered, isDragging, isSelected }) => cn( "h-11.25 w-95.5 cursor-pointer border-l-3 border-l-transparent", "flex items-center gap-4 px-4", "focus-visible:outline-klerosUIComponentsPrimaryBlue focus-visible:outline", - (isHovered || isSelected) && "bg-klerosUIComponentsMediumBlue", - isSelected && "border-l-klerosUIComponentsPrimaryBlue", - isDragging && "cursor-grabbing opacity-60", + { + "bg-klerosUIComponentsMediumBlue": isHovered || isSelected, + "border-l-klerosUIComponentsPrimaryBlue": isSelected, + "cursor-grabbing opacity-60": isDragging + } ) }
41-49: Add a confirmation mechanism before deleting items.The current implementation immediately deletes items without confirmation, which could lead to accidental deletions. Consider adding a confirmation step or an undo mechanism.
You could implement a confirmation dialog or a temporary state that allows users to undo deletions before they're permanently applied.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro (Legacy)
⛔ Files ignored due to path filters (2)
src/assets/svgs/drag-and-drop.svgis excluded by!**/*.svgsrc/assets/svgs/trash.svgis excluded by!**/*.svg
📒 Files selected for processing (2)
src/lib/draggable-list/index.tsx(1 hunks)src/stories/draggable-list.stories.tsx(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- src/stories/draggable-list.stories.tsx
🧰 Additional context used
🧬 Code Graph Analysis (1)
src/lib/draggable-list/index.tsx (1)
src/utils/index.ts (1)
cn(4-6)
🔇 Additional comments (1)
src/lib/draggable-list/index.tsx (1)
1-139: Overall, this is a well-structured component with good features.The DraggableList component effectively implements drag-and-drop functionality with appropriate accessibility considerations through react-aria-components. The code is generally well-organized with clear type definitions and a clean implementation pattern.
Key strengths:
- Good separation of concerns
- Well-documented props interface
- Proper use of accessibility components
- Clean conditional rendering
- Responsive UI elements (hover states, drag handles)
The suggestions above will help improve type safety, performance, and error handling.
|
PR-Codex overview
This PR introduces enhancements to the
DraggableListcomponent, including new props and a custom drag preview feature. It also updates styles and configuration files, and replaces a CSS import. Additionally, a new SVG icon is added.Detailed summary
DraggableListexport inlib/index.ts.BreadcrumbPropsto useReact.ReactNode.README.md.draggable-list.stories.tsxfor Storybook.DraggableListcomponent with drag-and-drop functionality.vite.config.tsto include new input handling.package.jsonversion and dependencies.vite.config.theme.tssrc/lib/index.ts.Summary by CodeRabbit