Storybook: Nunjucks template?

[kevinkashou]

I am currently using storybook html and got everything I need going except one thing, that is the support for importing a nunjucks partial. Is there a way to do that? If so what’s the best approach?

I see some people using storybook set up with vue template option but I feel like hack approach.

Let me know what you think.

Thank you!

[kevinkashou]

Decided to move away form storyboard since I found a different solution.

[stockmind]

Sorry for the hijack, but I stumbled upon this issue, what alternative solution did you found?

[shilman]

could you add nunjucks-loader to your webpack config?

https://github.com/at0g/nunjucks-loader

[radum]

main.js

module.exports = {
    stories: [
        '../src/**/*.stories.mdx',
        '../src/**/*.stories.@(js|jsx|ts|tsx)'
    ],
    addons: [
        '@storybook/addon-links',
        '@storybook/addon-essentials',
        "@storybook/preset-scss"
    ],
    webpackFinal: async (config, { configType }) => {
        // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
        // You can change the configuration based on that.
        // 'PRODUCTION' is used when building the static version of storybook.

        // Make whatever fine-grained changes you need
        config.module.rules.push({
            test: /\.njk$/,
            use: [
                {
                    loader: 'simple-nunjucks-loader',
                    options: {}
                }
            ]
        });

        // Return the altered config
        return config;
    }
};

test.stories.js

import { action } from '@storybook/addon-actions';

import Button from  'Button.njk';

export default {
    title: 'Design System/Atoms/Button',
    argTypes: {
        label: { control: 'text' }
    }
};

const Template = ({ onClick, label }) => {
    return Button({ label });
};

export const Text = Template.bind({});
Text.args = {
    label: 'Button',
    onClick: action('onClick')
};

Button.njk

{% macro Button(label='Button') %}
<button type="button" class="lta-btn">{{ label }}</button>
{% endmacro %}

{{ Button(label) }}

And that is it, this works.