feat: refactor blocks container

ui/blocks/src/BlockContainer/components/ComponentsBlockContainer.tsx

@@ -0,0 +1,24 @@
+import React, { FC } from 'react';
+import {
+  BlockContainer,
+  BlockContainerProps,
+} from '@component-controls/components';
+import { ComponentsContainer, ComponentsContainerProps } from '../../context';
+
+export type ComponentsBlockContainerProps = ComponentsContainerProps &
+  Omit<BlockContainerProps, 'id'>;
+
+export const ComponentsBlockContainer: FC<ComponentsBlockContainerProps> = ({
+  title,
+  collapsible,
+  of,
+  children,
+}) => {
+  return (
+    <BlockContainer title={title} collapsible={collapsible}>
+      <ComponentsContainer of={of}>
+        {(component, props) => children(component, props)}
+      </ComponentsContainer>
+    </BlockContainer>
+  );
+};

ui/blocks/src/BlockContainer/components/index.ts

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

ui/blocks/src/BlockContainer/index.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './story';

ui/blocks/src/BlockContainer/story/StoryBlockContainer.tsx

@@ -0,0 +1,46 @@
+import React, { FC } from 'react';
+import {
+  BlockContainer,
+  BlockContainerProps,
+} from '@component-controls/components';
+import {
+  useStoryContext,
+  StoryInputProps,
+  StoryContextProps,
+} from '../../context';
+import { CURRENT_STORY, getStoryTitle } from '../../utils';
+
+export type StoryBlockContainerProps = {
+  children: (
+    context: StoryContextProps,
+    props: any,
+  ) => React.ReactElement | null;
+} & StoryInputProps &
+  Omit<BlockContainerProps, 'id'>;
+
+export const StoryBlockContainer: FC<StoryBlockContainerProps> = ({
+  id,
+  name,
+  collapsible,
+  title: userTitle,
+  children,
+  ...rest
+}) => {
+  const context = useStoryContext({
+    id,
+    name,
+  });
+  const { component, kind, story } = context;
+  const title =
+    userTitle == CURRENT_STORY ? getStoryTitle(kind, component) : userTitle;
+  // console.log(userTitle, title);
+  return (
+    <BlockContainer
+      title={title}
+      collapsible={collapsible}
+      id={userTitle == CURRENT_STORY && story ? story.id : undefined}
+    >
+      {children(rest, context)}
+    </BlockContainer>
+  );
+};

ui/blocks/src/BlockContainer/story/index.ts

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

ui/blocks/src/ComponentSource/block/BlockComponentSource.stories.tsx

@@ -3,7 +3,7 @@ import { BlockComponentSource } from './BlockComponentSource';
 import { MockContext } from '../../test/MockContext';
 
 export default {
-  title: 'Blocks/Core/ComponentSource/block',
+  title: 'Blocks/ComponentSource/block',
   component: BlockComponentSource,
 };
 

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

@@ -3,7 +3,7 @@ import { ComponentSource } from './ComponentSource';
 import { MockContext } from '../../test/MockContext';
 
 export default {
-  title: 'Blocks/Core/ComponentSource/plain',
+  title: 'Blocks/ComponentSource/plain',
   component: ComponentSource,
 };
 

ui/blocks/src/ControlsTable/block/BlockControlsTable.stories.tsx

@@ -4,7 +4,7 @@ import { MockContext } from '../../test/MockContext';
 import { BlockControlsTable } from './BlockControlsTable';
 
 export default {
-  title: 'Blocks/Core/ControlsTable/block',
+  title: 'Blocks/ControlsTable/block',
   component: BlockControlsTable,
 };
 

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

@@ -4,7 +4,7 @@ import { ControlsTable } from './ControlsTable';
 import { MockContext } from '../../test/MockContext';
 
 export default {
-  title: 'Blocks/Core/ControlsTable/plain',
+  title: 'Blocks/ControlsTable/plain',
   component: ControlsTable,
 };
 

ui/blocks/src/Description/Description.stories.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { Description } from './Description';
 import { MockContext } from '../test/MockContext';
 export default {
-  title: 'Blocks/Core/Description',
+  title: 'Blocks/Description',
   component: Description,
 };
 

ui/blocks/src/PropsTable/block/BlockPropsTable.stories.tsx

@@ -3,7 +3,7 @@ import { BlockPropsTable } from './BlockPropsTable';
 import { MockContext } from '../../test/MockContext';
 
 export default {
-  title: 'Blocks/Core/PropsTable/block',
+  title: 'Blocks/PropsTable/block',
   component: BlockPropsTable,
 };
 

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

@@ -4,7 +4,7 @@ import { StoryContextConsumer } from '../../context/story/StoryContext';
 import { MockContext } from '../../test/MockContext';
 
 export default {
-  title: 'Blocks/Core/PropsTable/plain',
+  title: 'Blocks/PropsTable/plain',
   component: PropsTable,
 };
 

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

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

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Story } from './Story';
+import { MockContext } from '../test/MockContext';
+export default {
+  title: 'Blocks/Story',
+  component: Story,
+};
+
+export const overview = () => (
+  <MockContext storyId="controls">
+    <Story id="." />
+  </MockContext>
+);
+
+export const title = () => (
+  <MockContext storyId="controls">
+    <Story title="." id="." />
+  </MockContext>
+);
+
+export const customTitle = () => (
+  <MockContext storyId="controls">
+    <Story title="My Story Title" id="." />
+  </MockContext>
+);
+export const notCollapsible = () => (
+  <MockContext storyId="controls">
+    <Story title="." collapsible={false} />
+  </MockContext>
+);

ui/blocks/src/Story/Story.tsx

@@ -0,0 +1,36 @@
+import React, { createElement, FC } from 'react';
+import { getControlValues } from '@component-controls/core';
+import {
+  StoryBlockContainer,
+  StoryBlockContainerProps,
+} from '../BlockContainer/story';
+
+export type StoryProps = Omit<StoryBlockContainerProps, 'children'>;
+
+export const Story: FC<StoryProps> = (props: StoryProps) => (
+  <StoryBlockContainer {...props}>
+    {(rest, context) => {
+      const { story } = context;
+      // console.log(story);
+      if (story && story.renderFn) {
+        let children;
+        try {
+          const values = story.controls ? getControlValues(story.controls) : {};
+          children = createElement(
+            'div',
+            null,
+            story.renderFn(values, { context }),
+          );
+          return (
+            <div id={story.id} {...rest}>
+              {children}
+            </div>
+          );
+        } catch (e) {
+          console.error(e);
+        }
+      }
+      return null;
+    }}
+  </StoryBlockContainer>
+);

ui/blocks/src/Story/index.ts

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

ui/blocks/src/StorySource/block/BlockStorySource.stories.tsx

@@ -3,7 +3,7 @@ import { MockContext } from '../../test/MockContext';
 import { BlockStorySource } from './BlockStorySource';
 
 export default {
-  title: 'Blocks/Core/StorySource/block',
+  title: 'Blocks/StorySource/block',
   component: BlockStorySource,
 };
 

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

@@ -14,7 +14,7 @@ import shadesOfPurple from 'prism-react-renderer/themes/shadesOfPurple';
 import { StorySource } from './StorySource';
 import { MockContext } from '../../test/MockContext';
 export default {
-  title: 'Blocks/Core/StorySource/plain',
+  title: 'Blocks/StorySource/plain',
   component: StorySource,
 };
 

ui/blocks/src/Subtitle/Subtitle.stories.tsx

@@ -3,7 +3,7 @@ import { Subtitle } from '.';
 import { MockContext } from '../test/MockContext';
 
 export default {
-  title: 'Blocks/Core/Subtitle',
+  title: 'Blocks/Subtitle',
   component: Subtitle,
 };
 

ui/blocks/src/Title/Title.stories.tsx

@@ -3,7 +3,7 @@ import { Title } from './';
 import { MockContext } from '../test/MockContext';
 
 export default {
-  title: 'Blocks/Core/Title',
+  title: 'Blocks/Title',
   component: Title,
 };
 

ui/blocks/src/Title/Title.tsx

@@ -4,6 +4,7 @@ import {
   TitleProps as TitlePropsBase,
 } from '@component-controls/components';
 import { useStoryContext, StoryInputProps } from '../context';
+import { getStoryTitle } from '../utils';
 
 export type TitleProps = StoryInputProps & TitlePropsBase;
 
@@ -15,12 +16,6 @@ export const Title: FC<TitleProps> = ({ id, name, ...rest }) => {
     id,
     name,
   });
-  let title;
-  if (component && component.info && component.info.displayName) {
-    title = component.info.displayName;
-  } else if (kind) {
-    const titleParts = kind.title.split('/');
-    title = titleParts[titleParts.length - 1];
-  }
+  const title = getStoryTitle(kind, component);
   return title ? <TitleBlock {...rest}>{title}</TitleBlock> : null;
 };

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

@@ -18,7 +18,7 @@ export interface BlockContextInputProps {
    */
   mockStore?: StoriesStore;
 }
-export const CURRENT_STORY = '.';
+
 export interface BlockContextProps {
   /**
    * current story id

ui/blocks/src/context/components/ComponentsContext.tsx

@@ -5,8 +5,8 @@ import {
   StoryComponent,
 } from '@component-controls/specification';
 
-import { BlockContext, CURRENT_STORY } from '../block';
-import { getComponentName } from './utils';
+import { BlockContext } from '../block';
+import { getComponentName, CURRENT_STORY } from '../../utils';
 
 export interface ComponentInputProps {
   /**