From 1e840c81eff53cb4a7ba34c05fcfe4d22d8a3fc4 Mon Sep 17 00:00:00 2001
From: Cecile Tonglet <cecile.tonglet@cecton.com>
Date: Tue, 29 Sep 2020 18:47:33 +0200
Subject: [PATCH] Router (#29)

---
 .github/workflows/rust.yml              |   2 +-
 .rustfmt.toml                           |   3 +
 Cargo.lock                              |  82 ++++++++
 yewprint-doc/Cargo.toml                 |   1 +
 yewprint-doc/src/app.rs                 |  56 +++--
 yewprint-doc/src/lib.rs                 |   2 +-
 yewprint-doc/src/progressbar/example.rs |  86 ++++----
 yewprint-doc/src/progressbar/mod.rs     | 265 ++++++++++++------------
 yewprint/src/progressbar.rs             | 126 +++++------
 9 files changed, 361 insertions(+), 262 deletions(-)
 create mode 100644 .rustfmt.toml

diff --git a/.github/workflows/rust.yml b/.github/workflows/rust.yml
index 827b0d7..3f97af7 100644
--- a/.github/workflows/rust.yml
+++ b/.github/workflows/rust.yml
@@ -16,7 +16,7 @@ jobs:
 
     steps:
     - uses: actions/checkout@v2
-    - run: rustfmt --check **/*.rs
+    - run: cargo fmt -- --check
       if: ${{ github.event_name == 'pull_request' }}
     - uses: actions-rs/clippy-check@v1
       with:
diff --git a/.rustfmt.toml b/.rustfmt.toml
new file mode 100644
index 0000000..83ece78
--- /dev/null
+++ b/.rustfmt.toml
@@ -0,0 +1,3 @@
+error_on_line_overflow = true
+error_on_unformatted = true
+newline_style = "Unix"
diff --git a/Cargo.lock b/Cargo.lock
index dcbecf7..9f08e7f 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -18,6 +18,12 @@ version = "0.12.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "33954243bd79057c2de7338850b85983a44588021f8a5fee574a8888c6de4344"
 
+[[package]]
+name = "arrayvec"
+version = "0.5.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cff77d8686867eceff3105329d4698d96c2391c176d5d03adc90c7389162b5b8"
+
 [[package]]
 name = "autocfg"
 version = "1.0.1"
@@ -359,6 +365,19 @@ version = "1.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "830d08ce1d1d941e6b30645f1a0eb5643013d835ce3779a5fc208261dbe10f55"
 
+[[package]]
+name = "lexical-core"
+version = "0.7.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "db65c6da02e61f55dae90a0ae427b2a5f6b3e8db09f58d10efab23af92592616"
+dependencies = [
+ "arrayvec",
+ "bitflags",
+ "cfg-if",
+ "ryu",
+ "static_assertions",
+]
+
 [[package]]
 name = "libc"
 version = "0.2.77"
@@ -405,6 +424,17 @@ dependencies = [
  "autocfg",
 ]
 
+[[package]]
+name = "nom"
+version = "5.1.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ffb4262d26ed83a1c0a33a38fe2bb15797329c85770da05e6b828ddb782627af"
+dependencies = [
+ "lexical-core",
+ "memchr",
+ "version_check",
+]
+
 [[package]]
 name = "num-integer"
 version = "0.1.43"
@@ -607,6 +637,12 @@ version = "1.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "27207bb65232eda1f588cf46db2fee75c0808d557f6b3cf19a75f5d6d7c94df1"
 
+[[package]]
+name = "static_assertions"
+version = "1.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a2eb9349b6444b326872e140eb1cf5e7c522154d69e7a0ffb0fb81c06b37543f"
+
 [[package]]
 name = "syn"
 version = "1.0.39"
@@ -672,6 +708,12 @@ version = "0.2.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f7fe0bb3479651439c9112f72b6c505038574c9fbb575ed1bf3b797fa39dd564"
 
+[[package]]
+name = "version_check"
+version = "0.9.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b5a972e5669d67ba988ce3dc826706fb0a8b01471c088cb0b6110b805cc36aed"
+
 [[package]]
 name = "walkdir"
 version = "2.3.1"
@@ -847,6 +889,45 @@ dependencies = [
  "syn",
 ]
 
+[[package]]
+name = "yew-router"
+version = "0.14.0"
+source = "git+https://github.com/yewstack/yew.git?rev=1507c21b#1507c21b39e7941f7b9fe8ff5af792cf55be1f6f"
+dependencies = [
+ "cfg-if",
+ "cfg-match",
+ "gloo",
+ "js-sys",
+ "log",
+ "nom",
+ "serde",
+ "serde_json",
+ "wasm-bindgen",
+ "web-sys",
+ "yew",
+ "yew-router-macro",
+ "yew-router-route-parser",
+]
+
+[[package]]
+name = "yew-router-macro"
+version = "0.14.0"
+source = "git+https://github.com/yewstack/yew.git?rev=1507c21b#1507c21b39e7941f7b9fe8ff5af792cf55be1f6f"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+ "yew-router-route-parser",
+]
+
+[[package]]
+name = "yew-router-route-parser"
+version = "0.14.0"
+source = "git+https://github.com/yewstack/yew.git?rev=1507c21b#1507c21b39e7941f7b9fe8ff5af792cf55be1f6f"
+dependencies = [
+ "nom",
+]
+
 [[package]]
 name = "yewprint"
 version = "0.1.0"
@@ -867,6 +948,7 @@ dependencies = [
  "wasm-bindgen",
  "web-sys",
  "yew",
+ "yew-router",
  "yewprint",
 ]
 
diff --git a/yewprint-doc/Cargo.toml b/yewprint-doc/Cargo.toml
index af4ad3e..185ef86 100644
--- a/yewprint-doc/Cargo.toml
+++ b/yewprint-doc/Cargo.toml
@@ -14,6 +14,7 @@ wasm-bindgen = "^0.2"
 yew = { git = "https://github.com/yewstack/yew.git", rev = "1507c21b" }
 web-sys = { version = "0.3", features = ["Window", "MediaQueryList"] }
 yewprint = { path = "../yewprint" }
+yew-router = { git = "https://github.com/yewstack/yew.git", rev = "1507c21b" }
 
 [build-dependencies]
 syntect = "4.4.0"
diff --git a/yewprint-doc/src/app.rs b/yewprint-doc/src/app.rs
index dc77afa..556e482 100644
--- a/yewprint-doc/src/app.rs
+++ b/yewprint-doc/src/app.rs
@@ -2,17 +2,21 @@ use crate::buttons::*;
 use crate::callout::*;
 use crate::collapse::*;
 use crate::icon::*;
-use crate::switch::*;
-use crate::tree::*;
 use crate::progressbar::*;
+use crate::tree::*;
 
 use yew::prelude::*;
+use yew_router::{
+    agent::{RouteAgentDispatcher, RouteRequest},
+    router::Router,
+    Switch,
+};
 use yewprint::{ConditionalClass, IconName, Menu, MenuItem};
 
 pub struct App {
     link: ComponentLink<Self>,
-    doc_menu: DocMenu,
     dark_theme: ConditionalClass,
+    route_dispatcher: RouteAgentDispatcher,
 }
 
 pub enum Msg {
@@ -31,8 +35,8 @@ impl Component for App {
                 .map(|x| x.matches())
                 .unwrap_or(true)
                 .into(),
-            doc_menu: DocMenu::Button,
             link,
+            route_dispatcher: RouteAgentDispatcher::new(),
         }
     }
 
@@ -40,7 +44,8 @@ impl Component for App {
         match msg {
             Msg::ToggleLight => *self.dark_theme ^= true,
             Msg::GoToMenu(doc_menu) => {
-                self.doc_menu = doc_menu;
+                self.route_dispatcher
+                    .send(RouteRequest::ChangeRoute(doc_menu.into()));
             }
         }
         true
@@ -142,21 +147,20 @@ impl Component for App {
                     </div>
                     <main class="docs-content-wrapper" role="main">
                         <div class="docs-page">
-                            {
-                                match self.doc_menu {
-                                    DocMenu::Button => html! (<ButtonDoc />),
-                                    DocMenu::Switch => html! (<SwitchDoc
-                                        dark_theme=self.dark_theme
-                                        onclick=self.link.callback(|_| Msg::ToggleLight)
-                                        />),
-                                    DocMenu::Callout => html!(<CalloutDoc />),
-                                    DocMenu::Collapse => html!(<CollapseDoc />),
-                                    DocMenu::Tree => html!(<TreeDoc />),
-                                    DocMenu::Icon => html!(<IconDoc />),
-                                    DocMenu::ProgressBar => html!(<ProgressBarDoc />),
-                                    DocMenu::Menu => html!(),
-                                }
-                            }
+                            <Router<DocMenu, ()>
+                                render=Router::render(|switch: DocMenu| {
+                                    match switch {
+                                        DocMenu::Button | DocMenu::Home => html! (<ButtonDoc />),
+                                        DocMenu::Switch => html! (),
+                                        DocMenu::Callout => html!(<CalloutDoc />),
+                                        DocMenu::Collapse => html!(<CollapseDoc />),
+                                        DocMenu::Tree => html!(<TreeDoc />),
+                                        DocMenu::Icon => html!(<IconDoc />),
+                                        DocMenu::ProgressBar => html!(<ProgressBarDoc />),
+                                        DocMenu::Menu => html!(),
+                                    }
+                                })
+                            />
                         </div>
                     </main>
                 </div>
@@ -165,14 +169,24 @@ impl Component for App {
     }
 }
 
-#[derive(Debug, Copy, Clone)]
+#[derive(Debug, Copy, Clone, Switch)]
 pub enum DocMenu {
+    #[to = "/#button"]
     Button,
+    #[to = "/#callout"]
     Callout,
+    #[to = "/#collapse"]
     Collapse,
+    #[to = "/#icon"]
     Icon,
+    #[to = "/#menu"]
     Menu,
+    #[to = "/#switch"]
     Switch,
+    #[to = "/#tree"]
     Tree,
+    #[to = "/#progress-bar"]
     ProgressBar,
+    #[to = "/"]
+    Home,
 }
diff --git a/yewprint-doc/src/lib.rs b/yewprint-doc/src/lib.rs
index 4f1101a..1ab8df9 100644
--- a/yewprint-doc/src/lib.rs
+++ b/yewprint-doc/src/lib.rs
@@ -4,9 +4,9 @@ mod callout;
 mod collapse;
 mod example;
 mod icon;
+mod progressbar;
 mod switch;
 mod tree;
-mod progressbar;
 
 pub use app::*;
 pub use example::*;
diff --git a/yewprint-doc/src/progressbar/example.rs b/yewprint-doc/src/progressbar/example.rs
index 2ed7d74..7fa692a 100644
--- a/yewprint-doc/src/progressbar/example.rs
+++ b/yewprint-doc/src/progressbar/example.rs
@@ -1,43 +1,43 @@
-use yew::prelude::*;
-use yewprint::{ProgressBar, Intent};
-
-pub struct Example {
-    props: ExampleProps,
-}
-
-#[derive(Clone, PartialEq, Properties)]
-pub struct ExampleProps {
-    pub intent: Option<Intent>,
-    pub animate: bool,
-    pub stripes: bool,
-}
-
-impl Component for Example {
-    type Message = ();
-    type Properties = ExampleProps;
-
-    fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
-        Example { props }
-    }
-    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
-        true
-    }
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        if self.props != props {
-            self.props = props;
-            true
-        } else {
-            false
-        }
-    }
-    fn view(&self) -> Html {
-        html! {
-            <ProgressBar
-                animate=self.props.animate
-                stripes=self.props.stripes
-                intent=self.props.intent
-                value=0.3
-            />
-        }
-    }
-}
+use yew::prelude::*;
+use yewprint::{Intent, ProgressBar};
+
+pub struct Example {
+    props: ExampleProps,
+}
+
+#[derive(Clone, PartialEq, Properties)]
+pub struct ExampleProps {
+    pub intent: Option<Intent>,
+    pub animate: bool,
+    pub stripes: bool,
+}
+
+impl Component for Example {
+    type Message = ();
+    type Properties = ExampleProps;
+
+    fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
+        Example { props }
+    }
+    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
+        true
+    }
+    fn change(&mut self, props: Self::Properties) -> ShouldRender {
+        if self.props != props {
+            self.props = props;
+            true
+        } else {
+            false
+        }
+    }
+    fn view(&self) -> Html {
+        html! {
+            <ProgressBar
+                animate=self.props.animate
+                stripes=self.props.stripes
+                intent=self.props.intent
+                value=0.3
+            />
+        }
+    }
+}
diff --git a/yewprint-doc/src/progressbar/mod.rs b/yewprint-doc/src/progressbar/mod.rs
index 254893e..e189605 100644
--- a/yewprint-doc/src/progressbar/mod.rs
+++ b/yewprint-doc/src/progressbar/mod.rs
@@ -1,133 +1,132 @@
-mod example;
-
-use crate::ExampleContainer;
-use example::*;
-use yew::prelude::*;
-use yewprint::{Intent, Menu, MenuItem, Switch, H1, H5};
-
-
-pub struct ProgressBarDoc {
-    callback: Callback<ExampleProps>,
-    state: ExampleProps,
-}
-
-impl Component for ProgressBarDoc {
-    type Message = ExampleProps;
-    type Properties = ();
-
-    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
-        ProgressBarDoc {
-            callback: link.callback(|x| x),
-            state: ExampleProps { 
-                intent: None, 
-                animate: false,
-                stripes: false
-            },
-        }
-    }
-
-    fn update(&mut self, msg: Self::Message) -> ShouldRender {
-        self.state = msg;
-        true
-    }
-
-    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
-        true
-    }
-
-    fn view(&self) -> Html {
-        let example_props = self.state.clone();
-        let source = crate::include_raw_html!(
-            concat!(env!("OUT_DIR"), "/", file!(), ".html"),
-            "bp3-code-block"
-        );
-
-        html! {
-            <div>
-                <H1 class="docs-title">{"ProgressBar"}</H1>
-                <ExampleContainer
-                    source=source
-                    props=Some(html! {
-                        <ProgressBarProps
-                            callback={self.callback.clone()}
-                            props=example_props.clone()
-                        />
-                    })
-                >
-                    <Example with example_props />
-                </ExampleContainer>
-            </div>
-        }
-    }
-}
-
-crate::build_example_prop_component! {
-    ProgressBarProps for ExampleProps =>
-        fn view(&self) -> Html {
-            html! {
-                <div>
-                    <H5>{"Props"}</H5>
-                    <div>
-                        <Switch
-                            onclick=self.update_props(|props| ExampleProps {
-                                stripes: !props.stripes,
-                                ..props
-                            })
-                            checked=self.props.stripes
-                            label="Stripes"
-                        />
-                        <Switch
-                            onclick=self.update_props(|props| ExampleProps {
-                                animate: !props.animate,
-                                ..props
-                            })
-                            checked=self.props.animate
-                            label="animate"
-                        />
-                        <p>{"Select intent:"}</p>
-                        <Menu>
-                            <MenuItem
-                                onclick=self.update_props(|props| ExampleProps {
-                                    intent: None,
-                                    ..props
-                                })
-                                text=html!{"None"}
-                            />
-                            <MenuItem
-                                onclick=self.update_props(|props| ExampleProps {
-                                    intent: Some(Intent::Primary),
-                                    ..props
-                                })
-                                text=html!{"Primary"}
-                                intent=Intent::Primary
-                            />
-                            <MenuItem
-                                onclick=self.update_props(|props| ExampleProps {
-                                    intent: Some(Intent::Success),
-                                    ..props
-                                })
-                                text=html!{"Success"}
-                                intent=Intent::Success
-                            />
-                            <MenuItem
-                                onclick=self.update_props(|props| ExampleProps {
-                                    intent: Some(Intent::Warning),
-                                    ..props
-                                })
-                                text=html!{"Warning"}
-                                intent=Intent::Warning
-                            />
-                            <MenuItem
-                                onclick=self.update_props(|props| ExampleProps {
-                                    intent: Some(Intent::Danger),
-                                    ..props
-                                })
-                                text=html!{"Danger"}
-                                intent=Intent::Danger
-                            />
-                        </Menu>
-                    </div>
-                </div>
-            }
-        }
-}
+mod example;
+
+use crate::ExampleContainer;
+use example::*;
+use yew::prelude::*;
+use yewprint::{Intent, Menu, MenuItem, Switch, H1, H5};
+
+pub struct ProgressBarDoc {
+    callback: Callback<ExampleProps>,
+    state: ExampleProps,
+}
+
+impl Component for ProgressBarDoc {
+    type Message = ExampleProps;
+    type Properties = ();
+
+    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
+        ProgressBarDoc {
+            callback: link.callback(|x| x),
+            state: ExampleProps {
+                intent: None,
+                animate: false,
+                stripes: false,
+            },
+        }
+    }
+
+    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+        self.state = msg;
+        true
+    }
+
+    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
+        true
+    }
+
+    fn view(&self) -> Html {
+        let example_props = self.state.clone();
+        let source = crate::include_raw_html!(
+            concat!(env!("OUT_DIR"), "/", file!(), ".html"),
+            "bp3-code-block"
+        );
+
+        html! {
+            <div>
+                <H1 class="docs-title">{"ProgressBar"}</H1>
+                <ExampleContainer
+                    source=source
+                    props=Some(html! {
+                        <ProgressBarProps
+                            callback={self.callback.clone()}
+                            props=example_props.clone()
+                        />
+                    })
+                >
+                    <Example with example_props />
+                </ExampleContainer>
+            </div>
+        }
+    }
+}
+
+crate::build_example_prop_component! {
+    ProgressBarProps for ExampleProps =>
+        fn view(&self) -> Html {
+            html! {
+                <div>
+                    <H5>{"Props"}</H5>
+                    <div>
+                        <Switch
+                            onclick=self.update_props(|props| ExampleProps {
+                                stripes: !props.stripes,
+                                ..props
+                            })
+                            checked=self.props.stripes
+                            label="Stripes"
+                        />
+                        <Switch
+                            onclick=self.update_props(|props| ExampleProps {
+                                animate: !props.animate,
+                                ..props
+                            })
+                            checked=self.props.animate
+                            label="animate"
+                        />
+                        <p>{"Select intent:"}</p>
+                        <Menu>
+                            <MenuItem
+                                onclick=self.update_props(|props| ExampleProps {
+                                    intent: None,
+                                    ..props
+                                })
+                                text=html!{"None"}
+                            />
+                            <MenuItem
+                                onclick=self.update_props(|props| ExampleProps {
+                                    intent: Some(Intent::Primary),
+                                    ..props
+                                })
+                                text=html!{"Primary"}
+                                intent=Intent::Primary
+                            />
+                            <MenuItem
+                                onclick=self.update_props(|props| ExampleProps {
+                                    intent: Some(Intent::Success),
+                                    ..props
+                                })
+                                text=html!{"Success"}
+                                intent=Intent::Success
+                            />
+                            <MenuItem
+                                onclick=self.update_props(|props| ExampleProps {
+                                    intent: Some(Intent::Warning),
+                                    ..props
+                                })
+                                text=html!{"Warning"}
+                                intent=Intent::Warning
+                            />
+                            <MenuItem
+                                onclick=self.update_props(|props| ExampleProps {
+                                    intent: Some(Intent::Danger),
+                                    ..props
+                                })
+                                text=html!{"Danger"}
+                                intent=Intent::Danger
+                            />
+                        </Menu>
+                    </div>
+                </div>
+            }
+        }
+}
diff --git a/yewprint/src/progressbar.rs b/yewprint/src/progressbar.rs
index 88b0c57..c3d758c 100644
--- a/yewprint/src/progressbar.rs
+++ b/yewprint/src/progressbar.rs
@@ -1,63 +1,63 @@
-use crate::{ConditionalClass, Intent};
-use yew::prelude::*;
-
-pub struct ProgressBar {
-    props: Props,
-}
-
-#[derive(Clone, PartialEq, Properties)]
-pub struct Props {
-    #[prop_or_default]
-    pub animate: ConditionalClass,
-    #[prop_or_default]
-    pub stripes: ConditionalClass,
-    #[prop_or_default]
-    pub value: Option<f32>,
-    #[prop_or_default]
-    pub intent: Option<Intent>,
-}
-
-impl Component for ProgressBar {
-    type Message = ();
-    type Properties = Props;
-
-    fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
-        Self { props }
-    }
-
-    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
-        true
-    }
-
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        if self.props != props {
-            self.props = props;
-            true
-        } else {
-            false
-        }
-    }
-
-    fn view(&self) -> Html {
-        let width = if let Some(value) = self.props.value {
-            // NOTE: nightly, issue #44095 for f32::clamp
-            // let percent = ((1000. * value).ceil() / 10.).clamp(0.,100.);
-            let percent = ((1000. * value).ceil() / 10.).max(0.).min(100.);
-            format!("width: {}%;", percent)
-        } else {
-            "".into()
-        };
-        html! {
-            <div
-                class=(
-                    "bp3-progress-bar",
-                    self.props.intent,
-                    (!self.props.animate).map_some("bp3-no-animation"),
-                    (!self.props.stripes).map_some("bp3-no-stripes")
-                )
-            >
-                <div class="bp3-progress-meter" style={{width}}/>
-            </div>
-        }
-    }
-}
+use crate::{ConditionalClass, Intent};
+use yew::prelude::*;
+
+pub struct ProgressBar {
+    props: Props,
+}
+
+#[derive(Clone, PartialEq, Properties)]
+pub struct Props {
+    #[prop_or_default]
+    pub animate: ConditionalClass,
+    #[prop_or_default]
+    pub stripes: ConditionalClass,
+    #[prop_or_default]
+    pub value: Option<f32>,
+    #[prop_or_default]
+    pub intent: Option<Intent>,
+}
+
+impl Component for ProgressBar {
+    type Message = ();
+    type Properties = Props;
+
+    fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
+        Self { props }
+    }
+
+    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
+        true
+    }
+
+    fn change(&mut self, props: Self::Properties) -> ShouldRender {
+        if self.props != props {
+            self.props = props;
+            true
+        } else {
+            false
+        }
+    }
+
+    fn view(&self) -> Html {
+        let width = if let Some(value) = self.props.value {
+            // NOTE: nightly, issue #44095 for f32::clamp
+            // let percent = ((1000. * value).ceil() / 10.).clamp(0.,100.);
+            let percent = ((1000. * value).ceil() / 10.).max(0.).min(100.);
+            format!("width: {}%;", percent)
+        } else {
+            "".into()
+        };
+        html! {
+            <div
+                class=(
+                    "bp3-progress-bar",
+                    self.props.intent,
+                    (!self.props.animate).map_some("bp3-no-animation"),
+                    (!self.props.stripes).map_some("bp3-no-stripes")
+                )
+            >
+                <div class="bp3-progress-meter" style={{width}}/>
+            </div>
+        }
+    }
+}