Integration with Component Schema?

[nedjo]

The Component Schema module parallels some of what's in UI Patterns. Are there opportunities to integrate with UI Patterns?

Modelled on core's configuration schema API, Component Schema offers a fairly large set of data types and supports features like multiple values, nested variables, and components embedded in another component. Building on core's typed data API and types, Component Schema provides a set of custom types and definitions.

A sample schema for a card component shows the use of:

• multiple values (type: sequence)
• nested variables (type: component_mapping)
• variables defined once for use across multiple components, with the ability to override any default property (is_common_variable: true)
• nested components (component_type: bicon)

A sample schema for a button component shows the use of custom types that are processed in a Twig extension to provide classes; see use of component_boolean and component_string types, defined respectively in ComponentBooleanData and ComponentStringData.

[nedjo]

A bit more detail...

The best way to get a feel for how Component Schema works is through the components that ship with the Bulma Components module, which is built using Component Schema. See for example variables for the button component (based on the Bulma CSS framework's button element). One of the variables (analogous fields in ui_patterns) is state, defined as follows:

state:
  label: 'The state of the button'
  nullable: true
  type: component_string
  constraints:
    AllowedValues:
      - is-hovered
      - is-focused
      - is-active
      - is-loading
      - is-static
  provides_class: true
  documentation_url: https://bulma.io/documentation/elements/button/#states

The type: component_string here references a data type as defined in component_schema.types.yml, a format that's pretty much identical to that of a Drupal configuration schema definition:

# Extends the string type.
component_string:
  label: 'Component string'
  class: '\Drupal\component_schema\Component\Schema\ComponentStringData'
  definition_class: '\Drupal\component_schema\Component\Schema\ComponentVariableDataDefinition'

Defining custom data classes makes it possible to provide specific data handling useful in UI components. In this case, a component_string type is a specialized string value type that provides either an HTML class or an HTML attribute that will be added programmatically to an Attribute object.

How exactly? The state variable of the button component specifies provides_class: true. Component Schema includes a Twig extension, process_component(), that can be called from within a component template. In this case, the button component's template includes the line:

{% set errors = process_component() %}

The Twig extension invokes a data initialization call on each of the component's variables. When we get to state, this is handled in the addClass() method of the ComponentStringData class.

Since the variables have already been processed based on the schema data, further logic is not needed in the template. It's enough to just render the attributes:

<{{ tag }}{{ attributes }}>

[nedjo]

Did integration via a sub-module in the Component Schema module, see [meta] Integrate with UI Patterns module and sub-issues.