fix: Compatibility with older versions (#45)

README.md

@@ -102,10 +102,28 @@ export default function SomeCustomImplementationOfThemeProvider(props: Props) {
 
 On config.js file of Storybook, just pass a `CustomThemeProvider`
 ```jsx
+import { DEFAULT_SETTINGS } from "themeprovider-storybook"
 import { SomeCustomImplementationOfThemeProvider } from "src/app/CustomThemeProvider.jsx"
 
 addDecorator(
-  withThemesProvider(themes, SomeCustomImplementationOfThemeProvider)
+  withThemesProvider(
+    themes,
+    DEFAULT_SETTINGS,
+    SomeCustomImplementationOfThemeProvider
+  )
+);
+```
+
+also you can pass inside settings object the custom implementation of your theme provider.
+
+```jsx
+import { SomeCustomImplementationOfThemeProvider } from "src/app/CustomThemeProvider.jsx"
+
+addDecorator(
+  withThemesProvider(
+    themes,
+    { customThemeProvider: SomeCustomImplementationOfThemeProvider },
+  )
 );
 ```
 

example/.storybook/preview.js

@@ -1,3 +1,4 @@
+// import { ThemeProvider } from "styled-components";
 import { withThemesProvider } from "themeprovider-storybook"
 const THEMES = [
   {
@@ -44,8 +45,19 @@ export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
 }
 
-// disabled preview
+// Example with disabled preview
 // export const decorators = [withThemesProvider(THEMES, { disableThemePreview: true })];
 
 // with preview
-export const decorators = [withThemesProvider(THEMES)];
+export const decorators = [
+  withThemesProvider(THEMES, {
+    CustomThemeProvider: ThemeProvider
+  })
+];
+
+/**
+ * Example with custom provider
+ */
+// export const decorators = [withThemesProvider(THEMES, DEFAULT_SETTINGS, ThemeProvider)];
+// or
+// export const decorators = [withThemesProvider(THEMES, { CustomThemeProvider: ThemeProvider })];

src/index.ts

@@ -1,3 +1,3 @@
 export { Themes } from "./Themes";
 export { ThemesProvider } from "./ThemesProvider";
-export { withThemesProvider } from "./withThemesProvider";
+export { withThemesProvider, DEFAULT_SETTINGS } from "./withThemesProvider";

src/react-is.tsx

@@ -0,0 +1,17 @@
+export function isClassComponent(component: any): boolean {
+  return (
+    typeof component === 'function' && !!component.prototype.isReactComponent
+  )
+}
+
+export function isFunctionComponent(component: any): boolean {
+  return (
+    typeof component === 'function' && String(component).includes('createElement')
+  )
+}
+
+export function isReactComponent(component: any): boolean {
+  return (
+    isClassComponent(component) || isFunctionComponent(component)
+  )
+}

src/withThemesProvider.tsx

@@ -2,23 +2,35 @@ import * as React from "react";
 
 import { BackgroundHelper } from "./Background";
 import { ModalProvider } from "./components/Modal";
+import { isReactComponent } from "./react-is";
 import { ThemesProvider } from "./ThemesProvider";
 import { Theme } from "./types/Theme";
 
+export type CustomThemeProvider = React.ComponentType<{ theme: Theme, children: React.ReactNode }>
 export type ThemesProviderSettings = {
-  disableThemePreview: boolean
+  disableThemePreview?: boolean
+  CustomThemeProvider?: CustomThemeProvider
 }
 
-const DEFAULT_SETTINGS: ThemesProviderSettings = {
+export const DEFAULT_SETTINGS: ThemesProviderSettings = {
   disableThemePreview: false
 }
 
 export const withThemesProvider = (
   themes: Theme[],
   settings: ThemesProviderSettings = DEFAULT_SETTINGS,
-  CustomThemeProvider?: React.ComponentType<{ theme: Theme }>,
+  CustomThemeProvider?: CustomThemeProvider,
   ) => (story: any): JSX.Element => {
 
+  // compatibility with breaking change introduced without being deployed as breaking change...
+  if (settings !== null && isReactComponent(settings)) {
+    CustomThemeProvider = settings as CustomThemeProvider
+  } else if (settings !== DEFAULT_SETTINGS) {
+    settings = { ...DEFAULT_SETTINGS, ...settings }
+  }
+
+  if (settings.CustomThemeProvider) CustomThemeProvider = settings.CustomThemeProvider
+
   return (
     <ThemesProvider settings={settings} CustomThemeProvider={CustomThemeProvider} story={story} themes={themes}>
       {settings?.disableThemePreview ? (