Refactor: Angular Gen 2 SDK - Custom Components (#3721)

## Description As per Steve’s feedback, I have made a few changes in the custom component code snippet. I'm creating this mega PR to achieve speed when updating the docs. FYI: Steve doesn't want unnecessary lines of code—styles, in fact. Kapunahele asked me to reduce that, and this PR is more about reducing inline styles unless necessary. This might not look good on the page, but brevity is prioritized here, per Steve. - Removed div to make it clean - Instead of declaring columns as an array, created two columns(1 and 2) of _type_ Blocks - Used <blocks>'s styleProp to pass the custom styles to the component. Loom on my approach: https://www.loom.com/share/6da8f9a0899744cabdbf08d62fa39372?sid=c8ac59fe-bfd6-4f40-8219-2c74859bd4ff I'm happy to refactor. @samijaber Please review :) --------- Authored-by: Uttej Venkata Sastry <[email protected]>
BuilderIO · Nov 8, 2024 · f7503e2 · f7503e2
1 parent 5e88efa
commit f7503e2
Show file tree

Hide file tree

Showing 9 changed files with 117 additions and 259 deletions.
diff --git a/packages/sdks-tests/src/snippet-tests/advanced-child.spec.ts b/packages/sdks-tests/src/snippet-tests/advanced-child.spec.ts
@@ -1,18 +1,7 @@
 import { expect } from '@playwright/test';
-import { findTextInPage, test, verifyTabContent } from '../helpers/index.js';
-
-test.describe('Editable Regions in Custom Components', () => {
-  test('Registers the custom component and contains a text on initial render', async ({
-    page,
-    packageName,
-  }) => {
-    test.skip(!['react', 'angular', 'angular-ssr'].includes(packageName));
-
-    await page.goto('/advanced-child');
-
-    await findTextInPage({ page, text: 'Custom Component with editable regions' });
-  });
+import { test, verifyTabContent } from '../helpers/index.js';
 
+test.describe('Advanced child sub components', () => {
   test('Display two buttons with label Tab 1 and Tab 2', async ({ page, packageName }) => {
     test.skip(!['react', 'angular', 'angular-ssr'].includes(packageName));
 
@@ -46,15 +35,15 @@ test.describe('Editable Regions in Custom Components', () => {
     await verifyTabContent(
       page,
       'Tab 1',
-      'component.options.tabList.0.children',
-      'component.options.tabList.1.children'
+      'component.options.tabList.0.blocks',
+      'component.options.tabList.1.blocks'
     );
 
     await verifyTabContent(
       page,
       'Tab 2',
-      'component.options.tabList.1.children',
-      'component.options.tabList.0.children'
+      'component.options.tabList.1.blocks',
+      'component.options.tabList.0.blocks'
     );
   });
 });
diff --git a/packages/sdks-tests/src/snippet-tests/editable-regions.spec.ts b/packages/sdks-tests/src/snippet-tests/editable-regions.spec.ts
@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { test } from '../helpers/index.js';
 
-test.describe('Adding advanced child blocks in custom components', () => {
+test.describe('Editable regions in custom components', () => {
   test('should render a div with two columns with builder-path attr', async ({
     page,
     packageName,

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
@@ -15,46 +15,32 @@ import type {
   standalone: true,
   imports: [CommonModule, Blocks],
   template: `
-    <div>
-      <h2>Custom Component with editable regions</h2>
+    <ng-container *ngIf="tabList?.length">
+      <button
+        *ngFor="let tab of tabList; let i = index"
+        [class.active]="activeTab === i"
+        (click)="activeTab = i"
+      >
+        {{ tab.tabName }}
+      </button>
 
-      <div>
-        <button
-          *ngFor="let tab of tabList; let i = index"
-          [class.active]="activeTab === i"
-          (click)="activeTab = i"
-        >
-          {{ tab.tabName }}
-        </button>
-      </div>
-
-      <div *ngIf="tabList?.length">
-        <div *ngFor="let tab of tabList; let i = index">
-          <div [style.display]="activeTab === i ? 'block' : 'none'">
-            <blocks
-              [blocks]="tabList[i].children"
-              [path]="'component.options.tabList.' + i + '.children'"
-              [parent]="builderBlock.id"
-              [context]="builderContext"
-              [registeredComponents]="builderComponents"
-            ></blocks>
-          </div>
-        </div>
-      </div>
-    </div>
+      <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>
+    </ng-container>
   `,
-  styles: [
-    `
-      .active {
-        background-color: #e0e0e0;
-        font-weight: bold;
-      }
-    `,
-  ],
 })
 export class CustomTabsComponent {
   @Input() builderBlock!: BuilderBlock;
-  @Input() tabList: { tabName: string; children: BuilderBlock[] }[] = [];
+  @Input() tabList: { tabName: string; blocks: BuilderBlock[] }[] = [];
   @Input() builderComponents: RegisteredComponents = {};
   @Input() builderContext!: BuilderContextInterface;
 
@@ -77,34 +63,7 @@ export const customTabsInfo: RegisteredComponent = {
           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: [],
         },
       ],
     },

diff --git a/packages/sdks/snippets/angular-ssr/src/app/custom-child/custom-hero/custom-hero.component.ts b/packages/sdks/snippets/angular-ssr/src/app/custom-child/custom-hero/custom-hero.component.ts
@@ -7,21 +7,7 @@ import type { RegisteredComponent } from '@builder.io/sdk-angular/lib/node/conte
   selector: 'app-custom-hero',
   standalone: true,
   imports: [Content, CommonModule],
-  template: `
-    <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>
-  `,
+  template: ` <div>This is your component's text</div> `,
 })
 export class CustomHeroComponent {}
 
@@ -39,22 +25,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/.../snippets/angular-ssr/src/app/editable-regions/custom-columns/custom-columns.component.ts b/.../snippets/angular-ssr/src/app/editable-regions/custom-columns/custom-columns.component.ts
@@ -15,45 +15,54 @@ import type {
   standalone: true,
   imports: [CommonModule, Blocks],
   template: `
-    <div
-      style="display: flex; flex-direction: row; justify-content: space-around; border: 10px solid #ccc; padding: 10px"
-    >
-      <blocks
-        [blocks]="columns[0].blocks"
-        [path]="'component.options.columns.0.blocks'"
-        [parent]="builderBlock.id"
-        [context]="builderContext"
-        [registeredComponents]="builderComponents"
-      ></blocks>
-      <blocks
-        [blocks]="columns[1].blocks"
-        [path]="'component.options.columns.1.blocks'"
-        [parent]="builderBlock.id"
-        [context]="builderContext"
-        [registeredComponents]="builderComponents"
-      ></blocks>
-    </div>
+    <blocks
+      [blocks]="column1.blocks"
+      [path]="'column1.blocks'"
+      [parent]="builderBlock.id"
+      [context]="builderContext"
+      [registeredComponents]="builderComponents"
+    />
+    <blocks
+      [blocks]="column2.blocks"
+      [path]="'column2.blocks'"
+      [parent]="builderBlock.id"
+      [context]="builderContext"
+      [registeredComponents]="builderComponents"
+    />
   `,
 })
 export class CustomColumnsComponent {
   @Input() builderBlock!: BuilderBlock;
-  @Input() columns: { blocks: BuilderBlock[] }[] = [];
-  @Input() builderComponents: RegisteredComponents = {};
+  @Input() column1!: { blocks: BuilderBlock[] };
+  @Input() column2!: { blocks: BuilderBlock[] };
+  @Input() builderComponents!: RegisteredComponents;
   @Input() builderContext!: BuilderContextInterface;
 }
 
 export const customColumnsInfo: RegisteredComponent = {
-  component: CustomColumnsComponent,
   name: 'MyColumns',
+  component: CustomColumnsComponent,
   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: [],
+      },
     },
   ],
+
   shouldReceiveBuilderProps: {
     builderBlock: true,
     builderComponents: true,

diff --git a/packages/sdks/snippets/angular/src/app/advanced-child/custom-tabs/custom-tabs.component.ts b/packages/sdks/snippets/angular/src/app/advanced-child/custom-tabs/custom-tabs.component.ts
@@ -15,46 +15,28 @@ import type {
   standalone: true,
   imports: [CommonModule, Blocks],
   template: `
-    <div>
-      <h2>Custom Component with editable regions</h2>
+    <ng-container *ngIf="tabList?.length">
+      <button
+        *ngFor="let tab of tabList; let i = index"
+        [class.active]="activeTab === i"
+        (click)="activeTab = i"
+      >
+        {{ tab.tabName }}
+      </button>
 
-      <div>
-        <button
-          *ngFor="let tab of tabList; let i = index"
-          [class.active]="activeTab === i"
-          (click)="activeTab = i"
-        >
-          {{ tab.tabName }}
-        </button>
-      </div>
-
-      <div *ngIf="tabList?.length">
-        <div *ngFor="let tab of tabList; let i = index">
-          <div [style.display]="activeTab === i ? 'block' : 'none'">
-            <blocks
-              [blocks]="tabList[i].children"
-              [path]="'component.options.tabList.' + i + '.children'"
-              [parent]="builderBlock.id"
-              [context]="builderContext"
-              [registeredComponents]="builderComponents"
-            ></blocks>
-          </div>
-        </div>
-      </div>
-    </div>
+      <blocks
+        [blocks]="tabList[activeTab].blocks"
+        [path]="'tabList.' + activeTab + '.blocks'"
+        [parent]="builderBlock.id"
+        [context]="builderContext"
+        [registeredComponents]="builderComponents"
+      />
+    </ng-container>
   `,
-  styles: [
-    `
-      .active {
-        background-color: #e0e0e0;
-        font-weight: bold;
-      }
-    `,
-  ],
 })
 export class CustomTabsComponent {
   @Input() builderBlock!: BuilderBlock;
-  @Input() tabList: { tabName: string; children: BuilderBlock[] }[] = [];
+  @Input() tabList: { tabName: string; blocks: BuilderBlock[] }[] = [];
   @Input() builderComponents: RegisteredComponents = {};
   @Input() builderContext!: BuilderContextInterface;
 
@@ -77,34 +59,7 @@ export const customTabsInfo: RegisteredComponent = {
           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: [],
         },
       ],
     },