Merge pull request #85 from agile-ts/develop

optimized documentation version

Author: bennobuilder

docs/Interfaces.md

@@ -443,19 +443,19 @@ Here is a Typescript Interface for quick reference,
 however each property will be explained in more detail below.
 ```ts
 export interface StatePersistentConfigInterface {
-   instantiate?: boolean;
+   loadValue?: boolean;
    storageKeys?: StorageKey[];
 }
 ```
 
 <br/>
 
-#### `instantiate`
+#### `loadValue`
 
-If the `Persistent` which gets created should be instantiated immediately.
+If the `Persistent` which gets created should be load its value immediately into the State.
 :::info
 
-Be aware, that if we don't let AgileTs instantiate our `Persistent`, we have to do it on our own.
+Be aware, that if we don't let AgileTs load the value into our State, we have to do it on our own.
 
 :::
 ```ts {2}

docs/examples/Indroduction.md

@@ -5,8 +5,10 @@ sidebar_label: Introduction
 slug: /examples
 ---
 
-:::warning
+Most of the time you can learn something better by seeing it in action.
+That's why we've put together a few examples for you. 
+If that's not enough for you, we have more examples in the [AgileTs repository](https://github.com/agile-ts/agile/tree/master/examples).
 
-WIP Docs!
-
-:::
+## 🚀 Quick Links
+- [React](./react/All.mdx)
+- [React-Native](./react-native/All.mdx)

docs/examples/react-native/All.md

@@ -0,0 +1,33 @@
+---
+id: all
+title: React-Native Examples
+sidebar_label: All
+slug: /examples/react-native
+---
+
+export const ExpoSandbox = ({ uri, height }) => {
+  // https://github.com/expo/snack/blob/main/docs/embedding-snacks.md
+  // Script is set in docusaurus.config.js
+  return (
+    <div
+      data-snack-id={uri}
+      data-snack-platform={'web'}
+      data-snack-preview={'true'}
+      data-snack-theme={'dark'}
+      data-snack-loading={'lazy'}
+      style={{
+        width: '100%',
+        height: height || 500,
+        borderWidth: 2,
+        borderRadius: 4,
+        borderColor: '#6c69a0',
+        overflow: 'hidden',
+        backgroundColor: '#26262f',
+      }}
+    />
+  );
+};
+
+## 😎 First State
+
+<ExpoSandbox uri={'@bennodev/agilets-first-state'} />

docs/examples/react-native/All.mdx

@@ -5,45 +5,47 @@ sidebar_label: All
 slug: /examples/react
 ---
 
-:::warning
-
-WIP Docs!
-
-:::
-
 export const CodeSandBoxEmbed = ({ uri, height }) => (
-    <iframe
-        src={`https://codesandbox.io/embed/${uri}?fontsize=14&hidenavigation=0&theme=dark&view=preview`}
-        title={"Code Sandbox"}
-        style={{width: "100%", height: height || 500, borderRadius: 4, borderColor: "#6c69a0", overflow: "hidden"}}
-        allow={
-            "geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
-        }
-        sandbox={
-            "allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
-        }
-    />
+  <iframe
+    src={`https://codesandbox.io/embed/${uri}?fontsize=14&hidenavigation=0&theme=dark&view=preview`}
+    title={'Code Sandbox'}
+    style={{
+      width: '100%',
+      height: height || 500,
+      borderWidth: 2,
+      borderRadius: 4,
+      borderColor: '#6c69a0',
+      overflow: 'hidden',
+    }}
+    allow={
+      'geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb'
+    }
+    sandbox={
+      'allow-modals allow-forms allow-popups allow-scripts allow-same-origin'
+    }
+  />
 );
 
 ## 😎 First State
-<CodeSandBoxEmbed uri={"agilets-first-state-f12cz"}/>
 
+<CodeSandBoxEmbed uri={'agilets-first-state-f12cz'} />
 
 ## 👨‍👩‍👦‍ First Collection
-<CodeSandBoxEmbed uri={"agilets-first-collection-uyi9g"} />
 
+<CodeSandBoxEmbed uri={'agilets-first-collection-uyi9g'} />
 
 ## ⚙️‍ First Computed
-<CodeSandBoxEmbed uri={"agilets-first-computed-kisgr"} />
 
+<CodeSandBoxEmbed uri={'agilets-first-computed-kisgr'} />
 
 ## 📝 Multieditor
-<CodeSandBoxEmbed uri={"multieditor-yxt4x"} height={800}/>
 
+<CodeSandBoxEmbed uri={'multieditor-yxt4x'} height={800} />
 
 ## 👴 First State [Class Component]
-<CodeSandBoxEmbed uri={"agilets-first-state-with-hoc-1qdew"}/>
+
+<CodeSandBoxEmbed uri={'agilets-first-state-with-hoc-1qdew'} />
 
 ## ✔️ Simple Todo List
-<CodeSandBoxEmbed uri={"agilets-simple-todo-list-glmc4"}/>
 
+<CodeSandBoxEmbed uri={'agilets-simple-todo-list-glmc4'} />

docs/examples/react/All.mdx

@@ -17,17 +17,16 @@ Contributors and people new to open source will find the following guides especi
 
 
 ## 👊 [Code of Conduct](https://code.fb.com/codeofconduct)
-
 Please read [the full text](https://code.fb.com/codeofconduct), so that you are able to understand what interpersonal actions will and will not be tolerated.
 
 
 ## 😎 Get Involved
 There are many ways to contribute to AgileTs, and some of them don't involve writing any code.
 Here are a few ideas to get started:
-- Just start using AgileTs. Does everything work as expected? If not, we're always looking for improvements. Let us know by [opening an issue](#reporting-new-issues).
+- Just start using AgileTs. Does everything work as expected? If not, we're always looking for improvements. Let us know by [opening an issue](#-reporting-new-issues).
 - Help us solving [open issues](https://github.com/agile-ts/agile/issues) by suggesting workarounds or fixing them.
 - [Improve open issues](#improve-issues-and-pull-requests) to make them more clear, readable and understandable for others.
-- Read through the [AgileTs docs](https://agile-ts.org/docs). If you find anything that is confusing or can be improved, feel free to  make edits by clicking "Edit" at the bottom of the doc page.
+- Read through the [AgileTs documentation](https://agile-ts.org/docs). If you find anything that is confusing or can be improved, feel free to  make edits by clicking "Edit" at the bottom of the doc page.
 - Take a look at the [features requested](https://github.com/agile-ts/agile/labels/enhancement) by others and consider opening a pull request if you see something you want to work on.
 
 ### Join our Discord Server
@@ -36,21 +35,17 @@ our [Discord Community](https://discord.gg/T9GzreAwPH) by helping other people w
 have solved.
 
 ### Improve Issues and Pull Requests
-
 One great way to contribute without writing _any_ code is to improve open issues and pull requests.
-
 - Ask for more information if you believe the issue does not provide all the details required to solve it
 - Suggest [labels](https://github.com/agile-ts/agile/labels) that help to categorize issues/pull-requests
 - Flag issues that are stale or that should be closed
 
 
 ## ⏰ Our Development Process
-
 AgileTs uses Github as it's source of truth.
 All changes made so far and which will be made in future are and will remain publicly accessible here.
 
 ### Branch Organization
-
 AgileTs has two primary branches: `master` and `develop`
 
 `master` contains the latest released code
@@ -63,41 +58,38 @@ The root of all your branches have to be the `develop` branch!
 
 
 ## 🐞 Bugs
-
 We use [GitHub Issues](https://github.com/agile-ts/agile/issues) to keep track of our bugs.
 If you would like to report any problem, **take a look around and see if someone already opened an issue about it**.
-If you are certain this is a new unreported bug, you can submit a [bug report](#reporting-new-issues).
+If you are certain this is a new unreported bug, you can submit a [bug report](#-reporting-new-issues).
 
 
 ## 📕 Reporting New Issues
-
 When [opening a new issue](https://github.com/agile-ts/agile/issues/new/choose), always make sure to fill out the whole issue template.
 **This step is very important!** Not doing so may result in your issue not managed in a timely fashion.
 Don't take this personally if this happens, and feel free to open a new issue once you've gathered all the information required by the template.
 
 - **One issue, one bug!** Please report a single bug per issue.
-- **Provide reproduction steps!** List all steps that are necessary to reproduce the issue. The person reading your bug report should be able to reproduce your issue with minimal effort.
+- **Provide reproduction steps!** List all steps that are necessary to reproduce the issue. 
+  The person reading your bug report should be able to reproduce your issue with minimal effort.
 
 
 ## ⏳ Installation
-
 1. Ensure you have [Yarn](https://yarnpkg.com/) installed
 2. After cloning the repository, run `yarn run install-packages` in the root of the repository,
    which simply runs `yarn install` in each package to ensure all dependencies are installed.
 
 ### Run Example Project's
-
-1. Follow the [Installation](#Installation) steps above
+1. Follow the [Installation](#-Installation) steps above
 2. Ensure you have [Yalc](https://www.google.com/search?client=firefox-b-d&q=yalc) installed
-3. Run `yarn run dev-publish` to publish all packages in your local 'npm store'
+3. Run `yarn run dev:publish` to publish all packages in your local 'yalc/(npm) store'
 4. Execute `yarn install` in the Example Project to install its dependencies like AgileTs
-5. If you made your desired changes. Run `yarn run dev-push` to push your updated changes into your local 'npm store' <br />
-   _ProTip:_ To make realtime changes, run `yarn run watch`, which automatically runs `yarn run dev-push` everytime you update a file in a package.
+5. If you made your desired changes. Run `yarn run dev:push` to push your updated changes into your local 'yalc store' <br />
+   _ProTip:_ To make realtime changes, run `yarn run watch`, which automatically runs `yarn run dev:push` everytime you update a file in a package.
+
 
 ## ☄️ Pull Request
 
 ### Your First Pull Request
-
 So you have also decided to merge code back to the upstream by opening a PR.
 You've invested a good chunk of time, and we appreciate it.
 We will do our best to work with you and get the PR looked at.
@@ -110,7 +102,6 @@ We have a list of [beginner friendly issues](https://github.com/agile-ts/agile/l
 and familiar with our contribution process. This is a great place to get started.
 
 ### Proposing a Change
-
 If you would like to request a new feature or enhancement but you only want to give an impulse and don't want to implement it,
 feel free to create an issue that follows the [feature template](https://github.com/agile-ts/agile/issues/new?template=feature_request.md).
 
@@ -119,14 +110,13 @@ but we still recommend creating an [issue](https://github.com/agile-ts/agile/iss
 This is helpful in case we don't accept that specific changes, but want to keep track of the issue.
 
 ### Sending a Pull Request
-
 Keep in mind that small pull requests are much easier to review and more likely to get merged.
 Make sure your PR only solves one problem (issue), otherwise please split it up in multiple PR's for a better overview.
 Commit Messages that follow this [style guide](https://www.conventionalcommits.org/en/v1.0.0/) are very welcome ^^
 
 Please make sure the following is done before submitting a new pull request:
 
-1. Fork [the repository](https://github.com/agile-ts/agile) and create your branch from `develop`
+1. Fork [the repository](https://github.com/agile-ts/agile) and **create your branch starting from the `develop` branch**
 2. Make sure your code is right formatted (`yarn prettier`)
 3. Make sure all Jest tests pass (`yarn test`)
 4. Don't forget the **How has this been Tested?** part!
@@ -135,7 +125,6 @@ All pull requests should be opened against the `develop` branch
 and have a related Issue for better organization!
 
 #### Breaking Changes
-
 When adding a new [breaking change](https://stackoverflow.com/questions/21703216/what-is-a-breaking-change-in-software), follow this template in your pull request:
 
 ```md
@@ -148,21 +137,19 @@ When adding a new [breaking change](https://stackoverflow.com/questions/21703216
 ```
 
 ### What Happens Next?
-
 The core Team of AgileTs is constantly monitoring pull requests and merges them if they seem correct.
 Help us to keep pull requests consistent by following the guidelines above.
 
 
 ## 🌟 Style Guide
-
 [Prettier](https://prettier.io) will catch most styling issues that may exist in your code.
 You can check the status of your code styling by simply running `yarn prettier`.
 
-**Most important:** Look around. Match the style you see used in the rest of the project(formatting, naming, ..).
+**Most important:** Look around. Match the style you see used in the rest of the project (formatting, naming, ..).
 
 
 ## 📄 License
-By contributing to AgileTs, you agree that your contributions will be licensed under its **MIT license**.
+By contributing to AgileTs, you agree that your contributions will be licensed under its **[MIT license](https://github.com/agile-ts/agile/blob/master/LICENSE)**.
 
 
 ## 🎉 Credits

docs/main/Contributing.md

@@ -5,24 +5,25 @@ sidebar_label: Frameworks
 slug: /frameworks
 ---
 
-### 👾 UI-Layers
+:::info
 
-| Framework                        | Supported | Planned |
-|----------------------------------|-----------|---------|
-| [React](https://reactjs.org)     | true      | -       |
-| [Angular](https://angular.io/) | false     | true    |
-| [Vue](https://vuejs.org/)        | false     | true    |
-| [Svelte](https://svelte.dev/)    | false     | false   |
+A quick overview of all frameworks that AgileTs supports or has planned to support.
+
+:::
+
+### 👾 UI-Frameworks
+
+| Framework                                | Supported | Planned |
+|------------------------------------------|-----------|---------|
+| [React](https://reactjs.org)             | ✅        | -       |
+| [React-Native](https://reactnative.dev/) | ✅        | -       |
+| [Angular](https://angular.io/)           | ❌        | ✅      |
+| [Vue](https://vuejs.org/)                | ❌        | ✅      |
+| [Svelte](https://svelte.dev/)            | ❌        | -       |
 
 ### 🤖 SSR-Frameworks
 
 | Framework                           | Supported | Planned |
 |-------------------------------------|-----------|---------|
-| [NextJS](https://nextjs.org/)       | false     | true    |
-| [Gatsby](https://www.gatsbyjs.com/) | false     | true    |
-
-### ❓ Something missing
-
-If you find issues with the documentation or have suggestions on how to improve the documentation or the project in
-general, please [file an issue](https://github.com/agile/agile-ts/issues) for us or join
-our [Discord Community](https://discord.gg/T9GzreAwPH).
+| [NextJs](https://nextjs.org/)       | ❌        | ✅      |
+| [Gatsby](https://www.gatsbyjs.com/) | ❌        | -       |

docs/main/Frameworks.md

@@ -14,9 +14,9 @@ slug: /installation
 ### 🚀 Quick Start
 
 To make your start as easy as possible, we have created some quick guides. You can follow these to get AgileTs up and
-running in your environment without wasting any time. Below you find _Quick Starts_ for already supported frameworks.
+running without wasting any time. Below you find _Quick Start Guides_ for already supported frameworks.
 
-- [React](../quick_start/React.md)
+- [React / React-Native](../quick_start/React.md)
 - Vue (coming soon)
 - Angular (coming soon)
 
@@ -28,4 +28,5 @@ Separate installation guides for single AgileTs packages.
 - [React](../packages/react/Installation.md)
 - [MultiEditor](../packages/multieditor/Installation.md)
 - [Api](../packages/api/Installation.md)
+- [Event](../packages/event/Installation.md)