@ea-lab/reactive-json-docs 0.8.0 → 1.0.0

package/public/rjbuild/docs/core/attributeTransformer/unsetAttribute.yaml

@@ -0,0 +1,138 @@
+renderView:
+  - type: Markdown
+    content: |
+      # unsetAttribute
+
+      > **Alternative**: For post-render DOM modification, see the [UnsetAttribute action](../action/Attribute/UnsetAttribute).
+
+      Completely removes an HTML attribute from an element.
+
+      ## Basic Syntax
+
+  - type: TabbedSerializer
+    yamlSerializedContent: |
+      attributeTransforms:
+        # Remove entire attribute
+        - what: unsetAttribute
+          name: "class"
+          
+        # Conditional removal
+        - what: unsetAttribute
+          name: "style"
+          when: ~.useDefaultStyling
+          is: true
+
+  - type: Markdown
+    content: |
+      ## Properties
+
+  - type: DefinitionList
+    content:
+      - term:
+          code: name
+          after: "(string, required)"
+        details: The name of the attribute to remove completely.
+
+  - type: Markdown
+    content: |
+
+      ## Behavior
+
+      - **Complete removal**: Removes the entire attribute and all its values from the DOM element.
+      - **Attribute deletion**: The attribute is completely deleted, not just emptied.
+      - **Irreversible**: Once removed, the attribute must be explicitly set again to restore it.
+
+      ## Common Use Cases
+
+      - **Conditional attribute presence**: Removing attributes entirely based on conditions.
+      - **Accessibility cleanup**: Removing ARIA attributes when not needed.
+      - **Data attribute management**: Completely removing data-* attributes.
+      - **Style reset**: Removing inline style attributes to fall back to CSS.
+
+  - type: RjBuildDescriber
+    title: "UnsetAttribute Action Examples"
+    description:
+      - type: Markdown
+        content: |
+          This example demonstrates how to completely remove HTML attributes using the `UnsetAttribute` action.
+          
+          **Expected behavior:**
+          - Initially, the input field is read-only (you cannot type in it) and has visual styling
+          - Click "Remove readonly attribute" to remove the entire readonly attribute - the input becomes editable
+          - Click "Reset" to restore the readonly attribute - the input becomes read-only again
+          - The action completely removes the entire attribute, not just its value
+          
+          Try interacting with the buttons to see how the readonly attribute is completely removed/restored.
+
+    toDescribe:
+      renderView:
+        - type: button
+          content: "Remove readonly attribute"
+          actions:
+            - what: setData
+              on: click
+              path: ~.makeEditable
+              value: true
+              stopPropagation: true
+
+        - type: button
+          content: "Reset"
+          actions:
+            - what: setData
+              on: click
+              path: ~.makeEditable
+              value: false
+              stopPropagation: true
+
+        - type: input
+          attributes:
+            type: "text"
+            value: ~.input_value
+            placeholder: "Try typing here when readonly is removed..."
+            class: "ua-demo-input"
+            readonly: "readonly"
+            style:
+              padding: "10px"
+              border: "2px solid #007bff"
+              borderRadius: "4px"
+              fontSize: "16px"
+              margin: "10px 0"
+              width: "300px"
+              display: "block"
+          attributeTransforms:
+            - what: unsetAttribute
+              name: "readonly"
+              when: ~.makeEditable
+              is: true
+          actions:
+            - what: setData
+              on: change
+              path: ~.input_value
+              value: <reactive-json:event-new-value>
+
+        - type: style
+          content: |
+            .ua-demo-input[readonly] {
+              cursor: not-allowed !important;
+              opacity: 0.7 !important;
+              border-color: #6c757d !important;
+            }
+            .ua-demo-input:not([readonly]) {
+              border-color: #28a745 !important;
+              outline: 2px solid #28a745 !important;
+              outline-offset: 2px !important;
+            }
+
+      data:
+        makeEditable: false
+        input_value: ""
+
+  - type: Markdown
+    content: |
+      ## Notes
+
+      - This action **completely removes the entire attribute**, not just specific values.
+      - Use `UnsetAttributeValue` if you only want to remove specific values.
+      - The attribute can be restored using `SetAttributeValue` if needed.
+      - **Important**: To set an empty attribute (not remove it), use `SetAttributeValue` with an empty string value.
+      - Useful for conditional attribute presence rather than conditional values.

package/public/rjbuild/docs/core/attributeTransformer/unsetAttributeValue.md

@@ -0,0 +1,140 @@
+# unsetAttributeValue
+
+> **Alternative**: For post-render DOM modification, see the [UnsetAttributeValue action](../action/Attribute/UnsetAttributeValue.md).
+
+Removes a specific value from an HTML attribute while preserving other values. This attribute transformer allows you to conditionally remove specific values from space-separated attributes before rendering.
+
+## Basic Syntax
+
+```yaml
+attributeTransforms:
+  # Remove CSS class
+  - what: unsetAttributeValue
+    name: "class"
+    value: "highlighted"
+    
+  # Remove with template
+  - what: unsetAttributeValue
+    name: "data-tags"
+    value: ~.tagToRemove
+```
+
+## Properties
+
+- **name** *(string, required)*: The name of the attribute to modify.
+- **separator** *(string, optional)*: The separator used between values. Default: `" "` (space).
+- **unsetAllOccurrences** *(boolean, optional)*: When `true` (default), removes all occurrences of the value from the attribute. When `false`, removes the number of elements defined by `unsetCount`.
+- **unsetCount** *(number, optional)*: Specifies the number of objects to remove. Supports template evaluation and is cast to integer. When `0`, removes nothing. When `1` or more, removes the specified number of elements starting from the beginning of the string. When `-1` or less, removes the specified number of elements starting from the end of the string. When undefined or invalid, defaults to removing all occurrences (equivalent to `unsetAllOccurrences: true`).
+- **value** *(string, required)*: The value to remove from the attribute. Supports template evaluation (e.g., `~.dynamicValue`, `~~.globalValue`). Automatically converted to string if not already.
+
+## Behavior
+
+- **Selective removal**: Removes only the specified value from the attribute.
+- **Occurrence control**: Removes all occurrences by default, or only the first when configured.
+- **Count control**: When `unsetCount` is specified, controls the exact number of elements to remove and the direction (from beginning or end).
+- **Preservation**: Other values in the attribute remain intact.
+
+## Logic Reference
+
+### Behavior Matrix
+
+| `unsetAllOccurrences` | `unsetCount` | Behavior | Notes |
+|:---------------------:|:------------:|:---------|:------|
+| `true` | *ignored* | **Removes ALL occurrences** | `unsetCount` is completely ignored |
+| `false` | `1` | Removes **1 occurrence** from beginning | Default behavior when `unsetCount` is valid |
+| `false` | `2` | Removes **2 occurrences** from beginning | |
+| `false` | `-1` | Removes **1 occurrence** from end | |
+| `false` | `-2` | Removes **2 occurrences** from end | |
+| `false` | `0` | **Removes nothing** | |
+| `false` | `undefined` | **Removes ALL occurrences** | Fallback to "all" behavior |
+| `false` | `null` | **Removes ALL occurrences** | Fallback to "all" behavior |
+| `false` | `"invalid"` | **Removes ALL occurrences** | Fallback to "all" behavior |
+| `undefined` | `1` | Removes **1 occurrence** from beginning | `unsetAllOccurrences` defaults to `true`, but valid `unsetCount` applies |
+| `undefined` | `-1` | Removes **1 occurrence** from end | |
+| `undefined` | `0` | **Removes nothing** | |
+| `undefined` | `undefined` | **Removes ALL occurrences** | Complete default behavior |
+
+### Logic Summary
+
+1. **If `unsetAllOccurrences: true`** → removes ALL, ignores `unsetCount`
+2. **If `unsetAllOccurrences: false` AND `unsetCount` valid** → uses `unsetCount`
+3. **If `unsetCount` invalid/undefined** → fallback to "remove ALL" even if `unsetAllOccurrences: false`
+4. **If nothing is defined** → default behavior = "remove ALL"
+
+This logic ensures there is always a defined behavior, with an intelligent fallback to "remove all" when parameters are invalid.
+
+## Common Use Cases
+
+- **CSS class removal**: Removing specific CSS classes while keeping others.
+- **Data attribute cleanup**: Removing specific values from space-separated data attributes.
+- **Conditional styling**: Removing styling classes based on state changes.
+
+## Example
+
+```yaml
+renderView:
+  - type: button
+    content: "Remove 'highlighted' class"
+    actions:
+      - what: setData
+        on: click
+        path: ~.removeHighlight
+        value: true
+        stopPropagation: true
+
+  - type: button
+    content: "Reset"
+    actions:
+      - what: setData
+        on: click
+        path: ~.removeHighlight
+        value: false
+        stopPropagation: true
+
+  - type: input
+    attributes:
+      type: "text"
+      value: "This input has multiple classes..."
+      class: "uav-readonly uav-highlighted"
+      readonly: "readonly"
+      style:
+        padding: "10px"
+        border: "2px solid #007bff"
+        borderRadius: "4px"
+        fontSize: "16px"
+        margin: "10px 0"
+        width: "300px"
+        display: "block"
+    attributeTransforms:
+      - what: unsetAttributeValue
+        name: "class"
+        value: "uav-highlighted"
+        when: ~.removeHighlight
+        is: true
+
+  - type: style
+    content: |
+      .uav-readonly {
+        cursor: not-allowed !important;
+        opacity: 0.7 !important;
+      }
+      .uav-highlighted {
+        border-color: #ffc107 !important;
+        outline: 2px solid #ffc107 !important;
+        outline-offset: 2px !important;
+      }
+
+data:
+  removeHighlight: false
+```
+
+## Notes
+
+- **Pre-render execution**: This transformer removes attribute values before the component renders, ensuring child components receive the transformed attributes.
+- **Selective removal**: Only removes exact matches of the specified value.
+- **Value preservation**: Maintains the integrity of other attribute values.
+- **Separator support**: Works with any space-separated attribute values.
+- **Safe operation**: Safe to use even if the value doesn't exist in the attribute.
+- **Template evaluation**: The value property supports full template evaluation including `~.localData`, `~~.globalData`, `~>nearestKey`, and `~~>globalKey` patterns.
+- **Count control**: Advanced removal patterns with `unsetCount` and `unsetAllOccurrences` for precise control.
+- **Conditional execution**: Supports the same condition system as actions (`when`, `is`, `isEmpty`, `isNotEmpty`, etc.).

package/public/rjbuild/docs/core/attributeTransformer/unsetAttributeValue.yaml

@@ -0,0 +1,187 @@
+renderView:
+  - type: Markdown
+    content: |
+      # unsetAttributeValue
+
+      > **Alternative**: For post-render DOM modification, see the [UnsetAttributeValue action](../action/Attribute/UnsetAttributeValue).
+
+      Removes a specific value from an HTML attribute while preserving other values.
+
+      ## Basic Syntax
+
+  - type: TabbedSerializer
+    yamlSerializedContent: |
+      attributeTransforms:
+        # Remove CSS class
+        - what: unsetAttributeValue
+          name: "class"
+          value: "highlighted"
+          
+        # Remove with template
+        - what: unsetAttributeValue
+          name: "data-tags"
+          value: ~.tagToRemove
+
+  - type: Markdown
+    content: |
+      ## Properties
+
+  - type: DefinitionList
+    content:
+      - term:
+          code: name
+          after: "(string, required)"
+        details: The name of the attribute to modify.
+      - term:
+          code: separator
+          after: "(string, optional)"
+        details:
+          type: Markdown
+          content: |
+            The separator used between values. Default: `" "` (space).
+      - term:
+          code: unsetAllOccurrences
+          after: "(boolean, optional)"
+        details:
+          type: Markdown
+          content: |
+            When `true` (default), removes all occurrences of the value from the attribute. When `false`, removes the number of elements defined by `unsetCount`.
+      - term:
+          code: unsetCount
+          after: "(number, optional)"
+        details:
+          type: Markdown
+          content: |
+            Specifies the number of objects to remove. Supports template evaluation and is cast to integer. When `0`, removes nothing. When `1` or more, removes the specified number of elements starting from the beginning of the string. When `-1` or less, removes the specified number of elements starting from the end of the string. When undefined or invalid, defaults to removing all occurrences (equivalent to `unsetAllOccurrences: true`).
+      - term:
+          code: value
+          after: "(string, required)"
+        details:
+          type: Markdown
+          content: |
+            The value to remove from the attribute. Supports template evaluation (e.g., `~.dynamicValue`, `~~.globalValue`). Automatically converted to string if not already.
+
+  - type: Markdown
+    content: |
+      ## Behavior
+
+      - **Selective removal**: Removes only the specified value from the attribute.
+      - **Occurrence control**: Removes all occurrences by default, or only the first when configured.
+      - **Count control**: When `unsetCount` is specified, controls the exact number of elements to remove and the direction (from beginning or end).
+      - **Preservation**: Other values in the attribute remain intact.
+
+      ## Logic Reference
+
+      ### Behavior Matrix
+
+      | `unsetAllOccurrences` | `unsetCount` | Behavior | Notes |
+      |:---------------------:|:------------:|:---------|:------|
+      | `true` | *ignored* | **Removes ALL occurrences** | `unsetCount` is completely ignored |
+      | `false` | `1` | Removes **1 occurrence** from beginning | Default behavior when `unsetCount` is valid |
+      | `false` | `2` | Removes **2 occurrences** from beginning | |
+      | `false` | `-1` | Removes **1 occurrence** from end | |
+      | `false` | `-2` | Removes **2 occurrences** from end | |
+      | `false` | `0` | **Removes nothing** | |
+      | `false` | `undefined` | **Removes ALL occurrences** | Fallback to "all" behavior |
+      | `false` | `null` | **Removes ALL occurrences** | Fallback to "all" behavior |
+      | `false` | `"invalid"` | **Removes ALL occurrences** | Fallback to "all" behavior |
+      | `undefined` | `1` | Removes **1 occurrence** from beginning | `unsetAllOccurrences` defaults to `true`, but valid `unsetCount` applies |
+      | `undefined` | `-1` | Removes **1 occurrence** from end | |
+      | `undefined` | `0` | **Removes nothing** | |
+      | `undefined` | `undefined` | **Removes ALL occurrences** | Complete default behavior |
+
+      ### Logic Summary
+
+      1. **If `unsetAllOccurrences: true`** → removes ALL, ignores `unsetCount`
+      2. **If `unsetAllOccurrences: false` AND `unsetCount` valid** → uses `unsetCount`
+      3. **If `unsetCount` invalid/undefined** → fallback to "remove ALL" even if `unsetAllOccurrences: false`
+      4. **If nothing is defined** → default behavior = "remove ALL"
+
+      This logic ensures there is always a defined behavior, with an intelligent fallback to "remove all" when parameters are invalid.
+
+      ## Common Use Cases
+
+      - **CSS class removal**: Removing specific CSS classes while keeping others.
+      - **Data attribute cleanup**: Removing specific values from space-separated data attributes.
+      - **Conditional styling**: Removing styling classes based on state changes.
+
+  - type: RjBuildDescriber
+    title: "UnsetAttributeValue Action Examples"
+    description:
+      - type: Markdown
+        content: |
+          This example demonstrates how to selectively remove specific CSS classes using the `UnsetAttributeValue` action.
+          
+          **Expected behavior:**
+          - Initially, the input field has both 'readonly' and 'highlighted' classes (readonly + visual styling)
+          - Click "Remove 'highlighted' class" to remove only the 'highlighted' class (removing visual styling but keeping readonly)
+          - Click "Reset" to restore the original classes
+          - Notice how only the specified value is removed while other classes remain intact
+          
+          Try interacting with the buttons to see how specific classes are selectively removed.
+
+    toDescribe:
+      renderView:
+        - type: button
+          content: "Remove 'highlighted' class"
+          actions:
+            - what: setData
+              on: click
+              path: ~.removeHighlight
+              value: true
+              stopPropagation: true
+
+        - type: button
+          content: "Reset"
+          actions:
+            - what: setData
+              on: click
+              path: ~.removeHighlight
+              value: false
+              stopPropagation: true
+
+        - type: input
+          attributes:
+            type: "text"
+            value: "This input has multiple classes..."
+            class: "uav-readonly uav-highlighted"
+            readonly: "readonly"
+            style:
+              padding: "10px"
+              border: "2px solid #007bff"
+              borderRadius: "4px"
+              fontSize: "16px"
+              margin: "10px 0"
+              width: "300px"
+              display: "block"
+          attributeTransforms:
+            - what: unsetAttributeValue
+              name: "class"
+              value: "uav-highlighted"
+              when: ~.removeHighlight
+              is: true
+
+        - type: style
+          content: |
+            .uav-readonly {
+              cursor: not-allowed !important;
+              opacity: 0.7 !important;
+            }
+            .uav-highlighted {
+              border-color: #ffc107 !important;
+              outline: 2px solid #ffc107 !important;
+              outline-offset: 2px !important;
+            }
+
+      data:
+        removeHighlight: false
+
+  - type: Markdown
+    content: |
+      ## Notes
+
+      - Only removes exact matches of the specified value.
+      - Maintains the integrity of other attribute values.
+      - Works with any space-separated attribute values.
+      - Safe to use even if the value doesn't exist in the attribute.
+      - The value property supports full template evaluation including `~.localData`, `~~.globalData`, `~>nearestKey`, and `~~>globalKey` patterns.

package/public/rjbuild/docs/core/dataMapping/simpleMapping.yaml

@@ -134,10 +134,15 @@ renderView:
                   version: "v1.2.3"
                 status: "success"
 
-        - type: BsButton
+        - type: button
           content: "Simulate API Call with Data Mapping"
           attributes:
-            class: "btn btn-primary mb-3"
+            style:
+              padding: "8px 16px"
+              margin: "8px 0"
+              border: "1px solid #007bff"
+              borderRadius: "4px"
+              cursor: "pointer"
           actions:
             - what: fetchData
               on: click
@@ -250,10 +255,15 @@ renderView:
                 
                 The mapping below tries to extract `user.name` and `user.email` which don't exist in this response, triggering the `onErrorMap` fallback values.
 
-        - type: BsButton
+        - type: button
           content: "Test Missing Data Handling"
           attributes:
-            class: "btn btn-warning mb-3"
+            style:
+              padding: "8px 16px"
+              margin: "8px 0"
+              border: "1px solid #ffc107"
+              borderRadius: "4px"
+              cursor: "pointer"
           actions:
             - what: fetchData
               on: click