From 2748538c6031babdf05c107d2453576a5882a21d Mon Sep 17 00:00:00 2001 From: JunichiSugiura Date: Sat, 3 Sep 2022 18:07:12 +0200 Subject: [PATCH 1/3] configure tailwind for todomvc example --- .gitignore | 2 + README.md | 4 ++ examples/todomvc/main.css | 60 +++++++++++++++++++++++++++++ examples/todomvc/main.rs | 22 +++++++++++ examples/todomvc/tailwind.config.js | 50 ++++++++++++++++++++++++ examples/todomvc/ui.rs | 5 ++- package.json | 3 +- 7 files changed, 143 insertions(+), 3 deletions(-) create mode 100644 examples/todomvc/main.css create mode 100644 examples/todomvc/tailwind.config.js diff --git a/.gitignore b/.gitignore index 62c6620..98d5095 100644 --- a/.gitignore +++ b/.gitignore @@ -3,7 +3,9 @@ /target Cargo.lock .DS_Store +pnpm-lock.yaml +/examples/todomvc/public /packages/website/public .vscode/* diff --git a/README.md b/README.md index ebb8ce1..fe296f7 100644 --- a/README.md +++ b/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 ``` diff --git a/examples/todomvc/main.css b/examples/todomvc/main.css new file mode 100644 index 0000000..72ac727 --- /dev/null +++ b/examples/todomvc/main.css @@ -0,0 +1,60 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + :root { + --color-text: 26 26 26; + --color-background: 255 255 255; + + --color-accent: 143 78 255; + --color-accent-background: 186 162 253; + + --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; + } + + .dark { + --color-text: 255 255 255; + --color-background: 0 0 0; + + --color-accent: 186 162 253; + --color-accent-background: 143 78 255; + + --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; + } +} + +@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; +} + diff --git a/examples/todomvc/main.rs b/examples/todomvc/main.rs index ee796f1..6df6d19 100644 --- a/examples/todomvc/main.rs +++ b/examples/todomvc/main.rs @@ -6,9 +6,31 @@ 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() { + 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:: { + custom_head: Some(format!("", css)), + ..Default::default() + }) .add_plugin(DioxusPlugin::::new(Root)) .add_plugin(LogPlugin) .add_plugin(UiStatePlugin) diff --git a/examples/todomvc/tailwind.config.js b/examples/todomvc/tailwind.config.js new file mode 100644 index 0000000..e474063 --- /dev/null +++ b/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", "background"]), + 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}) / )` +} + +function getColorVariant(name, keys) { + return keys.reduce((prev, key) => ({ + ...prev, + [key]: getColor(key === "DEFAULT" ? name : `${name}-${key}`), + }), {}); +} diff --git a/examples/todomvc/ui.rs b/examples/todomvc/ui.rs index 67ee14d..f920a60 100644 --- a/examples/todomvc/ui.rs +++ b/examples/todomvc/ui.rs @@ -13,11 +13,12 @@ pub fn Root(cx: Scope) -> Element { cx.render(rsx! { main { - style: "display: flex; flex-direction: column; align-items: center;", + class: "bg-neutral-100", + // style: "display: flex; flex-direction: column; align-items: center;", h1 { "todos" } div { - style: "display: flex; flex-direction: column; align-items: center;", + // style: "display: flex; flex-direction: column; align-items: center;", div { style: "display: flex;", label { diff --git a/package.json b/package.json index 5569a6f..8ae0337 100644 --- a/package.json +++ b/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", From b333c879f35b226295cd3ea4cb931db39c7093ce Mon Sep 17 00:00:00 2001 From: JunichiSugiura Date: Sun, 4 Sep 2022 11:11:47 +0200 Subject: [PATCH 2/3] partially style todomvc with tailwind --- examples/todomvc/main.css | 42 +++++---- examples/todomvc/tailwind.config.js | 2 +- examples/todomvc/ui.rs | 134 ++++++++++++++-------------- 3 files changed, 87 insertions(+), 91 deletions(-) diff --git a/examples/todomvc/main.css b/examples/todomvc/main.css index 72ac727..2d3f4a4 100644 --- a/examples/todomvc/main.css +++ b/examples/todomvc/main.css @@ -5,29 +5,9 @@ @layer base { :root { --color-text: 26 26 26; - --color-background: 255 255 255; + --color-background: 245 245 245; - --color-accent: 143 78 255; - --color-accent-background: 186 162 253; - - --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; - } - - .dark { - --color-text: 255 255 255; - --color-background: 0 0 0; - - --color-accent: 186 162 253; - --color-accent-background: 143 78 255; + --color-accent: 175 47 47; --color-neutral-50: 250 250 250; --color-neutral-100: 242 242 242; @@ -40,6 +20,24 @@ --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 { diff --git a/examples/todomvc/tailwind.config.js b/examples/todomvc/tailwind.config.js index e474063..dcb03ab 100644 --- a/examples/todomvc/tailwind.config.js +++ b/examples/todomvc/tailwind.config.js @@ -15,7 +15,7 @@ module.exports = { text: getColor("text"), background: getColor("background"), - accent: getColorVariant("accent", ["DEFAULT", "background"]), + accent: getColorVariant("accent", ["DEFAULT"]), neutral: getColorVariant("neutral", [50, 100, 200, 300, 400, 500, 600, 700, 800, 900]), }, fontFamily: { diff --git a/examples/todomvc/ui.rs b/examples/todomvc/ui.rs index f920a60..a137968 100644 --- a/examples/todomvc/ui.rs +++ b/examples/todomvc/ui.rs @@ -13,16 +13,76 @@ pub fn Root(cx: Scope) -> Element { cx.render(rsx! { main { - class: "bg-neutral-100", - // 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:" } @@ -52,7 +112,6 @@ pub fn Root(cx: Scope) -> Element { } ul { - style: "display: flex; list-style-type: none; padding: 0;", li { button { onclick: |_| { @@ -69,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 - } - } - }) - } } }) } From 20fd5bbb865c2ba9c6c2ac5c44dd76e228cff61d Mon Sep 17 00:00:00 2001 From: JunichiSugiura Date: Sun, 4 Sep 2022 14:12:44 +0200 Subject: [PATCH 3/3] comment about tailwind script --- examples/todomvc/main.rs | 1 + 1 file changed, 1 insertion(+) diff --git a/examples/todomvc/main.rs b/examples/todomvc/main.rs index 6df6d19..17a7014 100644 --- a/examples/todomvc/main.rs +++ b/examples/todomvc/main.rs @@ -9,6 +9,7 @@ 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")