diff --git a/docs/api.md b/docs/api.md index 5550d08..299aa63 100644 --- a/docs/api.md +++ b/docs/api.md @@ -26,9 +26,9 @@ Available options: | option | type | required? | Description | | ------------ | --------------------- | :-------: | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| themes | `Record` | ✅ | An object of theme configurations where the key is the name of the theme and the value is the theme object. If multiple themes are provided, a toolbar item will be added to switch between themes. | -| defaultTheme | `string` | ✅ | The name of the default theme to use | -| Provider | | ✅ | The JSX component to provide themes | +| themes | `Record` | | An object of theme configurations where the key is the name of the theme and the value is the theme object. If multiple themes are provided, a toolbar item will be added to switch between themes. | +| defaultTheme | `string` | | The name of the default theme to use | +| Provider | | | The JSX component to provide themes | | GlobalStyles | | | A JSX component containing global css styles. | ### `withThemeByClassName` diff --git a/src/decorators/provider.strategy.tsx b/src/decorators/provider.strategy.tsx index 3082f18..eab2bf1 100644 --- a/src/decorators/provider.strategy.tsx +++ b/src/decorators/provider.strategy.tsx @@ -11,10 +11,10 @@ type Theme = Record; type ThemeMap = Record; export interface ProviderStrategyConfiguration { - Provider: any; + Provider?: any; GlobalStyles?: any; defaultTheme?: string; - themes: ThemeMap; + themes?: ThemeMap; } const pluckThemeFromKeyPairTuple = ([_, themeConfig]: [string, Theme]): Theme => @@ -24,9 +24,11 @@ export const withThemeFromJSXProvider = ({ Provider, GlobalStyles, defaultTheme, - themes, + themes = {}, }: ProviderStrategyConfiguration): DecoratorFunction => { - initializeThemeState(Object.keys(themes), defaultTheme); + const themeNames = Object.keys(themes); + + initializeThemeState(themeNames, defaultTheme || themeNames[0]); return (storyFn, context) => { const { themeOverride } = useThemeParameters(); @@ -41,11 +43,13 @@ export const withThemeFromJSXProvider = ({ : themes[selectedThemeName]; }, [themes, selected, themeOverride]); + const ProviderComponent = Provider || React.Fragment; + return ( - + {GlobalStyles && } {storyFn()} - + ); }; };