Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/chriamue/yew-preview
Yew Preview Test Framework
https://github.com/chriamue/yew-preview
components rust storybook testing ui-components yew
Last synced: 4 months ago
JSON representation
Yew Preview Test Framework
- Host: GitHub
- URL: https://github.com/chriamue/yew-preview
- Owner: chriamue
- License: mit
- Created: 2024-07-16T20:11:41.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-07-17T09:33:40.000Z (7 months ago)
- Last Synced: 2024-09-29T22:41:42.791Z (4 months ago)
- Topics: components, rust, storybook, testing, ui-components, yew
- Language: Rust
- Homepage: http://blog.chriamue.de/yew-preview/
- Size: 251 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# YewPreview
**YewPreview** is a simple and flexible test framework for Yew components, inspired by Storybook. It allows you to preview and test Yew components in an organized and user-friendly manner.
## Purpose
The purpose of YewPreview is to provide a tool for developers to easily create, preview, and test Yew components with configurable parameters. By using this framework, you can quickly see how your components look and behave, making the development process more efficient.
## Features
- Display a list of available components
- Preview selected components in the center of the page
- Configure and test component parameters dynamically
- Simple setup with Trunk for building and serving the application
## Setup and Usage
### Prerequisites
Ensure you have the following installed:
- [Rust](https://www.rust-lang.org/tools/install)
- [Trunk](https://trunkrs.dev/#install)
- [Yew](https://yew.rs/docs/getting-started/installation)
### Installation
1. Create a new Rust project:
```sh
cargo new my-yew-preview --bin
cd my-yew-preview
```
2. Add dependencies to `Cargo.toml`:
```toml
[dependencies]
yew = { version = "0.21", features = ["csr"] }
yew-preview = { git = "https://github.com/chriamue/yew-preview" }
```
3. Create the `index.html` file in the `src` directory:
```html
Yew Preview
```
4. Update `main.rs` in the `src` directory:
```rust
use yew::prelude::*;
use yew_preview::prelude::*;
use yew_preview::create_component_item;
#[derive(Properties, PartialEq, Clone)]
pub struct HeaderCompProps {
pub title: String,
}
#[function_component(HeaderComp)]
pub fn header_comp(props: &HeaderCompProps) -> Html {
html! {
{ &props.title }
}
}
#[derive(Properties, PartialEq, Clone)]
pub struct ImageCompProps {
pub src: String,
pub size: u32,
}
#[function_component(ImageComp)]
pub fn image_comp(props: &ImageCompProps) -> Html {
html! {
}
}
#[function_component(App)]
pub fn app() -> Html {
let components: ComponentList = vec![
create_component_item!(
"Header",
HeaderComp,
vec![
(
"Hello".to_string(),
HeaderCompProps {
title: "Hello, World!".to_string()
}
),
(
"Goodbye".to_string(),
HeaderCompProps {
title: "Goodbye, World!".to_string()
}
)
]
),
create_component_item!(
"Image",
ImageComp,
vec![
(
"256".to_string(),
ImageCompProps {
size: 256,
src: "https://www.rust-lang.org/logos/rust-logo-512x512.png".to_string()
}
),
(
"512".to_string(),
ImageCompProps {
size: 512,
src: "https://www.rust-lang.org/logos/rust-logo-512x512.png".to_string()
}
)
]
),
];
html! {
{ "YewPreview Component Testing Framework" }
}
}
fn main() {
yew::Renderer::::new().render();
}
```
You can also create a preview with macro `create_preview!`:
```rust
create_preview!(
ImageComp,
ImageCompProps::default(),
("256",
ImageCompProps {
size: 256,
src: "https://www.rust-lang.org/logos/rust-logo-512x512.png".to_string()
}),
("512",
ImageCompProps {
size: 512,
src: "https://www.rust-lang.org/logos/rust-logo-512x512.png".to_string()
})
);
```
### Running the Application
1. Build and serve the application using Trunk:
```sh
trunk serve --open
```
2. Open your browser and navigate to `http://127.0.0.1:8080` to see YewPreview in action.
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
```