Incremental UI Push # 24

crates/site-app/src/components.rs

@@ -1,5 +1,6 @@
 mod create_button;
 mod data_table;
+pub mod form_layout;
 mod icons;
 mod input_field;
 mod item_links;

crates/site-app/src/components/form_layout.rs

@@ -0,0 +1,32 @@
+use leptos::prelude::*;
+
+#[component]
+pub fn GridRow(children: Children) -> impl IntoView {
+  view! {
+    <div class="flex flex-col gap-2 md:contents">
+      { children() }
+    </div>
+  }
+}
+
+#[component]
+pub fn GridRowFull(children: Children) -> impl IntoView {
+  view! {
+    <div class="flex flex-col gap-2 md:col-span-2">
+      { children() }
+    </div>
+  }
+}
+
+#[component]
+pub fn GridRowLabel(
+  #[prop(into)] title: String,
+  #[prop(into)] desc: String,
+) -> impl IntoView {
+  view! {
+    <div class="flex flex-col gap-0.5">
+      <p class="text-base-12">{ title }</p>
+      <p class="text-sm max-w-prose">{ desc }</p>
+    </div>
+  }
+}

crates/site-app/src/components/input_field.rs

@@ -1,71 +1,19 @@
-mod specialized;
+mod icon;
 
 use leptos::{
   ev::{Event, MouseEvent},
   prelude::*,
 };
 
-pub use self::specialized::*;
-use crate::components::{
-  icons::LockClosedHeroIcon, ArchiveBoxHeroIcon, EnvelopeHeroIcon, EyeHeroIcon,
-  EyeSlashHeroIcon, GlobeAltHeroIcon, KeyHeroIcon, UserHeroIcon,
-};
-
-#[derive(Clone, Copy)]
-pub enum InputIcon {
-  ArchiveBox,
-  Envelope,
-  Eye,
-  EyeSlash,
-  GlobeAlt,
-  Key,
-  LockClosed,
-  User,
-}
-
-macro_rules! icon_match {
-  ($self_expr:expr, $click_handler:expr, $icon_class:expr, {
-      $($variant:ident => $component:ident),* $(,)?
-  }) => {
-    match $self_expr {
-      $(
-        InputIcon::$variant => view! {
-          <$component {..} class=$icon_class on:click=$click_handler />
-        }.into_any(),
-      )*
-    }
-  };
-}
-
-impl InputIcon {
-  fn into_any(self, click_handler: Option<Callback<MouseEvent>>) -> AnyView {
-    const ICON_CLASS: &str = "size-6";
-
-    let click_handler = move |e| {
-      if let Some(h) = click_handler {
-        h.run(e)
-      }
-    };
-
-    icon_match!(self, click_handler, ICON_CLASS, {
-        ArchiveBox => ArchiveBoxHeroIcon,
-        Envelope => EnvelopeHeroIcon,
-        Eye => EyeHeroIcon,
-        EyeSlash => EyeSlashHeroIcon,
-        GlobeAlt => GlobeAltHeroIcon,
-        Key => KeyHeroIcon,
-        LockClosed => LockClosedHeroIcon,
-        User => UserHeroIcon,
-    })
-  }
-}
+pub use self::icon::*;
 
 #[component]
 pub fn InputField(
   #[prop(into)] id: Signal<&'static str>,
-  #[prop(into)] label_text: Signal<&'static str>,
+  #[prop(into, optional_no_strip)] label_text: MaybeProp<&'static str>,
   #[prop(into)] input_type: Signal<&'static str>,
-  #[prop(into)] placeholder: Signal<&'static str>,
+  #[prop(into, optional_no_strip)] placeholder: MaybeProp<&'static str>,
+
   #[prop(into, optional_no_strip)] before: MaybeProp<InputIcon>,
   #[prop(into, optional_no_strip)] after: MaybeProp<InputIcon>,
   #[prop(into, optional_no_strip)] before_click_callback: Option<
@@ -74,11 +22,13 @@ pub fn InputField(
   #[prop(into, optional_no_strip)] after_click_callback: Option<
     Callback<MouseEvent>,
   >,
-  input_signal: impl Fn() -> String + Send + 'static,
-  output_signal: impl Fn(Event) + Send + 'static,
+
+  #[prop(into)] input_signal: Callback<(), String>,
+  #[prop(into)] output_signal: Callback<Event>,
+
   #[prop(default = false)] autofocus: bool,
-  #[prop(into)] error_hint: MaybeProp<String>,
-  #[prop(into)] warn_hint: MaybeProp<String>,
+  #[prop(into, optional_no_strip)] error_hint: MaybeProp<String>,
+  #[prop(into, optional_no_strip)] warn_hint: MaybeProp<String>,
 ) -> impl IntoView {
   const OUTER_WRAPPER_CLASS: &str = "flex flex-col gap-1";
   const LABEL_CLASS: &str = "text-base-11";
@@ -96,7 +46,7 @@ pub fn InputField(
         <input
           class=INPUT_CLASS type=input_type autofocus=autofocus
           placeholder=placeholder id=id
-          on:input={move |ev| output_signal(ev)} prop:value={move || input_signal()}
+          on:input={move |ev| output_signal.run(ev)} prop:value={move || input_signal.run(())}
         />
         { move || after().map(|i| i.into_any(after_click_callback)) }
       </div>
@@ -115,23 +65,29 @@ pub fn InputField(
 #[component]
 pub fn HideableInputField(
   #[prop(default = true)] hidden_by_default: bool,
-  id: &'static str,
-  label_text: &'static str,
-  unhidden_input_type: &'static str,
-  placeholder: &'static str,
+
+  #[prop(into)] id: Signal<&'static str>,
+  #[prop(into, optional_no_strip)] label_text: MaybeProp<&'static str>,
+  #[prop(into, default = "text".into())] unhidden_input_type: Signal<
+    &'static str,
+  >,
+  #[prop(into, optional_no_strip)] placeholder: MaybeProp<&'static str>,
+
   #[prop(into, optional_no_strip)] before: MaybeProp<InputIcon>,
   #[prop(into, optional_no_strip)] before_click_callback: Option<
     Callback<MouseEvent>,
   >,
-  input_signal: impl Fn() -> String + Send + 'static,
-  output_signal: impl Fn(Event) + Send + 'static,
+
+  #[prop(into)] input_signal: Callback<(), String>,
+  #[prop(into)] output_signal: Callback<Event>,
+
   #[prop(default = false)] autofocus: bool,
-  #[prop(into)] error_hint: MaybeProp<String>,
-  #[prop(into)] warn_hint: MaybeProp<String>,
+  #[prop(into, optional_no_strip)] error_hint: MaybeProp<String>,
+  #[prop(into, optional_no_strip)] warn_hint: MaybeProp<String>,
 ) -> impl IntoView {
   let input_visible = RwSignal::new(!hidden_by_default);
   let input_type = Signal::derive(move || match input_visible() {
-    true => unhidden_input_type,
+    true => unhidden_input_type(),
     false => "password",
   });
   let after = Signal::derive(move || match input_visible() {

crates/site-app/src/components/input_field/icon.rs

@@ -0,0 +1,58 @@
+use leptos::{ev::MouseEvent, prelude::*};
+
+use crate::components::{
+  icons::LockClosedHeroIcon, ArchiveBoxHeroIcon, EnvelopeHeroIcon, EyeHeroIcon,
+  EyeSlashHeroIcon, GlobeAltHeroIcon, KeyHeroIcon, UserHeroIcon,
+};
+
+#[derive(Clone, Copy)]
+pub enum InputIcon {
+  ArchiveBox,
+  Envelope,
+  Eye,
+  EyeSlash,
+  GlobeAlt,
+  Key,
+  LockClosed,
+  User,
+}
+
+macro_rules! icon_match {
+  ($self_expr:expr, $click_handler:expr, $icon_class:expr, {
+  $($variant:ident => $component:ident),* $(,)?
+  }) => {
+match $self_expr {
+  $(
+    InputIcon::$variant => view! {
+      <$component {..} class=$icon_class on:click=$click_handler />
+    }.into_any(),
+  )*
+}
+  };
+}
+
+impl InputIcon {
+  pub fn into_any(
+    self,
+    click_handler: Option<Callback<MouseEvent>>,
+  ) -> AnyView {
+    const ICON_CLASS: &str = "size-6";
+
+    let click_handler = move |e| {
+      if let Some(h) = click_handler {
+        h.run(e)
+      }
+    };
+
+    icon_match!(self, click_handler, ICON_CLASS, {
+        ArchiveBox => ArchiveBoxHeroIcon,
+        Envelope => EnvelopeHeroIcon,
+        Eye => EyeHeroIcon,
+        EyeSlash => EyeSlashHeroIcon,
+        GlobeAlt => GlobeAltHeroIcon,
+        Key => KeyHeroIcon,
+        LockClosed => LockClosedHeroIcon,
+        User => UserHeroIcon,
+    })
+  }
+}

crates/site-app/src/hooks/login_hook.rs

@@ -56,11 +56,11 @@ impl LoginHook {
     }
   }
 
-  pub fn email_bindings(&self) -> (impl Fn() -> String, impl Fn(Event)) {
+  pub fn email_bindings(&self) -> (Callback<(), String>, Callback<Event>) {
     touched_input_bindings(self.email_signal)
   }
 
-  pub fn password_bindings(&self) -> (impl Fn() -> String, impl Fn(Event)) {
+  pub fn password_bindings(&self) -> (Callback<(), String>, Callback<Event>) {
     touched_input_bindings(self.password_signal)
   }
 

crates/site-app/src/hooks/signup_hook.rs

@@ -62,21 +62,21 @@ impl SignupHook {
     }
   }
 
-  pub fn name_bindings(&self) -> (impl Fn() -> String, impl Fn(Event)) {
+  pub fn name_bindings(&self) -> (Callback<(), String>, Callback<Event>) {
     touched_input_bindings(self.name_signal)
   }
 
-  pub fn email_bindings(&self) -> (impl Fn() -> String, impl Fn(Event)) {
+  pub fn email_bindings(&self) -> (Callback<(), String>, Callback<Event>) {
     touched_input_bindings(self.email_signal)
   }
 
-  pub fn password_bindings(&self) -> (impl Fn() -> String, impl Fn(Event)) {
+  pub fn password_bindings(&self) -> (Callback<(), String>, Callback<Event>) {
     touched_input_bindings(self.password_signal)
   }
 
   pub fn confirm_password_bindings(
     &self,
-  ) -> (impl Fn() -> String, impl Fn(Event)) {
+  ) -> (Callback<(), String>, Callback<Event>) {
     touched_input_bindings(self.confirm_password_signal)
   }
 

crates/site-app/src/pages/create_store/credentials_input.rs

@@ -88,13 +88,13 @@ pub fn CredentialsInput(
   view! {
     <div class="flex flex-col gap-2">
       <HideableInputField
-        id="access_key" label_text="Access Key" unhidden_input_type="text" placeholder=""
+        id="access_key" label_text="Access Key" placeholder=""
         input_signal=read_access_key output_signal=write_access_key
         error_hint=access_key_error_hint warn_hint={ MaybeProp::derive(|| None) }
         before={InputIcon::Key}
       />
       <HideableInputField
-        id="secret_access_key" label_text="Secret Access Key" unhidden_input_type="text" placeholder=""
+        id="secret_access_key" label_text="Secret Access Key" placeholder=""
         input_signal=read_secret_access_key output_signal=write_secret_access_key
         error_hint=secret_access_key_error_hint warn_hint={ MaybeProp::derive(|| None) }
         before={InputIcon::Key}