chore: refactor PropsTable

integrations/storybook/src/blocks/PropsTable.tsx

@@ -1,14 +1,14 @@
 import React, { FC } from 'react';
 import {
-  BlockPropsTable,
-  BlockPropsTableProps,
+  PropsTable as BasePropsTable,
+  PropsTableProps,
 } from '@component-controls/blocks';
 import { ThemeProvider } from '../context/ThemeProvider';
 
-export const PropsTable: FC<BlockPropsTableProps> = props => {
+export const PropsTable: FC<PropsTableProps> = props => {
   return (
     <ThemeProvider>
-      <BlockPropsTable {...props} />
+      <BasePropsTable {...props} />
     </ThemeProvider>
   );
 };

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

@@ -1,10 +1,10 @@
 import React from 'react';
 import { PropsTable } from './PropsTable';
-import { StoryContextConsumer } from '../../context/story/StoryContext';
-import { MockContext } from '../../test/MockContext';
+import { StoryContextConsumer } from '../context/story/StoryContext';
+import { MockContext } from '../test/MockContext';
 
 export default {
-  title: 'Blocks/PropsTable/plain',
+  title: 'Blocks/PropsTable',
   component: PropsTable,
 };
 
@@ -15,7 +15,7 @@ export const overview = () => (
 );
 
 export const subcomponents = () => (
-  <MockContext storyId="id-of-button-story">
+  <MockContext storyId="id-of-story">
     <PropsTable />
   </MockContext>
 );
@@ -46,3 +46,20 @@ export const controls = () => (
     <PropsTable />
   </MockContext>
 );
+
+export const title = () => (
+  <MockContext storyId="id-of-story">
+    <PropsTable title="." />
+  </MockContext>
+);
+
+export const customTitle = () => (
+  <MockContext storyId="id-of-story">
+    <PropsTable title="Custom Props Table Title" />
+  </MockContext>
+);
+export const notCollapsible = () => (
+  <MockContext storyId="id-of-story">
+    <PropsTable title="." collapsible={false} />
+  </MockContext>
+);

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

@@ -5,34 +5,36 @@ import { FC } from 'react';
 import { getPropertyEditor, PropertyEditor } from '@component-controls/editors';
 import { Table, TableProps, Markdown } from '@component-controls/components';
 import { Column } from 'react-table';
-import { ComponentsContainer } from '../../context/components/ComponentsContainer';
-import { ComponentInputProps } from '../../context/components/ComponentsContext';
-import { useBlockContext } from '../../context';
-import { InvalidType } from '../../notifications';
+import {
+  ComponentsBlockContainer,
+  ComponentsBlockContainerProps,
+} from '../BlockContainer/components/ComponentsBlockContainer';
+import { useBlockContext } from '../context';
+import { InvalidType } from '../notifications';
+
 export interface PropsTableOwnProps {
   /**
    * extra custom columns passed to the PropsTable.
    */
   extraColumns?: Column[];
 }
 export type PropsTableProps = PropsTableOwnProps &
-  ComponentInputProps &
+  Omit<ComponentsBlockContainerProps, 'children'> &
   Omit<TableProps, 'columns' | 'data'>;
 
 type GroupingProps = Partial<
   Pick<TableProps, 'groupBy' | 'hiddenColumns' | 'expanded'>
 >;
 
 export const PropsTable: FC<PropsTableProps> = ({
-  of,
   extraColumns = [],
-  sorting = true,
-  ...rest
+  ...props
 }) => {
   const { setControlValue, clickControl } = useBlockContext();
+
   return (
-    <ComponentsContainer of={of}>
-      {(component, { story }) => {
+    <ComponentsBlockContainer {...props}>
+      {(component, { story }, rest) => {
         const { info } = component || {};
         if (!info) {
           return null;
@@ -217,12 +219,11 @@ export const PropsTable: FC<PropsTableProps> = ({
           <Table
             {...groupProps}
             {...rest}
-            sorting={sorting}
             columns={[...columns, ...extraColumns]}
             data={rows}
           />
         );
       }}
-    </ComponentsContainer>
+    </ComponentsBlockContainer>
   );
 };

ui/blocks/src/PropsTable/index.ts

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

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

@@ -50,7 +50,7 @@ export const ComponentsContainer: React.FC<ComponentsContainerProps> = ({
     <Tabs
       onSelect={
         onSelect
-          ? index => {
+          ? (index: number) => {
               return onSelect(keys[index], components[keys[index]]);
             }
           : undefined

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

@@ -50,7 +50,7 @@ export const useComponentsContext = ({
   } else {
     cmp = of;
   }
-  const subcomponents = story && kind && story.subcomponents;
+  const subcomponents = story && story.subcomponents;
   const subComponents = subcomponents
     ? Object.keys(subcomponents).reduce((acc, key) => {
         const name = getComponentName(subcomponents[key]);