Fix component support check to handle nested component names (#3658)

* Fix component support check to handle nested component names

* Refactor component support check to use utility function for improved clarity

* bump uilib-docs version to 3.20

---------

Co-authored-by: Ethan Sharabi <[email protected]>

Author: adids1221

docuilib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uilib-docs",
-  "version": "3.19.0",
+  "version": "3.20.0",
   "main": "./src/index.ts",
   "scripts": {
     "docusaurus": "docusaurus",

docuilib/src/components/pageComponents/ContentItem.tsx

@@ -1,11 +1,11 @@
 import React, {ComponentProps, useCallback, useMemo, useState} from 'react';
-import _ from 'lodash';
 import '../ComponentPage.module.scss';
 import {LiveProvider, LivePreview} from 'react-live';
 import styles from './ContentItem.module.scss';
 import ReactLiveScope from '../../theme/ReactLiveScope';
 import CodeBlock from '../CodeBlock';
 import CodeIcon from '../../assets/icons/code';
+import {isComponentSupported} from '../../utils/componentUtils';
 
 type ComponentItemProps = {
   componentName: string;
@@ -116,9 +116,7 @@ export const ContentItem = ({item, componentName, showCodeButton, category}: Con
       name = `Incubator.${name}`;
     }
 
-    const isComponentExists = !!_.get(ReactLiveScope, name);
-
-    if (isComponentExists) {
+    if (isComponentSupported(name)) {
       return (
         <ComponentItem
           componentName={name}

docuilib/src/utils/componentUtils.ts

@@ -1,7 +1,6 @@
+import get from 'lodash/get';
 import ReactLiveScope from '../theme/ReactLiveScope';
 
-const supportedComponentNames = Object.keys(ReactLiveScope);
-
 export const isComponentSupported = componentName => {
-  return supportedComponentNames.includes(componentName);
+  return !!get(ReactLiveScope, componentName);
 };