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

feat: revamp && init add WASM frameworks support && add more customization #3

Merged
merged 1 commit into from
Dec 21, 2024
Merged

feat: revamp && init add WASM frameworks support && add more customization #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
6 changes: 6 additions & 0 deletions .bumpversion.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
[bumpversion]
current_version = 0.1.0

[bumpversion:file:Cargo.toml]
search = version = "{current_version}"
replace = version = "{new_version}"
2 changes: 1 addition & 1 deletion .github/workflows/rust.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,4 +19,4 @@ jobs:
- name: Build
run: cargo build --verbose
- name: Run tests
run: cargo test --lib --bins
run: cargo test --all-features
39 changes: 25 additions & 14 deletions Cargo.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,40 @@
[package]
name = "yew-alert"
name = "alert-rs"
version = "0.1.0"
description = "⚠️ A simple and flexible alert component for the Yew framework."
edition = "2021"
rust-version = "1.79"
description = "⚠️ A highly customizable alert component for WASM frameworks like Yew, Dioxus, and Leptos."
license = "MIT"
repository = "https://github.com/next-rs/yew-alert"
homepage = "https://github.com/next-rs/yew-alert"
documentation = "https://docs.rs/yew-alert/"
keywords = ["alert", "yew", "rust", "dioxus", "leptos"]
categories = ["web-programming", "science"]
repository = "https://github.com/opensass/alert-rs"
documentation = "https://docs.rs/alert-rs/"
authors = ["Mahmoud Harmouch <[email protected]>"]
edition = "2021"
exclude = ["/examples"]
keywords = ["yew", "rust", "alert", "yew-alert"]
categories = ["web-programming", "no-std"]
exclude = ["assets", "examples"]

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[dependencies]
gloo = "0.11.0"
web-sys = { version = "0.3.67", features = ["Window"] }
yew = "0.21.0"
gloo = { version = "0.11.0", default-features = false, features = ["timers"], optional = true }
wasm-bindgen = "0.2.99"
web-sys = { version = "0.3.76", features = ["Window"] }
yew = { version = "0.21.0", default-features = false, optional = true }

[features]
yew = ["dep:yew", "gloo"]

[profile.release]
codegen-units = 1
opt-level = "z"
debug = false
lto = "thin"
codegen-units = 1
panic = "abort"
strip = "symbols"
incremental = false

[badges]
maintenance = { status = "actively-developed" }
maintenance = { status = "actively-developed" }

[dev-dependencies]
log = "0.4.22"
bump2version = "0.1.4"
2 changes: 1 addition & 1 deletion LICENSE
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
MIT License

Copyright (c) 2024 Mahmoud Harmouch
Copyright (c) 2024 Open SASS Core Maintainers

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand Down
160 changes: 34 additions & 126 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,150 +1,58 @@
# ⚠️ Yew Alert
<div align="center">

[![Crates.io](https://img.shields.io/crates/v/yew-alert)](https://crates.io/crates/yew-alert)
[![Crates.io Downloads](https://img.shields.io/crates/d/yew-alert)](https://crates.io/crates/yew-alert)
![Crates.io License](https://img.shields.io/crates/l/yew-alert)
![Rust](https://img.shields.io/badge/rust-stable-orange)
[![Netlify Status](https://api.netlify.com/api/v1/badges/e8246c00-9789-4483-bcd4-b500eefa6f6a/deploy-status)](https://yew-alert.netlify.app)
# ⚠️ Alert RS

---
[![Crates.io](https://img.shields.io/crates/v/alert-rs)](https://crates.io/crates/alert-rs)
[![Crates.io Downloads](https://img.shields.io/crates/d/alert-rs)](https://crates.io/crates/alert-rs)
![Crates.io License](https://img.shields.io/crates/l/alert-rs)
[![made-with-rust](https://img.shields.io/badge/Made%20with-Rust-1f425f.svg?logo=rust&logoColor=white)](https://www.rust-lang.org/)
[![Rust](https://img.shields.io/badge/Rust-1.79%2B-blue.svg)](https://www.rust-lang.org)
[![Maintenance](https://img.shields.io/badge/Maintained%3F-yes-green.svg)](https://github.com/wiseaidev)

[![Demo](https://github.com/next-rs/yew-alert/assets/62179149/07c6eef5-ef37-4364-b80e-328c425eee4c)](https://yew-alert.netlify.app/)
[![Open SASS Discord](https://dcbadge.limes.pink/api/server/b5JbvHW5nv)](https://discord.gg/b5JbvHW5nv)

---
![logo](./assets/logo.png)

## 📜 Introduction
</div>

Yew Alert is a simple yet flexible alert component for the Yew framework, designed to provide customizable and responsive alerts to enhance user interaction.
## 🎬 Demo

## 🤔 Why is this Component Useful?
![alert-rs-demo](./assets/demo.gif)

The Alert component offers several benefits to improve your web application:
## 📜 Intro

1. ⚙️ Customization: Tailor the appearance and behavior of alerts based on your application's design and requirements.
`Alert-RS` is a highly customizable alert component designed for Wasm-based frameworks like **Yew**, **Dioxus**, and **Leptos**. Create fully-featured, styled alerts with configurable behaviors like auto-close, button actions, and customizable icons, all within your Rust-based frontend.

2. 🚀 Responsive Design: Ensures optimal display and interaction across various devices and screen sizes.
## 🤔 Why Use Alert-RS?

3. 💬 Easy Integration: Seamlessly integrate alerts into Yew projects with minimal setup and configuration.
The following are some reasons why Alert-RS is a fantastic addition to your Wasm projects:

## ⚙️ Installation
1. **🚨 Custom Alerts**: Create fully customizable alert boxes with title, message, and buttons.
1. **🎨 Styling Flexibility**: Customize every element with CSS classes and inline styles.
1. **⚡ Button Actions**: Display and handle buttons like Confirm, Cancel, and Close with callback support.
1. **⏲️ Auto-Close**: Optionally auto-close the alert after a timeout.
1. **🔧 Highly Configurable**: Control alert position, icon type, and visibility based on scroll position.

Integrating Yew Alert into your Yew project is straightforward. Follow these steps:
## Y Yew Usage

1. Make sure you have Yew set up in your project. If not, refer to the [Yew documentation](https://yew.rs/docs/getting-started/introduction) for installation instructions.
Refer to [our guide](YEW.md) to integrate this component into your Yew app.

1. Install the library using your preferred package manager:
## 🧬 Dioxus Usage (TODO)

```bash
$ cargo add yew-alert
```
Refer to [our guide](DIOXUS.md) to integrate this component into your Dioxus app.

1. Start using the Alert component to enhance your application's user feedback.
## 🌱 Leptos Usage (TODO)

## 🛠️ Usage
Refer to [our guide](LEPTOS.md) to integrate this component into your Leptos app.

Incorporating Yew Alert into your application is easy. Follow these steps:
## 🤝 Contributions

1. Import the Alert component into your Yew project:
Contributions are welcome! Whether it's bug fixes, feature requests, or examples, we would love your help to make Alert-RS better.

```rust
use yew::prelude::*;
use yew_alert::Alert;
```

1. Define the alert properties and use the Alert component in your Yew component:

```rust
#[function_component(App)]
pub fn app() -> Html {
let show_alert = use_state(|| true);
html! {
<Alert
message={"This is an alert message"}
show_alert={show_alert}
timeout={2500}
title={"Alert Title"}
alert_class={"w-96 h-48 text-white"}
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::noop()}
on_cancel={Callback::noop()}
position={"top-right"}
container_class={"flex items-center text-center justify-center bg-gray-800 text-white border border-gray-600"}
title_class={"dark:text-white"}
message_class={"dark:text-gray-300"}
icon_type={"success"}
icon_color={""}
icon_width={"50"}
/>
}
}
```

1. Customize the Alert appearance and behavior using provided props.

1. Enjoy enhanced user feedback with Yew Alert.

## 🔧 Props

### Main Props

| Name | Type | Default Value | Description |
| --- | --- | --- | ----- |
| `message` | `&'static str` | `""` | The message content of the alert. |
| `show_alert` | `UseStateHandle<bool>` | - | State to control the visibility of the alert.|
| `timeout` | `u32` | `2500` | The duration in milliseconds before the alert automatically closes.|
| `title` | `&'static str` | `"Info"` | The title of the alert. |

### Style and Layout Props

| Name | Type | Default Value | Description |
| --- | --- | --- | ----- |
| `alert_class` | `&'static str` | `"w-96 h-48 text-white"` | The class applied to the alert container. |
| `icon_class` | `&'static str` | `"flex justify-center"` | The class applied to the icon container. |

### Button Props

| Name | Type | Default Value | Description |
| --- | --- | --- | ----- |
| `confirm_button_text`| `&'static str` | `"Okay"` | The text displayed on the confirm button. |
| `cancel_button_text` | `&'static str` | `"Cancel"` | The text displayed on the cancel button. |
| `confirm_button_class`| `&'static str` | `"bg-green-500 text-white rounded"`| The class applied to the confirm button. |
| `cancel_button_class` | `&'static str` | `"bg-red-500 text-white rounded"` | The class applied to the cancel button. |
| `show_confirm_button` | `bool` | `true` | Determines whether the confirm button is shown. |
| `show_cancel_button` | `bool` | `true` | Determines whether the cancel button is shown. |
| `show_close_button` | `bool` | `true` | Determines whether the close button (x) is shown.|

### Positioning and Layout Props

| Name | Type | Default Value | Description |
| --- | --- | --- | ----- |
| `position` | `&'static str` | `"top-right"` | The position of the alert on the screen. Possible values: "top-left", "top-right", "middle", "bottom", "top", "bottom-right", "bottom-left".|
| `container_class` | `&'static str` | `"flex items-center text-center justify-center bg-gray-800 text-white border border-gray-600"` | The class applied to the outermost container of the alert.|
| `title_class` | `&'static str` | `"dark:text-white"` | The class applied to the alert title. |
| `message_class` | `&'static str` | `"dark:text-gray-300"` | The class applied to the alert message. |

### Icon Props

| Name | Type | Default Value | Description |
| --- | --- | --- | ----- |
| `icon_type` | `&'static str` | `"success"` | The type of icon to be displayed. Possible values: "warning", "error", "success", "info", "question".|
| `icon_color` | `&'static str` | `""` | The color of the icon. If empty, a default color is used based on the icon type.|
| `icon_width` | `&'static str` | `"50"` | The width of the icon. |

## 📙 Examples

Explore different styling and features in the [examples folder](examples/tailwind).

## 🤝 Contribution

We welcome contributions from the community to enhance this component. Feel free to open issues, submit pull requests, or provide feedback. Let's collaborate to make user interaction in Yew even more dynamic and user-friendly!
1. Fork the repository.
1. Create a new branch for your feature/bugfix.
1. Submit a pull request for review.

## 📜 License

Yew Alert is licensed under the `MIT` License, allowing you to use, modify, and distribute it freely. Refer to the [`LICENSE`](LICENSE) file for more details.
Alert-RS is licensed under the [MIT License](LICENSE). You are free to use, modify, and distribute this library in your projects.
Loading
Loading