+ The main.js file defines Storybook’s core settings: which stories to load,
+ which addons to enable, and which static directories to serve.
+ It also configures Webpack/Vite and the framework.
+
+ The preview.js file controls global decorators, global CSS,
+ theme providers, routing mocks, and UI-level configuration.
+ It's where you add wrappers like ThemeProvider or global padding.
+
+ To use images, fonts, or icons from your real application, you must expose them
+ using staticDirs. This allows Storybook to load files from
+ your public/ directory as if it were the production app.
+
+ Storybook automatically generates documentation via MDX or Autodocs.
+ To enable the Docs tab globally, enable autodocs in main.js
+ and add tags: ['autodocs'] in each story file.
+
+ UI theming is controlled via manager.js.
+ You can customize the brand logo, colors, and UI appearance of Storybook by
+ extending the built-in themes or creating your own.
+
+ Storybook supports interaction testing directly inside stories using the
+ play function.
+ This allows lightweight behavior validation without leaving Storybook.
+