Hey Ben!

This looks absolutely rad. Going to start playing with this later today.

Do you think it would be worthwhile to include instructions on how to integrate this into an existing Craft project, instead of how to spin it up with a new install? I have a few ongoing projects I'd love to drop this into, but I'm a little fuzzy about what files I need and where.

Thanks again for this awesome project.

This repo is a lifesaver, thanks!

I have a template that includes a matrix, which works fine on my site, but I can't figure out how to organize the matrix data for the story.

Here's a dumbed down version of the twig file:

<section>
    {% set charactersByDay = castInOrder.charactersByDay.all() %}
    {% if charactersByDay|length %}
        {% for character in charactersByDay %}
            {% if character.characterName is not empty %}
                {{character.characterName}}
            {% endif %}
        {% endfor %}
    {% endif %}
</section>

This is the story, which doesn't work. :)

export const withCharacters = () => container(
  component({
    castInOrder: {
      charactersByDay: [{
        characterName: 'asdf'
      }],
    }
  })
)

Thanks!

Unable to find template file

I came across this error while experimenting with your awesome craft/storybook setup. I already found a workaround: I use Twig macro.

Craft uses /templates as base dir for twig-template-files so I use . as base path for my twig-files in /templates/**/*.twig. But I guess webpack does not think like that so we got a problem here...

If you have any further questions, just comment below, thanks in advance!

After git clone I added the following files:

• stories/a.stories.js
• stories/b.stories.js
• templates/components/a.twig
• templates/components/b.twig

Works with Storybook but not with Craft

stories/a.stories.js

// Import: Twig
import component from 'components/a.twig';

// Component name
export default { title: 'Test/A' };

export const Simple = () => {
  return component();
};

stories/b.stories.js

// Import: Twig
import component from 'components/b.twig';

// Component name
export default { title: 'Test/B' };

export const Simple = () => {
  return component();
};

templates/components/a.twig

A

{% set content %}
{% include "templates/components/b.twig" %}
{% endset %}

{{ content }}

templates/components/b.twig

B

Output in Storybook:

A B

Works with Craft but not with Storybook

templates/components/a.twig

A

{% set content %}
{% include "./b.twig" %}
{% endset %}

{{ content }}

Output in Storybook:

Unable to find template file ./b.twig

Workaround with macro

templates/components/a.twig

A

{% import "./b.twig" as b %}

{% set content %}
{{ b.render() }}
{% endset %}

{{ content }}

templates/components/b.twig

{% macro render() %}
  B
{% endmacro %}

Output in Storybook:

A B