@net-advantage/jo-ui-field-metadata

Shared label and helper-text header for composite JO UI controls.

The primitive follows a strict MVVM split. The model derives class names and association IDs. The view-model maps metadata props. The view renders consistent metadata markup.

MVVM

flowchart LR
  Props["FieldMetadataProps"] --> ViewModel["useFieldMetadataViewModel"]
  Model["jo-ui-field-metadata.model.ts"] --> ViewModel
  ViewModel --> View["FieldMetadata.tsx"]
  View -->|"label and helper text"| Host["Composite control"]

| Layer | File | Responsibility | | --- | --- | --- | | Contract | jo-ui-field-metadata.types.ts | Props and view-model | | Model | jo-ui-field-metadata.model.ts | Join class names and derive association IDs | | View-model | jo-ui-field-metadata.view-model.ts | Map props into render-ready metadata | | View | FieldMetadata.tsx | Render the shared label and helper header |

Models

flowchart TD
  Props["FieldMetadataProps"] --> ClassName["className"]
  Props --> Ids["labelId and helperId"]
  ClassName --> ViewModel["FieldMetadataViewModel"]
  Ids --> ViewModel
  Props --> ViewModel

• label is any React node. LabelProps is the shared contract for controls that require either a visible label or an ariaLabel. This package itself still treats label as optional so a host can render helper text alone.
• id derives <id>__label and <id>__helper for aria-labelledby and aria-describedby.
• required adds the shared required marker.
• Typography, spacing, and color are owned here through the --jo-ui-control-* token contract.
• labelPlacement is top (default) or left.
• descriptionPlacement is below-control (default) or below-label.
• children is the nested control region used by the placement grid.

Usage

Use FieldMetadata around controls that expose label or helperText. Pass the interactive control as children, then choose label and description placement through props. Native inputs and selects reference the generated IDs with aria-labelledby and aria-describedby; validation errors remain nested alerts.

Structure

• src: runtime component, model, view-model, types, and companion tests.
• stories: Storybook stories for documentation and visual testing.

Publish footprint

This package publishes only:

• dist
• README.md

Stories and tests are excluded from the published artifact by design.