EDU-159: Remix Gen1 - Advanced child sub components

packages/sdks-tests/src/snippet-tests/advanced-child.spec.ts

@@ -3,7 +3,7 @@ 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));
+    test.skip(!['react', 'angular', 'angular-ssr', 'gen1-remix'].includes(packageName));
 
     await page.goto('/advanced-child');
 

packages/sdks-tests/src/snippet-tests/custom-child.spec.ts

@@ -3,7 +3,7 @@ import { test } from '../helpers/index.js';
 
 test.describe('Div with Hero class, and text', () => {
   test('should render the page without 404', async ({ page, packageName }) => {
-    test.skip(!['react', 'angular', 'angular-ssr'].includes(packageName));
+    test.skip(!['react', 'angular', 'angular-ssr', 'gen1-remix'].includes(packageName));
 
     const response = await page.goto('/custom-child');
     expect(response?.status()).toBeLessThan(400);
@@ -31,4 +31,23 @@ test.describe('Div with Hero class, and text', () => {
     const builderText = await builderTextDiv.textContent();
     expect(builderText?.trim()).toBe('This is Builder text');
   });
+
+  test('should verify builder-block with specific text in gen1-remix', async ({
+    page,
+    packageName,
+  }) => {
+    test.skip(!['gen1-remix'].includes(packageName));
+
+    await page.goto('/custom-child');
+    await page.waitForLoadState('networkidle');
+
+    const builderBlock = page.locator('div.builder-block').first();
+    await expect(builderBlock).toBeVisible();
+
+    const column1Text = page.locator("text=This is your component's text");
+    await expect(column1Text).toBeVisible();
+
+    const column2Text = page.locator('text=This is Builder text');
+    await expect(column2Text).toBeVisible();
+  });
 });

packages/sdks-tests/src/snippet-tests/editable-regions.spec.ts

@@ -45,4 +45,19 @@ test.describe('Editable regions in custom components', () => {
     const secondText = await columns.nth(1).textContent();
     expect(secondText?.trim().toLowerCase()).toBe('column 2 text');
   });
+
+  test.describe('Remix gen1 editable regions text validation', () => {
+    test('should display column texts directly on the screen', async ({ page, packageName }) => {
+      test.skip(!['gen1-remix'].includes(packageName));
+
+      await page.goto('/editable-region');
+      await page.waitForLoadState('networkidle');
+
+      const column1Text = page.locator('text=column 1 text');
+      await expect(column1Text).toBeVisible();
+
+      const column2Text = page.locator('text=column 2 text');
+      await expect(column2Text).toBeVisible();
+    });
+  });
 });

packages/sdks/snippets/gen1-remix/app/routes/advanced-child.tsx

@@ -0,0 +1,48 @@
+// routes/advanced-child.tsx
+import { Builder, BuilderComponent, builder } from '@builder.io/react';
+import type { LoaderFunctionArgs } from '@remix-run/node';
+import { useLoaderData } from '@remix-run/react';
+import CustomTabs from './components/CustomTabs';
+
+builder.init('ee9f13b4981e489a9a1209887695ef2b');
+
+Builder.registerComponent(CustomTabs, {
+  name: 'TabFields',
+  inputs: [
+    {
+      name: 'tabList',
+      type: 'array',
+      defaultValue: [],
+      subFields: [
+        {
+          name: 'tabName',
+          type: 'string',
+        },
+        {
+          name: 'blocks',
+          type: 'uiBlocks',
+          hideFromUI: true,
+          defaultValue: [],
+        },
+      ],
+    },
+  ],
+});
+
+export const loader = async ({ request }: LoaderFunctionArgs) => {
+  const page = await builder
+    .get('advanced-child', {
+      userAttributes: {
+        urlPath: `/${request.url.split('/').pop()}`,
+      },
+    })
+    .toPromise();
+
+  return { page };
+};
+
+export default function AdvancedChildPage() {
+  const { page } = useLoaderData<typeof loader>();
+
+  return <BuilderComponent model="advanced-child" content={page} />;
+}

packages/sdks/snippets/gen1-remix/app/routes/components/CustomColumns.tsx

@@ -0,0 +1,25 @@
+import { BuilderBlocks, BuilderElement } from '@builder.io/react';
+
+interface CustomColumnsProps {
+  column1: { blocks: React.ReactNode };
+  column2: { blocks: React.ReactNode };
+  builderBlock: BuilderElement;
+}
+
+export const CustomColumns = (props: CustomColumnsProps) => {
+  return (
+    <>
+      <BuilderBlocks
+        parentElementId={props.builderBlock.id}
+        dataPath={`column1.blocks`}
+        blocks={props.column1?.blocks}
+      />
+
+      <BuilderBlocks
+        parentElementId={props.builderBlock.id}
+        dataPath={`column2.blocks`}
+        blocks={props.column2?.blocks}
+      />
+    </>
+  );
+};

packages/sdks/snippets/gen1-remix/app/routes/components/CustomHero.tsx

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+
+interface CustomHeroProps {
+  children: ReactNode;
+}
+
+export const CustomHero = (props: CustomHeroProps) => {
+  return (
+    <>
+      <div>This is your component&apos;s text</div>
+      {props.children}
+    </>
+  );
+};

packages/sdks/snippets/gen1-remix/app/routes/components/CustomTabs.tsx

@@ -0,0 +1,36 @@
+import { BuilderBlocks, BuilderElement } from '@builder.io/react';
+
+import { useState } from 'react';
+
+type TabProps = {
+  tabList: { tabName: string; blocks: React.ReactNode[] }[];
+  builderBlock: BuilderElement;
+};
+
+export default function CustomTabs({ tabList, builderBlock }: TabProps) {
+  const [activeTab, setActiveTab] = useState(0);
+
+  if (!tabList?.length) return null;
+
+  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>
+
+      <BuilderBlocks
+        parentElementId={builderBlock?.id}
+        dataPath={`tabList.${activeTab}.blocks`}
+        blocks={tabList[activeTab].blocks}
+      />
+    </>
+  );
+}

packages/sdks/snippets/gen1-remix/app/routes/custom-child.tsx

@@ -0,0 +1,42 @@
+import { Builder, builder, BuilderComponent } from '@builder.io/react';
+
+import { LoaderFunctionArgs } from '@remix-run/node';
+import { useLoaderData } from '@remix-run/react';
+import { CustomHero } from './components/CustomHero';
+
+builder.init('ee9f13b4981e489a9a1209887695ef2b');
+
+Builder.registerComponent(CustomHero, {
+  name: 'CustomHero',
+  inputs: [],
+  canHaveChildren: true,
+  defaultChildren: [
+    {
+      '@type': '@builder.io/sdk:Element',
+      component: {
+        name: 'Text',
+        options: {
+          text: 'This is Builder text',
+        },
+      },
+    },
+  ],
+});
+
+export const loader = async ({ request }: LoaderFunctionArgs) => {
+  const page = await builder
+    .get('custom-child', {
+      userAttributes: {
+        urlPath: `/${request.url.split('/').pop()}`,
+      },
+    })
+    .toPromise();
+
+  return { page };
+};
+
+export default function CustomChildPage() {
+  const { page } = useLoaderData<typeof loader>();
+
+  return <BuilderComponent model="custom-child" content={page} />;
+}

packages/sdks/snippets/gen1-remix/app/routes/editable-region.tsx

@@ -0,0 +1,49 @@
+// routes/advanced-child.tsx
+import { Builder, BuilderComponent, builder } from "@builder.io/react";
+import type { LoaderFunctionArgs } from "@remix-run/node";
+import { useLoaderData } from "@remix-run/react";
+import { CustomColumns } from "./components/CustomColumns";
+
+builder.init("ee9f13b4981e489a9a1209887695ef2b");
+
+Builder.registerComponent(CustomColumns, {
+  name: "MyColumns",
+  inputs: [
+    {
+      name: "column1",
+      type: "uiBlocks",
+      broadcast: true,
+      hideFromUI: true,
+      defaultValue: {
+        blocks: [],
+      },
+    },
+    {
+      name: "column2",
+      type: "uiBlocks",
+      broadcast: true,
+      hideFromUI: true,
+      defaultValue: {
+        blocks: [],
+      },
+    },
+  ],
+});
+
+export const loader = async ({ request }: LoaderFunctionArgs) => {
+  const page = await builder
+    .get("editable-regions", {
+      userAttributes: {
+        urlPath: `/${request.url.split("/").pop()}`,
+      },
+    })
+    .toPromise();
+
+  return { page };
+};
+
+export default function EditableRegionsPage() {
+  const { page } = useLoaderData<typeof loader>();
+
+  return <BuilderComponent model="editable-regions" content={page} />;
+}