Setup a simple Yew frontend with skeletons for Context, Routing, Comp…

…onents, Pages, and Layouts. Signed-off-by: Aalekh Patel <[email protected]>
aalekhpatel07 · Jun 12, 2022 · cedc249 · cedc249
1 parent b7f50a1
commit cedc249
Show file tree

Hide file tree

Showing 20 changed files with 312 additions and 12 deletions.
diff --git a/yew-frontend/Cargo.lock b/yew-frontend/Cargo.lock
diff --git a/yew-frontend/Cargo.toml b/yew-frontend/Cargo.toml
@@ -1,9 +1,16 @@
 [package]
-name = "text-cleaner"
+name = "text-cleaner-frontend"
 version = "0.1.0"
 edition = "2021"
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
 yew = "0.19.3"
+wasm-bindgen = "0.2.78"
+wasm-bindgen-futures = "0.4.28"
+web-sys = "0.3.55"
+js-sys = "0.3.55"
+wasm-logger = "0.2.0"
+text-cleaner = { path = "../text-cleaner" }
+yew-router = { version = "0.16" }
diff --git a/yew-frontend/index.html b/yew-frontend/index.html
@@ -5,8 +5,9 @@
  <title>Text Cleaner</title>
 
  <link data-trunk rel="css" href="/public/main.css">
+ <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
  </head>
- <body>
+ <body class="h-full">
  </body>
 </html>
 
diff --git a/yew-frontend/public/glue.js b/yew-frontend/public/glue.js
@@ -0,0 +1,5 @@
+const invoke = window.__TAURI__.invoke;
+
+export async function invokeHello(name) {
+ return await invoke("hello", { name });
+}
diff --git a/yew-frontend/src/components/context.rs b/yew-frontend/src/components/context.rs
@@ -0,0 +1,22 @@
+use yew::prelude::*;
+use yew::{Children, ContextProvider};
+use crate::contexts::*;
+
+
+#[derive(Debug, Properties, PartialEq)]
+pub struct ContextProps {
+ pub children: Children
+}
+
+#[function_component(ContextComp)]
+pub fn context_comp(props: &ContextProps) -> Html {
+ let theme = use_state(|| Theme::dark());
+
+ html! {
+ <ContextProvider<Theme> context={(*theme).clone()}>
+ <div class="h-full w-full bg-red-800">
+ { for props.children.iter() }
+ </div> 
+ </ContextProvider<Theme>>
+ }
+}
diff --git a/yew-frontend/src/components/mod.rs b/yew-frontend/src/components/mod.rs
@@ -0,0 +1,7 @@
+mod textbox;
+mod context;
+mod navbar;
+
+pub use textbox::*;
+pub use context::*;
+pub use navbar::*;
diff --git a/yew-frontend/src/components/navbar.rs b/yew-frontend/src/components/navbar.rs
@@ -0,0 +1,47 @@
+use yew::prelude::*;
+use yew::{Properties};
+use yew_router::prelude::*;
+use crate::router::Route;
+
+
+#[derive(Debug, Properties, PartialEq)]
+pub struct NavbarProps {
+ #[prop_or(vec![true, false])]
+ items: Vec<bool>,
+}
+
+
+#[function_component(Navbar)]
+pub fn navbar(props: &NavbarProps) -> Html {
+ let history = use_history().unwrap();
+
+ let to_home = {
+ let history = history.clone();
+ Callback::once(move |_| history.push(Route::Home))
+ };
+
+ let to_about = {
+ let history = history.clone();
+ Callback::once(move |_| history.push(Route::About))
+ };
+
+
+ html! {
+ <nav>
+ <ul>
+ <li onclick={to_home}> 
+ {"Home"}
+ // <Link<Route> to={Route::Home}>
+ // {"Home"} 
+ // </Link<Route>>
+ </li>
+ <li onclick={to_about}> 
+ {"About"}
+ // <Link<Route> to={Route::About}>
+ // {"About"} 
+ // </Link<Route>>
+ </li>
+ </ul>
+ </nav>
+ }
+}
diff --git a/yew-frontend/src/components/textbox.rs b/yew-frontend/src/components/textbox.rs
@@ -0,0 +1,30 @@
+use yew::prelude::*;
+
+use crate::contexts::Theme;
+
+
+#[function_component(Textbox)]
+pub fn app() -> Html {
+ let input = use_state(|| "".to_string());
+ let theme = use_context::<Theme>().expect("No Theme context found.");
+
+ let placeholder = "Enter some text here.....".to_owned();
+ let input_str = (*input).clone();
+
+ html! {
+ <div>
+ <label for={"inputBox"}>
+ {"Text Cleaner"}
+ </label>
+ <textarea 
+ name={"inputBox"} 
+ rows="40" 
+ cols="auto"
+ placeholder={placeholder}
+ >
+ </textarea>
+ {input_str}
+ {theme}
+ </div>
+ }
+}
diff --git a/yew-frontend/src/contexts/mod.rs b/yew-frontend/src/contexts/mod.rs
@@ -0,0 +1,3 @@
+mod theme;
+
+pub use theme::*;
diff --git a/yew-frontend/src/contexts/theme.rs b/yew-frontend/src/contexts/theme.rs
@@ -0,0 +1,50 @@
+use std::fmt::Display;
+
+
+#[derive(Debug, Clone, PartialEq)]
+pub struct Theme {
+ body_background: String,
+ font_family: String,
+ font_size: String,
+ font_color: String,
+}
+
+
+impl Theme {
+ pub fn light() -> Self {
+ Self {
+ body_background: "#ffffff".to_owned(),
+ font_color: "#000000".to_owned(),
+ ..Default::default()
+ }
+ }
+ pub fn dark() -> Self {
+ Self {
+ body_background: "#2d2d2d".to_owned(),
+ font_color: "#ffffff".to_owned(),
+ ..Default::default()
+ }
+ }
+}
+
+
+impl Default for Theme {
+ fn default() -> Self {
+ Self {
+ body_background: "#000000".to_owned(),
+ font_family: "Open Sans".to_owned(),
+ font_size: "18px".to_owned(),
+ font_color: "#ffffff".to_owned()
+ }
+ }
+}
+
+
+impl Display for Theme {
+ fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+ write!(f, "body_background={}, ", self.body_background)?;
+ write!(f, "font_family={}, ", self.font_family)?;
+ write!(f, "font_size={}, ", self.font_size)?;
+ write!(f, "font_color={}", self.font_color)
+ }
+}
diff --git a/yew-frontend/src/glue.rs b/yew-frontend/src/glue.rs
@@ -0,0 +1,7 @@
+use wasm_bindgen::prelude::*;
+
+#[wasm_bindgen(module = "/public/glue.js")]
+extern "C" {
+ #[wasm_bindgen(js_name = invokeHello, catch)]
+ pub async fn hello(name: String) -> Result<JsValue, JsValue>;
+}
diff --git a/yew-frontend/src/layouts/base.rs b/yew-frontend/src/layouts/base.rs
@@ -0,0 +1,31 @@
+use yew::prelude::*;
+use yew::{Children, ContextProvider};
+use yew_router::BrowserRouter;
+use crate::components::Navbar;
+use crate::contexts::Theme;
+
+
+#[derive(Debug, Properties, PartialEq)]
+pub struct Props {
+ pub children: Children
+}
+
+#[function_component(BaseLayout)]
+pub fn base_layout(props: &Props) -> Html {
+ let theme = use_context::<Theme>().unwrap();
+
+ html! {
+ <div class="flex">
+ <div 
+ class="bg-blue-400 w-1/5 min-h-screen border-r border-gray-800"
+ >
+ <Navbar/>
+ </div>
+ <div
+ class="w-4/5 bg-yellow-300 min-h-screen"
+ >
+ { for props.children.iter() }
+ </div>
+ </div>
+ }
+}
diff --git a/yew-frontend/src/layouts/mod.rs b/yew-frontend/src/layouts/mod.rs
@@ -0,0 +1,2 @@
+mod base;
+pub use base::*;
diff --git a/yew-frontend/src/lib.rs b/yew-frontend/src/lib.rs
@@ -0,0 +1,11 @@
+pub use text_cleaner::clean::Clean;
+// pub use yew_router::{prelude::*, route::Route, switch::Permissive, Switch};
+
+mod components;
+mod glue;
+pub mod router;
+mod layouts;
+
+pub mod pages;
+pub mod contexts;
+pub use components::*;
diff --git a/yew-frontend/src/main.rs b/yew-frontend/src/main.rs
@@ -1,16 +1,24 @@
+// use wasm_bindgen::prelude::*;
+// use wasm_bindgen_futures::spawn_local;
+// use web_sys::window;
+use text_cleaner_frontend::router::{switch, Route};
+use yew::function_component;
+use yew_router::{Switch, BrowserRouter};
 use yew::prelude::*;
+use text_cleaner_frontend::ContextComp;
 
 
-fn main() {
- yew::start_app::<App>();
-}
-
-
-#[function_component(App)]
-pub fn app() -> Html {
+#[function_component(Base)]
+fn base() -> Html {
  html! {
- <div>
- <h2 class={"heading"}>{"Hello, World!"}</h2>
- </div>
+ <ContextComp>
+ <BrowserRouter>
+ <Switch<Route> render={Switch::render(switch)} />
+ </BrowserRouter>
+ </ContextComp>
  }
+}
+
+fn main() {
+ yew::start_app::<Base>();
 }
diff --git a/yew-frontend/src/pages/about.rs b/yew-frontend/src/pages/about.rs
@@ -0,0 +1,12 @@
+use yew::prelude::*;
+use crate::layouts::*;
+
+
+#[function_component(About)]
+pub fn about() -> Html {
+ html! {
+ <BaseLayout>
+ {"About route!"}
+ </BaseLayout>
+ }
+}
diff --git a/yew-frontend/src/pages/home.rs b/yew-frontend/src/pages/home.rs
@@ -0,0 +1,13 @@
+use yew::prelude::*;
+use crate::components::*;
+use crate::layouts::*;
+
+
+#[function_component(Home)]
+pub fn home() -> Html {
+ html! {
+ <BaseLayout>
+ <Textbox/>
+ </BaseLayout>
+ }
+}
diff --git a/yew-frontend/src/pages/mod.rs b/yew-frontend/src/pages/mod.rs
@@ -0,0 +1,5 @@
+mod home;
+mod about;
+
+pub use home::*;
+pub use about::*;
diff --git a/yew-frontend/src/router.rs b/yew-frontend/src/router.rs
@@ -0,0 +1,23 @@
+use yew_router::prelude::*;
+use yew::prelude::*;
+use crate::pages::*;
+
+#[derive(Clone, Routable, PartialEq)]
+pub enum Route {
+ #[at("/")]
+ Home,
+ #[at("/about")]
+ About,
+ #[not_found]
+ #[at("/404")]
+ NotFound
+}
+
+pub fn switch(route: &Route) -> Html {
+ match route {
+ Route::Home => html! { <Home /> },
+ Route::About => html! { <About/> },
+ Route::NotFound => html! {<h1>{"Not found"}</h1>},
+ // _ => html! {<Home/>}
+ }
+}
diff --git a/yew-frontend/src/textbox.rs b/yew-frontend/src/textbox.rs