{"id":14985470,"url":"https://github.com/chriamue/yew-preview","last_synced_at":"2026-02-19T18:31:12.592Z","repository":{"id":248758415,"uuid":"829625449","full_name":"chriamue/yew-preview","owner":"chriamue","description":"Yew Preview Test Framework","archived":false,"fork":false,"pushed_at":"2025-03-06T17:37:34.000Z","size":218,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-12-13T01:35:12.276Z","etag":null,"topics":["components","rust","storybook","testing","ui-components","yew"],"latest_commit_sha":null,"homepage":"http://blog.chriamue.de/yew-preview/","language":"Rust","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chriamue.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-07-16T20:11:41.000Z","updated_at":"2025-03-06T17:36:38.000Z","dependencies_parsed_at":"2024-12-30T17:27:17.514Z","dependency_job_id":"c8b45349-cf2b-4b49-bbbd-34d764395d5f","html_url":"https://github.com/chriamue/yew-preview","commit_stats":{"total_commits":13,"total_committers":2,"mean_commits":6.5,"dds":0.07692307692307687,"last_synced_commit":"e676eb815a11283d612206cfe41da779bc36aa8b"},"previous_names":["chriamue/yew-preview"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/chriamue/yew-preview","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chriamue%2Fyew-preview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chriamue%2Fyew-preview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chriamue%2Fyew-preview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chriamue%2Fyew-preview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chriamue","download_url":"https://codeload.github.com/chriamue/yew-preview/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chriamue%2Fyew-preview/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29627111,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-19T18:02:07.722Z","status":"ssl_error","status_checked_at":"2026-02-19T18:01:46.144Z","response_time":117,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["components","rust","storybook","testing","ui-components","yew"],"created_at":"2024-09-24T14:11:00.923Z","updated_at":"2026-02-19T18:31:12.576Z","avatar_url":"https://github.com/chriamue.png","language":"Rust","funding_links":[],"categories":[],"sub_categories":[],"readme":"# YewPreview\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![Actions Status](https://github.com/chriamue/yew-preview/workflows/GitHub%20Pages%20Deployment/badge.svg)](https://github.com/chriamue/yew-preview/actions)\n\n**YewPreview** is a simple and flexible component explorer and test framework for [Yew](https://yew.rs/) applications, inspired by [Storybook](https://storybook.js.org/). It allows you to preview, configure, and test your Yew components in an isolated and organized environment.\n\n## Purpose\n\nYewPreview helps developers streamline the Yew component development workflow.  It provides a dedicated space to:\n\n*   **Visualize:** See how your components render with different property combinations.\n*   **Configure:** Dynamically adjust component properties and observe the changes.\n*   **Test:**  Run automated tests against your components to ensure they meet your requirements.\n\nThis accelerates development, improves component reusability, and reduces visual regressions.\n\n## Features\n\n*   **Interactive Component Exploration:** Browse a categorized list of your Yew components.\n*   **Live Preview:**  Render components with different property sets in a central preview area.\n*   **Dynamic Configuration:** Easily modify component properties and see the results instantly.\n*   **Test Automation:** Define and run tests directly within the YewPreview environment.\n*   **Simple Setup:**  Quick integration with your existing Yew project using [Trunk](https://trunkrs.dev/).\n*   **Macro-Powered:**  Uses macros for concise and declarative component definition.\n\n## Getting Started\n\n### Prerequisites\n\nMake sure you have the following installed:\n\n*   [Rust](https://www.rust-lang.org/tools/install) (stable channel recommended)\n*   [Trunk](https://trunkrs.dev/#install) (for building and serving the application)\n*   A code editor (e.g., VS Code with the Rust Analyzer extension)\n\n### Installation and Usage\n\nHere's how to integrate YewPreview into your Yew project:\n\n1.  **Create a new Yew project (if you don't have one already):**\n\n    ```sh\n    cargo new my-yew-project --bin\n    cd my-yew-project\n    ```\n\n2.  **Add `yew-preview` and `yew` as dependencies in your `Cargo.toml` file:**\n\n    ```toml\n    [dependencies]\n    yew = { version = \"0.21\", features = [\"csr\"] } # Or the latest version\n    yew-preview = { git = \"https://github.com/chriamue/yew-preview\" }\n    ```\n\n3.  **Create an `index.html` file in the `src` directory:**\n\n    ```html\n    \u003c!DOCTYPE html\u003e\n    \u003chtml lang=\"en\"\u003e\n    \u003chead\u003e\n        \u003cmeta charset=\"utf-8\"\u003e\n        \u003ctitle\u003eYew Preview\u003c/title\u003e\n        \u003clink data-trunk rel=\"rust\" href=\"src/main.rs\"\u003e\n        \u003clink data-trunk rel=\"scss\" href=\"style.scss\"\u003e \u003c!-- Optional: For styling --\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\u003c/body\u003e\n    \u003c/html\u003e\n    ```\n\n4.  **Create a `style.scss` file for the `index.html` (optional):**\n\n    ```scss\n    body {\n        margin: 0;\n        padding: 0;\n        font-family: sans-serif;\n    }\n    ```\n\n5.  **Update `src/main.rs` with your components and the YewPreview setup:**\n\n    ```rust\n    use yew::prelude::*;\n    use yew_preview::prelude::*;\n    use yew_preview::create_component_group; // Import group macro\n    use yew_preview::examples::{header::HeaderComp, image::ImageComp, footer::FooterComp}; // Import example components\n\n    #[function_component(App)]\n    pub fn app() -\u003e Html {\n\n        let groups = vec![\n            create_component_group!(\n                \"General\",\n                HeaderComp::preview(),\n                ImageComp::preview(),\n                FooterComp::preview()\n            ),\n            // You can create more groups\n        ];\n\n        html! {\n            \u003cdiv style=\"font-family: sans-serif;\"\u003e\n                \u003ch1\u003e{ \"YewPreview Demo\" }\u003c/h1\u003e\n                \u003cPreviewPage groups={groups} /\u003e\n            \u003c/div\u003e\n        }\n    }\n\n    fn main() {\n        yew::Renderer::\u003cApp\u003e::new().render();\n    }\n    ```\n\n6.  **Run the application using Trunk:**\n\n    ```sh\n    trunk serve --open\n    ```\n\n    This will typically open your browser to `http://127.0.0.1:8080`.\n\n### Creating Component Previews\n\nYewPreview uses the `Preview` trait and associated macros to define how your components are displayed and tested.  Here's a simple example:\n\n```rust\nuse yew::prelude::*;\nuse yew_preview::prelude::*;\n\n#[derive(Properties, PartialEq, Clone, Default)]\npub struct MyComponentProps {\n    pub text: String,\n    pub color: String,\n}\n\n#[function_component(MyComponent)]\npub fn my_component(props: \u0026MyComponentProps) -\u003e Html {\n    html! {\n        \u003cdiv style={format!(\"color: {}\", props.color)}\u003e\n            {props.text.clone()}\n        \u003c/div\u003e\n    }\n}\n\ncreate_preview_with_tests!(\n    component: MyComponent,\n    default_props: MyComponentProps {\n        text: \"Hello\".to_string(),\n        color: \"black\".to_string(),\n    },\n    variants: [\n        (\n            \"Red Text\",\n            MyComponentProps {\n                text: \"Red Hello\".to_string(),\n                color: \"red\".to_string(),\n            }\n        ),\n        (\n            \"Blue Text\",\n            MyComponentProps {\n                text: \"Blue Hello\".to_string(),\n                color: \"blue\".to_string(),\n            }\n        ),\n    ],\n    tests: [\n        (\n            \"Has correct text\",\n            has_text(\"Hello\"),\n        ),\n        (\n            \"Has correct color\",\n            has_style(\"color\", \"black\"),\n        ),\n    ]\n);\n```\n\n**Explanation:**\n\n*   `create_preview_with_tests!` macro:\n    *   `component`: The Yew component type (`MyComponent`).\n    *   `default_props`: The default properties used for the initial preview.\n    *   `variants`:  A list of property sets that create different preview variations. Each variant has a name and the corresponding `props`.\n    *   `tests`: A list of tests to verify the component's behavior.\n\n### Component Grouping\n\nComponents can be grouped for better organization. Here's an example of how to use the `create_component_group!` macro:\n\n```rust\nuse yew_preview::prelude::*;\nuse yew_preview::create_component_group;\nuse yew_preview::examples::{header::HeaderComp, image::ImageComp, footer::FooterComp};\n\nlet groups = vec![\n    create_component_group!(\n        \"Layout\",\n        HeaderComp::preview(),\n        FooterComp::preview()\n    ),\n    create_component_group!(\n        \"Media\",\n        ImageComp::preview()\n    )\n];\n```\n\n## Testing Components\n\nYewPreview allows you to define tests for your components directly within the `create_preview_with_tests!` macro.  These tests use matchers to assert specific conditions about the rendered output.  See the example above for how to define the tests.\n\n## Projects Using YewPreview\n\nHere are some projects that use YewPreview to showcase and test their components:\n\n### Konnektoren-Yew\n\nA web application for learning German grammar, focused on connectors (Konnektoren) and conjunctions. Built with Yew, it offers interactive lessons across multiple language platforms.\n\n- **Demo:** [https://konnektoren.github.io/konnektoren-yew/](https://konnektoren.github.io/konnektoren-yew/)\n- **Repository:** [https://github.com/konnektoren/konnektoren-yew](https://github.com/konnektoren/konnektoren-yew)\n- **Features:** Multi-language support, interactive lessons, progress tracking, achievements, and SSI credential badges\n\n_Have a project using YewPreview? Submit a PR to add it here!_\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a pull request.\n\n## Acknowledgements\n\nInspired by [Storybook](https://storybook.js.org/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchriamue%2Fyew-preview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchriamue%2Fyew-preview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchriamue%2Fyew-preview/lists"}