feat(component): Field builder component using grid layout

Author: parthivrh

packages/module/patternfly-docs/content/extensions/component-groups/examples/FieldBuilder/FieldBuilder.md

@@ -0,0 +1,30 @@
+---
+section: Component groups
+subsection: Helpers
+id: Field Builder
+source: react
+propComponents: ['FieldBuilder']
+---
+
+import { FunctionComponent, useState } from 'react';
+import { FieldBuilder } from '@patternfly/react-component-groups/dist/dynamic/FieldBuilder';
+import { MinusCircleIcon } from '@patternfly/react-icons';
+
+
+## Examples
+
+### Basic Field Builder
+
+This is a basic field builder!
+
+```js file="./FieldBuilderExample.tsx"
+
+```
+
+### Field Builder Select
+
+This is a field builder with Select components!
+
+```js file="./FieldBuilderSelectExample.tsx"
+
+```

packages/module/patternfly-docs/content/extensions/component-groups/examples/FieldBuilder/FieldBuilderExample.tsx

@@ -0,0 +1,76 @@
+import React, { useState } from 'react';
+import {
+  Form,
+  TextInput,
+} from '@patternfly/react-core';
+import { FieldBuilder } from '@patternfly/react-component-groups/dist/dynamic/FieldBuilder';
+
+interface Contact {
+  name: string;
+  email: string;
+}
+
+export const FieldBuilderExample: React.FunctionComponent = () => {
+  const [ contacts, setContacts ] = useState<Contact[]>([
+    { name: '', email: '' }
+  ]);
+
+  // Handle adding a new contact row
+  const handleAddContact = () => {
+    setContacts([ ...contacts, { name: '', email: '' } ]);
+  };
+
+  // Handle removing a contact row
+  const handleRemoveContact = (index: number) => {
+    setContacts(contacts.filter((_, i) => i !== index));
+  };
+
+  // Handle updating contact data
+  const handleContactChange = (index: number, field: keyof Contact, value: string) => {
+    const updatedContacts = [ ...contacts ];
+    updatedContacts[index] = { ...updatedContacts[index], [field]: value };
+    setContacts(updatedContacts);
+  };
+
+  return (
+    <Form>
+      <FieldBuilder
+        label=""
+        labelInfo=""
+        isRequired
+        firstColumnLabel="Name"
+        secondColumnLabel="Email"
+        rowCount={contacts.length}
+        onAddRow={handleAddContact}
+        onRemoveRow={handleRemoveContact}
+        addButtonProps={{
+          children: 'Add team member'
+        }}
+      >
+        {({ rowIndex, focusRef, firstColumnAriaLabelledBy, secondColumnAriaLabelledBy }) => [
+          <TextInput
+            key="name"
+            ref={focusRef}
+            type="text"
+            value={contacts[rowIndex]?.name || ''}
+            placeholder="Enter full name"
+            onChange={(_event, value) => handleContactChange(rowIndex, 'name', value)}
+            aria-labelledby={firstColumnAriaLabelledBy}
+            isRequired
+          />,
+          <TextInput
+            key="email"
+            type="email"
+            value={contacts[rowIndex]?.email || ''}
+            placeholder="[email protected]"
+            onChange={(_event, value) => handleContactChange(rowIndex, 'email', value)}
+            aria-labelledby={secondColumnAriaLabelledBy}
+            isRequired
+          />
+        ]}
+      </FieldBuilder>
+    </Form>
+  );
+};
+
+export default FieldBuilderExample;

packages/module/patternfly-docs/content/extensions/component-groups/examples/FieldBuilder/FieldBuilderSelectExample.tsx

@@ -0,0 +1,122 @@
+import React, { useState } from 'react';
+import {
+  Form,
+  FormSelect,
+  FormSelectOption,
+} from '@patternfly/react-core';
+import { FieldBuilder } from '@patternfly/react-component-groups/dist/dynamic/FieldBuilder';
+
+interface TeamMember {
+  department: string;
+  role: string;
+}
+
+export const FieldBuilderSelectExample: React.FunctionComponent = () => {
+  const [ teamMembers, setTeamMembers ] = useState<TeamMember[]>([
+    { department: '', role: '' }
+  ]);
+
+  // Handle adding a new team member row
+  const handleAddTeamMember = () => {
+    setTeamMembers([ ...teamMembers, { department: '', role: '' } ]);
+  };
+
+  // Handle removing a team member row
+  const handleRemoveTeamMember = (index: number) => {
+    setTeamMembers(teamMembers.filter((_, i) => i !== index));
+  };
+
+  // Handle updating team member data
+  const handleTeamMemberChange = (index: number, field: keyof TeamMember, value: string) => {
+    const updatedTeamMembers = [ ...teamMembers ];
+    updatedTeamMembers[index] = { ...updatedTeamMembers[index], [field]: value };
+    setTeamMembers(updatedTeamMembers);
+  };
+
+  // Create a ref callback that works with FormSelect
+  const createFormSelectRef = (focusRef: (element: HTMLElement | null) => void) => 
+    (instance: React.ComponentRef<typeof FormSelect> | HTMLElement | null) => {
+      if (instance) {
+        // Get the underlying DOM element from the FormSelect instance
+        const domElement = (instance as any)?.ref?.current || instance;
+        if (domElement instanceof HTMLElement) {
+          focusRef(domElement);
+        }
+      }
+    };
+
+  const departmentOptions = [
+    { label: 'Choose a department', value: '', disabled: true },
+    { label: 'Engineering', value: 'engineering' },
+    { label: 'Marketing', value: 'marketing' },
+    { label: 'Sales', value: 'sales' },
+    { label: 'Human Resources', value: 'hr' },
+    { label: 'Finance', value: 'finance' }
+  ];
+
+  const roleOptions = [
+    { label: 'Choose a role', value: '', disabled: true },
+    { label: 'Manager', value: 'manager' },
+    { label: 'Senior', value: 'senior' },
+    { label: 'Junior', value: 'junior' },
+    { label: 'Intern', value: 'intern' },
+    { label: 'Contractor', value: 'contractor' }
+  ];
+
+  return (
+    <Form>
+      <FieldBuilder
+        label=""
+        labelInfo=""
+        isRequired
+        firstColumnLabel="Department"
+        secondColumnLabel="Role"
+        rowCount={teamMembers.length}
+        onAddRow={handleAddTeamMember}
+        onRemoveRow={handleRemoveTeamMember}
+        rowGroupLabelPrefix="Team member"
+        addButtonProps={{
+          children: 'Add team member'
+        }}
+      >
+        {({ rowIndex, focusRef, firstColumnAriaLabelledBy, secondColumnAriaLabelledBy }) => [
+          <FormSelect
+            key="department"
+            ref={createFormSelectRef(focusRef)}
+            value={teamMembers[rowIndex]?.department || ''}
+            onChange={(event, value) => handleTeamMemberChange(rowIndex, 'department', value)}
+            aria-labelledby={firstColumnAriaLabelledBy}
+            isRequired
+          >
+            {departmentOptions.map((option, optionIndex) => (
+              <FormSelectOption
+                key={optionIndex}
+                value={option.value}
+                label={option.label}
+                isDisabled={option.disabled}
+              />
+            ))}
+          </FormSelect>,
+          <FormSelect
+            key="role"
+            value={teamMembers[rowIndex]?.role || ''}
+            onChange={(event, value) => handleTeamMemberChange(rowIndex, 'role', value)}
+            aria-labelledby={secondColumnAriaLabelledBy}
+            isRequired
+          >
+            {roleOptions.map((option, optionIndex) => (
+              <FormSelectOption
+                key={optionIndex}
+                value={option.value}
+                label={option.label}
+                isDisabled={option.disabled}
+              />
+            ))}
+          </FormSelect>
+        ]}
+      </FieldBuilder>
+    </Form>
+  );
+};
+
+export default FieldBuilderSelectExample;