docs/content/en/project/contributing/contributing-components.md
Components are defined by schemas. Each component's structure, capabilities, and metadata follow the Component schema in meshery/schemas. When creating or modifying components, ensure they conform to the schema specification. See Contributing to Schemas for details.
In Meshery, a Components is a fundamental building block used to represent and define the infrastructure under management. Each component provides granular and specific support for your infrastructure and applications. Once registered with Meshery Server (in the Registry), components are available for inclusion in Designs that you create. Components can be created and published by anyone, allowing you to share you custom extensions with the community.
Prework:
<!-- 1. [Component Identification](#component-identification) -->Development:
Postwork:
<a id="component-classification"></a>
{{% alert color="warning" title="Prerequisite Reading" %}}Components are defined and packaged in context of a Model. Be sure to first read and understand <a href='/project/contributing/contributing-models'>how models are created and packaged</a> before attempting to create a new component. Without a model defined first, they component will be homeless.{{% /alert %}}
<a id="component-customization"></a>
Each component has any number of customizable properties in the form of metadata. The metadata provides additional details about the component, enhancing its capabilities. Metadata can be attached to components to customize their behavior. The metadata can be used to define the component's behavior, appearance, and interactions with other components.
Components optionally have a UI schema, which is a JSON object that describes how a form should be rendered. It can be passed to JSON forms and is categorized into controls or layouts. The UI schema object follows the form field hierarchy's tree structure and defines how each property should be rendered. For example, it can specify the order of controls, their visibility, and the layout.
Some UI schema elements have an options property that allows for further configuration of the rendering result. These configuration options are often renderer specific and need to be looked up. Some commonly used options include:
ui:order: An array of field names in the order in which they should appear
ui:widget: The name of an alternative widget to use for the field
ui:field: The name of a custom field
classNames: The class names to put on the component
Meshery UI uses the react-jsonschema-form library to render forms. See the RJSF documentation for more information.
Meshery contributors who want to customize the visual representation of a Meshery component can do so by modifying the component's metadata. This metadata includes fields for specifying the component's:
Contributors can also override these settings for individual components if needed. For example, if a component has a different SVG color than its model, you can specify a custom SVG color for that component.
Component icons will be written to the /meshmodel/components/<model-name>/icon/... directory upon registration.
<a id="component-definitions"></a>
Create a relationship definition as a JSON file, placing this new definition file into its respective model folder (see Contributing to Models). Relationship definition files are commonly named relationships.yaml as a convention, however, this name is not required. A model may include any number of relationship definitions. Include the following attributes in your relationship definition:
kind: The genre of component (e.g., Pod).model: The model to which the component belongs (e.g., kubernetes).version: The version of the component definition (e.g., v1.0.0).description: A characterization of the component, its purpose and behavior.{{% alert color="info" title="Use Existing Components as Examples" %}}Browse the <a href='https://github.com/meshery/meshery/tree/master/server/meshmodel'>existing components in the Meshery repository</a> to find examples of how to existing component, using them as a template.{{% /alert %}}
<a id="component-testing"></a>
version property with each change published.<a class="anchorjs-link" id="component-contribution"></a>
Submit a pull request to the Meshery repository with your new component definition, so that all users can benefit from the component(s) you have defined.
Keeping your component definition in a separate file allows for easier management and review of the component(s) you have defined.
{{% alert color="info" title="Keeping your custom Components private" %}}Alternatively, if you would like to keep the component definition private, you can bundle your component(s) in a custom model, import the custom model into your Meshery deployment. Your private component definition(s) will be registered in your Meshery Server's <a href='/concepts/logical/registry'>registry</a> and available for use within your Meshery deployment.{{% /alert %}}