1- import { dirname , join } from "path" ;
2- import type { StorybookConfig } from "@storybook/web-components-webpack5" ;
1+ import type { StorybookConfig } from '@storybook/web-components-vite' ;
32
3+ import { join , dirname } from "path"
4+
5+ /**
6+ * This function is used to resolve the absolute path of a package.
7+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
8+ */
9+ function getAbsolutePath ( value : string ) : any {
10+ return dirname ( require . resolve ( join ( value , 'package.json' ) ) )
11+ }
412const config : StorybookConfig = {
5- stories : [ "../src/**/*.mdx" , "../src/**/*.stories.@(js|jsx|ts|tsx)" ] ,
6- addons : [
7- getAbsolutePath ( "@storybook/addon-links" ) ,
8- getAbsolutePath ( "@storybook/addon-essentials" ) ,
9- getAbsolutePath ( "@storybook/addon-actions" ) ,
10- getAbsolutePath ( "@storybook/addon-a11y" ) ,
11- {
12- name : "@storybook/addon-docs" ,
13- options : {
14- configureJSX : true ,
15- babelOptions : { } ,
16- sourceLoaderOptions : null ,
17- transcludeMarkdown : true ,
18- } ,
19- } ,
20- getAbsolutePath ( "@storybook/addon-webpack5-compiler-babel" ) ,
21- getAbsolutePath ( "@chromatic-com/storybook" )
13+ "stories" : [
14+ "../src/**/*.mdx" ,
15+ "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)" ,
16+ ] ,
17+ "addons" : [
18+ getAbsolutePath ( '@storybook/addon-essentials' ) ,
19+ getAbsolutePath ( '@storybook/addon-a11y' ) ,
2220 ] ,
23- framework : {
24- name : getAbsolutePath ( " @storybook/web-components-webpack5" ) ,
25- options : { } ,
21+ " framework" : {
22+ " name" : getAbsolutePath ( ' @storybook/web-components-vite' ) ,
23+ " options" : { }
2624 } ,
2725 staticDirs : [ { from : './assets' , to : '/assets' } ] ,
28- docs : { } ,
2926} ;
30- export default config ;
31-
32- function getAbsolutePath ( value : string ) : any {
33- return dirname ( require . resolve ( join ( value , "package.json" ) ) ) ;
34- }
27+ export default config ;
0 commit comments