From 2dfc10c4d2a618262778b7bdd04d42f59b851d68 Mon Sep 17 00:00:00 2001
From: AndrewLeedham <andrew.leedham@xerox.com>
Date: Tue, 14 Sep 2021 17:49:36 +0100
Subject: [PATCH] feat: Support sub-components

---
 src/utils/componentsToHints.ts | 78 ++++++++++++++++++++--------------
 1 file changed, 45 insertions(+), 33 deletions(-)

diff --git a/src/utils/componentsToHints.ts b/src/utils/componentsToHints.ts
index 57a3c2b4..3cbff5ab 100644
--- a/src/utils/componentsToHints.ts
+++ b/src/utils/componentsToHints.ts
@@ -1,4 +1,6 @@
 import omit from 'lodash/omit';
+import get from 'lodash/get';
+import uniq from 'lodash/uniq';
 // @ts-ignore
 import parsePropTypes from 'parse-prop-types';
 import { PlayroomProps } from '../Playroom/Playroom';
@@ -6,44 +8,54 @@ import { PlayroomProps } from '../Playroom/Playroom';
 const staticTypes = __PLAYROOM_GLOBAL__STATIC_TYPES__;
 
 export default (components: PlayroomProps['components']) => {
-  const componentNames = Object.keys(components).sort();
+  const componentNames = uniq([
+    ...Object.keys(components),
+    ...Object.keys(staticTypes),
+  ]).sort();
 
   return Object.assign(
     {},
-    ...componentNames.map((componentName) => {
-      const staticTypesForComponent = staticTypes[componentName];
-      if (
-        staticTypesForComponent &&
-        Object.keys(staticTypesForComponent).length > 0
-      ) {
-        return {
-          [componentName]: {
-            attrs: staticTypesForComponent,
-          },
-        };
-      }
+    ...componentNames
+      .map((componentName) => {
+        const staticTypesForComponent = staticTypes[componentName];
+        if (
+          staticTypesForComponent &&
+          Object.keys(staticTypesForComponent).length > 0
+        ) {
+          return {
+            [componentName]: {
+              attrs: staticTypesForComponent,
+            },
+          };
+        }
 
-      const parsedPropTypes = parsePropTypes(components[componentName]);
-      const filteredPropTypes = omit(parsedPropTypes, 'children');
-      const propNames = Object.keys(filteredPropTypes);
+        const component = get(components, componentName);
+        if (component) {
+          const parsedPropTypes = parsePropTypes(component);
+          const filteredPropTypes = omit(parsedPropTypes, 'children');
+          const propNames = Object.keys(filteredPropTypes);
 
-      return {
-        [componentName]: {
-          attrs: Object.assign(
-            {},
-            ...propNames.map((propName) => {
-              const propType = filteredPropTypes[propName].type;
+          return {
+            [componentName]: {
+              attrs: Object.assign(
+                {},
+                ...propNames.map((propName) => {
+                  const propType = filteredPropTypes[propName].type;
 
-              return {
-                [propName]:
-                  propType.name === 'oneOf'
-                    ? propType.value.filter((x: any) => typeof x === 'string')
-                    : null,
-              };
-            })
-          ),
-        },
-      };
-    })
+                  return {
+                    [propName]:
+                      propType.name === 'oneOf'
+                        ? propType.value.filter(
+                            (x: any) => typeof x === 'string'
+                          )
+                        : null,
+                  };
+                })
+              ),
+            },
+          };
+        }
+      })
+      .filter((x) => Boolean(x))
   );
 };