Refactor: React Gen 2 SDK- Custom Components (#3723)

This is similar to the previous PR I raised, which incorporated Steve's feedback on removing unnecessary divs and styles to make the code cleaner and minimal. Merging the previous PR would allow the test cases to pass, as that contains all the necessary changes for React --------- Authored-by: Uttej Venkata Sastry <[email protected]>
BuilderIO · Nov 8, 2024 · 152eff8 · 152eff8
1 parent f7503e2
commit 152eff8
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 153 deletions.
diff --git a/...ges/sdks/snippets/angular-ssr/src/app/advanced-child/custom-tabs/custom-tabs.component.ts b/...ges/sdks/snippets/angular-ssr/src/app/advanced-child/custom-tabs/custom-tabs.component.ts
@@ -24,17 +24,13 @@ import type {
         {{ tab.tabName }}
       </button>
 
-      <ng-container *ngFor="let tab of tabList; let i = index">
-        <ng-container *ngIf="activeTab === i">
-          <blocks
-            [blocks]="tabList[i].blocks"
-            [path]="'tabList.' + i + '.blocks'"
-            [parent]="builderBlock.id"
-            [context]="builderContext"
-            [registeredComponents]="builderComponents"
-          />
-        </ng-container>
-      </ng-container>
+      <blocks
+        [blocks]="tabList[activeTab].blocks"
+        [path]="'tabList.' + activeTab + '.blocks'"
+        [parent]="builderBlock.id"
+        [context]="builderContext"
+        [registeredComponents]="builderComponents"
+      />
     </ng-container>
   `,
 })

diff --git a/packages/sdks/snippets/react/src/components/CustomColumns.tsx b/packages/sdks/snippets/react/src/components/CustomColumns.tsx
@@ -5,33 +5,26 @@ import {
 } from '@builder.io/sdk-react';
 
 interface CustomColumnsProps {
-  columns: { blocks: BuilderBlock[] | undefined }[];
+  column1: { blocks: BuilderBlock[] | undefined };
+  column2: { blocks: BuilderBlock[] | undefined };
   builderBlock: BuilderBlock;
 }
 
 const CustomColumns = (props: CustomColumnsProps) => {
   return (
-    <div
-      style={{
-        display: 'flex',
-        flexDirection: 'row',
-        justifyContent: 'space-around',
-        border: '10px solid #ccc',
-        padding: '10px',
-      }}
-    >
+    <>
       <Blocks
-        blocks={props.columns[0]?.blocks}
-        path={`component.options.columns.0.blocks`}
+        blocks={props.column1?.blocks}
+        path={`column1.blocks`}
         parent={props.builderBlock.id}
       />
 
       <Blocks
-        blocks={props.columns[1]?.blocks}
-        path={`component.options.columns.1.blocks`}
+        blocks={props.column2?.blocks}
+        path={`column2.blocks`}
         parent={props.builderBlock.id}
       />
-    </div>
+    </>
   );
 };
 
@@ -40,21 +33,27 @@ export const customColumnsInfo: RegisteredComponent = {
   component: CustomColumns,
   shouldReceiveBuilderProps: {
     builderBlock: true,
+    builderComponents: true,
+    builderContext: true,
   },
   inputs: [
     {
-      name: 'columns',
-      type: 'array',
+      name: 'column1',
+      type: 'uiBlocks',
       broadcast: true,
       hideFromUI: true,
-      defaultValue: [
-        {
-          blocks: [],
-        },
-        {
-          blocks: [],
-        },
-      ],
+      defaultValue: {
+        blocks: [],
+      },
+    },
+    {
+      name: 'column2',
+      type: 'uiBlocks',
+      broadcast: true,
+      hideFromUI: true,
+      defaultValue: {
+        blocks: [],
+      },
     },
   ],
 };
diff --git a/packages/sdks/snippets/react/src/components/CustomHero.tsx b/packages/sdks/snippets/react/src/components/CustomHero.tsx
@@ -8,19 +8,7 @@ interface CustomHeroProps {
 const CustomHero = (props: CustomHeroProps) => {
   return (
     <>
-      <div
-        style={{
-          display: 'flex',
-          flexDirection: 'row',
-          justifyContent: 'space-around',
-          border: '10px solid #ccc',
-          padding: '10px',
-          height: '20px',
-          borderColor: 'black',
-        }}
-      >
-        This is your component's text
-      </div>
+      <div>This is your component's text</div>
 
       {props.children}
     </>
@@ -41,22 +29,6 @@ export const customHeroInfo: RegisteredComponent = {
           text: 'This is Builder text',
         },
       },
-      responsiveStyles: {
-        large: {
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          justifyContent: 'center',
-          textAlign: 'center',
-          padding: '10px',
-          backgroundColor: '#87CEEB',
-          marginTop: '10px',
-        },
-      },
     },
   ],
-  defaultStyles: {
-    border: '10px solid #ccc',
-    padding: '10px',
-  },
 };
diff --git a/packages/sdks/snippets/react/src/components/CustomTabs.tsx b/packages/sdks/snippets/react/src/components/CustomTabs.tsx
@@ -1,128 +1,65 @@
-/**
- * https://www.builder.io/c/docs/custom-components-children
- * src/components/CustomTabs.tsx
- */
-
 import {
   Blocks,
   BuilderBlock,
   RegisteredComponent,
 } from '@builder.io/sdk-react';
 import { useState } from 'react';
 
-type Tab = {
-  tabName: string;
-  children: BuilderBlock[];
-};
 interface TabProps {
-  tabList: Tab[];
+  tabList?: { tabName: string; blocks: BuilderBlock[] }[];
   builderBlock: BuilderBlock;
 }
 
-const CustomTabs = (props: TabProps) => {
+export const CustomTabs = ({ tabList, builderBlock }: TabProps) => {
   const [activeTab, setActiveTab] = useState(0);
 
-  return (
-    <div>
-      <h2>Custom Component with editable regions</h2>
+  if (!tabList?.length) return null;
 
-      <div>
-        <div>
-          {/* 
-            The tabList[] prop is an array that represents the tabs.
-            Each tab has a tabName, which is displayed as the button label,
-            and children, which are the content blocks rendered inside the tab.
-            This comes from the inputs declared inside your custom component.
-            For more details: https://www.builder.io/c/docs/custom-components-input-types
-          */}
-          {props.tabList?.map((tab, index) => (
-            <button
-              key={index}
-              className={activeTab === index ? 'active' : ''}
-              onClick={() => setActiveTab(index)}
-            >
-              {tab.tabName}
-            </button>
-          ))}
-        </div>
+  return (
+    <>
+      <div className="tab-buttons">
+        {tabList.map((tab, index) => (
+          <button
+            key={index}
+            className={`tab-button ${activeTab === index ? 'active' : ''}`}
+            onClick={() => setActiveTab(index)}
+          >
+            {tab.tabName}
+          </button>
+        ))}
       </div>
 
-      {props.tabList && props.tabList.length !== 0 && (
-        <div>
-          {props.tabList.map((tab, index) => (
-            <div
-              key={index}
-              style={{ display: activeTab === index ? 'block' : 'none' }}
-            >
-              {/** 
-                The Blocks component from Builder.io dynamically renders the content inside the tab.
-                - `parent` is the ID of the Builder's parent div, ensuring correct content rendering.
-                - `path` defines where to find the content for this Tab
-                - `blocks` contains the actual content to be displayed inside the tab.
-              */}
-              <Blocks
-                parent={props.builderBlock?.id}
-                path={`component.options.tabList.${index}.children`}
-                blocks={tab.children}
-              />
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
+      <Blocks
+        parent={builderBlock?.id}
+        path={`tabList.${activeTab}.blocks`}
+        blocks={tabList[activeTab].blocks}
+      />
+    </>
   );
 };
 
 export const customTabsInfo: RegisteredComponent = {
   component: CustomTabs,
   name: 'TabFields',
   shouldReceiveBuilderProps: {
-    /** enabling this causes the SDK to pass the `builderBlock` prop down to the component */
     builderBlock: true,
+    builderComponents: true,
+    builderContext: true,
   },
   inputs: [
     {
       name: 'tabList',
       type: 'list',
-
       subFields: [
         {
           name: 'tabName',
           type: 'string',
         },
         {
-          name: 'children',
+          name: 'blocks',
           type: 'uiBlocks',
           hideFromUI: true,
-          defaultValue: [
-            {
-              '@type': '@builder.io/sdk:Element',
-              component: {
-                name: 'Text',
-
-                options: {
-                  text: 'This is editable block within the builder editor',
-                },
-              },
-              responsiveStyles: {
-                large: {
-                  display: 'flex',
-                  flexDirection: 'column',
-                  position: 'relative',
-                  flexShrink: '0',
-                  boxSizing: 'border-box',
-                  marginTop: '8px',
-                  lineHeight: 'normal',
-                  height: '200px',
-                  textAlign: 'left',
-                  minHeight: '200px',
-                },
-                small: {
-                  height: '200px',
-                },
-              },
-            },
-          ],
+          defaultValue: [],
         },
       ],
     },