feat: config update state

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

Hide file tree

Showing 22 changed files with 181 additions and 81 deletions.
diff --git a/core/store/src/state/context/StateRoot.tsx b/core/store/src/state/context/StateRoot.tsx
@@ -2,6 +2,7 @@ import React, { FC } from 'react';
 import { Store } from '@component-controls/core';
 import {
   StoreContextProvider,
+  ConfigContextProvider,
   ActiveTabContextProvider,
   OptionsContextProvider,
 } from './store';
@@ -45,19 +46,21 @@ export const StateRoot: FC<StateRootProps> = ({
 }) => {
   return (
     <StoreContextProvider store={store}>
-      <ActiveTabContextProvider activeTab={activeTab}>
-        <OptionsContextProvider options={options}>
-          <DocumentContextProvider docId={docId}>
-            <DocsSortContextProvider>
-              <StoryContextProvider storyId={storyId}>
-                <ControlsContextStoryProvider>
-                  {children}
-                </ControlsContextStoryProvider>
-              </StoryContextProvider>
-            </DocsSortContextProvider>
-          </DocumentContextProvider>
-        </OptionsContextProvider>
-      </ActiveTabContextProvider>
+      <ConfigContextProvider>
+        <ActiveTabContextProvider activeTab={activeTab}>
+          <OptionsContextProvider options={options}>
+            <DocumentContextProvider docId={docId}>
+              <DocsSortContextProvider>
+                <StoryContextProvider storyId={storyId}>
+                  <ControlsContextStoryProvider>
+                    {children}
+                  </ControlsContextStoryProvider>
+                </StoryContextProvider>
+              </DocsSortContextProvider>
+            </DocumentContextProvider>
+          </OptionsContextProvider>
+        </ActiveTabContextProvider>
+      </ConfigContextProvider>
     </StoreContextProvider>
   );
 };
diff --git a/core/store/src/state/context/store.tsx b/core/store/src/state/context/store.tsx
@@ -1,5 +1,16 @@
-import React, { FC, createContext, useContext } from 'react';
-import { Store, defaultStore, PackageInfo } from '@component-controls/core';
+import React, {
+  FC,
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+} from 'react';
+import {
+  Store,
+  defaultStore,
+  PackageInfo,
+  RunConfiguration,
+} from '@component-controls/core';
 
 interface StoreContextProps {
   store: Store;
@@ -32,13 +43,78 @@ export const useStore = (): Store => {
   return store;
 };
 
+interface ConfigContextProps {
+  config: Store['config'];
+  setConfig: (config: Store['config']) => void;
+}
+
+export const ConfigContext = createContext<ConfigContextProps>({
+  config: {},
+  setConfig: () => {},
+});
+
+export const ConfigContextProvider: FC = ({ children }) => {
+  const store = useStore();
+  const [config, setConfig] = useState(store.config);
+  useEffect(() => {
+    setConfig(store.config);
+  }, [store, setConfig]);
+
+  return (
+    <ConfigContext.Provider
+      value={{
+        config,
+        setConfig,
+      }}
+    >
+      {children}
+    </ConfigContext.Provider>
+  );
+};
+/**
+ * Returns a configuration object and the setter method
+ */
+
+export const useConfigState = (): [
+  Store['config'],
+  (config: Store['config']) => void,
+] => {
+  const { config, setConfig } = useContext(ConfigContext);
+  return [config, setConfig];
+};
+
 /**
  * Returns the configuration object part of the store
  */
 
 export const useConfig = (): Store['config'] => {
-  const store = useStore();
-  return store.config;
+  const [config] = useConfigState();
+  return config;
+};
+
+/**
+ * Returns the current theme configuration and a setter method
+ */
+
+export const useThemeState = (): [
+  Store['config']['theme'],
+  (config: Store['config']['theme']) => void,
+] => {
+  const { config, setConfig } = useContext(ConfigContext);
+  return [
+    config.theme,
+    theme => {
+      setConfig({ ...config, theme: theme || {} });
+    },
+  ];
+};
+
+/**
+ * returns current theme object
+ */
+export const useTheme = (): Store['config']['theme'] => {
+  const [theme] = useThemeState();
+  return theme;
 };
 
 type ActiveTabType = string | undefined;

diff --git a/examples/gatsby/.config/runtime.tsx b/examples/gatsby/.config/runtime.tsx
@@ -17,7 +17,7 @@ const config: RunOnlyConfiguration = {
   author: `@component-controls`,
   theme: {
     colors: {
-      //primary: 'pink',
+      // primary: 'pink',
     }
   },
   pages: {

diff --git a/examples/stories/src/tutorial/getting-started/ui-customization.mdx b/examples/stories/src/tutorial/getting-started/ui-customization.mdx
@@ -9,27 +9,39 @@ tags:
   - configuration
   - theme
 ---
-import { system, funk, future, roboto, dark, deep, swiss, tosh, bootstrap, bulma, tailwind, sketchy } from '@theme-ui/presets';
+import { useEffect } from 'react';
 import * as themes from '@theme-ui/presets';
-import { defaultStore, ControlTypes } from '@component-controls/core';
-import { AppContext, App } from '@component-controls/app';
+import { ControlTypes } from '@component-controls/core';
+import { useThemeState } from '@component-controls/store';
+import { Source } from '@component-controls/components';
 import { Playground, Story, PropsTable } from '@component-controls/blocks';
 
 
 component-controls allows full customization of the user interface - from theming, SEO tags to toolbars, sidebars and footer.
 
 ## Selecting a theme
 
-<Playground>
-  <Story name="select-theme" controls={{ theme: { type: ControlTypes.OPTIONS, options: Object.keys(themes), value: 'funk' }}}>
-    {props => {
-      const theme = themes[props.theme];
-      return (
-        <AppContext store={{ ...defaultStore, config: { ...defaultStore.config, theme: { ...theme, app: { minHeight: 'unset' } }}}} />
-      );  
-    }}
-  </Story>
-</Playground>
+You can use any [theme-ui](https://theme-ui.com) theme as a starting point for customizing the user interface.
+
+<Story name="select-theme" controls={{ theme: { type: ControlTypes.OPTIONS, options: ['none', ...Object.keys(themes)], value: 'none' }}}>
+  {({ theme: themeName }) => {
+    const [, setTheme] = useThemeState();
+
+    useEffect(() => {
+      console.log(themeName);
+      setTheme(themes[themeName])
+    }, [themeName]);
+    const theme = themes[themeName];
+    return (
+        <Source title=".config/runtime.js">
+{`${themeName !== 'none' ? `import { ${themeName} } from '@theme-ui/presets';` : ''}
+export default {
+  theme: ${themeName !== 'none' ? themeName : '{}'},
+}`}
+      </Source>
+    );  
+  }}
+</Story>
 
 <PropsTable name="select-theme" />
 

diff --git a/integrations/storybook/src/context/ControlsProvider.tsx b/integrations/storybook/src/context/ControlsProvider.tsx
@@ -4,8 +4,8 @@ import { BlockContextProvider } from './BlockContext';
 
 export const ControlsProvider: React.FC = ({ children }) => {
   return (
-    <ThemeProvider>
-      <BlockContextProvider>{children}</BlockContextProvider>
-    </ThemeProvider>
+    <BlockContextProvider>
+      <ThemeProvider>{children}</ThemeProvider>
+    </BlockContextProvider>
   );
 };
diff --git a/integrations/storybook/src/context/ThemeProvider.tsx b/integrations/storybook/src/context/ThemeProvider.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { ThemeProvider as ThemeUIProvider } from '@component-controls/components';
+import { ThemeProvider as ThemeUIProvider } from '@component-controls/blocks';
 
 export const ThemeProvider: React.FC = ({ children }) => {
   return <ThemeUIProvider>{children}</ThemeUIProvider>;

diff --git a/integrations/storybook/src/docs-page/DocsContainer.tsx b/integrations/storybook/src/docs-page/DocsContainer.tsx
@@ -3,7 +3,7 @@ import {
   PageContainer as BlockPageContainer,
   BlockContextProvider,
 } from '@component-controls/blocks';
-import { ThemeProvider } from '@component-controls/components';
+import { ThemeProvider } from '@component-controls/blocks';
 import {
   useCurrentData,
   getGlobalOptions,
@@ -14,18 +14,18 @@ export const PageContextContainer: FC = ({ children }) => {
   const options = React.useMemo(() => getGlobalOptions(), []);
   const { storyId, docId } = useCurrentData();
   return (
-    <ThemeProvider theme={store.config.theme}>
-      <BlockContextProvider
-        storyId={storyId}
-        store={store}
-        docId={docId}
-        options={options}
-      >
+    <BlockContextProvider
+      storyId={storyId}
+      store={store}
+      docId={docId}
+      options={options}
+    >
+      <ThemeProvider>
         <BlockPageContainer variant="pagecontainer.storybook">
           {children}
         </BlockPageContainer>
-      </BlockContextProvider>
-    </ThemeProvider>
+      </ThemeProvider>
+    </BlockContextProvider>
   );
 };
 

diff --git a/integrations/storybook/src/panel/AddonPanel.tsx b/integrations/storybook/src/panel/AddonPanel.tsx
@@ -28,10 +28,8 @@ export const AddonPanel: React.FC<AddonPanelProps> = ({
   }, [api, channel]);
   const docId = storyId && store ? store.stories[storyId].doc : undefined;
   return active && storyId ? (
-    <ThemeProvider>
-      <BlockContextProvider store={store} storyId={storyId} docId={docId}>
-        {children}
-      </BlockContextProvider>
-    </ThemeProvider>
+    <BlockContextProvider store={store} storyId={storyId} docId={docId}>
+      <ThemeProvider>{children}</ThemeProvider>
+    </BlockContextProvider>
   ) : null;
 };
diff --git a/ui/app/src/App/App.stories.tsx b/ui/app/src/App/App.stories.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import { ThemeProvider } from '@component-controls/components';
-import { MockContext } from '@component-controls/blocks';
+import { ThemeProvider, MockContext } from '@component-controls/blocks';
 import { App } from './App';
 
 export default {

diff --git a/ui/app/src/App/App.tsx b/ui/app/src/App/App.tsx
@@ -6,6 +6,7 @@ import {
   useStore,
   useCurrentDocument,
   useDocDescription,
+  useConfig,
 } from '@component-controls/store';
 import { SEO } from '../SEO';
 import { Header } from '../Header';
@@ -26,7 +27,8 @@ export interface AppProps {
 export const App: FC<AppProps> = ({ title = '', children }) => {
   const store = useStore();
   const doc = useCurrentDocument();
-  const { toolbar } = store.config || {};
+  const config = useConfig();
+  const { toolbar } = config;
   const items: SkiLinksItemProps[] = [
     {
       target: 'content',

diff --git a/ui/app/src/AppContext/AppContext.tsx b/ui/app/src/AppContext/AppContext.tsx
@@ -2,13 +2,15 @@
 import { FC } from 'react';
 import { jsx } from 'theme-ui';
 import { Store } from '@component-controls/core';
-import { ThemeProvider } from '@component-controls/components';
 import {
   SidebarContextProvider,
   LinkContextProvider,
   LinkContextProviderProps,
 } from '@component-controls/components';
-import { BlockContextProvider } from '@component-controls/blocks';
+import {
+  ThemeProvider,
+  BlockContextProvider,
+} from '@component-controls/blocks';
 import { App } from '../App';
 import { mdxComponents } from './mdxComponents';
 
@@ -29,19 +31,19 @@ export const AppContext: FC<AppContextProps> = ({
   activeTab,
 }) => {
   return (
-    <ThemeProvider theme={store.config.theme} components={mdxComponents}>
-      <BlockContextProvider
-        storyId={storyId}
-        docId={docId}
-        store={store}
-        activeTab={activeTab}
-      >
+    <BlockContextProvider
+      storyId={storyId}
+      docId={docId}
+      store={store}
+      activeTab={activeTab}
+    >
+      <ThemeProvider components={mdxComponents}>
         <SidebarContextProvider>
           <LinkContextProvider linkClass={linkClass}>
             <App title={docId}>{children}</App>
           </LinkContextProvider>
         </SidebarContextProvider>
-      </BlockContextProvider>
-    </ThemeProvider>
+      </ThemeProvider>
+    </BlockContextProvider>
   );
 };
diff --git a/ui/app/src/CategoryList/CategoryList.stories.tsx b/ui/app/src/CategoryList/CategoryList.stories.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import { ThemeProvider } from '@component-controls/components';
-import { MockContext } from '@component-controls/blocks';
+import { ThemeProvider, MockContext } from '@component-controls/blocks';
 import { CategoryList } from './CategoryList';
 
 export default {

diff --git a/ui/app/src/CategoryList/CategoryList.tsx b/ui/app/src/CategoryList/CategoryList.tsx
@@ -3,7 +3,7 @@ import { FC } from 'react';
 import { jsx, Box } from 'theme-ui';
 import { DocType } from '@component-controls/core';
 import { Title } from '@component-controls/components';
-import { useDocPropCount, useStore } from '@component-controls/store';
+import { useDocPropCount, useConfig } from '@component-controls/store';
 import { PageContainer } from '../PageContainer';
 import { CategoryListItem } from './CategoryListItem';
 
@@ -18,9 +18,9 @@ export interface CategoryListProps {
  * displays page of categories
  */
 export const CategoryList: FC<CategoryListProps> = ({ type }) => {
-  const store = useStore();
+  const config = useConfig();
   const categories = useDocPropCount(type);
-  const pageConfig = store.config.pages?.[type] || {};
+  const pageConfig = config.pages?.[type] || {};
   return (
     <PageContainer
       type={type}

diff --git a/ui/app/src/CategoryPage/CategoryPage.stories.tsx b/ui/app/src/CategoryPage/CategoryPage.stories.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import { ThemeProvider } from '@component-controls/components';
-import { MockContext } from '@component-controls/blocks';
+import { ThemeProvider, MockContext } from '@component-controls/blocks';
 import { CategoryPage } from './CategoryPage';
 
 export default {

diff --git a/ui/app/src/DocumentHomePage/DocumentHomePage.stories.tsx b/ui/app/src/DocumentHomePage/DocumentHomePage.stories.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import { ThemeProvider } from '@component-controls/components';
-import { MockContext } from '@component-controls/blocks';
+import { ThemeProvider, MockContext } from '@component-controls/blocks';
 import { DocumentHomePage } from './DocumentHomePage';
 
 export default {