feat: stories Story

ui/blocks/src/Stories/plain/Stories.tsx

@@ -5,7 +5,7 @@ import {
   useBlockContext,
 } from '../../context';
 import { Playground, PlaygroundProps } from '../../Playground';
-import { Story } from '../../Story';
+import { Story } from '../../Story/plain';
 
 export type StoriesProps = StoryInputProps & PlaygroundProps;
 

ui/blocks/src/Story/block/BlockStory.stories.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { BlockStory } from './BlockStory';
+import { MockContext } from '../../test/MockContext';
+export default {
+  title: 'Blocks/Core/Story/block',
+  component: BlockStory,
+};
+
+export const overview = () => (
+  <MockContext storyId="controls">
+    <BlockStory title="story" id="." />
+  </MockContext>
+);

ui/blocks/src/Story/block/BlockStory.tsx

@@ -0,0 +1,16 @@
+import React, { FC } from 'react';
+import {
+  BlockContainer,
+  BlockContainerProps,
+} from '@component-controls/components';
+import { Story, StoryProps } from '../plain/Story';
+
+export type BlockStoryProps = StoryProps & BlockContainerProps;
+
+export const BlockStory: FC<BlockStoryProps> = ({ title, ...rest }) => {
+  return (
+    <BlockContainer title={title}>
+      <Story {...rest} />
+    </BlockContainer>
+  );
+};

ui/blocks/src/Story/block/index.ts

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

ui/blocks/src/Story/index.ts

@@ -1 +1,2 @@
-export * from './Story';
+export * from './plain';
+export * from './block';

ui/blocks/src/Story/plain/Story.stories.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Story } from './Story';
+import { MockContext } from '../../test/MockContext';
+export default {
+  title: 'Blocks/Core/Story/plain',
+  component: Story,
+};
+
+export const overview = () => (
+  <MockContext storyId="controls">
+    <Story id="." />
+  </MockContext>
+);

ui/blocks/src/Story/Story.tsx → ui/blocks/src/Story/plain/Story.tsx

@@ -1,6 +1,6 @@
 import React, { createElement, FC } from 'react';
 import { getControlValues } from '@component-controls/core';
-import { useStoryContext, StoryInputProps } from '../context';
+import { useStoryContext, StoryInputProps } from '../../context';
 
 export type StoryProps = StoryInputProps;
 
@@ -10,6 +10,7 @@ export const Story: FC<StoryProps> = ({ id, name, ...rest }) => {
     name,
   });
   const { story } = context;
+  // console.log(story);
   if (story && story.renderFn) {
     let children;
     try {

ui/blocks/src/Story/plain/index.ts

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

ui/blocks/src/context/block/BlockContext.tsx

@@ -9,7 +9,14 @@ import {
 import { mergeControlValues } from '@component-controls/core';
 
 export interface BlockContextInputProps {
+  /**
+   * current story id
+   */
   currentId: string;
+  /**
+   * store mockup when running tests
+   */
+  mockStore?: StoriesStore;
 }
 export const CURRENT_SELECTION = '.';
 export interface BlockContextProps {
@@ -27,7 +34,7 @@ export interface BlockContextProps {
    */
   clickControl?: ClickControlFn;
   /**
-   * store mockup when running tests
+   * store of stories global access
    */
   store?: StoriesStore;
 }
@@ -37,16 +44,20 @@ export const BlockContext = React.createContext<BlockContextProps>({});
 export const BlockContextProvider: React.FC<BlockContextInputProps> = ({
   children,
   currentId,
+  mockStore,
 }) => {
-  const [store, setStore] = React.useState<StoriesStore>({
-    components: {},
-    stories: {},
-    kinds: {},
-  });
+  const [store, setStore] = React.useState<StoriesStore>(
+    mockStore || {
+      components: {},
+      stories: {},
+      kinds: {},
+    },
+  );
   React.useEffect(() => {
-    setStore(storyFn());
+    if (mockStore === undefined) {
+      setStore(storyFn());
+    }
   }, []);
-
   const setControlValue: SetControlValueFn = (
     storyId: string,
     propName: string | undefined,

ui/blocks/src/context/story/StoryContext.tsx

@@ -67,7 +67,6 @@ export const useStoryContext = ({
 }: StoryInputProps): StoryContextProps => {
   const { currentId, store } = React.useContext(BlockContext);
   const inputId = id === CURRENT_SELECTION ? currentId : id;
-
   const storyId = store
     ? inputId || (name && storyIdFromName(store, name)) || currentId
     : undefined;

ui/blocks/src/index.ts

@@ -5,7 +5,7 @@ export * from './Description';
 export * from './Playground';
 export * from './PropsTable';
 export * from './Stories';
-export * from './Story';
+export * from './Story/plain';
 export * from './StorySource';
 export * from './Subtitle';
 export * from './Title';

ui/blocks/src/test/MockContext.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BlockContext } from '../context';
+import { BlockContextProvider } from '../context';
 import { storyStore } from './storyStore';
 
 export interface MockContexProps {
@@ -13,13 +13,8 @@ export const MockContext: React.FC<MockContexProps> = ({
   storyId = 'story',
 }) => {
   return (
-    <BlockContext.Provider
-      value={{
-        currentId: storyId,
-        mockStore: storyStore,
-      }}
-    >
+    <BlockContextProvider currentId={storyId} mockStore={storyStore}>
       {children}
-    </BlockContext.Provider>
+    </BlockContextProvider>
   );
 };

ui/blocks/src/test/storyStore.ts → ui/blocks/src/test/storyStore.tsx

@@ -1,4 +1,7 @@
+/* eslint-disable react/display-name */
+import React from 'react';
 import { StoriesStore, ControlTypes } from '@component-controls/specification';
+import { Donut } from 'theme-ui';
 
 export const storyStore: StoriesStore = {
   components: {
@@ -299,6 +302,7 @@ and a [link](https://google.com)
       source: "() => 'hello'",
     },
     controls: {
+      renderFn: () => <Donut value={1 / 2} />,
       id: 'controls',
       kind: 'Story',
       name: 'controls',