feat: add feature slicing

Signed-off-by: kjuulh <contact@kjuulh.io>
This commit is contained in:
Kasper Juul Hermansen 2023-06-05 12:54:07 +02:00
parent 74a16b4d7c
commit 36e2766bb9
Signed by: kjuulh
GPG Key ID: 57B6E1465221F912
24 changed files with 526 additions and 41 deletions

38
Cargo.lock generated
View File

@ -404,8 +404,9 @@ dependencies = [
"leptos_meta", "leptos_meta",
"leptos_router", "leptos_router",
"log", "log",
"reqwest", "reqwasm",
"serde", "serde",
"serde_json",
"simple_logger", "simple_logger",
"thiserror", "thiserror",
"tokio", "tokio",
@ -800,6 +801,26 @@ dependencies = [
"wasm-bindgen", "wasm-bindgen",
] ]
[[package]]
name = "gloo-net"
version = "0.1.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "2899cb1a13be9020b010967adc6b2a8a343b6f1428b90238c9d53ca24decc6db"
dependencies = [
"futures-channel",
"futures-core",
"futures-sink",
"gloo-utils",
"js-sys",
"pin-project",
"serde",
"serde_json",
"thiserror",
"wasm-bindgen",
"wasm-bindgen-futures",
"web-sys",
]
[[package]] [[package]]
name = "gloo-net" name = "gloo-net"
version = "0.2.6" version = "0.2.6"
@ -1356,7 +1377,7 @@ dependencies = [
"cached", "cached",
"cfg-if", "cfg-if",
"common_macros", "common_macros",
"gloo-net", "gloo-net 0.2.6",
"js-sys", "js-sys",
"lazy_static", "lazy_static",
"leptos", "leptos",
@ -1927,6 +1948,15 @@ version = "0.7.2"
source = "registry+https://github.com/rust-lang/crates.io-index" source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "436b050e76ed2903236f032a59761c1eb99e1b0aead2c257922771dab1fc8c78" checksum = "436b050e76ed2903236f032a59761c1eb99e1b0aead2c257922771dab1fc8c78"
[[package]]
name = "reqwasm"
version = "0.5.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "05b89870d729c501fa7a68c43bf4d938bbb3a8c156d333d90faa0e8b3e3212fb"
dependencies = [
"gloo-net 0.1.0",
]
[[package]] [[package]]
name = "reqwest" name = "reqwest"
version = "0.11.18" version = "0.11.18"
@ -2155,7 +2185,7 @@ checksum = "e4f115508f94ea61b6e9ed5f4ecd1926ad283b143680183c65dc450c20c8520a"
dependencies = [ dependencies = [
"ciborium", "ciborium",
"const_format", "const_format",
"gloo-net", "gloo-net 0.2.6",
"js-sys", "js-sys",
"once_cell", "once_cell",
"proc-macro2", "proc-macro2",
@ -2767,6 +2797,8 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "5bba0e8cb82ba49ff4e229459ff22a191bbe9a1cb3a341610c9c33efc27ddf73" checksum = "5bba0e8cb82ba49ff4e229459ff22a191bbe9a1cb3a341610c9c33efc27ddf73"
dependencies = [ dependencies = [
"cfg-if", "cfg-if",
"serde",
"serde_json",
"wasm-bindgen-macro", "wasm-bindgen-macro",
] ]

View File

@ -35,13 +35,14 @@ tracing-subscriber = { version = "0.3.16", optional = true, features = [
"env-filter", "env-filter",
] } ] }
tracing = { version = "0.1.37", features = ["log"], optional = true } tracing = { version = "0.1.37", features = ["log"], optional = true }
anyhow = { version = "1.0.71", optional = true } anyhow = { version = "1.0.71" }
serde = { workspace = true } serde = { workspace = true }
chrono = { workspace = true } chrono = { workspace = true }
uuid = { workspace = true, features = ["v4", "wasm-bindgen", "js", "serde"] } uuid = { workspace = true, features = ["v4", "wasm-bindgen", "js", "serde"] }
graphql_client = { version = "0.13.0", optional = true, features = ["reqwest"] } graphql_client = { version = "0.13.0", features = ["reqwest"] }
reqwest = { version = "0.11.18", optional = true } reqwasm = "0.5.0"
serde_json = "1.0.96"
[features] [features]
hydrate = ["leptos/hydrate", "leptos_meta/hydrate", "leptos_router/hydrate"] hydrate = ["leptos/hydrate", "leptos_meta/hydrate", "leptos_router/hydrate"]
@ -56,9 +57,6 @@ ssr = [
"dep:leptos_axum", "dep:leptos_axum",
"dep:tracing-subscriber", "dep:tracing-subscriber",
"dep:tracing", "dep:tracing",
"dep:graphql_client",
"dep:reqwest",
"dep:anyhow",
] ]
[package.metadata.leptos] [package.metadata.leptos]

View File

@ -1,3 +1,14 @@
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
html, body {
scroll-behavior: smooth;
min-height: 100%;
@apply bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100;
}
.feature-case {
@apply m-8 border-blue-700 border-2 rounded-lg p-4;
}

3
leptosfmt.toml Normal file
View File

@ -0,0 +1,3 @@
max_width = 100
tab_spaces = 4
attr_value_brace_style = "WhenRequired" # "Always", "AlwaysUnlessLit", "WhenRequired" or "Preserve"

View File

@ -7,10 +7,6 @@ graphql-client introspect-schema \
graphql-client generate \ graphql-client generate \
--schema-path src/api/graphql/schema/schema.json \ --schema-path src/api/graphql/schema/schema.json \
src/api/graphql/schema/mutations.graphql \ src/features/navbar_projects/graphql/queries.graphql \
--output-directory src/api/graphql/gen --output-directory src/features/navbar_projects/gen \
--custom-scalars-module='crate::common::graphql'
graphql-client generate \
--schema-path src/api/graphql/schema/schema.json \
src/api/graphql/schema/queries.graphql \
--output-directory src/api/graphql/gen

View File

@ -2,41 +2,54 @@ use leptos::*;
use leptos_meta::*; use leptos_meta::*;
use leptos_router::*; use leptos_router::*;
use crate::common::layout::DashboardLayout;
use crate::routes::dash::home::DashHomePage;
use crate::routes::features_view::FeaturesView;
use crate::routes::home::HomePage;
#[component] #[component]
pub fn App(cx: Scope) -> impl IntoView { pub fn App(cx: Scope) -> impl IntoView {
// Provides context that manages stylesheets, titles, meta tags, etc. // Provides context that manages stylesheets, titles, meta tags, etc.
provide_meta_context(cx); provide_meta_context(cx);
view! { view! { cx,
cx,
// injects a stylesheet into the document <head>
// id=leptos means cargo-leptos will hot-reload this stylesheet
<Stylesheet id="leptos" href="/pkg/como_web.css"/> <Stylesheet id="leptos" href="/pkg/como_web.css"/>
// sets the document title
<Title text="Welcome to Leptos"/>
// content for this welcome page
<Router> <Router>
<main> <main>
<Routes> <Routes>
<Route path="" view=|cx| view! { cx, <HomePage/> }/> <Route
path=""
view=|cx| {
view! { cx, <HomePage/> }
}
/>
<Route
path="/dash"
view=|cx| {
view! { cx, <DashboardLayout/> }
}
>
<Route
path=""
view=|cx| {
view! { cx, <DashHomePage/> }
}
/>
<Route
path="home"
view=|cx| {
view! { cx, <DashHomePage/> }
}
/>
</Route>
<Route
path="/features"
view=|cx| {
view! { cx, <FeaturesView/> }
}
/>
</Routes> </Routes>
</main> </main>
</Router> </Router>
} }
} }
/// Renders the home page of your application.
#[component]
fn HomePage(cx: Scope) -> impl IntoView {
// Creates a reactive value to update the button
let (count, set_count) = create_signal(cx, 0);
let on_click = move |_| set_count.update(|count| *count += 1);
view! { cx,
<h1 class="text-xl text-red-50">"Welcome to Leptos!"</h1>
<button on:click=on_click>"Click Me: " {count}</button>
}
}

2
src/common.rs Normal file
View File

@ -0,0 +1,2 @@
pub mod layout;
pub mod graphql;

View File

@ -0,0 +1 @@
pub type UUID = uuid::Uuid;

46
src/common/layout.rs Normal file
View File

@ -0,0 +1,46 @@
use leptos::*;
use leptos_router::*;
use crate::features::navbar_projects::NavbarProjects;
#[component]
pub fn DashNav(cx: Scope) -> impl IntoView {
view! { cx,
<nav class="absolute min-w-[200px] p-4 space-y-4 h-screen sticky top-0 select-none">
<div>
<a href="/dash/home" class="text-xl">
"como"
</a>
</div>
<div>
<a href="/dash/current" class="">
"inbox"
</a>
</div>
<div>
<p class="text-sm mb-0.5 dark:text-gray-500">"Favorites"</p>
<a href="/dash/current" class="dark:text-gray-300 pl-2">
"inbox"
</a>
</div>
<div>
<p class="text-sm mb-0.5 dark:text-gray-500">"Projects"</p>
<div class="pl-2 dark:text-gray-300">
<NavbarProjects/>
</div>
</div>
</nav>
}
}
#[component]
pub fn DashboardLayout(cx: Scope) -> impl IntoView {
view! { cx,
<div class="flex flex-row">
<DashNav/>
<div id="content" class="p-2">
<Outlet/>
</div>
</div>
}
}

1
src/features.rs Normal file
View File

@ -0,0 +1 @@
pub mod navbar_projects;

View File

@ -0,0 +1,4 @@
pub mod gen;
pub mod navbar_projects;
pub use navbar_projects::*;

View File

@ -0,0 +1 @@
pub mod queries;

View File

@ -0,0 +1,43 @@
#![allow(clippy::all, warnings)]
pub struct GetProjectsListView;
pub mod get_projects_list_view {
#![allow(dead_code)]
use std::result::Result;
pub const OPERATION_NAME: &str = "GetProjectsListView";
pub const QUERY: &str =
"query GetProjectsListView {\n getProjects {\n id\n name\n }\n}\n";
use super::*;
use serde::{Deserialize, Serialize};
#[allow(dead_code)]
type Boolean = bool;
#[allow(dead_code)]
type Float = f64;
#[allow(dead_code)]
type Int = i64;
#[allow(dead_code)]
type ID = String;
type UUID = crate::common::graphql::UUID;
#[derive(Serialize)]
pub struct Variables;
#[derive(Deserialize)]
pub struct ResponseData {
#[serde(rename = "getProjects")]
pub get_projects: Vec<GetProjectsListViewGetProjects>,
}
#[derive(Deserialize)]
pub struct GetProjectsListViewGetProjects {
pub id: UUID,
pub name: String,
}
}
impl graphql_client::GraphQLQuery for GetProjectsListView {
type Variables = get_projects_list_view::Variables;
type ResponseData = get_projects_list_view::ResponseData;
fn build_query(variables: Self::Variables) -> ::graphql_client::QueryBody<Self::Variables> {
graphql_client::QueryBody {
variables,
query: get_projects_list_view::QUERY,
operation_name: get_projects_list_view::OPERATION_NAME,
}
}
}

View File

@ -0,0 +1,6 @@
query GetProjectsListView {
getProjects {
id
name
}
}

View File

@ -0,0 +1,60 @@
use graphql_client::{GraphQLQuery, Response};
use leptos::*;
use leptos_router::*;
use crate::features::navbar_projects::gen::queries::get_projects_list_view::{
ResponseData, Variables,
};
use crate::features::navbar_projects::gen::queries::GetProjectsListView;
use super::gen::queries::get_projects_list_view::GetProjectsListViewGetProjects;
pub async fn get_projects_list() -> anyhow::Result<Vec<GetProjectsListViewGetProjects>> {
let request_body = GetProjectsListView::build_query(Variables {});
let payload = serde_json::to_string(&request_body)?;
let res = reqwasm::http::Request::post("http://localhost:3001/graphql")
.credentials(reqwasm::http::RequestCredentials::Include)
.body(payload)
.send()
.await?;
let response_body: Response<ResponseData> = res.json().await?;
Ok(response_body.data.unwrap().get_projects)
}
#[component]
pub fn NavbarProjectsView(
cx: Scope,
projects: Resource<(), Vec<GetProjectsListViewGetProjects>>,
) -> impl IntoView {
let projects_view = move || {
projects.with(cx, |projects| {
if projects.is_empty() {
return vec![view! { cx, <div class="project-item">"No projects"</div> }.into_any()];
}
projects
.into_iter()
.map(|project| {
view! { cx,
<a href=format!("/dash/project/{}", & project.id) class="project-item">
<div class="project-item-name hover:dark:bg-blue-700 rounded-md p-0.5 px-2">
{&project.name}
</div>
</a>
}.into_any()
})
.collect::<Vec<_>>()
})
};
view! { cx, <div class="project-items space-y-1">{projects_view}</div> }
}
#[component]
pub fn NavbarProjects(cx: Scope) -> impl IntoView {
let projects =
create_local_resource(cx, || (), |_| async { get_projects_list().await.unwrap() });
view! { cx, <NavbarProjectsView projects=projects/> }
}

View File

@ -1,6 +1,10 @@
pub mod api; pub mod api;
pub mod app; pub mod app;
pub mod common;
pub mod fallback; pub mod fallback;
pub mod features;
pub mod routes;
use cfg_if::cfg_if; use cfg_if::cfg_if;
cfg_if! { cfg_if! {

4
src/routes.rs Normal file
View File

@ -0,0 +1,4 @@
pub mod dash;
pub mod features_view;
pub mod home;

1
src/routes/dash.rs Normal file
View File

@ -0,0 +1 @@
pub mod home;

12
src/routes/dash/home.rs Normal file
View File

@ -0,0 +1,12 @@
use leptos::*;
use crate::features::navbar_projects::NavbarProjects;
#[component]
pub fn DashHomePage(cx: Scope) -> impl IntoView {
view! { cx,
<div class="home-dash">
<NavbarProjects/>
</div>
}
}

View File

@ -0,0 +1,44 @@
use leptos::*;
use uuid::Uuid;
use crate::features::navbar_projects::gen::queries::get_projects_list_view::GetProjectsListViewGetProjects;
use crate::features::navbar_projects::NavbarProjectsView;
#[component]
pub fn FeaturesView(cx: Scope) -> impl IntoView {
let projects = create_local_resource(
cx,
|| (),
|_| async {
vec![
GetProjectsListViewGetProjects {
id: Uuid::new_v4(),
name: "some-name".to_string(),
},
GetProjectsListViewGetProjects {
id: Uuid::new_v4(),
name: "some-other-name".to_string(),
},
]
},
);
let emptyProjects: Resource<(), Vec<GetProjectsListViewGetProjects>> =
create_local_resource(cx, || (), |_| async { Vec::new() });
view! { cx,
<div>
<div class="space-y-5">
<h1>"NavbarProjects"</h1>
<h2>"Projects"</h2>
<div class="feature-case">
<NavbarProjectsView projects=projects/>
</div>
<h2>"no projects"</h2>
<div class="feature-case">
<NavbarProjectsView projects=emptyProjects/>
</div>
</div>
</div>
}
}

27
src/routes/home.rs Normal file
View File

@ -0,0 +1,27 @@
use leptos::*;
#[component]
pub fn Navbar(cx: Scope) -> impl IntoView {
view! { cx,
<div class="flex flex-row justify-between items-center bg-gray-800 p-4">
<div class="flex flex-row items-center">
<div class="text-2xl text-white font-bold">"Como - Todo"</div>
</div>
<div class="flex flex-row items-center space-x-4">
<div class="text-xl text-white font-bold cursor-pointer">
<a href="http://localhost:3001/auth/zitadel?return_url=http://localhost:3000/dash/home">
"Enter"
</a>
</div>
</div>
</div>
}
}
#[component]
pub fn HomePage(cx: Scope) -> impl IntoView {
view! { cx,
<Navbar/>
<h1 class="text-xl text-red-50">"Welcome to Leptos!"</h1>
}
}

View File

@ -522,16 +522,191 @@ video {
--tw-backdrop-sepia: ; --tw-backdrop-sepia: ;
} }
.absolute {
position: absolute;
}
.relative { .relative {
position: relative; position: relative;
} }
.sticky {
position: sticky;
}
.top-0 {
top: 0px;
}
.mb-0 {
margin-bottom: 0px;
}
.mb-0\.5 {
margin-bottom: 0.125rem;
}
.flex {
display: flex;
}
.h-screen {
height: 100vh;
}
.min-w-\[200px\] {
min-width: 200px;
}
.cursor-pointer {
cursor: pointer;
}
.select-none {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.flex-row {
flex-direction: row;
}
.items-center {
align-items: center;
}
.justify-between {
justify-content: space-between;
}
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(1rem * var(--tw-space-x-reverse));
margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.rounded-md {
border-radius: 0.375rem;
}
.bg-gray-800 {
--tw-bg-opacity: 1;
background-color: rgb(31 41 55 / var(--tw-bg-opacity));
}
.p-0 {
padding: 0px;
}
.p-0\.5 {
padding: 0.125rem;
}
.p-2 {
padding: 0.5rem;
}
.p-4 {
padding: 1rem;
}
.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.pl-2 {
padding-left: 0.5rem;
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.text-xl { .text-xl {
font-size: 1.25rem; font-size: 1.25rem;
line-height: 1.75rem; line-height: 1.75rem;
} }
.font-bold {
font-weight: 700;
}
.text-red-50 { .text-red-50 {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(254 242 242 / var(--tw-text-opacity)); color: rgb(254 242 242 / var(--tw-text-opacity));
} }
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
html, body {
scroll-behavior: smooth;
min-height: 100%;
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(17 24 39 / var(--tw-text-opacity));
}
@media (prefers-color-scheme: dark) {
html, body {
--tw-bg-opacity: 1;
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(243 244 246 / var(--tw-text-opacity));
}
}
.feature-case {
margin: 2rem;
border-radius: 0.5rem;
border-width: 2px;
--tw-border-opacity: 1;
border-color: rgb(29 78 216 / var(--tw-border-opacity));
padding: 1rem;
}
@media (prefers-color-scheme: dark) {
.dark\:text-gray-300 {
--tw-text-opacity: 1;
color: rgb(209 213 219 / var(--tw-text-opacity));
}
.dark\:text-gray-500 {
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity));
}
.hover\:dark\:bg-blue-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(29 78 216 / var(--tw-bg-opacity));
}
}

View File

@ -1,5 +1,6 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
module.exports = { module.exports = {
darkMode: 'media',
content: { content: {
files: ["*.html", "./src/**/*.rs"], files: ["*.html", "./src/**/*.rs"],
}, },