diff --git a/.storybook/main.js b/.storybook/main.js index 51873e44..2da72683 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -1,76 +1,38 @@ +// This file has been automatically migrated to valid ESM format by Storybook. -const path = require('path'); -const MiniCssExtractPlugin = require('mini-css-extract-plugin'); +import path, { dirname } from 'path'; +import htmlPurge from 'vite-plugin-html-purgecss'; +import {fileURLToPath} from 'url'; +import react, { reactCompilerPreset } from '@vitejs/plugin-react'; +import { mergeConfig } from 'vite'; + +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); export default { - // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) - framework: '@storybook/react-webpack5', - stories: ['./stories/*.mdx', './stories/*.stories.@(js|jsx|mjs|ts|tsx)'], - staticDirs: ['../public', '../static','../assets','../assets/fonts', '../assets/img'] -}; -module.exports = { - stories: ['./**/stories/*.@(stories.@(js))','./**/stories/*.@(mdx)'], + framework: '@storybook/react-vite', + stories: ['./**/stories/*.@(stories.@(jsx))','./**/stories/*.@(mdx)'], + core: { + builder: '@storybook/builder-vite', + }, + build: { + outDir: path.resolve(__dirname, "./docs"), + emptyOutDir: true + }, + staticDirs: ['../assets','../assets/fonts', '../assets/img', '../styles'], addons: [ - "@storybook/addon-links", - "@storybook/addon-webpack5-compiler-babel", - "@chromatic-com/storybook", - "@storybook/addon-docs", - "@storybook/addon-styling-webpack", + "@storybook/addon-links", + "@chromatic-com/storybook", + "@storybook/addon-docs", + '@storybook/addon-vitest', + '@storybook/addon-a11y', ], - webpack: (config, options) => { - options.cache.set = () => Promise.resolve(); - return config; - }, - webpackFinal: async (config) => { - config.plugins.push(new MiniCssExtractPlugin()); - config.module.rules.push({ - test: /\.js$|jsx$/, - exclude: /node_modules\.*/, - loader: "babel-loader" - }, - { - test: /\.css$/, - use: [ - { - loader: MiniCssExtractPlugin.loader - }, - { - loader: "css-loader" - } - ] - }, - { - include: /\.(eot|ttf|woff|woff2|png|svg|ico|gif|jpg|pdf|webp)$/, - loader: 'file-loader', - type: 'javascript/auto', - options: { - name: '[path][name].[ext]' - } - }, - { - test: /\.scss$/, - use: [ - { loader: MiniCssExtractPlugin.loader }, - { loader: "css-loader", options: { url: false, sourceMap: true } }, - { - loader: "sass-loader", - options: { - sourceMap: true, - sassOptions: { - includePaths: ["./src/_scss", "./node_modules"] - } - } - } - ] + async viteFinal(config) { + return mergeConfig(config, { }); - return config; - }, - framework: { - name: '@storybook/react-webpack5', - options: {} }, - docs: {}, - typescript: { - reactDocgen: 'react-docgen-typescript' - } + docs: {}, + typescript: { + reactDocgen: 'react-docgen-typescript' + } }; \ No newline at end of file diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index 243db7cd..9a6e94cf 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -128,5 +128,7 @@ /* $file-formats: eot woff2 woff ttf */ } - +