feat: appcontext component

integrations/gatsby-theme-stories/package.json

@@ -37,13 +37,8 @@
   "license": "MIT",
   "dependencies": {
     "@component-controls/app": "^1.1.0",
-    "@component-controls/app-components": "^1.1.0",
-    "@component-controls/components": "^1.1.0",
-    "@component-controls/blocks": "^1.1.0",
-    "@component-controls/loader": "^1.1.0",
     "@component-controls/pages": "^1.1.0",
     "@component-controls/specification": "^1.1.0",
-    "@component-controls/store": "^1.1.0",
     "@component-controls/webpack-compile": "^1.1.0",
     "gatsby": "^2.22.10",
     "gatsby-plugin-react-helmet": "^3.3.2",

integrations/gatsby-theme-stories/src/components/Layout.tsx

@@ -1,40 +1,19 @@
 /** @jsx jsx */
-import { FC, useMemo } from 'react';
+import { FC } from 'react';
 import { jsx } from 'theme-ui';
-import { ThemeProvider } from '@component-controls/components';
-import { App } from '@component-controls/app';
-import {
-  SidebarContextProvider,
-  LinkContextProvider,
-} from '@component-controls/app-components';
-import { BlockContextProvider } from '@component-controls/blocks';
-import { loadStoryStore, Store } from '@component-controls/store';
+import { AppContext } from '@component-controls/app';
 const bundle = require('@component-controls/webpack-compile/bundle');
+
 import { GatsbyLink } from './GatsbyLink';
 
 interface LayoutProps {
   docId?: string;
 }
 
 export const Layout: FC<LayoutProps> = ({ docId, children }) => {
-  const storyStore = useMemo(
-    () =>
-      new Store({
-        store: loadStoryStore(bundle),
-        updateLocalStorage: false,
-      }),
-    [],
-  );
-
   return (
-    <ThemeProvider>
-      <BlockContextProvider docId={docId} store={storyStore}>
-        <SidebarContextProvider>
-          <LinkContextProvider linkClass={GatsbyLink}>
-            <App title={docId}>{children}</App>
-          </LinkContextProvider>
-        </SidebarContextProvider>
-      </BlockContextProvider>
-    </ThemeProvider>
+    <AppContext docId={docId} store={bundle} linkClass={GatsbyLink}>
+      {children}
+    </AppContext>
   );
 };

ui/app-components/src/Link/LinkContext.tsx

@@ -3,10 +3,13 @@ import { Link, LinkProps } from 'theme-ui';
 
 export type LinkClassType = React.FC<LinkProps>;
 const LinkContext = createContext<LinkClassType>(Link);
-
-export const LinkContextProvider: FC<{
+export interface LinkContextProviderProps {
   linkClass: LinkClassType;
-}> = ({ linkClass: LinkClass, children }) => {
+}
+export const LinkContextProvider: FC<LinkContextProviderProps> = ({
+  linkClass: LinkClass,
+  children,
+}) => {
   return (
     <LinkContext.Provider value={LinkClass}>{children}</LinkContext.Provider>
   );

ui/app/src/AppContext/AppContext.tsx

@@ -0,0 +1,52 @@
+/** @jsx jsx */
+import { FC, useMemo } from 'react';
+import { jsx } from 'theme-ui';
+import {
+  ThemeProvider,
+  ThemeProviderProps,
+} from '@component-controls/components';
+import {
+  SidebarContextProvider,
+  LinkContextProvider,
+  LinkContextProviderProps,
+} from '@component-controls/app-components';
+import { BlockContextProvider } from '@component-controls/blocks';
+import { LoadingStore } from '@component-controls/loader';
+import { loadStoryStore, Store } from '@component-controls/store';
+import { App } from '../App';
+
+export type AppContextProps = {
+  docId?: string;
+  store?: LoadingStore;
+  linkClass: LinkContextProviderProps['linkClass'];
+} & ThemeProviderProps;
+
+export const AppContext: FC<AppContextProps> = ({
+  docId,
+  children,
+  store,
+  linkClass,
+  components,
+  ...themeProps
+}) => {
+  const storyStore = useMemo(
+    () =>
+      new Store({
+        store: loadStoryStore(store),
+        updateLocalStorage: false,
+      }),
+    [store],
+  );
+
+  return (
+    <ThemeProvider components={components} {...themeProps}>
+      <BlockContextProvider docId={docId} store={storyStore}>
+        <SidebarContextProvider>
+          <LinkContextProvider linkClass={linkClass}>
+            <App title={docId}>{children}</App>
+          </LinkContextProvider>
+        </SidebarContextProvider>
+      </BlockContextProvider>
+    </ThemeProvider>
+  );
+};

ui/app/src/AppContext/index.ts

@@ -0,0 +1 @@
+export * from './AppContext';

ui/app/src/index.ts

@@ -1,4 +1,5 @@
 export * from './App';
+export * from './AppContext';
 export * from './BlogPage';
 export * from './DocPage';
 export * from './Footer';