🇺🇸United States @klu

I've created an MR to "Add some troubleshooting cases to README" in case it's helpful for anyone.

I added a comment in https://www.drupal.org/project/storybook/issues/3490944#comment-15934552 💬 Testing Storybook sdc_examples: my-banner Storybook is blank page Active that might be helpful. I'm repeating the last part for convenience here:

@yevko: I'm able to include/embed SDC components, e.g., `{% include('sdc_examples:my-button') %}` but as soundvox indicated, it looks like you have to use either an SDC template or a Twig template that is registered with Drupal. If you're using an existing Drupal theme, it may already be registered and you can use the appropriate namespace, e.g., `{% include '@mytheme/path/to/mytemplate.twig' %}`.

@adanbouzoua: Are you getting any output when you visit the site at `/storybook/stories/render`?

Example based on your generated ID:

https://yoursite.localhost/storybook/stories/render/eyJwYXRoIjoibW9kdWxl...

In my case, I was getting a blank page at https://mysite.localhost:6006 before I installed/enabled sdc_examples, i.e.:

$ ddev composer require 'drupal/sdc_examples:1.x-dev@dev'
$ ddev drush en sdc_examples -y 

I'm new to SDC and Storybook and the two video tutorials were quite helpful, thanks to the maintainers! I'm using ddev following the additional ddev storybook setup at https://git.drupalcode.org/project/storybook/-/blob/1.x/README.md?ref_ty...

My troubleshooting steps:

1. Launch ddev and storybook

$ ddev restart
$ ddev yarn storybook --no-open

2. Get the storybook URL from ddev describe

$ ddev describe
storybook    https://mysite.localhost:6006

3. Generate the json file using `ddev drush storybook:generate-stories path/to/my-story.stories.twig` or `ddev drush storybook:generate-all-stories`

$ ddev drush storybook:generate-all-stories
 [success] JSON file generated for modules/composer/sdc_examples/components/my-banner/my-banner.stories.json.

4. Try visiting https://mysite.localhost/storybook/stories/render/[hash] where [hash] is the "id" in my-banner.stories.json

5. In my-banner.stories.twig, when testing I temporarily removed the include and just added some basic HTML markup, e.g., the hardcoded-demo.stories.twig example.

In my case, the hardcoded example was working (both visiting https://mysite.localhost/storybook/stories/render/[hash] and
https://mysite.localhost:6006, which is when I realized that I had not reinstalled/enabled sdc_examples after rebuilding my site, and the my-banner.stories.twig is including the my-banner component from sdc_examples:

    {{ include('sdc_examples:my-banner', {
        heading,
        ctaText,
        ctaHref,
        ctaTarget,
      }) }}

@yevko: I'm able to include/embed SDC components, e.g., `{% include('sdc_examples:my-button') %}` but as soundvox indicated, it looks like you have to use either an SDC template or a Twig template that is registered with Drupal → . If you're using an existing Drupal theme, it may already be registered and you can use the appropriate namespace, e.g., `{% include '@mytheme/path/to/mytemplate.twig' %}`.

Works in my testing, thanks @dsnopek!

Thanks for your work on this, @bnjmnm! The changes in your patch would be really helpful for us. I’ve taken a stab at re-rolling for 10.3.x based on patch 3 and the interdiff. It appears to work for me and is a significant improvement for doing our styling. I’m attaching the patch that I’m using, but I did not try to update the tests (my apologies; I’m newly coming back to Drupal development).