Due to the recent upgrade to Storybook 7, the source blocks of Canvases were broken, they were only showing args. This was mainly due to the fact that as of Storybook 7 the meta tags of the MDX files have changed, thus causing the issue. These are now based on imports. We also needed to rename index.stories.mdx files to index.mdx because Storybook was throwing errors, maybe due to a conflicts with index.stories.tsx files and new imports. Anyway this way of naming MDX files seems to be the recommend one based on the official documentation.
47 lines
1.1 KiB
TypeScript
47 lines
1.1 KiB
TypeScript
import { StorybookConfig } from "@storybook/react-vite";
|
|
import remarkGfm from "remark-gfm";
|
|
|
|
const config: StorybookConfig = {
|
|
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
|
|
addons: [
|
|
"@storybook/addon-links",
|
|
"@storybook/addon-essentials",
|
|
"@storybook/addon-interactions",
|
|
"@storybook/addon-a11y",
|
|
"@storybook/preset-scss",
|
|
{
|
|
name: "@storybook/addon-docs",
|
|
options: {
|
|
mdxPluginOptions: {
|
|
mdxCompileOptions: {
|
|
remarkPlugins: [remarkGfm],
|
|
},
|
|
},
|
|
},
|
|
},
|
|
],
|
|
framework: {
|
|
name: "@storybook/react-vite",
|
|
options: {},
|
|
},
|
|
staticDirs: ["../src"],
|
|
features: {
|
|
storyStoreV7: true,
|
|
},
|
|
async viteFinal(config, options) {
|
|
// We don't want the Storybook build to generate type definitions.
|
|
const newConfig = {
|
|
...config,
|
|
plugins: config.plugins.filter((plugin) => {
|
|
if (typeof plugin === "object") {
|
|
return (plugin as any).name !== "vite:dts";
|
|
}
|
|
return true;
|
|
}),
|
|
};
|
|
return newConfig;
|
|
},
|
|
};
|
|
|
|
export default config;
|