how to make my stories uses a ThemeProvider from "styled-components"

[tarik-gadoumi]

Hello heroes thank you for the great job you are doing !

i m facing an issue when i wan t to make my stories using a ThemeProvider :
[vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. You may need to install appropriate plugins to handle the .cjs file format, or if it's an asset, add "/*.cjs" to assetsInclude in your configuration**.

i have the following package.json & these 3 files in my .storybook Folder ,

{
     "name": "test",
     "private": true,
     "version": "0.0.0",
     "type": "module",
     "scripts": {
          "dev": "vite",
          "build": "tsc && vite build",
          "preview": "vite preview",
          "storybook": " export NODE_OPTIONS=--openssl-legacy-provider && start-storybook -p 6006",
          "build-storybook": "build-storybook"
     },
     "dependencies": {
          "@codesandbox/sandpack-react": "^1.18.4",
          "@mdx-js/mdx": "^2.2.1",
          "axios": "^1.2.1",
          "react": "^18.2.0",
          "react-dom": "^18.2.0",
          "react-query": "^3.39.2",
          "react-router-dom": "^6.6.1",
          "remark-gfm": "^3.0.1",
          "styled-components": "^5.3.6"
     },
     "devDependencies": {
          "@babel/core": "^7.20.5",
          "@mdx-js/react": "1.6.22",
          "@mdx-js/rollup": "^2.2.1",
          "@storybook/addon-actions": "^6.5.15",
          "@storybook/addon-essentials": "^6.5.15",
          "@storybook/addon-interactions": "^6.5.15",
          "@storybook/addon-links": "^6.5.15",
          "@storybook/builder-vite": "^0.2.6",
          "@storybook/react": "^6.5.15",
          "@storybook/testing-library": "^0.0.13",
          "@types/mdx": "^2.0.3",
          "@types/react": "^18.0.26",
          "@types/react-dom": "^18.0.9",
          "@types/styled-components": "^5.1.26",
          "@vitejs/plugin-react": "^3.0.0",
          "babel-loader": "^8.3.0",
          "msw": "^0.49.2",
          "typescript": "^4.9.3",
          "vite": "^4.0.0"
     },
     "msw": {
          "workerDirectory": "public"
     },
     "overrides": {
          "@mdx-js/react": {
               "react": "^18.2.0",
               "react-dom": "^18.2.0"
          }
     }
}

main.cjs

module.exports = {
     stories: [
          "../src/**/*.stories.mdx",
          "../src/**/*.stories.@(js|jsx|ts|tsx)",
     ],
     addons: [
          "@storybook/addon-links",
          "@storybook/addon-essentials",
          "@storybook/addon-interactions",
     ],
     framework: "@storybook/react",
     core: {
          builder: "@storybook/builder-vite",
     },
     features: {
          storyStoreV7: true,
     },
};

preview.cjs

export const parameters = {
     actions: { argTypesRegex: "^on[A-Z].*" },
     controls: {
          matchers: {
               color: /(background|color)$/i,
               date: /Date$/,
          },
     },
};
//the code bellow causes  the crash
import { addDecorator } from "@storybook/react";
import { ThemeProvider } from "styled-components";
const theme = {
     color: "red",
};
addDecorator((story) => <ThemeProvider theme={theme}>{story()}</ThemeProvider>);

preview-head.html

<script>
     window.global = window;
</script>

could you help me please to fiw the issue ?

[tarik-gadoumi]

i found how to do it :

pnpm add --save-dev @react-theming/storybook-addon

// .storybook/main.js

module.exports = {
  stories: ['../src/**/*.stories.js'],
  addons: ['@react-theming/storybook-addon'],
};

then in preview.cjs

export const parameters = {
     actions: { argTypesRegex: "^on[A-Z].*" },
     controls: {
          matchers: {
               color: /(background|color)$/i,
               date: /Date$/,
          },
     },
};

import { ThemeProvider } from "styled-components";
import { withThemes } from "@react-theming/storybook-addon";

const theme = {
     color: "red",
};
// addDecorator is deprecated :
// https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-addparameters-and-adddecorator
export const decorators = [withThemes(ThemeProvider, [theme])];