Components:Conventions - bettyblocks/cli GitHub Wiki

Component types

To ensure interoperability between complementary component sets we defined a component type convention. This regards building a custom set on top of the default component set, or creating distinct sets with different goals or focus that need to be used together.

The default component set supports the following standardized types:

• BODY_COMPONENT;
• LAYOUT_COMPONENT;
• CONTAINER_COMPONENT;
• CONTENT_COMPONENT.

Body Component

The BODY_COMPONENT type is added to the allowedTypes field of the root component on every page. This type can be added to every component that needs to be placed on the body of the page directly. For example: row, header, footer and navigation components could be of this type. In the default component set the BODY_COMPONENT type is also added to the allowedTypes field of the column and panel components, so body components can also be used there.

Layout Component

The LAYOUT_COMPONENT type is added to components that are part of a layout, for example the column components in a row. Therefore this type is added to the allowedTypes field of the row in the default component set. In a library like Grommet, the box component would be a good example of a layout component, because it can reside in a grid, stack or another box component.

Container Component

The CONTAINER_COMPONENT type is added to components that can contain other components, specifically the BODY_COMPONENT, CONTENT_COMPONENT and other components of the type CONTAINER_COMPONENT. In the default component set the CONTAINER_COMPONENT type is added to the allowedTypes field of the column, form, page content, data container and data list components.

Content Component

Components of type CONTENT_COMPONENT are regular components that make up the content of the page, like title, text, image and button or form components. Content components should not be able to contain other components. This type is added to the allowedTypes field of the column, form, page content, data container and data list components in the default component set.

NOTE: This convention will only apply to newly created sets, existing sets may adhere to the original rules.