remainder utility docs

docs/documentation/utilities/and-or-&-oneof.md

@@ -6,4 +6,54 @@ description: How to quickly check state truthy or falsy with Markup by Before Se
 layout: document
 ---
 
-## OneOf, And & Or Utility
+## OneOf, And & Or Utilities
+
+Markup comes with additional utilities that work as operators and allows you to check a value from a bunch. This comes in form of `and`, `or`, and `oneOf` utilities.
+
+### oneOf
+
+The `oneOf` works like the [is and isNot](./is-&-isnot.md) utilities but instead of checking a one value, it checks many.
+
+```javascript
+const [status, setStatus] = state('pending')
+
+html`${when(
+    oneOf(status, ['pending', 'idle']),
+    html`<p>loading...</p>`,
+    html`<p>done</p>`
+)}`
+```
+
+It takes the value/state you want to check and an array of values to check against. The utility simply checks the value exactly.
+
+### and
+
+The `and` utility works like the `&&` ([Logical AND](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND)). It will return `true` only if all values are [TRUTHY](https://developer.mozilla.org/en-US/docs/Glossary/Truthy).
+
+```javascript
+html`${when(
+    and(loadingTodos, noTodos),
+    html`<p>loading...</p>`,
+    html`<p>done</p>`
+)}`
+```
+
+You can list any amount of values for the check:
+
+`and(value1, value2, ..., valueN)`
+
+### or
+
+The `or` utility works like the `||` ([Logical OR](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_OR)). It will return `true` only if at least one of the values are [TRUTHY](https://developer.mozilla.org/en-US/docs/Glossary/Truthy).
+
+```javascript
+html`${when(
+    or(loadingTodos, noTodos),
+    html`<p>loading...</p>`,
+    html`<p>done</p>`
+)}`
+```
+
+You can list any amount of values for the check:
+
+`or(value1, value2, ..., valueN)`

docs/documentation/utilities/is-&-isnot.md

@@ -7,3 +7,29 @@ layout: document
 ---
 
 ## Is & IsNot Utilities
+
+The `is` and `isNot` are one of the simplest utilities that allows you to quickly check truthiness about values, especially states.
+
+```javascript
+const [status, setStatus] = state('pending')
+
+html`${when(is(status, 'pending'), html`<p>loading...</p>`, html`<p>done</p>`)}`
+```
+
+Both the `is` and `isNot` take two arguments, a state or some data, and a value or a checker. They will always return a boolean as the result.
+
+### Checker
+
+The more advance way to use the `is` and `isNot` utilities is by providing a function as second argument that is called with the value and must return a boolean.
+
+This checker allows you to perform custom checks instead of the default strict equality.
+
+```javascript
+const [count, setCount] = state(0)
+const [status, setStatus] = state('loading')
+
+const isGreaterThanTen = is(count, (n) => n > 10)
+const isNotPending = isNot(status, (st) => st !== 'pending')
+```
+
+When they consume state as first argument, their result get re-evaluated with every change which allows it to be handy in quick validators.

docs/documentation/utilities/pick.md

@@ -7,3 +7,103 @@ layout: document
 ---
 
 ## Pick Utility
+
+The `pick` utility simplifies working with object states by allowing you to read deep property values while keeping the reactivity of the states.
+
+### Why use `pick` utility?
+
+Let's look at a simple user object state.
+
+```javascript
+const [currentUser] = state(null)
+```
+
+The user data model looks something like this:
+
+```typescript
+interface User {
+    name: string
+    emails: string[]
+    skils: {
+        name: string
+        yearsOfExperience: number
+    }[]
+    type: 'Admin' | 'User' | 'Partner'
+    jobs: {
+        name: string
+        startingDate: Date
+        endDate?: Date
+        company: {
+            name: string
+            website: string
+            logo: string
+        }
+    }[]
+}
+```
+
+Now we can try to display this user information that was set in the state.
+
+```javascript
+html`
+    <h3>${currentUser().name}</h3>
+    <p>email: ${currentUser().email}</h3>
+    <h4>Skills:</h4>
+    <ul>${repeat(currentUser().skills, renderSkil)}</ul>
+    <h4>Jobs:</h4>
+    <ul>${repeat(currentUser().jobs, renderJob)}</ul>
+`.render(document.body)
+```
+
+This displays everything perfectly. However, if this is an object that changes, nothing will re-render because everything was rendered statically. The simple solution is to render everything dynamically using functions.
+
+```javascript
+html`
+    <h3>${() => currentUser().name}</h3>
+    <p>email: ${() => currentUser().email}</h3>
+    <h4>Skills:</h4>
+    <ul>${repeat(() => currentUser().skills, renderSkil)}</ul>
+    <h4>Jobs:</h4>
+    <ul>${repeat(() => currentUser().jobs, renderJob)}</ul>
+`.render(document.body)
+```
+
+Alternatively, you can use `pick` to pick the properties you want to render from a state.
+
+```javascript
+html`
+    <h3>${pick(currentUser, 'name')}</h3>
+    <p>email: ${pick(currentUser, 'email')}</h3>
+    <h4>Skills:</h4>
+    <ul>${repeat(pick(currentUser, 'skills'), renderSkil)}</ul>
+    <h4>Jobs:</h4>
+    <ul>${repeat(pick(currentUser, 'jobs'), renderJob)}</ul>
+`.render(document.body)
+```
+
+The `pick` utility is just a function and can be used outside the templates as well.
+
+```javascript
+console.log(pick(currentUser, 'jobs')())
+```
+
+### Deep values
+
+The best part of using `pick` is its ability to let you pick deep values. For example, let's access our current user third job company website.
+
+```javascript
+html`${pick(currentUser, 'jobs.2.company.website')}`
+```
+
+As you can see, you can use [dot notation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors#dot_notation) to access properties deeply and everything will re-render when these values change.
+
+### Undefined values
+
+The `pick` utility also offers protection against undefined values by preventing things from throwing errors when trying to read a property that does not exist.
+
+The `pick` helper will catch the error and simply returns `undefined` that can be rendered or read by your code.
+
+```javascript
+html`${pick(currentUser, 'jobs.2.company.url')}`.render(document.body)
+// renders "undefined"
+```