canvas-component-definition

To validate a React component for Canvas compatibility, verify that index.jsx, component.yml, and stories align with Canvas metadata standards. This ensures proper folder structure, machineName alignment, and story placement for seamless integration.

A Drupal Canvas component definition requires index.jsx, component.yml, and story files. These artifacts enforce the Canvas component contract, standardizing folder structure and metadata to prevent integration overhead across repositories.

Migrating legacy React components to Canvas standards requires auditing existing structures against the Canvas component contract. You must align folder naming, ensure machineName alignment, and validate story placement to guarantee compatibility.

Canvas component validation works with Storybook stories by checking story conventions and placement within the repository. It ensures story files align with the Canvas component contract alongside index.jsx and component.yml metadata.

Your Canvas component fails the metadata contract check when folder naming, machineName alignment, or story placement diverge from Canvas standards. The validation enforces required files like index.jsx and component.yml to maintain structural consistency.