Allow provider to be optional (#2)

storybookjs · Feb 15, 2023 · 4023410 · 4023410
1 parent eb0f9d4
commit 4023410
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 9 deletions.
diff --git a/docs/api.md b/docs/api.md
@@ -26,9 +26,9 @@ Available options:
 
 | option       | type                  | required? | Description                                                                                                                                                                                         |
 | ------------ | --------------------- | :-------: | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| themes       | `Record<string, any>` |    ✅     | 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<string, any>` |           | 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
@@ -11,10 +11,10 @@ type Theme = Record<string, any>;
 type ThemeMap = Record<string, Theme>;
 
 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 (
-      <Provider theme={theme}>
+      <ProviderComponent theme={theme}>
         {GlobalStyles && <GlobalStyles />}
         {storyFn()}
-      </Provider>
+      </ProviderComponent>
     );
   };
 };