diff --git a/.storybook/main.js b/.storybook/main.js index ab7f9c40..8ef6cf34 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -3,12 +3,10 @@ module.exports = { addons: [ '@storybook/addon-actions', '@storybook/addon-links', - '@storybook/preset-create-react-app', - { - name: "@storybook/addon-docs", - options: { - configureJSX: true, - }, - }, + '@storybook/addon-docs', + 'storybook-addon-styled-component-theme/dist/register', ], -}; + presets: [ + '@storybook/preset-create-react-app', + ] +} diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html new file mode 100644 index 00000000..ae1b4941 --- /dev/null +++ b/.storybook/preview-head.html @@ -0,0 +1,47 @@ + + diff --git a/.storybook/preview.js b/.storybook/preview.js new file mode 100644 index 00000000..dd25eb0c --- /dev/null +++ b/.storybook/preview.js @@ -0,0 +1,7 @@ +import { addDecorator } from '@storybook/react' +import { withThemesProvider } from 'storybook-addon-styled-component-theme' + +import { lightTheme, darkTheme } from '../src/features/Theme/config' + +const themes = [darkTheme, lightTheme] +addDecorator(withThemesProvider(themes)) diff --git a/package.json b/package.json index 4fdba62a..54a5925e 100644 --- a/package.json +++ b/package.json @@ -50,6 +50,7 @@ "gzipper": "^3.7.0", "husky": "^4.2.5", "lint-staged": "^10.2.7", + "storybook-addon-styled-component-theme": "^1.3.0", "ts-loader": "^7.0.5", "typescript": "^3.9.3" },