Enhance ContentItem component with flexed layout option and update Picker API (#3633)

* Enhance ContentItem component with flexed layout option and styling adjustments

* Fix Incubator components rendering in docs

* Refactor ContentItem component to use lodash for safer property access and simplify component name handling

* Refactor ContentItem component to use category prop instead of isIncubator

* Add star icon and update Picker example to use the new icon

* Add chevronDown to Picker examples

* Extend button container width to match parent in ContentItem styles

* Update Picker example and remove wrapping View

Author: ethanshar

docuilib/src/assets/icons/chevronDown.png

@@ -12,6 +12,17 @@
 
 .blocker {
   pointer-events: none;
+
+  &.flexed {
+    width: 100%;
+    height: 100%;
+    padding: 20px;
+  }
+
+  // Note: Extends button's (Touchable) container to match its parent width
+  button {
+    width: inherit;
+  }
 }
 
 .componentExample {
@@ -34,4 +45,4 @@
   display: flex;
   justify-content: center;
   align-items: center;
-}
+}

docuilib/src/assets/icons/star.png

@@ -10,7 +10,8 @@ import CodeIcon from '../../assets/icons/code';
 type ComponentItemProps = {
   componentName: string;
   props?: Record<string, unknown> | Record<string, unknown>[];
-  snippet?: string
+  snippet?: string;
+  flexed?: boolean;
   showCodeButton?: boolean;
 };
 
@@ -33,7 +34,7 @@ function generateComponentCodeSnippet(componentName: string, componentProps: Rec
 }
 
 const ComponentItem = (props: ComponentItemProps) => {
-  const {componentName, props: componentProps, snippet, showCodeButton = false} = props;
+  const {componentName, props: componentProps, snippet, flexed, showCodeButton = false} = props;
   const [showCode, setShowCode] = useState(false);
 
   const code = useMemo(() => {
@@ -54,9 +55,9 @@ const ComponentItem = (props: ComponentItemProps) => {
   }, []);
 
   const componentPreview = (
-    <div className={styles.blocker}>
+    <div className={`${styles.blocker} ${flexed ? styles.flexed : ''}`}>
       <LiveProvider code={code} scope={ReactLiveScope}>
-        <LivePreview/>
+        <LivePreview style={{width: '100%'}}/>
       </LiveProvider>
     </div>
   );
@@ -84,22 +85,16 @@ type Item = {
   value?: any;
   snippet?: string;
   height?: number;
+  flexed?: boolean;
 };
 type ContentItemProps = {
   item: Item;
   componentName: string;
   showCodeButton?: boolean;
+  category: string;
 };
 
-const extractComponentFromSnippet = (snippet: string) => {
-  if (!snippet.startsWith('<')) {
-    return;
-  }
-  const firstWord = snippet.split(' ')[0];
-  return firstWord.slice(1);
-};
-
-export const ContentItem = ({item, componentName, showCodeButton}: ContentItemProps) => {
+export const ContentItem = ({item, componentName, showCodeButton, category}: ContentItemProps) => {
   const getFigmaEmbed = (value: string, height = 450) => {
     const modifiedValue = !value.includes('page-selector=') ? value + '&page-selector=false' : value;
     return <iframe width={'100%'} height={height} src={modifiedValue}/>;
@@ -116,12 +111,22 @@ export const ContentItem = ({item, componentName, showCodeButton}: ContentItemPr
   const value = item.value;
 
   if (item.props || item.snippet) {
-    const name = item.snippet ? extractComponentFromSnippet(item.snippet) : item.component ?? componentName;
-    const isComponentExists = !!(_.get(ReactLiveScope, name));
+    let name = item.component ?? componentName;
+    if (category === 'incubator') {
+      name = `Incubator.${name}`;
+    }
+
+    const isComponentExists = !!_.get(ReactLiveScope, name);
 
     if (isComponentExists) {
       return (
-        <ComponentItem componentName={name} props={item.props} snippet={item.snippet} showCodeButton={showCodeButton}/>
+        <ComponentItem
+          componentName={name}
+          props={item.props}
+          snippet={item.snippet}
+          showCodeButton={showCodeButton}
+          flexed={item.flexed}
+        />
       );
     } else if (!value) {
       return <div style={{color: 'red'}}>Component Not Supported</div>;

docuilib/src/components/pageComponents/ContentItem.module.scss

@@ -13,7 +13,15 @@ export const SectionContent = ({section, component}) => {
         {_.map(content, (item, index: number) => {
           const isLast = index === content.length - 1;
 
-          return <div style={{marginBottom: isLast ? 0 : 40, border: '1px solid #F8F9FA', background: item.background}}><ContentItem item={item} componentName={component.name}/></div>;
+          return (
+            <div style={{marginBottom: isLast ? 0 : 40, border: '1px solid #F8F9FA', background: item.background}}>
+              <ContentItem
+                item={item}
+                componentName={component.name}
+                category={component.category}
+              />
+            </div>
+          );
         })}
       </div>
     );

docuilib/src/components/pageComponents/ContentItem.tsx

@@ -22,7 +22,12 @@ export const TableSection = ({section, component}) => {
       if (index < numberOfColumns - 1) {
         return (
           <td style={{backgroundColor: item.background || 'white', padding: 0, height: '100px'}}>
-            <ContentItem item={item} componentName={component.name} showCodeButton/>
+            <ContentItem
+              item={item}
+              componentName={component.name}
+              showCodeButton
+              category={component.category}
+            />
           </td>
         );
       }

docuilib/src/components/pageComponents/SectionContent.tsx

@@ -37,6 +37,16 @@ Assets.loadAssetsGroup('icons.demo', {
     width: 24,
     height: 24
   },
+  chevronDown: {
+    uri: require('../../assets/icons/chevronDown.png').default,
+    width: 14,
+    height: 8
+  },
+  star: {
+    uri: require('../../assets/icons/star.png').default,
+    width: 24,
+    height: 24
+  },
   // add: require('../../assets/icons/add.png').default,
   // camera: require('../../assets/icons/cameraSelected.png').default,
   // close: require('../../assets/icons/close.png').default,