feat: add Story component

examples/storybook-5/.storybook/preview.js

@@ -1,8 +1,8 @@
 import React from 'react'
 import { addDecorator, addParameters } from '@storybook/react';
-import { Title as SBTitle, Description as SBDescription, Story, Stories, Props } from '@storybook/addon-docs/blocks';
+import { Title as SBTitle, Description as SBDescription, Story as SBStory, Stories, Props } from '@storybook/addon-docs/blocks';
 import { DependenciesTable } from 'storybook-addon-deps/blocks';
-import { ControlsTable, ThemeProvider, Title, Subtitle ,Description, StorySource, ComponentSource, PropsTable, BlockContextProvider } from '@component-controls/storybook';
+import { ControlsTable, ThemeProvider, Title, Subtitle, Story,Description, StorySource, ComponentSource, PropsTable, BlockContextProvider } from '@component-controls/storybook';
 
 addDecorator((story, ctx ) => {
   return (
@@ -28,6 +28,7 @@ export const DocsPage = ({
       <Description slot={descriptionSlot} />
       <ComponentSource id="." title='Component source' />
       <Story id="." />
+      <SBStory id="." />
       <StorySource id="." title='Story source'/>
       <ControlsTable id="." />
       <PropsTable of="." />

integrations/storybook/src/blocks/Story.tsx

@@ -0,0 +1,13 @@
+import React, { FC } from 'react';
+import { Story as BlockStory, StoryProps } from '@component-controls/blocks';
+import { ThemeProvider } from '../shared/ThemeProvider';
+
+export { StoryProps };
+
+export const Story: FC<StoryProps> = props => {
+  return (
+    <ThemeProvider>
+      <BlockStory {...props} />
+    </ThemeProvider>
+  );
+};

integrations/storybook/src/blocks/index.ts

@@ -3,6 +3,7 @@ export * from './ComponentSource';
 export * from './ControlsTable';
 export * from './Description';
 export * from './PropsTable';
+export * from './Story';
 export * from './StorySource';
 export * from './Subtitle';
 export * from './Title';

integrations/storybook/src/config-legacy.ts

@@ -48,7 +48,7 @@ addDecorator(
           Object.keys(injectedStoryStore.stories).forEach((id: string) => {
             const story = injectedStoryStore.stories[id];
             if (storyStore._data[id]) {
-              story.storyFn = storyStore._data[id].storyFn;
+              story.renderFn = storyStore._data[id].storyFn;
             }
 
             const { controls } = story;

ui/blocks/src/Story/Story.tsx

@@ -0,0 +1,14 @@
+import React, { createElement, FC } from 'react';
+import { useStoryContext, StoryInputProps } from '../context';
+
+export type StoryProps = StoryInputProps;
+
+export const Story: FC<StoryProps> = ({ id, name, ...rest }) => {
+  const { story } = useStoryContext({
+    id,
+    name,
+  });
+  return story && story.renderFn ? (
+    <div {...rest}>{createElement(story.renderFn)}</div>
+  ) : null;
+};

ui/blocks/src/Story/index.ts

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

ui/blocks/src/index.ts

@@ -4,6 +4,7 @@ export * from './Description';
 export * from './StorySource';
 export * from './ComponentSource';
 export * from './PropsTable';
+export * from './Story';
 export * from './Subtitle';
 export * from './Title';
 export * from './notifications';