@ea-lab/reactive-json-docs 2.7.0 → 2.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ea-lab/reactive-json-docs",
-  "version": "2.7.0",
+  "version": "2.8.0",
   "description": "Complete documentation for Reactive-JSON - Components, examples and LLM-parsable guides",
   "main": "public/rjbuild/docs/index.yaml",
   "files": [
@@ -26,7 +26,7 @@
   "private": false,
   "devDependencies": {
     "@craco/craco": "^7.1.0",
-    "@ea-lab/reactive-json": "^2.5.1",
+    "@ea-lab/reactive-json": "^2.8.0",
     "@ea-lab/reactive-json-chartjs": "^1.1.1",
     "@npmcli/fs": "^4.0.0",
     "@reduxjs/toolkit": "^2.6.1",

package/public/rjbuild/docs/advanced-concepts/forward-update.yaml

@@ -176,4 +176,4 @@ renderView:
 
 templates:
 
-data: {} 
+data:

package/public/rjbuild/docs/advanced-concepts/plugins/component-development.yaml

@@ -225,4 +225,4 @@ renderView:
 
 templates:
 
-data: {} 
+data:

package/public/rjbuild/docs/advanced-concepts/plugins/index.yaml

@@ -26,4 +26,4 @@ renderView:
 
 templates:
 
-data: {} 
+data:

package/public/rjbuild/docs/core/action/CustomEventListener.yaml

@@ -155,4 +155,4 @@ renderView:
 
 templates:
 
-data: {}
+data:

package/public/rjbuild/docs/core/element/form/AutocompleteField.yaml

@@ -222,4 +222,4 @@ renderView:
       - No built-in keyboard navigation for the dropdown.
 
 templates: {}
-data: {}
+data:

package/public/rjbuild/docs/core/element/form/CheckBoxField.yaml

@@ -218,5 +218,5 @@ renderView:
       - For radio buttons, `multiple` is automatically set to `false` regardless of the `multiple` property
 
 templates: {}
-data: {}
+data:
 

package/public/rjbuild/docs/core/element/form/DateField.md

@@ -0,0 +1,79 @@
+# DateField
+
+The `DateField` component is a thin convenience wrapper around [`Input`](Input.md) that renders an HTML `date` input (`<input type="date">`). It inherits every `Input` option (label, wrapper, attributes, actions, data binding) and adds an optional `storageFormat` for binding to a fixed-format storage string.
+
+## Basic Syntax
+
+```yaml
+- type: DateField
+  dataLocation: ~.startDate
+  label: "Start date:"
+```
+
+By default the raw value of the HTML `date` input (`YYYY-MM-DD`) is stored as-is — identical to any other `Input` wrapper.
+
+## Properties
+
+- `dataLocation` (string, optional): Path to bind the field value in the data context. Without it, the value is stored in the template context under the component's `datafield`.
+- `defaultFieldValue` (string, optional): Default value when no data is present.
+- `label` (string or View props, optional): Field label text (supports template evaluation and View rendering). A wrapper `<div>` is added automatically when a label is present.
+- `storageFormat` (string, optional): Binds the field to a fixed-format **storage string** instead of the raw input value. Accepts `"date"` or `"datetime"` (see [Storage format](#storage-format)). When omitted, the raw `YYYY-MM-DD` value is stored unchanged (original behavior).
+- `attributes` (object, optional): Attributes applied to the wrapper `<div>` (or to the input itself when there is no wrapper).
+- `inputAttributes` (object, optional): Attributes applied directly to the `<input>` element (e.g. `class`, `id`, `min`, `max`).
+- `labelAttributes` (object, optional): Attributes applied to the label (`htmlFor` is managed automatically).
+- `forceWrapper` (boolean, optional): Forces the presence (`true`) or absence (`false`) of the wrapper `<div>`. If omitted, the wrapper appears only when a label is present.
+- `actions` (array, optional): Actions and conditional reactions to execute based on field state.
+
+## Storage format
+
+An HTML `date` input can only read and write `YYYY-MM-DD`. Backends often store dates in a fixed, stricter format — for example Drupal datetime fields validate against `Y-m-d` (date-only field) or `Y-m-d\TH:i:s` (datetime field). Feeding such a value straight to a `date` input leaves it blank (the input rejects a value carrying a time), and writing back `YYYY-MM-DD` is rejected by a datetime field.
+
+Set `storageFormat` to bridge the two. It applies **two conversions**:
+
+- **On read** — only the date part of the stored value is shown, so a datetime value like `2016-11-29T23:00:00` displays as `2016-11-29` instead of leaving the input empty.
+- **On write** — the value is re-serialized to the target storage format:
+  - `storageFormat: date` → `YYYY-MM-DD`
+  - `storageFormat: datetime` → `YYYY-MM-DDT00:00:00` (the time is anchored at midnight, since a `date` input carries no time)
+
+An empty input stores an empty string (clears the field). When `storageFormat` is omitted, no conversion happens and the raw input value is stored — so existing usages are unaffected.
+
+> For editing a value that also carries a **time** the user should see and change, use [`DateTimeField`](DateTimeField.md) instead.
+
+## Examples
+
+### Default behavior (raw `YYYY-MM-DD`)
+
+```yaml
+renderView:
+  - type: DateField
+    dataLocation: ~.startDate
+    label: "Start date:"
+  - type: div
+    content:
+      - type: strong
+        content: "Stored value: "
+      - ~.startDate
+
+data:
+  startDate: "2027-03-15"
+```
+
+### `storageFormat: datetime`
+
+The `date` input drives a datetime storage string (time anchored at midnight):
+
+```yaml
+renderView:
+  - type: DateField
+    dataLocation: ~.closeDate
+    label: "Close date:"
+    storageFormat: datetime
+  - type: div
+    content:
+      - type: strong
+        content: "Stored value: "
+      - ~.closeDate
+
+data:
+  closeDate: "2016-11-29T23:00:00"
+```

package/public/rjbuild/docs/core/element/form/DateField.yaml

@@ -0,0 +1,115 @@
+renderView:
+  - type: Markdown
+    content: |
+      # DateField
+
+      The `DateField` component is a thin convenience wrapper around [`Input`](/docs/core/element/form/Input) that renders an HTML `date` input (`<input type="date">`). It inherits every `Input` option (label, wrapper, attributes, actions, data binding) and adds an optional `storageFormat` for binding to a fixed-format storage string.
+
+  - type: Markdown
+    content: |
+      ## Basic Syntax
+
+      ```yaml
+      - type: DateField
+        dataLocation: ~.startDate
+        label: "Start date:"
+      ```
+
+      By default the raw value of the HTML `date` input (`YYYY-MM-DD`) is stored as-is — identical to any other `Input` wrapper.
+
+      ## Properties
+
+  - type: DefinitionList
+    content:
+      - term:
+          code: dataLocation
+          after: "(string, optional)"
+        details: "Path to bind the field value in the data context. Without it, the value is stored in the template context under the component's `datafield`."
+      - term:
+          code: defaultFieldValue
+          after: "(string, optional)"
+        details: "Default value when no data is present."
+      - term:
+          code: label
+          after: "(string or View props, optional)"
+        details: "Field label text (supports template evaluation and View rendering). A wrapper `<div>` is added automatically when a label is present."
+      - term:
+          code: storageFormat
+          after: "(string, optional)"
+        details:
+          type: Markdown
+          content: |
+            Binds the field to a fixed-format **storage string** instead of the raw input value. Accepts `"date"` or `"datetime"`. See [Storage format](#storage-format) below. When omitted, the raw `YYYY-MM-DD` value is stored unchanged (original behavior).
+      - term:
+          code: attributes
+          after: "(object, optional)"
+        details: "Attributes applied to the wrapper `<div>` (or to the input itself when there is no wrapper)."
+      - term:
+          code: inputAttributes
+          after: "(object, optional)"
+        details: "Attributes applied directly to the `<input>` element (e.g. `class`, `id`, `min`, `max`)."
+      - term:
+          code: labelAttributes
+          after: "(object, optional)"
+        details: "Attributes applied to the label (`htmlFor` is managed automatically)."
+      - term:
+          code: forceWrapper
+          after: "(boolean, optional)"
+        details: "Forces the presence (`true`) or absence (`false`) of the wrapper `<div>`. If omitted, the wrapper appears only when a label is present."
+      - term:
+          code: actions
+          after: "(array, optional)"
+        details: "Actions and conditional reactions to execute based on field state (hide, tooltip, setData, …)."
+
+  - type: Markdown
+    content: |
+      ## Storage format
+
+      An HTML `date` input can only read and write `YYYY-MM-DD`. Backends often store dates in a fixed, stricter format — for example Drupal datetime fields validate against `Y-m-d` (date-only field) or `Y-m-d\TH:i:s` (datetime field). Feeding such a value straight to a `date` input leaves it blank (the input rejects a value carrying a time), and writing back `YYYY-MM-DD` is rejected by a datetime field.
+
+      Set `storageFormat` to bridge the two. It applies **two conversions**:
+
+      - **On read** — only the date part of the stored value is shown, so a datetime value like `2016-11-29T23:00:00` displays as `2016-11-29` instead of leaving the input empty.
+      - **On write** — the value is re-serialized to the target storage format:
+        - `storageFormat: date` → `YYYY-MM-DD`
+        - `storageFormat: datetime` → `YYYY-MM-DDT00:00:00` (the time is anchored at midnight, since a `date` input carries no time)
+
+      An empty input stores an empty string (clears the field). When `storageFormat` is omitted, no conversion happens and the raw input value is stored — so existing usages are unaffected.
+
+      > For editing a value that also carries a **time** the user should see and change, use [`DateTimeField`](/docs/core/element/form/DateTimeField) instead.
+
+  - type: RjBuildDescriber
+    title: "Default behavior (raw YYYY-MM-DD)"
+    description: "Without storageFormat, the raw input value is stored as-is."
+    toDescribe:
+      renderView:
+        - type: DateField
+          dataLocation: ~.startDate
+          label: "Start date:"
+        - type: div
+          content:
+            - type: strong
+              content: "Stored value: "
+            - ~.startDate
+      data:
+        startDate: "2027-03-15"
+
+  - type: RjBuildDescriber
+    title: "storageFormat: datetime"
+    description: "The date input drives a datetime storage string (time anchored at midnight)."
+    toDescribe:
+      renderView:
+        - type: DateField
+          dataLocation: ~.closeDate
+          label: "Close date:"
+          storageFormat: datetime
+        - type: div
+          content:
+            - type: strong
+              content: "Stored value: "
+            - ~.closeDate
+      data:
+        closeDate: "2016-11-29T23:00:00"
+
+templates: {}
+data:

package/public/rjbuild/docs/core/element/form/DateTimeField.md

@@ -0,0 +1,60 @@
+# DateTimeField
+
+The `DateTimeField` component is a thin convenience wrapper around [`Input`](Input.md) that renders an HTML `datetime-local` input (`<input type="datetime-local">`). It inherits every `Input` option and adds an optional `storageFormat` for binding to a fixed-format storage string.
+
+## Basic Syntax
+
+```yaml
+- type: DateTimeField
+  dataLocation: ~.meetingAt
+  label: "Meeting date and time:"
+```
+
+By default the raw value of the HTML `datetime-local` input (`YYYY-MM-DDTHH:MM`) is stored as-is.
+
+## Properties
+
+- `dataLocation` (string, optional): Path to bind the field value in the data context. Without it, the value is stored in the template context under the component's `datafield`.
+- `defaultFieldValue` (string, optional): Default value when no data is present.
+- `label` (string or View props, optional): Field label text (supports template evaluation and View rendering). A wrapper `<div>` is added automatically when a label is present.
+- `storageFormat` (string, optional): Binds the field to a fixed-format **storage string** instead of the raw input value. Accepts `"date"` or `"datetime"` (see [Storage format](#storage-format)). When omitted, the raw `YYYY-MM-DDTHH:MM` value is stored unchanged (original behavior).
+- `attributes` (object, optional): Attributes applied to the wrapper `<div>` (or to the input itself when there is no wrapper).
+- `inputAttributes` (object, optional): Attributes applied directly to the `<input>` element (e.g. `class`, `id`, `min`, `max`, `step`).
+- `labelAttributes` (object, optional): Attributes applied to the label (`htmlFor` is managed automatically).
+- `forceWrapper` (boolean, optional): Forces the presence (`true`) or absence (`false`) of the wrapper `<div>`. If omitted, the wrapper appears only when a label is present.
+- `actions` (array, optional): Actions and conditional reactions to execute based on field state.
+
+## Storage format
+
+An HTML `datetime-local` input reads and writes `YYYY-MM-DDTHH:MM` — **without seconds** (browsers omit the `:00` seconds unless a sub-minute `step` is set, and even then behavior varies). A backend datetime field that validates against a fixed format such as Drupal's `Y-m-d\TH:i:s` therefore rejects the raw value.
+
+Set `storageFormat` to bridge the two. It applies **two conversions**:
+
+- **On read** — the date + time part of the stored value is shown (a stored `2016-11-29T23:00:00` displays as `2016-11-29T23:00`).
+- **On write** — the value is re-serialized to the target storage format:
+  - `storageFormat: datetime` → `YYYY-MM-DDTHH:MM:SS` (seconds appended; `00` when the input has no time)
+  - `storageFormat: date` → `YYYY-MM-DD` (time dropped)
+
+An empty input stores an empty string (clears the field). When `storageFormat` is omitted, no conversion happens and the raw input value is stored — so existing usages are unaffected.
+
+## Example
+
+### `storageFormat: datetime`
+
+The `datetime-local` input drives a datetime storage string, with seconds:
+
+```yaml
+renderView:
+  - type: DateTimeField
+    dataLocation: ~.closeDate
+    label: "Close date and time:"
+    storageFormat: datetime
+  - type: div
+    content:
+      - type: strong
+        content: "Stored value: "
+      - ~.closeDate
+
+data:
+  closeDate: "2016-11-29T23:00:00"
+```

package/public/rjbuild/docs/core/element/form/DateTimeField.yaml

@@ -0,0 +1,97 @@
+renderView:
+  - type: Markdown
+    content: |
+      # DateTimeField
+
+      The `DateTimeField` component is a thin convenience wrapper around [`Input`](/docs/core/element/form/Input) that renders an HTML `datetime-local` input (`<input type="datetime-local">`). It inherits every `Input` option and adds an optional `storageFormat` for binding to a fixed-format storage string.
+
+  - type: Markdown
+    content: |
+      ## Basic Syntax
+
+      ```yaml
+      - type: DateTimeField
+        dataLocation: ~.meetingAt
+        label: "Meeting date and time:"
+      ```
+
+      By default the raw value of the HTML `datetime-local` input (`YYYY-MM-DDTHH:MM`) is stored as-is.
+
+      ## Properties
+
+  - type: DefinitionList
+    content:
+      - term:
+          code: dataLocation
+          after: "(string, optional)"
+        details: "Path to bind the field value in the data context. Without it, the value is stored in the template context under the component's `datafield`."
+      - term:
+          code: defaultFieldValue
+          after: "(string, optional)"
+        details: "Default value when no data is present."
+      - term:
+          code: label
+          after: "(string or View props, optional)"
+        details: "Field label text (supports template evaluation and View rendering). A wrapper `<div>` is added automatically when a label is present."
+      - term:
+          code: storageFormat
+          after: "(string, optional)"
+        details:
+          type: Markdown
+          content: |
+            Binds the field to a fixed-format **storage string** instead of the raw input value. Accepts `"date"` or `"datetime"`. See [Storage format](#storage-format) below. When omitted, the raw `YYYY-MM-DDTHH:MM` value is stored unchanged (original behavior).
+      - term:
+          code: attributes
+          after: "(object, optional)"
+        details: "Attributes applied to the wrapper `<div>` (or to the input itself when there is no wrapper)."
+      - term:
+          code: inputAttributes
+          after: "(object, optional)"
+        details: "Attributes applied directly to the `<input>` element (e.g. `class`, `id`, `min`, `max`, `step`)."
+      - term:
+          code: labelAttributes
+          after: "(object, optional)"
+        details: "Attributes applied to the label (`htmlFor` is managed automatically)."
+      - term:
+          code: forceWrapper
+          after: "(boolean, optional)"
+        details: "Forces the presence (`true`) or absence (`false`) of the wrapper `<div>`. If omitted, the wrapper appears only when a label is present."
+      - term:
+          code: actions
+          after: "(array, optional)"
+        details: "Actions and conditional reactions to execute based on field state."
+
+  - type: Markdown
+    content: |
+      ## Storage format
+
+      An HTML `datetime-local` input reads and writes `YYYY-MM-DDTHH:MM` — **without seconds** (browsers omit the `:00` seconds unless a sub-minute `step` is set, and even then behavior varies). A backend datetime field that validates against a fixed format such as Drupal's `Y-m-d\TH:i:s` therefore rejects the raw value.
+
+      Set `storageFormat` to bridge the two. It applies **two conversions**:
+
+      - **On read** — the date + time part of the stored value is shown (a stored `2016-11-29T23:00:00` displays as `2016-11-29T23:00`).
+      - **On write** — the value is re-serialized to the target storage format:
+        - `storageFormat: datetime` → `YYYY-MM-DDTHH:MM:SS` (seconds appended; `00` when the input has no time)
+        - `storageFormat: date` → `YYYY-MM-DD` (time dropped)
+
+      An empty input stores an empty string (clears the field). When `storageFormat` is omitted, no conversion happens and the raw input value is stored — so existing usages are unaffected.
+
+  - type: RjBuildDescriber
+    title: "storageFormat: datetime"
+    description: "The datetime-local input drives a datetime storage string, with seconds."
+    toDescribe:
+      renderView:
+        - type: DateTimeField
+          dataLocation: ~.closeDate
+          label: "Close date and time:"
+          storageFormat: datetime
+        - type: div
+          content:
+            - type: strong
+              content: "Stored value: "
+            - ~.closeDate
+      data:
+        closeDate: "2016-11-29T23:00:00"
+
+templates: {}
+data:

package/public/rjbuild/docs/core/element/form/Input.yaml

@@ -569,4 +569,4 @@ renderView:
       - Integrated label is limited: for conditional actions, prefer separated label
 
 templates: {}
-data: {}
+data:

package/public/rjbuild/docs/core/element/form/SelectField.yaml

@@ -248,5 +248,5 @@ renderView:
       - Empty string handling requires explicit `allowEmptyStringAsValue` for semantic distinction
 
 templates: {}
-data: {}
+data:
 

package/public/rjbuild/docs/core/element/form/TextAreaField.yaml

@@ -135,5 +135,5 @@ renderView:
       - Template evaluation for `rows` should return a number
 
 templates: {}
-data: {}
+data:
 

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

@@ -110,4 +110,4 @@ renderView:
       - No per-item formatting; all elements are joined as plain strings.
 
 templates: {}
-data: {}
+data:

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

@@ -131,4 +131,4 @@ renderView:
 
 templates:
 
-data: {} 
+data:

package/public/rjbuild/docs/core/hook/index.yaml

@@ -41,4 +41,4 @@ renderView:
       The core Reactive-JSON library uses this same mechanism internally to provide its built-in hooks, ensuring consistency between core functionality and custom extensions.
 
 templates: {}
-data: {}
+data:

package/public/rjbuild/docs/core/hook/usePagination.yaml

@@ -316,4 +316,4 @@ renderView:
       - Future version: support for synchronization with external data changes
 
 templates: {}
-data: {}
+data:

package/public/rjbuild/docs/core/hook/useTransformedAttributes.yaml

@@ -161,4 +161,4 @@ renderView:
       For details on individual transformers, see [attributeTransformer documentation](../attributeTransformer/index).
 
 templates: {}
-data: {}
+data:

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

@@ -336,4 +336,4 @@ renderView:
 
 templates:
 
-data: {}
+data:

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

@@ -164,4 +164,4 @@ renderView:
 
 templates:
 
-data: {} 
+data:

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

@@ -31,4 +31,4 @@ renderView:
 
 templates:
 
-data: {} 
+data:

package/public/rjbuild/docs/getting-started/template-contexts-data-binding.yaml

@@ -233,4 +233,4 @@ renderView:
 
 templates:
 
-data: {} 
+data:

package/public/rjbuild/docs/index.yaml

@@ -70,4 +70,4 @@ renderView:
 
 templates:
 
-data: {}
+data:

package/public/rjbuild/docs/install.yaml

@@ -975,4 +975,4 @@ templates:
           - **Without routing:** "Ready to start!" message
           - **With routing:** "Welcome to your React + Reactive-JSON app!" message with a navigation bar at the top of the page allowing navigation between pages
 
-data: {} 
+data:

package/public/rjbuild/docs/integration/bootstrap/element/form/CheckBoxField.yaml

@@ -367,4 +367,4 @@ renderView:
       - Other strings remain as strings
 
 templates: {}
-data: {} 
+data:

package/public/rjbuild/docs/integration/bootstrap/element/form/DateField.yaml

@@ -283,4 +283,4 @@ renderView:
       - Template evaluation for label property
 
 templates: {}
-data: {} 
+data:

package/public/rjbuild/docs/integration/bootstrap/element/form/NumberField.yaml

@@ -125,4 +125,4 @@ renderView:
       - No automatic locale-specific number formatting
 
 templates: {}
-data: {} 
+data:

package/public/rjbuild/docs/integration/bootstrap/element/form/SelectField.yaml

@@ -394,4 +394,4 @@ renderView:
       ```
 
 templates: {}
-data: {} 
+data:

package/public/rjbuild/docs/integration/bootstrap/element/form/TextAreaField.yaml

@@ -171,4 +171,4 @@ renderView:
       - No built-in spell checking configuration options
 
 templates: {}
-data: {} 
+data:

package/public/rjbuild/docs/integration/bootstrap/element/form/TextField.yaml

@@ -174,4 +174,4 @@ renderView:
       - No support for complex input patterns beyond HTML5 pattern attribute
 
 templates: {}
-data: {} 
+data:

package/public/rjbuild/docs/integration/bootstrap/element/form/index.yaml

@@ -93,4 +93,4 @@ renderView:
         formData: ""
 
 templates: {}
-data: {} 
+data:

package/public/rjbuild/docs/integration/bootstrap/example/accordion.yaml

@@ -61,4 +61,4 @@ renderView:
 
 templates:
 
-data: {}
+data:

package/public/rjbuild/docs/integration/bootstrap/example/dynamic-content.yaml

@@ -234,4 +234,4 @@ renderView:
 
 templates:
 
-data: {}
+data: