fix: notify stories on changes non-current

core/core/src/document.ts

@@ -331,21 +331,27 @@ export interface Store {
   updateStory: (story: Story) => void;
 }
 
-export const defaultStore: Store = {
+export const defaultStore: Store & { _observers: StoreObserver[] } = {
+  _observers: [],
   config: {},
   components: {},
   docs: {},
   packages: {},
   stories: {},
-  addObserver: () => {},
-  removeObserver: () => {},
+  addObserver: function(observer: StoreObserver) {
+    this._observers.push(observer);
+  },
+  removeObserver: function(observer: StoreObserver) {
+    this._observers = this._observers.filter(o => o !== observer);
+  },
   updateStory: function(story: Story) {
     if (story) {
       if (story.id) {
         this.stories = {
           ...this.stories,
           [story.id]: story,
         };
+        this._observers.forEach(o => o(story));
       }
     }
   },

core/store/src/state/context/story.tsx

@@ -123,7 +123,20 @@ export const useStoryId = ({
 export const useStory = (props: StoryInputProps): Story | undefined => {
   const storyId = useStoryId(props);
   const store = useStore();
-  return storyId ? store.stories[storyId] : undefined;
+  const [story, setStory] = useState(
+    storyId ? store.stories[storyId] : undefined,
+  );
+  useEffect(() => {
+    const onObserver = (updatedStory?: Story) => {
+      if (updatedStory?.id === storyId) {
+        setStory(updatedStory);
+      }
+    };
+    store.addObserver(onObserver);
+    return () => store.removeObserver(onObserver);
+  }, [store, storyId]);
+
+  return story;
 };
 
 export const useGetStory = () => (props: StoryInputProps) => useStory(props);

examples/gatsby/package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@component-controls/gatsby-theme-stories": "^1.14.0",
+    "@theme-ui/presets": "^0.4.0-rc.1",
     "gatsby": "^2.22.10",
     "gatsby-plugin-sitemap": "^2.4.11",
     "react": "^16.13.1",

examples/nextjs/package.json

@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "@component-controls/nextjs-plugin": "^1.14.0",
+    "@theme-ui/presets": "^0.4.0-rc.1",
     "emotion": "^10.0.27",
     "emotion-server": "^10.0.27",
     "next": "^9.5.0",

examples/stories/src/stories/controls-editors-starter.stories.tsx

@@ -1,10 +1,8 @@
 import React from 'react';
-import { Button } from 'theme-ui';
 import { ControlTypes } from '@component-controls/core';
 
 export default {
   title: 'Introduction/Starter',
-  component: Button,
   author: 'atanasster',
 };
 

examples/stories/src/tutorial/getting-started/ui-customization.mdx

@@ -9,21 +9,28 @@ tags:
   - configuration
   - theme
 ---
-import { sketchy } from '@theme-ui/presets';
-import { defaultStore } from '@component-controls/core';
+import { system, funk, future, roboto, dark, deep, swiss, tosh, bootstrap, bulma, tailwind, sketchy } from '@theme-ui/presets';
+import * as themes from '@theme-ui/presets';
+import { defaultStore, ControlTypes } from '@component-controls/core';
 import { AppContext, App } from '@component-controls/app';
-import { Story } from '@component-controls/blocks';
+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
 
-<Story name="select-theme">
-  {() => {
-    return (
-      <AppContext store={{ ...defaultStore, config: { ...defaultStore.config, theme: sketchy }}} />
-    );  
-  }}
-</Story>
+<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>
+
+<PropsTable name="select-theme" />
+
 

ui/blocks/src/BlockContainer/components/ComponentsBlockContainer.tsx

@@ -8,6 +8,8 @@ import {
   getComponentName,
   hasControls,
   CURRENT_STORY,
+  Story,
+  Component,
 } from '@component-controls/core';
 import {
   useComponents,
@@ -30,7 +32,13 @@ export type ComponentsBlockContainerProps = {
    * user setting can display only props table or only controls
    */
   visibility?: ComponentVisibility;
-} & Omit<ComponentsContainerProps, 'components'> &
+
+  children: (
+    component: Component,
+    props: any,
+    story?: Story,
+  ) => React.ReactElement | null;
+} & Omit<ComponentsContainerProps, 'components' | 'children'> &
   ComponentInputProps &
   BlockContainerProps;
 
@@ -79,7 +87,7 @@ export const ComponentsBlockContainer: FC<ComponentsBlockContainerProps> = ({
       {...rest}
     >
       {(component, otherProps) => {
-        child = children(component, otherProps);
+        child = children(component, otherProps, story);
         return child;
       }}
     </ComponentsContainer>

ui/blocks/src/PropsTable/PropsTable.tsx

@@ -2,9 +2,12 @@
 /** @jsx jsx */
 import { jsx } from 'theme-ui';
 import { FC } from 'react';
-
-import { TableProps } from '@component-controls/components';
 import { Column } from 'react-table';
+import { TableProps } from '@component-controls/components';
+import {
+  StoryContextProvider,
+  ControlsContextStoryProvider,
+} from '@component-controls/store';
 import {
   ComponentsBlockContainer,
   ComponentsBlockContainerProps,
@@ -37,14 +40,23 @@ export const PropsTable: FC<PropsTableProps> = props => {
       visibility={visibility}
       {...rest}
     >
-      {(component, tableProps) => (
-        <BasePropsTable
-          component={component}
-          visibility={visibility}
-          extraColumns={extraColumns}
-          tableProps={tableProps}
-        />
-      )}
+      {(component, tableProps, story) => {
+        const table = (
+          <BasePropsTable
+            component={component}
+            visibility={visibility}
+            extraColumns={extraColumns}
+            tableProps={tableProps}
+          />
+        );
+        return story ? (
+          <StoryContextProvider storyId={story.id}>
+            <ControlsContextStoryProvider>{table}</ControlsContextStoryProvider>
+          </StoryContextProvider>
+        ) : (
+          table
+        );
+      }}
     </ComponentsBlockContainer>
   );
 };

yarn.lock

@@ -4484,7 +4484,7 @@
     "@theme-ui/preset-tailwind" "^0.3.0"
     "@theme-ui/preset-tosh" "^0.3.0"
 
-"@theme-ui/presets@next":
+"@theme-ui/presets@^0.4.0-rc.1", "@theme-ui/presets@next":
   version "0.4.0-rc.1"
   resolved "https://registry.yarnpkg.com/@theme-ui/presets/-/presets-0.4.0-rc.1.tgz#7674ea99c67bf96515a503786d2ccbd0607fd8cb"
   integrity sha512-vYCIAqyKqkkzjsslsEaSMidVnynzAg8If1P8bzP4lIVjILrXTXya/jrt6Br70LaarFGEtbwYQNlHD8a97g0b7A==