import { createRequire } from 'node:module';
import { dirname, join } from 'node:path';
import type { StorybookConfig } from '@storybook/web-components-vite';
import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
import { mergeConfig } from 'vite';
const require = createRequire(import.meta.url);
const config: StorybookConfig = {
stories: ['../src/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'],
addons: [getAbsolutePath('@storybook/addon-docs')],
framework: {
name: getAbsolutePath('@storybook/web-components-vite'),
options: {},
},
viteFinal: async (config) =>
mergeConfig(config, {
plugins: [nxViteTsPaths()],
css: {
postcss: {
plugins: [
require('tailwindcss')({
config: './libs/shared/cloud-fix-webview/tailwind.config.js',
}),
],
},
},
}),
};
export default config;
// To customize your Vite configuration you can use the viteFinal field.
// Check https://storybook.js.org/docs/react/builders/vite#configuration
// and https://nx.dev/recipes/storybook/custom-builder-configs
function getAbsolutePath(value: string): any {
return dirname(require.resolve(join(value, 'package.json')));
}