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

package/public/rjbuild/docs/core/element/special/Switch.md

@@ -148,7 +148,7 @@ renderView:
         type: div
         attributes:
           style:
-            border: "1px solid #ccc"
+            border: "1px solid currentColor"
             borderRadius: 8px
             padding: 1rem
         content:
@@ -190,7 +190,7 @@ renderView:
             flex: "1 1 200px"
             margin: 0.5rem
             padding: 1rem
-            backgroundColor: "#f0f0f0"
+            border: "1px solid currentColor"
         content: ~.text
 data:
   items:
@@ -214,21 +214,21 @@ renderView:
           display: grid
           gridTemplateColumns: ~.gridColumns
           gap: ~.spacing
-          backgroundColor: ~.theme.backgroundColor
+          border: ~.theme.border
     templates:
       imageItem:
         type: div
         attributes:
           style:
             padding: 1rem
-            border: "1px solid #ddd"
+            border: "1px solid currentColor"
         content: ~.title
 data:
   layoutClass: "photo-gallery"
   gridColumns: "repeat(3, 1fr)"
   spacing: "2rem"
   theme:
-    backgroundColor: "#f5f5f5"
+    border: "1px solid currentColor"
   galleries:
     - title: "Photo 1"
     - title: "Photo 2"

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

@@ -227,7 +227,7 @@ renderView:
                 gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))"
                 gap: 1rem
                 padding: 1rem
-                backgroundColor: "#f8f9fa"
+                border: "1px solid currentColor"
                 borderRadius: 8px
           before:
             type: h3
@@ -238,31 +238,28 @@ renderView:
               style:
                 textAlign: center
                 marginTop: 1rem
-                color: "#666"
             content: "End of product list"
       templates:
         productCard:
           type: div
           attributes:
             style:
-              border: "1px solid #ddd"
+              border: "1px solid currentColor"
               borderRadius: 8px
               padding: 1rem
-              backgroundColor: white
               textAlign: center
           content:
             - type: h4
               attributes:
                 style:
                   margin: "0 0 0.5rem 0"
-                  color: "#333"
               content: ~.name
             - type: p
               attributes:
                 style:
                   margin: 0
-                  color: "#666"
                   fontSize: "0.9rem"
+                  opacity: 0.8
               content: ~.description
       data:
         products:
@@ -298,7 +295,7 @@ renderView:
                 gap: 1rem
                 justifyContent: center
                 padding: 1rem
-                border: "2px dashed #ccc"
+                border: "2px dashed currentColor"
                 borderRadius: 8px
           after:
             type: PageControls
@@ -309,10 +306,9 @@ renderView:
             style:
               flex: "0 1 150px"
               padding: 1rem
-              backgroundColor: "#e3f2fd"
+              border: "1px solid currentColor"
               borderRadius: 8px
               textAlign: center
-              border: "1px solid #90caf9"
           content: ~.title
       data:
         cards:
@@ -343,15 +339,14 @@ renderView:
                 gridTemplateColumns: ~.wrapperConfig.columns
                 gap: ~.wrapperConfig.spacing
                 padding: ~.wrapperConfig.padding
-                backgroundColor: ~.theme.background
                 border: ~.theme.border
                 borderRadius: ~.theme.borderRadius
           before:
             type: h3
             attributes:
               style:
-                color: ~.theme.titleColor
                 textAlign: center
+                fontWeight: bold
             content: ~.title
       templates:
         dynamicCard:
@@ -359,10 +354,10 @@ renderView:
           attributes:
             style:
               padding: 1rem
-              backgroundColor: ~.theme.cardBackground
+              border: ~.theme.cardBorder
               borderRadius: 6px
               textAlign: center
-              color: ~.theme.textColor
+
           content: ~.name
       data:
         title: "Dynamic Gallery"
@@ -372,12 +367,8 @@ renderView:
           spacing: "1.5rem"
           padding: "2rem"
         theme:
-          background: "#e8f4fd"
-          border: "2px solid #2196f3"
+          border: "2px solid currentColor"
           borderRadius: "12px"
-          titleColor: "#1976d2"
-          cardBackground: "#ffffff"
-          textColor: "#333333"
         items:
           - name: "Element A"
           - name: "Element B"

package/public/rjbuild/docs/core/example/html.md

@@ -39,7 +39,7 @@ HTML attributes are supported through the `attributes` property. Each attribute
 > When using inline styles, you must use a specific structure:
 > - Use an object with CSS properties as keys
 > - Use camelCase for property names instead of hyphen-based CSS casing
-> - For example, use `backgroundColor` instead of `background-color`
+> - For example, use `borderRadius` instead of `border-radius`
 
 ### Example with Attributes and Styles
 ```yaml
@@ -48,7 +48,7 @@ renderView:
     attributes:
       data-attr: Hello!
       style:
-        backgroundColor: rgb(250,242,0)
+        border: "2px solid rgb(250,242,0)"
         padding: 0.5em
     content:
       - "This is a "

package/public/rjbuild/docs/core/example/html.yaml

@@ -60,15 +60,14 @@ renderView:
             specify an object with the CSS property as the key, and CSS value as the value.
             Each key must be using **camelCase** instead of the usual hyphen-based CSS casing.
             
-            In the following example, `backgroundColor` is used for the `background-color`
-            CSS property.
+            In the following example, `border` is used to add visual styling.
     toDescribe:
       renderView:
         - type: div
           attributes:
             data-attr: Hello!
             style:
-              backgroundColor: rgb(250,242,0)
+              border: "2px solid rgb(250,242,0)"
               padding: 0.5em
           content:
             - "This is a "

package/public/rjbuild/docs/core/example/native-html-forms.md

@@ -0,0 +1,245 @@
+# Native HTML Forms
+
+This guide explains how to use native HTML form elements (`input`, `select`, `textarea`) with Reactive-JSON's reaction system to create interactive forms with proper data synchronization.
+
+## Core Concept: Reactions for Data Synchronization
+
+Native HTML elements require explicit **reactions** to synchronize user input with your data. This is done using the `setData` reaction triggered by user events.
+
+### Basic Structure
+
+```yaml
+- type: input
+  attributes:
+    type: "text"
+    value: ~.fieldName           # Display current data value
+  actions:
+    - what: setData              # Reaction to update data
+      on: input                  # Event that triggers the reaction
+      path: ~.fieldName          # Data path to update
+      value: "<reactive-json:event-new-value>"  # Value from the event
+```
+
+## Event Value Patterns
+
+### Forward Update Pattern (Recommended)
+
+Use `<reactive-json:event-new-value>` for automatic value detection:
+
+- **Auto-detects the correct property**: `event.target.value` for inputs, `event.target.checked` for checkboxes
+- **Simplifies configuration**: No need to specify which property to access
+- **Works for all form elements**: text, number, checkbox, select, textarea, etc.
+
+### Alternative Explicit Syntax
+
+For specific control, you can explicitly access event properties:
+
+- `<reactive-json:event>.target.value` - Direct access to input value
+- `<reactive-json:event>.target.checked` - Direct access to checkbox state
+- `<reactive-json:event>.target.selectedIndex` - Access to select index
+
+## Event Types for Different Use Cases
+
+- **`on: input`** - Real-time updates as user types (immediate feedback)
+- **`on: change`** - Updates when user commits the change (varies by element type):
+  - Text inputs: when value changes AND field loses focus
+  - Checkboxes/Radio: immediately when checked/unchecked
+  - Select: immediately when option is selected
+- **`on: blur`** - Updates when user leaves the field (regardless of value change)
+- **`on: focus`** - Triggered when user enters the field
+
+## Common Patterns
+
+### Label Association
+
+Use the `for` attribute to associate labels with form elements for accessibility:
+
+```yaml
+- type: label
+  attributes:
+    for: "username-field"
+  content: "Username:"
+- type: input
+  attributes:
+    id: "username-field"
+    type: "text"
+    value: ~.username
+  actions:
+    - what: setData
+      on: input
+      path: ~.username
+      value: "<reactive-json:event-new-value>"
+```
+
+**Note**: Reactive-JSON automatically converts the HTML `for` attribute to React's `htmlFor` property.
+
+### Text Input
+```yaml
+- type: input
+  attributes:
+    type: "text"
+    value: ~.fieldName
+  actions:
+    - what: setData
+      on: input
+      path: ~.fieldName
+      value: "<reactive-json:event-new-value>"
+```
+
+### Checkbox
+```yaml
+- type: input
+  attributes:
+    type: "checkbox"
+    checked: ~.isSelected
+  actions:
+    - what: setData
+      on: change
+      path: ~.isSelected
+      value: "<reactive-json:event-new-value>"
+```
+
+### Select Dropdown
+```yaml
+- type: select
+  attributes:
+    value: ~.selectedOption
+  content:
+    - type: option
+      attributes:
+        value: "option1"
+      content: "Option 1"
+  actions:
+    - what: setData
+      on: change
+      path: ~.selectedOption
+      value: "<reactive-json:event-new-value>"
+```
+
+### Textarea
+```yaml
+- type: textarea
+  attributes:
+    value: ~.description
+    placeholder: "Enter description..."
+    rows: 4
+  actions:
+    - what: setData
+      on: input
+      path: ~.description
+      value: "<reactive-json:event-new-value>"
+```
+
+### Number Input
+```yaml
+- type: input
+  attributes:
+    type: "number"
+    value: ~.quantity
+    min: 0
+    max: 100
+  actions:
+    - what: setData
+      on: input
+      path: ~.quantity
+      value: "<reactive-json:event-new-value>"
+```
+
+### Radio Buttons
+```yaml
+- type: input
+  attributes:
+    type: "radio"
+    name: "size"
+    value: "small"
+    checked: ~.selectedSize
+  actions:
+    - what: setData
+      on: change
+      path: ~.selectedSize
+      value: "small"
+
+- type: input
+  attributes:
+    type: "radio"
+    name: "size"
+    value: "large"
+    checked: ~.selectedSize
+  actions:
+    - what: setData
+      on: change
+      path: ~.selectedSize
+      value: "large"
+```
+
+## Advanced Patterns
+
+### Form Validation with Conditional Actions
+```yaml
+- type: input
+  attributes:
+    type: "email"
+    value: ~.email
+  actions:
+    - what: setData
+      on: input
+      path: ~.email
+      value: "<reactive-json:event-new-value>"
+    - what: setData
+      on: blur
+      path: ~.emailValid
+      value: "<reactive-json:event>.target.validity.valid"
+```
+
+### Multiple Field Updates
+```yaml
+- type: input
+  attributes:
+    type: "text"
+    value: ~.firstName
+  actions:
+    - what: setData
+      on: input
+      path: ~.firstName
+      value: "<reactive-json:event-new-value>"
+    - what: setData
+      on: input
+      path: ~.fullName
+      value: ["<reactive-json:event-new-value>", " ", ~.lastName]
+```
+
+## Simplification Alternatives
+
+For simpler configuration and built-in styling, consider using pre-built form components:
+
+- **Reactive-JSON Bootstrap**: `TextField`, `SelectField`, `CheckBoxField`, etc. with automatic data synchronization
+- **Custom component libraries**: Create your own reusable form components with embedded reactions
+
+Example with Bootstrap components:
+```yaml
+# Simpler alternative using reactive-json-bootstrap
+- type: TextField
+  label: "Username:"
+  dataLocation: ~.username  # Automatic synchronization
+
+# Equivalent native implementation
+- type: label
+  content: "Username:"
+- type: input
+  attributes:
+    type: "text"
+    value: ~.username
+  actions:
+    - what: setData
+      on: input
+      path: ~.username
+      value: "<reactive-json:event-new-value>"
+```
+
+## Best Practices
+
+1. **Always include `setData` reactions** for interactive elements
+2. **Choose appropriate events**: `input` for real-time updates, `change` for committed changes
+3. **Use `<reactive-json:event-new-value>`** for automatic value detection
+4. **Consider pre-built components** for complex forms to reduce configuration
+5. **Test data flow** to ensure changes are properly synchronized