WIP: component refactor, work on restylization

alardev · Nov 16, 2023 · 4b5cb21 · 4b5cb21
1 parent d01e1ca
commit 4b5cb21
Show file tree

Hide file tree

Showing 17 changed files with 682 additions and 345 deletions.
diff --git a/crates/leptos-tw-ui/src/components/buttons/button.rs b/crates/leptos-tw-ui/src/components/buttons/button.rs
@@ -24,15 +24,12 @@ where
             style=style
             aria-disabled=move || format!("{}", disabled.get())
             on:click=move |e| {
-                // The question here is do we always allow the click for usability and let the outside function
-                //  handle the click validation of the button? https://css-tricks.com/making-disabled-buttons-more-inclusive
-                // if !disabled.get_untracked() {
-                    e.stop_propagation();
-                    on_click(e);
-                // }
+                e.stop_propagation();
+                on_click(e);
             }
         >
-            { children() }
+
+            {children()}
         </button>
     }
 }
@@ -50,12 +47,13 @@ pub fn LinkButton(
     view! {
         <a
             id=id
-            href=href // format!("{}", )
+            // format!("{}", )
+            href=href
             class=format!("{} {}", variant.get(), class.get())
             style=style
             aria-disabled=move || disabled.get()
         >
-            { children() }
+            {children()}
         </a>
     }
 }
diff --git a/crates/leptos-tw-ui/src/components/container.rs b/crates/leptos-tw-ui/src/components/container.rs
@@ -10,7 +10,7 @@ pub fn Container(
     children: Children,
 ) -> impl IntoView {
     view! {
-        <div id=id class={format!("{} {}", variant.get(), class.get())} style=style>
+        <div id=id class=format!("{} {}", variant.get(), class.get()) style=style>
             {children()}
         </div>
     }
@@ -26,9 +26,7 @@ where
     F: Fn() -> IV,
     IV: IntoView,
 {
-    view! {
-        <>{render_view()}</>
-    }
+    view! { <>{render_view()}</> }
 }
 
 #[component]

diff --git a/crates/leptos-tw-ui/src/components/footer.rs b/crates/leptos-tw-ui/src/components/footer.rs
@@ -12,10 +12,5 @@ where
     F: Fn() -> IV,
     IV: IntoView,
 {
-    view! {
-    <footer className="py-6 md:px-8 md:py-0">
-        {render_prop()}
-        {children()}
-    </footer>
-    }
+    view! { <footer className="py-6 md:px-8 md:py-0">{render_prop()} {children()}</footer> }
 }
diff --git a/crates/leptos-tw-ui/src/components/header.rs b/crates/leptos-tw-ui/src/components/header.rs
@@ -12,10 +12,5 @@ where
     F: Fn() -> IV,
     IV: IntoView,
 {
-    view! {
-        <header>
-        {render_prop()}
-        {children()}
-        </header>
-    }
+    view! { <header>{render_prop()} {children()}</header> }
 }
diff --git a/crates/leptos-tw-ui/src/components/icons.rs b/crates/leptos-tw-ui/src/components/icons.rs
@@ -19,7 +19,8 @@ pub fn IconSun(
             <path
                 d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
                 fill-rule="evenodd"
-                clip-rule="evenodd"></path>
+                clip-rule="evenodd"
+            ></path>
         </svg>
     }
 }
@@ -32,11 +33,11 @@ pub fn IconMoon(
 ) -> impl IntoView {
     view! {
         <svg
-        id=id
-        class=class.get()
-        style=style
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
+            id=id
+            class=class.get()
+            style=style
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
         >
             <path
                 fill-rule="evenodd"
@@ -45,7 +46,8 @@ pub fn IconMoon(
             ></path>
             <path
                 d="m17.715 15.15.95.316a1 1 0 0 0-1.445-1.185l.495.869ZM9 6.035l.846.534a1 1 0 0 0-1.14-1.49L9 6.035Zm8.221 8.246a5.47 5.47 0 0 1-2.72.718v2a7.47 7.47 0 0 0 3.71-.98l-.99-1.738Zm-2.72.718A5.5 5.5 0 0 1 9 9.5H7a7.5 7.5 0 0 0 7.5 7.5v-2ZM9 9.5c0-1.079.31-2.082.845-2.93L8.153 5.5A7.47 7.47 0 0 0 7 9.5h2Zm-4 3.368C5 10.089 6.815 7.75 9.292 6.99L8.706 5.08C5.397 6.094 3 9.201 3 12.867h2Zm6.042 6.136C7.718 19.003 5 16.268 5 12.867H3c0 4.48 3.588 8.136 8.042 8.136v-2Zm5.725-4.17c-.81 2.433-3.074 4.17-5.725 4.17v2c3.552 0 6.553-2.327 7.622-5.537l-1.897-.632Z"
-                class="fill-gray-200"></path>
+                class="fill-gray-200"
+            ></path>
             <path
                 fill-rule="evenodd"
                 clip-rule="evenodd"
@@ -72,7 +74,8 @@ pub fn IconMenuOn(
             <path
                 d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"
                 fill-rule="evenodd"
-                clip-rule="evenodd"></path>
+                clip-rule="evenodd"
+            ></path>
         </svg>
     }
 }
@@ -94,7 +97,8 @@ pub fn IconMenuOff(
             <path
                 d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"
                 fill-rule="evenodd"
-                clip-rule="evenodd"></path>
+                clip-rule="evenodd"
+            ></path>
         </svg>
     }
 }
diff --git a/crates/leptos-tw-ui/src/components/menu/bars.rs b/crates/leptos-tw-ui/src/components/menu/bars.rs
@@ -10,12 +10,8 @@ pub fn MenuBar(
     children: Children,
 ) -> impl IntoView {
     view! {
-        <nav
-            id=id
-            class=format!("{} {}", variant.get(), class.get())
-            style=style
-        >
-            { children() }
+        <nav id=id class=format!("{} {}", variant.get(), class.get()) style=style>
+            {children()}
         </nav>
     }
 }
@@ -29,12 +25,8 @@ pub fn MenuHeader(
     children: Children,
 ) -> impl IntoView {
     view! {
-        <header
-            id=id
-            class=format!("{} {}", variant.get(), class.get())
-            style=style
-        >
-            { children() }
+        <header id=id class=format!("{} {}", variant.get(), class.get()) style=style>
+            {children()}
         </header>
     }
 }
diff --git a/crates/leptos-tw-ui/src/components/theme/toggle.rs b/crates/leptos-tw-ui/src/components/theme/toggle.rs
@@ -16,7 +16,7 @@ pub fn theme_mode(toggle: bool) -> &'static str {
         toggle: bool,
         system_dark_preferred: bool,
     ) -> &'static str {
-        let theme_mode = if theme_mode == "" && !toggle {
+        let theme_mode = if theme_mode.is_empty() && !toggle {
             if system_dark_preferred {
                 "dark".to_string()
             } else {
@@ -79,7 +79,7 @@ pub fn theme_mode(toggle: bool) -> &'static str {
         },
         None => "",
     };
-    if stored_theme_mode == "" {
+    if stored_theme_mode.is_empty() {
         stored_theme_mode = resolve_toggle(html_html.class_name(), toggle, system_dark_preferred);
         // There was an error accessing local storage, so use the body class name
         html_html.set_class_name(stored_theme_mode);
@@ -115,11 +115,14 @@ where
             id=id.unwrap_or(Box::new(""))
             class=class
             style=style.unwrap_or(Box::new(""))
-            on_click={move |_e| {mode_fn(true);}}
+            on_click=move |_e| {
+                mode_fn(true);
+            }
+
             disabled=disabled
         >
-            <IconMoon class=icon_dark_class.get() />
-            <IconSun class=icon_light_class.get() />
+            <IconMoon class=icon_dark_class.get()/>
+            <IconSun class=icon_light_class.get()/>
         </Button>
     }
 }
@@ -155,21 +158,29 @@ where
             id=id.unwrap_or(Box::new(""))
             class=class.wrapper
             style=style.unwrap_or(Box::new(""))
-            on_click={move |_e| {mode_fn(true);}}
+            on_click=move |_e| {
+                mode_fn(true);
+            }
+
             disabled=disabled
         >
-            <div class=class.bar /><span class="sr-only">Switch theme</span>
+            <div class=class.bar></div>
+            <span class="sr-only">Switch theme</span>
             <span aria-hidden="true" class=class.switch>
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class=class.moon>
-                        <path class=class.moon_fill
-                            d="M7.914 0a6.874 6.874 0 00-1.26 3.972c0 3.875 3.213 7.017 7.178 7.017.943 0 1.843-.178 2.668-.5C15.423 13.688 12.34 16 8.704 16 4.174 16 .5 12.41.5 7.982.5 3.814 3.754.389 7.914 0z"
-                            fill-rule="evenodd"></path>
-                    </svg>
+                    <path
+                        class=class.moon_fill
+                        d="M7.914 0a6.874 6.874 0 00-1.26 3.972c0 3.875 3.213 7.017 7.178 7.017.943 0 1.843-.178 2.668-.5C15.423 13.688 12.34 16 8.704 16 4.174 16 .5 12.41.5 7.982.5 3.814 3.754.389 7.914 0z"
+                        fill-rule="evenodd"
+                    ></path>
+                </svg>
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class=class.sun>
-                        <path class=class.sun_fill
-                            d="M3.828 5.243L2.343 3.757a1 1 0 011.414-1.414l1.486 1.485a5.027 5.027 0 00-1.415 1.415zM7 3.1V1a1 1 0 112 0v2.1a5.023 5.023 0 00-2 0zm3.757.728l1.486-1.485a1 1 0 111.414 1.414l-1.485 1.486a5.027 5.027 0 00-1.415-1.415zM12.9 7H15a1 1 0 010 2h-2.1a5.023 5.023 0 000-2zm-.728 3.757l1.485 1.486a1 1 0 11-1.414 1.414l-1.486-1.485a5.027 5.027 0 001.415-1.415zM9 12.9V15a1 1 0 01-2 0v-2.1a5.023 5.023 0 002 0zm-3.757-.728l-1.486 1.485a1 1 0 01-1.414-1.414l1.485-1.486a5.027 5.027 0 001.415 1.415zM3.1 9H1a1 1 0 110-2h2.1a5.023 5.023 0 000 2zM8 11a3 3 0 110-6 3 3 0 010 6z"
-                            fill-rule="evenodd"></path>
-                    </svg>
+                    <path
+                        class=class.sun_fill
+                        d="M3.828 5.243L2.343 3.757a1 1 0 011.414-1.414l1.486 1.485a5.027 5.027 0 00-1.415 1.415zM7 3.1V1a1 1 0 112 0v2.1a5.023 5.023 0 00-2 0zm3.757.728l1.486-1.485a1 1 0 111.414 1.414l-1.485 1.486a5.027 5.027 0 00-1.415-1.415zM12.9 7H15a1 1 0 010 2h-2.1a5.023 5.023 0 000-2zm-.728 3.757l1.485 1.486a1 1 0 11-1.414 1.414l-1.486-1.485a5.027 5.027 0 001.415-1.415zM9 12.9V15a1 1 0 01-2 0v-2.1a5.023 5.023 0 002 0zm-3.757-.728l-1.486 1.485a1 1 0 01-1.414-1.414l1.485-1.486a5.027 5.027 0 001.415 1.415zM3.1 9H1a1 1 0 110-2h2.1a5.023 5.023 0 000 2zM8 11a3 3 0 110-6 3 3 0 010 6z"
+                        fill-rule="evenodd"
+                    ></path>
+                </svg>
             </span>
         </Button>
     }
@@ -199,11 +210,15 @@ where
             id=id.unwrap_or(Box::new(""))
             class=class
             style=style.unwrap_or(Box::new(""))
-            on_click={move |_e| {set_on_off(!on_off.get());on_change(on_off.get());}}
+            on_click=move |_e| {
+                set_on_off(!on_off.get());
+                on_change(on_off.get());
+            }
+
             disabled=disabled
         >
-            <Show when={on_off} fallback=move || view! { <IconMenuOff class=dark_class.get() /> }>
-                <IconMenuOn class=light_class.get() />
+            <Show when=on_off fallback=move || view! { <IconMenuOff class=dark_class.get()/> }>
+                <IconMenuOn class=light_class.get()/>
             </Show>
         </Button>
     }

diff --git a/crates/leptos-tw-ui/src/components/typography.rs b/crates/leptos-tw-ui/src/components/typography.rs
@@ -218,7 +218,22 @@ pub fn Span(
     children: Children,
 ) -> impl IntoView {
     view! {
-        <span id=id class=format!{"{} {}", class.unwrap_or(ClassVariant::Unstyled).to_string(), {if inline.is_some() {if inline.unwrap() {"inline-flex inline"} else {"block"}} else {"block"}}} style=style>
+        <span
+            id=id
+            class=format!(
+                "{} {}",
+                class.unwrap_or(ClassVariant::Unstyled).to_string(),
+                {
+                    if inline.is_some() {
+                        if inline.unwrap() { "inline-flex inline" } else { "block" }
+                    } else {
+                        "block"
+                    }
+                },
+            )
+
+            style=style
+        >
             {children()}
         </span>
     }
@@ -233,7 +248,22 @@ pub fn Code(
     children: Children,
 ) -> impl IntoView {
     view! {
-        <code id=id class=format!{"{} {}", class.unwrap_or(ClassVariant::Unstyled).to_string(), {if inline.is_some() {if inline.unwrap() {"inline-flex inline"} else {"block"}} else {"block"}}} style=style >
+        <code
+            id=id
+            class=format!(
+                "{} {}",
+                class.unwrap_or(ClassVariant::Unstyled).to_string(),
+                {
+                    if inline.is_some() {
+                        if inline.unwrap() { "inline-flex inline" } else { "block" }
+                    } else {
+                        "block"
+                    }
+                },
+            )
+
+            style=style
+        >
             {children()}
         </code>
     }

diff --git a/crates/leptos-tw-ui/src/components/variants/base.rs b/crates/leptos-tw-ui/src/components/variants/base.rs
@@ -12,7 +12,7 @@ impl Variant for ClassVariant {
     fn as_vec(&self) -> Vec<&str> {
         match self {
             ClassVariant::Unstyled => Vec::<&str>::new(), // "".split(" ").collect::<Vec<&str>>(),
-            ClassVariant::Str(x) => x.split(" ").collect(),
+            ClassVariant::Str(x) => x.split(' ').collect(),
             ClassVariant::Vec(x) => x.to_vec(),
         }
     }

diff --git a/rustfmt.toml b/rustfmt.toml
@@ -0,0 +1,6 @@
+edition = "2021"
+max_width = 100 # Maximum width of each line
+tab_spaces = 4 # Number of spaces per tab
+indentation_style = "Auto" # "Tabs", "Spaces" or "Auto"
+newline_style = "Auto" # "Unix", "Windows" or "Auto"
+attr_value_brace_style = "WhenRequired" # "Always", "AlwaysUnlessLit", "WhenRequired" or "Preserve"
diff --git a/site/Cargo.toml b/site/Cargo.toml
@@ -15,4 +15,4 @@ wasm-bindgen = "0.2"
 web-sys = { version = "0.3", features = ["Window", "Clipboard", "Navigator", "Element", "DateTimeValue"] }
 wana_kana = { path = "../wana_kana_rust" }
 wasm-bindgen-futures = "0.4"
-chrono = { version = "*", features = ["wasmbind"]}
+chrono = { version = "*", features = ["wasmbind"]}