storybook-addon-performance
storybook-addon-performance copied to clipboard
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
//.storybook/main.ts
const config: StorybookConfig = {
stories: [
'../storybook/**/*.mdx',
'../storybook/**/*.story.@(js|jsx|mjs|ts|tsx)'
],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/blocks',
'@storybook/addon-interactions',
{
name: '@storybook/addon-styling',
options: {}
},
'@storybook/addon-a11y',
'@storybook/addon-designs',
'@storybook/addon-mdx-gfm',
'storybook-addon-performance'
],
framework: {
name: '@storybook/react-webpack5',
options: {}
},
docs: {
autodocs: 'tag'
}
};
.storybook/preview.ts
import type { Preview } from '@storybook/react';
import { createGlobalStyle, ThemeProvider } from 'styled-components';
import { withThemeFromJSXProvider } from '@storybook/addon-styling';
import { withPerformance } from 'storybook-addon-performance';
import lightTheme from '../src/constants/defaultThemes/lightThemes';
/* TODO: update import for your custom theme configurations */
// import { lightTheme, darkTheme } from '../path/to/themes';
/* TODO: replace with your own global styles, or remove */
const GlobalStyles = createGlobalStyle`
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
`;
const preview: Preview = {
parameters: {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/
}
}
},
decorators: [
// Adds global styles and theme switching support.
withThemeFromJSXProvider({
/* Uncomment for theme switching support */
themes: {
light: lightTheme
},
defaultTheme: 'light',
Provider: ThemeProvider,
GlobalStyles
}),
withPerformance
]
};