feat: update block ControlsTable and ComponentSource

core/specification/src/stories.ts

@@ -111,7 +111,9 @@ export interface Story {
   /**
    * multiple components option
    */
-  subcomponents?: string[] | object[];
+  subcomponents?: {
+    [key: string]: string | object;
+  };
 
   /**
    * object of key/value pairs specifying the controls for the story

integrations/storybook/src/blocks/ComponentSource.tsx

@@ -1,14 +1,14 @@
 import React, { FC } from 'react';
 import {
-  ComponentSource as BaseComponentSource,
-  ComponentSourceProps,
+  BlockComponentSource,
+  BlockComponentSourceProps,
 } from '@component-controls/blocks';
 import { ThemeProvider } from '../shared/ThemeProvider';
 
-export const ComponentSource: FC<ComponentSourceProps> = props => {
+export const ComponentSource: FC<BlockComponentSourceProps> = props => {
   return (
     <ThemeProvider>
-      <BaseComponentSource {...props} />
+      <BlockComponentSource {...props} />
     </ThemeProvider>
   );
 };

integrations/storybook/src/blocks/ControlsTable.tsx

@@ -7,15 +7,14 @@ import {
 } from '@component-controls/specification';
 import { mergeControlValues } from '@component-controls/core';
 import {
-  ControlsTable as BaseControlsTable,
-  ControlsTableProps as BaseControlsTableProps,
+  BlockControlsTable,
+  BlockControlsTableProps,
   useStoryContext,
-  StoryInputProps,
 } from '@component-controls/blocks';
 
 import { SET_DATA_MSG } from '../shared/shared';
 import { ThemeProvider } from '../shared/ThemeProvider';
-export type ControlsTableProps = StoryInputProps & BaseControlsTableProps;
+export type ControlsTableProps = BlockControlsTableProps;
 
 export const ControlsTable: FC<ControlsTableProps> = ({
   id: propId,
@@ -62,9 +61,8 @@ export const ControlsTable: FC<ControlsTableProps> = ({
 
   return id ? (
     <ThemeProvider>
-      <BaseControlsTable
-        controls={controls}
-        storyId={id}
+      <BlockControlsTable
+        id={id}
         setControlValue={setControlValue}
         clickControl={clickControl}
         {...rest}

integrations/storybook/src/manager/Panel.tsx

@@ -70,8 +70,7 @@ const WrappedControlsTable: React.FC<WrappedControlsTableProps> = ({
       <Container>
         <ThemeProvider>
           <SharedControlsTable
-            controls={controls}
-            storyId={story?.id}
+            id={story?.id}
             setControlValue={setControlValue}
             clickControl={api.clickControl}
           />

integrations/storybook/src/preview/PreviewPanel.tsx

@@ -9,35 +9,29 @@ export const createControlsPanel = ({
   context: any;
 }): any | null => {
   // @ts-ignore
-  const { storyStore, clientApi: api } = context;
-  const data = storyStore.fromId(storyId);
+  const { clientApi: api } = context;
   const name = 'controls';
-  if (data && data.controls && Object.keys(data.controls).length) {
-    const { setControlValue, clickControl } = api;
-    const { controls } = data;
-    return (expanded: any): any => {
-      switch (true) {
-        case expanded === name: {
-          return {
-            node: (
-              <SharedControlsTable
-                storyId={storyId}
-                controls={controls}
-                setControlValue={setControlValue}
-                clickControl={clickControl}
-              />
-            ),
-            title: `Hide ${name}`,
-          };
-        }
-        default: {
-          return {
-            node: null,
-            title: `Show ${name}`,
-          };
-        }
+  const { setControlValue, clickControl } = api;
+  return (expanded: any): any => {
+    switch (true) {
+      case expanded === name: {
+        return {
+          node: (
+            <SharedControlsTable
+              id={storyId}
+              setControlValue={setControlValue}
+              clickControl={clickControl}
+            />
+          ),
+          title: `Hide ${name}`,
+        };
       }
-    };
-  }
-  return null;
+      default: {
+        return {
+          node: null,
+          title: `Show ${name}`,
+        };
+      }
+    }
+  };
 };

ui/blocks/README.md

@@ -3,7 +3,9 @@
 -   [Overview](#overview)
     -   [@component-controls/blocks](#component-controlsblocks)
 -   [List of components](#list-of-components)
+    -   [<ins>BlockComponentSource</ins>](#insblockcomponentsourceins)
     -   [<ins>ComponentSource</ins>](#inscomponentsourceins)
+    -   [<ins>BlockControlsTable</ins>](#insblockcontrolstableins)
     -   [<ins>ControlsTable</ins>](#inscontrolstableins)
     -   [<ins>SingleControlsTable</ins>](#inssinglecontrolstableins)
     -   [<ins>Description</ins>](#insdescriptionins)
@@ -22,24 +24,66 @@ A collection of core block components - intended to be displayed on the document
 
 Some of the guiding design goals for this library:
 
--   Most components should have a 'plain' and a 'block' version, where the block versions adds a collapsible ox with a title.
--   There are two main categories of components: components that display story data (i.e. story source, story render) and component(s) data (i.e. prop tables, component sources)
--   All components accept a list of custom ActionItems to be extended. 
--   The compnents that deal with source code (sotory or component) display actions to visit the repositories.
+-   Most components should have a 'plain' and a 'block' version, where the block version adds a collapsible Box with a title.
+-   There are two main categories of components: 
+    -   that display story data (i.e. story source, story render)
+    -   that display component(s) data (i.e. prop tables, component sources)
+-   Components accept a list of custom ActionItems to be extended. 
+-   Compnents that deal with source code (story or component source) display actions to browse their respective repositories.
 
 # List of components
 
 <react-docgen-typescript path="./src" exclude="index.ts,repositoryActions.tsx,StoryContext.tsx,utils.ts,ComponentsContext.tsx,context.tsx,argument-utils.ts,PureStorySource.stories.tsx" />
 
 <!-- START-REACT-DOCGEN-TYPESCRIPT -->
 
+## <ins>BlockComponentSource</ins>
+
+Displays import statement for a component as well as the component file source code
+Optionally also displays some repository information from the component's package.json
+
+_BlockComponentSource [source code](https:/github.com/ccontrols/component-controls/blob/master/ui/blocks/src/ComponentSource/block/BlockComponentSource.tsx)_
+
+**Properties:**
+
+-   **of**? : _any_
+
+    Specify the component(s), for which to have information displayed.
+    The default, a value of `"."` will indicate to display information for the current component (associated with the current Story).
+    If an array of components is specified, each component will be displayed in a separate tab.
+-   **actions**? : _ActionItem\[]_
+
+    optional actions provided to the component
+-   **theme**? : _PrismTheme_
+
+    optional `PrismTheme` theme provided to the component. Themes can be imported from `prism-react-renderer/themes`.
+-   **language**? : _Language_
+
+    source lnguage used, by default "jsx".
+-   **renderFn**? : _(props: RenderProps, other: { theme: PrismTheme; }) => ReactNode_
+
+    custom function to render the source code.
+-   **dark**? : _boolean_
+
+    used to specify a "dark" color theme - applcable only if no custom theme prop is provided.
+    if dark: true, duotoneDark theme is used.
+    if dark: false, duotoneLight theme is used.
+-   **style**? : _any_
+
+    css styles for the container.
+-   **as**? : _any_
+
+    syntax container as element. Can be used as `div` or `span`.
+-   **title**? : _string_
+
+    optional section title for the block
+
 ## <ins>ComponentSource</ins>
 
 Displays import statement for a component as well as the component file source code
 Optionally also displays some repository information from the component's package.json
-Under the hood, uses [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) for syntax highlighting
 
-_ComponentSource [source code](https:/github.com/ccontrols/component-controls/blob/master/ui/blocks/src/ComponentSource/ComponentSource.tsx)_
+_ComponentSource [source code](https:/github.com/ccontrols/component-controls/blob/master/ui/blocks/src/ComponentSource/plain/ComponentSource.tsx)_
 
 **Properties:**
 
@@ -71,35 +115,73 @@ _ComponentSource [source code](https:/github.com/ccontrols/component-controls/bl
 -   **as**? : _any_
 
     syntax container as element. Can be used as `div` or `span`.
+
+## <ins>BlockControlsTable</ins>
+
+Table block component to display a story's controls and their editors
+
+_BlockControlsTable [source code](https:/github.com/ccontrols/component-controls/blob/master/ui/blocks/src/ControlsTable/block/BlockControlsTable.tsx)_
+
+**Properties:**
+
+-   **setControlValue**? : _SetControlValueFn_
+
+    generic function to update the values of component controls.
+-   **clickControl**? : _ClickControlFn_
+
+    generic function to propagate a click event for component controls.
+-   **id**? : _string_
+
+    id of the story
+-   **name**? : _string_
+
+    or - name of the story if in an external file
+    will be used to find the story
 -   **title**? : _string_
 
     optional section title for the block
 
 ## <ins>ControlsTable</ins>
 
-Table component to display a story's controls and their editors
+Table component to display a story's controls and their editors.
+Can adapt to multiple groups of controls, displaying them in their own tabs.
 
-_ControlsTable [source code](https:/github.com/ccontrols/component-controls/blob/master/ui/blocks/src/ControlsTable/ControlsTable.tsx)_
+_ControlsTable [source code](https:/github.com/ccontrols/component-controls/blob/master/ui/blocks/src/ControlsTable/plain/ControlsTable.tsx)_
 
 **Properties:**
 
--   **title**? : _string_
--   **storyId**? : _string_
--   **controls**? : _LoadedComponentControls_
 -   **setControlValue**? : _SetControlValueFn_
+
+    generic function to update the values of component controls.
 -   **clickControl**? : _ClickControlFn_
 
+    generic function to propagate a click event for component controls.
+-   **id**? : _string_
+
+    id of the story
+-   **name**? : _string_
+
+    or - name of the story if in an external file
+    will be used to find the story
+
 ## <ins>SingleControlsTable</ins>
 
-_SingleControlsTable [source code](https:/github.com/ccontrols/component-controls/blob/master/ui/blocks/src/ControlsTable/SingleControlsTable.tsx)_
+Single table of controls, without specific handliong of groups.
+The controls and storyId are already set in priops;
+
+_SingleControlsTable [source code](https:/github.com/ccontrols/component-controls/blob/master/ui/blocks/src/ControlsTable/plain/SingleControlsTable.tsx)_
 
 **Properties:**
 
--   **title**? : _string_
+-   **controls**? : _ComponentControls_
+
+    componnet controls to display in the table.
 -   **storyId**? : _string_
--   **controls**? : _LoadedComponentControls_
+
+    storyId, will be used to update the values of the controls
 -   **setControlValue**? : _SetControlValueFn_
--   **clickControl**? : _ClickControlFn_
+
+    generic function to update the values of component controls.
 
 ## <ins>Description</ins>