collapse.tsx

Overview

The collapse.tsx file defines a reusable React functional component named Collapse. This component provides a user interface element that can expand or collapse to show or hide content, commonly known as an accordion or collapsible panel.

Collapse is built on top of the Collapsible component from a UI library and enhances it by adding a customizable title section with optional right-aligned content and an icon, making it suitable for use in complex UI layouts where toggling visibility of content is needed.

Detailed Documentation

Component: `Collapse`

Description

Collapse is a wrapper component providing an interactive collapsible section with a header that includes an icon, a title, and an optional right-aligned content area. It manages the open/closed state either controlled or uncontrolled, and provides event hooks for state changes.

Props

The Collapse component accepts the following props, which extend the CollapsibleProps type (from @radix-ui/react-collapsible), except for the title prop from the underlying component which it overrides:

Prop Name	Type	Default	Description
`title`	`ReactNode`	undefined	The content to display as the main title on the collapsible header. Can be text or JSX.
`rightContent`	`ReactNode`	undefined	Optional content to display on the right side of the header, allowing additional controls or info.
`children`	`ReactNode`		The content to show or hide inside the collapsible panel.
`open`	`boolean`	undefined	Controlled prop to indicate if the collapsible should be open or closed.
`defaultOpen`	`boolean`	`false`	Initial open state when uncontrolled.
`onOpenChange`	`(open: boolean) => void`	undefined	Callback function called when the open state changes.
`disabled`	`boolean`	undefined	If true, disables user interaction with the collapsible.

Returns

A React element representing a collapsible section with a header and content area.

Usage Example

import { Collapse } from './collapse';

function Example() {
  return (
    <Collapse title="More Details" rightContent={<button>Help</button>} defaultOpen>
      <p>This is the detailed content that can be expanded or collapsed.</p>
    </Collapse>
  );
}

Implementation Details

The component composes three main sub-components imported from @/components/ui/collapsible:
- Collapsible: The container managing the open/close state.
- CollapsibleTrigger: The clickable header that toggles the collapse.
- CollapsibleContent: The content area shown or hidden based on state.
A ListCollapse icon (from lucide-react) is displayed before the title for visual indication of the collapsible nature.
The header layout uses CSS flexbox (flex, justify-between, items-center) for responsive alignment of the icon, title, and right content.
It supports both controlled and uncontrolled modes by accepting open and defaultOpen props respectively.
The disabled prop prevents interaction if set to true.
The component uses TypeScript's utility type Omit to exclude the title prop from the underlying CollapsibleProps, replacing it with a more flexible title of type ReactNode.

Interaction with Other Parts of the System

@/components/ui/collapsible: This internal UI library provides the foundational collapsible components (Collapsible, CollapsibleTrigger, CollapsibleContent) that Collapse composes.
@radix-ui/react-collapsible: The CollapsibleProps type is imported from this library, indicating that the underlying base functionality likely depends on Radix UI's accessibility and behavior standards.
lucide-react: Provides the ListCollapse icon enhancing the UI with a standard visual cue.
The Collapse component is designed to be a drop-in UI element used anywhere in the application where collapsible sections are needed, maintaining consistent style and behavior.

Visual Diagram

classDiagram
    class Collapse {
        +title: ReactNode
        +rightContent: ReactNode
        +children: ReactNode
        +open?: boolean
        +defaultOpen: boolean
        +onOpenChange?: (open: boolean) => void
        +disabled?: boolean
        +render(): ReactElement
    }

    class Collapsible {
        +defaultOpen?: boolean
        +open?: boolean
        +onOpenChange?: (open: boolean) => void
        +disabled?: boolean
    }

    class CollapsibleTrigger
    class CollapsibleContent
    class ListCollapse

    Collapse *-- Collapsible : uses
    Collapse *-- CollapsibleTrigger : uses inside Collapsible
    Collapse *-- CollapsibleContent : uses inside Collapsible
    Collapse *-- ListCollapse : displays icon in header

Summary

The collapse.tsx file offers a simple, accessible, and customizable collapsible UI component. It abstracts the complexity of managing open/close state and UI layout, while allowing flexible content and integration with the application's design system. This component is essential for creating dynamic, space-efficient interfaces where content visibility needs to be toggled by users.