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

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

@@ -6,13 +6,22 @@ renderView:
       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
-      - `tabs` (array, required): Static array of tab objects. This array is not evaluated by the template system and must be defined statically in the schema.
-        - Each tab object must have:
-          - `attributes` (object, required):
-            - `title` (string, required): The label of the tab
-            - `eventKey` (string, required): A unique identifier for the tab
-            - Other attributes are passed to the React-Bootstrap Tab component
-          - `content` (array/object, required): The content to display in the tab. Can be any valid Reactive-JSON view (components, arrays, templates, etc.)
+
+  - type: DefinitionList
+    content:
+      - term:
+          code: tabs
+          after: "(array, required)"
+        details:
+          type: Markdown
+          content: |
+            Static array of tab objects. This array is not evaluated by the template system and must be defined statically in the schema.
+            Each tab object must have:
+            - `attributes` (object, required):
+              - `title` (string, required): The label of the tab.
+              - `eventKey` (string, required): A unique identifier for the tab.
+              - Other attributes are passed to the React-Bootstrap Tab component.
+            - `content` (array|object, required): The content to display in the tab. Can be any valid Reactive-JSON view (components, arrays, templates, etc.)
 
   - type: RjBuildDescriber
     title: "Interactive Example: Editable tabs"
@@ -47,11 +56,11 @@ renderView:
   - type: Markdown
     content: |
       ## Limitations
-      - The `tabs` array must be static in the schema (no dynamic generation or template evaluation)
-      - Each tab must have a unique `eventKey` in its attributes
-      - The `title` attribute is required for each tab
-      - No support for dynamic addition/removal of tabs at runtime
-      - No built-in support for icons in tab headers
-      - No animation customization beyond what react-bootstrap provides
-      - All tab content is rendered at once (not lazy-loaded)
-      - Tab selection state is not persisted between renders
+      - The `tabs` array must be static in the schema (no dynamic generation or template evaluation).
+      - Each tab must have a unique `eventKey` in its attributes.
+      - The `title` attribute is required for each tab.
+      - No support for dynamic addition/removal of tabs at runtime.
+      - No built-in support for icons in tab headers.
+      - No animation customization beyond what react-bootstrap provides.
+      - All tab content is rendered at once (not lazy-loaded).
+      - Tab selection state is not persisted between renders.

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/{core → integration/bootstrap}/element/special/BootstrapElement.md

@@ -1,7 +1,5 @@
 # BootstrapElement
 
-## Introduction
-
 The `BootstrapElement` component is an internal wrapper used by Reactive-JSON to integrate React-Bootstrap components into the template system.
 
 **You should not use this component directly in your rjbuild.**
@@ -9,9 +7,9 @@ The `BootstrapElement` component is an internal wrapper used by Reactive-JSON to
 It is automatically used by higher-level components (such as BsAccordion, BsAlert, etc.) to provide Bootstrap features in a declarative way.
 
 ## Properties
-- `attributes` (object, optional): Attributes passed to the underlying Bootstrap component
-- `content` (object/array, optional): Content to render inside the Bootstrap component
+- `attributes` (object, optional): Attributes passed to the underlying Bootstrap component.
+- `content` (object/array, optional): Content to render inside the Bootstrap component.
 
 ## Limitations
-- Not intended for direct use in rjbuild templates
-- Used internally by the system for Bootstrap integration 
+- Not intended for direct use in rjbuild templates.
+- Used internally by the system for Bootstrap integration.

package/public/rjbuild/docs/integration/bootstrap/element/special/BootstrapElement.yaml

@@ -0,0 +1,29 @@
+renderView:
+  - type: Markdown
+    content: |
+      # BootstrapElement
+
+      The `BootstrapElement` component is an internal wrapper used by Reactive-JSON to integrate React-Bootstrap components into the template system.
+
+      **You should not use this component directly in your rjbuild.**
+
+      It is automatically used by higher-level components (such as BsAccordion, BsAlert, etc.) to provide Bootstrap features in a declarative way.
+
+      ## Properties
+
+  - type: DefinitionList
+    content:
+      - term:
+          code: attributes
+          after: "(object, optional)"
+        details: "Attributes passed to the underlying Bootstrap component."
+      - term:
+          code: content
+          after: "(object|array, optional)"
+        details: "Content to render inside the Bootstrap component."
+
+  - type: Markdown
+    content: |
+      ## Limitations
+      - Not intended for direct use in rjbuild templates.
+      - Used internally by the system for Bootstrap integration.

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: { }

package/public/rjbuild/docs/core/action/Popover.md

@@ -1,26 +0,0 @@
-# Popover
-
-**Description**: Displays a Bootstrap popover on click or hover of the element.
-
-## Properties
-- `header` (optional): content of the popover header
-- `body`: content of the popover body
-- `placement` (optional): position (`top`, `bottom`, `left`, `right`)
-- `trigger` (optional): trigger event (`click`, `hover`, etc.)
-
-## Example
-```yaml
-renderView:
-  - type: button
-    content: "Click me"
-    actions:
-      - what: popover
-        header: "Popover Title"
-        body: "This is the popover content."
-        placement: right
-        trigger: click
-```
-
-## Limitation
-- Requires Bootstrap CSS.
-- The child component must be able to accept a React reference. 

package/public/rjbuild/docs/core/element/special/BootstrapElement.yaml

@@ -1,18 +0,0 @@
-renderView:
-  - type: Markdown
-    content: |
-      # BootstrapElement
-
-      The `BootstrapElement` component is an internal wrapper used by Reactive-JSON to integrate React-Bootstrap components into the template system.
-
-      **You should not use this component directly in your rjbuild.**
-
-      It is automatically used by higher-level components (such as BsAccordion, BsAlert, etc.) to provide Bootstrap features in a declarative way.
-
-      ## Properties
-      - `attributes` (object, optional): Attributes passed to the underlying Bootstrap component
-      - `content` (object/array, optional): Content to render inside the Bootstrap component
-
-      ## Limitations
-      - Not intended for direct use in rjbuild templates
-      - Used internally by the system for Bootstrap integration