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

package/public/rjbuild/docs/install.yaml

@@ -188,7 +188,7 @@ renderView:
       npm install
 
       # Install Reactive-JSON and required packages
-      npm install @ea-lab/reactive-json bootstrap react-bootstrap axios clsx dnd-kit-sortable-tree html-react-parser js-yaml jsonpath lodash
+      npm install @ea-lab/reactive-json axios clsx dnd-kit-sortable-tree html-react-parser js-yaml jsonpath lodash
 
   - type: Markdown
     content: |
@@ -244,7 +244,6 @@ renderView:
       import React from 'react'
       import ReactDOM from 'react-dom/client'
       import App from './App.tsx'
-      import 'bootstrap/dist/css/bootstrap.min.css'
 
       ReactDOM.createRoot(document.getElementById('root')!).render(
         <App />
@@ -262,7 +261,6 @@ renderView:
     language: typescript
     content: |
       import { ReactiveJsonRoot } from '@ea-lab/reactive-json'
-      import 'bootstrap/dist/css/bootstrap.min.css'
 
       function App() {
         return <ReactiveJsonRoot rjBuildUrl="/config.yaml" rjBuildFetchMethod="GET" />
@@ -371,7 +369,6 @@ renderView:
       import { ReactiveJsonRoot } from '@ea-lab/reactive-json'
       import { routeMapping } from './config/routes'
       import Navigation from './components/Navigation'
-      import 'bootstrap/dist/css/bootstrap.min.css'
 
       function App() {
         return (
@@ -456,7 +453,7 @@ renderView:
 
       - If you see errors, check that all dependencies are installed correctly
       - Ensure the `public/config.yaml` file exists
-      - Verify that Bootstrap CSS is imported
+      - Verify that required CSS is imported (if any)
       - Check browser console for any JavaScript errors
 
       ---
@@ -644,7 +641,7 @@ templates:
 
           ```bash
           npm install
-          npm install @ea-lab/reactive-json bootstrap react-bootstrap axios clsx dnd-kit-sortable-tree html-react-parser js-yaml jsonpath lodash
+          npm install @ea-lab/reactive-json axios clsx dnd-kit-sortable-tree html-react-parser js-yaml jsonpath lodash
           ```
 
           ---
@@ -697,8 +694,7 @@ templates:
           import React from 'react'
           import ReactDOM from 'react-dom/client'
           import App from './App.tsx'
-          // Import Bootstrap styles for reactive-json
-          import 'bootstrap/dist/css/bootstrap.min.css'
+          // Import global CSS here if needed.
 
           ReactDOM.createRoot(document.getElementById('root')!).render(
             <App />
@@ -719,7 +715,6 @@ templates:
 
           ```javascript
           import { ReactiveJsonRoot } from '@ea-lab/reactive-json'
-          import 'bootstrap/dist/css/bootstrap.min.css'
 
           function App() {
             return <ReactiveJsonRoot rjBuildUrl="/config.yaml" rjBuildFetchMethod="GET" />
@@ -814,7 +809,6 @@ templates:
           import { ReactiveJsonRoot } from '@ea-lab/reactive-json'
           import { routeMapping } from './config/routes'
           import Navigation from './components/Navigation'
-          import 'bootstrap/dist/css/bootstrap.min.css'
 
           function App() {
             return (

package/public/rjbuild/docs/{core → integration/bootstrap}/action/Popover.md

@@ -22,5 +22,5 @@ renderView:
 ```
 
 ## Limitation
-- Requires Bootstrap CSS.
+- Requires the Bootstrap integration plugin (`@ea-lab/reactive-json-bootstrap`).
 - The child component must be able to accept a React reference. 

package/public/rjbuild/docs/{core → integration/bootstrap}/action/Tooltip.md

@@ -18,5 +18,5 @@ renderView:
 ```
 
 ## Limitation
-- Requires Bootstrap CSS.
+- Requires the Bootstrap integration plugin (`@ea-lab/reactive-json-bootstrap`).
 - The child component must be able to accept a React reference. 

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/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/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

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

@@ -0,0 +1,13 @@
+# Bootstrap HTML Elements
+
+## Available Components
+
+- **[AccordionItem](./AccordionItem.yaml)** - Collapsible content panels
+- **[Modal](./Modal.yaml)** - Dialog boxes and overlays
+- **[Tabs](./Tabs.yaml)** - Tabbed interface component
+
+## Usage Requirements
+
+- Bootstrap CSS must be imported in your application
+- The `@ea-lab/reactive-json-bootstrap` plugin must be installed and configured
+- React-Bootstrap dependencies must be available

package/public/rjbuild/docs/integration/bootstrap/element/special/index.md

@@ -0,0 +1,19 @@
+# Bootstrap Special Elements
+
+Bootstrap special elements provide advanced functionality and generic wrappers for Bootstrap components.
+
+## Available Components
+
+- **[BootstrapElement](./BootstrapElement.yaml)** - Generic wrapper for any React-Bootstrap component
+
+## Usage Requirements
+
+- Bootstrap CSS must be imported in your application
+- The `@ea-lab/reactive-json-bootstrap` plugin must be installed and configured
+- React-Bootstrap dependencies must be available
+
+## BootstrapElement Use Cases
+
+- Wrapping React-Bootstrap components not explicitly supported
+- Advanced component configurations
+- Prototyping before creating dedicated wrappers

package/public/rjbuild/docs/integration/bootstrap/example/website.md

@@ -0,0 +1,41 @@
+# Complete Website Example
+
+This example demonstrates building a complete website layout using Bootstrap components within Reactive-JSON. It showcases navigation, content sections, forms, and interactive elements working together.
+
+## Website Structure
+
+The example includes:
+- **Navigation**: Bootstrap navbar with responsive design
+- **Hero Section**: Call-to-action with buttons and forms
+- **Content Sections**: Cards, tabs, and accordions
+- **Contact Form**: Complete form with validation
+- **Modal Dialogs**: Interactive overlays for additional content
+
+## Features Demonstrated
+
+- Interactive navigation with tab switching and accordion sections
+- Form handling with user input and submission
+- Dynamic content updates and user interactions
+- Modal dialogs for focused interactions
+
+## Key Bootstrap Components Used
+
+- **Form Elements**: TextField, SelectField, CheckBoxField, TextAreaField
+- **Layout Components**: Containers, rows, columns (via BootstrapElement)
+- **Navigation**: Tabs for content organization
+- **Interactive Elements**: Modals for focused interactions
+- **Content Display**: Cards and accordions for information organization
+
+## Implementation Notes
+
+This website example demonstrates declarative UI development where complex layouts and interactions are defined entirely through JSON/YAML configuration.
+
+## Usage
+
+This example serves as a template for building complete websites with Reactive-JSON and Bootstrap. You can:
+- Copy sections for your own projects
+- Modify the styling and content to match your needs
+- Add additional Bootstrap components as required
+- Extend with custom components for specific functionality
+
+View the complete implementation in the [website.yaml](./website.yaml) file.

package/public/rjbuild/docs/integration/bootstrap/overview.md

@@ -0,0 +1,69 @@
+# Bootstrap Integration Overview
+
+Reactive-JSON has Bootstrap integration through the `@ea-lab/reactive-json-bootstrap` plugin.
+
+The Bootstrap integration adds form components, HTML elements, and actions such as: `TextField`, `SelectField`, `CheckBoxField`, `DateField`, `NumberField`, `TextAreaField`, `Modal`, `Tabs`, `AccordionItem`, `Tooltip`, `Popover`, and the versatile `BootstrapElement` wrapper.
+
+The Bootstrap components integrate with Bootstrap's CSS framework.
+
+## Install
+
+The demo website you currently look at has already this integration installed and ready.
+
+To enable the integration on your own project that uses Reactive-JSON, make sure that the integration is installed and loaded.
+
+Bootstrap support is available through the `@ea-lab/reactive-json-bootstrap` plugin. To get it:
+
+```shell
+npm i @ea-lab/reactive-json-bootstrap bootstrap react-bootstrap
+```
+
+Then make it available to ReactiveJsonRoot:
+
+```js
+import {ReactiveJsonRoot} from "@ea-lab/reactive-json";
+import {mergeComponentCollections} from "@ea-lab/reactive-json";
+import {bootstrapComponents} from "@ea-lab/reactive-json-bootstrap";
+
+export const YourComponent = () => {
+
+  const rjRootProps = {
+    // Set your own props to rjRootProps such as rjBuildUrl.
+    // ...
+  };
+
+  // Set the plugins prop by merging the component collections.
+  // Here, we only have a single plugin, but you can add your own of course.
+  rjRootProps.plugins = mergeComponentCollections([bootstrapComponents]);
+
+  return <ReactiveJsonRoot {...rjRootProps} />;
+}
+```
+
+Don't forget to import Bootstrap CSS in your application:
+
+```js
+import 'bootstrap/dist/css/bootstrap.min.css'
+```
+
+## Component Categories
+
+### Form Elements
+- **TextField**: Text input
+- **SelectField**: Dropdown select
+- **CheckBoxField**: Checkbox input
+- **DateField**: Date input (limited support)
+- **NumberField**: Numeric input
+- **TextAreaField**: Multi-line text input
+
+### HTML Elements
+- **Modal**: Modal dialogs
+- **Tabs**: Tabbed interface
+- **AccordionItem**: Collapsible content panels
+
+### Actions
+- **Tooltip**: Tooltips on hover
+- **Popover**: Popovers on click/hover
+
+### Special Components
+- **BootstrapElement**: Generic wrapper for React-Bootstrap components

package/public/rjbuild/docs/integration/bootstrap/overview.yaml

@@ -0,0 +1,87 @@
+renderView:
+  - type: h1
+    content: Bootstrap integration overview
+
+  - type: Markdown
+    content: |
+      Reactive-JSON has Bootstrap integration through the `@ea-lab/reactive-json-bootstrap` plugin.
+      
+      The Bootstrap integration adds form components, HTML elements, and actions such as: `TextField`, `SelectField`, `CheckBoxField`, `DateField`, `NumberField`, `TextAreaField`, `Modal`, `Tabs`, `AccordionItem`, `Tooltip`, `Popover`, and the versatile `BootstrapElement` wrapper.
+      
+      The Bootstrap components are designed to work seamlessly with Bootstrap's CSS framework and provide pre-styled, accessible form controls and UI elements.
+      
+      ## Install
+      
+      The demo website you currently look at has already this integration installed and ready.
+      
+      To enable the integration on your own project that uses Reactive-JSON, make sure
+      that the integration is installed and loaded.
+
+      Bootstrap support is available through the `@ea-lab/reactive-json-bootstrap` plugin. To get it:
+
+      ```shell
+      npm i @ea-lab/reactive-json-bootstrap bootstrap react-bootstrap
+      ```
+
+      Then make it available to ReactiveJsonRoot:
+
+      ```js
+      import {ReactiveJsonRoot} from "@ea-lab/reactive-json";
+      import {mergeComponentCollections} from "@ea-lab/reactive-json";
+      import {bootstrapComponents} from "@ea-lab/reactive-json-bootstrap";
+
+      export const YourComponent = () => {
+
+        const rjRootProps = {
+          // Set your own props to rjRootProps such as rjBuildUrl.
+          // ...
+        };
+
+        // Set the plugins prop by merging the component collections.
+        // Here, we only have a single plugin, but you can add your own of course.
+        rjRootProps.plugins = mergeComponentCollections([bootstrapComponents]);
+      
+        return <ReactiveJsonRoot {...rjRootProps} />;
+      }
+      ```
+
+      Don't forget to import Bootstrap CSS in your application:
+
+      ```js
+      import 'bootstrap/dist/css/bootstrap.min.css'
+      ```
+
+      ## Component Categories
+
+      ### Form Elements
+      - **TextField**: Text input with Bootstrap styling
+      - **SelectField**: Dropdown select with options
+      - **CheckBoxField**: Checkbox input with labels
+      - **DateField**: Date input (limited support)
+      - **NumberField**: Numeric input with validation
+      - **TextAreaField**: Multi-line text input
+
+      ### HTML Elements
+      - **Modal**: Bootstrap modal dialogs
+      - **Tabs**: Tabbed interface component
+      - **AccordionItem**: Collapsible content panels
+
+      ### Actions
+      - **Tooltip**: Bootstrap tooltips on hover
+      - **Popover**: Bootstrap popovers on click/hover
+
+      ### Special Components
+      - **BootstrapElement**: Generic wrapper for any React-Bootstrap component
+
+      ## Features
+
+      - **Consistent Styling**: All components follow Bootstrap design patterns
+      - **Form Integration**: Seamless data binding with Reactive-JSON's form system
+      - **Accessibility**: Built-in accessibility features from React-Bootstrap
+      - **Responsive**: Mobile-first responsive design
+      - **Validation**: Form validation support with Bootstrap styling
+      - **Actions Support**: Full compatibility with Reactive-JSON's action system
+
+templates:
+
+data: { }