docs: add doc section about examples

docs/.vitepress/config.ts

@@ -45,6 +45,7 @@ export default defineConfig({
           },
           { text: 'Concepts', link: '/guide/concepts' },
           { text: 'Devtools', link: '/guide/devtools' },
+          { text: 'Examples', link: '/guide/examples' },
         ],
       },
       {

docs/guide/examples.md

@@ -0,0 +1,24 @@
+# Examples
+
+There are a few examples in the `examples` directory of the repository, that show how to use the library in different
+scenarios.
+
+## React
+
+| <div style="width:290px">Example</div>                                                                                                                                                                                                                                                                                                                                                                                                                                                  | Description                                                                                                           |
+|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------|
+| [async-form-signals](https://github.com/gutentag2012/form-signals/tree/main/examples/react/async-form-signals) [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz_small.svg)](https://stackblitz.com/fork/github/gutentag2012/form-signals/tree/main/examples/react/async-form-signals?startScript=example&title=Form%20Signals%20&#124;%20Async%20Example)                                                                                                 | A simple form that loads data asynchronously and handles async form submission and validation                         |
+| [complex-product-details-form-signals](https://github.com/gutentag2012/form-signals/tree/main/examples/react/complex-product-details-form-signals) [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz_small.svg)](https://stackblitz.com/fork/github/gutentag2012/form-signals/tree/main/examples/react/complex-product-details-form-signals?startScript=example&title=Form%20Signals%20&#124;%20Complex%20Example)                                         | A complex form utilizing array fields, nested objects, dynamic fields, custom validation and deeply nested components |
+| [complex-product-details-react-hook-form](https://github.com/gutentag2012/form-signals/tree/main/examples/react/complex-product-details-react-hook-form) [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz_small.svg)](https://stackblitz.com/fork/github/gutentag2012/form-signals/tree/main/examples/react/complex-product-details-react-hook-form?startScript=example&title=Form%20Signals%20&#124;%20Complex%20Example%20&#124;%20React%20Hook%20Form) | The complex example just implemented using react hook form form comparison                                            |
+| [complex-product-details-tanstack-form](https://github.com/gutentag2012/form-signals/tree/main/examples/react/complex-product-details-tanstack-form) [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz_small.svg)](https://stackblitz.com/fork/github/gutentag2012/form-signals/tree/main/examples/react/complex-product-details-tanstack-form?startScript=example&title=Form%20Signals%20&#124;%20Complex%20Example%20&#124;%20Tanstack%20Form)           | The complex example just implemented using tanstack form form comparison                                              |
+| [e-commerce-form-signals](https://github.com/gutentag2012/form-signals/tree/main/examples/react/e-commerce-form-signals) [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz_small.svg)](https://stackblitz.com/fork/github/gutentag2012/form-signals/tree/main/examples/react/e-commerce-form-signals?startScript=example&title=Form%20Signals%20&#124;%20E-Commerce%20Example)                                                                             | Creates a form outside of a component and uses it in different locations through a global import                      |
+| [files-form-signals](https://github.com/gutentag2012/form-signals/tree/main/examples/react/files-form-signals) [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz_small.svg)](https://stackblitz.com/fork/github/gutentag2012/form-signals/tree/main/examples/react/files-form-signals?startScript=example&title=Form%20Signals%20&#124;%20Files%20Example)                                                                                                 | Utilizes file upload with the library                                                                                 |
+| [performance-test-form-signals](https://github.com/gutentag2012/form-signals/tree/main/examples/react/performance-test-form-signals) [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz_small.svg)](https://stackblitz.com/fork/github/gutentag2012/form-signals/tree/main/examples/react/performance-test-form-signals?startScript=example&title=Form%20Signals%20&#124;%Performance%20Test%20Example)                                                     | Creates an array with many a lot of individual items to stress test the performance for large forms                   |
+| [simple-form-signals](https://github.com/gutentag2012/form-signals/tree/main/examples/react/simple-form-signals) [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz_small.svg)](https://stackblitz.com/fork/github/gutentag2012/form-signals/tree/main/examples/react/simple-form-signals?startScript=example&title=Form%20Signals%20&#124;%20Simple%20Example)                                                                                             | A very simple example with few fields and simple validation                                                           |
+| [step-wizard-form-signals](https://github.com/gutentag2012/form-signals/tree/main/examples/react/step-wizard-form-signals) [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz_small.svg)](https://stackblitz.com/fork/github/gutentag2012/form-signals/tree/main/examples/react/step-wizard-form-signals?startScript=example&title=Form%20Signals%20&#124;%20Step%20Wizard%20Example)                                                                       | A multi step form, that validates each step before going to the next step and finally submitting the complete form    |
+
+## React Native
+
+| Example                                                                                                                 | Description                                            |
+|-------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------|
+| [native-form-signals](https://github.com/gutentag2012/form-signals/tree/main/examples/react-native/native-form-signals) | A simple react native implementation using the library |

docs/guide/react/quickstart.md

@@ -190,4 +190,6 @@ export default function FieldErrors() {
 
 :::
 
-[//]: # (TODO Add Stackblitz example)
+## Interactive Example
+
+<iframe width="110%" style="margin-left: -5%;" height="500px" src="https://stackblitz.com/fork/github/gutentag2012/form-signals/tree/main/examples/react/simple-form-signals?startScript=example&title=Form%20Signals%20&#124;%20Simple%20Example&file=src%2FApp.tsx&embed=1&ctl=1&hidedevtools=1&terminalHeight=0&hideNavigation=1"></iframe>

docs/roadmap.md

@@ -52,7 +52,7 @@ The versions do not match the versions where the features were added.
 ## Version 0.4.0
 
 - :white_check_mark: <LibraryChip library="form-react" /> Add example for shopping cart on e-commerce site (multipage) (with form outside of react components)
-- :x: <LibraryChip library="chore" /> Add Use Cases & Examples section to documentation --> Add simple examples with minimal dependencies for the doc site to integrate with stackblitz and codesandbox but mention the other examples in the repo
+- :white_check_mark: <LibraryChip library="chore" /> Add Use Cases & Examples section to documentation --> Add simple examples with minimal dependencies for the doc site to integrate with stackblitz and codesandbox but mention the other examples in the repo
 
 ## Version 0.5.0