fix: update theme state provider

ccontrols · Aug 2, 2020 · 6a95dd2 · 6a95dd2
1 parent f8c96f0
commit 6a95dd2
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 16 deletions.
diff --git a/core/store/src/state/context/store.tsx b/core/store/src/state/context/store.tsx
@@ -5,12 +5,7 @@ import React, {
   useState,
   useEffect,
 } from 'react';
-import {
-  Store,
-  defaultStore,
-  PackageInfo,
-  RunConfiguration,
-} from '@component-controls/core';
+import { Store, defaultStore, PackageInfo } from '@component-controls/core';
 
 interface StoreContextProps {
   store: Store;
@@ -104,7 +99,7 @@ export const useThemeState = (): [
   return [
     config.theme,
     theme => {
-      setConfig({ ...config, theme: theme || {} });
+      setConfig({ ...config, theme: theme || config.theme });
     },
   ];
 };

diff --git a/examples/stories/src/tutorial/getting-started/ui-customization.mdx b/examples/stories/src/tutorial/getting-started/ui-customization.mdx
@@ -9,10 +9,10 @@ tags:
   - configuration
   - theme
 ---
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import * as themes from '@theme-ui/presets';
 import { ControlTypes } from '@component-controls/core';
-import { useThemeState } from '@component-controls/store';
+import { useStore, useThemeState } from '@component-controls/store';
 import { Source } from '@component-controls/components';
 import { Playground, Story, PropsTable } from '@component-controls/blocks';
 
@@ -25,13 +25,14 @@ You can use any [theme-ui](https://theme-ui.com) theme as a starting point for c
 
 <Story name="select-theme" controls={{ theme: { type: ControlTypes.OPTIONS, options: ['none', ...Object.keys(themes)], value: 'none' }}}>
   {({ theme: themeName }) => {
-    const [, setTheme] = useThemeState();
-
+    const store = useStore();
+    const [globalTheme, setGlobalTheme] = useThemeState();
+    const theme = themes[themeName] || store.config.theme;
     useEffect(() => {
-      console.log(themeName);
-      setTheme(themes[themeName])
-    }, [themeName]);
-    const theme = themes[themeName];
+      if (globalTheme !== theme) {
+        setGlobalTheme(theme)
+      }
+    }, [theme]);  
     return (
         <Source title=".config/runtime.js">
 {`${themeName !== 'none' ? `import { ${themeName} } from '@theme-ui/presets';` : ''}

diff --git a/ui/blocks/src/ThemeProvider/ThemeProvider.tsx b/ui/blocks/src/ThemeProvider/ThemeProvider.tsx
@@ -7,6 +7,5 @@ import { useTheme } from '@component-controls/store';
 
 export const ThemeProvider: FC<Omit<ThemeProviderProps, 'theme'>> = props => {
   const theme = useTheme();
-  console.log(theme);
   return <ComponentsThemeProvider theme={theme} {...props} />;
 };