accordion: Add Accordion. (#355)

<img width="920" alt="image"
src="https://github.com/user-attachments/assets/3269aa05-7531-43a1-84a9-469959a68d06">

README.md

@@ -63,6 +63,7 @@ A UI components for building desktop application by using [GPUI](https://gpui.rs
 - [x] Modal
 - [x] Notification
 - [x] WebView
+- [x] Accordion
 
 ## Showcase
 

crates/app/src/story_workspace.rs

@@ -4,9 +4,9 @@ use prelude::FluentBuilder as _;
 use serde::Deserialize;
 use std::{sync::Arc, time::Duration};
 use story::{
-    ButtonStory, CalendarStory, DropdownStory, IconStory, ImageStory, InputStory, ListStory,
+    AccordionStory, ButtonStory, CalendarStory, DropdownStory, IconStory, ImageStory, InputStory,
-    ModalStory, PopupStory, ProgressStory, ResizableStory, ScrollableStory, StoryContainer,
+    ListStory, ModalStory, PopupStory, ProgressStory, ResizableStory, ScrollableStory,
-    SwitchStory, TableStory, TextStory, TooltipStory,
+    StoryContainer, SwitchStory, TableStory, TextStory, TooltipStory,
 };
 use ui::{
     button::{Button, ButtonStyled as _},
@@ -22,7 +22,7 @@ use crate::app_state::AppState;
 
 const MAIN_DOCK_AREA: DockAreaTab = DockAreaTab {
     id: "main-dock",
-    version: 4,
+    version: 5,
 };
 
 #[derive(Clone, PartialEq, Eq, Deserialize)]
@@ -242,6 +242,7 @@ impl StoryWorkspace {
                     Arc::new(StoryContainer::panel::<CalendarStory>(cx)),
                     Arc::new(StoryContainer::panel::<ResizableStory>(cx)),
                     Arc::new(StoryContainer::panel::<ScrollableStory>(cx)),
+                    Arc::new(StoryContainer::panel::<AccordionStory>(cx)),
                     // Arc::new(StoryContainer::panel::<WebViewStory>(cx)),
                 ],
                 None,

crates/story/src/accordion_story.rs

@@ -0,0 +1,158 @@
+use gpui::{
+    FocusHandle, IntoElement, ParentElement as _, Render, Styled as _, View, ViewContext,
+    VisualContext as _, WindowContext,
+};
+use ui::{
+    accordion::Accordion, button::Button, button_group::ButtonGroup, checkbox::Checkbox, h_flex,
+    switch::Switch, v_flex, IconName, Selectable, Sizable, Size,
+};
+
+pub struct AccordionStory {
+    open_ixs: Vec<usize>,
+    size: Size,
+    bordered: bool,
+    disabled: bool,
+    focus_handle: FocusHandle,
+}
+
+impl super::Story for AccordionStory {
+    fn title() -> &'static str {
+        "Accordion"
+    }
+
+    fn new_view(cx: &mut WindowContext) -> View<impl gpui::FocusableView> {
+        Self::view(cx)
+    }
+}
+
+impl AccordionStory {
+    pub fn view(cx: &mut WindowContext) -> View<Self> {
+        cx.new_view(Self::new)
+    }
+
+    fn new(cx: &mut ViewContext<Self>) -> Self {
+        Self {
+            bordered: true,
+            open_ixs: Vec::new(),
+            size: Size::default(),
+            disabled: false,
+            focus_handle: cx.focus_handle(),
+        }
+    }
+
+    fn toggle_accordion(&mut self, open_ixs: Vec<usize>, cx: &mut ViewContext<Self>) {
+        self.open_ixs = open_ixs;
+        cx.notify();
+    }
+
+    fn set_size(&mut self, size: Size, cx: &mut ViewContext<Self>) {
+        self.size = size;
+        cx.notify();
+    }
+}
+
+impl gpui::FocusableView for AccordionStory {
+    fn focus_handle(&self, _: &gpui::AppContext) -> gpui::FocusHandle {
+        self.focus_handle.clone()
+    }
+}
+
+impl Render for AccordionStory {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
+        v_flex()
+            .gap_3()
+            .child(
+                h_flex()
+                    .items_center()
+                    .justify_between()
+                    .gap_2()
+                    .child(
+                        ButtonGroup::new("toggle-size")
+                            .child(
+                                Button::new("xsmall")
+                                    .label("XSmall")
+                                    .selected(self.size == Size::XSmall),
+                            )
+                            .child(
+                                Button::new("small")
+                                    .label("Small")
+                                    .selected(self.size == Size::Small),
+                            )
+                            .child(
+                                Button::new("medium")
+                                    .label("Medium")
+                                    .selected(self.size == Size::Medium),
+                            )
+                            .child(
+                                Button::new("large")
+                                    .label("Large")
+                                    .selected(self.size == Size::Large),
+                            )
+                            .on_click(cx.listener(|this, selecteds: &Vec<usize>, cx| {
+                                let size = match selecteds[0] {
+                                    0 => Size::XSmall,
+                                    1 => Size::Small,
+                                    2 => Size::Medium,
+                                    3 => Size::Large,
+                                    _ => unreachable!(),
+                                };
+                                this.set_size(size, cx);
+                            })),
+                    )
+                    .child(
+                        Checkbox::new("disabled")
+                            .label("Disabled")
+                            .checked(self.disabled)
+                            .on_click(cx.listener(|this, checked, cx| {
+                                this.disabled = *checked;
+                                cx.notify();
+                            })),
+                    )
+                    .child(
+                        Checkbox::new("bordered")
+                            .label("Bordered")
+                            .checked(self.bordered)
+                            .on_click(cx.listener(|this, checked, cx| {
+                                this.bordered = *checked;
+                                cx.notify();
+                            })),
+                    ),
+            )
+            .child(
+                Accordion::new("test")
+                    .bordered(self.bordered)
+                    .with_size(self.size)
+                    .disabled(self.disabled)
+                    .item(|this|
+                        this.open(self.open_ixs.contains(&0))
+                            .icon(IconName::Info)
+                            .title("This is first accordion")
+                            .content("Hello")
+                    )
+                   .item(|this|
+                        this.open(self.open_ixs.contains(&1))
+                            .icon(IconName::Inbox)
+                            .title("This is second accordion")
+                            .content(
+                                v_flex()
+                                    .gap_2()
+                                    .child(
+                                        "We can put any view here, like a v_flex with a text view",
+                                    )
+                                    .child(Switch::new("switch1").label("Switch"))
+                                    .child(Checkbox::new("checkbox1").label("Or a Checkbox")),
+                            )
+                    )
+                     .item(|this|
+                        this.open(self.open_ixs.contains(&2))
+                            .icon(IconName::Moon)
+                            .title("This is third accordion")
+                            .content(
+                                "This is the third accordion content. It can be any view, like a text view or a button."
+                            )
+                    ) .on_toggle_click(cx.listener(|this, open_ixs: &[usize], cx| {
+                        this.toggle_accordion(open_ixs.to_vec(), cx);
+                    })),
+            )
+    }
+}

crates/story/src/lib.rs

@@ -1,3 +1,4 @@
+mod accordion_story;
 mod button_story;
 mod calendar_story;
 mod dropdown_story;
@@ -16,6 +17,7 @@ mod text_story;
 mod tooltip_story;
 mod webview_story;
 
+pub use accordion_story::AccordionStory;
 pub use button_story::ButtonStory;
 pub use calendar_story::CalendarStory;
 pub use dropdown_story::DropdownStory;
@@ -253,6 +255,7 @@ impl StoryState {
             "TextStory" => story!(TextStory),
             "TooltipStory" => story!(TooltipStory),
             "WebViewStory" => story!(WebViewStory),
+            "AccordionStory" => story!(AccordionStory),
             _ => {
                 unreachable!("Invalid story klass: {}", self.story_klass)
             }

crates/ui/src/accordion.rs

@@ -0,0 +1,300 @@
+use std::{cell::Cell, rc::Rc, sync::Arc};
+
+use gpui::{
+    div, prelude::FluentBuilder as _, rems, AnyElement, Div, ElementId, InteractiveElement as _,
+    IntoElement, ParentElement, RenderOnce, SharedString, StatefulInteractiveElement as _, Styled,
+    WindowContext,
+};
+
+use crate::{h_flex, theme::ActiveTheme as _, v_flex, Icon, IconName, Sizable, Size};
+
+/// An AccordionGroup is a container for multiple Accordion elements.
+#[derive(IntoElement)]
+pub struct Accordion {
+    id: ElementId,
+    base: Div,
+    multiple: bool,
+    size: Size,
+    bordered: bool,
+    disabled: bool,
+    children: Vec<AccordionItem>,
+    on_toggle_click: Option<Arc<dyn Fn(&[usize], &mut WindowContext) + Send + Sync>>,
+}
+
+impl Accordion {
+    pub fn new(id: impl Into<ElementId>) -> Self {
+        Self {
+            id: id.into(),
+            base: v_flex().gap_1(),
+            multiple: false,
+            size: Size::default(),
+            bordered: true,
+            children: Vec::new(),
+            disabled: false,
+            on_toggle_click: None,
+        }
+    }
+
+    pub fn multiple(mut self, multiple: bool) -> Self {
+        self.multiple = multiple;
+        self
+    }
+
+    pub fn bordered(mut self, bordered: bool) -> Self {
+        self.bordered = bordered;
+        self
+    }
+
+    pub fn disabled(mut self, disabled: bool) -> Self {
+        self.disabled = disabled;
+        self
+    }
+
+    pub fn item<F>(mut self, child: F) -> Self
+    where
+        F: FnOnce(AccordionItem) -> AccordionItem,
+    {
+        let item = child(AccordionItem::new());
+        self.children.push(item);
+        self
+    }
+
+    /// Sets the on_toggle_click callback for the AccordionGroup.
+    ///
+    /// The first argument `Vec<usize>` is the indices of the open accordions.
+    pub fn on_toggle_click(
+        mut self,
+        on_toggle_click: impl Fn(&[usize], &mut WindowContext) + Send + Sync + 'static,
+    ) -> Self {
+        self.on_toggle_click = Some(Arc::new(on_toggle_click));
+        self
+    }
+}
+
+impl Sizable for Accordion {
+    fn with_size(mut self, size: impl Into<Size>) -> Self {
+        self.size = size.into();
+        self
+    }
+}
+
+impl RenderOnce for Accordion {
+    fn render(self, _: &mut WindowContext) -> impl IntoElement {
+        let mut open_ixs: Vec<usize> = Vec::new();
+        let multiple = self.multiple;
+        let state = Rc::new(Cell::new(None));
+
+        self.children
+            .iter()
+            .enumerate()
+            .for_each(|(ix, accordion)| {
+                if accordion.open {
+                    open_ixs.push(ix);
+                }
+            });
+
+        self.base
+            .id(self.id)
+            .children(
+                self.children
+                    .into_iter()
+                    .enumerate()
+                    .map(|(ix, accordion)| {
+                        let state = Rc::clone(&state);
+                        accordion
+                            .with_size(self.size)
+                            .bordered(self.bordered)
+                            .when(self.disabled, |this| this.disabled(true))
+                            .on_toggle_click(move |_, _| {
+                                state.set(Some(ix));
+                            })
+                    }),
+            )
+            .when_some(
+                self.on_toggle_click.filter(|_| !self.disabled),
+                move |this, on_toggle_click| {
+                    this.on_click(move |_, cx| {
+                        let mut open_ixs = open_ixs.clone();
+                        if let Some(ix) = state.get() {
+                            if multiple {
+                                if let Some(pos) = open_ixs.iter().position(|&i| i == ix) {
+                                    open_ixs.remove(pos);
+                                } else {
+                                    open_ixs.push(ix);
+                                }
+                            } else {
+                                let was_open = open_ixs.iter().any(|&i| i == ix);
+                                open_ixs.clear();
+                                if !was_open {
+                                    open_ixs.push(ix);
+                                }
+                            }
+                        }
+
+                        on_toggle_click(&open_ixs, cx);
+                    })
+                },
+            )
+    }
+}
+
+/// An Accordion is a vertically stacked list of items, each of which can be expanded to reveal the content associated with it.
+#[derive(IntoElement)]
+pub struct AccordionItem {
+    icon: Option<Icon>,
+    title: AnyElement,
+    content: AnyElement,
+    open: bool,
+    size: Size,
+    bordered: bool,
+    disabled: bool,
+    on_toggle_click: Option<Arc<dyn Fn(&bool, &mut WindowContext)>>,
+}
+
+impl AccordionItem {
+    pub fn new() -> Self {
+        Self {
+            icon: None,
+            title: SharedString::default().into_any_element(),
+            content: SharedString::default().into_any_element(),
+            open: false,
+            disabled: false,
+            on_toggle_click: None,
+            size: Size::default(),
+            bordered: true,
+        }
+    }
+
+    pub fn icon(mut self, icon: impl Into<Icon>) -> Self {
+        self.icon = Some(icon.into());
+        self
+    }
+
+    pub fn title(mut self, title: impl IntoElement) -> Self {
+        self.title = title.into_any_element();
+        self
+    }
+
+    pub fn content(mut self, content: impl IntoElement) -> Self {
+        self.content = content.into_any_element();
+        self
+    }
+
+    pub fn bordered(mut self, bordered: bool) -> Self {
+        self.bordered = bordered;
+        self
+    }
+
+    pub fn open(mut self, open: bool) -> Self {
+        self.open = open;
+        self
+    }
+
+    pub fn disabled(mut self, disabled: bool) -> Self {
+        self.disabled = disabled;
+        self
+    }
+
+    fn on_toggle_click(
+        mut self,
+        on_toggle_click: impl Fn(&bool, &mut WindowContext) + 'static,
+    ) -> Self {
+        self.on_toggle_click = Some(Arc::new(on_toggle_click));
+        self
+    }
+}
+
+impl Sizable for AccordionItem {
+    fn with_size(mut self, size: impl Into<Size>) -> Self {
+        self.size = size.into();
+        self
+    }
+}
+
+impl RenderOnce for AccordionItem {
+    fn render(self, cx: &mut WindowContext) -> impl IntoElement {
+        let text_size = match self.size {
+            Size::XSmall => rems(0.875),
+            Size::Small => rems(0.875),
+            _ => rems(1.0),
+        };
+
+        v_flex()
+            .bg(cx.theme().accordion)
+            .overflow_hidden()
+            .when(self.bordered, |this| {
+                this.border_1().border_color(cx.theme().border).rounded_md()
+            })
+            .text_size(text_size)
+            .child(
+                h_flex()
+                    .id("accordion-title")
+                    .justify_between()
+                    .map(|this| match self.size {
+                        Size::XSmall => this.py_0().px_1p5(),
+                        Size::Small => this.py_0p5().px_2(),
+                        Size::Large => this.py_1p5().px_4(),
+                        _ => this.py_1().px_3(),
+                    })
+                    .when(self.open, |this| {
+                        this.when(self.bordered, |this| {
+                            this.bg(cx.theme().accordion_active)
+                                .text_color(cx.theme().foreground)
+                                .border_b_1()
+                                .border_color(cx.theme().border)
+                        })
+                    })
+                    .child(
+                        h_flex()
+                            .items_center()
+                            .map(|this| match self.size {
+                                Size::XSmall => this.gap_1(),
+                                Size::Small => this.gap_1(),
+                                _ => this.gap_2(),
+                            })
+                            .when_some(self.icon, |this, icon| {
+                                this.child(
+                                    icon.with_size(self.size)
+                                        .text_color(cx.theme().muted_foreground),
+                                )
+                            })
+                            .child(self.title),
+                    )
+                    .when(!self.disabled, |this| {
+                        this.cursor_pointer()
+                            .hover(|this| this.bg(cx.theme().accordion_hover))
+                            .child(
+                                Icon::new(if self.open {
+                                    IconName::ChevronUp
+                                } else {
+                                    IconName::ChevronDown
+                                })
+                                .xsmall()
+                                .text_color(cx.theme().muted_foreground),
+                            )
+                    })
+                    .when_some(
+                        self.on_toggle_click.filter(|_| !self.disabled),
+                        |this, on_toggle_click| {
+                            this.on_click({
+                                move |_, cx| {
+                                    on_toggle_click(&!self.open, cx);
+                                }
+                            })
+                        },
+                    ),
+            )
+            .when(self.open, |this| {
+                this.child(
+                    div()
+                        .map(|this| match self.size {
+                            Size::XSmall => this.p_1p5(),
+                            Size::Small => this.p_2(),
+                            Size::Large => this.p_4(),
+                            _ => this.p_3(),
+                        })
+                        .child(self.content),
+                )
+            })
+    }
+}

crates/ui/src/lib.rs

@@ -8,6 +8,7 @@ mod svg_img;
 mod time;
 mod title_bar;
 
+pub mod accordion;
 pub mod animation;
 pub mod button;
 pub mod button_group;

crates/ui/src/theme.rs

@@ -334,6 +334,9 @@ pub struct Theme {
     pub link_hover: Hsla,
     pub link_active: Hsla,
     pub skeleton: Hsla,
+    pub accordion: Hsla,
+    pub accordion_hover: Hsla,
+    pub accordion_active: Hsla,
 }
 
 impl Global for Theme {}
@@ -399,6 +402,9 @@ impl Theme {
         self.link_hover = self.link_hover.apply(mask_color);
         self.link_active = self.link_active.apply(mask_color);
         self.skeleton = self.skeleton.apply(mask_color);
+        self.accordion = self.accordion.apply(mask_color);
+        self.accordion_hover = self.accordion_hover.apply(mask_color);
+        self.accordion_active = self.accordion_active.apply(mask_color);
     }
 }
 
@@ -473,6 +479,9 @@ impl From<Colors> for Theme {
             link_hover: colors.link.lighten(0.2),
             link_active: colors.link.darken(0.2),
             skeleton: hsla(colors.primary.h, colors.primary.s, colors.primary.l, 0.1),
+            accordion: colors.background,
+            accordion_hover: colors.tab_bar.opacity(0.7),
+            accordion_active: colors.tab_bar,
         }
     }
 }