SDC - Component library
This module streamlines the development and visual testing of Single-Directory Components (SDCs) directly from your theme. It allows you to easily preview and test individual components with sample data, and can also perform accessibility checks. This helps ensure a consistent design system and simplifies component development by allowing you to see them in isolation without needing to build full pages.
Introduction
SDC Component Library makes developing Drupal components more efficient by enabling easy rendering and visual testing of Single-Directory Components (SDCs) directly from the theme. Components with a .story.twig file can be previewed with dummy data.
Features
The SDC Component Library module provides the following functionality:
- Automatically reads and lists all SDCs from your theme.
- Allows rendering components with a .story.twig file using dummy data.
- Enables visual inspection and testing of components at /components.
- Integration with a WCAG checker for accessibility validation.
This module is perfect for developers who want to streamline their component development workflow, allowing them to see and test their components without setting up full content pages.
Use cases include:
- Rapid component development and testing.
- Ensuring consistent design system implementation.
- Accessibility checks directly within component previews.
Post-Installation
Once installed, the module reads all components from your theme folder that are set up as SDCs. You can access the component list at /components. No additional configuration is needed. However, to utilize the full functionality, ensure your components have a .story.twig file, which allows them to be rendered with sample data.
Additional Requirements
- Single Directory Components (SDC) module enabled.
This module requires the SDC module to be active and functional within your theme.
Similar Projects
Other component development modules in Drupal exist, such as UI Patterns or storybook. However, SDC Component Library is uniquely focused on leveraging Single-Directory Components and providing direct visual previews of each component without complex setup.