@ea-lab/reactive-json-docs 0.1.2 → 0.1.4

package/README-npm.md

@@ -22,12 +22,12 @@ npm install @ea-lab/reactive-json-docs
 
 Tell your LLM about this package:
 
-> "I have the npm package `@ea-lab/reactive-json-docs` installed, which contains complete documentation for @ea-lab/reactive-json and plugins. The documentation is located in `node_modules/@ea-lab/reactive-json-docs/public/rjbuild/component-doc/`. Can you help me understand how to use Reactive-JSON components?"
+> "I have the npm package `@ea-lab/reactive-json-docs` installed, which contains complete documentation for @ea-lab/reactive-json and plugins. The documentation is located in `node_modules/@ea-lab/reactive-json-docs/public/rjbuild/docs/`. Can you help me understand how to use Reactive-JSON components?"
 
 ### Structure
 
 ```
-component-doc/
+docs/
 ├── index.yaml              # Main index
 ├── core/
 │   ├── action/            # Actions (Hide, Show, Redirect...)

package/README.md

@@ -40,7 +40,7 @@ The following is the specific documentation for the *reactive-json-docs* project
 
 This directory contains the structured documentation files for *reactive-json*.
 
-The `/public/rjbuild/component-doc` directory contains the main documentation in YAML format:
+The `/public/rjbuild/docs` directory contains the main documentation in YAML format:
 - **Core components**: Actions, form elements, HTML elements, special components
 - **Integrations**: Chart.js and other plugin documentation  
 - **Examples**: Complete use cases and implementation demos
@@ -82,5 +82,5 @@ Build the documentation website:
 npm run build
 ```
 
-The documentation files in `/public/rjbuild/component-doc` are the source of truth
+The documentation files in `/public/rjbuild/docs` are the source of truth
 for all reactive-json component documentation.

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@ea-lab/reactive-json-docs",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Complete documentation for Reactive-JSON - Components, examples and LLM-parsable guides",
-  "main": "public/rjbuild/component-doc/index.yaml",
+  "main": "public/rjbuild/docs/index.yaml",
   "files": [
-    "public/rjbuild/component-doc/**/*",
+    "public/rjbuild/docs/**/*",
     "README-npm.md"
   ],
   "keywords": [

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

@@ -0,0 +1,293 @@
+renderView:
+  - type: Markdown
+    content: |
+      # SyntaxHighlighter
+
+      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
+
+      **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
+
+      **Supported languages**: javascript, python, java, html, css, yaml, json, markdown, bash, sql, and many more.
+
+  - type: RjBuildDescriber
+    title: "Example: Basic JavaScript highlighting"
+    description:
+      - type: Markdown
+        content: |
+          Basic usage with JavaScript syntax highlighting.
+    toDescribe:
+      renderView:
+        - type: SyntaxHighlighter
+          content: |
+            function greetUser(name) {
+              if (!name) {
+                return "Hello, anonymous!";
+              }
+              return `Hello, ${name}!`;
+            }
+            
+            const user = "World";
+            console.log(greetUser(user));
+          language: "javascript"
+          showLineNumbers: true
+      data: {}
+
+  - type: RjBuildDescriber
+    title: "Example: Interactive code editor"
+    description:
+      - type: Markdown
+        content: |
+          Dynamic content with template evaluation. Try editing the code in the text area below:
+    toDescribe:
+      renderView:
+        - type: TextField
+          label: "Language"
+          dataLocation: ~.code_language
+          defaultFieldValue: "python"
+        - type: TextAreaField
+          label: "Code Content"
+          dataLocation: ~.code_content
+          inputAttributes:
+            rows: 8
+        - type: SyntaxHighlighter
+          content: ~.code_content
+          language: ~.code_language
+          showLineNumbers: true
+          wrapLongLines: true
+          attributes:
+            style:
+              marginTop: "1rem"
+      data:
+        code_language: "python"
+        code_content: |
+          def fibonacci(n):
+              """Generate Fibonacci sequence up to n terms."""
+              if n <= 0:
+                  return []
+              elif n == 1:
+                  return [0]
+              elif n == 2:
+                  return [0, 1]
+              
+              sequence = [0, 1]
+              for i in range(2, n):
+                  sequence.append(sequence[i-1] + sequence[i-2])
+              
+              return sequence
+          
+          # Generate first 10 Fibonacci numbers
+          result = fibonacci(10)
+          print(f"First 10 Fibonacci numbers: {result}")
+
+  - type: RjBuildDescriber
+    title: "Example: Multiple language support"
+    description:
+      - type: Markdown
+        content: |
+          Demonstration of different programming languages with syntax highlighting.
+    toDescribe:
+      renderView:
+        - type: h3
+          content: "HTML Example"
+        - type: SyntaxHighlighter
+          content: |
+            <!DOCTYPE html>
+            <html lang="en">
+            <head>
+                <meta charset="UTF-8">
+                <title>Hello World</title>
+            </head>
+            <body>
+                <h1>Welcome to React!</h1>
+                <p class="intro">This is a sample HTML document.</p>
+            </body>
+            </html>
+          language: "html"
+          
+        - type: h3
+          content: "CSS Example"
+        - type: SyntaxHighlighter
+          content: |
+            .container {
+              max-width: 1200px;
+              margin: 0 auto;
+              padding: 2rem;
+            }
+            
+            .button {
+              background: linear-gradient(45deg, #007bff, #0056b3);
+              color: white;
+              border: none;
+              padding: 0.75rem 1.5rem;
+              border-radius: 0.375rem;
+              cursor: pointer;
+              transition: all 0.2s ease;
+            }
+            
+            .button:hover {
+              transform: translateY(-2px);
+              box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
+            }
+          language: "css"
+          
+        - type: h3
+          content: "YAML Configuration"
+        - type: SyntaxHighlighter
+          content: |
+            renderView:
+              - type: SyntaxHighlighter
+                content: ~.code_snippet
+                language: ~.selected_language
+                showLineNumbers: true
+                attributes:
+                  className: "code-block"
+            
+            data:
+              code_snippet: "console.log('Hello, World!');"
+              selected_language: "javascript"
+          language: "yaml"
+      data: {}
+
+  - type: RjBuildDescriber
+    title: "Example: Dark mode support"
+    description:
+      - type: Markdown
+        content: |
+          The component automatically detects your system's color scheme preference. Try switching between light and dark mode in your system settings to see the automatic theme change. You can also specify custom themes for each mode.
+    toDescribe:
+      renderView:
+        - type: h3
+          content: "Automatic theme selection (changes with your system preference)"
+        - type: SyntaxHighlighter
+          content: |
+            // This code block automatically adapts to your theme preference
+            const greetUser = (name) => {
+              const greeting = name ? `Hello, ${name}!` : "Hello, World!";
+              console.log(greeting);
+              return greeting;
+            };
+            
+            // Try switching your system to dark mode to see the change
+            greetUser("Developer");
+          language: "javascript"
+          showLineNumbers: true
+          
+        - type: h3
+          content: "Custom themes for light and dark modes"
+        - type: SyntaxHighlighter
+          content: |
+            def fibonacci_generator(limit):
+                """Generator for Fibonacci sequence up to limit."""
+                a, b = 0, 1
+                while a < limit:
+                    yield a
+                    a, b = b, a + b
+            
+            # Use the generator
+            for number in fibonacci_generator(100):
+                print(f"Fibonacci: {number}")
+          language: "python"
+          lightStyle: "~.custom_light_theme"
+          darkStyle: "~.custom_dark_theme"
+          showLineNumbers: true
+      data:
+        custom_light_theme: null  # Will use default light theme
+        custom_dark_theme: null   # Will use default dark theme
+
+  - type: Markdown
+    content: |
+      ## Supported Languages
+      
+      The component supports all languages provided by react-syntax-highlighter, including:
+      
+      **Web Technologies**: html, css, javascript, typescript, jsx, tsx, json, xml
+      
+      **Popular Languages**: python, java, c, cpp, csharp, php, ruby, go, rust, swift, kotlin
+      
+      **Data & Config**: yaml, json, sql, markdown, ini, toml
+      
+      **Shell & Scripts**: bash, powershell, batch, dockerfile
+      
+      **And many more**: Check the react-syntax-highlighter documentation for a complete list.
+
+  - type: Markdown
+    content: |
+      ## Dark Mode Support
+      
+      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
+      
+      ### Custom Theme Configuration
+      
+      You can override the automatic behavior using these properties:
+      
+      ```yaml
+      - type: SyntaxHighlighter
+        content: ~.code
+        language: "javascript"
+        # Override both modes with a single theme
+        style: "~.my_custom_theme"
+        
+        # OR specify different themes for each mode
+        lightStyle: "~.my_light_theme"
+        darkStyle: "~.my_dark_theme"
+      ```
+      
+      ### Popular Themes
+      
+      **Light themes**: `docco`, `github`, `googlecode`, `idea`, `qtcreator_light`, `vs`
+      
+      **Dark themes**: `atomOneDark`, `darcula`, `vs2015`, `androidstudio`, `tomorrow-night`, `monokai`
+
+  - type: Markdown
+    content: |
+      ## 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
+
+  - type: Markdown
+    content: |
+      ## Integration with Actions
+      
+      Like all Reactive-JSON components, SyntaxHighlighter supports the action system:
+
+      ```yaml
+      - type: SyntaxHighlighter
+        content: ~.user_code
+        language: "javascript"
+        actions:
+          - what: setData
+            when: ~.user_code
+            contains: "console.log"
+            path: ~.has_console_output
+            value: true
+      ```
+
+  - 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 

package/public/rjbuild/docs/docs-components/SyntaxHighlighter.md

@@ -0,0 +1,154 @@
+# SyntaxHighlighter
+
+**Package**: @ea-lab/reactive-json-docs
+
+The `SyntaxHighlighter` component provides advanced syntax highlighting for code examples with automatic dark mode support. It uses the react-syntax-highlighter library under the hood and adapts to the current theme.
+
+## Properties
+
+- `content` (string, required): The code content to highlight (supports template evaluation)
+- `language` (string, optional): Programming language for syntax highlighting (default: "text", supports template evaluation)
+- `style` (object, optional): Custom syntax highlighting style object (supports template evaluation)
+- `lightStyle` (object, optional): Style to use in light mode (supports template evaluation)  
+- `darkStyle` (object, optional): Style to use in 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
+
+## Theme Support
+
+The component automatically adapts to dark/light mode:
+- **Light Mode**: Uses `docco` style by default, or `lightStyle` if provided
+- **Dark Mode**: Uses `atomOneDark` style by default, or `darkStyle` if provided
+- **Override**: Use `style` property to force a specific style regardless of theme
+
+## Supported Languages
+
+The component supports all languages available in react-syntax-highlighter, including:
+- `javascript`, `jsx` - JavaScript and React
+- `typescript`, `tsx` - TypeScript
+- `python` - Python
+- `yaml`, `yml` - YAML
+- `json` - JSON
+- `html`, `xml` - HTML and XML
+- `css`, `scss` - CSS and Sass
+- `sql` - SQL
+- `bash`, `shell` - Shell scripts
+- Many more...
+
+## Examples
+
+### Basic Code Highlighting
+
+Simple code highlighting for JavaScript with automatic theme adaptation:
+
+```yaml
+renderView:
+  - type: SyntaxHighlighter
+    language: javascript
+    content: |
+      function greetUser(name) {
+          const message = `Hello, ${name}!`;
+          console.log(message);
+          return message;
+      }
+
+      greetUser("Developer");
+
+data: {}
+```
+
+### YAML Configuration Example
+
+Highlighting YAML configuration with line numbers enabled:
+
+```yaml
+renderView:
+  - type: SyntaxHighlighter
+    language: yaml
+    showLineNumbers: true
+    content: |
+      renderView:
+        - type: button
+          content: "Click me"
+          actions:
+            - what: setData
+              on: click
+              path: ~.clicked
+              value: true
+
+      data:
+        clicked: false
+
+data: {}
+```
+
+### JSX Component Example
+
+React JSX code with proper syntax highlighting:
+
+```yaml
+renderView:
+  - type: SyntaxHighlighter
+    language: jsx
+    wrapLongLines: true
+    content: |
+      import React from 'react';
+      import { ActionDependant } from "@ea-lab/reactive-json/dist/engine";
+
+      export const CustomButton = ({ props }) => {
+          const handleClick = () => {
+              console.log('Button clicked!');
+          };
+
+          return (
+              <ActionDependant {...props}>
+                  <button onClick={handleClick} className="custom-btn">
+                      {props.content || 'Default Text'}
+                  </button>
+              </ActionDependant>
+          );
+      };
+
+data: {}
+```
+
+## Dynamic Content
+
+The component supports template evaluation for dynamic content:
+
+```yaml
+renderView:
+  - type: SyntaxHighlighter
+    language: ~.selectedLanguage
+    content: ~.codeSnippet
+
+data:
+  selectedLanguage: "python"
+  codeSnippet: |
+    def hello_world():
+        print("Hello, World!")
+        return True
+```
+
+## Custom Styling
+
+You can provide custom styles for different themes:
+
+```yaml
+renderView:
+  - type: SyntaxHighlighter
+    language: javascript
+    lightStyle: ~.customLightTheme
+    darkStyle: ~.customDarkTheme
+    content: "console.log('Themed code');"
+```
+
+## Best Practices
+
+1. **Language Specification**: Always specify the language for proper highlighting
+2. **Content Length**: For very long code blocks, consider enabling line wrapping
+3. **Line Numbers**: Use line numbers for code that will be referenced by line
+4. **Theme Consistency**: Let the component handle theme switching automatically
+5. **Template Evaluation**: Use template patterns for dynamic code examples 

package/public/rjbuild/docs/docs-components/SyntaxHighlighter.yaml

@@ -0,0 +1,167 @@
+renderView:
+  - type: Markdown
+    content: |
+      # SyntaxHighlighter
+
+      **Package**: @ea-lab/reactive-json-docs
+
+      The `SyntaxHighlighter` component provides advanced syntax highlighting for code examples with automatic dark mode support. It uses the react-syntax-highlighter library under the hood and adapts to the current theme.
+
+      ## Properties
+
+      - `content` (string, required): The code content to highlight (supports template evaluation)
+      - `language` (string, optional): Programming language for syntax highlighting (default: "text", supports template evaluation)
+      - `style` (object, optional): Custom syntax highlighting style object (supports template evaluation)
+      - `lightStyle` (object, optional): Style to use in light mode (supports template evaluation)  
+      - `darkStyle` (object, optional): Style to use in 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
+
+      ## Theme Support
+
+      The component automatically adapts to dark/light mode:
+      - **Light Mode**: Uses `docco` style by default, or `lightStyle` if provided
+      - **Dark Mode**: Uses `atomOneDark` style by default, or `darkStyle` if provided
+      - **Override**: Use `style` property to force a specific style regardless of theme
+
+      ## Supported Languages
+
+      The component supports all languages available in react-syntax-highlighter, including:
+      - `javascript`, `jsx` - JavaScript and React
+      - `typescript`, `tsx` - TypeScript
+      - `python` - Python
+      - `yaml`, `yml` - YAML
+      - `json` - JSON
+      - `html`, `xml` - HTML and XML
+      - `css`, `scss` - CSS and Sass
+      - `sql` - SQL
+      - `bash`, `shell` - Shell scripts
+      - Many more...
+
+  - type: RjBuildDescriber
+    title: "Basic Code Highlighting"
+    description:
+      - type: Markdown
+        content: |
+          Simple code highlighting for JavaScript with automatic theme adaptation.
+
+    toDescribe:
+      renderView:
+        - type: SyntaxHighlighter
+          language: javascript
+          content: |
+            function greetUser(name) {
+                const message = `Hello, ${name}!`;
+                console.log(message);
+                return message;
+            }
+
+            greetUser("Developer");
+
+      data: {}
+
+  - type: RjBuildDescriber
+    title: "YAML Configuration Example"
+    description:
+      - type: Markdown
+        content: |
+          Highlighting YAML configuration with line numbers enabled.
+
+    toDescribe:
+      renderView:
+        - type: SyntaxHighlighter
+          language: yaml
+          showLineNumbers: true
+          content: |
+            renderView:
+              - type: button
+                content: "Click me"
+                actions:
+                  - what: setData
+                    on: click
+                    path: ~.clicked
+                    value: true
+
+            data:
+              clicked: false
+
+      data: {}
+
+  - type: RjBuildDescriber
+    title: "JSX Component Example"
+    description:
+      - type: Markdown
+        content: |
+          React JSX code with proper syntax highlighting.
+
+    toDescribe:
+      renderView:
+        - type: SyntaxHighlighter
+          language: jsx
+          wrapLongLines: true
+          content: |
+            import React from 'react';
+            import { ActionDependant } from "@ea-lab/reactive-json/dist/engine";
+
+            export const CustomButton = ({ props }) => {
+                const handleClick = () => {
+                    console.log('Button clicked!');
+                };
+
+                return (
+                    <ActionDependant {...props}>
+                        <button onClick={handleClick} className="custom-btn">
+                            {props.content || 'Default Text'}
+                        </button>
+                    </ActionDependant>
+                );
+            };
+
+      data: {}
+
+  - type: Markdown
+    content: |
+      ## Dynamic Content
+
+      The component supports template evaluation for dynamic content:
+
+      ```yaml
+      renderView:
+        - type: SyntaxHighlighter
+          language: ~.selectedLanguage
+          content: ~.codeSnippet
+
+      data:
+        selectedLanguage: "python"
+        codeSnippet: |
+          def hello_world():
+              print("Hello, World!")
+              return True
+      ```
+
+      ## Custom Styling
+
+      You can provide custom styles for different themes:
+
+      ```yaml
+      renderView:
+        - type: SyntaxHighlighter
+          language: javascript
+          lightStyle: ~.customLightTheme
+          darkStyle: ~.customDarkTheme
+          content: "console.log('Themed code');"
+      ```
+
+      ## Best Practices
+
+      1. **Language Specification**: Always specify the language for proper highlighting
+      2. **Content Length**: For very long code blocks, consider enabling line wrapping
+      3. **Line Numbers**: Use line numbers for code that will be referenced by line
+      4. **Theme Consistency**: Let the component handle theme switching automatically
+      5. **Template Evaluation**: Use template patterns for dynamic code examples
+
+templates:
+
+data: {} 

package/public/rjbuild/docs/docs-components/index.md

@@ -0,0 +1,28 @@
+# Documentation Components
+
+## Overview
+
+This section documents components that are specific to the reactive-json-docs package. These components are not part of the core Reactive-JSON library but are provided by the documentation system to enhance the presentation of examples and technical content.
+
+**Important**: These components are only available when using reactive-json-docs and are not included in the core @ea-lab/reactive-json package.
+
+## Available Components
+
+The documentation system provides specialized components for:
+- **Code Highlighting**: Syntax highlighting for code examples
+- **Documentation Layout**: Components for organizing documentation content
+- **Interactive Examples**: Components for demonstrating Reactive-JSON features
+
+## Usage Context
+
+These components are designed for use in:
+- Documentation websites
+- Code examples and tutorials
+- Technical content presentation
+- Educational materials
+
+They integrate seamlessly with core Reactive-JSON components and follow the same configuration patterns.
+
+## Component List
+
+- **[SyntaxHighlighter](SyntaxHighlighter.md)**: Advanced syntax highlighting with dark mode support