fix: clean up code reorg

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

@@ -24,9 +24,9 @@ export const DocsPage = ({
       <Title slot={titleSlot} />
       <Subtitle slot={subtitleSlot} />
       <Description slot={descriptionSlot} />
-      <ImportSource id="." />
+      <ImportSource id="." title='import component' />
       <Story id="." />
-      <Source id="." />
+      <Source id="." title='source'/>
       <ControlsTable id="." />
       <Props slot={propsSlot} />
       <DependenciesTable titleDependencies='Dependencies' titleDependents='Dependents' />

ui/block-components/src/BlockContainer/BlockContainer.tsx

@@ -1,5 +1,6 @@
 import React, { FC } from 'react';
 import styled from '@emotion/styled';
+import { Heading } from 'theme-ui';
 import { ActionBar, ActionItem } from '@component-controls/components';
 
 const SpacedBlockContainer = styled.div(() => ({
@@ -14,16 +15,22 @@ const FramedBlockContainer = styled.div(() => ({
 }));
 
 export interface BlockContainerProps {
+  /**
+   * optional section title for the block
+   */
+  title?: string;
   /**
    * additional actions provided to the component
    */
   actions?: ActionItem[];
 }
 export const BlockContainer: FC<BlockContainerProps> = ({
   children,
+  title,
   actions,
 }) => (
   <SpacedBlockContainer>
+    {title && <Heading as="h3">{title}</Heading>}
     <FramedBlockContainer>{children}</FramedBlockContainer>
     {actions && <ActionBar actionItems={actions} />}
   </SpacedBlockContainer>

ui/blocks/src/ImportSource/ImportSource.tsx

@@ -1,25 +1,25 @@
 import React, { FC } from 'react';
-import { Source as SourceBlock } from '@component-controls/block-components';
+import {
+  Source as SourceBlock,
+  SourceProps,
+} from '@component-controls/block-components';
 import {
   useControlsContext,
   ControlsContextInputProps,
 } from '../BlocksContext';
 import { ThemeContext } from '../ThemeContext';
 
-export type ImportSourceProps = ControlsContextInputProps & {
-  /** a title to display */
-  title?: string;
-};
+export type ImportSourceProps = ControlsContextInputProps & SourceProps;
 
 export const ImportSource: FC<ImportSourceProps> = ({ id, name }) => {
   const { component } = useControlsContext({
     id,
     name,
   });
+  const source = component && component.import;
+  if (!source) {
+    return null;
+  }
   const { dark } = React.useContext(ThemeContext);
-  return (
-    <SourceBlock dark={dark}>
-      {component && component.import ? component.import : ''}
-    </SourceBlock>
-  );
+  return <SourceBlock dark={dark}>{source}</SourceBlock>;
 };