@ea-lab/reactive-json-docs 0.1.6 → 0.1.8

package/public/rjbuild/docs/getting-started.yaml

@@ -0,0 +1,220 @@
+renderView:
+  - type: Markdown
+    content: |
+      # Reactive-JSON Getting Started Guide
+
+      ## Introduction
+
+      Reactive-JSON is a powerful library that allows you to create interactive user interfaces using only JSON/YAML configurations. No need to write complex JavaScript code - simply define your interface and its behavior declaratively.
+
+  - type: RjBuildDescriber
+    title: "Installation and Basic Structure"
+    description:
+      - type: Markdown
+        content: |
+          To get started with Reactive-JSON, install the package via npm and create your first configuration.
+          
+          The basic structure includes three main sections:
+          - `renderView`: Defines what should be rendered
+          - `templates`: Defines reusable templates (optional)
+          - `data`: Defines the data to be used (optional)
+    toDescribe:
+      renderView:
+        - type: div
+          content: "Hello World!"
+      templates:
+        myTemplate:
+          type: div
+          content: "Template content"
+      data:
+        message: "Hello!"
+
+  - type: Markdown
+    content: |
+      ## Key Concepts
+
+      ### 1. Template System
+
+      Reactive-JSON uses three main notations to access data:
+      - `~.` : Local context (relative to current template)
+      - `~~.` : Global context (access to global data)
+      - `~>field` : Access to a specific parent context
+
+  - type: RjBuildDescriber
+    title: "Template System Example"
+    description:
+      - type: Markdown
+        content: |
+          This example shows how to use different types of data access in a template.
+          The component accesses local data with `~.` and global data with `~~.`.
+    toDescribe:
+      templates:
+        userCard:
+          type: div
+          content:
+            - type: div
+              content: ["Name: ", ~.name]
+            - type: div
+              content: ["Admin: ", ~~.isAdmin]
+      data:
+        name: "John Doe"
+        isAdmin: true
+
+  - type: Markdown
+    content: |
+      ### 2. Basic Elements
+
+      Reactive-JSON provides several types of elements:
+
+      #### HTML Elements
+      - Div, Button, Modal, Accordion, etc.
+
+  - type: RjBuildDescriber
+    title: "HTML Elements Example"
+    description:
+      - type: Markdown
+        content: |
+          Basic HTML elements like buttons and divs are easy to use.
+    toDescribe:
+      renderView:
+        - type: button
+          content: "Click me"
+
+  - type: Markdown
+    content: |
+      #### Form Fields
+      - TextField, SelectField, CheckBoxField, etc.
+
+  - type: RjBuildDescriber
+    title: "Form Fields Example"
+    description:
+      - type: Markdown
+        content: |
+          Form fields use `dataLocation` to bind data.
+    toDescribe:
+      renderView:
+        - type: TextField
+          label: "Username"
+          dataLocation: ~.username
+      data:
+        username: ""
+
+  - type: Markdown
+    content: |
+      #### Special Elements
+      - DataFilter, Switch, Count, etc.
+
+  - type: RjBuildDescriber
+    title: "Special Element Example (Switch)"
+    description:
+      - type: Markdown
+        content: |
+          The Switch component is used to iterate over data collections.
+    toDescribe:
+      renderView:
+        - type: Switch
+          content: ~.items
+          template:
+            type: div
+            content: ~.name
+      data:
+        items:
+          - name: "Item 1"
+          - name: "Item 2"
+
+  - type: Markdown
+    content: |
+      ### 3. Actions and Reactions
+
+      #### Actions
+      Actions modify element behavior.
+
+  - type: RjBuildDescriber
+    title: "Action Example"
+    description:
+      - type: Markdown
+        content: |
+          Actions can be conditional, like hiding an element based on a condition.
+    toDescribe:
+      renderView:
+        - type: div
+          content: "Hidden content"
+          actions:
+            - what: hide
+              when: ~.shouldHide
+              is: true
+      data:
+        shouldHide: true
+
+  - type: Markdown
+    content: |
+      #### Reactions
+      Reactions respond to user events.
+
+  - type: RjBuildDescriber
+    title: "Reaction Example"
+    description:
+      - type: Markdown
+        content: |
+          Reactions allow responding to events like clicks.
+    toDescribe:
+      renderView:
+        - type: button
+          content: "Save"
+          actions:
+            - what: setData
+              on: click
+              path: ~.saved
+              value: true
+      data:
+        saved: false
+
+  - type: Markdown
+    content: |
+      ## Complete Example
+
+      Here's a simple example of an interactive form:
+
+  - type: RjBuildDescriber
+    title: "Complete Interactive Form"
+    description:
+      - type: Markdown
+        content: |
+          This example combines several concepts:
+          - Form fields with data binding
+          - User event reactions
+          - Data validation
+          - Form submission
+    toDescribe:
+      renderView:
+        - type: div
+          content:
+            - type: TextField
+              label: "Name"
+              dataLocation: ~.form.name
+            - type: TextField
+              label: "Email"
+              dataLocation: ~.form.email
+            - type: button
+              content: "Submit"
+              actions:
+                - what: submitData
+                  on: click
+                  url: "/api/submit"
+                  data: ~.form
+                  when: ~.form.name
+                  isEmpty: not
+      data:
+        form:
+          name: ""
+          email: ""
+
+  - type: Markdown
+    content: |
+      ## Next Steps
+
+      1. Explore the [complete examples](/docs/core/example) to see Reactive-JSON in action
+      2. Check out the [elements documentation](/docs/core/element) to discover all available components
+      3. Learn how to use the [action system](/docs/core/action) to create interactive interfaces
+      4. Discover the [reaction system](/docs/core/reaction) to handle user interactions
+      5. If needed, learn how to [extend Reactive-JSON](/docs/extend) with your own components 

package/public/rjbuild/docs/index.yaml

@@ -24,6 +24,11 @@ renderView:
 
       ### Core Components
 
+      - **Template System** - Understand data binding and context management
+        - Local Context - Using `~.` for template-scoped data
+        - Global Context - Using `~~.` for application-wide data
+        - Parent Context - Using `~>` for parent template access
+
       - **Elements** - Form fields, HTML elements, and special components
         - Form Fields - Input fields, selects, checkboxes, etc.
         - HTML Elements - Divs, modals, accordions, syntax highlighting, etc.

package/public/rjbuild/docs/install.md

@@ -0,0 +1,168 @@
+# Reactive-JSON Installation Guide (Vite + React)
+
+> **Tip**: In the interactive version of this documentation, a button is available to automatically copy the initialization prompt. Copy it and paste it into Cursor to start the step-by-step assistant.
+
+## ⚠️ Important Rule
+
+**DO NOT SKIP STEPS** unless explicitly requested by the user. Each step is critical for the proper functioning of the project and must be executed in the defined order.
+
+## Table of Contents
+
+1. [Collecting User Information](#1-collecting-user-information)
+2. [Documentation Repositories Setup](#2-documentation-repositories-setup)
+3. [Cursor Workspace Configuration](#3-cursor-workspace-configuration)
+4. [Vite Project Initialization](#4-vite-project-initialization)
+5. [Dependencies Installation](#5-dependencies-installation)
+6. [Cursor Rules Creation](#6-cursor-rules-creation)
+7. [Generated Project Cleanup](#7-generated-project-cleanup)
+8. [Basic Configuration with ReactiveJsonRoot](#8-basic-configuration-with-reactivejsonroot)
+9. [Final Verification](#9-final-verification)
+
+---
+
+## 1. Collecting User Information
+
+Ask the user for:
+
+- **Project name**
+- **TypeScript?** (yes/no)
+- **Documentation repositories location** (absolute path)
+
+Remember:
+
+| Variable | Description |
+| -------- | ----------- |
+| `<project_name>` | Project name |
+| `<use_typescript>` | `true` or `false` |
+| `<docs_location>` | Absolute path for repositories |
+
+---
+
+## 2. Documentation Repositories Setup
+
+```bash
+cd <docs_location>
+git clone https://github.com/Ealab-collab/reactive-json.git
+git clone https://github.com/Ealab-collab/reactive-json-docs.git
+```
+
+> These repositories are used **only** for Cursor to index the documentation and will **not** be included in the final project.
+
+If repositories are already cloned, proceed directly to step 3.
+
+---
+
+## 3. Cursor Workspace Configuration
+
+**Manual action required!**
+
+1. Open `File > Add Folder to Workspace`
+2. Add `<docs_location>/reactive-json`
+3. Add `<docs_location>/reactive-json-docs`
+
+Make sure these folders appear in the explorer before continuing.
+
+---
+
+## 4. Vite Project Initialization
+
+```bash
+# With TypeScript
+npm create vite@latest <project_name> -- --template react-ts
+
+# With JavaScript
+npm create vite@latest <project_name> -- --template react
+
+cd <project_name>
+```
+
+---
+
+## 5. Dependencies Installation
+
+```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
+```
+
+---
+
+## 6. Cursor Rules Creation
+
+Copy rules from documentation repositories **before** any code modification:
+
+```bash
+# Create rules directory
+mkdir -p .cursor/rules
+
+# Copy rules from reactive-json
+cp -r <docs_location>/reactive-json/.cursor/rules/* .cursor/rules/
+
+# Copy and merge rules from reactive-json-docs
+cp -r <docs_location>/reactive-json-docs/.cursor/rules/* .cursor/rules/
+```
+
+These rules contain all the necessary directives to work effectively with reactive-json, including:
+- Required documentation rules
+- Component creation rules
+- Code language rules
+- And other project-specific rules
+
+---
+
+## 7. Generated Project Cleanup
+
+Remove unnecessary files:
+
+- `src/App.css`
+- `src/index.css` (keep only base styles)
+- `public/vite.svg`
+- `src/assets/react.svg`
+
+Modify `src/main.tsx` (or `src/main.jsx`):
+
+```typescript
+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 />
+)
+```
+
+---
+
+## 8. Basic Configuration with ReactiveJsonRoot
+
+`src/App.tsx`:
+
+```typescript
+import { ReactiveJsonRoot } from '@ea-lab/reactive-json'
+import 'bootstrap/dist/css/bootstrap.min.css'
+
+function App() {
+  return <ReactiveJsonRoot dataUrl="/config.yaml" dataFetchMethod="GET" />
+}
+
+export default App
+```
+
+`public/config.yaml`:
+
+```yaml
+renderView:
+  - type: h1
+    content: "Ready to start!"
+```
+
+---
+
+## 9. Final Verification
+
+```bash
+npm run dev
+```
+
+If the "Ready to start!" message appears without errors, the installation is complete! You can start developing your application with Reactive-JSON.