fix: fixed disable param

README.md

@@ -73,7 +73,7 @@ export const decorators = [withThemesProvider(themes)];
 ### Disable popup
 
 ```jsx
-export const decorators = [withThemesProvider(themes, { disableThemePreview: false })];
+export const decorators = [withThemesProvider(themes, { disableThemePreview: true })];
 ```
 
 ### How to use your own implementation of ThemeProvider

example/.storybook/main.js

@@ -1,4 +1,15 @@
 module.exports = {
+  webpackFinal: async (config, { configType }) => {
+    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
+    // You can change the configuration based on that.
+    // 'PRODUCTION' is used when building the static version of storybook.
+
+    // Make whatever fine-grained changes you need
+    // Make whatever fine-grained changes you need
+    config.resolve.alias['styled-components'] = require.resolve('styled-components')
+    // Return the altered config
+    return config;
+  },
   stories: [
     "../src/**/*.stories.mdx",
     "../src/**/*.stories.@(js|jsx|ts|tsx)"

example/.storybook/preview.js

@@ -43,4 +43,9 @@ const THEMES = [
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
 }
-export const decorators = [withThemesProvider(THEMES)];
+
+// disabled preview
+// export const decorators = [withThemesProvider(THEMES, { disableThemePreview: true })];
+
+// with preview
+export const decorators = [withThemesProvider(THEMES)];

example/package.json

@@ -19,7 +19,8 @@
     "prop-types": "15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "themeprovider-storybook": "^1.5.1",
+    "themeprovider-storybook": "^1.6.0",
+    "styled-components": "^5.1.1",
     "typescript": "^3.9.2",
     "webpack": "^4.43.0"
   }

package.json

@@ -13,7 +13,7 @@
     "test": "jest",
     "bundle-size": "bundlesize",
     "release": "semantic-release --debug",
-    "publish-storybook": "cd example && npm i --save themeprovider-storybook@latest && npm run build-storybook"
+    "publish-storybook": "cd example && npm i && npm i --save themeprovider-storybook@latest && npm run build-storybook"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

src/Themes.tsx

@@ -3,6 +3,7 @@ import * as React from "react";
 import { Button, Row } from "./components/Button";
 import SvgIcon from "./components/SvgIcon";
 import { Theme } from "./types/Theme";
+import { ThemesProviderSettings } from "./withThemesProvider";
 // extrange issue on action file:
 // Argument of type '(api: import("/github/workspace/node_modules/@storybook/api/dist/index").API) => void' is not assignable to parameter of type '(api: import("/github/workspace/node_modules/@storybook/addons/node_modules/@storybook/api/dist/index").API) => void'.
 // import { Channel } from '@storybook/channels';
@@ -18,13 +19,15 @@ interface ButtonProps {
   onSelectTheme: (theme: Theme) => void;
   theme: Theme;
   onOpenModal: () => void;
+  settings: ThemesProviderSettings;
   themes: List<Theme>;
 }
 
 const BaseComponent: React.FunctionComponent<ButtonProps> = ({
   onSelectTheme,
   themes,
   theme,
+  settings,
   onOpenModal,
 }) => (
   /* tslint:disable:jsx-no-multiline-js jsx-no-lambda*/
@@ -37,7 +40,7 @@ const BaseComponent: React.FunctionComponent<ButtonProps> = ({
           onClick={() => onSelectTheme(th)}
         >
           <span>{th.name}</span>
-          <SvgIcon name="info" onClick={() => onOpenModal()} />
+          {!settings.disableThemePreview && <SvgIcon name="info" onClick={() => onOpenModal()} />}
         </Button>
       ))
       .toArray()}
@@ -49,6 +52,7 @@ export const Themes: React.FunctionComponent<ThemeProps> = ({
   active,
 }) => {
   const [theme, setTheme] = React.useState(null);
+  const [settings, setSettings] = React.useState<ThemesProviderSettings>({ disableThemePreview: false });
   const [themes, setThemes] = React.useState(List());
 
   const onReceiveThemes = (newThemes: Theme[]) => {
@@ -86,6 +90,10 @@ export const Themes: React.FunctionComponent<ThemeProps> = ({
     channel.emit("openModal", true);
   };
 
+  const onReceiveSettings = (settings: ThemesProviderSettings) => {
+    setSettings(settings);
+  }
+
   // When swiching to docs page we disable background color, because it's a more complex design
   // On a future release of storybook,
   // we hope they enable an internal naming(id, or theme) for setting only the background of each box.
@@ -98,16 +106,19 @@ export const Themes: React.FunctionComponent<ThemeProps> = ({
 
   React.useEffect(() => {
     channel.on("setThemes", onReceiveThemes);
+    channel.on("setSettings", onReceiveSettings)
     channel.on("setCurrentStory", onHandleDocsPage);
     return () => {
       channel.removeListener("setThemes", onReceiveThemes);
       channel.removeListener("setCurrentStory", onHandleDocsPage);
+      channel.removeListener("setSettings", onReceiveSettings);
     };
   }, []);
 
   return theme && active ? (
     <BaseComponent
       onOpenModal={onOpenModal}
+      settings={settings}
       onSelectTheme={onSelectTheme}
       themes={themes}
       theme={theme}

src/ThemesProvider.tsx

@@ -3,9 +3,11 @@ import { List } from "immutable";
 import * as React from "react";
 import { ThemeProvider } from "styled-components";
 import { Theme } from "./types/Theme";
+import { ThemesProviderSettings } from "./withThemesProvider";
 
 export interface ThemesProviderProps {
   themes: List<Theme>;
+  settings: ThemesProviderSettings;
   CustomThemeProvider?: React.ComponentType<{ theme: Theme }>;
   story?: any;
   children: React.ReactChild;
@@ -16,13 +18,14 @@ interface ThemesProvider {
   theme: Theme;
 }
 
-export const ThemesProvider: React.FunctionComponent<ThemesProviderProps> = ({ story, children, themes, CustomThemeProvider }) => {
+export const ThemesProvider: React.FunctionComponent<ThemesProviderProps> = ({ settings, story, children, themes, CustomThemeProvider }) => {
   const [theme, setTheme] = React.useState(null);
 
   React.useEffect(() => {
     const channel = addons.getChannel();
     channel.on("selectTheme", setTheme);
     channel.emit("setThemes", themes);
+    channel.emit("setSettings", settings);
     return () => {
       const channelUnmount = addons.getChannel();
       channelUnmount.removeListener("selectTheme", setTheme);

src/components/Modal.tsx

@@ -63,7 +63,7 @@ const Modal = React.memo(({ children, isOpen, toggleModal, headerTitle }: ModalP
     >
       <Header>
         {headerTitle}
-        <SvgIcon name="close" onClick={toggleModal} />
+        <SvgIcon style={{ cursor: "pointer", fill: "grey" }} name="close" onClick={toggleModal} />
       </Header>
       <Body>
         {children}

src/withThemesProvider.tsx

@@ -6,7 +6,7 @@ import { ModalProvider } from "./components/Modal";
 import { ThemesProvider } from "./ThemesProvider";
 import { Theme } from "./types/Theme";
 
-type ThemesProviderSettings = {
+export type ThemesProviderSettings = {
   disableThemePreview: boolean
 }
 
@@ -21,7 +21,7 @@ export const withThemesProvider = (
   ) => (story: any): JSX.Element => {
 
   return (
-    <ThemesProvider CustomThemeProvider={CustomThemeProvider} story={story} themes={List(themes)}>
+    <ThemesProvider settings={settings} CustomThemeProvider={CustomThemeProvider} story={story} themes={List(themes)}>
       {settings?.disableThemePreview ? (
         <BackgroundHelper themes={List(themes)}>{story()}</BackgroundHelper>
       ): (