ui2: Reorganize components (#3228)

This PR reorganizes the components in the `ui2` crate.

The distinction between "elements" and "components" is now gone, with
all of the reusable components living under `components/`.

The components that we built while prototyping but will eventually live
in other crates currently reside in the `to_extract/` module.

Release Notes:

- N/A

crates/storybook2/src/stories/kitchen_sink.rs

@@ -1,7 +1,4 @@
-use crate::{
-    story::Story,
-    story_selector::{ComponentStory, ElementStory},
-};
+use crate::{story::Story, story_selector::ComponentStory};
 use gpui2::{Div, Render, StatefulInteraction, View, VisualContext};
 use strum::IntoEnumIterator;
 use ui::prelude::*;
@@ -18,9 +15,6 @@ impl Render for KitchenSinkStory {
     type Element = Div<Self, StatefulInteraction<Self>>;
 
     fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
-        let element_stories = ElementStory::iter()
-            .map(|selector| selector.story(cx))
-            .collect::<Vec<_>>();
         let component_stories = ComponentStory::iter()
             .map(|selector| selector.story(cx))
             .collect::<Vec<_>>();
@@ -29,8 +23,6 @@ impl Render for KitchenSinkStory {
             .id("kitchen-sink")
             .overflow_y_scroll()
             .child(Story::title(cx, "Kitchen Sink"))
-            .child(Story::label(cx, "Elements"))
-            .child(div().flex().flex_col().children(element_stories))
             .child(Story::label(cx, "Components"))
             .child(div().flex().flex_col().children(component_stories))
             // Add a bit of space at the bottom of the kitchen sink so elements

crates/storybook2/src/story_selector.rs

@@ -7,55 +7,30 @@ use clap::builder::PossibleValue;
 use clap::ValueEnum;
 use gpui2::{AnyView, VisualContext};
 use strum::{EnumIter, EnumString, IntoEnumIterator};
-use ui::{prelude::*, AvatarStory, ButtonStory, DetailsStory, IconStory, InputStory, LabelStory};
-
-#[derive(Debug, PartialEq, Eq, Clone, Copy, strum::Display, EnumString, EnumIter)]
-#[strum(serialize_all = "snake_case")]
-pub enum ElementStory {
-    Avatar,
-    Button,
-    Colors,
-    Details,
-    Focus,
-    Icon,
-    Input,
-    Label,
-    Scroll,
-    Text,
-    ZIndex,
-}
-
-impl ElementStory {
-    pub fn story(&self, cx: &mut WindowContext) -> AnyView {
-        match self {
-            Self::Colors => cx.build_view(|_| ColorsStory).into(),
-            Self::Avatar => cx.build_view(|_| AvatarStory).into(),
-            Self::Button => cx.build_view(|_| ButtonStory).into(),
-            Self::Details => cx.build_view(|_| DetailsStory).into(),
-            Self::Focus => FocusStory::view(cx).into(),
-            Self::Icon => cx.build_view(|_| IconStory).into(),
-            Self::Input => cx.build_view(|_| InputStory).into(),
-            Self::Label => cx.build_view(|_| LabelStory).into(),
-            Self::Scroll => ScrollStory::view(cx).into(),
-            Self::Text => TextStory::view(cx).into(),
-            Self::ZIndex => cx.build_view(|_| ZIndexStory).into(),
-        }
-    }
-}
+use ui::prelude::*;
+use ui::{AvatarStory, ButtonStory, DetailsStory, IconStory, InputStory, LabelStory};
 
 #[derive(Debug, PartialEq, Eq, Clone, Copy, strum::Display, EnumString, EnumIter)]
 #[strum(serialize_all = "snake_case")]
 pub enum ComponentStory {
     AssistantPanel,
+    Avatar,
     Breadcrumb,
     Buffer,
+    Button,
     ChatPanel,
     CollabPanel,
+    Colors,
     CommandPalette,
-    Copilot,
     ContextMenu,
+    Copilot,
+    Details,
     Facepile,
+    Focus,
+    Icon,
+    Input,
     Keybinding,
+    Label,
     LanguageSelector,
     MultiBuffer,
     NotificationsPanel,
@@ -63,29 +38,41 @@ pub enum ComponentStory {
     Panel,
     ProjectPanel,
     RecentProjects,
+    Scroll,
     Tab,
     TabBar,
     Terminal,
+    Text,
     ThemeSelector,
     TitleBar,
     Toast,
     Toolbar,
     TrafficLights,
     Workspace,
+    ZIndex,
 }
 
 impl ComponentStory {
     pub fn story(&self, cx: &mut WindowContext) -> AnyView {
         match self {
             Self::AssistantPanel => cx.build_view(|_| ui::AssistantPanelStory).into(),
-            Self::Buffer => cx.build_view(|_| ui::BufferStory).into(),
+            Self::Avatar => cx.build_view(|_| AvatarStory).into(),
             Self::Breadcrumb => cx.build_view(|_| ui::BreadcrumbStory).into(),
+            Self::Buffer => cx.build_view(|_| ui::BufferStory).into(),
+            Self::Button => cx.build_view(|_| ButtonStory).into(),
             Self::ChatPanel => cx.build_view(|_| ui::ChatPanelStory).into(),
             Self::CollabPanel => cx.build_view(|_| ui::CollabPanelStory).into(),
+            Self::Colors => cx.build_view(|_| ColorsStory).into(),
             Self::CommandPalette => cx.build_view(|_| ui::CommandPaletteStory).into(),
             Self::ContextMenu => cx.build_view(|_| ui::ContextMenuStory).into(),
+            Self::Copilot => cx.build_view(|_| ui::CopilotModalStory).into(),
+            Self::Details => cx.build_view(|_| DetailsStory).into(),
             Self::Facepile => cx.build_view(|_| ui::FacepileStory).into(),
+            Self::Focus => FocusStory::view(cx).into(),
+            Self::Icon => cx.build_view(|_| IconStory).into(),
+            Self::Input => cx.build_view(|_| InputStory).into(),
             Self::Keybinding => cx.build_view(|_| ui::KeybindingStory).into(),
+            Self::Label => cx.build_view(|_| LabelStory).into(),
             Self::LanguageSelector => cx.build_view(|_| ui::LanguageSelectorStory).into(),
             Self::MultiBuffer => cx.build_view(|_| ui::MultiBufferStory).into(),
             Self::NotificationsPanel => cx.build_view(|cx| ui::NotificationsPanelStory).into(),
@@ -93,23 +80,24 @@ impl ComponentStory {
             Self::Panel => cx.build_view(|cx| ui::PanelStory).into(),
             Self::ProjectPanel => cx.build_view(|_| ui::ProjectPanelStory).into(),
             Self::RecentProjects => cx.build_view(|_| ui::RecentProjectsStory).into(),
+            Self::Scroll => ScrollStory::view(cx).into(),
             Self::Tab => cx.build_view(|_| ui::TabStory).into(),
             Self::TabBar => cx.build_view(|_| ui::TabBarStory).into(),
             Self::Terminal => cx.build_view(|_| ui::TerminalStory).into(),
+            Self::Text => TextStory::view(cx).into(),
             Self::ThemeSelector => cx.build_view(|_| ui::ThemeSelectorStory).into(),
+            Self::TitleBar => ui::TitleBarStory::view(cx).into(),
             Self::Toast => cx.build_view(|_| ui::ToastStory).into(),
             Self::Toolbar => cx.build_view(|_| ui::ToolbarStory).into(),
             Self::TrafficLights => cx.build_view(|_| ui::TrafficLightsStory).into(),
-            Self::Copilot => cx.build_view(|_| ui::CopilotModalStory).into(),
-            Self::TitleBar => ui::TitleBarStory::view(cx).into(),
             Self::Workspace => ui::WorkspaceStory::view(cx).into(),
+            Self::ZIndex => cx.build_view(|_| ZIndexStory).into(),
         }
     }
 }
 
 #[derive(Debug, PartialEq, Eq, Clone, Copy)]
 pub enum StorySelector {
-    Element(ElementStory),
     Component(ComponentStory),
     KitchenSink,
 }
@@ -126,13 +114,6 @@ impl FromStr for StorySelector {
             return Ok(Self::KitchenSink);
         }
 
-        if let Some((_, story)) = story.split_once("elements/") {
-            let element_story = ElementStory::from_str(story)
-                .with_context(|| format!("story not found for element '{story}'"))?;
-
-            return Ok(Self::Element(element_story));
-        }
-
         if let Some((_, story)) = story.split_once("components/") {
             let component_story = ComponentStory::from_str(story)
                 .with_context(|| format!("story not found for component '{story}'"))?;
@@ -147,7 +128,6 @@ impl FromStr for StorySelector {
 impl StorySelector {
     pub fn story(&self, cx: &mut WindowContext) -> AnyView {
         match self {
-            Self::Element(element_story) => element_story.story(cx),
             Self::Component(component_story) => component_story.story(cx),
             Self::KitchenSink => KitchenSinkStory::view(cx).into(),
         }
@@ -160,11 +140,9 @@ static ALL_STORY_SELECTORS: OnceLock<Vec<StorySelector>> = OnceLock::new();
 impl ValueEnum for StorySelector {
     fn value_variants<'a>() -> &'a [Self] {
         let stories = ALL_STORY_SELECTORS.get_or_init(|| {
-            let element_stories = ElementStory::iter().map(StorySelector::Element);
             let component_stories = ComponentStory::iter().map(StorySelector::Component);
 
-            element_stories
-                .chain(component_stories)
+            component_stories
                 .chain(std::iter::once(StorySelector::KitchenSink))
                 .collect::<Vec<_>>()
         });
@@ -174,7 +152,6 @@ impl ValueEnum for StorySelector {
 
     fn to_possible_value(&self) -> Option<clap::builder::PossibleValue> {
         let value = match self {
-            Self::Element(story) => format!("elements/{story}"),
             Self::Component(story) => format!("components/{story}"),
             Self::KitchenSink => "kitchen_sink".to_string(),
         };

crates/ui2/src/components.rs

@@ -1,71 +1,45 @@
-mod assistant_panel;
-mod breadcrumb;
-mod buffer;
-mod buffer_search;
-mod chat_panel;
-mod collab_panel;
-mod command_palette;
+mod avatar;
+mod button;
 mod context_menu;
-mod copilot;
-mod editor_pane;
+mod details;
 mod facepile;
+mod icon;
 mod icon_button;
+mod indicator;
+mod input;
 mod keybinding;
-mod language_selector;
+mod label;
 mod list;
 mod modal;
-mod multi_buffer;
 mod notification_toast;
-mod notifications_panel;
 mod palette;
 mod panel;
-mod panes;
+mod player;
 mod player_stack;
-mod project_panel;
-mod recent_projects;
-mod status_bar;
+mod stack;
 mod tab;
-mod tab_bar;
-mod terminal;
-mod theme_selector;
-mod title_bar;
 mod toast;
-mod toolbar;
-mod traffic_lights;
-mod workspace;
+mod tool_divider;
 
-pub use assistant_panel::*;
-pub use breadcrumb::*;
-pub use buffer::*;
-pub use buffer_search::*;
-pub use chat_panel::*;
-pub use collab_panel::*;
-pub use command_palette::*;
+pub use avatar::*;
+pub use button::*;
 pub use context_menu::*;
-pub use copilot::*;
-pub use editor_pane::*;
+pub use details::*;
 pub use facepile::*;
+pub use icon::*;
 pub use icon_button::*;
+pub use indicator::*;
+pub use input::*;
 pub use keybinding::*;
-pub use language_selector::*;
+pub use label::*;
 pub use list::*;
 pub use modal::*;
-pub use multi_buffer::*;
 pub use notification_toast::*;
-pub use notifications_panel::*;
 pub use palette::*;
 pub use panel::*;
-pub use panes::*;
+pub use player::*;
 pub use player_stack::*;
-pub use project_panel::*;
-pub use recent_projects::*;
-pub use status_bar::*;
+pub use stack::*;
 pub use tab::*;
-pub use tab_bar::*;
-pub use terminal::*;
-pub use theme_selector::*;
-pub use title_bar::*;
 pub use toast::*;
-pub use toolbar::*;
-pub use traffic_lights::*;
-pub use workspace::*;
+pub use tool_divider::*;

crates/ui2/src/elements.rs

@@ -1,21 +0,0 @@
-mod avatar;
-mod button;
-mod details;
-mod icon;
-mod indicator;
-mod input;
-mod label;
-mod player;
-mod stack;
-mod tool_divider;
-
-pub use avatar::*;
-pub use button::*;
-pub use details::*;
-pub use icon::*;
-pub use indicator::*;
-pub use input::*;
-pub use label::*;
-pub use player::*;
-pub use stack::*;
-pub use tool_divider::*;

crates/ui2/src/lib.rs

@@ -18,17 +18,17 @@
 #![allow(dead_code, unused_variables)]
 
 mod components;
-mod elements;
 mod elevation;
 pub mod prelude;
 pub mod settings;
 mod static_data;
+mod to_extract;
 pub mod utils;
 
 pub use components::*;
-pub use elements::*;
 pub use prelude::*;
 pub use static_data::*;
+pub use to_extract::*;
 
 // This needs to be fully qualified with `crate::` otherwise we get a panic
 // at:

crates/ui2/src/to_extract.rs

@@ -0,0 +1,47 @@
+mod assistant_panel;
+mod breadcrumb;
+mod buffer;
+mod buffer_search;
+mod chat_panel;
+mod collab_panel;
+mod command_palette;
+mod copilot;
+mod editor_pane;
+mod language_selector;
+mod multi_buffer;
+mod notifications_panel;
+mod panes;
+mod project_panel;
+mod recent_projects;
+mod status_bar;
+mod tab_bar;
+mod terminal;
+mod theme_selector;
+mod title_bar;
+mod toolbar;
+mod traffic_lights;
+mod workspace;
+
+pub use assistant_panel::*;
+pub use breadcrumb::*;
+pub use buffer::*;
+pub use buffer_search::*;
+pub use chat_panel::*;
+pub use collab_panel::*;
+pub use command_palette::*;
+pub use copilot::*;
+pub use editor_pane::*;
+pub use language_selector::*;
+pub use multi_buffer::*;
+pub use notifications_panel::*;
+pub use panes::*;
+pub use project_panel::*;
+pub use recent_projects::*;
+pub use status_bar::*;
+pub use tab_bar::*;
+pub use terminal::*;
+pub use theme_selector::*;
+pub use title_bar::*;
+pub use toolbar::*;
+pub use traffic_lights::*;
+pub use workspace::*;