diff --git a/examples/storybook-5/.storybook/preview.js b/examples/storybook-5/.storybook/preview.js
index 6f940f56e..b14ba8700 100644
--- 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 (
-
-
-
-
-
);
};
diff --git a/ui/blocks/src/ComponentSource/plain/ComponentSource.tsx b/ui/blocks/src/ComponentSource/plain/ComponentSource.tsx
index 31f9fac41..4105b7899 100644
--- a/ui/blocks/src/ComponentSource/plain/ComponentSource.tsx
+++ b/ui/blocks/src/ComponentSource/plain/ComponentSource.tsx
@@ -22,6 +22,8 @@ export const ComponentSource: FC = ({
actions,
...rest
}) => {
+ const [showFileSource, setShowFileSource] = React.useState(false);
+ const { dark } = React.useContext(ThemeContext);
return (
{component => {
@@ -40,10 +42,6 @@ export const ComponentSource: FC = ({
if (!source) {
return null;
}
- const { dark } = React.useContext(ThemeContext);
- const [showFileSource, setShowFileSource] = React.useState(
- 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
index ca4d16323..78860bbe4 100644
--- 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 = ({
children,
currentId,
}) => {
- const store = storyFn();
+ const [store, setStore] = React.useState({
+ 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