Merge pull request #22 from agile-ts/develop

Develop

Author: bennobuilder

docs/packages/core/Installation.md

@@ -9,4 +9,7 @@ The `core` Package can be installed over [npm](https://www.npmjs.com/).
 
 ```bash npm2yarn
 npm install @agile-ts/core 
-```
+```
+If you prefer following a Quick Start 🚀
+- [React](../../quick_start/React.md)
+- [Vue](../../quick_start/Vue.md)

docs/packages/core/Introduction.md

@@ -63,13 +63,16 @@ A Computed is an extension of the State Class, it does auto compute its value de
 ```
 
 ### 🚌 [Event](./features/event/Introduction.md)
+Events are handy for emitting UI updates and passing data with them.
 ```ts
 const MY_EVENT = App.createEvent();
-MY_EVENT.on(() => {console.log("hello there")}); // Print 'hello there' if Event gets triggered
-MY_EVENT.trigger(); // Trigger Event
+MY_EVENT.on((data) => {console.log("hello there " + data.name)}); // Print 'hello there jeff' if Event gets triggered
+MY_EVENT.trigger({name: "jeff"}); // Trigger Event
 ```
 
 ## 🚀 Quick Links
+- [Installation](./Installation.md)
+- [Agile-Instance](./features/agile-instance/Introduction.md)
 - [State](./features/state/Introduction.md)
 - [Collection](./features/collection/Introduction.md)
 - [Computed](./features/computed/Introduction.md)

docs/packages/core/features/agile-instance/Properties.md

@@ -13,8 +13,10 @@ Here useful properties of the `Agile Instance` are described.
 
 ## `logger`
 
-The logger gets used to Log warnings, errors, .. in AgileTs, but of course we can
-use it in our Application too.
+The `logger` is a static property of the `Agile Class`.
+It is an Instance of a handy Class that gets used to Log something in the console, like warnings, errors.
+Feel free to use the Agile Logger in your Application for logging too,
+it is pretty handy.
 ```ts
 Agile.logger.warn("This is a Warning");
 Agile.logger.log("This is a normal Log");

docs/packages/core/features/collection/Properties.md

@@ -5,8 +5,113 @@ sidebar_label: Properties
 slug: /core/collection/properties
 ---
 
-:::warning
+:::info
 
-WIP docs!
+Here useful properties of the `State` are listed.
+
+:::
+
+## `agileInstance`
+Returns the Agile Instance to which the Collection belongs.
+Be aware that it gets in function shape returned.
+```ts
+MY_STATE.agileInstance(); // Returns a Agile Instance
+```
+The reason for that is to avoid endless deep classes.
+
+## `key`
+Returns the current Key/Name of the Collection.
+A Key is used to uniquely identify the Collection. 
+Besides getting the key, we can also assign a new Key with this property.
+```ts
+MY_COLLECTION.key = "myCoolCollection";
+MY_COLLECTION.key; // Returns 'myCoolCollection'
+```
+
+## `size`
+Returns the current size of the Collection, 
+so how many Items are stored in the Collection 
+to this point in time.
+```ts {3}
+MY_COLLECTION.collect({id: 1, name: "jeff"});
+MY_COLLECTION.collect({id: 5, name: "frank"});
+MY_COLLECTION.size; // Returns 2
+```
+
+## `data`
+Here all Items of the Collection are stored.
+```ts {3}
+MY_COLLECTION.collect({id: 1, name: "jeff"});
+MY_COLLECTION.collect({id: 5, name: "frank"});
+MY_COLLECTION.data; // Returns (see below)
+// {
+//   1: Item({id: 1, name: "jeff"}),
+//   5: Item({id: 5, name: "frank"})
+// }
+```
+We recommend using the `getAllItems` function to get assess to all Items,
+```ts {1}
+MY_COLLECTION.getAllItems(); // Returns (see below)
+// [
+//   Item({id: 1, name: "jeff"}),
+//   Item({id: 5, name: "frank"})
+// ]
+```
+or the `default Group`,
+```ts {1}
+MY_COLLECTION.getGroup(MY_COLLECTION.config.defaultGroupKey).items; // Returns (see below)
+// [
+//   Item({id: 1, name: "jeff"}),
+//   Item({id: 5, name: "frank"})
+// ]
+```
+because the `data` property should only be used internal!
+
+## `isPersisted`
+If the Collection Value got persisted into a Storage like the Local Storage.
+```ts {1,3}
+MY_COLLECTION.isPersisted; // Returns false
+MY_COLLECTION.persist();
+MY_COLLECTION.isPersisted; // Returns true (if the persisting was successfull)
+```
+
+## `groups`
+Here all [Groups](./group/Introduction.md) of the Collection are stored.
+```ts {3}
+MY_COLLECTION.createGroup("group1", [1, 2, 3]);
+MY_COLLECTION.createGroup("group2", [1, 7, 4]);
+MY_COLLECTION.groups; // Returns (see below)
+// {
+//   group1: Group([1, 2, 3]),
+//   group2: Group([1, 7, 4])
+// }
+```
+If you want to get a specific Group, please use
+```ts
+MY_COLLECTION.getGroup("group1");
+```
+instead of 
+```ts
+MY_COLLECTION.groups["group1"]
+```
+
+## `selectors`
+Here all [Selectors](./selector/Introduction.md) of the Collection are stored.
+```ts {3}
+MY_COLLECTION.createGroup("selector1", 1);
+MY_COLLECTION.createGroup("selector2", 7);
+MY_COLLECTION.groups; // Returns (see below)
+// {
+//   selector1: Selector(1),
+//   selector2: Selector(7)
+// }
+```
+If you want to get a specific Selector, please use
+```ts
+MY_COLLECTION.getSelector("selector1");
+```
+instead of
+```ts
+MY_COLLECTION.selectors["selector1"]
+```
 
-:::

docs/packages/core/features/state/Introduction.md

@@ -37,7 +37,7 @@ MY_STATE.undo().set("Hello Hell").watch(() => {}).reset().invert().persist().typ
 ```
 
 ### 🔨 Usage
-We might use a State, if we want to remember the theme of our application or the logged in userId.
+We might use a State, if we want to remember the theme of our application, or the userId of the logged-in User.
 ```ts
 const THEME_TYPE = App.createState("dark");
 // <- toggled theme switch