feat(date): add examples for calendar and datepicker

src/app/mod.rs

@@ -28,6 +28,7 @@ pub enum Component {
     CodeBlock,
     #[target(rename = "context_selector")]
     ContextSelector,
+    Date(Date),
     DescriptionList,
     Divider,
     Drawer,
@@ -76,6 +77,14 @@ pub enum Menu {
     Select,
 }
 
+#[derive(Debug, Clone, Default, PartialEq, Eq, Target)]
+pub enum Date {
+    #[default]
+    #[target(index)]
+    Calendar,
+    DatePicker,
+}
+
 #[derive(Debug, Clone, PartialEq, Eq, Target)]
 pub enum Layout {
     Bullseye,
@@ -134,6 +143,8 @@ fn switch_app_route(target: AppRoute) -> Html {
         Component::Clipboard => html! {<components::ClipboardExample/>},
         Component::CodeBlock => html! {<components::CodeBlockExample/>},
         Component::ContextSelector => html! {<components::ContextSelectorExample/>},
+        Component::Date(Date::Calendar) => html! {<components::CalendarExample/>},
+        Component::Date(Date::DatePicker) => html! {<components::DatePickerExample/>},
         Component::DescriptionList => html! {<components::DescriptionListExample/>},
         Component::Divider => html! {<components::DividerExample/>},
         Component::Drawer => html! {<components::DrawerExample/>},
@@ -262,6 +273,10 @@ fn page(props: &PageProps) -> Html {
                         <NavRouterItem<AppRoute> to={AppRoute::Component(Component::Clipboard)}>{"Clipboard"}</NavRouterItem<AppRoute>>
                         <NavRouterItem<AppRoute> to={AppRoute::Component(Component::CodeBlock)}>{"Code Block"}</NavRouterItem<AppRoute>>
                         <NavRouterItem<AppRoute> to={AppRoute::Component(Component::ContextSelector)}>{"Context Selector"}</NavRouterItem<AppRoute>>
+                        <NavExpandable title="Date">
+                            <NavRouterItem<AppRoute> to={AppRoute::Component(Component::Date(Date::Calendar))}>{"Calendar"}</NavRouterItem<AppRoute>>
+                            <NavRouterItem<AppRoute> to={AppRoute::Component(Component::Date(Date::DatePicker))}>{"DatePicker"}</NavRouterItem<AppRoute>>
+                        </NavExpandable>
                         <NavRouterItem<AppRoute> to={AppRoute::Component(Component::DescriptionList)}>{"DescriptionList"}</NavRouterItem<AppRoute>>
                         <NavRouterItem<AppRoute> to={AppRoute::Component(Component::Divider)}>{"Divider"}</NavRouterItem<AppRoute>>
                         <NavRouterItem<AppRoute> to={AppRoute::Component(Component::Drawer)}>{"Drawer"}</NavRouterItem<AppRoute>>

src/components/date/calendar/calendar.1.example

@@ -0,0 +1,6 @@
+html!{
+    <>
+        <CalendarView date={*date} {onchange} weekday_start={Weekday::Sun} />
+        <p>{date.to_string()}</p>
+    </>
+}

src/components/date/calendar/calendar.2.example

@@ -0,0 +1,8 @@
+html!{
+    <>
+        <CalendarView
+            date={NaiveDate::from_ymd_opt(2023, 9, 20).unwrap()}
+            rangestart={NaiveDate::from_ymd_opt(2023, 9, 8).unwrap()}
+        />
+    </>
+}

src/components/date/calendar/mod.rs

@@ -0,0 +1,25 @@
+use crate::{example, example::ExamplePage};
+use patternfly_yew::prelude::*;
+use yew::prelude::*;
+use chrono::*;
+
+#[function_component(CalendarExample)]
+pub fn datepicker_example() -> yew::Html {
+    let date = use_state(|| NaiveDate::from_ymd_opt(2011, 1, 14).unwrap());
+    let onchange = {
+        let date = date.clone();
+        Callback::from(move |d| date.set(d))
+    };
+
+    let select_date = example! ("Selectable date" => "calendar.1.example");
+    let range = example! ("Date range" => "calendar.2.example");
+
+    html! {
+        <>
+            <ExamplePage title="Calendar month">
+                { select_date }
+                { range }
+            </ExamplePage>
+        </>
+    }
+}

src/components/date/date/date.1.example

@@ -0,0 +1,5 @@
+html!{
+    <>
+        <DatePicker />
+    </>
+}

src/components/date/date/mod.rs

@@ -0,0 +1,17 @@
+use crate::{example, example::ExamplePage};
+use patternfly_yew::prelude::*;
+use yew::prelude::*;
+use chrono::*;
+
+#[function_component(DatePickerExample)]
+pub fn datepicker_example() -> yew::Html {
+    let date = example! ("Basic" => "date.1.example");
+
+    html! {
+        <>
+            <ExamplePage title="DatePicker">
+                { date }
+            </ExamplePage>
+        </>
+    }
+}

src/components/date/mod.rs

@@ -0,0 +1,5 @@
+mod date;
+mod calendar;
+
+pub use date::*;
+pub use calendar::*;

src/components/mod.rs

@@ -11,6 +11,7 @@ mod chip;
 mod clipboard;
 mod code_block;
 mod context_selector;
+mod date;
 mod description_list;
 mod divider;
 mod drawer;
@@ -54,6 +55,7 @@ pub use chip::*;
 pub use clipboard::*;
 pub use code_block::*;
 pub use context_selector::*;
+pub use date::*;
 pub use description_list::*;
 pub use divider::*;
 pub use drawer::*;