// This file has been automatically migrated to valid ESM format by Storybook.
import { createRequire } from 'node:module';
import { dirname, join } from 'path';

import type { StorybookConfig } from '@storybook/react-vite';
import jsxScssPlugin from '@preply/ds-vite-plugin-jsx-scss';
import remarkGfm from 'remark-gfm';
import { configureSort } from 'storybook-multilevel-sort';

const require = createRequire(import.meta.url);

configureSort({
    storyOrder: {
        /*
         * Root-level leaf pages are hoisted above the root sections by the
         * Storybook manager regardless of this order, so they come first here
         * to keep index.json aligned with the visible sidebar.
         */
        welcome: null,
        changelog: null,
        playground: null,
        'get started': {
            'installation: client-side app': null,
            'installation: next.js': null,
            'ai assistants': null,
        },
        'how to contribute': {
            community: null,
            'ai design experiments': null,
            icons: null,
            illustrations: null,
        },
        'design language': {
            foundations: {
                color: null,
                typography: null,
                elevation: null,
                motion: null,
                'tone of voice': null,
            },
            patterns: {
                'popovers, dialogs, modals': null,
                selection: null,
            },
        },
        'design tokens': {
            overview: null,
            'token explorer': null,
        },
        conventions: {
            'responsive and shorthand values': null,
            popovers: null,
            forms: null,
        },
        assets: {
            'icon explorer': null,
            'illustration explorer': null,
            fonts: null,
            'fonts explorer': null,
            favicons: null,
        },
        utilities: {
            overview: null,
            gettokenvar: null,
            breakpoints: null,
            hover: null,
            'gradient borders': null,
            useportalelement: null,
        },
        components: null,
    },
    /**
     * Stories are displayed in the order they are defined in the code, except for a component's
     * Guidelines page, which is hoisted above its autodocs and stories.
     *
     * The hoisting can't be expressed in `storyOrder`: its `*`/`**` wildcards propagate through
     * state shared between comparisons, so a nested key only takes effect for the first component
     * that gets compared.
     */
    compareNames: (name1, name2) => {
        if (name1 === name2) return 0;
        if (name1 === 'guidelines') return -1;
        if (name2 === 'guidelines') return 1;
        return 0;
    },
});

function getAbsolutePath(value) {
    return dirname(require.resolve(join(value, 'package.json')));
}

const config: StorybookConfig = {
    stories: [
        '../pages/**/*.@(stories.tsx|mdx)',
        '../../../packages/web-lib/src/**/*.stories.tsx',
        '../../../packages/web-lib/src/**/*.mdx',
    ],
    staticDirs: ['../public'],
    addons: [
        getAbsolutePath('@storybook/addon-a11y'),
        getAbsolutePath('@storybook/addon-links'),
        getAbsolutePath('@storybook/addon-vitest'),
        {
            name: getAbsolutePath('@storybook/addon-docs'),
            options: {
                mdxPluginOptions: {
                    mdxCompileOptions: {
                        remarkPlugins: [remarkGfm],
                    },
                },
            },
        },
        getAbsolutePath('@chromatic-com/storybook'),
        getAbsolutePath('storybook-addon-pseudo-states'),
        getAbsolutePath('@storybook/addon-designs'),
        getAbsolutePath('storybook-addon-tag-badges'),
    ],
    framework: {
        name: getAbsolutePath('@storybook/react-vite'),
        options: {},
    },
    viteFinal: async config => {
        config.plugins = [jsxScssPlugin(), ...(config.plugins ?? [])];
        config.resolve = {
            ...config.resolve,
            dedupe: ['react', 'react-dom'],
        };
        return config;
    },
    features: {
        componentsManifest: true,
        experimentalDocgenServer: true,
    },
    typescript: {
        reactDocgen: 'react-docgen-typescript',
        reactDocgenTypescriptOptions: {
            shouldExtractLiteralValuesFromEnum: true,
            shouldExtractValuesFromUnion: true,
            shouldRemoveUndefinedFromOptional: true,
            include: [join(import.meta.dirname, '../../../packages/web-lib/src/**/*.tsx')],
        },
    },
    tags: {
        internal: {
            defaultFilterSelection: 'exclude',
        },
    },
};

export default config;