Configure Tailwind for TodoMVC example (#75)

* configure tailwind for todomvc example

* partially style todomvc with tailwind

* comment about tailwind script

.gitignore

@@ -3,7 +3,9 @@
 /target
 Cargo.lock
 .DS_Store
+pnpm-lock.yaml
 
+/examples/todomvc/public
 /packages/website/public
 
 .vscode/*

README.md

@@ -67,6 +67,10 @@ gh repo clone JunichiSugiura/bevy_dioxus
 cd bevy_dioxus
 
 cargo run --example counter
+
+// requires npm for styling
+npm install
+// this script compiles Tailwind CSS and starts Rust example
 cargo run --example todomvc
 ```
 

examples/todomvc/main.css

@@ -0,0 +1,58 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    :root {
+        --color-text:               26  26  26;
+        --color-background:        245 245 245;
+
+        --color-accent:            175  47  47;
+
+        --color-neutral-50:        250 250 250;
+        --color-neutral-100:       242 242 242;
+        --color-neutral-200:       230 230 230;
+        --color-neutral-300:       193 193 193;
+        --color-neutral-400:       153 153 153;
+        --color-neutral-500:       119 119 119;
+        --color-neutral-600:        85  85  85;
+        --color-neutral-700:        68  68  68;
+        --color-neutral-800:        51  51  51;
+        --color-neutral-900:        34  34  34;
+    }
+
+    .dark {
+        --color-text:              255 255 255;
+        --color-background:          0   0   0;
+
+        --color-accent:            175  47  47;
+
+        --color-neutral-50:         34  34  34;
+        --color-neutral-100:        51  51  51;
+        --color-neutral-200:        68  68  68;
+        --color-neutral-300:        85  85  85;
+        --color-neutral-400:       119 119 119;
+        --color-neutral-500:       153 153 153;
+        --color-neutral-600:       193 193 193;
+        --color-neutral-700:       230 230 230;
+        --color-neutral-800:       242 242 242;
+        --color-neutral-900:       250 250 250;
+    }
+}
+
+@font-face {
+    font-family: Inter;
+    src: url(/fonts/Inter/Inter-Medium.ttf) format("ttf");
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: Inter;
+    src: url(/fonts/Inter/Inter-SemiBold.ttf) format("ttf");
+    font-style: "Semi Bold";
+    font-weight: 400;
+    font-display: swap;
+}
+

examples/todomvc/main.rs

@@ -6,9 +6,32 @@ mod ui_state;
 
 use crate::{event::*, system::*, ui::Root, ui_state::*};
 use bevy_dioxus::{bevy::log::LogPlugin, desktop::prelude::*};
+use std::{fs, process::Command};
 
 fn main() {
+    // quick and dirty way to compile tailwind css on each run
+    let script = "npm run todomvc:css";
+    if cfg!(target_os = "windows") {
+        Command::new("cmd")
+            .args(["/C", script])
+            .output()
+            .expect("failed to execute process");
+    } else {
+        Command::new("sh")
+            .arg("-c")
+            .arg(script)
+            .output()
+            .expect("failed to execute process");
+    };
+
+    let css = fs::read_to_string("examples/todomvc/public/main.css")
+        .expect("Should have been able to read the file");
+
     App::new()
+        .insert_non_send_resource(DioxusSettings::<NoRootProps> {
+            custom_head: Some(format!("<style>{}</style>", css)),
+            ..Default::default()
+        })
         .add_plugin(DioxusPlugin::<UiState, UiAction>::new(Root))
         .add_plugin(LogPlugin)
         .add_plugin(UiStatePlugin)

examples/todomvc/tailwind.config.js

@@ -0,0 +1,50 @@
+const colors = require("tailwindcss/colors");
+const defaultTheme = require('tailwindcss/defaultTheme')
+
+module.exports = {
+  darkMode: "class",
+  content: [
+    "./examples/todomvc/**/*.rs"
+  ],
+  theme: {
+    colors: {
+        inherit: colors.inherit,
+        current: colors.current,
+        transparent: colors.transparent,
+
+        text: getColor("text"),
+        background: getColor("background"),
+
+        accent: getColorVariant("accent", ["DEFAULT"]),
+        neutral: getColorVariant("neutral", [50, 100, 200, 300, 400, 500, 600, 700, 800, 900]),
+    },
+    fontFamily: {
+      sans: ["Inter", ...defaultTheme.fontFamily.sans],
+      mono: defaultTheme.fontFamily.mono,
+    },
+    screens: {
+      md: "768px",
+      lg: "1024px",
+      xl: "1280px"
+    },
+    extend: {
+      maxWidth: theme => ({
+        "screen-xl": theme("screens.xl"),
+      })
+    }
+  },
+  plugins: [
+    require('@tailwindcss/typography'),
+  ],
+};
+
+function getColor(name) {
+  return `rgb(var(--color-${name}) / <alpha-value>)`
+}
+
+function getColorVariant(name, keys) {
+  return keys.reduce((prev, key) => ({
+    ...prev,
+    [key]: getColor(key === "DEFAULT" ? name : `${name}-${key}`),
+  }), {});
+}

examples/todomvc/ui.rs

@@ -13,15 +13,76 @@ pub fn Root(cx: Scope) -> Element {
 
     cx.render(rsx! {
         main {
-            style: "display: flex; flex-direction: column; align-items: center;",
-            h1 { "todos" }
+            class: "w-screen h-screen flex flex-col items-center bg-background",
+            header {
+                class: "w-96 flex flex-col items-center",
+                h1 {
+                    class: "text-8xl text-accent opacity-20 font-thin p-4",
+                    "todos"
+                }
+
+                input {
+                    class: "w-full text-2xl p-1 pl-16",
+                    value: "{new_todo}",
+                    oninput: |e| {
+                        new_todo.set(e.value.clone());
+                    },
+                    onchange: |e| {
+                        window.send(UiAction::create_todo(&e.value));
+                        new_todo.set("".to_string());
+                    }
+                }
+            }
+
+            ul {
+                style: "w-96 flex flex-col items-stretch",
+                // doesn't work with dioxus <= v0.2.4 but fix is already merged in master.
+                onmouseleave: |_| {
+                    hovered.set(None);
+                },
+                todo_list.iter().map(|todo| rsx! {
+                    li {
+                        key: "{todo.entity:?}",
+                        class: "text-2xl p-1 pl-16 flex",
+                        onmouseover: |_| {
+                            hovered.set(Some(todo.entity));
+                        },
+                        div {
+                            onclick: |_| {
+                                window.send(UiAction::toggle_done(&todo.entity));
+                            },
+                            [format_args!("{}", if todo.done_at.is_some() { "✅" } else { "❎" })],
+                        }
+                        input {
+                            value: "{todo.title}",
+                            oninput: |e| {
+                                window.send(UiAction::change_title(&todo.entity, &e.value));
+                            }
+                        }
+
+                        if let Some(entity) = hovered.get() {
+                            if entity == &todo.entity {
+                                cx.render(rsx! {
+                                    button {
+                                        onclick: |_| {
+                                            window.send(UiAction::remove_todo(&todo.entity));
+                                        },
+                                        "X"
+                                    }
+                                })
+                            } else {
+                                None
+                            }
+                        } else {
+                            None
+                        }
+                    }
+                })
+            }
 
             div {
-                style: "display: flex; flex-direction: column; align-items: center;",
                 div {
-                    style: "display: flex;",
                     label {
-                        style: "margin-right: 0.25rem;",
                         r#for: "filter-select",
                         "Choose a filter:"
                     }
@@ -51,7 +112,6 @@ pub fn Root(cx: Scope) -> Element {
                 }
 
                 ul {
-                    style: "display: flex; list-style-type: none; padding: 0;",
                     li {
                         button {
                             onclick: |_| {
@@ -68,67 +128,6 @@ pub fn Root(cx: Scope) -> Element {
                     }
                 }
             }
-
-            input {
-                value: "{new_todo}",
-                oninput: |e| {
-                    new_todo.set(e.value.clone());
-                },
-                onchange: |e| {
-                    window.send(UiAction::create_todo(&e.value));
-                    new_todo.set("".to_string());
-                }
-            }
-
-            ul {
-                // doesn't work with dioxus <= v0.2.4 but fix is already merged in master.
-                style: "max-width: 400px; width: 100vw; list-style-type: none;",
-                onmouseleave: |_| {
-                    hovered.set(None);
-                },
-                todo_list.iter().map(|todo| rsx! {
-                    li {
-                        key: "{todo.entity:?}",
-                        style: "display: flex; align-items: center; justify-content: space-between; background: #ddd; padding: 1rem; height: 32px;",
-                        onmouseover: |_| {
-                            hovered.set(Some(todo.entity));
-                        },
-                        div { style: "display: flex; align-items: center;",
-                            div {
-                                style: "padding-right: 1rem;",
-                                onclick: |_| {
-                                    window.send(UiAction::toggle_done(&todo.entity));
-                                },
-                                [format_args!("{}", if todo.done_at.is_some() { "✅" } else { "❎" })],
-                            }
-                            input {
-                                value: "{todo.title}",
-                                oninput: |e| {
-                                    window.send(UiAction::change_title(&todo.entity, &e.value));
-                                }
-                            }
-                        }
-
-                        if let Some(entity) = hovered.get() {
-                            if entity == &todo.entity {
-                                cx.render(rsx! {
-                                    button {
-                                        style: "align-self: flex-end",
-                                        onclick: |_| {
-                                            window.send(UiAction::remove_todo(&todo.entity));
-                                        },
-                                        "X"
-                                    }
-                                })
-                            } else {
-                                None
-                            }
-                        } else {
-                            None
-                        }
-                    }
-                })
-            }
         }
     })
 }

package.json

@@ -5,7 +5,8 @@
   "main": "index.js",
   "scripts": {
     "build": "tailwindcss -i ./packages/website/src/main.css -o ./packages/website/public/main.css -c ./packages/website/tailwind.config.js",
-    "watch": "tailwindcss -i ./packages/website/src/main.css -o ./packages/website/public/main.css -c ./packages/website/tailwind.config.js -w"
+    "watch": "tailwindcss -i ./packages/website/src/main.css -o ./packages/website/public/main.css -c ./packages/website/tailwind.config.js -w",
+    "todomvc:css": "tailwindcss -i ./examples/todomvc/main.css -o ./examples/todomvc/public/main.css -c ./examples/todomvc/tailwind.config.js"
   },
   "author": "",
   "license": "ISC",