@ea-lab/reactive-json-docs 0.1.2

package/public/rjbuild/component-doc/core/example/dynamic-content.yaml

@@ -0,0 +1,237 @@
+renderView:
+  - type: RjBuildDescriber
+    title: Dynamic content
+    description:
+      - type: div
+        content: The following demonstrated content is a table with edit modals, select/unselect and delete buttons.
+    toDescribe:
+      renderView:
+        - type: DataFilter
+          context: global
+          filters:
+            - subjectsWithProperty: dynamicContentRow
+              andConditions:
+                - orConditions:
+                    - when: ~~._search
+                      isEmpty:
+                    - whenFilterableData: dynamicContentRow.title
+                      contains: ~~._search
+
+          content:
+            load: mainContent
+
+        - type: div
+          attributes:
+            style:
+              paddingTop: 10em
+      templates:
+        mainContent:
+          - type: h2
+            content: Dynamic content
+          - type: div
+            content: We will now demonstrate how to build dynamic interfaces.
+
+
+          - type: TextField
+            placeholder: Insert some text to search here...
+            dataLocation: ~~._search
+
+          - type: BsButton
+            attributes:
+              class: btn btn-link
+            content: Select All
+            actions:
+              - what: postMessage
+                on: click
+                message:
+                  actor: select_all
+
+          - type: BsButton
+            attributes:
+              class: btn btn-link
+            content: Unselect All
+            actions:
+              - what: postMessage
+                on: click
+                message:
+                  actor: unselect_all
+
+          - type: BsButton
+            content: Bulk delete
+            actions:
+              - what: hide
+                whenDataCountOf: $.rows[*][?(@.selected == true)]
+                inContext: global
+                is: 0
+              - what: postMessage
+                on: click
+                message:
+                  actor: bulk_delete_selected
+
+
+          - type: table
+            attributes:
+              class: table
+            content:
+              type: tbody
+              content:
+                - type: Switch
+                  content: ~~.rows
+                  paginated: true
+                  paginationProps:
+                    maxPageButtonsCount: 5
+                    pageMaxItemCount: 7
+                  options:
+                    dynamicContentRow:
+                      load: dynamicContentRow
+                  after:
+                    type: tr
+                    content:
+                      type: td
+                      attributes:
+                        colSpan: 3
+                      content:
+                        type: PageControls
+
+          - type: BsButton
+            content: Add a row
+            actions:
+              - what: addData
+                on: click
+                path: ~~.rows
+                value:
+                  dynamicContentRow:
+                    selected: false
+                    title: Please edit the title
+
+        dynamicContentRow:
+          type: tr
+          actions:
+            - what: removeData
+              on: message
+              whenMessageIs:
+                actor: bulk_delete_selected
+              when: ~.selected
+              is: true
+              target: currentTemplateData
+              parentLevel: 1
+          content:
+            select:
+              type: td
+              content:
+                type: CheckBoxField
+                dataLocation: ~.selected
+                options:
+                  - value: true
+                actions:
+                  - what: setData
+                    path: ~.selected
+                    value: true
+                    on: message
+                    whenMessageIs:
+                      actor: select_all
+                  - what: setData
+                    path: ~.selected
+                    value: false
+                    on: message
+                    whenMessageIs:
+                      actor: unselect_all
+            title:
+              type: td
+              content:
+                type: div
+                content: ~.title
+            actions:
+              type: td
+              content:
+                - type: BsButton
+                  content: Edit
+                  actions:
+                    - what: setData
+                      on: click
+                      path: ~._openEditModal
+                      value: true
+                - type: Modal
+                  showBoolPath: ~._openEditModal
+                  headerTitle:
+                    - "Edit the content "
+                    - type: em
+                      content: ~.title
+                  body:
+                    - type: TextField
+                      dataLocation: ~.title
+                      label: Content title
+                    - type: BsButton
+                      content: OK
+                      actions:
+                        - what: setData
+                          on: click
+                          path: ~._openEditModal
+
+      data:
+        rows:
+          - dynamicContentRow:
+              selected: false
+              title: Content name A
+          - dynamicContentRow:
+              selected: false
+              title: Content name B
+          - dynamicContentRow:
+              selected: false
+              title: Content name C
+          - dynamicContentRow:
+              selected: false
+              title: Content name D
+          - dynamicContentRow:
+              selected: false
+              title: Content name E
+          - dynamicContentRow:
+              selected: false
+              title: Content name F
+          - dynamicContentRow:
+              selected: false
+              title: Content name G
+          - dynamicContentRow:
+              selected: false
+              title: Content name H
+          - dynamicContentRow:
+              selected: false
+              title: Content name I
+          - dynamicContentRow:
+              selected: false
+              title: Content name J
+          - dynamicContentRow:
+              selected: false
+              title: Content name K
+          - dynamicContentRow:
+              selected: false
+              title: Content name L
+          - dynamicContentRow:
+              selected: false
+              title: Content name M
+          - dynamicContentRow:
+              selected: false
+              title: Content name N
+          - dynamicContentRow:
+              selected: false
+              title: Content name O
+          - dynamicContentRow:
+              selected: false
+              title: Content name P
+          - dynamicContentRow:
+              selected: false
+              title: Content name Q
+          - dynamicContentRow:
+              selected: false
+              title: Content name R
+          - dynamicContentRow:
+              selected: false
+              title: Content name S
+          - dynamicContentRow:
+              selected: false
+              title: Content name T
+
+
+templates:
+
+data: {}

package/public/rjbuild/component-doc/core/example/html.md

@@ -0,0 +1,66 @@
+# HTML Components Examples
+
+## Basic HTML Usage
+
+All HTML tags can be added to an RjBuild. To use an HTML tag, simply add an object to your RjBuild with the HTML tag name as the `type` property in lowercase. The content of the tag is set using the `content` property.
+
+### Basic Example
+```yaml
+renderView:
+  - type: p
+    content: This is a paragraph using the HTML component.
+```
+
+## Nesting Content
+
+HTML components can be nested within each other to create complex structures.
+
+### Nested Elements Example
+```yaml
+renderView:
+  - type: div
+    content:
+      - "This is a text value. "
+      - type: strong
+        content:
+          - "This text is strong. "
+          - type: em
+            content: "This text is strong and slanted/italic."
+```
+
+## HTML Attributes
+
+HTML attributes are supported through the `attributes` property. Each attribute can be assigned a string value.
+
+### Styling with Attributes
+
+> **Important Note about Inline Styles**
+>
+> When using inline styles, you must use a specific structure:
+> - Use an object with CSS properties as keys
+> - Use camelCase for property names instead of hyphen-based CSS casing
+> - For example, use `backgroundColor` instead of `background-color`
+
+### Example with Attributes and Styles
+```yaml
+renderView:
+  - type: div
+    attributes:
+      data-attr: Hello!
+      style:
+        backgroundColor: rgb(250,242,0)
+        padding: 0.5em
+    content:
+      - "This is a "
+      - type: code
+        content: div
+      - " with a yellow background and padding set as style attributes."
+```
+
+## Key Points
+
+1. Use lowercase HTML tag names as the `type`
+2. Set content using the `content` property
+3. Nest elements by adding them to the content array
+4. Use `attributes` for HTML attributes
+5. Use camelCase for style property names 

package/public/rjbuild/component-doc/core/example/html.yaml

@@ -0,0 +1,83 @@
+renderView:
+  - type: RjBuildDescriber
+    title: HTML
+    description:
+      - type: p
+        content: All the HTML tags can be added to an RjBuild.
+      - type: p
+        content:
+          - "Add an object to an RjBuild with the HTML tag as the "
+          - type: code
+            content: type
+          - " property, in lowercase."
+      - type: p
+        content:
+          - "To set the content of the tag, set the value into the "
+          - type: code
+            content: content
+          - " property."
+    toDescribe:
+      renderView:
+        - type: p
+          content: This is a paragraph using the HTML component.
+      templates:
+      data: { }
+
+  - type: RjBuildDescriber
+    title: Nesting content
+    description:
+      - type: p
+        content: "Of course, you can nest HTML into HTML."
+    toDescribe:
+      renderView:
+        - type: div
+          content:
+            - "This is a text value. "
+            - type: strong
+              content:
+                - "This text is strong. "
+                - type: em
+                  content: "This text is strong and slanted/italic."
+      templates:
+      data: { }
+
+  - type: RjBuildDescriber
+    title: HTML attributes
+    description:
+      - type: Markdown
+        content: |
+          HTML attributes are also supported.
+          
+          Attributes may be added through the `attributes` property. Assign a string
+          value to each attribute.
+      - type: BsAlert
+        attributes:
+          variant: warning
+        content:
+          type: Markdown
+          content:
+            Inline styles have a specific structure. Instead of the string value, you must
+            specify an object with the CSS property as the key, and CSS value as the value.
+            Each key must be using **camelCase** instead of the usual hyphen-based CSS casing.
+            
+            In the following example, `backgroundColor` is used for the `background-color`
+            CSS property.
+    toDescribe:
+      renderView:
+        - type: div
+          attributes:
+            data-attr: Hello!
+            style:
+              backgroundColor: rgb(250,242,0)
+              padding: 0.5em
+          content:
+            - "This is a "
+            - type: code
+              content: div
+            - " with a yellow background and padding set as style attributes."
+      templates:
+      data: { }
+
+templates:
+
+data: { }