// .storybook/main.ts
import type { StorybookConfig as StorybookViteConfig } from '@storybook/react-vite'

const config: StorybookViteConfig = {
    framework: {
        name: '@storybook/react-vite',
        options: {},
    },

    stories: [
        '../src/**/*.stories.@(ts|tsx)',
    ],

    addons: [
        '@storybook/addon-docs',
        '@storybook/addon-links',
        '@storybook/addon-themes',
    ],

    docs: {
        defaultName: 'Description',
    },

    core: {
        disableTelemetry: true,
        disableWhatsNewNotifications: true,
    },

    typescript: {
        check: true,
    },
}

export default config

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tsconfigPaths from 'vite-tsconfig-paths'
import svgr from 'vite-plugin-svgr'
import mdx from '@mdx-js/rollup'
import path from 'path'

import remarkGfm from 'remark-gfm'
import remarkImages from 'remark-images'
import remarkTextr from 'remark-textr'
import remarkGEmoji from 'remark-gemoji'

import textrTypoApos from 'typographic-apostrophes'
import textrTypoQuotes from 'typographic-quotes'
import textrTypoPossPluralsApos from 'typographic-apostrophes-for-possessive-plurals'
import textrTypoEllipses from 'typographic-ellipses'
import textrTypoNumberEnDashes from 'typographic-en-dashes'

import rehypeSlug from 'rehype-slug'

// There's only typographic-em-dashes that covers US typographic style, but no
// need for a full-blown npm module just to get European en dash typography.
const textrTypoEnDashes = (input: string) => {
    return input
        .replace(/ -- /gim, ' – ')
}

const srcs = [
    'app',
    'components',
    'hooks',
    'icons',
    'models',
    'utils',
    'views',
]

// https://vite.dev/config/
export default defineConfig({
    base: './',
    build: {
        outDir: 'build'
    },
    server: {
        host: "0.0.0.0",
        port: 3300,
        proxy: {
            '/api': 'http://localhost:5010',
        },
    },
    resolve: {
        alias: Object.fromEntries(
            srcs.map(d => [d, path.resolve(__dirname, `src/${d}`)])
        )
    },
    plugins: [
        {
            enforce: 'pre',
            ...mdx({
                remarkPlugins: [
                    remarkGfm,
                    remarkImages,
                    remarkGEmoji,
                    [remarkTextr, {
                        plugins: [
                            textrTypoApos,
                            textrTypoQuotes,
                            textrTypoPossPluralsApos,
                            textrTypoEllipses,
                            textrTypoNumberEnDashes,
                            textrTypoEnDashes,
                        ],
                        options: {
                            locale: 'en-us'
                        }
                    }],
                ],
                rehypePlugins: [
                    rehypeSlug,
                ],
            })
        },
        tsconfigPaths(),
        react(),
        svgr({
            svgrOptions: {
                icon: true,
            }
        }),
    ]
})