diff --git a/crates/storybook2/src/collab_panel.rs b/crates/storybook2/src/collab_panel.rs index d25702ee63..e8f393fac4 100644 --- a/crates/storybook2/src/collab_panel.rs +++ b/crates/storybook2/src/collab_panel.rs @@ -51,12 +51,12 @@ impl CollabPanel { //:: https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state // .group() // List Section Header - .child(self.list_section_header("#CRDB 🗃️", true, theme)) + .child(self.list_section_header("#CRDB 🗃️", true, &theme)) // List Item Large .child(self.list_item( "http://github.com/maxbrunsfeld.png?s=50", "maxbrunsfeld", - theme, + &theme, )), ) .child( @@ -64,31 +64,31 @@ impl CollabPanel { .py_2() .flex() .flex_col() - .child(self.list_section_header("CHANNELS", true, theme)), + .child(self.list_section_header("CHANNELS", true, &theme)), ) .child( div() .py_2() .flex() .flex_col() - .child(self.list_section_header("CONTACTS", true, theme)) + .child(self.list_section_header("CONTACTS", true, &theme)) .children( std::iter::repeat_with(|| { vec![ self.list_item( "http://github.com/as-cii.png?s=50", "as-cii", - theme, + &theme, ), self.list_item( "http://github.com/nathansobo.png?s=50", "nathansobo", - theme, + &theme, ), self.list_item( "http://github.com/maxbrunsfeld.png?s=50", "maxbrunsfeld", - theme, + &theme, ), ] }) diff --git a/crates/storybook2/src/stories/elements.rs b/crates/storybook2/src/stories/elements.rs index 0006163a0e..4922869fb3 100644 --- a/crates/storybook2/src/stories/elements.rs +++ b/crates/storybook2/src/stories/elements.rs @@ -1 +1,2 @@ +pub mod icon; pub mod label; diff --git a/crates/storybook2/src/stories/elements/icon.rs b/crates/storybook2/src/stories/elements/icon.rs new file mode 100644 index 0000000000..46073fb394 --- /dev/null +++ b/crates/storybook2/src/stories/elements/icon.rs @@ -0,0 +1,30 @@ +use std::marker::PhantomData; + +use strum::IntoEnumIterator; + +use crate::ui::prelude::*; +use crate::ui::{Icon, IconElement}; + +use crate::story::Story; + +#[derive(Element, Default)] +pub struct IconStory { + state_type: PhantomData, +} + +impl IconStory { + pub fn new() -> Self { + Self { + state_type: PhantomData, + } + } + + fn render(&mut self, cx: &mut ViewContext) -> impl Element { + let icons = Icon::iter(); + + Story::container(cx) + .child(Story::title_for::<_, IconElement>(cx)) + .child(Story::label(cx, "All Icons")) + .child(div().flex().gap_3().children(icons.map(IconElement::new))) + } +} diff --git a/crates/storybook2/src/story_selector.rs b/crates/storybook2/src/story_selector.rs index ef867b16f5..e390801b35 100644 --- a/crates/storybook2/src/story_selector.rs +++ b/crates/storybook2/src/story_selector.rs @@ -12,6 +12,7 @@ use crate::ui::prelude::*; #[derive(Debug, PartialEq, Eq, Clone, Copy, strum::Display, EnumString, EnumIter)] #[strum(serialize_all = "snake_case")] pub enum ElementStory { + Icon, Label, } @@ -20,6 +21,7 @@ impl ElementStory { use crate::stories::elements; match self { + Self::Icon => elements::icon::IconStory::new().into_any(), Self::Label => elements::label::LabelStory::new().into_any(), } } diff --git a/crates/storybook2/src/theme.rs b/crates/storybook2/src/theme.rs index b28a0f289c..7a32786adf 100644 --- a/crates/storybook2/src/theme.rs +++ b/crates/storybook2/src/theme.rs @@ -1,8 +1,10 @@ +use std::sync::Arc; +use std::{collections::HashMap, fmt}; + use gpui3::{ BorrowAppContext, Element, Hsla, Layout, LayoutId, Result, ViewContext, WindowContext, }; use serde::{de::Visitor, Deserialize, Deserializer}; -use std::{collections::HashMap, fmt}; #[derive(Deserialize, Clone, Default, Debug)] pub struct Theme { @@ -190,6 +192,6 @@ impl Element for Themed { // .clone() // } -pub fn theme<'a>(cx: &'a WindowContext) -> &'a Theme { - cx.state() +pub fn theme(cx: &WindowContext) -> Arc { + Arc::new(cx.state::().clone()) } diff --git a/crates/storybook2/src/ui/elements.rs b/crates/storybook2/src/ui/elements.rs index fe0a9dbbc7..c42a91a48f 100644 --- a/crates/storybook2/src/ui/elements.rs +++ b/crates/storybook2/src/ui/elements.rs @@ -1,5 +1,7 @@ +mod icon; mod label; mod stack; +pub use icon::*; pub use label::*; pub use stack::*; diff --git a/crates/storybook2/src/ui/elements/icon.rs b/crates/storybook2/src/ui/elements/icon.rs new file mode 100644 index 0000000000..539cb5a227 --- /dev/null +++ b/crates/storybook2/src/ui/elements/icon.rs @@ -0,0 +1,184 @@ +use std::marker::PhantomData; +use std::sync::Arc; + +use gpui3::{svg, Hsla}; +use strum::EnumIter; + +use crate::theme::{theme, Theme}; +use crate::ui::prelude::*; + +#[derive(Default, PartialEq, Copy, Clone)] +pub enum IconSize { + Small, + #[default] + Large, +} + +#[derive(Default, PartialEq, Copy, Clone)] +pub enum IconColor { + #[default] + Default, + Muted, + Disabled, + Placeholder, + Accent, + Error, + Warning, + Success, + Info, +} + +impl IconColor { + pub fn color(self, theme: Arc) -> Hsla { + match self { + IconColor::Default => theme.lowest.base.default.foreground, + IconColor::Muted => theme.lowest.variant.default.foreground, + IconColor::Disabled => theme.lowest.base.disabled.foreground, + IconColor::Placeholder => theme.lowest.base.disabled.foreground, + IconColor::Accent => theme.lowest.accent.default.foreground, + IconColor::Error => theme.lowest.negative.default.foreground, + IconColor::Warning => theme.lowest.warning.default.foreground, + IconColor::Success => theme.lowest.positive.default.foreground, + IconColor::Info => theme.lowest.accent.default.foreground, + } + } +} + +#[derive(Default, PartialEq, Copy, Clone, EnumIter)] +pub enum Icon { + Ai, + ArrowLeft, + ArrowRight, + ArrowUpRight, + AudioOff, + AudioOn, + Bolt, + ChevronDown, + ChevronLeft, + ChevronRight, + ChevronUp, + Close, + ExclamationTriangle, + File, + FileGeneric, + FileDoc, + FileGit, + FileLock, + FileRust, + FileToml, + FileTree, + Folder, + FolderOpen, + FolderX, + #[default] + Hash, + InlayHint, + MagicWand, + MagnifyingGlass, + Maximize, + Menu, + MessageBubbles, + Mic, + MicMute, + Plus, + Quote, + Screen, + SelectAll, + Split, + SplitMessage, + Terminal, + XCircle, + Copilot, + Envelope, +} + +impl Icon { + pub fn path(self) -> &'static str { + match self { + Icon::Ai => "icons/ai.svg", + Icon::ArrowLeft => "icons/arrow_left.svg", + Icon::ArrowRight => "icons/arrow_right.svg", + Icon::ArrowUpRight => "icons/arrow_up_right.svg", + Icon::AudioOff => "icons/speaker-off.svg", + Icon::AudioOn => "icons/speaker-loud.svg", + Icon::Bolt => "icons/bolt.svg", + Icon::ChevronDown => "icons/chevron_down.svg", + Icon::ChevronLeft => "icons/chevron_left.svg", + Icon::ChevronRight => "icons/chevron_right.svg", + Icon::ChevronUp => "icons/chevron_up.svg", + Icon::Close => "icons/x.svg", + Icon::ExclamationTriangle => "icons/warning.svg", + Icon::File => "icons/file.svg", + Icon::FileGeneric => "icons/file_icons/file.svg", + Icon::FileDoc => "icons/file_icons/book.svg", + Icon::FileGit => "icons/file_icons/git.svg", + Icon::FileLock => "icons/file_icons/lock.svg", + Icon::FileRust => "icons/file_icons/rust.svg", + Icon::FileToml => "icons/file_icons/toml.svg", + Icon::FileTree => "icons/project.svg", + Icon::Folder => "icons/file_icons/folder.svg", + Icon::FolderOpen => "icons/file_icons/folder_open.svg", + Icon::FolderX => "icons/stop_sharing.svg", + Icon::Hash => "icons/hash.svg", + Icon::InlayHint => "icons/inlay_hint.svg", + Icon::MagicWand => "icons/magic-wand.svg", + Icon::MagnifyingGlass => "icons/magnifying_glass.svg", + Icon::Maximize => "icons/maximize.svg", + Icon::Menu => "icons/menu.svg", + Icon::MessageBubbles => "icons/conversations.svg", + Icon::Mic => "icons/mic.svg", + Icon::MicMute => "icons/mic-mute.svg", + Icon::Plus => "icons/plus.svg", + Icon::Quote => "icons/quote.svg", + Icon::Screen => "icons/desktop.svg", + Icon::SelectAll => "icons/select-all.svg", + Icon::Split => "icons/split.svg", + Icon::SplitMessage => "icons/split_message.svg", + Icon::Terminal => "icons/terminal.svg", + Icon::XCircle => "icons/error.svg", + Icon::Copilot => "icons/copilot.svg", + Icon::Envelope => "icons/feedback.svg", + } + } +} + +#[derive(Element, Clone)] +pub struct IconElement { + state_type: PhantomData, + icon: Icon, + color: IconColor, + size: IconSize, +} + +impl IconElement { + pub fn new(icon: Icon) -> Self { + Self { + state_type: PhantomData, + icon, + color: IconColor::default(), + size: IconSize::default(), + } + } + + pub fn color(mut self, color: IconColor) -> Self { + self.color = color; + self + } + + pub fn size(mut self, size: IconSize) -> Self { + self.size = size; + self + } + + fn render(&mut self, cx: &mut ViewContext) -> impl Element { + let theme = theme(cx); + let fill = self.color.color(theme); + + let sized_svg = match self.size { + IconSize::Small => svg().size_3p5(), + IconSize::Large => svg().size_4(), + }; + + sized_svg.flex_none().path(self.icon.path()).fill(fill) + } +}