component: Add component and component_preview crates to power UI components (#24456)

This PR formalizes design components with the Component and
ComponentPreview traits.

You can open the preview UI with `workspace: open component preview`.

Component previews no longer need to return `Self` allowing for more
complex previews, and previews of components like `ui::Tooltip` that
supplement other components rather than are rendered by default.

`cargo-machete` incorrectly identifies `linkme` as an unused dep on
crates that have components deriving `IntoComponent`, so you may need to
add this to that crate's `Cargo.toml`:

```toml
# cargo-machete doesn't understand that linkme is used in the component macro
[package.metadata.cargo-machete]
ignored = ["linkme"]
```

Release Notes:

- N/A

---------

Co-authored-by: Marshall Bowers <git@maxdeviant.com>

crates/component_preview/Cargo.toml

@@ -0,0 +1,21 @@
+[package]
+name = "component_preview"
+version = "0.1.0"
+edition.workspace = true
+publish.workspace = true
+license = "GPL-3.0-or-later"
+
+[lints]
+workspace = true
+
+[lib]
+path = "src/component_preview.rs"
+
+[features]
+default = []
+
+[dependencies]
+component.workspace = true
+gpui.workspace = true
+ui.workspace = true
+workspace.workspace = true

crates/component_preview/LICENSE-GPL

@@ -0,0 +1 @@
+../../LICENSE-GPL

crates/component_preview/src/component_preview.rs

@@ -0,0 +1,178 @@
+//! # Component Preview
+//!
+//! A view for exploring Zed components.
+
+use component::{components, ComponentMetadata};
+use gpui::{prelude::*, App, EventEmitter, FocusHandle, Focusable, Window};
+use ui::prelude::*;
+
+use workspace::{item::ItemEvent, Item, Workspace, WorkspaceId};
+
+pub fn init(cx: &mut App) {
+    cx.observe_new(|workspace: &mut Workspace, _, _cx| {
+        workspace.register_action(
+            |workspace, _: &workspace::OpenComponentPreview, window, cx| {
+                let component_preview = cx.new(ComponentPreview::new);
+                workspace.add_item_to_active_pane(
+                    Box::new(component_preview),
+                    None,
+                    true,
+                    window,
+                    cx,
+                )
+            },
+        );
+    })
+    .detach();
+}
+
+struct ComponentPreview {
+    focus_handle: FocusHandle,
+}
+
+impl ComponentPreview {
+    pub fn new(cx: &mut Context<Self>) -> Self {
+        Self {
+            focus_handle: cx.focus_handle(),
+        }
+    }
+
+    fn render_sidebar(&self, _window: &Window, _cx: &Context<Self>) -> impl IntoElement {
+        let components = components().all_sorted();
+        let sorted_components = components.clone();
+
+        v_flex().gap_px().p_1().children(
+            sorted_components
+                .into_iter()
+                .map(|component| self.render_sidebar_entry(&component, _cx)),
+        )
+    }
+
+    fn render_sidebar_entry(
+        &self,
+        component: &ComponentMetadata,
+        _cx: &Context<Self>,
+    ) -> impl IntoElement {
+        h_flex()
+            .w_40()
+            .px_1p5()
+            .py_1()
+            .child(component.name().clone())
+    }
+
+    fn render_preview(
+        &self,
+        component: &ComponentMetadata,
+        window: &mut Window,
+        cx: &Context<Self>,
+    ) -> impl IntoElement {
+        let name = component.name();
+        let scope = component.scope();
+
+        let description = component.description();
+
+        v_group()
+            .w_full()
+            .gap_4()
+            .p_8()
+            .rounded_md()
+            .child(
+                v_flex()
+                    .gap_1()
+                    .child(
+                        h_flex()
+                            .gap_1()
+                            .text_xl()
+                            .child(div().child(name))
+                            .when_some(scope, |this, scope| {
+                                this.child(div().opacity(0.5).child(format!("({})", scope)))
+                            }),
+                    )
+                    .when_some(description, |this, description| {
+                        this.child(
+                            div()
+                                .text_ui_sm(cx)
+                                .text_color(cx.theme().colors().text_muted)
+                                .max_w(px(600.0))
+                                .child(description),
+                        )
+                    }),
+            )
+            .when_some(component.preview(), |this, preview| {
+                this.child(preview(window, cx))
+            })
+            .into_any_element()
+    }
+
+    fn render_previews(&self, window: &mut Window, cx: &Context<Self>) -> impl IntoElement {
+        v_flex()
+            .id("component-previews")
+            .size_full()
+            .overflow_y_scroll()
+            .p_4()
+            .gap_2()
+            .children(
+                components()
+                    .all_previews_sorted()
+                    .iter()
+                    .map(|component| self.render_preview(component, window, cx)),
+            )
+    }
+}
+
+impl Render for ComponentPreview {
+    fn render(&mut self, window: &mut Window, cx: &mut Context<'_, Self>) -> impl IntoElement {
+        h_flex()
+            .id("component-preview")
+            .key_context("ComponentPreview")
+            .items_start()
+            .overflow_hidden()
+            .size_full()
+            .max_h_full()
+            .track_focus(&self.focus_handle)
+            .px_2()
+            .bg(cx.theme().colors().editor_background)
+            .child(self.render_sidebar(window, cx))
+            .child(self.render_previews(window, cx))
+    }
+}
+
+impl EventEmitter<ItemEvent> for ComponentPreview {}
+
+impl Focusable for ComponentPreview {
+    fn focus_handle(&self, _: &App) -> gpui::FocusHandle {
+        self.focus_handle.clone()
+    }
+}
+
+impl Item for ComponentPreview {
+    type Event = ItemEvent;
+
+    fn tab_content_text(&self, _window: &Window, _cx: &App) -> Option<SharedString> {
+        Some("Component Preview".into())
+    }
+
+    fn telemetry_event_text(&self) -> Option<&'static str> {
+        None
+    }
+
+    fn show_toolbar(&self) -> bool {
+        false
+    }
+
+    fn clone_on_split(
+        &self,
+        _workspace_id: Option<WorkspaceId>,
+        _window: &mut Window,
+        cx: &mut Context<Self>,
+    ) -> Option<gpui::Entity<Self>>
+    where
+        Self: Sized,
+    {
+        Some(cx.new(Self::new))
+    }
+
+    fn to_item_events(event: &Self::Event, mut f: impl FnMut(workspace::item::ItemEvent)) {
+        f(*event)
+    }
+}