Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Configure Tailwind for TodoMVC example #75

Merged
merged 3 commits into from
Sep 4, 2022
Merged

Configure Tailwind for TodoMVC example #75

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2748538
configure tailwind for todomvc example
JunichiSugiura Sep 3, 2022
b333c87
partially style todomvc with tailwind
JunichiSugiura Sep 4, 2022
20fd5bb
comment about tailwind script
JunichiSugiura Sep 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,9 @@
/target
Cargo.lock
.DS_Store
pnpm-lock.yaml

/examples/todomvc/public
/packages/website/public

.vscode/*
Expand Down
4 changes: 4 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
```

Expand Down
58 changes: 58 additions & 0 deletions examples/todomvc/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}

23 changes: 23 additions & 0 deletions examples/todomvc/main.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
50 changes: 50 additions & 0 deletions examples/todomvc/tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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}`),
}), {});
}
133 changes: 66 additions & 67 deletions examples/todomvc/ui.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:"
}
Expand Down Expand Up @@ -51,7 +112,6 @@ pub fn Root(cx: Scope) -> Element {
}

ul {
style: "display: flex; list-style-type: none; padding: 0;",
li {
button {
onclick: |_| {
Expand All @@ -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
}
}
})
}
}
})
}
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down