@lowdefy/docs 3.23.0-alpha.0 → 4.0.0-alpha.4

package/CHANGELOG.md

@@ -3,6 +3,77 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [4.0.0-alpha.4](https://github.com/lowdefy/lowdefy/compare/v4.0.0-alpha.3...v4.0.0-alpha.4) (2021-11-25)
+
+**Note:** Version bump only for package @lowdefy/docs
+
+
+
+
+
+# [4.0.0-alpha.3](https://github.com/lowdefy/lowdefy/compare/v4.0.0-alpha.2...v4.0.0-alpha.3) (2021-11-25)
+
+**Note:** Version bump only for package @lowdefy/docs
+
+
+
+
+
+# [4.0.0-alpha.2](https://github.com/lowdefy/lowdefy/compare/v4.0.0-alpha.1...v4.0.0-alpha.2) (2021-11-25)
+
+**Note:** Version bump only for package @lowdefy/docs
+
+
+
+
+
+# [4.0.0-alpha.1](https://github.com/lowdefy/lowdefy/compare/v3.23.1...v4.0.0-alpha.1) (2021-11-25)
+
+
+### Bug Fixes
+
+* **docs:** Document that _index operator is client side only. ([72c8228](https://github.com/lowdefy/lowdefy/commit/72c82282a3e6bcd3eb2eeaf3c09b395a0f152405))
+* Replace all front end testing with @testing-library/react, jest and other updates. ([22ec295](https://github.com/lowdefy/lowdefy/commit/22ec2954047853096aabcddba7a2c509342f95f2))
+
+
+### Features
+
+* **blocksAntd:** Add HolderOutlined icon. ([c39c387](https://github.com/lowdefy/lowdefy/commit/c39c38752e4a681a1146e44b6638ff8486ff9da9))
+* **blocksAntd:** Convert Alert to container and add action content area. ([49c6baa](https://github.com/lowdefy/lowdefy/commit/49c6baabeedd4ed5aaaf14f1d7b4ae5d2545d6cf))
+* **blocksAntd:** Drawer: Add extra content area and contentWrapperStyle property. ([9273fac](https://github.com/lowdefy/lowdefy/commit/9273facac41e5ee6341c80e698f4367b7d8686f3))
+* **blocks:** Convert all context category blocks to container. ([6bc03c8](https://github.com/lowdefy/lowdefy/commit/6bc03c86b80a3506c2b85076626ae15a401bcdfc))
+* **blockTools:** Update to @emotion/css, optimize makeCssClass standarise jest settings. ([947defa](https://github.com/lowdefy/lowdefy/commit/947defa3d8934e061933b1e218b79f2f97456054))
+* Replace server side state with payload and _payload operator. ([1f928d9](https://github.com/lowdefy/lowdefy/commit/1f928d93db4cbe886d322a1a3998a817d769485f))
+
+
+### BREAKING CHANGES
+
+* The _event, _global, _input, _state, and _url_query operators are no longer evaluated in connections or requests.
+
+
+
+
+
+## [3.23.1](https://github.com/lowdefy/lowdefy/compare/v3.23.0...v3.23.1) (2021-11-20)
+
+**Note:** Version bump only for package @lowdefy/docs
+
+
+
+
+
+# [3.23.0](https://github.com/lowdefy/lowdefy/compare/v3.23.0-alpha.0...v3.23.0) (2021-11-19)
+
+
+### Bug Fixes
+
+* **docs:** Fix _ref resolver function example. ([0903094](https://github.com/lowdefy/lowdefy/commit/0903094ce531f4d8ab7849deb91ab3d6b7e5fd82))
+* **docs:** Included onSearch event example in MultipleSelector and Selector docs. ([0e53cb8](https://github.com/lowdefy/lowdefy/commit/0e53cb8f93ed49e0122ac038113d7378f67501f7))
+
+
+
+
+
 # [3.23.0-alpha.0](https://github.com/lowdefy/lowdefy/compare/v3.22.0...v3.23.0-alpha.0) (2021-11-09)
 
 

package/actions/JsAction.yaml

@@ -66,7 +66,7 @@ _ref:
       ```yaml
       # lowdefy.yaml
       name: intercom-example
-      lowdefy: '3.22.0'
+      lowdefy: '3.23.1'
       app:
         html:
           appendBody: |
@@ -137,7 +137,7 @@ _ref:
       ```yaml
       # file: lowdefy.yaml
       name: text-highlight-example
-      lowdefy: '3.22.0'
+      lowdefy: '3.23.1'
       app:
         html:
           # Load the custom modules into the index.html head tag.

package/blocks/all_icons.yaml

@@ -409,6 +409,7 @@
 - { label: 'HighlightOutlined', value: 'HighlightOutlined' }
 - { label: 'HighlightTwoTone', value: 'HighlightTwoTone' }
 - { label: 'HistoryOutlined', value: 'HistoryOutlined' }
+- { label: 'HolderOutlined', value: 'HolderOutlined' }
 - { label: 'HomeFilled', value: 'HomeFilled' }
 - { label: 'HomeOutlined', value: 'HomeOutlined' }
 - { label: 'HomeTwoTone', value: 'HomeTwoTone' }

package/blocks/{display → container}/Alert.yaml

@@ -16,11 +16,12 @@ _ref:
   path: templates/blocks/template.yaml.njk
   vars:
     block_type: Alert
-    category: display
+    category: container
     schema: ../blocks/blocksAntd/src/blocks/Alert/Alert.json
     filePath: blocks/display/Alert.yaml
     init_property_values:
       message: Alerts help to highlight important information.
     description_content: |
       Alert is used to render user feedback messages in a Alert styled frame.
-
+    areas:
+      - action

package/blocks/{display → container}/Descriptions.yaml

@@ -16,7 +16,7 @@ _ref:
   path: templates/blocks/template.yaml.njk
   vars:
     block_type: Descriptions
-    category: display
+    category: container
     schema: ../blocks/blocksAntd/src/blocks/Descriptions/Descriptions.json
     filePath: blocks/display/Descriptions.yaml
     init_state_values:
@@ -47,3 +47,5 @@ _ref:
               Location: South Africa
               Temperature: 22
               Date: 2021-02-02
+    areas:
+      - extra

package/blocks/container/Drawer.yaml

@@ -26,6 +26,7 @@ _ref:
       > To open the drawer, invoke a drawer method.
     areas:
       - content
+      - extra
     methods:
       - name: toggleOpen
         onClick:

package/blocks/{context → container}/PageHCF.yaml

@@ -16,9 +16,9 @@ _ref:
   path: templates/blocks/template.yaml.njk
   vars:
     block_type: PageHCF
-    category: context
+    category: container
     schema: ../blocks/blocksAntd/src/blocks/PageHCF/PageHCF.json
-    filePath: blocks/context/PageHCF.yaml
+    filePath: blocks/container/PageHCF.yaml
     description_content: |
       Page HCF provides a minimal layout structure for a page container with a header, content and footer area.
 

package/blocks/{context → container}/PageHCSF.yaml

@@ -16,9 +16,9 @@ _ref:
   path: templates/blocks/template.yaml.njk
   vars:
     block_type: PageHCSF
-    category: context
+    category: container
     schema: ../blocks/blocksAntd/src/blocks/PageHCSF/PageHCSF.json
-    filePath: blocks/context/PageHCSF.yaml
+    filePath: blocks/container/PageHCSF.yaml
     description_content: |
       Page HCSF provides a minimal layout structure for a page container with a header, content, sider and footer arrangement.
 

package/blocks/{context → container}/PageHSCF.yaml

@@ -16,9 +16,9 @@ _ref:
   path: templates/blocks/template.yaml.njk
   vars:
     block_type: PageHSCF
-    category: context
+    category: container
     schema: ../blocks/blocksAntd/src/blocks/PageHSCF/PageHSCF.json
-    filePath: blocks/context/PageHSCF.yaml
+    filePath: blocks/container/PageHSCF.yaml
     description_content: |
       Page HSCF provides a minimal layout structure for a page container with a header, sider, content, and footer arrangement.
 

package/blocks/{context → container}/PageHeaderMenu.yaml

@@ -16,9 +16,9 @@ _ref:
   path: templates/blocks/template.yaml.njk
   vars:
     block_type: PageHeaderMenu
-    category: context
+    category: container
     schema: ../blocks/blocksAntd/src/blocks/PageHeaderMenu/PageHeaderMenu.json
-    filePath: blocks/context/PageHeaderMenu.yaml
+    filePath: blocks/container/PageHeaderMenu.yaml
     description_content: |
       The Page Header Menu block provides a structured layout for a page with a header containing a menu, content and footer area.
     init_state_values:

package/blocks/{context → container}/PageSHCF.yaml

@@ -16,9 +16,9 @@ _ref:
   path: templates/blocks/template.yaml.njk
   vars:
     block_type: PageSHCF
-    category: context
+    category: container
     schema: ../blocks/blocksAntd/src/blocks/PageSHCF/PageSHCF.json
-    filePath: blocks/context/PageSHCF.yaml
+    filePath: blocks/container/PageSHCF.yaml
     description_content: |
       Page SHCF provides a minimal layout structure for a page container with a sider, header, content, and footer arrangement.
 

package/blocks/{context → container}/PageSiderMenu.yaml

@@ -16,9 +16,9 @@ _ref:
   path: templates/blocks/template.yaml.njk
   vars:
     block_type: PageSiderMenu
-    category: context
+    category: container
     schema: ../blocks/blocksAntd/src/blocks/PageSiderMenu/PageSiderMenu.json
-    filePath: blocks/context/PageSiderMenu.yaml
+    filePath: blocks/container/PageSiderMenu.yaml
     description_content: |
       The Page Sider Menu block provides a structured layout for a page with a header, sider including menu, content and footer area.
     init_state_values:

package/blocks/display/Img.yaml

@@ -36,5 +36,5 @@ _ref:
           type: Img
           properties:
             src: https://docs.lowdefy.com/public/logo-light-theme.png
-            srcset: https://docs.lowdefy.com/public/logo-square-light-theme.png 40w, https://docs.lowdefy.com/public/logo-light-theme.png 577w
+            srcSet: https://docs.lowdefy.com/public/logo-square-light-theme.png 40w, https://docs.lowdefy.com/public/logo-light-theme.png 577w
             sizes: '(max-width: 576px) 40px, 577px'

package/blocks/input/MultipleSelector.yaml

@@ -35,3 +35,83 @@ _ref:
 
       > Other selector blocks are `ButtonSelector`, `CheckboxSelector`, `RadioSelector` and `Selector`.
 
+    examples:
+      - title: Listing options from database search
+        block:
+          id: example_selector
+          type: MultipleSelector
+          requests:
+            - id: example_search
+              type: MongoDBAggregation
+              connectionId: companies
+              properties:
+                pipeline:
+                  - $search:
+                      compound:
+                        should:
+                          - wildcard:
+                              query:
+                                _string.concat:
+                                  - '*'
+                                  - _state: search_input
+                                  - '*'
+                              path: # field names to search in the companies collection
+                                - _id
+                                - company_name
+                              allowAnalyzedField: true
+                  - $addFields:
+                      score:
+                        $meta: searchScore
+                  - $sort:
+                      score: -1
+                  - $limit: 50
+                  - $project:
+                      _id: 0
+                      value: $_id
+                      label:
+                        $concat:
+                          - $_id
+                          - ' - '
+                          - $ifNull:
+                              - $company_name
+                              - ''
+          properties:
+            placeholder: Search
+            options: # search request results will be used as options
+              _array.concat:
+                - _if_none:
+                    - _state: example_options
+                    - []
+                - _if_none:
+                    - _request: example_search
+                    - []
+            label:
+              disabled: true
+          events:
+            onChange: # selector onChange actions - triggered when the value of the selector changes
+              - id: set_state
+                type: SetState
+                params:
+                  example_options:
+                    _mql.aggregate:
+                      on:
+                        _array.concat:
+                          - _state: example_options
+                          - _request: example_search
+                      pipeline:
+                        - $match:
+                            value:
+                              $in:
+                                _state: example_selector
+            onSearch: # selector onSearch actions - triggered when the user types in the search input
+              debounce:
+                ms: 500
+              try:
+                - id: set_state
+                  type: SetState
+                  params:
+                    search_input:
+                      _event: value
+                - id: perform_search
+                  type: Request
+                  params: example_search

package/blocks/input/Selector.yaml

@@ -34,3 +34,65 @@ _ref:
       The options for the selector can be provides as either an array of primitive values (Strings, numbers, booleans or dates), or as an array of label-value pairs, where the label is a string, and the value can be of any type, including objects like dates and arrays.
 
       > Other selector blocks are `ButtonSelector`, `CheckboxSelector`, `MultipleSelector` and `RadioSelector`.
+
+    examples:
+      - title: Listing options from database search
+        block:
+          id: example_selector
+          type: Selector
+          requests:
+            - id: example_search
+              type: MongoDBAggregation
+              connectionId: companies
+              properties:
+                pipeline:
+                  - $search:
+                      compound:
+                        should:
+                          - wildcard:
+                              query:
+                                _string.concat:
+                                  - '*'
+                                  - _state: search_input
+                                  - '*'
+                              path: # field names to search in the companies collection
+                                - _id
+                                - company_name
+                              allowAnalyzedField: true
+                  - $addFields:
+                      score:
+                        $meta: searchScore
+                  - $sort:
+                      score: -1
+                  - $limit: 50
+                  - $project: # selector options value, label pairs
+                      _id: 0
+                      value: $_id
+                      label:
+                        $concat:
+                          - $_id
+                          - ' - '
+                          - $ifNull:
+                              - $company_name
+                              - ''
+          properties:
+            placeholder: Search
+            options:
+              _if_none: # search request results will be used as options
+                - _request: example_search
+                - []
+            label:
+              disabled: true
+          events:
+            onSearch: # selector onSearch actions
+              debounce:
+                ms: 500
+              try:
+                - id: set_state
+                  type: SetState
+                  params:
+                    search_input:
+                      _event: value
+                - id: perform_search
+                  type: Request
+                  params: example_search

package/concepts/custom-blocks.yaml

@@ -45,7 +45,7 @@ _ref:
 
             ```yaml
             name: dashboard-app
-            lowdefy: 3.22.0
+            lowdefy: 3.23.1
             types:
               AmChartsXY:
                 url: https://blocks-cdn.lowdefy.com/v3.10.1/blocks-amcharts/meta/AmChartsXY.json
@@ -95,7 +95,7 @@ _ref:
 
             ```yaml
             name: dashboard-app
-            lowdefy: 3.22.0
+            lowdefy: 3.23.1
             types:
               MyCustomBlock:
                 url: http://localhost:3002/meta/MyCustomBlock.json

package/concepts/custom-code.yaml

@@ -53,7 +53,7 @@ _ref:
 
             ```yaml
             name: google-analytics-example
-            lowdefy: 3.22.0
+            lowdefy: 3.23.1
             # ...
             app:
               html:
@@ -98,7 +98,7 @@ _ref:
             ```yaml
             # /lowdefy.yaml
             name: json-todos
-            lowdefy: 3.22.0
+            lowdefy: 3.23.1
             app:
               html:
                 appendHead:
@@ -156,7 +156,7 @@ _ref:
             ```yaml
             # /lowdefy.yaml
             name: operator-example
-            lowdefy: 3.22.0
+            lowdefy: 3.23.1
             app:
               html:
                 appendHead:

package/connections/AxiosHttp.yaml

@@ -88,7 +88,7 @@ _ref:
             ###### A basic full example requesting data from https://jsonplaceholder.typicode.com
 
             ```yaml
-            lowdefy: 3.22.0
+            lowdefy: 3.23.1
             name: Lowdefy starter
             connections:
               - id: my_api

package/deployment/aws-lambda.yaml

@@ -55,10 +55,10 @@ _ref:
             COPY  --chown=node:node  . .
 
             # Build the Lowdefy config using the Lowdefy CLI
-            RUN npx lowdefy@3.22.0 build
+            RUN npx lowdefy@3.23.1 build
 
             # Use the correct Lowdefy base image
-            FROM lowdefy/lowdefy-aws-lambda:3.22.0
+            FROM lowdefy/lowdefy-aws-lambda:3.23.1
 
             # Copy build output from build stage
             COPY --from=build /home/node/lowdefy/.lowdefy/build ./build

package/deployment/docker.yaml

@@ -65,10 +65,10 @@ _ref:
             COPY  --chown=node:node  . .
 
             # Build the Lowdefy config using the Lowdefy CLI
-            RUN npx lowdefy@3.22.0 build
+            RUN npx lowdefy@3.23.1 build
 
             # Use the correct Lowdefy base image
-            FROM lowdefy/lowdefy:3.22.0
+            FROM lowdefy/lowdefy:3.23.1
 
             # Copy build output from build stage
             COPY --from=build --chown=node:node /home/node/lowdefy/.lowdefy/build ./build

package/howto/generate-csv.yaml.njk

@@ -184,7 +184,7 @@ _ref:
 
             ###### /lowdefy.yaml
             ```yaml
-            lowdefy: 3.22.0
+            lowdefy: 3.23.1
             name: Generate PDF from data with Lowdefy
 
             app:

package/howto/generate-pdf.yaml.njk

@@ -237,7 +237,7 @@ _ref:
             ###### /lowdefy.yaml
             ```yaml
             name: Generate a PDF
-            lowdefy: 3.22.0
+            lowdefy: 3.23.1
 
             app:
               html:
@@ -302,7 +302,7 @@ _ref:
 
             ###### /lowdefy.yaml
             ```yaml
-            lowdefy: 3.22.0
+            lowdefy: 3.23.1
             name: Generate PDF from data with Lowdefy
 
             app:

package/howto/generateCsv/lowdefy.yaml

@@ -1,4 +1,4 @@
-lowdefy: 3.22.0
+lowdefy: 3.23.1
 name: Generate PDF from data with Lowdefy
 
 app:

package/howto/generatePdf/lowdefy.yaml

@@ -1,4 +1,4 @@
-lowdefy: 3.22.0
+lowdefy: 3.23.1
 name: Generate PDF from data with Lowdefy
 
 app:

package/howto/use-refrences.md

@@ -0,0 +1,5 @@
+# How to use references
+
+When starting a new Lowdefy application, your app is simple, uncomplicated and easy to navigate between pages, blocks, requests and actions. Unfortunately as with any software application, as you add more functionality, your app code start to grow to thousands of lines of code. When writing an app using conventional tools like javascript, you'd deal with this complexity by splitting your app into methods, files and folders. A experienced programmer will make design choices to best abstract portions of the code to make the app more understandable and maintainable.
+
+With Lowdefy the built configuration is served in one giant JSON blob. you can do the same by splitting portions of your Lowdefy config into separate files and folders, and stich them together and

package/lowdefy.yaml

@@ -13,7 +13,7 @@
 # limitations under the License.
 
 name: '@lowdefy/docs'
-lowdefy: 3.23.0-alpha.0
+lowdefy: 3.23.1
 licence: Apache-2.0
 
 cli:

package/menus.yaml

@@ -413,31 +413,6 @@
         - id: Modal
           type: MenuLink
           pageId: Modal
-        - id: Result
-          type: MenuLink
-          pageId: Result
-        - id: Span
-          type: MenuLink
-          pageId: Span
-        - id: Spin
-          type: MenuLink
-          pageId: Spin
-        - id: Tabs
-          type: MenuLink
-          pageId: Tabs
-        - id: Tooltip
-          type: MenuLink
-          pageId: Tooltip
-
-    - id: blocks_context
-      type: MenuGroup
-      properties:
-        title: Context Blocks
-        icon: GroupOutlined
-      links:
-        - id: Context
-          type: MenuLink
-          pageId: Context
         - id: PageHCF
           type: MenuLink
           pageId: PageHCF
@@ -456,6 +431,22 @@
         - id: PageSiderMenu
           type: MenuLink
           pageId: PageSiderMenu
+        - id: Result
+          type: MenuLink
+          pageId: Result
+        - id: Span
+          type: MenuLink
+          pageId: Span
+        - id: Spin
+          type: MenuLink
+          pageId: Spin
+        - id: Tabs
+          type: MenuLink
+          pageId: Tabs
+        - id: Tooltip
+          type: MenuLink
+          pageId: Tooltip
+
     - id: blocks_list
       type: MenuGroup
       properties:
@@ -779,9 +770,14 @@
         title: Lowdefy Versions
         icon: BranchesOutlined
       links:
-        - id: v3.22.0
+        - id: v3.23.1
           type: MenuLink
           url: https://docs.lowdefy.com
+          properties:
+            title: v3.23.1
+        - id: v3.22.0
+          type: MenuLink
+          url: https://61519bcb8b8ed4412aae3057--lowdefy-docs.netlify.app
           properties:
             title: v3.22.0
         - id: v3.21.2

package/operators/_actions.yaml

@@ -77,7 +77,7 @@ _ref:
       First register a custom JavaScript action: `getNormalizedEigenvector`
       ```yaml
       # file: lowdefy.yaml
-      lowdefy: '3.22.0'
+      lowdefy: '3.23.1'
       app:
         html:
           appendHead: |

package/operators/_event.yaml

@@ -19,6 +19,7 @@ _ref:
     pageId: _event
     pageTitle: _event
     filePath: operators/_event.yaml
+    env: Client Only
     types: |
       ```
       (key: string): any

package/operators/_global.yaml

@@ -19,6 +19,7 @@ _ref:
     pageId: _global
     pageTitle: _global
     filePath: operators/_global.yaml
+    env: Client Only
     types: |
       ```
       (key: string): any

package/operators/_index.yaml

@@ -19,6 +19,7 @@ _ref:
     pageId: _index
     pageTitle: _index
     filePath: operators/_index.yaml
+    env: Client Only
     types: |
       ```
       (key: string): any

package/operators/_input.yaml

@@ -19,6 +19,7 @@ _ref:
     pageId: _input
     pageTitle: _input
     filePath: operators/_input.yaml
+    env: Client Only
     types: |
       ```
       (key: string): any

package/operators/_js.yaml

@@ -51,7 +51,7 @@ _ref:
           ```yaml
           # lowdefy.yaml
           name: make-me-primes
-          lowdefy: '3.22.0'
+          lowdefy: '3.23.1'
           app:
             html:
               # This HTML will be appended to the head HTML tag in the Lowdefy app
@@ -119,7 +119,7 @@ _ref:
           ```yaml
           # file: lowdefy.yaml
           name: my-chart
-          lowdefy: '3.22.0'
+          lowdefy: '3.23.1'
           app:
             html:
               appendHead: