Today, we will talk about about Drupal Single Directory Components or SDC and Storybook. Single Directory Components in Drupal allows you to arrange your UI components, while Storybook enables you to engage with them. Integrating them changes your development process, creating a groundbreaking way to build and test UI components. 

And the release of Drupal 11 brings a stabilized version of Drupal Single Directory Components.  

Think about this for a second - 

Imagine a solution that can keep website UI components tidy, reusable for various projects, uniform across all web pages, and offer even more benefits.

SDC (Single Directory Components) is a key feature in Drupal 10.1 and Drupal 11, enabling all of this to happen.

In this blog, we will discuss how integrating SDC and Storybook can help you build faster and work more efficiently. 

If you're looking to switch from your current content management system to Drupal, take a look at our migration services before we proceed.

Migrate To Drupal Now! 

Let's dive in! 

What Is SDC? 

SDC was once a contributed module, but it has now become part of the Core and is more stable since the release of Drupal version 11. SDC or Single Directory Components offers a new way to structure and organize components. SDC is how Drupal uses components. 

SDC enhances your Drupal themes for a more contemporary style. These components include HTML, CSS, and JavaScript code, making it simple to customize and use on different pages or apps. 

All the files needed to make a component are in one single directory. 

But what exactly are components? 

In Drupal, components are pieces of code that can be used again and again. They may include Twig templates, metadata, styles, and scripts that need to be part of Drupal templates. They also consist of elements such as navigation menus, forms, sliders, and buttons. 

With SDC developers can design components that are interchangeable and modular, making their code more flexible and reusable. Components help with organizing, reusing, keeping things consistent, scaling, testing, and collaborating. This configuration helps in easily integrating with tools such as Storybook.

The directory of an SDC contains these files:

1. A YAML file containing metadata that assists Drupal in identifying the component. 

2. A Twig file containing the templates. 

3. A CSS file containing the styles. 

4. A JavaScript file containing the scripts. 

A component can also include a screenshot, a PHP file (with hooks and alters), media (like images, audio, or video), or any other related items, but this is optional. 

More reliable and simpler front-ends that are easy to update?

Yes, please! 

Also Check Out: 

1. Drupal 11: Eleven Changes & Updates In Drupal 11 

2. DrupalCon Barcelona: 2024 Wrap-Up From Europe 

3. Drupal 7 End Of Life: Top Reasons You Should Migrate To Drupal 10 

4. RFP: How To Create An RFP For Open Source Solutions? 

What Is Storybook? 

Storybook is a tool that helps developers and designers view and test all their components in one place before using them on the actual website. It's fantastic because it's open-source, widely used, and has a user-friendly interface, which makes it ideal for modern development workflows!

You can make and test components individually. This confirms they run independently prior to integration. It provides a visual guide to the components, making it simple to see and grasp how each component works.  

Storybook offers a simpler file layout than various alternatives, makes use of webpack, and is compatible with a wide range of front-end technologies. It can easily adapt to fit individual needs. Storybook is one of the top design systems in use with Drupal today.

OpenSense Labs is among only 100 organizations worldwide that are recognized as a Drupal Association Certified Partner. If you're looking to migrate your Drupal 7 site, check out our services today.

Migrate To Drupal 10 Now! 

Why Should You Integrate SDC With Storybook In Drupal? 

Integrating SDC with Storybook in Drupal provides many benefits. It automatically loads components, which simplifies the process of creating and managing stories with minimal setup. The SDC Storybook integrations provide unique benefits, that tools like the SDC Styleguide and Drupal Storybook can’t provide alone.  

Let’s have a look at some of these advantages:  

1. Components work separately and can be integrated easily 

A component can function on its own in different environments, using the BEM (Block Element Modifier) method. A component can function on its own, regardless of the Drupal version or the theme in use. It is compatible with all systems. 

2. Simple Drupal setup needed 

You can develop components without needing to install or set up Drupal dependencies. You can create frontend components in Storybook to make your work faster, without having to run a large Drupal setup. This accelerates development and makes sure everything functions smoothly. 

3. Makes DevOps and CI/CD pipelines easier 

Separate components simplify testing and deployment. You can skip Drupal-specific integration in CI pipelines, you can streamline your workflows and make them easier to manage. It keeps components organized and makes it easy to manage JavaScript and CSS files, templates, and data flow within components.

4. Using Faker.js and JSON Schema for scalability and adaptability 

With tools such as Faker.js, you can make test data for components without using actual content. JSON Schema clearly and consistently defines component data, which helps keep data integrity intact. You can test and view components individually which helps make UI components easier to manage and expand.

5. Tool used widely for frontend development 

Storybook is commonly used in front-end development, making it easier for new developers to get started, even if they are not familiar with Drupal. With JSON Schema, developers can build components without having to know a lot about Drupal, making it easier for more developers to participate in the project.

6. Drupal-related functions built into components 

Integrate Drupal behaviours, such as [Drupal.attachBehaviors()], directly into Storybook previews. This ensures that the components work consistently in both Storybook and the live environment. Integrates drupalSettings and once.js to make sure that Storybook components work like those in Drupal.

Requirements For Integrating SDC With Storybook 

You must have at least Drupal version 10.1 or the latest Drupal 11 to use SDC. Some initial steps are needed before you can start creating components and integrating them with Storybook.  

1. Make sure you have a recent version of Node.js on your computer. We recommend using the nvm tool for managing node versions, but you can use any method you usually prefer to install a node.

2. Set up a local environment for your Drupal site. Storybook connects to Drupal to show the individual components, so Drupal needs to be running and accessible.

Also Check Out: 

1. 7 Quick Steps to Create API Documentation Using Postman 

2. What is Product Engineering Life Cycle? 

3. Drupal's Omnichannel Capabilities: Enhancing Customer Engagement and Experience 

4. The Importance of Learning Soft Skills: A Journey of Self-Discovery 

How To Integrate SDC With Storybook In Drupal 11? 

Setting up Storybook with Drupal 11 is simple. You just need to create SDC enable them, and install the required dependencies. Developers can easily connect SDC with Storybook by following specific steps. They can use tools such as Twig and Webpack5 to improve how their components are templated and rendered. 

Step 1: Setting Up SDC 

1. Enable the Drupal Single Directory Components module in the Extend tab. When the module is stable, it will no longer appear on the Extend tab, but it will function automatically on Drupal websites. 

2. Turn off CSS and JS aggregation in the Drupal admin UI under Configuration > Development > Performance. 

3. Turn on Twig development mode and turn off caching. With Drupal 10.1 and Drupal 11, you can now access the new ‘Development Settings’ page under Configuration > Development. This is another great feature in the latest releases. 

Step 2: Configure Storybook 

Now we need to configure Storybook:  

• Install composer requires 'drupal/storybook:^1.0@beta'.  

• Setting up development.service.yml 

• Run the command: 

drush role:perm:add anonymous 'render storybook stories' 

• To set up the storybook, run these commands in the root folder: 

yarn set version berry 

echo 'nodeLinker: node-modules' >> .yarnrc.yml 

# Install and configure stock Storybook. 

yarn dlx sb init --builder webpack5 --type server 

Step 3: Develop Stories for Components 

• Create stories for each SDC component to highlight its features and variations. 

• Use Twig files to set up the layout and details of each component story. 

• Make sure that every story correctly shows how the component looks and acts. 

Key Takeaways 

1. SDC which stands for Single Directory Components, offers a new way to arrange and manage components in Drupal. 

2. Storybook is a tool that helps developers and designers view and test all their components in one place before using them on the actual website. 

3. Integrating SDC with Storybook in Drupal automatically loads components, simplifying the process of creating and managing stories with minimal setup. 

4. To use SDC you need at least Drupal version 10.1 or the latest Drupal 11. 

5. Setting up Storybook with Drupal 11 is simple, just create SDC enable them, and install the necessary dependencies.