@ea-lab/reactive-json-docs 0.1.2

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

@@ -0,0 +1,348 @@
+renderView:
+  - type: Markdown
+    content: |
+      # Switch
+
+      The `Switch` component allows you to render a list or collection of items using a template, with support for dynamic data, options, and pagination. It is useful for displaying arrays, lists, or collections where each item can be rendered with a specific template or configuration.
+
+      ## Properties
+      - `content` (object/array/string, required): The data or path to the data to iterate over
+      - `options` (object, optional): Mapping of keys to templates for rendering each item (used for object/array of objects)
+      - `singleOption` (object, optional): Template to use for each item when all items share the same structure
+      - `cardinality` (number, optional): Maximum number of items to render (default: unlimited)
+      - `paginated` (boolean, optional): Whether to enable pagination (default: false)
+      - `paginationProps` (object, optional): Pagination configuration (page size, etc.)
+      - `before` (object, optional): Content to render before the list
+      - `after` (object, optional): Content to render after the list
+      - `contentWrapper` (object, optional): HTML element configuration to wrap the main content (items only, not before/after)
+        - `tag` (string, optional): HTML tag name (default: "div")
+        - `attributes` (object, optional): HTML attributes to apply to the wrapper element (supports template evaluation)
+
+      ## Behavior
+      - Iterates over the provided data and renders each item using the specified template(s)
+      - If `options` is provided, uses the corresponding template for each key
+      - If `singleOption` is provided, uses the same template for all items
+      - Supports limiting the number of items with `cardinality`
+      - Supports pagination if `paginated` is true
+      - Renders optional `before` and `after` content
+      - Can wrap the main content (items) with a custom HTML element using `contentWrapper`
+
+      ## Content Wrapper Feature
+
+      The `contentWrapper` property allows you to wrap the rendered items in a custom HTML element without affecting the `before` and `after` content. This is particularly useful for applying CSS layouts like Grid or Flexbox to the items.
+
+      **Note**: The `attributes` property of `contentWrapper` supports template evaluation, allowing you to create dynamic wrapper configurations based on your data.
+
+      ### Structure
+      ```
+      before (optional)
+      └── contentWrapper (optional)
+          └── rendered items
+      after (optional)
+      ```
+
+      The wrapper only affects the main content items and does not interfere with pagination or other Switch features.
+
+      ## Example
+      ```yaml
+      renderView:
+        - type: Switch
+          content: ~.users
+          singleOption:
+            load: opt
+          paginated: true
+          paginationProps:
+            pageMaxItemCount: 2
+      templates:
+        opt:
+          type: div
+          content: ~.name
+      data:
+        users:
+          - name: "Alice"
+          - name: "Bob"
+          - name: "Charlie"
+          - name: "Diana"
+      ```
+
+      ## Limitations
+      - The data must be an array or object; strings and numbers are not supported
+      - If both `options` and `singleOption` are provided, `singleOption` takes precedence
+      - No built-in support for filtering or sorting (use DataFilter or custom logic)
+      - Pagination requires the `paginated` property to be set to true
+
+      ### Data Structure Requirements
+      Switch requires each item in the data to be an object, not a primitive value:
+
+      ```yaml
+      # ❌ This will NOT work:
+      data:
+        items: ["string1", "string2", "string3"]
+
+      # ✅ This will work:
+      data:
+        items: 
+          - name: "string1"
+          - name: "string2"
+          - name: "string3"
+      ```
+
+  - type: RjBuildDescriber
+    title: "1. Simple usage with `singleOption` (no pagination)"
+    description: |
+      This example shows a basic Switch rendering a list of users with a single template.
+    toDescribe:
+      renderView:
+        - type: Switch
+          content: ~.users
+          singleOption:
+            load: opt
+      templates:
+        opt:
+          type: div
+          content: ~.name
+      data:
+        users:
+          - name: "Alice"
+          - name: "Bob"
+          - name: "Charlie"
+
+  - type: RjBuildDescriber
+    title: "2. Usage with `options` (different templates per key)"
+    description: |
+      This example shows how to use different templates for each key in the data.
+    toDescribe:
+      renderView:
+        - type: Switch
+          content: ~.items
+          options:
+            name:
+              load: name
+            age:
+              load: age
+      templates:
+        name:
+          type: div
+          content: [ "Name: ", ~.value ]
+        age:
+          type: div
+          content: [ "Age: ", ~.value ]
+      data:
+        items:
+          - name:
+              value: "Alice"
+          - age:
+              value: 30
+          - name:
+              value: "Bob"
+          - age:
+              value: 25
+
+  - type: RjBuildDescriber
+    title: "3. Usage with `singleOption` and pagination (4 per page, 10 items)"
+    description: |
+      This example demonstrates pagination with 4 items per page and 10 items in total. PageControls is added to the end of the list.
+    toDescribe:
+      renderView:
+        - type: Switch
+          content: ~.numbers
+          singleOption: { load: opt }
+          paginated: true
+          paginationProps:
+            pageMaxItemCount: 4
+          before:
+            type: div
+            content: "User list:"
+          after:
+            type: PageControls
+      templates:
+        opt:
+          type: div
+          content: [ "Number: ", ~.value ]
+      data:
+        numbers:
+          - value: 1
+          - value: 2
+          - value: 3
+          - value: 4
+          - value: 5
+          - value: 6
+          - value: 7
+          - value: 8
+          - value: 9
+          - value: 10
+
+  - type: RjBuildDescriber
+    title: "4. Usage with `contentWrapper` for CSS Grid Layout"
+    description: |
+      This example demonstrates how to use contentWrapper to apply a CSS Grid layout to the Switch items.
+    toDescribe:
+      renderView:
+        - type: Switch
+          content: ~.products
+          singleOption:
+            load: productCard
+          contentWrapper:
+            tag: div
+            attributes:
+              style:
+                display: grid
+                gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))"
+                gap: 1rem
+                padding: 1rem
+                backgroundColor: "#f8f9fa"
+                borderRadius: 8px
+          before:
+            type: h3
+            content: "Our Products"
+          after:
+            type: div
+            attributes:
+              style:
+                textAlign: center
+                marginTop: 1rem
+                color: "#666"
+            content: "End of product list"
+      templates:
+        productCard:
+          type: div
+          attributes:
+            style:
+              border: "1px solid #ddd"
+              borderRadius: 8px
+              padding: 1rem
+              backgroundColor: white
+              textAlign: center
+          content:
+            - type: h4
+              attributes:
+                style:
+                  margin: "0 0 0.5rem 0"
+                  color: "#333"
+              content: ~.name
+            - type: p
+              attributes:
+                style:
+                  margin: 0
+                  color: "#666"
+                  fontSize: "0.9rem"
+              content: ~.description
+      data:
+        products:
+          - name: "Product A"
+            description: "High-quality product A"
+          - name: "Product B"
+            description: "Reliable product B"
+          - name: "Product C"
+            description: "Premium product C"
+          - name: "Product D"
+            description: "Affordable product D"
+
+  - type: RjBuildDescriber
+    title: "5. Usage with `contentWrapper` and Pagination"
+    description: |
+      This example shows how contentWrapper works seamlessly with pagination.
+    toDescribe:
+      renderView:
+        - type: Switch
+          content: ~.cards
+          singleOption:
+            load: card
+          paginated: true
+          paginationProps:
+            pageMaxItemCount: 3
+          contentWrapper:
+            tag: section
+            attributes:
+              class: "card-grid"
+              style:
+                display: flex
+                flexWrap: wrap
+                gap: 1rem
+                justifyContent: center
+                padding: 1rem
+                border: "2px dashed #ccc"
+                borderRadius: 8px
+          after:
+            type: PageControls
+      templates:
+        card:
+          type: div
+          attributes:
+            style:
+              flex: "0 1 150px"
+              padding: 1rem
+              backgroundColor: "#e3f2fd"
+              borderRadius: 8px
+              textAlign: center
+              border: "1px solid #90caf9"
+          content: ~.title
+      data:
+        cards:
+          - title: "Card 1"
+          - title: "Card 2"
+          - title: "Card 3"
+          - title: "Card 4"
+          - title: "Card 5"
+          - title: "Card 6"
+          - title: "Card 7"
+
+  - type: RjBuildDescriber
+    title: "6. Dynamic `contentWrapper` with Template Evaluation"
+    description: |
+      This example demonstrates how contentWrapper attributes can use template evaluation to create dynamic layouts.
+    toDescribe:
+      renderView:
+        - type: Switch
+          content: ~.items
+          singleOption:
+            load: dynamicCard
+          contentWrapper:
+            tag: section
+            attributes:
+              class: ~.wrapperConfig.cssClass
+              style:
+                display: grid
+                gridTemplateColumns: ~.wrapperConfig.columns
+                gap: ~.wrapperConfig.spacing
+                padding: ~.wrapperConfig.padding
+                backgroundColor: ~.theme.background
+                border: ~.theme.border
+                borderRadius: ~.theme.borderRadius
+          before:
+            type: h3
+            attributes:
+              style:
+                color: ~.theme.titleColor
+                textAlign: center
+            content: ~.title
+      templates:
+        dynamicCard:
+          type: div
+          attributes:
+            style:
+              padding: 1rem
+              backgroundColor: ~.theme.cardBackground
+              borderRadius: 6px
+              textAlign: center
+              color: ~.theme.textColor
+          content: ~.name
+      data:
+        title: "Dynamic Gallery"
+        wrapperConfig:
+          cssClass: "dynamic-gallery"
+          columns: "repeat(auto-fit, minmax(150px, 1fr))"
+          spacing: "1.5rem"
+          padding: "2rem"
+        theme:
+          background: "#e8f4fd"
+          border: "2px solid #2196f3"
+          borderRadius: "12px"
+          titleColor: "#1976d2"
+          cardBackground: "#ffffff"
+          textColor: "#333333"
+        items:
+          - name: "Element A"
+          - name: "Element B"
+          - name: "Element C"
+          - name: "Element D"

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

@@ -0,0 +1,96 @@
+# Accordion Component Examples
+
+## Overview
+
+The Accordion component in Reactive-JSON is powered by Bootstrap and provides a collapsible content interface. This component is perfect for organizing content in an expandable/collapsible format.
+
+## Basic Usage
+
+The basic structure consists of a `BsAccordion` container with `AccordionItem` components inside. Each accordion item has a header and a body section.
+
+### Simple Accordion Example
+```yaml
+renderView:
+  - type: BsAccordion
+    attributes:
+      defaultActiveKey: [ 0 ]
+    content:
+      - type: AccordionItem
+        header:
+          type: div
+          content: First accordion item
+        body:
+          type: div
+          content: Content of the first accordion item.
+```
+
+## Advanced Features
+
+### Multiple Items with Complex Content
+```yaml
+renderView:
+  - type: BsAccordion
+    attributes:
+      defaultActiveKey: [ 0 ]
+    content:
+      - type: AccordionItem
+        header:
+          type: div
+          content: First accordion item
+        body:
+          type: div
+          content: Content of the first accordion item.
+      - type: AccordionItem
+        header:
+          type: div
+          content: Second accordion item
+        body:
+          - type: div
+            attributes:
+              class: p-2 text-center
+            content: Content of the second accordion item.
+          - type: div
+            attributes:
+              class: row
+            content:
+              - type: div
+                attributes:
+                  class: col
+                content: Of course, you can put any component you want in it. This is a column...
+              - type: div
+                attributes:
+                  class: col
+                content: ...and this is another column, made with bootstrap's columns.
+```
+
+### Custom Header Formatting
+```yaml
+renderView:
+  - type: AccordionItem
+    header:
+      type: div
+      content:
+        - "Third "
+        - type: span
+          attributes:
+            class: fw-bold
+          content: accordion
+        - " item "
+    body:
+      type: div
+      content: Demonstrates that you can customize in the accordion item heading.
+```
+
+## Key Features
+
+1. **Bootstrap Integration**: The accordion component uses Bootstrap's styling and functionality
+2. **Flexible Content**: Both headers and bodies can contain any valid Reactive-JSON components
+3. **Custom Styling**: Compatible with Bootstrap classes and custom CSS
+4. **Default Active Item**: Can specify which item should be open by default using `defaultActiveKey`
+5. **Nested Components**: Support for complex layouts within accordion items
+
+## Notes
+
+- The accordion component is compatible with any CSS system, although it's built on Bootstrap
+- Headers and bodies can contain any combination of components and styling
+- Use Bootstrap classes for additional styling and layout options 

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

@@ -0,0 +1,64 @@
+renderView:
+  - type: RjBuildDescriber
+    title: HTML
+    description:
+      - type: div
+        content: Accordions are managed by Bootstrap.
+    toDescribe:
+      renderView:
+        - type: BsAccordion
+          attributes:
+            defaultActiveKey: [ 0 ]
+          content:
+            - type: AccordionItem
+              header:
+                type: div
+                content: First accordion item
+              body:
+                type: div
+                content: Content of the first accordion item.
+            - type: AccordionItem
+              header:
+                type: div
+                content: Second accordion item
+              body:
+                - type: div
+                  attributes:
+                    class: p-2 text-center
+                  content: Content of the second accordion item.
+                - type: div
+                  attributes:
+                    class: row
+                  content:
+                    - type: div
+                      attributes:
+                        class: col
+                      content: Of course, you can put any component you want in it. This is a column...
+                    - type: div
+                      attributes:
+                        class: col
+                      content:
+                        ...and this is another column, made with bootstrap's columns. Please note we have the bootstrap CSS
+                        used here, but our tool is compatible with any CSS system.
+            - type: AccordionItem
+              header:
+                type: div
+                content:
+                  - "Third "
+                  - type: span
+                    attributes:
+                      class: fw-bold
+                    content: accordion
+                  - " item "
+              body:
+                type: div
+                content: Demonstrates that you can customize in the accordion item heading, as you could in any other place.
+
+      templates:
+
+      data: { }
+
+
+templates:
+
+data: {}

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

@@ -0,0 +1,197 @@
+# Dynamic Content Example
+
+## Overview
+
+This example demonstrates how to create a dynamic table interface with the following features:
+- Search functionality
+- Bulk selection/deselection
+- Bulk deletion
+- Pagination
+- Row editing via modal dialogs
+
+## Components Used
+
+1. `DataFilter` - For search functionality
+2. `TextField` - For search input
+3. `BsButton` - For various actions
+4. `Switch` - For dynamic content rendering
+5. `PageControls` - For pagination
+6. `Modal` - For edit dialogs
+7. `CheckBoxField` - For row selection
+
+## Example Structure
+
+### Search and Bulk Actions
+```yaml
+renderView:
+  - type: DataFilter
+    context: global
+    filters:
+      - subjectsWithProperty: dynamicContentRow
+        andConditions:
+          - orConditions:
+              - when: ~~._search
+                isEmpty:
+              - whenFilterableData: dynamicContentRow.title
+                contains: ~~._search
+```
+
+### Search Input
+```yaml
+- type: TextField
+  placeholder: Insert some text to search here...
+  dataLocation: ~~._search
+```
+
+### Bulk Action Buttons
+```yaml
+- 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
+```
+
+### Dynamic Table with Pagination
+```yaml
+- 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
+```
+
+### Row Template
+```yaml
+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
+```
+
+### Edit Modal
+```yaml
+- 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
+```
+
+## Key Features
+
+1. **Search Functionality**
+   - Real-time filtering of rows based on title
+   - Empty search shows all rows
+
+2. **Bulk Operations**
+   - Select all rows
+   - Unselect all rows
+   - Delete selected rows
+   - Bulk delete button visibility based on selection
+
+3. **Pagination**
+   - Configurable items per page
+   - Maximum page buttons display
+   - Navigation controls
+
+4. **Row Operations**
+   - Individual row selection
+   - Edit modal for each row
+   - Dynamic update of row content
+
+5. **Data Management**
+   - Global data context
+   - Template-based row rendering
+   - Dynamic data updates
+
+## Implementation Notes
+
+1. The example uses Bootstrap classes for styling
+2. Messages are used for inter-component communication
+3. Data paths use both global (~~) and local (~) contexts
+4. Templates are used for reusable components
+5. Modals are controlled via boolean data paths