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

package/public/rjbuild/docs/{core → integration/bootstrap}/element/form/TextAreaField.md

@@ -4,14 +4,14 @@ The `TextAreaField` component renders a multi-line text input field using React
 
 ## Properties
 
-- `dataLocation` (string, optional): Path to bind the field value in the data context
-- `defaultFieldValue` (string, optional): Default value when no data is present
-- `label` (string, optional): Field label text (supports template evaluation)
-- `placeholder` (string, optional): Placeholder text (supports template evaluation)
-- `rows` (number, optional): Number of visible text lines (default: 3)
-- `attributes` (object, optional): Attributes applied to the Form.Group container
-- `inputAttributes` (object, optional): Attributes applied directly to the textarea element
-- `actions` (array, optional): Actions to execute based on field state
+- `dataLocation` (string, optional): Path to bind the field value in the data context.
+- `defaultFieldValue` (string, optional): Default value when no data is present.
+- `label` (string, optional): Field label text (supports template evaluation).
+- `placeholder` (string, optional): Placeholder text (supports template evaluation).
+- `rows` (number, optional): Number of visible text lines (default: 3).
+- `attributes` (object, optional): Attributes applied to the Form.Group container.
+- `inputAttributes` (object, optional): Attributes applied directly to the textarea element.
+- `actions` (array, optional): Actions to execute based on field state.
 
 ## Data Management
 

package/public/rjbuild/docs/{core → integration/bootstrap}/element/form/TextAreaField.yaml

@@ -7,15 +7,43 @@ renderView:
 
       ## Properties
 
-      - `dataLocation` (string, optional): Path to bind the field value in the data context
-      - `defaultFieldValue` (string, optional): Default value when no data is present
-      - `label` (string, optional): Field label text (supports template evaluation)
-      - `placeholder` (string, optional): Placeholder text (supports template evaluation)
-      - `rows` (number, optional): Number of visible text lines (default: 3)
-      - `attributes` (object, optional): Attributes applied to the Form.Group container
-      - `inputAttributes` (object, optional): Attributes applied directly to the textarea element
-      - `actions` (array, optional): Actions to execute based on field state
+  - type: DefinitionList
+    content:
+      - term:
+          code: dataLocation
+          after: "(string, optional)"
+        details: "Path to bind the field value in the data context."
+      - term:
+          code: defaultFieldValue
+          after: "(string, optional)"
+        details: "Default value when no data is present."
+      - term:
+          code: label
+          after: "(string, optional)"
+        details: "Field label text (supports template evaluation)."
+      - term:
+          code: placeholder
+          after: "(string, optional)"
+        details: "Placeholder text (supports template evaluation)."
+      - term:
+          code: rows
+          after: "(number, optional)"
+        details: "Number of visible text lines (default: 3)."
+      - term:
+          code: attributes
+          after: "(object, optional)"
+        details: "Attributes applied to the Form.Group container."
+      - term:
+          code: inputAttributes
+          after: "(object, optional)"
+        details: "Attributes applied directly to the textarea element."
+      - term:
+          code: actions
+          after: "(array, optional)"
+        details: "Actions to execute based on field state."
 
+  - type: Markdown
+    content: |
       ## Data Management
 
       The component automatically synchronizes its value with the global data context. When using `dataLocation`, the value is stored at the specified path. Without `dataLocation`, the value is stored in the template context using the component's `datafield`.

package/public/rjbuild/docs/{core → integration/bootstrap}/element/form/TextField.md

@@ -4,14 +4,14 @@ The `TextField` component renders a single-line text input field using React Boo
 
 ## Properties
 
-- `dataLocation` (string, optional): Path to bind the field value in the data context
-- `defaultFieldValue` (string, optional): Default value when no data is present
-- `label` (string, optional): Field label text (supports template evaluation)
-- `placeholder` (string, optional): Placeholder text (supports template evaluation)
-- `inputType` (string, optional): HTML input type (default: "text", supports template evaluation)
-- `attributes` (object, optional): Attributes applied to the Form.Group container
-- `inputAttributes` (object, optional): Attributes applied directly to the input element
-- `actions` (array, optional): Actions to execute based on field state
+- `dataLocation` (string, optional): Path to bind the field value in the data context.
+- `defaultFieldValue` (string, optional): Default value when no data is present.
+- `label` (string, optional): Field label text (supports template evaluation).
+- `placeholder` (string, optional): Placeholder text (supports template evaluation).
+- `inputType` (string, optional): HTML input type (default: "text", supports template evaluation).
+- `attributes` (object, optional): Attributes applied to the Form.Group container.
+- `inputAttributes` (object, optional): Attributes applied directly to the input element.
+- `actions` (array, optional): Actions to execute based on field state.
 
 ## Data Management
 

package/public/rjbuild/docs/{core → integration/bootstrap}/element/form/TextField.yaml

@@ -7,15 +7,45 @@ renderView:
 
       ## Properties
 
-      - `dataLocation` (string, optional): Path to bind the field value in the data context
-      - `defaultFieldValue` (string, optional): Default value when no data is present
-      - `label` (string, optional): Field label text (supports template evaluation)
-      - `placeholder` (string, optional): Placeholder text (supports template evaluation)
-      - `inputType` (string, optional): HTML input type (default: "text", supports template evaluation)
-      - `attributes` (object, optional): Attributes applied to the Form.Group container
-      - `inputAttributes` (object, optional): Attributes applied directly to the input element
-      - `actions` (array, optional): Actions to execute based on field state
+  - type: DefinitionList
+    content:
+      - term:
+          code: dataLocation
+          after: "(string, optional)"
+        details: "Path to bind the field value in the data context."
+      - term:
+          code: defaultFieldValue
+          after: "(string, optional)"
+        details: "Default value when no data is present."
+      - term:
+          code: label
+          after: "(string, optional)"
+        details: "Field label text (supports template evaluation)."
+      - term:
+          code: placeholder
+          after: "(string, optional)"
+        details: "Placeholder text (supports template evaluation)."
+      - term:
+          code: inputType
+          after: "(string, optional)"
+        details:
+          type: Markdown
+          content: "HTML input type (default: \"text\", supports template evaluation)."
+      - term:
+          code: attributes
+          after: "(object, optional)"
+        details: "Attributes applied to the Form.Group container."
+      - term:
+          code: inputAttributes
+          after: "(object, optional)"
+        details: "Attributes applied directly to the input element."
+      - term:
+          code: actions
+          after: "(array, optional)"
+        details: "Actions to execute based on field state."
 
+  - type: Markdown
+    content: |
       ## Data Management
 
       The component automatically synchronizes its value with the global data context. When using `dataLocation`, the value is stored at the specified path. Without `dataLocation`, the value is stored in the template context using the component's `datafield`.

package/public/rjbuild/docs/{core → integration/bootstrap}/element/form/formElementsCommon.md

@@ -1,7 +1,5 @@
 # Form Elements Common Utilities
 
-## Introduction
-
 The `formElementsCommon.jsx` file provides shared utilities for all form components in Reactive-JSON. These utilities handle data location resolution, path calculation, and default value management.
 
 ## propsDataLocationToPathAndValue Function
@@ -27,13 +25,13 @@ Returns an object with:
 
 The function implements two data binding strategies:
 
-#### 1. Custom Data Location
+#### Custom Data Location
 When `dataLocation` is provided:
 - Evaluates the template value at the specified location
 - Uses the resolved path for data updates
 - Falls back to `defaultValue` if the location is undefined
 
-#### 2. Template-Scoped Data
+#### Template-Scoped Data
 When no `dataLocation` is provided:
 - Uses the component's `datafield` as the key
 - Stores data in the template context under this key

package/public/rjbuild/docs/{core → integration/bootstrap}/element/form/index.md

@@ -1,7 +1,5 @@
 # Form Elements
 
-## Introduction
-
 Form elements in Reactive-JSON provide interactive input components based on React Bootstrap. These components automatically manage state through the global data context and support template evaluation for dynamic content.
 
 All form elements support:

package/public/rjbuild/docs/integration/bootstrap/element/html/AccordionItem.md

@@ -0,0 +1,69 @@
+# AccordionItem
+
+The `AccordionItem` component provides collapsible content panels using Bootstrap's accordion component. Each item must be used within a parent accordion container and supports dynamic content through Reactive-JSON's template system.
+
+## Properties
+
+- `eventKey` (string, required): Unique identifier for this accordion item
+- `header` (string/component, required): The accordion header content (clickable area)
+- `content` (any, optional): The collapsible content area
+- `attributes` (object, optional): Additional HTML attributes for the accordion item
+- `actions` (array, optional): Actions to execute based on field state
+
+## Basic Example
+
+```yaml
+renderView:
+  - type: BsAccordion
+    attributes:
+      defaultActiveKey: "0"
+    content:
+      - type: AccordionItem
+        eventKey: "0"
+        header: "Accordion Item #1"
+        content: "This is the content for the first accordion item."
+      - type: AccordionItem
+        eventKey: "1" 
+        header: "Accordion Item #2"
+        content: "This is the content for the second accordion item."
+```
+
+## Dynamic Content Example
+
+```yaml
+renderView:
+  - type: BsAccordion
+    content: ~.faqItems
+    singleOption:
+      load: faqItem
+
+templates:
+  faqItem:
+    type: AccordionItem
+    eventKey: ~.id
+    header: ~.question
+    content: ~.answer
+
+data:
+  faqItems:
+    - id: "q1"
+      question: "What is Reactive-JSON?"
+      answer: "Reactive-JSON is a declarative framework for building interactive UIs using JSON configurations."
+    - id: "q2" 
+      question: "How do I install it?"
+      answer: "You can install it using npm: npm install @ea-lab/reactive-json"
+```
+
+
+
+## Limitations
+
+- Must be used within a parent `BsAccordion` component
+- Each `eventKey` must be unique within the accordion
+- Header content should be simple text or basic components
+
+## Requirements
+
+- Bootstrap CSS must be imported
+- `@ea-lab/reactive-json-bootstrap` plugin must be installed and configured
+- React-Bootstrap dependencies must be available

package/public/rjbuild/docs/{core → integration/bootstrap}/element/html/AccordionItem.yaml

@@ -8,9 +8,21 @@ renderView:
       **Important:** `AccordionItem` must be a direct child of `BsAccordion`.
 
       ## Properties
-      - `header` (object, optional): Content for the accordion header
-      - `body` (object, optional): Content for the accordion body
-      - `attributes` (object, optional): Additional attributes for the Accordion.Item
+
+  - type: DefinitionList
+    content:
+      - term:
+          code: header
+          after: "(object, optional)"
+        details: "Content for the accordion header."
+      - term:
+          code: body
+          after: "(object, optional)"
+        details: "Content for the accordion body."
+      - term:
+          code: attributes
+          after: "(object, optional)"
+        details: "Additional attributes for the Accordion.Item."
 
   - type: RjBuildDescriber
     title: "Interactive Example: Accordion with multiple sections"
@@ -41,7 +53,7 @@ renderView:
   - type: Markdown
     content: |
       ## Limitations
-      - Only works inside a parent BsAccordion component
-      - No built-in support for nested accordions
-      - The eventKey is set automatically; custom keys are not supported directly
-      - No animation customization beyond what react-bootstrap provides
+      - Only works inside a parent BsAccordion component.
+      - No built-in support for nested accordions.
+      - The eventKey is set automatically; custom keys are not supported directly.
+      - No animation customization beyond what react-bootstrap provides.

package/public/rjbuild/docs/integration/bootstrap/element/html/Modal.md

@@ -0,0 +1,127 @@
+# Modal
+
+The `Modal` component provides Bootstrap modal dialogs for displaying focused content, forms, or confirmations. It supports dynamic content and integrates with Reactive-JSON's action system for show/hide functionality.
+
+## Properties
+
+- `show` (boolean, required): Controls whether the modal is visible
+- `onHide` (reaction, optional): Reaction to execute when modal is closed
+- `size` (string, optional): Modal size (`sm`, `lg`, `xl`)
+- `centered` (boolean, optional): Whether to center the modal vertically
+- `backdrop` (boolean/string, optional): Whether to show backdrop or allow backdrop click to close
+- `header` (component, optional): Modal header content
+- `body` (component, optional): Modal body content
+- `footer` (component, optional): Modal footer content
+- `attributes` (object, optional): Additional HTML attributes
+- `actions` (array, optional): Actions to execute based on modal state
+
+## Basic Example
+
+```yaml
+renderView:
+  - type: button
+    content: "Open Modal"
+    actions:
+      - what: setData
+        on: click
+        path: ~.showModal
+        value: true
+
+  - type: Modal
+    show: ~.showModal
+    onHide:
+      - what: setData
+        path: ~.showModal
+        value: false
+    header: "Modal Title"
+    body: "This is the modal content."
+    footer:
+      - type: button
+        content: "Close"
+        actions:
+          - what: setData
+            on: click
+            path: ~.showModal
+            value: false
+
+data:
+  showModal: false
+```
+
+## Form Modal Example
+
+```yaml
+renderView:
+  - type: button
+    content: "Add User"
+    actions:
+      - what: setData
+        on: click
+        path: ~.showUserForm
+        value: true
+
+  - type: Modal
+    show: ~.showUserForm
+    size: "lg"
+    centered: true
+    onHide:
+      - what: setData
+        path: ~.showUserForm
+        value: false
+    header: "Add New User"
+    body:
+      - type: TextField
+        label: "Name:"
+        dataLocation: ~.newUser.name
+      - type: TextField
+        label: "Email:"
+        dataLocation: ~.newUser.email
+        inputType: "email"
+    footer:
+      - type: button
+        content: "Cancel"
+        actions:
+          - what: setData
+            on: click
+            path: ~.showUserForm
+            value: false
+      - type: button
+        content: "Save User"
+        actions:
+          - what: addData
+            on: click
+            path: ~.users
+            value: ~.newUser
+          - what: setData
+            path: ~.showUserForm
+            value: false
+          - what: setData
+            path: ~.newUser
+            value: {}
+
+data:
+  showUserForm: false
+  newUser: {}
+  users: []
+```
+
+
+
+## Modal Sizes
+
+- `sm`: Small modal
+- Default: Standard modal width
+- `lg`: Large modal
+- `xl`: Extra large modal
+
+## Limitations
+
+- Modal visibility must be controlled through data state
+- Complex animations beyond Bootstrap defaults are not supported
+- Modal stacking (modal over modal) should be avoided
+
+## Requirements
+
+- Bootstrap CSS must be imported
+- `@ea-lab/reactive-json-bootstrap` plugin must be installed and configured
+- React-Bootstrap dependencies must be available

package/public/rjbuild/docs/{core → integration/bootstrap}/element/html/Modal.yaml

@@ -7,12 +7,35 @@ renderView:
       The `Modal` component displays a dialog that can be controlled by local state or by a boolean in the global data context. It is useful for confirmations, information, or any overlay content.
 
       ## Properties
-      - `headerTitle` (object, optional): Content for the modal header (any Reactive-JSON view)
-      - `body` (object, optional): Content for the modal body (any Reactive-JSON view)
-      - `closeButton` (boolean, optional): Show a close button in the header (default: false)
-      - `showBoolPath` (string or boolean, optional): If a string, path to a boolean in data controlling visibility; otherwise, local state is used
-      - `attributes` (object, optional): Additional attributes for the modal (size, centered, etc.)
-      - `className` (string, optional): Additional CSS classes (always includes `reactive-json`)
+
+  - type: DefinitionList
+    content:
+      - term:
+          code: headerTitle
+          after: "(object, optional)"
+        details: "Content for the modal header (any Reactive-JSON view)."
+      - term:
+          code: body
+          after: "(object, optional)"
+        details: "Content for the modal body (any Reactive-JSON view)."
+      - term:
+          code: closeButton
+          after: "(boolean, optional)"
+        details: "Show a close button in the header (default: false)."
+      - term:
+          code: showBoolPath
+          after: "(string|boolean, optional)"
+        details:
+          type: Markdown
+          content: "If a string, path to a boolean in data controlling visibility; otherwise, local state is used."
+      - term:
+          code: attributes
+          after: "(object, optional)"
+        details: "Additional attributes for the modal (size, centered, etc.)."
+      - term:
+          code: className
+          after: "(string, optional)"
+        details: "Additional CSS classes (always includes `reactive-json`)."
 
   - type: RjBuildDescriber
     title: "Interactive Example: Modal controlled by data path"
@@ -83,11 +106,11 @@ renderView:
   - type: Markdown
     content: |
       ## Limitations
-      - No built-in async or loading state
-      - No advanced accessibility beyond react-bootstrap
-      - If `showBoolPath` is a data path, it must resolve to a boolean
-      - No animation customization beyond react-bootstrap
+      - No built-in async or loading state.
+      - No advanced accessibility beyond react-bootstrap.
+      - If `showBoolPath` is a data path, it must resolve to a boolean.
+      - No animation customization beyond react-bootstrap.
 
       ## Notes
-      - Multiple modals can be displayed simultaneously by using different `showBoolPath` values or state-controlled modals
-      - Each modal is independently controlled and managed
+      - Multiple modals can be displayed simultaneously by using different `showBoolPath` values or state-controlled modals.
+      - Each modal is independently controlled and managed.

package/public/rjbuild/docs/integration/bootstrap/element/html/Tabs.md

@@ -0,0 +1,150 @@
+# Tabs
+
+The `Tabs` component provides a tabbed interface using React-Bootstrap. Each tab must have a unique `eventKey` and a `title` in its attributes, and can contain any valid Reactive-JSON view content.
+
+## Properties
+
+- `defaultActiveKey` (string, optional): The key of the tab that should be active by default
+- `activeKey` (string, optional): The key of the currently active tab (for controlled mode)
+- `onSelect` (reaction, optional): Reaction to execute when a tab is selected
+- `variant` (string, optional): Tab style variant (`tabs`, `pills`)
+- `content` (array, required): Array of tab definitions
+- `attributes` (object, optional): Additional HTML attributes
+- `actions` (array, optional): Actions to execute based on tab state
+
+## Tab Definition
+
+Each tab in the `content` array should have:
+- `eventKey` (string, required): Unique identifier for the tab
+- `title` (string, required): Tab header text
+- `content` (any, optional): Tab content (can be any Reactive-JSON components)
+- `disabled` (boolean, optional): Whether the tab is disabled
+- `attributes` (object, optional): Additional attributes for the tab
+
+## Basic Example
+
+```yaml
+renderView:
+  - type: Tabs
+    defaultActiveKey: "home"
+    content:
+      - eventKey: "home"
+        title: "Home"
+        content: "Welcome to the home tab!"
+      - eventKey: "profile"
+        title: "Profile"
+        content: "This is the profile tab content."
+      - eventKey: "contact"
+        title: "Contact"
+        content: "Contact information goes here."
+```
+
+## Dynamic Tabs Example
+
+```yaml
+renderView:
+  - type: Tabs
+    defaultActiveKey: ~.activeTab
+    onSelect:
+      - what: setData
+        path: ~.activeTab
+        value: "<reactive-json:event-new-value>"
+    content: ~.sections
+    singleOption:
+      load: tabItem
+
+templates:
+  tabItem:
+    eventKey: ~.id
+    title: ~.name
+    content:
+      - type: h3
+        content: ~.name
+      - type: p
+        content: ~.description
+
+data:
+  activeTab: "overview"
+  sections:
+    - id: "overview"
+      name: "Overview"
+      description: "General information about our service."
+    - id: "features"
+      name: "Features"
+      description: "Key features and capabilities."
+    - id: "pricing"
+      name: "Pricing"
+      description: "Pricing plans and options."
+```
+
+## Pills Variant Example
+
+```yaml
+renderView:
+  - type: Tabs
+    variant: "pills"
+    defaultActiveKey: "tab1"
+    content:
+      - eventKey: "tab1"
+        title: "Tab 1"
+        content: "Content for tab 1"
+      - eventKey: "tab2"
+        title: "Tab 2"
+        content: "Content for tab 2"
+      - eventKey: "tab3"
+        title: "Tab 3"
+        disabled: true
+        content: "This tab is disabled"
+```
+
+## Complex Content Example
+
+```yaml
+renderView:
+  - type: Tabs
+    defaultActiveKey: "dashboard"
+    content:
+      - eventKey: "dashboard"
+        title: "Dashboard"
+        content:
+          - type: h4
+            content: "Dashboard Overview"
+          - type: div
+            content: "Statistics and metrics go here."
+      - eventKey: "settings"
+        title: "Settings"
+        content:
+          - type: TextField
+            label: "Username:"
+            dataLocation: ~.settings.username
+          - type: CheckBoxField
+            label: "Enable notifications"
+            dataLocation: ~.settings.notifications
+            options:
+              - value: true
+                label: ""
+
+data:
+  settings:
+    username: ""
+    notifications: false
+```
+
+
+
+## Tab Variants
+
+- `tabs`: Traditional tab styling (default)
+- `pills`: Pill-style navigation
+
+## Limitations
+
+- Each `eventKey` must be unique within the tabs component
+- Tab switching animations are limited to Bootstrap defaults
+- Complex tab layouts may require custom CSS
+
+## Requirements
+
+- Bootstrap CSS must be imported
+- `@ea-lab/reactive-json-bootstrap` plugin must be installed and configured
+- React-Bootstrap dependencies must be available