@ea-lab/reactive-json-docs 0.7.0 → 1.0.0-alpha.0

package/public/rjbuild/docs/core/element/html/Html.yaml

@@ -8,10 +8,27 @@ renderView:
       **Note:** The `tag` property must be a static string. It cannot be set dynamically via template or data.
 
       ## Properties
-      - `tag` (string, required): The HTML tag to render (e.g., div, span, section)
-      - `attributes` (object, optional): Attributes for the tag (class, id, etc.)
-      - `content` (object/array, optional): Content to render inside the tag (any Reactive-JSON view or array)
-      - `extra` (object, optional): Additional content rendered after the main tag
+
+  - type: DefinitionList
+    content:
+      - term:
+          code: tag
+          after: "(string, required)"
+        details:
+          type: Markdown
+          content: "The HTML tag to render (e.g., div, span, section)."
+      - term:
+          code: attributes
+          after: "(object, optional)"
+        details: "Attributes for the tag (class, id, etc.)."
+      - term:
+          code: content
+          after: "(object|array, optional)"
+        details: "Content to render inside the tag (any Reactive-JSON view or array)."
+      - term:
+          code: extra
+          after: "(object, optional)"
+        details: "Additional content rendered after the main tag."
 
   - type: BsAlert
     attributes:
@@ -60,8 +77,8 @@ renderView:
   - type: Markdown
     content: |
       ## Limitations
-      - The `tag` property does not support template evaluation and must be a static string
-      - No validation of tag names; invalid tags may cause rendering errors
-      - No support for dangerouslySetInnerHTML (use PreformattedMarkup for raw HTML)
-      - No built-in support for event handlers (use actions system for interactivity)
-      - No automatic support for custom attributes beyond React's attribute normalization
+      - The `tag` property does not support template evaluation and must be a static string.
+      - No validation of tag names; invalid tags may cause rendering errors.
+      - No support for dangerouslySetInnerHTML (use PreformattedMarkup for raw HTML).
+      - No built-in support for event handlers (use actions system for interactivity).
+      - No automatic support for custom attributes beyond React's attribute normalization.

package/public/rjbuild/docs/core/element/html/LabelFromValue.yaml

@@ -6,10 +6,27 @@ renderView:
       The `LabelFromValue` component displays the label associated with a value, using an option-like structure. It is useful for showing the display label of a value selected in a SelectField or any value/label mapping.
 
       ## Properties
-      - `dataLocation` (string, required): Path to the value
-      - `options` (array, optional): Array of `{label, value}` objects
-      - `dynamicOptions` (any, optional): Template value for dynamic options
-      - `defaultFieldValue` (any, optional): Default value if none is set
+
+  - type: DefinitionList
+    content:
+      - term:
+          code: dataLocation
+          after: "(string, required)"
+        details: "Path to the value."
+      - term:
+          code: options
+          after: "(array, optional)"
+        details:
+          type: Markdown
+          content: "Array of `{label, value}` objects."
+      - term:
+          code: dynamicOptions
+          after: "(any, optional)"
+        details: "Template value for dynamic options."
+      - term:
+          code: defaultFieldValue
+          after: "(any, optional)"
+        details: "Default value if none is set."
 
   - type: RjBuildDescriber
     title: "Interactive Example: Display label from value"
@@ -48,7 +65,7 @@ renderView:
   - type: Markdown
     content: |
       ## Limitations
-      - Only the first matching label is displayed; duplicate values in options are not supported
-      - No support for grouped options or nested structures
-      - No built-in formatting for the label (use a wrapper if needed)
-      - If no options are provided, the raw value is shown
+      - Only the first matching label is displayed; duplicate values in options are not supported.
+      - No support for grouped options or nested structures.
+      - No built-in formatting for the label (use a wrapper if needed).
+      - If no options are provided, the raw value is shown.

package/public/rjbuild/docs/core/element/html/PreformattedMarkup.yaml

@@ -6,10 +6,26 @@ renderView:
       The `PreformattedMarkup` component renders HTML content with a strict allowlist of tags for safety. Use it to display rich text or HTML snippets, with filtering to prevent unwanted markup.
 
       ## Properties
-      - `content` (string, required): The HTML string to render (can use template values)
-      - `htmlTagAllowList` (array, optional): List of allowed tags (overrides default)
-      - `additionalAllowedTags` (array, optional): Tags to add to the allowlist
 
+  - type: DefinitionList
+    content:
+      - term:
+          code: content
+          after: "(string, required)"
+        details:
+          type: Markdown
+          content: "The HTML string to render (can use template values)."
+      - term:
+          code: htmlTagAllowList
+          after: "(array, optional)"
+        details: List of allowed tags (overrides default).
+      - term:
+          code: additionalAllowedTags
+          after: "(array, optional)"
+        details: Tags to add to the allowlist.
+
+  - type: Markdown
+    content: |
       **Default allowed tags:** abbr, acronym, b, blockquote, br, caption, code, div, em, h1-h6, i, li, ol, p, span, sup, strong, table, tbody, td, tfoot, th, thead, tr, ul
 
   - type: RjBuildDescriber
@@ -31,7 +47,7 @@ renderView:
   - type: Markdown
     content: |
       ## Limitations
-      - Only allowed tags are rendered; all others are stripped
-      - No support for custom attributes or inline styles
-      - No script, style, or event attributes are executed
-      - Not suitable for rendering untrusted HTML with complex requirements
+      - Only allowed tags are rendered; all others are stripped.
+      - No support for custom attributes or inline styles.
+      - No script, style, or event attributes are executed.
+      - Not suitable for rendering untrusted HTML with complex requirements.

package/public/rjbuild/docs/core/element/html/SortableTreeItemCollapseButton.yaml

@@ -11,11 +11,12 @@ renderView:
       disappearance of the default collapse button.
 
       ## Properties
-      No properties.
+
+      None.
 
       ## Technical Details
-      - Renders a button with CSS classes for styling
-      - Only appears when the tree item has children and supports collapsing
+      - Renders a button with CSS classes for styling.
+      - Only appears when the tree item has children and supports collapsing.
 
   - type: RjBuildDescriber
     title: "Interactive Example: Tree with a right aligned collapse button"
@@ -85,8 +86,8 @@ renderView:
   - type: Markdown
     content: |
       ## Limitations
-      - Only works within the template context of a `FolderSortableTree` item
-      - The button only appears when the tree item has children (`childCount > 0`)
-      - No customization of the collapse/expand behavior beyond what the underlying SortableTree provides
+      - Only works within the template context of a `FolderSortableTree` item.
+      - The button only appears when the tree item has children (`childCount > 0`).
+      - No customization of the collapse/expand behavior beyond what the underlying SortableTree provides.
       - The styling is controlled by the dnd-kit-sortable-tree CSS classes. You will need to provide CSS to override
         the default styling.

package/public/rjbuild/docs/core/element/html/SyntaxHighlighter.yaml

@@ -6,16 +6,52 @@ renderView:
       The `SyntaxHighlighter` component provides syntax highlighting for code snippets using the react-syntax-highlighter library. It supports multiple programming languages and themes, making it perfect for displaying formatted code in documentation or tutorials.
 
       ## Properties
-      - `content` (string, required): The code content to highlight (supports template evaluation)
-      - `language` (string, optional): Programming language for syntax highlighting (default: "text")
-      - `style` (object, optional): Custom style theme for highlighting (overrides automatic dark mode detection)
-      - `lightStyle` (object, optional): Style theme for light mode (supports template evaluation)
-      - `darkStyle` (object, optional): Style theme for dark mode (supports template evaluation)
-      - `showLineNumbers` (boolean, optional): Whether to display line numbers (default: false)
-      - `wrapLines` (boolean, optional): Whether to wrap lines (default: false)
-      - `wrapLongLines` (boolean, optional): Whether to wrap long lines (default: false)
-      - `attributes` (object, optional): HTML attributes for the wrapper div
 
+  - type: DefinitionList
+    content:
+      - term:
+          code: content
+          after: "(string, required)"
+        details:
+          type: Markdown
+          content: "The code content to highlight (supports template evaluation)."
+      - term:
+          code: language
+          after: "(string, optional)"
+        details:
+          type: Markdown
+          content: "Programming language for syntax highlighting (default: `text`)."
+      - term:
+          code: style
+          after: "(object, optional)"
+        details: Custom style theme for highlighting (overrides automatic dark mode detection).
+      - term:
+          code: lightStyle
+          after: "(object, optional)"
+        details: Style theme for light mode (supports template evaluation).
+      - term:
+          code: darkStyle
+          after: "(object, optional)"
+        details: Style theme for dark mode (supports template evaluation).
+      - term:
+          code: showLineNumbers
+          after: "(boolean, optional)"
+        details: Whether to display line numbers (default: false).
+      - term:
+          code: wrapLines
+          after: "(boolean, optional)"
+        details: Whether to wrap lines (default: false).
+      - term:
+          code: wrapLongLines
+          after: "(boolean, optional)"
+        details: Whether to wrap long lines (default: false).
+      - term:
+          code: attributes
+          after: "(object, optional)"
+        details: HTML attributes for the wrapper div.
+
+  - type: Markdown
+    content: |
       **Automatic Dark Mode**: The component automatically detects the user's color scheme preference and uses appropriate themes:
       - Light mode: `docco` theme by default
       - Dark mode: `atomOneDark` theme by default
@@ -230,9 +266,9 @@ renderView:
       The component automatically adapts to the user's system color scheme preference:
       
       ### Automatic Theme Detection
-      - **Light mode**: Uses the `docco` theme by default (clean, minimal highlighting)
-      - **Dark mode**: Uses the `atomOneDark` theme by default (modern dark theme with good contrast)
-      - **Real-time switching**: Themes change instantly when the user switches their system preference
+      - **Light mode**: Uses the `docco` theme by default (clean, minimal highlighting).
+      - **Dark mode**: Uses the `atomOneDark` theme by default (modern dark theme with good contrast).
+      - **Real-time switching**: Themes change instantly when the user switches their system preference.
       
       ### Custom Theme Configuration
       
@@ -261,10 +297,10 @@ renderView:
       ## Styling and Themes
       
       The component supports all react-syntax-highlighter themes. The style can be:
-      - A static style object imported from react-syntax-highlighter themes
-      - A template-evaluated value from your data context
-      - Any valid react-syntax-highlighter style configuration
-      - Different themes for light and dark modes using `lightStyle` and `darkStyle` properties
+      - A static style object imported from react-syntax-highlighter themes.
+      - A template-evaluated value from your data context.
+      - Any valid react-syntax-highlighter style configuration.
+      - Different themes for light and dark modes using `lightStyle` and `darkStyle` properties.
 
   - type: Markdown
     content: |
@@ -287,7 +323,7 @@ renderView:
   - type: Markdown
     content: |
       ## Limitations
-      - Style themes must be compatible with react-syntax-highlighter
-      - Large code blocks may impact performance
-      - Line numbers display depends on the chosen theme
-      - Custom syntax definitions are not supported through the template system 
+      - Style themes must be compatible with react-syntax-highlighter.
+      - Large code blocks may impact performance.
+      - Line numbers display depends on the chosen theme.
+      - Custom syntax definitions are not supported through the template system.

package/public/rjbuild/docs/core/element/special/Count.md

@@ -1,18 +1,16 @@
 # 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
+- `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
+- 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
@@ -32,6 +30,6 @@ data:
 ```
 
 ## 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 
+- 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/docs/core/element/special/Count.yaml

@@ -6,14 +6,27 @@ renderView:
       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`.
+
+  - type: DefinitionList
+    content:
+      - term:
+          code: jsonPathPattern
+          after: "(string, required)"
+        details:
+          type: Markdown
+          content: "The JSONPath pattern to evaluate for counting."
+      - term:
+          code: context
+          after: "(string, optional)"
+        details:
+          type: Markdown
+          content: "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
+      - 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"
@@ -42,15 +55,23 @@ renderView:
       renderView:
         - type: div
           attributes:
-            class: "container-fluid"
+            style:
+              width: "100%"
+              padding: "0 16px"
           content:
             - type: div
               attributes:
-                class: "row mb-4"
+                style:
+                  display: "flex"
+                  marginBottom: "16px"
               content:
                 - type: div
                   attributes:
-                    class: "col-md-6"
+                    style:
+                      width: "48%"
+                      display: "inline-block"
+                      verticalAlign: "top"
+                      marginRight: "2%"
                   content:
                     - type: div
                       attributes:
@@ -118,7 +139,11 @@ renderView:
                                     jsonPathPattern: "$.users[?(@.role == 'admin')]"
                 - type: div
                   attributes:
-                    class: "col-md-6"
+                    style:
+                      width: "48%"
+                      display: "inline-block"
+                      verticalAlign: "top"
+                      marginRight: "2%"
                   content:
                     - type: div
                       attributes:
@@ -140,37 +165,86 @@ renderView:
                               attributes:
                                 class: "mb-3"
                               content:
-                                - type: TextField
-                                  label: "Name:"
-                                  dataLocation: ~.newUser.name
-                                  placeholder: "Enter user name"
+                                - type: label
+                                  content: "Name:"
+                                - type: input
+                                  attributes:
+                                    type: "text"
+                                    value: ~.newUser.name
+                                    placeholder: "Enter user name"
+                                    style:
+                                      padding: "8px"
+                                      border: "1px solid #ccc"
+                                      borderRadius: "4px"
+                                      width: "100%"
+                                  actions:
+                                    - what: setData
+                                      on: input
+                                      path: ~.newUser.name
+                                      value: "<reactive-json:event-new-value>"
                             - type: div
                               attributes:
                                 class: "mb-3"
                               content:
-                                - type: SelectField
-                                  label: "Status:"
-                                  dataLocation: ~.newUser.status
-                                  options:
-                                    - label: "Active"
-                                      value: "active"
-                                    - label: "Inactive"
-                                      value: "inactive"
+                                - type: label
+                                  content: "Status:"
+                                - type: select
+                                  attributes:
+                                    value: ~.newUser.status
+                                    style:
+                                      padding: "8px"
+                                      border: "1px solid #ccc"
+                                      borderRadius: "4px"
+                                      width: "100%"
+                                  content:
+                                    - type: option
+                                      attributes:
+                                        value: "active"
+                                      content: "Active"
+                                    - type: option
+                                      attributes:
+                                        value: "inactive"
+                                      content: "Inactive"
+                                  actions:
+                                    - what: setData
+                                      on: change
+                                      path: ~.newUser.status
+                                      value: "<reactive-json:event-new-value>"
                             - type: div
                               attributes:
                                 class: "mb-3"
                               content:
-                                - type: SelectField
-                                  label: "Role:"
-                                  dataLocation: ~.newUser.role
-                                  options:
-                                    - label: "User"
-                                      value: "user"
-                                    - label: "Admin"
-                                      value: "admin"
+                                - type: label
+                                  content: "Role:"
+                                - type: select
+                                  attributes:
+                                    value: ~.newUser.role
+                                    style:
+                                      padding: "8px"
+                                      border: "1px solid #ccc"
+                                      borderRadius: "4px"
+                                      width: "100%"
+                                  content:
+                                    - type: option
+                                      attributes:
+                                        value: "user"
+                                      content: "User"
+                                    - type: option
+                                      attributes:
+                                        value: "admin"
+                                      content: "Admin"
+                                  actions:
+                                    - what: setData
+                                      on: change
+                                      path: ~.newUser.role
+                                      value: "<reactive-json:event-new-value>"
                             - type: button
                               attributes:
-                                class: "btn btn-primary"
+                                style:
+                                  padding: "8px 16px"
+                                  border: "1px solid #007bff"
+                                  borderRadius: "4px"
+                                  cursor: "pointer"
                               content: "Add User"
                               actions:
                                 - what: addData
@@ -234,8 +308,7 @@ renderView:
                   attributes:
                     class: "ms-2 badge rounded-pill"
                     style:
-                      backgroundColor: "#198754"
-                      color: "white"
+                      border: "1px solid #198754"
                   content: ~.status
                   actions:
                     - what: hide
@@ -245,8 +318,7 @@ renderView:
                   attributes:
                     class: "ms-2 badge rounded-pill"
                     style:
-                      backgroundColor: "#ffc107"
-                      color: "black"
+                      border: "1px solid #ffc107"
                   content: ~.status
                   actions:
                     - what: hide
@@ -264,7 +336,12 @@ renderView:
               content:
                 - type: button
                   attributes:
-                    class: "btn btn-sm btn-outline-primary me-2"
+                    style:
+                      padding: "4px 8px"
+                      border: "1px solid #007bff"
+                      borderRadius: "4px"
+                      cursor: "pointer"
+                      marginRight: "8px"
                   content: "Toggle Status"
                   actions:
                     - what: setData
@@ -281,7 +358,11 @@ renderView:
                       is: "inactive"
                 - type: button
                   attributes:
-                    class: "btn btn-sm btn-outline-danger"
+                    style:
+                      padding: "4px 8px"
+                      border: "1px solid #dc3545"
+                      borderRadius: "4px"
+                      cursor: "pointer"
                   content: "Remove"
                   actions:
                     - what: removeData
@@ -320,6 +401,6 @@ renderView:
       - `$..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 
+      - 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/docs/core/element/special/DataFilter.md

@@ -1,32 +1,31 @@
 # 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
+- `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
+    - `when`: Checks a condition on a value.
+    - `is`: Compares exact equality.
+    - `isNot`: Checks inequality.
+    - `isEmpty`: Checks if a value is empty.
+    - `isNotEmpty`: Checks if a value is not 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
+- 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
 
@@ -59,10 +58,10 @@ filters:
 ```
 
 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
+- 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
 
@@ -127,23 +126,23 @@ data:
 ```
 
 ## 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
+- 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
+- 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 
+- 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.