@appsemble/utils 0.25.2 → 0.26.0

package/reference-schemas/remappers/arrays.js

@@ -1,3 +1,4 @@
+import { schemaExample } from '../../examples.js';
 export const arrayRemappers = {
     'array.map': {
         $ref: '#/components/schemas/RemapperDefinition',
@@ -9,36 +10,7 @@ Output can be an empty array if the supplied data isn’t an array.
 For example, if you want to sort through a list of people and only get their occupations you can do
 the following:
 
-Input:
-
-\`\`\`json
-[
-  {
-    "name": "Peter",
-    "occupation": "Delivery driver"
-  },
-  {
-    "name": "Otto",
-    "occupation": "Scientist"
-  },
-  {
-    "name": "Harry",
-    "occupation": "CEO"
-  }
-]
-\`\`\`
-
-\`\`\`yaml
-array.map:
-  object.omit:
-    - name
-\`\`\`
-
-Result:
-
-\`\`\`json
-[{ "occupation": "Delivery driver" }, { "occupation": "Scientist" }, { "occupation": "CEO" }]
-\`\`\`
+${schemaExample('array.map', { input: 'pretty' })}
 
 Another great use for \`array.map\` is to combine it with the \`if\` remapper and sort your arrays on
 specific values.
@@ -46,30 +18,7 @@ specific values.
 Using the same input data from the previous example, look at how you can change the code to get
 people from a specific occupation:
 
-\`\`\`yaml
-- array.map:
-    if:
-      condition: { equals: [{ prop: occupation }, Scientist] }
-      then:
-        object.from:
-          name:
-            prop: name
-          occupation:
-            prop: occupation
-      else: null
-- null.strip: null
-\`\`\`
-
-Result:
-
-\`\`\`json
-[
-  {
-    "name": "Otto",
-    "occupation": "Scientist"
-  }
-]
-\`\`\`
+${schemaExample('array.map.1', { input: 'pretty', exclude: ['input'] })}
 
 Because \`array.map\` returns an array, every item has to return something. This is why we have to
 return the full object with the data we want in the \`then\` section. It’s also why we return \`null\`.
@@ -88,21 +37,7 @@ If the value Remapper results in undefined or null, the entire entry is used for
 
 If the input is not an array, the input is returned without any modifications.
 
-Input:
-
-\`\`\`json
-[1, 1, 2, 3]
-\`\`\`
-
-\`\`\`yaml
-array.unique: null
-\`\`\`
-
-Result:
-
-\`\`\`json
-[1, 2, 3]
-\`\`\`
+${schemaExample('array.unique')}
 
 You can also check for more complex values in arrays. The remapper accepts remappers as well, so you
 can also use entire objects to check for unique values.
@@ -175,22 +110,7 @@ Returns a single object or value from an array based on the given condition.
 
 For example:
 
-Input:
-
-\`\`\`json
-[{ name: "Craig" }, { name: "Joey" }, { name: "Stuart" }]
-\`\`\`
-\`\`\`yaml
-array.find:
-  equals: [{ prop: "name" }, "Craig" ]
-\`\`\`
-
-Result:
-
-\`\`\`json
-{ name: "Craig" }
-\`\`\`
-
+${schemaExample('array.find')}
 `,
     },
     'array.from': {
@@ -204,16 +124,7 @@ values.
 
 For example:
 
-\`\`\`yaml
-array.from:
-  - Peter
-  - Otto
-  - Harry
-\`\`\`
-
-\`\`\`json
-["Peter", "Otto", "Harry"]
-\`\`\`
+${schemaExample('array.from', { exclude: ['input'] })}
 
 This remapper can also be used to convert given data into an array.
 
@@ -253,35 +164,7 @@ Append new values to the end of an array. If the input is not an array an empty
 
 Using the array from the previous example, we can add a new object on top of it using this remapper:
 
-\`\`\`yaml
-array.append:
-  - object.from:
-      name: James
-      occupation: News reporter
-\`\`\`
-
-Result:
-
-\`\`\`json
-[
-  {
-    "name": "Peter",
-    "occupation": "Delivery driver"
-  },
-  {
-    "name": "Otto",
-    "occupation": "Scientist"
-  },
-  {
-    "name": "Harry",
-    "occupation": "CEO"
-  },
-  {
-    "name": "James",
-    "occupation": "News reporter"
-  }
-]
-\`\`\`
+${schemaExample('array.append', { result: 'pretty', exclude: ['input'] })}
 
 Extra example:
 
@@ -325,29 +208,7 @@ Accepts an array of static or remapper values.
 With the previous example we added a new person to the list of people, so now we can remove that
 person. We already know the index of this person in the array is \`3\`, so it’s easy:
 
-\`\`\`yaml
-array.omit:
-  - 3
-\`\`\`
-
-Result:
-
-\`\`\`json
-[
-  {
-    "name": "Peter",
-    "occupation": "Delivery driver"
-  },
-  {
-    "name": "Otto",
-    "occupation": "Scientist"
-  },
-  {
-    "name": "Harry",
-    "occupation": "CEO"
-  }
-]
-\`\`\`
+${schemaExample('array.omit', { result: 'pretty', exclude: ['input'] })}
 
 However, usually we don’t know the exact index of the item we want to delete. Because the remapper
 accepts remappers as input we can get the desired item’s ID from another source as well. Take the

package/reference-schemas/remappers/conditionals.js

@@ -1,3 +1,4 @@
+import { schemaExample } from '../../examples.js';
 export const conditionalRemappers = {
     if: {
         type: 'object',
@@ -7,24 +8,9 @@ Returns value of \`then\` if condition is truthy, otherwise it returns the value
 
 For example:
 
-\`\`\`yaml
-if:
-  condition: { equals: [{ prop: inputValue }, 4] }
-  then:
-    static: You guessed right!
-  else:
-    static: You guessed wrong!
-\`\`\`
-
-If the \`inputValue\` is \`4\`, it goes to the \`then\` remapper and returns:
-\`\`\`
-You guessed right!
-\`\`\`
-
-If the \`inputValue\` is something other than \`4\`, it goes to the \`else\` remapper and returns:
-\`\`\`
-You guessed wrong!
-\`\`\`
+${schemaExample('if.then')}
+
+${schemaExample('if.else', { exclude: ['remapper'] })}
 `,
         additionalProperties: false,
         required: ['condition', 'then', 'else'],
@@ -55,12 +41,7 @@ Returns \`true\` if all entries are equal, otherwise \`false\`.
 In the following example, if the \`inputValue\` and \`expectedValue\` are of the same value, the
 condition will return \`true\` and the \`then\` remapper will fire.
 
-\`\`\`yaml
-condition:
-  equals:
-    - prop: inputValue
-    - prop: expectedValue
-\`\`\`
+${schemaExample('equals')}
 `,
     },
     gt: {
@@ -73,12 +54,7 @@ Returns \`true\` if the first entry is greater than the second entry.
 
 For example, if \`stock\` is more than 5 here, it returns \`true\`.
 
-\`\`\`yaml
-condition:
-  gt:
-    - prop: stock
-    - 5
-\`\`\`
+${schemaExample('gt')}
 `,
         minItems: 2,
         maxItems: 2,
@@ -96,12 +72,7 @@ Returns \`true\` if the first entry is lesser than the second entry.
 
 For example, if \`stock\` is less than 5 here, it returns \`true\`.
 
-\`\`\`yaml
-condition:
-  lt:
-    - prop: stock
-    - 5
-\`\`\`
+${schemaExample('gt')}
 `,
         minItems: 2,
         maxItems: 2,
@@ -122,12 +93,7 @@ If only one remapper or none is passed, the remapper value gets computed and the
 
 If \`number\` in the following example is something other than 4, the condition returns \`true\`.
 
-\`\`\`yaml
-condition:
-  not:
-    - prop: number
-    - 4
-\`\`\`
+${schemaExample('not')}
 `,
     },
     match: {
@@ -139,17 +105,7 @@ Returns the value of the first case where the condition equals true, otherwise r
 In the following example, let's say the \`Gem\` is a "Ruby". The match remapper then returns
 \`value: 75\`.
 
-\`\`\`yaml
-match:
-  - case: { equals: [{ prop: Gem }, Diamond] }
-    value: 100
-  - case: { equals: [{ prop: Gem }, Ruby] }
-    value: 75
-  - case: { equals: [{ prop: Gem }, Gold] }
-    value: 50
-  - case: { equals: [{ prop: Gem }, Sapphire] }
-    value: 25
-\`\`\`
+${schemaExample('match')}
 `,
         items: {
             type: 'object',

package/reference-schemas/remappers/data.js

@@ -1,3 +1,4 @@
+import { schemaExample } from '../../examples.js';
 export const dataRemappers = {
     array: {
         enum: ['index', 'length'],
@@ -7,42 +8,12 @@ Returns nothing when not in the context of \`array.map’s\`.
 
 For example:
 
-Input:
-\`\`\`json
-["a", "b", "c"]
-\`\`\`
-
-This remapper definition maps through the input array and creates an object with the length of the
-array and the current index of the loop:
-\`\`\`yaml
-array.map:
-  object.from:
-    length: { array: length }
-    index: { array: index }
-\`\`\`
-
-Result:
-\`\`\`json
-[
-  {
-    "index": 0,
-    "length": 3
-  },
-  {
-    "index": 1,
-    "length": 3
-  },
-  {
-    "index": 2,
-    "length": 3
-  }
-]
-\`\`\`
+${schemaExample('array', { result: 'pretty' })}
 `,
     },
     app: {
         enum: ['id', 'locale', 'url'],
-        description: `Gives actual information about the current app. Using this remapper you will have access to the
+        description: `Gives information about the current app. Using this remapper you can get access to the
 following information:
 
 - \`id\`: App ID
@@ -51,13 +22,7 @@ following information:
 
 Example:
 
-\`\`\`json
-{
-  "id": 11,
-  "locale": "en",
-  "url": "https://example-app.examplecompany.appsemble.app"
-}
-\`\`\`
+${schemaExample('app.url', { result: 'pretty', exclude: ['input'] })}
 `,
     },
     context: {
@@ -241,22 +206,7 @@ The result of the final page’s log would then be:
         ],
         description: `Gets the chosen property from an object.
 
-\`\`\`json
-{
-  "name": "John",
-  "age": 52
-}
-\`\`\`
-
-\`\`\`yaml
-prop: name
-\`\`\`
-
-Result:
-
-\`\`\`json
-"John"
-\`\`\`
+${schemaExample('prop')}
 `,
     },
     root: {
@@ -296,15 +246,7 @@ Result:
     static: {
         description: `Create a static value
 
-\`\`\`yaml
-static: Hello!
-\`\`\`
-
-Returns the following string:
-
-\`\`\`
-Hello!
-\`\`\`
+${schemaExample('static', { exclude: ['input'] })}
 `,
     },
     translate: {
@@ -370,10 +312,10 @@ Example:
 > **Note:** For this remapper to work, the user that activated the remapper has to be logged in to
 > the app
 
-Provides some fields of the appMember object. 
+Provides some fields of the appMember object.
 
 - \`userId\`: The id of the user to which the appMember object belongs.
-- \`memberId\`: The id of the appMember object itself. This value should be used when fetching resources created by the current user. 
+- \`memberId\`: The id of the appMember object itself. This value should be used when fetching resources created by the current user.
 - \`primary_email\`: User’s **primary** email address.
 - \`name\`: The user’s name.
 - \`role\`: User's role in the context of the app.

package/reference-schemas/remappers/dates.js

@@ -1,3 +1,4 @@
+import { schemaExample } from '../../examples.js';
 export const dateRemappers = {
     'date.add': {
         type: 'string',
@@ -21,21 +22,7 @@ Full list of supported unit types:
 
 For example:
 
-Date now:
-\`\`\`json
-2023-06-30T14:50:19.601Z
-\`\`\`
-
-Remapper definition:
-\`\`\`yaml
-[{ date.now: null }, { date.add: 1w } , { date.format: null }]
-\`\`\`
-
-Result:
-\`\`\`json
-2023-07-07T14:50:19.601Z
-\`\`\`
-
+${schemaExample('date.add')}
 `,
     },
     'date.format': {
@@ -49,22 +36,9 @@ In an app definition, it’s best to use this when you want to display a date in
 For example, if your app has a form with a Datepicker field the incoming data will be formatted
 as a simple date format. If you want to format it to the RFC3339 format, you can use this remapper.
 
-When you submit a form with a DateField, the internal output looks like this:
-
-\`\`\`js
-2023-07-03
-\`\`\`
-
-You can then format the date so that it uses the RFC3339 format.
-
-\`\`\`yaml
-date.format: null
-\`\`\`
+When you submit a form with a DateField, the internal output looks like the following. You can then format the date so that it uses the RFC3339 format.
 
-Result:
-\`\`\`js
-"2023-07-02T22:00:00.000Z"
-\`\`\`
+${schemaExample('date.format')}
 
 The remapper can also be used to format a date or timestamp using a custom format.
 
@@ -87,14 +61,8 @@ Result:
     'date.now': {
         enum: [null],
         description: `Returns the current date as a JavaScript Date object.
-\`\`\`yaml
-date.now: null
-\`\`\`
 
-Result:
-\`\`\`js
-"Mon Jul 03 2023 11:47:18 GMT+0200 (Midden-Europese zomertijd)"
-\`\`\`
+${schemaExample('date.now', { exclude: ['input'] })}
 `,
     },
     'date.parse': {
@@ -102,11 +70,8 @@ Result:
         description: `Convert a string to a date using a given format.
 
 For example:
-\`\`\`yaml
-- static: 02/11/2014     # The date string to parse
-- date.parse: MM/dd/yyyy # The given format to parse the date with
-            # => Tue Feb 11 2014 00:00:00
-\`\`\`
+
+${schemaExample('date.parse', { exclude: ['input'] })}
 
 See [date-fns](https://date-fns.org/v2.29.3/docs/parse) for the supported formats.
 

package/reference-schemas/remappers/objects.js

@@ -1,3 +1,4 @@
+import { schemaExample } from '../../examples.js';
 export const objectRemappers = {
     'object.assign': {
         additionalProperties: {
@@ -9,27 +10,7 @@ Let’s say you have an existing object that you want to add an additional value
 you can use the \`object.assign\` remapper. The remapper takes an existing object and allows the user
 to assign their own value on top of that.
 
-Input:
-
-\`\`\`json
-{
-  "title": "Weekly fishing 21"
-}
-\`\`\`
-
-\`\`\`yaml
-object.assign:
-  author: John Doe
-\`\`\`
-
-Result:
-
-\`\`\`json
-{
-  "title": "Weekly fishing 21",
-  "author": "John Doe"
-}
-\`\`\`
+${schemaExample('object.assign')}
 
 `,
     },
@@ -45,18 +26,7 @@ remappers together to make complex objects.
 
 As a base, the remapper looks like this:
 
-\`\`\`yaml
-object.from:
-  username: Chris Taub
-  email: example@hotmail.com
-\`\`\`
-
-\`\`\`json
-{
-  "username": "Chris Taub",
-  "email": "example@hotmail.com"
-}
-\`\`\`
+${schemaExample('object.from', { exclude: ['input'] })}
 
 Most of the time you won’t create an object just to store one value. Luckily, this is where the
 chaining of remappers comes in. You can create an object that contains an \`object.from\` remapper
@@ -118,39 +88,7 @@ In contrary to the previous remapper, what if you have an object from which you
 value? Then you can use \`object.omit\`. The remapper can remove properties from an existing object
 based on the given object keys. This includes nested properties.
 
-Input:
-
-\`\`\`json
-{
-  "title": "Weekly fishing 21",
-  "author": "John Doe",
-  "content": {
-    "introduction": "This is the introduction for the new weekly fishing issue",
-    "paragraph1": "...",
-    "interview": "..."
-  }
-}
-\`\`\`
-
-\`\`\`yaml
-object.omit:
-  - author
-  - - content
-    - interview
-\`\`\`
-
-Result:
-
-\`\`\`json
-{
-  "title": "Weekly fishing 21",
-  "content": {
-    "introduction": "This is the introduction for the new weekly fishing issue",
-    "paragraph1": "..."
-  }
-}
-\`\`\`
-
+${schemaExample('object.omit', { input: 'pretty', result: 'pretty' })}
 `,
     },
 };

package/reference-schemas/remappers/strings.js

@@ -1,17 +1,10 @@
+import { schemaExample } from '../../examples.js';
 export const stringRemappers = {
     'string.case': {
         enum: ['lower', 'upper'],
         description: `Convert a string to upper or lower case.
-\`\`\`yaml
-string.case: upper
-\`\`\`
-
-Result:
-
-\`\`\`json
-"PATRICK"
-\`\`\`
 
+${schemaExample('string.case')}
 `,
     },
     'string.format': {
@@ -36,18 +29,7 @@ Result:
         description: `Format a string using remapped input variables.
 Useful for replacing static text with generated values.
 
-\`\`\`yaml
-string.format:
-  template: 'You have won €{lotteryAmount} in the lottery!!'
-  values:
-    lotteryAmount: { prop: lotteryPrize }
-\`\`\`
-
-Result:
-
-\`\`\`json
-"You have won €5000 in the lottery!!"
-\`\`\`
+${schemaExample('string.format')}
 
 > **Tip:** Considering this can be inserted anywhere a remapper is accepted. You can also use this
 > to choose specific URL’s more accurately.
@@ -64,17 +46,7 @@ Result:
         description: `
 Uses RegEx to find a value in a string and replace it with a given value.
 
-\`\`\`yaml
-# Input: Eindhoven is the best city in the Netherlands
-string.replace:
-  (beszt*)\\w+: cleanest
-\`\`\`
-
-Result:
-
-\`\`\`json
-"Eindhoven is the cleanest city in the Netherlands"
-\`\`\`
+${schemaExample('string.replace')}
 `,
     },
 };

package/reference-schemas/remappers/unsorted.js

@@ -162,8 +162,7 @@ The options represent the level of logging that will show in the console.
   - \`appUrl\`: Base URL of the application,
   - \`pageData\`: Current page data of a FlowPage (See [page remapper](./data#page)),
   - \`userInfo\`: User's information if they are logged in (See [user remapper](./data#user)),
-  - \`context\`:
-    - \`history\`: Complete list of this remapper’s history (See [history remapper](./history))
+  - \`context\`: Internal context
   - \`history\`: Complete list of this remapper’s history (See [history remapper](./history))
   - \`locale\`: The user’s locale,
   - \`stepRef\`: In a loop page, gives the properties from the loop’s current data index (See [step remapper](./data#step))
@@ -198,28 +197,7 @@ For example:
       "locale": "en",
       "zoneinfo": "Europe/Amsterdam"
     },
-    "context": {
-      "history": [
-        [
-          0,
-          4,
-          null,
-          null,
-          "Peter",
-          0.4234,
-          null
-        ],
-        {
-          "name": "Peter",
-          "age": 49
-        },
-        {
-          "name": "Peter",
-          "age": 49,
-          "birthday": "07-08-2023"
-        }
-      ]
-    },
+    "context": {},
     "history": [
       [
         0,