fix: mdx subcomponents handling

ccontrols · Jul 9, 2020 · 9d0b1c0 · 9d0b1c0
1 parent 77c74dd
commit 9d0b1c0
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 15 deletions.
diff --git a/core/core/src/stories.ts b/core/core/src/stories.ts
@@ -188,7 +188,7 @@ export interface Document {
   /**
    * multiple components option
    */
-  subcomponents?: string[] | object[];
+  subcomponents?: Record<string, Document['component']>;
 
   /**
    * story decorators (or wrappers)

diff --git a/core/instrument/src/babel/mdx-stories.ts b/core/instrument/src/babel/mdx-stories.ts
@@ -48,15 +48,29 @@ export const extractMDXStories = (props: any) => (
   let components: { [key: string]: string | undefined } = {};
   const collectComponent = (attributes: any) => {
     const attrComponents = componentsFromParams(attributes);
-    components = attrComponents.reduce(
-      (acc, componentName) => ({
+    components = attrComponents.reduce((acc, componentName) => {
+      if (componentName === '.') {
+        const newComps: Record<string, undefined> = {};
+        if (store.doc?.component) {
+          newComps[store.doc.component as string] = undefined;
+        }
+        if (store.doc && typeof store.doc.subcomponents === 'object') {
+          Object.keys(store.doc.subcomponents).forEach((name: any) => {
+            //@ts-ignore
+            const sub = store.doc.subcomponents[name];
+            newComps[sub as string] = undefined;
+          });
+        }
+        return {
+          ...acc,
+          ...newComps,
+        };
+      }
+      return {
         ...acc,
-        [componentName === '.' && store.doc
-          ? (store.doc.component as string)
-          : componentName]: undefined,
-      }),
-      components,
-    );
+        [componentName]: undefined,
+      };
+    }, components);
     return attrComponents.length > 0 ? attrComponents[0] : undefined;
   };
 

diff --git a/ui/blocks/src/context/block/BlockDataContext.tsx b/ui/blocks/src/context/block/BlockDataContext.tsx
@@ -118,16 +118,38 @@ export const BlockDataContextProvider: React.FC<BlockDataContextInoutProps> = ({
     components: { [key: string]: any } | undefined,
     doc: Document | undefined,
   ): StoryComponents => {
+    console.log(doc);
+    const getComponent = (name: string) =>
+      doc?.componentsLookup[name] &&
+      store?.components[doc.componentsLookup[name]];
     return store && doc && components
       ? Object.keys(components).reduce((acc, key) => {
           const comp = components[key];
-          const name = getComponentName(
-            comp === CURRENT_STORY ? doc.component : comp,
-          );
+          if (comp === CURRENT_STORY) {
+            const comps: Record<string, StoryComponent> = {};
+            const name = getComponentName(doc.component);
+            if (name) {
+              const component = getComponent(name);
+              if (component) {
+                comps[name] = component;
+              }
+            }
+            if (doc.subcomponents) {
+              Object.keys(doc.subcomponents).forEach(subKey => {
+                const name = getComponentName(doc.subcomponents?.[subKey]);
+                if (name) {
+                  const component = getComponent(name);
+                  if (component) {
+                    comps[name] = component;
+                  }
+                }
+              });
+            }
+            return { ...acc, ...comps };
+          }
+          const name = getComponentName(comp);
           if (name) {
-            const component =
-              doc?.componentsLookup[name] &&
-              store?.components[doc.componentsLookup[name]];
+            const component = getComponent(name);
             if (component) {
               return { ...acc, [key]: component };
             }