Storybook 6 Twig Setup

storybook-6-twig.md

1. Install twigjs-loader via npm.

   $ npm i -D twigjs-loader

2. Extend Storybook's Webpack config to use the Twig loader.

   main.js:

   module.exports = {
    stories: [
      "../stories/**/*.stories.mdx",
      "../stories/**/*.stories.@(js|jsx|ts|tsx)",
    ],
    addons: [
      "@storybook/addon-links",
      "@storybook/addon-essentials"
    ],
    webpackFinal: async (config, { configType }) => {
      config.module.rules.push({
        test: /\.twig$/,
        use: "twigjs-loader",
      });
   
      return config;
    }};

3. Write your stories by importing your Twig files. Example:

   button.twig:

   <button type="{{ type }}">{{ text }}</button>

   button.stories.js:

   import twigButton from "./button.twig";
   
    export default {
      title: "Button",
      argTypes: {
        type: {
          control: {
            type: "inline-radio",
            options: ["button", "submit"],
          },
        },
      },
    };
   
    const Template = ({ text, type }) =>
      twigButton({
        text,
        type,
      });
   
    export const DefaultButton = Template.bind({});
    DefaultButton.args = {
      text: "Button",
      type: "button",
    };