storybook doesn't find components based on chakra-ui - reactjs

Question

i was trying storybook and chakra ui.
Down below is how I structured my folders,
module.exports = {
"stories": [
"../src/**/*.stories.mdx",
"../src/**/*.stories.#(js|jsx|ts|tsx)"
],
"addons": [
"#storybook/addon-links",
"#storybook/addon-essentials",
"#storybook/preset-create-react-app"
]
}
and this is my storybook config.
unluckly i receive an error, it seems like storybook doesn't find my components.
can someone help me to understand what's wrong ?
Why storybook doesn't find my components ?
-----------Update------------
this is the story that I tried to added
import React from 'react';
import {
Menu,
MenuButton,
} from '#chakra-ui/core';
export function MenuComp() {
return (
<Menu>
<MenuButton>Games</MenuButton>
</Menu>
);
}
MenuComp.storyName = 'test';

Answer 1

I started with an easier component and followed strictly the tutorial
i will wrote here a little guide that, I hope, will simplify the reader life.
1.I wrote a simple component in path "src/components/CustomButton"
import React, { FC } from 'react';
import { Button } from '#chakra-ui/core';
interface ButtonProps {
size: string | any;
variantColor: string;
}
const CustomButton: FC<ButtonProps> = ({ size, variantColor }) => (
<Button variantColor={variantColor} size={size}>
Button
</Button>
);
export default CustomButton;
2.I added the relative story component in "src/stories/CustomButton.stories.tsx
import React from 'react';
import CustomButton from 'components/CustomButton/index';
export default {
component: CustomButton,
title: 'CustomButton',
};
const Template = (args:any) => <CustomButton {...args} />;
export const Default: any = Template.bind({});
Default.args = {
size: 'md',
variantColor: 'green',
};
3.At this point it's really important configure your file preview.js that you will find the folder ".storybook", thanks to this commit chakraUiCommit i figured out how to include the theme provider in every storybook component
import React from 'react'
import {addDecorator} from '#storybook/react'
import {ThemeProvider, CSSReset} from '#chakra-ui/core'
addDecorator((storyFn) => (
<ThemeProvider>
<CSSReset />
{storyFn()}
</ThemeProvider>
))
well, at this point i solved my problem, and this is my final result