feat: ability to use story name in "component"

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

@@ -29,6 +29,7 @@ export type ComponentsBlockContainerProps = {
 export const ComponentsBlockContainer: FC<ComponentsBlockContainerProps> = ({
   title: userTitle,
   collapsible,
+  name,
   id,
   of,
   children,
@@ -64,6 +65,7 @@ export const ComponentsBlockContainer: FC<ComponentsBlockContainerProps> = ({
   const block = (
     <ComponentsContainer
       of={of}
+      name={name}
       onSelect={tabName =>
         userTitle === CURRENT_STORY ? setTitle(tabName) : undefined
       }

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

@@ -42,6 +42,12 @@ export interface BlockDataContextProps {
    */
   storyIdFromName: (name: string) => string | undefined;
 
+  /**
+   *
+   * find a story id from a story 'name' in current document
+   */
+  storyIdFromNameCurrent: (name: string) => string | undefined;
+
   /**
    * add an observer for onChange events
    */
@@ -139,13 +145,21 @@ export const BlockDataContextProvider: React.FC<BlockDataContextInoutProps> = ({
     }
     return undefined;
   };
+
+  const storyIdFromNameCurrent = (name: string): string | undefined => {
+    if (store && docId) {
+      return docStoryToId(docId, name);
+    }
+    return undefined;
+  };
   return (
     <BlockDataContext.Provider
       value={{
         storyId,
         docId,
         getStoryData,
         storyIdFromName,
+        storyIdFromNameCurrent,
         getComponents,
         addObserver: storeProvider ? storeProvider.addObserver : () => {},
         removeObserver: storeProvider ? storeProvider.removeObserver : () => {},

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

@@ -22,12 +22,14 @@ export type ComponentsContainerProps = {
 
 export const ComponentsContainer: React.FC<ComponentsContainerProps> = ({
   of,
+  name,
   children,
   onSelect,
   ...rest
 }) => {
   const { components, story, componentPackage } = useComponentsContext({
     of,
+    name,
   });
   const keys = components ? Object.keys(components) : [];
   if (keys.length === 0) {

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

@@ -17,6 +17,11 @@ export interface ComponentInputProps {
    * If an array of components is specified, each component will be displayed in a separate tab.
    */
   of?: typeof CURRENT_STORY | any;
+
+  /**
+   * some component-oriented ui components can also be driven by a story id (name). ie the PropsTable can display component props, or story controls
+   */
+  name?: string;
 }
 
 export interface ComponentContextProps {
@@ -28,16 +33,18 @@ export interface ComponentContextProps {
 
 export const useComponentsContext = ({
   of = CURRENT_STORY,
+  name,
 }: ComponentInputProps): ComponentContextProps => {
   const {
-    storyId,
+    storyId: currentStoryId,
     docId,
     getStoryData,
     getComponents,
+    storyIdFromNameCurrent,
     addObserver,
     removeObserver,
   } = useContext(BlockDataContext);
-
+  const storyId = name ? storyIdFromNameCurrent(name) : currentStoryId;
   const [{ story, doc, component, componentPackage }, setStoryData] = useState(
     getStoryData(storyId, docId),
   );