feat: add leptos support (#5)

opensass · Dec 22, 2024 · 930145a · 930145a
1 parent a61a59a
commit 930145a
Show file tree

Hide file tree

Showing 17 changed files with 1,408 additions and 32 deletions.
diff --git a/Cargo.toml b/Cargo.toml
@@ -20,10 +20,12 @@ wasm-bindgen = "0.2.99"
 web-sys = { version = "0.3.76", features = ["Window"] }
 yew = { version = "0.21.0", default-features = false, optional = true }
 dioxus = { version = "0.6.1", optional = true }
+leptos = { version = "0.7.2", optional = true }
 
 [features]
 yew = ["dep:yew", "gloo"]
 dio = ["dioxus", "gloo"]
+lep = ["leptos"]
 
 [profile.release]
 opt-level = "z"

diff --git a/DIOXUS.md b/DIOXUS.md
@@ -46,7 +46,6 @@ Incorporating the Dioxus Alert into your application is easy. Follow these steps
                     body: "This is an alert message",
                     show_alert: show_alert,
                     timeout: 2500,
-                    alert_class: "w-96 h-48 text-white",
                     icon_class: "flex justify-center",
                     confirm_button_text: "Okay",
                     cancel_button_text: "Cancel",
@@ -63,7 +62,7 @@ Incorporating the Dioxus Alert into your application is easy. Follow these steps
                     },
                     position: Position::TopRight,
                     icon_type: IconType::Success,
-                    container_class: "flex items-center text-center justify-center bg-gray-800 text-white border border-gray-600",
+                    alert_class: "flex items-center text-center justify-center bg-gray-800 text-white border border-gray-600",
                     title_class: "text-white",
                     body_class: "text-gray-300",
                     icon_color: "",
@@ -151,7 +150,6 @@ Incorporating the Dioxus Alert into your application is easy. Follow these steps
 | `icon_class`           | `&'static str` | CSS class for styling the icon.                      | `""`    |
 | `confirm_button_class` | `&'static str` | CSS class for styling the confirm button.            | `""`    |
 | `cancel_button_class`  | `&'static str` | CSS class for styling the cancel button.             | `""`    |
-| `container_class`      | `&'static str` | CSS class for styling the alert container.           | `""`    |
 | `title_class`          | `&'static str` | CSS class for styling the alert title.               | `""`    |
 | `message_class`        | `&'static str` | CSS class for styling the message text in the alert. | `""`    |
 

diff --git a/LEPTOS.md b/LEPTOS.md
@@ -0,0 +1,163 @@
+# 🌱 Leptos Alert-RS Usage
+
+Adding Alert-RS to your Leptos project is simple:
+
+1. Make sure your project is set up with **Leptos**. Refer to their [Getting Started Guide](https://book.leptos.dev/getting_started/index.html) for setup instructions.
+
+1. Add `alert-rs` to your dependencies:
+
+   ```sh
+   cargo add alert-rs --features=lep
+   ```
+
+1. Import the `Alert` component into your Leptos component and start showing alerts in your app.
+
+## 🛠️ Usage
+
+Incorporating Leptos Alert into your application is easy. Follow these steps:
+
+1. Import the Alert component into your Leptos project:
+
+   ```rust
+   use leptos::prelude::*;
+   use alert_rs::leptos::Alert;
+   ```
+
+1. Define the alert properties and use the Alert component in your Leptos component:
+
+   ```rust
+   use leptos::prelude::*;
+   use alert_rs::leptos::Alert;
+   use alert_rs::{IconType, Position};
+
+
+   #[component]
+   pub fn App() -> impl IntoView {
+       let show_alert = signal(true);
+       view! {
+           <Alert
+               title={"Alert Title"}
+               body={"This is an alert message"}
+               show_alert={show_alert}
+               timeout={2500}
+               icon_class={"flex justify-center"}
+               confirm_button_text={"Okay"}
+               cancel_button_text={"Cancel"}
+               confirm_button_class={"bg-green-500 text-white rounded"}
+               cancel_button_class={"bg-red-500 text-white rounded"}
+               show_confirm_button={true}
+               show_cancel_button={true}
+               show_close_button={true}
+               on_confirm={Callback::from(move || {})}
+               on_cancel={Callback::from(move || {})}
+               position={Position::TopRight}
+               icon_type={IconType::Success}
+               alert_class={"flex items-center text-center justify-center bg-gray-800 text-white border border-gray-600"}
+               title_class={"dark:text-white"}
+               body_class={"dark:text-gray-300"}
+               icon_color={""}
+               icon_width={"50"}
+           />
+       }
+   }
+   ```
+
+## 🔧 Props
+
+### Main Props
+
+| Property              | Type                   | Description                                                   | Default   |
+| --------------------- | ---------------------- | ------------------------------------------------------------- | --------- |
+| `show_alert`          | `UseStateHandle<bool>` | The state handle controlling the visibility of the alert.     | `false`   |
+| `title`               | `&'static str`         | The title text for the alert.                                 | `"Info"`  |
+| `body`                | `&'static str`         | The message content of the alert.                             | `""`      |
+| `timeout`             | `u32`                  | Timeout duration in milliseconds for the alert to auto-close. | `2500` ms |
+| `show_confirm_button` | `bool`                 | Whether to display the confirm button.                        | `true`    |
+| `show_cancel_button`  | `bool`                 | Whether to display the cancel button.                         | `true`    |
+| `show_close_button`   | `bool`                 | Whether to display the close button.                          | `false`   |
+
+### Callback Props
+
+| Property     | Type           | Description                                            | Default |
+| ------------ | -------------- | ------------------------------------------------------ | ------- |
+| `on_confirm` | `Callback<()>` | Callback triggered when the confirm button is clicked. | No-op   |
+| `on_cancel`  | `Callback<()>` | Callback triggered when the cancel button is clicked.  | No-op   |
+| `on_close`   | `Callback<()>` | Callback triggered when the close button is clicked.   | No-op   |
+| `will_open`  | `Callback<()>` | Callback triggered before the alert opens.             | No-op   |
+| `did_open`   | `Callback<()>` | Callback triggered after the alert opens.              | No-op   |
+| `did_close`  | `Callback<()>` | Callback triggered after the alert closes.             | No-op   |
+
+### Alert Appearance & Positioning
+
+| Property     | Type           | Description                                                           | Default          |
+| ------------ | -------------- | --------------------------------------------------------------------- | ---------------- |
+| `native`     | `bool`         | Whether to use the native browser alert instead of custom one.        | `false`          |
+| `position`   | `Position`     | Position of the alert on the screen (`Position::TopRight`, etc.).     | `TopRight`       |
+| `icon_type`  | `IconType`     | The type of icon to display with the alert (e.g., `Info`, `Warning`). | `IconType::Info` |
+| `icon_color` | `&'static str` | The color of the icon.                                                | `""`             |
+| `icon_width` | `&'static str` | The width of the icon.                                                | `"50"`           |
+
+### Styling Props
+
+```sh
++-----------------------------------------------------------+  <-- `alert_class`
+|                                                           |
+|  +-----------------------------------------------+        |  <-- `close_button_style` (if `show_close_button`)
+|  |               [X] Close Button                |        |
+|  +-----------------------------------------------+        |
+|                                                           |
+|  +-----------------------------------------------+        |  <-- `icon_class` and `icon_style`
+|  |                  [Icon]                       |        |  <-- `icon_tag`
+|  +-----------------------------------------------+        |
+|                                                           |
+|  +-----------------------------------------------+        |  <-- `title_class` and `title_style`
+|  |                [Alert Title]                  |        |  <-- `props.title`
+|  +-----------------------------------------------+        |
+|                                                           |
+|  +-----------------------------------------------+        |  <-- `separator_style`
+|  |             [--- Separator ---]               |        |
+|  +-----------------------------------------------+        |
+|                                                           |
+|  +-----------------------------------------------+        |  <-- `message_style` and `body_class`
+|  |                [Alert Message]                |        |  <-- `props.body`
+|  +-----------------------------------------------+        |
+|                                                           |
+|  +-----------------------------------------------+        |  <-- `confirm_button_class` and `confirm_button_style`
+|  |                [Confirm Button]               |        |  <-- `props.confirm_button_text`
+|  +-----------------------------------------------+        |
+|                                                           |
+|  +-----------------------------------------------+        |  <-- `cancel_button_class` and `cancel_button_style`
+|  |                [Cancel Button]                |        |  <-- `props.cancel_button_text`
+|  +-----------------------------------------------+        |
+|                                                           |
++-----------------------------------------------------------+
+```
+
+| Property               | Type           | Description                                          | Default |
+| ---------------------- | -------------- | ---------------------------------------------------- | ------- |
+| `alert_class`          | `&'static str` | CSS class for styling the alert container.           | `""`    |
+| `icon_class`           | `&'static str` | CSS class for styling the icon.                      | `""`    |
+| `confirm_button_class` | `&'static str` | CSS class for styling the confirm button.            | `""`    |
+| `cancel_button_class`  | `&'static str` | CSS class for styling the cancel button.             | `""`    |
+| `title_class`          | `&'static str` | CSS class for styling the alert title.               | `""`    |
+| `message_class`        | `&'static str` | CSS class for styling the message text in the alert. | `""`    |
+
+### Inline Styles
+
+| Property               | Type           | Description                               | Default                        |
+| ---------------------- | -------------- | ----------------------------------------- | ------------------------------ |
+| `alert_style`          | `&'static str` | Inline CSS styles for the alert.          | `DEFAULT_ALERT_STYLE`          |
+| `close_button_style`   | `&'static str` | Inline CSS styles for the close button.   | `DEFAULT_CLOSE_BUTTON_STYLE`   |
+| `confirm_button_style` | `&'static str` | Inline CSS styles for the confirm button. | `DEFAULT_CONFIRM_BUTTON_STYLE` |
+| `cancel_button_style`  | `&'static str` | Inline CSS styles for the cancel button.  | `DEFAULT_CANCEL_BUTTON_STYLE`  |
+| `icon_style`           | `&'static str` | Inline CSS styles for the icon.           | `DEFAULT_ICON_STYLE`           |
+| `title_style`          | `&'static str` | Inline CSS styles for the title text.     | `DEFAULT_TITLE_STYLE`          |
+| `separator_style`      | `&'static str` | Inline CSS styles for the separator.      | `DEFAULT_SEPARATOR_STYLE`      |
+| `message_style`        | `&'static str` | Inline CSS styles for the message text.   | `DEFAULT_MESSAGE_STYLE`        |
+
+## 💡 Notes
+
+- The `native` prop can be set to `true` to use the browser's default alert behavior instead of the custom component.
+- The alert is displayed based on the `show_alert` state, which should be controlled by the parent component.
+- Timeout behavior can be adjusted using the `timeout` property, and alert visibility can be toggled using the `show_alert` state.
+- You can customize the alert's appearance, including the icon, buttons, position, and styles.
diff --git a/README.md b/README.md
@@ -41,7 +41,7 @@ Refer to [our guide](YEW.md) to integrate this component into your Yew app.
 
 Refer to [our guide](DIOXUS.md) to integrate this component into your Dioxus app.
 
-## 🌱 Leptos Usage (TODO)
+## 🌱 Leptos Usage
 
 Refer to [our guide](LEPTOS.md) to integrate this component into your Leptos app.
 

diff --git a/YEW.md b/YEW.md
@@ -40,7 +40,6 @@ Incorporating Yew Alert into your application is easy. Follow these steps:
                body={"This is an alert message"}
                show_alert={show_alert}
                timeout={2500}
-               alert_class={"w-96 h-48 text-white"}
                icon_class={"flex justify-center"}
                confirm_button_text={"Okay"}
                cancel_button_text={"Cancel"}
@@ -53,7 +52,7 @@ Incorporating Yew Alert into your application is easy. Follow these steps:
                on_cancel={Callback::noop()}
                position={Position::TopRight}
                icon_type={IconType::Success}
-               container_class={"flex items-center text-center justify-center bg-gray-800 text-white border border-gray-600"}
+               alert_class={"flex items-center text-center justify-center bg-gray-800 text-white border border-gray-600"}
                title_class={"dark:text-white"}
                body_class={"dark:text-gray-300"}
                icon_color={""}
@@ -140,7 +139,6 @@ Incorporating Yew Alert into your application is easy. Follow these steps:
 | `icon_class`           | `&'static str` | CSS class for styling the icon.                      | `""`    |
 | `confirm_button_class` | `&'static str` | CSS class for styling the confirm button.            | `""`    |
 | `cancel_button_class`  | `&'static str` | CSS class for styling the cancel button.             | `""`    |
-| `container_class`      | `&'static str` | CSS class for styling the alert container.           | `""`    |
 | `title_class`          | `&'static str` | CSS class for styling the alert title.               | `""`    |
 | `message_class`        | `&'static str` | CSS class for styling the message text in the alert. | `""`    |
 

diff --git a/examples/dioxus/README.md b/examples/dioxus/README.md
@@ -1,4 +1,4 @@
-# 📚 Alert RS Dioxus Tailwind Components
+# 📚 Alert RS Dioxus Example
 
 ## 🛠️ Pre-requisites:
 

diff --git a/examples/leptos/.gitignore b/examples/leptos/.gitignore
@@ -0,0 +1,2 @@
+target/**/*
+dist/**/*
diff --git a/examples/leptos/Cargo.toml b/examples/leptos/Cargo.toml
@@ -0,0 +1,11 @@
+[package]
+name = "leptos-alert-rs"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+console_error_panic_hook = "0.1.7"
+alert-rs = { path = "../../", features = ["lep"] }
+leptos = { version = "0.7.2", features = ["csr"] }
+log = "0.4.22"
+wasm-logger = "0.2.0"
diff --git a/examples/leptos/README.md b/examples/leptos/README.md
@@ -0,0 +1,81 @@
+# 📚 Alert RS Leptos Example
+
+## 🛠️ Pre-requisites:
+
+### 🐧 **Linux Users**
+
+1. **Install [`rustup`](https://www.rust-lang.org/tools/install)**:
+
+   ```sh
+   curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
+   ```
+
+1. **Install [`trunk`](https://trunkrs.dev/)**:
+
+   ```sh
+   cargo install --locked trunk
+   ```
+
+1. **Add the Wasm target**:
+
+   ```sh
+   rustup target add wasm32-unknown-unknown
+   ```
+
+### 🪟 **Windows Users**
+
+1. **Download and install `rustup`**: Follow the installation instructions [here](https://www.rust-lang.org/tools/install).
+
+1. **Install [Windows Subsystem for Linux (WSL)](https://learn.microsoft.com/en-us/windows/wsl/install)**: Open PowerShell as administrator and run:
+
+   ```sh
+   wsl --install
+   ```
+
+1. **Reset Network Stack**: In PowerShell (administrator mode), run:
+
+   ```sh
+   netsh int ip reset all
+   netsh winsock reset
+   ```
+
+1. **Install Linux packages in WSL**: Once inside your WSL terminal, update and install required dependencies:
+
+   ```sh
+   sudo apt update
+   sudo apt install build-essential pkg-config libudev-dev
+   ```
+
+1. **Install `trunk`**:
+
+   ```sh
+   cargo install --locked trunk
+   ```
+
+1. **Add the Wasm target**:
+
+   ```sh
+   rustup target add wasm32-unknown-unknown
+   ```
+
+## 🚀 Building and Running
+
+1. Fork/Clone the GitHub repository.
+
+   ```bash
+   git clone https://github.com/opensass/alert-rs
+   ```
+
+1. Navigate to the application directory.
+
+   ```bash
+   cd alert-rs/examples/leptos
+   ```
+
+1. Run the client:
+
+   ```sh
+   trunk serve --port 3000
+   ```
+
+Navigate to http://localhost:3000 to explore the landing page.
diff --git a/examples/leptos/index.html b/examples/leptos/index.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<html>
+  <head>
+    <link href="https://unpkg.com/[email protected]/dist/tailwind.min.css" rel="stylesheet" />
+    <link data-trunk rel="css" href="main.css" type="text/css" />
+    <link data-trunk rel="rust"/>
+    <base data-trunk-public-url />
+  </head>
+</html>
diff --git a/examples/leptos/main.css b/examples/leptos/main.css
@@ -0,0 +1,8 @@
+body {
+	color: #5e5c7f;
+	background-color: #303030;
+	font-family: "Rubik", sans-serif;
+	font-size: 16px;
+	line-height: 1.7;
+	overflow-x: hidden;
+}