fix: update control values in state

ccontrols · Mar 27, 2020 · e5b9218 · e5b9218
1 parent d0b9dde
commit e5b9218
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 15 deletions.
diff --git a/examples/storybook-5/.storybook/preview.js b/examples/storybook-5/.storybook/preview.js
@@ -1,6 +1,5 @@
 import React from 'react'
 import { addDecorator, addParameters } from '@storybook/react';
-import { Title as SBTitle, Description as SBDescription, Story as SBStory, Stories as SBStories, Props } from '@storybook/addon-docs/blocks';
 import { DependenciesTable } from 'storybook-addon-deps/blocks';
 import { ControlsTable, ThemeProvider, Title, Subtitle, Story, Stories, Description, StorySource, Playground, ComponentSource, PropsTable, BlockContextProvider } from '@component-controls/storybook';
 
@@ -15,24 +14,19 @@ addDecorator((story, ctx ) => {
 export const DocsPage = () => {
   return (
     <BlockContextProvider>
-      <SBTitle />
       <Title />
       <Subtitle />
-      <SBDescription />
       <Description />
       <ComponentSource id="." title='Component source' />
       <Story id="." />
-      <SBStory id="." />
       <StorySource id="." title='Story source'/>
       <ControlsTable id="." />
       <PropsTable of="." />
-      <Props />
       <Playground>
         <Story id="." />
       </Playground>
       <DependenciesTable titleDependencies='Dependencies' titleDependents='Dependents' />
       <Stories />
-      <SBStories />
     </BlockContextProvider>  
   );
 };

diff --git a/ui/blocks/src/ComponentSource/plain/ComponentSource.tsx b/ui/blocks/src/ComponentSource/plain/ComponentSource.tsx
@@ -22,6 +22,8 @@ export const ComponentSource: FC<ComponentSourceProps> = ({
   actions,
   ...rest
 }) => {
+  const [showFileSource, setShowFileSource] = React.useState<boolean>(false);
+  const { dark } = React.useContext(ThemeContext);
   return (
     <ComponentsContainer of={of}>
       {component => {
@@ -40,10 +42,6 @@ export const ComponentSource: FC<ComponentSourceProps> = ({
         if (!source) {
           return null;
         }
-        const { dark } = React.useContext(ThemeContext);
-        const [showFileSource, setShowFileSource] = React.useState<boolean>(
-          false,
-        );
 
         const onShowFileSource = () => setShowFileSource(!showFileSource);
         const allActions: ActionItem[] = [];

diff --git a/ui/blocks/src/context/block/BlockContext.tsx b/ui/blocks/src/context/block/BlockContext.tsx
@@ -38,22 +38,36 @@ export const BlockContextProvider: React.FC<BlockContextInputProps> = ({
   children,
   currentId,
 }) => {
-  const store = storyFn();
+  const [store, setStore] = React.useState<StoriesStore>({
+    components: {},
+    stories: {},
+    kinds: {},
+  });
+  React.useEffect(() => {
+    setStore(storyFn());
+  }, []);
+
   const setControlValue: SetControlValueFn = (
     storyId: string,
     propName: string | undefined,
     propValue: any,
   ) => {
-    const controls = store && store[storyId] && store[storyId].controls;
+    const controls =
+      store && store.stories[storyId] && store.stories[storyId].controls;
     if (controls) {
       const newValues = mergeControlValues(controls, propName, propValue);
-      Object.keys(controls).forEach(key => {
-        controls[key] = newValues[key];
+      setStore({
+        ...store,
+        stories: {
+          ...store.stories,
+          [storyId]: { ...store.stories[storyId], controls: newValues },
+        },
       });
     }
   };
   const clickControl: ClickControlFn = (storyId: string, propName: string) => {
-    const controls = store && store[storyId] && store[storyId].controls;
+    const controls =
+      store && store.stories[storyId] && store.stories[storyId].controls;
     if (controls && controls[propName]) {
       const control: ComponentControlButton = controls[
         propName