@ea-lab/reactive-json-docs 0.1.2

package/public/rjbuild/component-doc/core/element/html/Tabs.yaml

@@ -0,0 +1,57 @@
+renderView:
+  - type: Markdown
+    content: |
+      # Tabs
+
+      The `Tabs` component provides a tabbed interface using React-Bootstrap. Each tab must have a unique `eventKey` and a `title` in its attributes, and can contain any valid Reactive-JSON view content.
+
+      ## Properties
+      - `tabs` (array, required): Static array of tab objects. This array is not evaluated by the template system and must be defined statically in the schema.
+        - Each tab object must have:
+          - `attributes` (object, required):
+            - `title` (string, required): The label of the tab
+            - `eventKey` (string, required): A unique identifier for the tab
+            - Other attributes are passed to the React-Bootstrap Tab component
+          - `content` (array/object, required): The content to display in the tab. Can be any valid Reactive-JSON view (components, arrays, templates, etc.)
+
+  - type: RjBuildDescriber
+    title: "Interactive Example: Editable tabs"
+    description:
+      - type: Markdown
+        content: |
+          Edit the content of each tab and switch between them to see the result.
+    toDescribe:
+      renderView:
+        - type: Tabs
+          tabs:
+            - attributes:
+                eventKey: simple
+                title: "First tab"
+              content: "This tab has the value directly set."
+            - attributes:
+                eventKey: templateLoaded
+                title: "Template loaded tab"
+              content:
+                load: tabTemplate
+            - attributes:
+                eventKey: components
+                title: "Components"
+              content:
+                type: p
+                content: "You can put any component or template in the tab content."
+
+      templates:
+        tabTemplate:
+          text: "This tab content is from a template."
+
+  - type: Markdown
+    content: |
+      ## Limitations
+      - The `tabs` array must be static in the schema (no dynamic generation or template evaluation)
+      - Each tab must have a unique `eventKey` in its attributes
+      - The `title` attribute is required for each tab
+      - No support for dynamic addition/removal of tabs at runtime
+      - No built-in support for icons in tab headers
+      - No animation customization beyond what react-bootstrap provides
+      - All tab content is rendered at once (not lazy-loaded)
+      - Tab selection state is not persisted between renders

package/public/rjbuild/component-doc/core/element/special/BootstrapElement.md

@@ -0,0 +1,17 @@
+# BootstrapElement
+
+## Introduction
+
+The `BootstrapElement` component is an internal wrapper used by Reactive-JSON to integrate React-Bootstrap components into the template system.
+
+**You should not use this component directly in your rjbuild.**
+
+It is automatically used by higher-level components (such as BsAccordion, BsAlert, etc.) to provide Bootstrap features in a declarative way.
+
+## Properties
+- `attributes` (object, optional): Attributes passed to the underlying Bootstrap component
+- `content` (object/array, optional): Content to render inside the Bootstrap component
+
+## Limitations
+- Not intended for direct use in rjbuild templates
+- Used internally by the system for Bootstrap integration 

package/public/rjbuild/component-doc/core/element/special/BootstrapElement.yaml

@@ -0,0 +1,18 @@
+renderView:
+  - type: Markdown
+    content: |
+      # BootstrapElement
+
+      The `BootstrapElement` component is an internal wrapper used by Reactive-JSON to integrate React-Bootstrap components into the template system.
+
+      **You should not use this component directly in your rjbuild.**
+
+      It is automatically used by higher-level components (such as BsAccordion, BsAlert, etc.) to provide Bootstrap features in a declarative way.
+
+      ## Properties
+      - `attributes` (object, optional): Attributes passed to the underlying Bootstrap component
+      - `content` (object/array, optional): Content to render inside the Bootstrap component
+
+      ## Limitations
+      - Not intended for direct use in rjbuild templates
+      - Used internally by the system for Bootstrap integration 

package/public/rjbuild/component-doc/core/element/special/Count.md

@@ -0,0 +1,37 @@
+# Count
+
+## Introduction
+
+The `Count` component returns the number of items matching a JSONPath pattern in the data context. It is useful for displaying counts of elements, such as the number of items in a list, matching a filter, or present in a subtree.
+
+## Properties
+- `jsonPathPattern` (string, required): The JSONPath pattern to evaluate for counting
+- `context` (string, optional): The context to use for evaluation (`global`, `template`, or `root`). Default is `global`.
+
+## Behavior
+- Evaluates the given JSONPath pattern on the selected data context
+- Returns the number of matches found
+- If `context` is `global`, uses the global data context; if `template`, uses the template context; if `root`, uses the root context
+- If `jsonPathPattern` is not provided, renders nothing
+
+## Example
+```yaml
+renderView:
+  - type: div
+    content:
+      - type: strong
+        content: "Number of users: "
+      - type: Count
+        jsonPathPattern: "$.users[*]"
+
+data:
+  users:
+    - name: "Alice"
+    - name: "Bob"
+    - name: "Charlie"
+```
+
+## Limitations
+- Only supports JSONPath patterns
+- Returns 0 if no match or if the pattern is invalid
+- Does not support advanced filtering or custom functions in JSONPath 

package/public/rjbuild/component-doc/core/element/special/Count.yaml

@@ -0,0 +1,325 @@
+renderView:
+  - type: Markdown
+    content: |
+      # Count
+
+      The `Count` component returns the number of items matching a JSONPath pattern in the data context. It is useful for displaying counts of elements, such as the number of items in a list, matching a filter, or present in a subtree.
+
+      ## Properties
+      - `jsonPathPattern` (string, required): The JSONPath pattern to evaluate for counting
+      - `context` (string, optional): The context to use for evaluation (`global`, `template`, or `root`). Default is `global`.
+
+      ## Behavior
+      - Evaluates the given JSONPath pattern on the selected data context
+      - Returns the number of matches found
+      - If `context` is `global`, uses the global data context; if `template`, uses the template context; if `root`, uses the root context
+      - If `jsonPathPattern` is not provided, renders nothing
+
+  - type: RjBuildDescriber
+    title: "Example"
+    toDescribe:
+      renderView:
+        - type: div
+          content:
+            - type: strong
+              content: "Number of users: "
+            - type: Count
+              jsonPathPattern: "$.users[*]"
+
+      data:
+        users:
+          - name: "Alice"
+          - name: "Bob"
+          - name: "Charlie"
+
+  - type: RjBuildDescriber
+    title: "Interactive Example: Dynamic Count with User Management"
+    description:
+      - type: Markdown
+        content: |
+          This example demonstrates the Count component with different JSONPath patterns. Add or remove users and change their status to see how the counts update in real-time.
+    toDescribe:
+      renderView:
+        - type: div
+          attributes:
+            class: "container-fluid"
+          content:
+            - type: div
+              attributes:
+                class: "row mb-4"
+              content:
+                - type: div
+                  attributes:
+                    class: "col-md-6"
+                  content:
+                    - type: div
+                      attributes:
+                        class: "card"
+                      content:
+                        - type: div
+                          attributes:
+                            class: "card-header bg-primary text-white"
+                          content:
+                            - type: h5
+                              attributes:
+                                class: "card-title mb-0"
+                              content: "📊 Count Statistics"
+                        - type: div
+                          attributes:
+                            class: "card-body"
+                          content:
+                            - type: div
+                              attributes:
+                                class: "d-flex justify-content-between mb-2"
+                              content:
+                                - type: span
+                                  content: "Total users:"
+                                - type: span
+                                  attributes:
+                                    class: "badge bg-secondary"
+                                  content:
+                                    type: Count
+                                    jsonPathPattern: "$.users[*]"
+                            - type: div
+                              attributes:
+                                class: "d-flex justify-content-between mb-2"
+                              content:
+                                - type: span
+                                  content: "Active users:"
+                                - type: span
+                                  attributes:
+                                    class: "badge bg-success"
+                                  content:
+                                    type: Count
+                                    jsonPathPattern: "$.users[?(@.status == 'active')]"
+                            - type: div
+                              attributes:
+                                class: "d-flex justify-content-between mb-2"
+                              content:
+                                - type: span
+                                  content: "Inactive users:"
+                                - type: span
+                                  attributes:
+                                    class: "badge bg-warning"
+                                  content:
+                                    type: Count
+                                    jsonPathPattern: "$.users[?(@.status == 'inactive')]"
+                            - type: div
+                              attributes:
+                                class: "d-flex justify-content-between mb-2"
+                              content:
+                                - type: span
+                                  content: "Admins:"
+                                - type: span
+                                  attributes:
+                                    class: "badge bg-danger"
+                                  content:
+                                    type: Count
+                                    jsonPathPattern: "$.users[?(@.role == 'admin')]"
+                - type: div
+                  attributes:
+                    class: "col-md-6"
+                  content:
+                    - type: div
+                      attributes:
+                        class: "card"
+                      content:
+                        - type: div
+                          attributes:
+                            class: "card-header bg-info text-white"
+                          content:
+                            - type: h5
+                              attributes:
+                                class: "card-title mb-0"
+                              content: "➕ Add New User"
+                        - type: div
+                          attributes:
+                            class: "card-body"
+                          content:
+                            - type: div
+                              attributes:
+                                class: "mb-3"
+                              content:
+                                - type: TextField
+                                  label: "Name:"
+                                  dataLocation: ~.newUser.name
+                                  placeholder: "Enter user name"
+                            - type: div
+                              attributes:
+                                class: "mb-3"
+                              content:
+                                - type: SelectField
+                                  label: "Status:"
+                                  dataLocation: ~.newUser.status
+                                  options:
+                                    - label: "Active"
+                                      value: "active"
+                                    - label: "Inactive"
+                                      value: "inactive"
+                            - type: div
+                              attributes:
+                                class: "mb-3"
+                              content:
+                                - type: SelectField
+                                  label: "Role:"
+                                  dataLocation: ~.newUser.role
+                                  options:
+                                    - label: "User"
+                                      value: "user"
+                                    - label: "Admin"
+                                      value: "admin"
+                            - type: button
+                              attributes:
+                                class: "btn btn-primary"
+                              content: "Add User"
+                              actions:
+                                - what: addData
+                                  on: click
+                                  path: ~.users
+                                  value:
+                                    name: ~.newUser.name
+                                    status: ~.newUser.status
+                                    role: ~.newUser.role
+                                  when: ~.newUser.name
+                                  isEmpty: not
+                                - what: setData
+                                  on: click
+                                  path: ~.newUser
+                                  value:
+                                    name: ""
+                                    status: "active"
+                                    role: "user"
+                                  when: ~.newUser.name
+                                  isEmpty: not
+            - type: div
+              attributes:
+                class: "row"
+              content:
+                - type: div
+                  attributes:
+                    class: "col-12"
+                  content:
+                    - type: div
+                      attributes:
+                        class: "card"
+                      content:
+                        - type: div
+                          attributes:
+                            class: "card-header bg-secondary text-white"
+                          content:
+                            - type: h5
+                              attributes:
+                                class: "card-title mb-0"
+                              content: "👥 User List"
+                        - type: div
+                          attributes:
+                            class: "card-body"
+                          content:
+                            - type: Switch
+                              content: ~.users
+                              singleOption:
+                                load: userItem
+
+      templates:
+        userItem:
+          type: div
+          attributes:
+            class: "list-group-item d-flex justify-content-between align-items-center mb-2 border rounded"
+          content:
+            - type: div
+              content:
+                - type: strong
+                  content: ~.name
+                - type: span
+                  attributes:
+                    class: "ms-2 badge rounded-pill"
+                    style:
+                      backgroundColor: "#198754"
+                      color: "white"
+                  content: ~.status
+                  actions:
+                    - what: hide
+                      when: ~.status
+                      isNot: "active"
+                - type: span
+                  attributes:
+                    class: "ms-2 badge rounded-pill"
+                    style:
+                      backgroundColor: "#ffc107"
+                      color: "black"
+                  content: ~.status
+                  actions:
+                    - what: hide
+                      when: ~.status
+                      isNot: "inactive"
+                - type: span
+                  attributes:
+                    class: "ms-2 badge rounded-pill bg-danger"
+                  content: ~.role
+                  actions:
+                    - what: hide
+                      when: ~.role
+                      isNot: "admin"
+            - type: div
+              content:
+                - type: button
+                  attributes:
+                    class: "btn btn-sm btn-outline-primary me-2"
+                  content: "Toggle Status"
+                  actions:
+                    - what: setData
+                      on: click
+                      path: ~.status
+                      value: "inactive"
+                      when: ~.status
+                      is: "active"
+                    - what: setData
+                      on: click
+                      path: ~.status
+                      value: "active"
+                      when: ~.status
+                      is: "inactive"
+                - type: button
+                  attributes:
+                    class: "btn btn-sm btn-outline-danger"
+                  content: "Remove"
+                  actions:
+                    - what: removeData
+                      on: click
+                      target: currentTemplateData
+                      parentLevel: 0
+
+      data:
+        newUser:
+          name: ""
+          status: "active"
+          role: "user"
+        users:
+          - name: "Alice Johnson"
+            status: "active"
+            role: "admin"
+          - name: "Bob Smith"
+            status: "active"
+            role: "user"
+          - name: "Charlie Brown"
+            status: "inactive"
+            role: "user"
+          - name: "Diana Prince"
+            status: "active"
+            role: "admin"
+
+  - type: Markdown
+    content: |
+      ## Common JSONPath Patterns for Count
+
+      - `$.users[*]` - Count all users
+      - `$.users[?(@.status == 'active')]` - Count users with specific status
+      - `$.users[?(@.role == 'admin')]` - Count users with specific role
+      - `$.users[?(@.age > 25)]` - Count users older than 25
+      - `$.categories[*].items[*]` - Count all items across all categories
+      - `$..products` - Count all products at any level (recursive)
+
+      ## Limitations
+      - Only supports JSONPath patterns
+      - Returns 0 if no match or if the pattern is invalid
+      - Does not support advanced filtering or custom functions in JSONPath 

package/public/rjbuild/component-doc/core/element/special/DataFilter.md

@@ -0,0 +1,149 @@
+# DataFilter
+
+## Introduction
+
+The `DataFilter` component allows you to filter data from the global or template context before rendering its content. It is particularly useful for conditional display of elements based on dynamic complex criteria, such as filtering lists, trees, or data subsets.
+
+## Properties
+- `filters` (array, required): Array of filter objects, each specifying properties and conditions to check
+  - `subjectsWithProperty` (string): Property to check in the data, acts as namespace
+  - `andConditions` (array): List of conditions that must all be true
+  - `orConditions` (array): List of conditions where at least one must be true
+  - Available conditions:
+    - `when`: Checks a condition on a value
+    - `is`: Compares exact equality
+    - `isNot`: Checks inequality
+    - `isEmpty`: Checks if a value is empty
+    - `contains`: Checks if a value contains a substring
+    - `>=`, `<=`, `>`, `<`: Numeric comparisons
+    - `compareAsDates`: Boolean to compare values as dates
+    - `whenFilterableData`: Specifies the data path to filter, must include the namespace
+- `context` (string, optional): Context to filter (`global` or `template`). Default: `global`
+- `content` (object/array, required): Content to render after filtering
+
+## Behavior
+- Applies all filters to the selected context before content rendering
+- Supports complex filtering conditions with `andConditions` and `orConditions`
+- Allows recursive filtering while preserving data structure
+- Can be combined with other components to create interactive filtering interfaces
+- Supports dynamic filtering based on application state
+
+## Filterable Data Structure
+
+DataFilter uses a specific pattern to identify and filter data. This pattern relies on an identification key (namespace) that must be consistent between the data structure and filtering conditions.
+
+### Namespace Pattern
+
+1. **In the data structure**:
+```yaml
+data:
+  filteredItems:
+    - item:           # <- Identification key (namespace)
+        id: 1
+        title: "..."
+    - item:           # <- Same key for each item
+        id: 2
+        title: "..."
+```
+
+2. **In filtering conditions**:
+```yaml
+type: DataFilter
+context: global
+filters:
+  - subjectsWithProperty: item    # <- Declares the namespace
+    andConditions:
+      - orConditions:
+          - whenFilterableData: item.title  # <- Uses the namespace
+            contains: "..."
+```
+
+The identification key (here "item"):
+- Can have any name (`itemXyz`, `element`, etc.)
+- Must be consistent between data structure and conditions
+- Serves as a namespace for accessing properties in `whenFilterableData`
+- Is required for DataFilter to correctly identify filterable elements
+
+## Example
+
+```yaml
+renderView:
+  - type: DataFilter
+    context: global
+    filters:
+      - subjectsWithProperty: item
+        andConditions:
+          # Text search filter
+          - orConditions:
+              - when: ~~._filters.search
+                isEmpty:
+              - whenFilterableData: item.searchableContent
+                contains: ~~._filters.search
+
+          # Date filter
+          - orConditions:
+              - when: ~~._filters.since
+                isEmpty:
+              - whenFilterableData: item.creationDate
+                ">=": ~~._filters.since
+                compareAsDates: true
+
+          # Status filter
+          - orConditions:
+              - when: ~~._filters.status
+                isNot: active_only
+              - whenFilterableData: item.status
+                is: active
+
+    content:
+      - type: Switch
+        content: ~~.filteredItems
+        singleOption:
+          - type: div
+            content:
+              - type: span
+                content: ~.item.searchableContent
+              - type: span
+                attributes:
+                  class: "badge"
+                content: ~.item.status
+
+data:
+  _filters:
+    search: ""
+    since: ""
+    status: "all"
+  filteredItems:
+    - item:
+        id: 1
+        searchableContent: "First item"
+        status: "active"
+        creationDate: "2024-03-20"
+    - item:
+        id: 2
+        searchableContent: "Second item"
+        status: "inactive"
+        creationDate: "2024-03-19"
+```
+
+## Advanced Use Cases
+- Multi-criteria filtering with combined conditions
+- Real-time search interface
+- Hierarchical data filtering (trees, sub-elements)
+- Complex state management (conflicts, modifications, new elements)
+- Integration with pagination components
+- Date-based filtering and numeric comparisons
+
+## Best Practices
+- Organize filters by logical category
+- Use comments to document complex conditions
+- Combine with UI components for interactive experience
+- Consider performance with large datasets
+- Use reusable templates for common filters
+- Use consistent namespace patterns across your application
+
+## Limitations
+- Filtering is based on simple comparisons
+- Performance may be impacted with very large datasets
+- Does not support custom filtering functions
+- Filtering is applied recursively on the entire structure