authentik/web/.storybook/main.js

/**
 * @file Storybook configuration.
 * @import { StorybookConfig } from "@storybook/web-components-vite";
 */

import { copyAssets } from "../scripts/build-assets.mjs";

/**
 * @param {TemplateStringsArray} strings
 * @param  {...any} values
 * @returns {string}
 */
const html = (strings, ...values) => String.raw({ raw: strings }, ...values);

await copyAssets();

/**
 * @satisfies {StorybookConfig}
 */
const config = {
    stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
    staticDirs: [{ from: "../dist/assets", to: "/static/dist/assets" }],
    addons: [
        // ---
        "@storybook/addon-links",
        "@storybook/addon-docs",
    ],
    framework: "@storybook/web-components-vite",
    viteFinal: async (config) => {
        return {
            ...config,
            define: {
                ...config.define,
                "import.meta.env.AK_BUNDLER": JSON.stringify("storybook"),
            },
            resolve: {
                ...config.resolve,
                // Avoid multiple instances of web components packages.
                conditions: [],
            },
        };
    },

    previewBody: (body) => html`
        <ak-skip-to-content></ak-skip-to-content>
        <ak-message-container></ak-message-container>

        ${body}
    `,
};

export default config;