fixed typos

Author: bennobuilder

docs/packages/core/features/collection/group/Introduction.md

@@ -14,7 +14,7 @@ WIP docs!
 A Group categorizes and preserves the ordering of structured data in a Collection.
 They allow us to cluster together data from a Collection as an array of `primary Keys`.
 A Group doesn't store the actual Items. It only keeps track of the `primary Keys`
-and retrieves the fitting Items from the Collection later when needed.
+and retrieves the fitting Items from the Collection when needed.
 ```ts
 // The actual Collection
 Collection
@@ -96,7 +96,7 @@ Test the Group yourself. It's only one click away. Just select your preferred Fr
 ## 📭 Props
 
 ### `initialItems`
-The first `itemKeys` assigned to the Group.
+The `itemKeys` of the initial Items, the Group represents.
 ```ts {1}
 const MY_GROUP = MY_COLLECTION.createGroup([1, 2, 3]);
 MY_GROUP.value; // Returns '[1, 2, 3]'
@@ -153,16 +153,18 @@ MY_GROUP.exists(); // false
 ```
 Groups are, for example, `placeholder` when AgileTs needs to hold a reference to them,
 although they aren't instantiated yet.
-This might be the case by using `getGroupWithReference()`, 
-where AgileTs returns a `placeholder` Group, if the Group doesn't exist,
-to hold a reference to the not existing Group.
+This might be the case by using `getGroupWithReference()`,
+which returns a `placeholder` Group, if the Group doesn't exist,
+to hold a reference to it.
 ```ts
-useAgile(getGroupWithReference(1));
+const myGroup = useAgile(MY_COLLECTION.getGroupWithReference("group1")); // Causes rerender if Group got created
+const myGroup2 = useAgile(MY_COLLECTION.getGroup("group2")); // Doesn't Causes rerender if Group got created
 ```
-This reference is important to rerender the Component, 
+
+This reference is essential to rerender the Component,
 whenever the Group got instantiated.
 
 
 ## 🟦 Typescript
 
-The `Group Class` is almost 100% typesafe.
+The `Group Class` is almost 100% typesafe.

docs/packages/core/features/collection/selector/Introduction.md

@@ -11,8 +11,7 @@ WIP docs!
 
 :::
 
-A Selector is an extension of the `State Class` and can represent one specific, 
-selected [Item](../Introduction.md#-item) from a Collection.
+A Selector represent one specific, selected [Item](../Introduction.md#-item) from a Collection.
 We instantiate a Selector with the help of an existing [Collection](../Introduction.md).
 By doing so, the Selector is automatically bound to the Collection it was created from
 and has access to its data.
@@ -30,7 +29,7 @@ MY_COLLECTION.createSelector("selectorName", /*to select Item Key*/);
 ```
 It is also possible to select a not existing Item. Then the Selector will hold
 a reference to this Item until it got collected. Be aware that the `value` of the Selector is
-`undefined` during this period of time, since AgileTs doesn't know the desired Item value.
+`undefined` during this period since AgileTs doesn't know the desired Item value.
 ```ts
 MY_SELECTOR.select("notExistingItem");
 MY_SELECTOR.value; // Returns 'undefined' until the Item got added to the Collection
@@ -59,15 +58,15 @@ We might use the Selector, if we want to select the current logged-in User from
 ```ts
 const CURRENT_USER = USERS.select(/* current logged-in userId */);
 ```
-And if the User logs out, and a new User logs in,
-we can simply change the `primaryKey`, the Selector represents. 
+And if the user logs out and a new user logs in,
+we can simply change the `primaryKey`, the Selector represents.
 ```ts
 CURRENT_USER.select(/* another userId */);
 ```
 
 
 ## ⛳️ Sandbox
-Test the Selector yourself, it's only one click away. Just select your preferred Framework below.
+Test the Selector yourself. It's only one click away. Just select your preferred Framework below.
 - [React](https://codesandbox.io/s/agilets-first-state-f12cz)
 - Vue (coming soon)
 - Angular (coming soon)
@@ -76,9 +75,11 @@ Test the Selector yourself, it's only one click away. Just select your preferred
 ## 📭 Props
 
 ### `itemKey`
-The `itemKey` of the Item the Selector represents
-```ts {1}
+The `itemKey` of the Item the Selector represents.
+```ts {2}
+MY_COLLECTION.collect({id: 1, name: 'hans'});
 const MY_SELECTOR = MY_COLLECTION.createSelector(1);
+MY_SELECTOR.value; // Returns '{id: 1, name: 'hans'}'
 ```
 
 ### `config`
@@ -130,21 +131,20 @@ const MY_SELECTOR = App.creaateSelector(1, {
 
 MY_SELECTOR.exists(); // false
 ```
-Selector are, for example, `placeholder` when AgileTs needs to hold a reference to them,
+Selectors are, for example, `placeholder` when AgileTs needs to hold a reference to them,
 although they aren't instantiated yet.
 This might be the case by using `getSelectorWithReference()`,
-where AgileTs returns a `placeholder` Selector, if the Selector doesn't exist,
-to hold a reference to the not existing Selector.
+which returns a `placeholder` Selector, if the Selector doesn't exist,
+to hold a reference to it.
 ```ts
-useAgile(getSelectorWithReference(1));
+const mySeleector = useAgile(MY_COLLECTION.getSelectorWithReference("selector1")); // Causes rerender if Selector got created
+const mySeleector2 = useAgile(MY_COLLECTION.getSelector("selector2")); // Doesn't Causes rerender if Selector got created
 ```
-This reference is important to rerender the Component,
+
+This reference is essential to rerender the Component,
 whenever the Selector got instantiated.
 
 
 ## 🟦 Typescript
 
-The `Selector Class` is almost 100% typesafe.
-
-
-
+The `Selector Class` is almost 100% typesafe.

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

@@ -12,11 +12,13 @@ Here are valuable properties of the `State Class` listed.
 :::
 
 ## `agileInstance`
-Agile Instance to which the State belongs
+
+The [`agileInstance`](../agile-instance/Introduction.md) to which the State belongs.
 ```ts
 MY_STATE.agileInstance(); // Returns a Agile Instance
 ```
-Note that it is stored as a function in the State, to avoid endless deep classes.
+Be aware that the `agileInstance` property is of the type function, 
+to avoid endless deep classes.
 
 
 
@@ -29,10 +31,16 @@ Note that it is stored as a function in the State, to avoid endless deep classes
 
 
 ## `key`
-Current key/name of the State.
-It is used to uniquely identify the State.
-Besides getting the `key`, we can also assign a new `key` with help of this property.
-```ts
+
+The current `key/name` of the State, 
+which is used to uniquely identify the State.
+```ts {2}
+const MY_STATE = App.createState(123, {key: 'jeffKey'});
+MY_STATE.key; // Returns 'jeffKey'
+```
+Besides, accessing the `key`,
+we can also assign a new `key` through this property to the State.
+```ts {1}
 MY_STATE.key = "myCoolState";
 MY_STATE.key; // Returns 'myCoolState'
 ```
@@ -48,13 +56,14 @@ MY_STATE.key; // Returns 'myCoolState'
 
 
 ## `valueType`
-Current type of the value.
+
+Represents the current `type` of the State value.
 ```ts {2}
 MY_STATE.type(String);
 MY_STATE.valueType; // Returns 'string'
 ```
-This property is only useful if you are using Javascript,
-because for Typescript there are better solutions, like generic types.
+This property is thought to help Javascript users to get a basic type safety.
+In Typescript, we recommend using generic types to reach such goal.
 ```ts
 App.createState<string>("see generic types are sick");
 ```
@@ -70,7 +79,8 @@ App.createState<string>("see generic types are sick");
 
 
 ## `isSet`
-If the current State Value differ from the initial State Value.
+
+Is `ture`, if the current State value differs from the initial State value.
 ```ts {2,4}
 const MY_STATE = App.createState("jeff");
 MY_STATE.isSet; // Returns false
@@ -89,18 +99,22 @@ MY_STATE.isSet; // Returns true
 
 
 ## `isPlaceholder`
-If the State is a placeholder.
+
+Determines if the State is a `placeholder`.
 ```ts
 MY_STATE.isPlaceholder; // Returns 'false'
 ```
-For instance, it might be a placeholder if it hasn't been instantiated yet, but AgileTs needs to hold a reference to it.
-This is the case if we bind a maybe not existing Group with the `getGroupWithReference` function to a Component.
-Then AgileTs creates a placeholder Group for us, to ensure that the Component rerender whenever 
-the real Group got created.
+States are, for example, `placeholder` when AgileTs needs to hold a reference to them,
+although they aren't instantiated yet.
+This might be the case by using `getGroupWithReference()`,
+which returns a `placeholder` Group (extension of State), if the Group doesn't exist,
+to hold a reference to it.
 ```ts
 const myGroup = useAgile(MY_COLLECTION.getGroupWithReference("group1")); // Causes rerender if Group got created
 const myGroup2 = useAgile(MY_COLLECTION.getGroup("group2")); // Doesn't Causes rerender if Group got created
 ```
+This reference is essential to rerender the Component,
+whenever the Group got instantiated.
 
 
 
@@ -113,7 +127,9 @@ const myGroup2 = useAgile(MY_COLLECTION.getGroup("group2")); // Doesn't Causes r
 
 
 ## `initialStateValue`
-The first Value which got firstly assigned to the State.
+
+The initial `value` of the State,
+so the `value` that got firstly assigned to it.
 ```ts {4}
 const MY_STATE = App.createState("jeff");
 MY_STATE.set("frank");
@@ -132,11 +148,17 @@ MY_STATE.initialStateValue; // Returns 'jeff'
 
 
 ## `value`
-The current Value of the State.
-Besides getting the `value`, we can also assign a new `value` with help of this property.
-```ts
-MY_STATE.value = "myCoolValue";
-MY_STATE.value; // Returns 'myCoolValue'
+
+The current `value` of the State.
+```ts {2}
+const MY_STATE = App.createState(123);
+MY_STATE.key; // Returns '123'
+```
+Besides, accessing the `value`,
+we can also assign a new `value` through this property to the State.
+```ts {1}
+MY_STATE.value = 9999;
+MY_STATE.value; // Returns '9999'
 ```
 
 
@@ -150,7 +172,8 @@ MY_STATE.value; // Returns 'myCoolValue'
 
 
 ## `previousStateValue`
-The State Value, which has been assigned to the State, before the current active Value.
+
+The State `value` that got assigned previously.
 ```ts
 const MY_STATE = App.createState("hello");
 MY_STATE.set("bye");
@@ -168,18 +191,21 @@ MY_STATE.previousState; // Returns 'hello'
 
 
 ## `nextStateValue`
-The State Value, which will be assigned to the State as next.
-Often this is the current Value, because AgileTs is pretty fast in assigning new Values 🚀.
+
+The State `value` that will be assigned next to the State as current `value`.
+Often it is the current `value`, because AgileTs assigns new `values` pretty fast 🚀.
 ```ts {2}
 MY_STATE.set(1);
 MY_STATE.nextStateValue; // Returns '1'
+MY_STATE.value; // Returns '1'
 ```
-The `nextStateValue` will be used as next value, if we ingest the State without any specific new value into the runtime.
+The `nextStateValue` will be used as the next `value`, 
+if the State got ingested into the `runtime` without any specific new `value`.
 ```ts {2}
-const MY_ARRAY = App.State([1, 2, 3]);
-MY_ARRAY.nextState.push(4);
-MY_ARRAY.ingest(); 
-MY_STATE.value; // Returns '[1, 2, 3, 4]'
+const MY_STATE = App.State('hans');
+MY_STATE.nextStateValue = 'jeff';
+MY_STATE.ingest(); 
+MY_STATE.value; // Returns 'jeff'
 ```
 
 
@@ -193,9 +219,10 @@ MY_STATE.value; // Returns '[1, 2, 3, 4]'
 
 
 ## `isPersisted`
-If the State Value got successfully persisted into an external Storage like the [Local Storage](https://developer.mozilla.org/de/docs/Web/API/Window/localStorage).
+
+If the State `value` is stored into an external Storage like the [Local Storage](https://developer.mozilla.org/de/docs/Web/API/Window/localStorage).
 ```ts {1,3}
 MY_STATE.isPersisted; // Returns 'false'
 MY_STATE.persist(); 
-MY_STATE.isPersisted; // Returns 'true'
+MY_STATE.isPersisted; // Returns 'true' if the persist was successful
 ```