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 ( - <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 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<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 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<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