how to make my stories uses a ThemeProvider from "styled-components" #539
-
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 : 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 ? |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
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])]; |
Beta Was this translation helpful? Give feedback.
i found how to do it :
pnpm add --save-dev @react-theming/storybook-addon
// .storybook/main.js
then in preview.cjs