Skip to content

update shadcn components#362

Merged
ingoau merged 2 commits intomainfrom
361-update-shadcn-components
Jun 12, 2025
Merged

update shadcn components#362
ingoau merged 2 commits intomainfrom
361-update-shadcn-components

Conversation

@ingoau
Copy link
Member

@ingoau ingoau commented Jun 12, 2025

Summary by CodeRabbit

  • New Features

    • Added collapsible UI components with both generic and descriptive naming for easier use.
  • Bug Fixes

    • Corrected sidebar width CSS variable usage for improved layout consistency.
    • Improved handling and binding for file input types in forms.
    • Fixed fallback behavior for command group values.
  • Refactor

    • Simplified mobile detection logic for better performance and maintainability.
    • Streamlined sidebar open state management for consistency.
  • Style

    • Updated command item and link item styles, removing scaling transitions and improving spacing.
    • Enhanced SVG icon styling and spacing in command link items.
  • Chores

    • Updated icon import paths to use a new package for consistency.
  • Documentation

    • Removed unused textarea event type definitions for cleaner exports.

@ingoau ingoau linked an issue Jun 12, 2025 that may be closed by this pull request
@ingoau ingoau merged commit 8b44221 into main Jun 12, 2025
3 of 4 checks passed
@coderabbitai
Copy link
Contributor

coderabbitai bot commented Jun 12, 2025

Caution

Review failed

The pull request is closed.

Walkthrough

The changes update import paths for icon components throughout the UI library, refactor several components for improved type safety and code clarity, and introduce or remove certain exports. Notable updates include enhanced input handling for file types, new exports for collapsible components, and simplification of the mobile detection hook and sidebar provider logic.

Changes

File(s) Change Summary
.../breadcrumb/breadcrumb-ellipsis.svelte, .../breadcrumb/breadcrumb-separator.svelte, .../command/command-input.svelte, .../dropdown-menu/dropdown-menu-checkbox-item.svelte, .../dropdown-menu/dropdown-menu-radio-item.svelte, .../dropdown-menu/dropdown-menu-sub-trigger.svelte, .../select/select-item.svelte, .../select/select-scroll-down-button.svelte, .../select/select-scroll-up-button.svelte, .../select/select-trigger.svelte, .../sheet/sheet-content.svelte, .../sidebar/sidebar-trigger.svelte Updated icon import paths from lucide-svelte/icons/... to @lucide/svelte/icons/....
.../command/command-group.svelte Added optional value prop; set group value to first of value, heading, or a generated ID.
.../command/command-item.svelte Removed scaling and transition classes from item rendering.
.../command/command-link-item.svelte Removed scaling/transition classes, added gap-2 and SVG-specific CSS.
.../input/input.svelte Added discriminated union typing for file vs. non-file input; conditional rendering for file input.
.../sidebar/sidebar-provider.svelte Removed controlledOpen prop and related logic; always updates internal state before callback.
.../sidebar/sidebar.svelte Changed CSS variable usage to var(--sidebar-width) syntax; updated Sheet.Root binding to Svelte's two-way binding.
.../sonner/sonner.svelte Changed props destructuring to use rest operator with type annotation.
.../textarea/index.ts Removed FormTextareaEvent and TextareaEvents type declarations and exports.
.../hooks/is-mobile.svelte.ts Refactored IsMobile to extend MediaQuery, removing manual state and event handling.
.../index.ts (new file) Added exports for collapsible components from bits-ui, with both generic and descriptive aliases.

Sequence Diagram(s)

Collapsible Component Exports (New Feature)

sequenceDiagram
    participant Consumer
    participant UIIndex as src/lib/components/ui/index.ts
    participant BitsUI

    Consumer->>UIIndex: import { Collapsible, CollapsibleContent, CollapsibleTrigger }
    UIIndex->>BitsUI: import CollapsiblePrimitive
    UIIndex->>Consumer: export Root, Content, Trigger (as Collapsible, CollapsibleContent, CollapsibleTrigger)
Loading

Input Component: File vs. Non-File Handling

sequenceDiagram
    participant User
    participant InputComponent

    User->>InputComponent: Pass props (type, value, files, etc.)
    alt type === 'file'
        InputComponent->>InputComponent: Render <input type="file" bind:files bind:value>
    else type !== 'file'
        InputComponent->>InputComponent: Render <input type={type} bind:value>
    end
Loading

SidebarProvider State Update (Simplified Logic)

sequenceDiagram
    participant User
    participant SidebarProvider

    User->>SidebarProvider: setOpen(newState)
    SidebarProvider->>SidebarProvider: Update internal open state
    SidebarProvider->>User: Call onOpenChange callback
Loading

IsMobile Hook (Refactored)

sequenceDiagram
    participant Consumer
    participant IsMobile
    participant MediaQuery

    Consumer->>IsMobile: Instantiate with breakpoint
    IsMobile->>MediaQuery: Call super with breakpoint query
    MediaQuery->>IsMobile: Handle media query state updates
    IsMobile->>Consumer: Inherit media query state
Loading

📜 Recent review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5affd0e and f261eff.

📒 Files selected for processing (22)
  • src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte (1 hunks)
  • src/lib/components/ui/breadcrumb/breadcrumb-separator.svelte (1 hunks)
  • src/lib/components/ui/command/command-group.svelte (2 hunks)
  • src/lib/components/ui/command/command-input.svelte (1 hunks)
  • src/lib/components/ui/command/command-item.svelte (1 hunks)
  • src/lib/components/ui/command/command-link-item.svelte (1 hunks)
  • src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte (1 hunks)
  • src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte (1 hunks)
  • src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte (1 hunks)
  • src/lib/components/ui/index.ts (1 hunks)
  • src/lib/components/ui/input/input.svelte (1 hunks)
  • src/lib/components/ui/select/select-item.svelte (1 hunks)
  • src/lib/components/ui/select/select-scroll-down-button.svelte (1 hunks)
  • src/lib/components/ui/select/select-scroll-up-button.svelte (1 hunks)
  • src/lib/components/ui/select/select-trigger.svelte (1 hunks)
  • src/lib/components/ui/sheet/sheet-content.svelte (1 hunks)
  • src/lib/components/ui/sidebar/sidebar-provider.svelte (1 hunks)
  • src/lib/components/ui/sidebar/sidebar-trigger.svelte (1 hunks)
  • src/lib/components/ui/sidebar/sidebar.svelte (3 hunks)
  • src/lib/components/ui/sonner/sonner.svelte (1 hunks)
  • src/lib/components/ui/textarea/index.ts (1 hunks)
  • src/lib/hooks/is-mobile.svelte.ts (1 hunks)
✨ Finishing Touches
  • 📝 Generate Docstrings

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.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need 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)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Update shadcn components

1 participant