Schema & Component Requirements

Spaces are dependent on two components and two properties in your schemas.

Component Dependencies

Spaces require:

• Component List (LINK ONCE ON NPM)
• The Component Component (LINK ONCE ON NPM)

The Component List component allows you to render out an array of components. The ✨ Component Component ✨ allows you to embed a component inside another component by passing it a reference to the desired component.

Schema Requirements

Requirements for Space and Logic components are as follows:

Logic

The only requirement for a Logic is that its schema contains a property called embededComponent which is set to an empty object. Here is an example Logic component which displays its embedded component based on time:

_description: |
  A description of this Logic

startTime:
  _label: Start Time
  _display: settings
  _has:
    -
      fn: text
      type: datetime-local
    - label
    -
      fn: description
      value: The start time that the component should be displayed on

endTime:
  _label: End Time
  _display: settings
  _has:
    -
      fn: text
      type: datetime-local
    - label
    -
      fn: description
      value: The end time that the component should stop being displayed on

_groups:
  settings:
    fields:
      - startTime
      - endTime

# The component that will be inside of the logic component
embededComponent: {}

Space

A Space component requires two things:

1. A name that begins with clay-space. Name the component clay-space-<SOMETHING DESCRIPTIVE>
2. A property called content which has the _componentList behavior. Instantiates as an empty array.
3. Only has one component in the Component List. This component is assumed to be the corresponding Logic component for the Space and will wrap each component.

An example of a Space schema might look like:

_description: |
  My Space!

content:
  _componentList:
    min: 1
    include:
      - my-logic-component