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

package/public/rjbuild/docs/core/reaction/removeData.md

@@ -1,13 +1,9 @@
 # Reaction: removeData
 
-## Introduction
-
 The `removeData` reaction deletes data from a specific location in the global data context. It is essential for dynamically managing lists, removing items, or clearing parts of the application state. It can operate in two modes: `path` mode (to target a specific data location) or `target` mode (to target the current template's data).
 
 ## Properties
 
-- `what` (string, required): The name of the reaction, which must be `removeData`.
-- `on` (string, required): The name of the event that triggers the reaction (e.g., `click`).
 - `path` (string, optional): The target location in the data context to delete. Required if `target` is not used.
 - `target` (string, optional): If set to `currentTemplateData`, the reaction will remove the data associated with the current template item.
 - `parentLevel` (number, optional): Used with `target: 'currentTemplateData'`. Specifies how many levels to go up from the current data path before removing. `0` means the current level.
@@ -22,7 +18,7 @@ The `removeData` reaction deletes data from a specific location in the global da
 
 ## Examples
 
-### 1. Using `path` to remove a specific key
+### Using `path` to remove a specific key
 
 This example shows how to delete a specific user profile field by clicking a button.
 
@@ -42,7 +38,7 @@ data:
     email: "john.doe@example.com"
 ```
 
-### 2. Using `target` to remove an item from a list
+### Using `target` to remove an item from a list
 
 This example shows a list of users where each user can be removed by clicking a "Remove" button next to their name. The reaction targets the current item in the iteration.
 

package/public/rjbuild/docs/core/reaction/removeData.yaml

@@ -5,8 +5,46 @@ renderView:
 
       The `removeData` reaction deletes data from a specific location in the global data context. It can operate in two modes: `path` mode or `target` mode.
 
+      ## Properties
+
+  - type: DefinitionList
+    content:
+      - term:
+          code: path
+          after: "(string, optional)"
+        details:
+          type: Markdown
+          content: "Path to the data to remove. Required if `target` is not used"
+      - term:
+          code: target
+          after: "(string, optional)"
+        details:
+          type: Markdown
+          content: "If set to `currentTemplateData`, the reaction will target the data associated with the current template item"
+      - term:
+          code: parentLevel
+          after: "(number, optional)"
+        details:
+          type: Markdown
+          content: "Used with `target: 'currentTemplateData'`. Specifies how many levels to go up from the current data path before removing. `0` means the current level"
+
+  - type: Markdown
+    content: |
+      ## Behavior
+
+      - When triggered, `removeData` deletes the data at the specified location.
+      - **Path Mode**: Uses the `path` property to identify what to remove.
+      - **Target Mode**: Uses `target: 'currentTemplateData'` to remove the current template data item from its parent array.
+      - The reaction has no effect if the target data doesn't exist.
+
+      ## Limitations
+
+      - Either `path` or `target` must be specified.
+      - With `target` mode, the data must be part of an array for removal to work.
+      - Removing non-existent data has no effect (no error is thrown).
+
   - type: RjBuildDescriber
-    title: "1. Using `path` to remove a specific key"
+    title: "Using `path` to remove a specific key"
     description: "This example shows how to delete a specific user profile field by clicking a button."
     toDescribe:
       renderView:
@@ -24,7 +62,7 @@ renderView:
           email: "john.doe@example.com"
 
   - type: RjBuildDescriber
-    title: "2. Using `target` to remove an item from a list"
+    title: "Using `target` to remove an item from a list"
     description: |
       This example shows a list of users where each user can be removed by clicking a "Remove" button next to their name.
       The reaction uses `target: currentTemplateData` to identify which item to remove from the list.

package/public/rjbuild/docs/core/reaction/setClipboardData.md

@@ -1,13 +1,9 @@
 # Reaction: setClipboardData
 
-## Introduction
-
 The `setClipboardData` reaction copies a specified value to the user's clipboard. This is useful for creating "Copy to clipboard" buttons for sharing information like referral codes, URLs, or any text-based data.
 
 ## Properties
 
-- `what` (string, required): The name of the reaction, which must be `setClipboardData`.
-- `on` (string, required): The name of the event that triggers the reaction (e.g., `click`).
 - `value` (any, required): The value to be copied to the clipboard. The value is evaluated, so it can be a literal string or a path to data.
 
 ## Behavior

package/public/rjbuild/docs/core/reaction/setClipboardData.yaml

@@ -7,10 +7,17 @@ renderView:
 
       ## Properties
 
-      - `what` (string, required): The name of the reaction, which must be `setClipboardData`.
-      - `on` (string, required): The name of the event that triggers the reaction (e.g., `click`).
-      - `value` (any, required): The value to be copied to the clipboard. The value is evaluated, so it can be a literal string or a path to data.
+  - type: DefinitionList
+    content:
+      - term:
+          code: value
+          after: "(any, required)"
+        details:
+          type: Markdown
+          content: "The value to be copied to the clipboard. The value is evaluated, so it can be a literal string or a path to data"
 
+  - type: Markdown
+    content: |
       ## Behavior
 
       - When triggered, the reaction evaluates the `value` property.

package/public/rjbuild/docs/core/reaction/setData.md

@@ -1,13 +1,9 @@
 # Reaction: setData
 
-## Introduction
-
 The `setData` reaction updates the data at a specific location in the global data context. It is one of the most fundamental reactions for managing state and making applications interactive. It can be used to set simple values, objects, or the result of a template evaluation.
 
 ## Properties
 
-- `what` (string, required): The name of the reaction, which must be `setData`.
-- `on` (string, required): The name of the event that triggers the reaction (e.g., `click`, `change`).
 - `path` (string, required): The target location in the data context where the value will be set. It supports `~.` notation for relative paths.
 - `value` (any, required): The value to set at the specified path. This value is evaluated, so it can be a literal, a path to other data, or a template string.
 - **Conditional properties** (optional): Like all reactions, `setData` supports conditional execution using `when`, `is`, `isNot`, `isEmpty`, `contains`, `>`, `<`, `>=`, `<=`, `andConditions`, `orConditions`.

package/public/rjbuild/docs/core/reaction/setData.yaml

@@ -5,14 +5,32 @@ renderView:
 
       The `setData` reaction updates the data at a specific location in the global data context. It is one of the most fundamental reactions for managing state and making applications interactive. It can be used to set simple values, objects, or the result of a template evaluation.
 
-      ### Properties
-      - `what` (string, required): The name of the reaction, which must be `setData`.
-      - `on` (string, required): The name of the event that triggers the reaction (e.g., `click`, `change`).
-      - `path` (string, required): The target location in the data context where the value will be set. It supports `~.` notation for relative paths.
-      - `value` (any, required): The value to set at the specified path. This value is evaluated, so it can be a literal, a path to other data, or a template string.
-      - **Conditional properties** (optional): Like all reactions, `setData` supports conditional execution using `when`, `is`, `isNot`, `isEmpty`, `contains`, `>`, `<`, `>=`, `<=`, `andConditions`, `orConditions`.
+      ## Properties
 
-      ### Behavior
+  - type: DefinitionList
+    content:
+      - term:
+          code: path
+          after: "(string, required)"
+        details:
+          type: Markdown
+          content: "The target location in the data context where the value will be set. It supports `~.` notation for relative paths"
+      - term:
+          code: value
+          after: "(any, required)"
+        details:
+          type: Markdown
+          content: "The value to set at the specified path. This value is evaluated, so it can be a literal, a path to other data, or a template string"
+      - term:
+          code: conditionalProperties
+          after: "(optional)"
+        details:
+          type: Markdown
+          content: "Like all reactions, `setData` supports conditional execution using `when`, `is`, `isNot`, `isEmpty`, `contains`, `>`, `<`, `>=`, `<=`, `andConditions`, `orConditions`"
+
+  - type: Markdown
+    content: |
+      ## Behavior
       - When triggered by the specified event (`on`), `setData` evaluates the `value` property within the current context.
       - It then updates the data at the location specified by `path`.
       - If the `value` is an object or an array, it is deep-cloned before being set to prevent shared-state mutations.

package/public/rjbuild/docs/core/reaction/submitData.md

@@ -1,6 +1,5 @@
 # Reactive-JSON submitData Documentation
 
-## Introduction
 `submitData` is a reaction that allows sending data to a server via HTTP requests (usually POST). It's especially useful for form submissions and API interactions.
 
 - The payload can be customized with the `data` property.
@@ -44,7 +43,7 @@ This limitation is intentional to avoid data consistency issues but may be restr
 ### Styling Submitting State (CSS)
 You can visually disable form controls during submission using CSS. There are two main approaches:
 
-#### 1. Target only the submitting control (button, input, etc.)
+#### Target only the submitting control (button, input, etc.)
 The element that triggered the submission receives `data-is-submitting="true"` during the request:
 
 ```css
@@ -58,7 +57,7 @@ textarea[data-is-submitting="true"] {
 }
 ```
 
-#### 2. Target all controls globally during submission
+#### Target all controls globally during submission
 While a submission is in progress, the `<body>` receives `data-html-builder-is-submitting="true"`. You can use this to disable all form controls:
 
 ```css

package/public/rjbuild/docs/core/reaction/submitData.yaml

@@ -10,14 +10,50 @@ renderView:
       - The response can refresh the app (default) or be ignored.
 
       ## Properties
-      - `url` (string, required): The destination URL for the request
-      - `httpMethod` (string, optional): The HTTP method to use (default: "post")
-      - `data` (object, optional): The data to send. If not specified, data is sent in an object with the structure `{ data: globalDataContext.templateData }`. If `__state` exists in the context, it is automatically added.
-      - `refreshAppOnResponse` (boolean, optional): If true (default), reloads the application with the server response. If false, the response is ignored and **no change is made to the application's state or display** (just like `fetchData`).
-      - `submitSilently` (boolean, optional): If true, doesn't apply visual disabling styles during submission
-      - `updateOnlyData` (boolean, optional): When true and `refreshAppOnResponse` is true, only updates the data section instead of replacing the entire RjBuild. Preserves templates and renderView. Default: false.
-      - `updateDataAtLocation` (string, optional): When `updateOnlyData` is true, specifies where to place the response data using template path syntax (e.g., "~~.userProfile", "~.config.settings"). If not specified, replaces the entire data object.
 
+  - type: DefinitionList
+    content:
+      - term:
+          code: url
+          after: "(string, required)"
+        details: "The destination URL for the request"
+      - term:
+          code: httpMethod
+          after: "(string, optional)"
+        details:
+          type: Markdown
+          content: "The HTTP method to use (default: \"post\")"
+      - term:
+          code: data
+          after: "(object, optional)"
+        details:
+          type: Markdown
+          content: "The data to send. If not specified, data is sent in an object with the structure `{ data: globalDataContext.templateData }`. If `__state` exists in the context, it is automatically added"
+      - term:
+          code: refreshAppOnResponse
+          after: "(boolean, optional)"
+        details:
+          type: Markdown
+          content: "If true (default), reloads the application with the server response. If false, the response is ignored and **no change is made to the application's state or display** (just like `fetchData`)"
+      - term:
+          code: submitSilently
+          after: "(boolean, optional)"
+        details: "If true, doesn't apply visual disabling styles during submission"
+      - term:
+          code: updateOnlyData
+          after: "(boolean, optional)"
+        details:
+          type: Markdown
+          content: "When true and `refreshAppOnResponse` is true, only updates the data section instead of replacing the entire RjBuild. Preserves templates and renderView. Default: false"
+      - term:
+          code: updateDataAtLocation
+          after: "(string, optional)"
+        details:
+          type: Markdown
+          content: "When `updateOnlyData` is true, specifies where to place the response data using template path syntax (e.g., \"~~.userProfile\", \"~.config.settings\"). If not specified, replaces the entire data object"
+
+  - type: Markdown
+    content: |
       ## Behavior
       - Only one submission can be active at a time (global lock)
       - The default HTTP method is POST, but can be customized

package/public/rjbuild/docs/core/reaction/triggerEvent.md

@@ -1,13 +1,9 @@
 # Reaction: triggerEvent
 
-## Introduction
-
 The `triggerEvent` reaction programmatically dispatches an event on one or more target elements found via a CSS selector. This allows for indirect interactions, such as one button triggering the `click` event of another element, or simulating user actions on specific components.
 
 ## Properties
 
-- `what` (string, required): The name of the reaction, must be `triggerEvent`.
-- `on` (string, required): The event that triggers this reaction.
 - `eventName` (string, required): The name of the event to dispatch on the target element(s) (e.g., `click`, `focus`).
 - `selector` (string, required): A CSS selector to identify the target element(s) that will receive the event.
 - `selectorBase` (string, optional): Defines the starting point for the `selector` search.

package/public/rjbuild/docs/core/reaction/triggerEvent.yaml

@@ -7,15 +7,31 @@ renderView:
 
       ## Properties
 
-      - `what` (string, required): The name of the reaction, must be `triggerEvent`.
-      - `on` (string, required): The event that triggers this reaction.
-      - `eventName` (string, required): The name of the event to dispatch on the target element(s) (e.g., `click`, `focus`).
-      - `selector` (string, required): A CSS selector to identify the target element(s) that will receive the event.
-      - `selectorBase` (string, optional): Defines the starting point for the `selector` search.
-        - If omitted, the search starts from the `document` root.
-        - If set to `'currentEventTarget'`, the search starts from the element that triggered the reaction.
-        - If set to another CSS selector, the search starts from the closest ancestor matching that selector.
+  - type: DefinitionList
+    content:
+      - term:
+          code: eventName
+          after: "(string, required)"
+        details:
+          type: Markdown
+          content: "The name of the event to dispatch on the target element(s) (e.g., `click`, `focus`)"
+      - term:
+          code: selector
+          after: "(string, required)"
+        details: "A CSS selector to identify the target element(s) that will receive the event"
+      - term:
+          code: selectorBase
+          after: "(string, optional)"
+        details:
+          type: Markdown
+          content: |
+            Defines the starting point for the `selector` search.
+            - If omitted, the search starts from the `document` root.
+            - If set to `'currentEventTarget'`, the search starts from the element that triggered the reaction.
+            - If set to another CSS selector, the search starts from the closest ancestor matching that selector.
 
+  - type: Markdown
+    content: |
       ## Behavior
 
       - When triggered, the reaction searches for elements matching the `selector` within the scope defined by `selectorBase`.
@@ -32,9 +48,7 @@ renderView:
   - type: RjBuildDescriber
     title: "Triggering a click on another element"
     description: |
-      In this example, clicking the first button does not update the status directly. Instead, it dispatches a `click` event on the second button.
-      The second button has its own `click` reaction that updates the status.
-      Therefore, clicking either button will result in the same final action: the status text gets updated.
+      In this example, clicking the first button (`Trigger a click...`) does not update the status directly. Instead, it dispatches a `click` event on the second button (`Update the status`). The second button has its own `click` reaction that updates the status. Therefore, clicking either button will result in the same final action: the status text gets updated.
     toDescribe:
       renderView:
         - type: button

package/public/rjbuild/docs/install.md

@@ -12,22 +12,22 @@ Adapt commands according to the execution environment (Windows, Ubuntu, Mac...).
 
 ## Table of Contents
 
-1. [Project Directory Confirmation](#1-project-directory-confirmation)
-2. [Collecting User Information](#2-collecting-user-information)
-3. [Documentation Repositories Setup](#3-documentation-repositories-setup)
-4. [Cursor Workspace Configuration](#4-cursor-workspace-configuration)
-5. [Vite Project Initialization](#5-vite-project-initialization)
-6. [Project Structure Verification](#6-project-structure-verification)
-7. [Dependencies Installation](#7-dependencies-installation)
-8. [Cursor Project Rules Creation](#8-cursor-project-rules-creation)
-9. [Generated Project Cleanup](#9-generated-project-cleanup)
-10. [Basic Configuration with ReactiveJsonRoot](#10-basic-configuration-with-reactivejsonroot)
-11. [Routing Configuration (Optional)](#11-routing-configuration-optional)
-12. [Final Verification](#12-final-verification)
+1. [Project Directory Confirmation](#project-directory-confirmation)
+2. [Collecting User Information](#collecting-user-information)
+3. [Documentation Repositories Setup](#documentation-repositories-setup)
+4. [Cursor Workspace Configuration](#cursor-workspace-configuration)
+5. [Vite Project Initialization](#vite-project-initialization)
+6. [Project Structure Verification](#project-structure-verification)
+7. [Dependencies Installation](#dependencies-installation)
+8. [Cursor Project Rules Creation](#cursor-project-rules-creation)
+9. [Generated Project Cleanup](#generated-project-cleanup)
+10. [Basic Configuration with ReactiveJsonRoot](#basic-configuration-with-reactivejsonroot)
+11. [Routing Configuration (Optional)](#routing-configuration-optional)
+12. [Final Verification](#final-verification)
 
 ## Chronological Steps
 
-### 1. Project Directory Confirmation
+### Project Directory Confirmation
 
 **Action:** Show the user if the IDE is opened in the directory where the project will
 be initialized, then ask for confirmation:
@@ -51,7 +51,7 @@ be initialized, then ask for confirmation:
 
 ---
 
-### 2. Collecting User Information
+### Collecting User Information
 
 **Action:** Ask the user for the following information:
 
@@ -70,7 +70,7 @@ When invalid, ask again the location with valid suggestions.
 
 ---
 
-### 3. Documentation Repositories Setup
+### Documentation Repositories Setup
 
 **Action:** Clone the required documentation repositories
 
@@ -89,7 +89,7 @@ git clone https://github.com/Ealab-collab/reactive-json-docs.git
 
 ---
 
-### 4. Cursor Workspace Configuration
+### Cursor Workspace Configuration
 
 **Action:** Ask the user to add repositories to the workspace
 
@@ -107,7 +107,7 @@ git clone https://github.com/Ealab-collab/reactive-json-docs.git
 
 ---
 
-### 5. Vite Project Initialization
+### Vite Project Initialization
 
 **Action:** Create the project with Vite in the current directory
 
@@ -126,7 +126,7 @@ npm create vite@latest . -- --template react
 
 ---
 
-### 6. Project Structure Verification
+### Project Structure Verification
 
 **Action:** Verify the project structure is correct
 
@@ -157,7 +157,7 @@ ls -la
 
 ---
 
-### 7. Dependencies Installation
+### Dependencies Installation
 
 **Action:** Install required packages
 
@@ -170,7 +170,7 @@ npm install @ea-lab/reactive-json bootstrap react-bootstrap axios clsx dnd-kit-s
 
 ---
 
-### 8. Cursor Project Rules Creation
+### Cursor Project Rules Creation
 
 **Action:** Copy Cursor rules from documentation repositories
 
@@ -200,7 +200,7 @@ These rules contain all the necessary directives to work effectively with reacti
 
 ---
 
-### 9. Generated Project Cleanup
+### Generated Project Cleanup
 
 **Action:** Remove/clean files generated by Vite
 
@@ -230,7 +230,7 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
 
 ---
 
-### 10. Basic Configuration with ReactiveJsonRoot
+### Basic Configuration with ReactiveJsonRoot
 
 **Action:** Configure the base component with an external YAML file
 
@@ -259,7 +259,7 @@ renderView:
 
 ---
 
-### 11. Routing Configuration (Optional)
+### Routing Configuration (Optional)
 
 **Action:** Ask the user if they want to add routing for application organization
 
@@ -385,7 +385,7 @@ renderView:
 
 ---
 
-### 12. Final Verification
+### Final Verification
 
 **Action:** Launch development server