Storybook work with UI library

If your project use some UI library, e.g. MUI, Chakra UI, you need set Provider with preview.js

 
// .story/preview.js
import type { Preview } from '@storybook/react';
import withChakraUi from './custom-decoraters/withChakra';
 
const preview: Preview = {
  parameters: {
    nextjs: {
      appDirectory: true,
    },
    actions: { argTypesRegex: '^on[A-Z].*' },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
  decorators: [withChakraUi],
};
 
export default preview;
 

import React from 'react';
import { ChakraProvider, extendTheme } from '@chakra-ui/react';
 
import { theme } from '../../src/app/[lng]/theme';
 
const withChakraUi = (Story: React.ComponentType) => (
  <ChakraProvider resetCSS theme={extendTheme(theme)}>
    <Story />
  </ChakraProvider>
);
 
export default withChakraUi;