gallery: Add DatePicker and Calendar. (#815)

crates/story/src/calendar_story.rs

@@ -1,23 +1,15 @@
-use chrono::{Days, Duration, Utc};
 use gpui::{
-    px, App, AppContext, Context, Entity, Focusable, IntoElement, ParentElement as _, Render,
+    App, AppContext, Context, Entity, FocusHandle, Focusable, IntoElement, ParentElement as _,
-    Styled as _, Window,
+    Render, Styled as _, Window,
-};
-use gpui_component::{
-    button::Button,
-    calendar,
-    date_picker::{DatePicker, DatePickerEvent, DateRangePreset},
-    v_flex, Sizable as _, Size,
 };
+use gpui_component::{calendar::Calendar, v_flex};
+
+use crate::section;
 
 pub struct CalendarStory {
-    size: Size,
+    focus_handle: FocusHandle,
-    date_picker: Entity<DatePicker>,
+    calendar: Entity<Calendar>,
-    date_picker_small: Entity<DatePicker>,
+    calendar_wide: Entity<Calendar>,
-    date_picker_large: Entity<DatePicker>,
-    date_picker_value: Option<String>,
-    date_range_picker: Entity<DatePicker>,
-    default_range_mode_picker: Entity<DatePicker>,
 }
 
 impl super::Story for CalendarStory {
@@ -26,7 +18,7 @@ impl super::Story for CalendarStory {
     }
 
     fn description() -> &'static str {
-        "A date picker and calendar component."
+        "A calendar to select a date or date range."
     }
 
     fn new_view(window: &mut Window, cx: &mut App) -> Entity<impl Render + Focusable> {
@@ -40,173 +32,32 @@ impl CalendarStory {
     }
 
     fn new(window: &mut Window, cx: &mut Context<Self>) -> Self {
-        let presets = vec![
+        let calendar = cx.new(|cx| Calendar::new(window, cx));
-            DateRangePreset::single(
+        let calendar_wide = cx.new(|cx| Calendar::new(window, cx).number_of_months(3));
-                "Yesterday",
-                (Utc::now() - Duration::days(1)).naive_local().date(),
-            ),
-            DateRangePreset::single(
-                "Last Week",
-                (Utc::now() - Duration::weeks(1)).naive_local().date(),
-            ),
-            DateRangePreset::single(
-                "Last Month",
-                (Utc::now() - Duration::days(30)).naive_local().date(),
-            ),
-        ];
-        let range_presets = vec![
-            DateRangePreset::range(
-                "Last 7 Days",
-                (Utc::now() - Duration::days(7)).naive_local().date(),
-                Utc::now().naive_local().date(),
-            ),
-            DateRangePreset::range(
-                "Last 14 Days",
-                (Utc::now() - Duration::days(14)).naive_local().date(),
-                Utc::now().naive_local().date(),
-            ),
-            DateRangePreset::range(
-                "Last 30 Days",
-                (Utc::now() - Duration::days(30)).naive_local().date(),
-                Utc::now().naive_local().date(),
-            ),
-            DateRangePreset::range(
-                "Last 90 Days",
-                (Utc::now() - Duration::days(90)).naive_local().date(),
-                Utc::now().naive_local().date(),
-            ),
-        ];
-        let now = chrono::Local::now().naive_local().date();
-        let date_picker = cx.new(|cx| {
-            let mut picker = DatePicker::new("date_picker_medium", window, cx)
-                .cleanable()
-                .width(px(220.))
-                .presets(presets);
-            picker.set_date(now, window, cx);
-            picker.set_disabled(vec![0, 6], window, cx);
-            picker
-        });
-        let date_picker_large = cx.new(|cx| {
-            let mut picker = DatePicker::new("date_picker_large", window, cx)
-                .large()
-                .date_format("%Y-%m-%d")
-                .width(px(300.));
-            picker.set_disabled(
-                calendar::Matcher::range(Some(now), now.checked_add_days(Days::new(7))),
-                window,
-                cx,
-            );
-            picker.set_date(
-                now.checked_sub_days(Days::new(1)).unwrap_or_default(),
-                window,
-                cx,
-            );
-            picker
-        });
-        let date_picker_small = cx.new(|cx| {
-            let mut picker = DatePicker::new("date_picker_small", window, cx)
-                .small()
-                .width(px(180.));
-            picker.set_disabled(
-                calendar::Matcher::interval(Some(now), now.checked_add_days(Days::new(5))),
-                window,
-                cx,
-            );
-            picker.set_date(now, window, cx);
-            picker
-        });
-        let date_range_picker = cx.new(|cx| {
-            let mut picker = DatePicker::new("date_range_picker", window, cx)
-                .width(px(300.))
-                .number_of_months(2)
-                .cleanable()
-                .presets(range_presets.clone());
-            picker.set_date(
-                (now, now.checked_add_days(Days::new(4)).unwrap()),
-                window,
-                cx,
-            );
-            picker
-        });
-
-        cx.subscribe(&date_picker, |this, _, ev, _| match ev {
-            DatePickerEvent::Change(date) => {
-                this.date_picker_value = date.format("%Y-%m-%d").map(|s| s.to_string());
-            }
-        })
-        .detach();
-        cx.subscribe(&date_range_picker, |this, _, ev, _| match ev {
-            DatePickerEvent::Change(date) => {
-                this.date_picker_value = date.format("%Y-%m-%d").map(|s| s.to_string());
-            }
-        })
-        .detach();
-
-        let default_range_mode_picker = cx.new(|cx| {
-            DatePicker::range_picker("default_range_mode_picker", window, cx)
-                .width(px(300.))
-                .placeholder("Range mode picker")
-                .cleanable()
-                .presets(range_presets.clone())
-        });
-
-        cx.subscribe(&default_range_mode_picker, |this, _, ev, _| match ev {
-            DatePickerEvent::Change(date) => {
-                this.date_picker_value = date.format("%Y-%m-%d").map(|s| s.to_string());
-            }
-        })
-        .detach();
 
         Self {
-            size: Size::default(),
+            calendar,
-            date_picker,
+            calendar_wide,
-            date_picker_large,
+            focus_handle: cx.focus_handle(),
-            date_picker_small,
-            date_range_picker,
-            default_range_mode_picker,
-            date_picker_value: None,
         }
     }
-
-    fn change_size(&mut self, size: Size, window: &mut Window, cx: &mut Context<Self>) {
-        self.size = size;
-        self.date_picker
-            .update(cx, |picker, cx| picker.set_size(size, window, cx));
-        self.date_picker_large
-            .update(cx, |picker, cx| picker.set_size(size, window, cx));
-        self.date_picker_small
-            .update(cx, |picker, cx| picker.set_size(size, window, cx));
-        self.date_range_picker
-            .update(cx, |picker, cx| picker.set_size(size, window, cx));
-        self.default_range_mode_picker
-            .update(cx, |picker, cx| picker.set_size(size, window, cx));
-    }
 }
 
 impl Focusable for CalendarStory {
-    fn focus_handle(&self, cx: &gpui::App) -> gpui::FocusHandle {
+    fn focus_handle(&self, _: &App) -> gpui::FocusHandle {
-        self.date_picker.focus_handle(cx)
+        self.focus_handle.clone()
     }
 }
 
 impl Render for CalendarStory {
-    fn render(&mut self, _: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
+    fn render(&mut self, _: &mut Window, _: &mut Context<Self>) -> impl IntoElement {
         v_flex()
             .gap_3()
+            .child(section("Normal").max_w_md().child(self.calendar.clone()))
             .child(
-                Button::new("change-size")
+                section("With 3 Months")
-                    .label(format!("size: {:?}", self.size))
+                    .max_w_md()
-                    .on_click(cx.listener(|this, _, window, cx| match this.size {
+                    .child(self.calendar_wide.clone()),
-                        Size::Small => this.change_size(Size::Medium, window, cx),
-                        Size::Large => this.change_size(Size::Small, window, cx),
-                        _ => this.change_size(Size::Large, window, cx),
-                    })),
             )
-            .child(self.date_picker.clone())
-            .child(self.date_picker_small.clone())
-            .child(self.date_picker_large.clone())
-            .child(self.date_range_picker.clone())
-            .child(self.default_range_mode_picker.clone())
-            .child(format!("Date picker value: {:?}", self.date_picker_value).into_element())
     }
 }

crates/story/src/date_picker_story.rs

@@ -0,0 +1,206 @@
+use chrono::{Days, Duration, Utc};
+use gpui::{
+    px, App, AppContext, Context, Entity, Focusable, IntoElement, ParentElement as _, Render,
+    Styled as _, Subscription, Window,
+};
+use gpui_component::{
+    calendar,
+    date_picker::{DatePicker, DatePickerEvent, DateRangePreset},
+    v_flex, Sizable as _,
+};
+
+use crate::section;
+
+pub struct DatePickerStory {
+    date_picker: Entity<DatePicker>,
+    date_picker_small: Entity<DatePicker>,
+    date_picker_large: Entity<DatePicker>,
+    date_picker_value: Option<String>,
+    date_range_picker: Entity<DatePicker>,
+    default_range_mode_picker: Entity<DatePicker>,
+
+    _subscriptions: Vec<Subscription>,
+}
+
+impl super::Story for DatePickerStory {
+    fn title() -> &'static str {
+        "DatePicker"
+    }
+
+    fn description() -> &'static str {
+        "A date picker to select a date or date range."
+    }
+
+    fn new_view(window: &mut Window, cx: &mut App) -> Entity<impl Render + Focusable> {
+        Self::view(window, cx)
+    }
+}
+
+impl DatePickerStory {
+    pub fn view(window: &mut Window, cx: &mut App) -> Entity<Self> {
+        cx.new(|cx| Self::new(window, cx))
+    }
+
+    fn new(window: &mut Window, cx: &mut Context<Self>) -> Self {
+        let presets = vec![
+            DateRangePreset::single(
+                "Yesterday",
+                (Utc::now() - Duration::days(1)).naive_local().date(),
+            ),
+            DateRangePreset::single(
+                "Last Week",
+                (Utc::now() - Duration::weeks(1)).naive_local().date(),
+            ),
+            DateRangePreset::single(
+                "Last Month",
+                (Utc::now() - Duration::days(30)).naive_local().date(),
+            ),
+        ];
+        let range_presets = vec![
+            DateRangePreset::range(
+                "Last 7 Days",
+                (Utc::now() - Duration::days(7)).naive_local().date(),
+                Utc::now().naive_local().date(),
+            ),
+            DateRangePreset::range(
+                "Last 14 Days",
+                (Utc::now() - Duration::days(14)).naive_local().date(),
+                Utc::now().naive_local().date(),
+            ),
+            DateRangePreset::range(
+                "Last 30 Days",
+                (Utc::now() - Duration::days(30)).naive_local().date(),
+                Utc::now().naive_local().date(),
+            ),
+            DateRangePreset::range(
+                "Last 90 Days",
+                (Utc::now() - Duration::days(90)).naive_local().date(),
+                Utc::now().naive_local().date(),
+            ),
+        ];
+        let now = chrono::Local::now().naive_local().date();
+        let date_picker = cx.new(|cx| {
+            let mut picker = DatePicker::new("date_picker_medium", window, cx)
+                .cleanable()
+                .presets(presets);
+            picker.set_date(now, window, cx);
+            picker.set_disabled(vec![0, 6], window, cx);
+            picker
+        });
+        let date_picker_large = cx.new(|cx| {
+            let mut picker = DatePicker::new("date_picker_large", window, cx)
+                .large()
+                .date_format("%Y-%m-%d")
+                .width(px(300.));
+            picker.set_disabled(
+                calendar::Matcher::range(Some(now), now.checked_add_days(Days::new(7))),
+                window,
+                cx,
+            );
+            picker.set_date(
+                now.checked_sub_days(Days::new(1)).unwrap_or_default(),
+                window,
+                cx,
+            );
+            picker
+        });
+        let date_picker_small = cx.new(|cx| {
+            let mut picker = DatePicker::new("date_picker_small", window, cx)
+                .small()
+                .width(px(180.));
+            picker.set_disabled(
+                calendar::Matcher::interval(Some(now), now.checked_add_days(Days::new(5))),
+                window,
+                cx,
+            );
+            picker.set_date(now, window, cx);
+            picker
+        });
+        let date_range_picker = cx.new(|cx| {
+            let mut picker = DatePicker::new("date_range_picker", window, cx)
+                .number_of_months(2)
+                .cleanable()
+                .presets(range_presets.clone());
+            picker.set_date(
+                (now, now.checked_add_days(Days::new(4)).unwrap()),
+                window,
+                cx,
+            );
+            picker
+        });
+
+        let default_range_mode_picker = cx.new(|cx| {
+            DatePicker::range_picker("default_range_mode_picker", window, cx)
+                .placeholder("Range mode picker")
+                .cleanable()
+                .presets(range_presets.clone())
+        });
+
+        let _subscriptions = vec![
+            cx.subscribe(&date_picker, |this, _, ev, _| match ev {
+                DatePickerEvent::Change(date) => {
+                    this.date_picker_value = date.format("%Y-%m-%d").map(|s| s.to_string());
+                }
+            }),
+            cx.subscribe(&date_range_picker, |this, _, ev, _| match ev {
+                DatePickerEvent::Change(date) => {
+                    this.date_picker_value = date.format("%Y-%m-%d").map(|s| s.to_string());
+                }
+            }),
+            cx.subscribe(&default_range_mode_picker, |this, _, ev, _| match ev {
+                DatePickerEvent::Change(date) => {
+                    this.date_picker_value = date.format("%Y-%m-%d").map(|s| s.to_string());
+                }
+            }),
+        ];
+
+        Self {
+            date_picker,
+            date_picker_large,
+            date_picker_small,
+            date_range_picker,
+            default_range_mode_picker,
+            date_picker_value: None,
+            _subscriptions,
+        }
+    }
+}
+
+impl Focusable for DatePickerStory {
+    fn focus_handle(&self, cx: &gpui::App) -> gpui::FocusHandle {
+        self.date_picker.focus_handle(cx)
+    }
+}
+
+impl Render for DatePickerStory {
+    fn render(&mut self, _: &mut Window, _: &mut Context<Self>) -> impl IntoElement {
+        v_flex()
+            .gap_3()
+            .child(section("Normal").max_w_md().child(self.date_picker.clone()))
+            .child(
+                section("Small with 180px width")
+                    .max_w_md()
+                    .child(self.date_picker_small.clone()),
+            )
+            .child(
+                section("Large")
+                    .max_w_md()
+                    .child(self.date_picker_large.clone()),
+            )
+            .child(
+                section("Date Range")
+                    .max_w_md()
+                    .child(self.date_range_picker.clone()),
+            )
+            .child(
+                section("Default Range Mode")
+                    .max_w_md()
+                    .child(self.default_range_mode_picker.clone()),
+            )
+            .child(
+                section("Date Picker Value").max_w_md().child(
+                    format!("Date picker value: {:?}", self.date_picker_value).into_element(),
+                ),
+            )
+    }
+}

crates/story/src/lib.rs

@@ -6,6 +6,7 @@ mod button_story;
 mod calendar_story;
 mod checkbox_story;
 mod clipboard_story;
+mod date_picker_story;
 mod drawer_story;
 mod dropdown_story;
 mod form_story;
@@ -54,6 +55,7 @@ pub use button_story::ButtonStory;
 pub use calendar_story::CalendarStory;
 pub use checkbox_story::CheckboxStory;
 pub use clipboard_story::ClipboardStory;
+pub use date_picker_story::DatePickerStory;
 pub use drawer_story::DrawerStory;
 pub use dropdown_story::DropdownStory;
 pub use form_story::FormStory;
@@ -380,6 +382,7 @@ impl RenderOnce for StorySection {
             .child(
                 v_flex()
                     .p_4()
+                    .overflow_x_hidden()
                     .border_1()
                     .border_color(cx.theme().border)
                     .rounded_lg()

crates/story/src/main.rs

@@ -41,8 +41,10 @@ impl Gallery {
                     StoryContainer::panel::<AlertStory>(window, cx),
                     StoryContainer::panel::<BadgeStory>(window, cx),
                     StoryContainer::panel::<ButtonStory>(window, cx),
+                    StoryContainer::panel::<CalendarStory>(window, cx),
                     StoryContainer::panel::<CheckboxStory>(window, cx),
                     StoryContainer::panel::<ClipboardStory>(window, cx),
+                    StoryContainer::panel::<DatePickerStory>(window, cx),
                     StoryContainer::panel::<DropdownStory>(window, cx),
                     StoryContainer::panel::<DrawerStory>(window, cx),
                     StoryContainer::panel::<FormStory>(window, cx),