EDU-Hydrogen: Custom components - child blocks (#3971)

## Description

This is the final custom component for the child blocks PR. With it, we
can update the custom components—child blocks doc.

@samijaber Please review this as well.

Author: uttej-vsk

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

@@ -4,7 +4,7 @@ import { test, testClickAndVerifyVisibility } 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-16', 'angular-16-ssr', 'gen1-remix', 'gen1-react', 'qwik-city'].includes(
+      !['react', 'angular-16', 'angular-16-ssr', 'gen1-remix', 'gen1-react', 'hydrogen', 'qwik-city'].includes(
         packageName
       )
     );
@@ -30,7 +30,8 @@ test.describe('Advanced child sub components', () => {
 
   test('Display content for the clicked tab and hide the other', async ({ page, packageName }) => {
     test.skip(
-      !['react', 'angular-16', 'angular-16-ssr', 'gen1-remix', 'gen1-react', 'qwik-city'].includes(
+
+      !['react', 'angular-16', 'angular-16-ssr', 'gen1-remix', 'gen1-react', 'hydrogen', 'qwik-city'].includes(
         packageName
       )
     );

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

@@ -4,7 +4,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-16', 'angular-16-ssr', 'gen1-remix', 'gen1-react', 'qwik-city'].includes(
+      !['react', 'angular-16', 'angular-16-ssr', 'gen1-remix', 'gen1-react', 'hydrogen', 'qwik-city'].includes(
         packageName
       )
     );
@@ -15,7 +15,7 @@ test.describe('Div with Hero class, and text', () => {
 
   test('should verify builder-block with specific text', async ({ page, packageName }) => {
     test.skip(
-      !['react', 'angular-16', 'angular-16-ssr', 'gen1-remix', 'gen1-react', 'qwik-city'].includes(
+      !['react', 'angular-16', 'angular-16-ssr', 'gen1-remix', 'gen1-react', 'hydrogen', 'qwik-city'].includes(
         packageName
       )
     );

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

@@ -23,7 +23,7 @@ test.describe('Editable regions in custom components', () => {
     packageName,
   }) => {
     test.skip(
-      !['react', 'angular-16', 'angular-16-ssr', 'gen1-remix', 'gen1-react', 'qwik-city'].includes(
+      !['react', 'angular-16', 'angular-16-ssr', 'gen1-remix', 'gen1-react', 'hydrogen', 'qwik-city'].includes(
         packageName
       )
     );

packages/sdks/snippets/hydrogen/app/components/CustomColumns.tsx

@@ -0,0 +1,36 @@
+import {
+  Blocks,
+  type BuilderBlock,
+  type RegisteredComponent,
+} from '@builder.io/sdk-react';
+
+interface CustomColumnsProps {
+  column1: BuilderBlock[];
+  column2: BuilderBlock[];
+  builderBlock: BuilderBlock;
+}
+
+export function CustomColumns({
+  column1,
+  column2,
+  builderBlock,
+}: CustomColumnsProps) {
+  return (
+    <>
+      <Blocks blocks={column1} path="column1" parent={builderBlock.id} />
+      <Blocks blocks={column2} path="column2" parent={builderBlock.id} />
+    </>
+  );
+}
+
+export const customColumnsInfo: RegisteredComponent = {
+  name: 'MyColumns',
+  component: CustomColumns,
+  shouldReceiveBuilderProps: {
+    builderBlock: true,
+  },
+  inputs: [
+    {name: 'column1', type: 'uiBlocks', defaultValue: []},
+    {name: 'column2', type: 'uiBlocks', defaultValue: []},
+  ],
+};

packages/sdks/snippets/hydrogen/app/components/CustomHero.tsx

@@ -0,0 +1,27 @@
+// app/components/CustomHero.tsx
+import {type PropsWithChildren} from 'react';
+import type {RegisteredComponent} from '@builder.io/sdk-react';
+
+export function CustomHero({children}: PropsWithChildren) {
+  return (
+    <>
+      <div>This is text from your component</div>
+      {children}
+    </>
+  );
+}
+
+export const customHeroInfo: RegisteredComponent = {
+  name: 'CustomHero',
+  component: CustomHero,
+  canHaveChildren: true,
+  defaultChildren: [
+    {
+      '@type': '@builder.io/sdk:Element',
+      component: {
+        name: 'Text',
+        options: {text: 'This is Builder text'},
+      },
+    },
+  ],
+};

packages/sdks/snippets/hydrogen/app/components/CustomTabs.tsx

@@ -0,0 +1,58 @@
+import {useState} from 'react';
+import {
+  Blocks,
+  type BuilderBlock,
+  type RegisteredComponent,
+} from '@builder.io/sdk-react';
+
+interface CustomTabsProps {
+  tabList: Array<{
+    tabName: string;
+    blocks: BuilderBlock[];
+  }>;
+  builderBlock: BuilderBlock;
+}
+
+export function CustomTabs({tabList, builderBlock}: CustomTabsProps) {
+  const [activeTab, setActiveTab] = useState(0);
+
+  if (!tabList?.length) return null;
+
+  return (
+    <>
+      {tabList.map((tab, i) => (
+        <button
+          key={i}
+          onClick={() => setActiveTab(i)}
+          className={activeTab === i ? 'active' : ''}
+        >
+          {tab.tabName}
+        </button>
+      ))}
+
+      <Blocks
+        parent={builderBlock.id}
+        path={`tabList.${activeTab}.blocks`}
+        blocks={tabList[activeTab].blocks}
+      />
+    </>
+  );
+}
+
+export const customTabsInfo: RegisteredComponent = {
+  name: 'TabFields',
+  component: CustomTabs,
+  shouldReceiveBuilderProps: {
+    builderBlock: true,
+  },
+  inputs: [
+    {
+      name: 'tabList',
+      type: 'list',
+      subFields: [
+        {name: 'tabName', type: 'string'},
+        {name: 'blocks', type: 'uiBlocks', defaultValue: []},
+      ],
+    },
+  ],
+};

packages/sdks/snippets/hydrogen/app/routes/advanced-child.tsx

@@ -0,0 +1,34 @@
+import type {LoaderFunction} from '@remix-run/node';
+import {useLoaderData} from '@remix-run/react';
+import {Content, fetchOneEntry, isPreviewing} from '@builder.io/sdk-react';
+import {customTabsInfo} from '~/components/CustomTabs';
+
+const MODEL_NAME = 'advanced-child';
+const API_KEY = 'ee9f13b4981e489a9a1209887695ef2b';
+
+export const loader: LoaderFunction = async ({params}) => {
+  const content = await fetchOneEntry({
+    model: MODEL_NAME,
+    apiKey: API_KEY,
+    userAttributes: {urlPath: params.pathname},
+  });
+
+  return {content};
+};
+
+export default function AdvancedChildRoute() {
+  const {content} = useLoaderData<typeof loader>();
+
+  if (!content && !isPreviewing()) {
+    return <div>404</div>;
+  }
+
+  return (
+    <Content
+      content={content}
+      model={MODEL_NAME}
+      apiKey={API_KEY}
+      customComponents={[customTabsInfo]}
+    />
+  );
+}

packages/sdks/snippets/hydrogen/app/routes/custom-child.tsx

@@ -0,0 +1,34 @@
+import type {LoaderFunction, LoaderFunctionArgs} from '@remix-run/node';
+import {useLoaderData} from '@remix-run/react';
+import {Content, fetchOneEntry, isPreviewing} from '@builder.io/sdk-react';
+import {customHeroInfo} from '~/components/CustomHero';
+
+const MODEL_NAME = 'custom-child';
+const API_KEY = 'ee9f13b4981e489a9a1209887695ef2b';
+
+export const loader: LoaderFunction = async ({params}) => {
+  const content = await fetchOneEntry({
+    model: MODEL_NAME,
+    apiKey: API_KEY,
+    userAttributes: {
+      urlPath: params.pathname,
+    },
+  });
+  return {content};
+};
+export default function CustomChildRoute() {
+  const {content} = useLoaderData<typeof loader>();
+
+  if (!content && !isPreviewing()) {
+    return <div>404</div>;
+  }
+
+  return (
+    <Content
+      content={content}
+      model={MODEL_NAME}
+      apiKey={API_KEY}
+      customComponents={[customHeroInfo]}
+    />
+  );
+}

packages/sdks/snippets/hydrogen/app/routes/editable-region.tsx

@@ -0,0 +1,34 @@
+import type {LoaderFunction} from '@remix-run/node';
+import {useLoaderData} from '@remix-run/react';
+import {Content, fetchOneEntry, isPreviewing} from '@builder.io/sdk-react';
+import {customColumnsInfo} from '~/components/CustomColumns';
+
+const MODEL_NAME = 'editable-regions';
+const API_KEY = 'ee9f13b4981e489a9a1209887695ef2b';
+
+export const loader: LoaderFunction = async ({params}) => {
+  const content = await fetchOneEntry({
+    model: MODEL_NAME,
+    apiKey: API_KEY,
+    userAttributes: {urlPath: params.pathname},
+  });
+
+  return {content};
+};
+
+export default function EditableRegionsRoute() {
+  const {content} = useLoaderData<typeof loader>();
+
+  if (!content && !isPreviewing()) {
+    return <div>404</div>;
+  }
+
+  return (
+    <Content
+      content={content}
+      model={MODEL_NAME}
+      apiKey={API_KEY}
+      customComponents={[customColumnsInfo]}
+    />
+  );
+}