### Development

Source: https://github.com/patternfly/react-component-groups/blob/main/README.md

Commands to install dependencies and start the development server.

```bash
npm install
npm run start
```

--------------------------------

### Index file example

Source: https://github.com/patternfly/react-component-groups/blob/main/README.md

This example shows the content of an index.ts file used to export a component and its interfaces.

```typescript
export { default } from './MyComponent';
export * from './MyComponent';
```

--------------------------------

### Onboarding modal deck

Source: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/Deck/DeckDemos.md

A complete onboarding experience using ModalDeck to guide users through key product features. This demo demonstrates a multi-step walkthrough with custom styling, labels, and content.

```ts
import { FunctionComponent, useState } from 'react';

import Deck from '@patternfly/react-component-groups/dist/dynamic/Deck';
import { ModalDeck } from '@patternfly/react-component-groups/dist/dynamic/ModalDeck';

const OnboardingModalDeckDemo: FunctionComponent = () => {
  const [activeStep, setActiveStep] = useState(0);

  const steps = [
    {
      title: 'Welcome',
      content: 'This is the first step of your onboarding. Learn about our amazing features!',
    },
    {
      title: 'Getting Started',
      content: 'Here you can find helpful tips to get started quickly.',
    },
    {
      title: 'Advanced Features',
      content: 'Discover advanced functionalities to maximize your experience.',
    },
    {
      title: 'Conclusion',
      content: 'You are all set! Enjoy using our product.',
    },
  ];

  const handleNext = () => {
    setActiveStep((prev) => (prev < steps.length - 1 ? prev + 1 : prev));
  };

  const handleBack = () => {
    setActiveStep((prev) => (prev > 0 ? prev - 1 : prev));
  };

  return (
    <ModalDeck
      steps={steps}
      activeStep={activeStep}
      onNext={handleNext}
      onBack={handleBack}
      onClose={() => console.log('Modal closed')}
      title="Product Onboarding"
      description="Follow these steps to get the most out of our product."
    />
  );
};

export default OnboardingModalDeckDemo;

```

--------------------------------

### Component usage file example

Source: https://github.com/patternfly/react-component-groups/blob/main/README.md

This example shows how to use the MyComponent with its custom props.

```tsx
import { FunctionComponent } from 'react';

const MyComponentExample: FunctionComponent = () => (
  <MyComponent customLabel="My label">
);

export default MyComponentExample;
```

--------------------------------

### Example component

Source: https://github.com/patternfly/react-component-groups/blob/main/README.md

This example demonstrates how to create a new component, including its interface, styling, and default export.

```tsx
import * as React from 'react';
import { Content } from '@patternfly/react-core';
import { createUseStyles } from 'react-jss';

// do not forget to export your component's interface
// always place the component's interface above the component itself in the code
export interface MyComponentProps {
  text: String;
}

const useStyles = createUseStyles({
  myText: {
    fontFamily: 'monospace',
    fontSize: 'var(--pf-v6-global--icon--FontSize--md)',
  },
})

// do not use the named export of your component, just a default one
import { FunctionComponent } from 'react';
const MyComponent: FunctionComponent<MyComponentProps> = () => {
  const classes = useStyles();

  return (
    <Content className={classes.myText}>
      This is my new reusable component
    </Content>
  );
};

export default MyComponent;
```

--------------------------------

### Basic responsive actions

Source: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/ResponsiveActions/ResponsiveActions.md

This example demonstrates how to create responsive actions with persistent and pinned actions.

```javascript
import * as React from 'react';
import {
  ResponsiveActions,
  ResponsiveAction
} from '@patternfly/react-component-groups/dist/dynamic/ResponsiveActions';

export const ResponsiveActionsExample: React.FunctionComponent = () => (
  <ResponsiveActions>
    <ResponsiveAction isPersistent>Persistent action</ResponsiveAction>
    <ResponsiveAction isPinned>Pinned action</ResponsiveAction>
    <ResponsiveAction>Dropdown action</ResponsiveAction>
  </ResponsiveActions>
);

```

--------------------------------

### Basic deck

Source: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/Deck/Deck.md

This example demonstrates the basic deck with automatic navigation. Buttons can use the `navigation` prop to automatically handle page changes: `navigation: 'next'` - Advances to the next page, `navigation: 'previous'` - Goes back to the previous page, `navigation: 'close'` - Triggers the onClose callback. You can also add custom `onClick` handlers for analytics, validation, or other logic. The custom `onClick` will be called before the automatic navigation occurs.

```typescript
import Deck from '@patternfly/react-component-groups/dist/dynamic/Deck';
import { FunctionComponent, useState } from 'react';

const DeckExample: FunctionComponent = () => {
  const [activeDeck, setActiveDeck] = useState(0);
  const deckCount = 3;

  const handleDeckChange = (newDeck: number) => {
    setActiveDeck(newDeck);
  };

  return (
    <Deck
      onClose={() => {
        alert('Deck closed!');
      }}
      activeDeck={activeDeck}
      onDeckChange={handleDeckChange}
      deckCount={deckCount}
    >
      <Deck.Page title="Welcome to the Deck component!">
        <p>This is the first page of the deck.</p>
        <Deck.Button navigation="next">Next</Deck.Button>
      </Deck.Page>
      <Deck.Page title="Features">
        <p>The deck component offers several features:</p>
        <ul>
          <li>Compact sequential container</li>
          <li>Informational walkthroughs</li>
        </ul>
        <Deck.Button navigation="previous">Previous</Deck.Button>
        <Deck.Button navigation="next">Next</Deck.Button>
      </Deck.Page>
      <Deck.Page title="Conclusion">
        <p>Thank you for exploring the deck component!</p>
        <Deck.Button navigation="previous">Previous</Deck.Button>
        <Deck.Button navigation="close">Close</Deck.Button>
      </Deck.Page>
    </Deck>
  );
};

export default DeckExample;
```

--------------------------------

### Component API definition example

Source: https://github.com/patternfly/react-component-groups/blob/main/README.md

This example demonstrates how to define the API for a component, extending existing PatternFly types and providing a default export.

```typescript
import { FunctionComponent } from 'react';

// when possible, extend available PatternFly types
export interface MyComponentProps extends ButtonProps {
    customLabel: Boolean
};

export const MyComponent: FunctionComponent<MyComponentProps> = ({ customLabel, ...props }) => ( ... );
```

--------------------------------

### Full loading simulation

Source: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTable.md

The following example demonstrates the typical behavior of a skeleton table transitioning to a normal table as the data becomes available. To simulate this loading process, click the "Reload table" button and wait for the data to populate.

```javascript
import React, { useState, useEffect } from 'react';
import { Table, TableVariant, RowSelectVariant } from '@patternfly/react-table';
import SkeletonTable from '@patternfly/react-component-groups/dist/dynamic/SkeletonTable';

export const SkeletonTableLoadingExample: React.FunctionComponent = () => {
  const [loading, setLoading] = useState(true);
  const [rows, setRows] = useState([]);
  const [columns] = useState([
    { title: 'Name' },
    { title: 'Kind' },
    { title: 'Status' },
    { title: 'Date created' },
  ]);

  useEffect(() => {
    setLoading(true);
    const timer = setTimeout(() => {
      setRows([
        {
          cells: ['Server 1', 'Node', 'Running', '10/10/2020'],
          selected: false,
        },
        {
          cells: ['Server 2', 'Node', 'Running', '10/10/2020'],
          selected: false,
        },
        {
          cells: ['Server 3', 'Node', 'Stopped', '10/10/2020'],
          selected: false,
        },
      ]);
      setLoading(false);
    }, 3000);
    return () => clearTimeout(timer);
  }, []);

  const onReloadTable = () => {
    setLoading(true);
    setRows([]);
    const timer = setTimeout(() => {
      setRows([
        {
          cells: ['Server 1', 'Node', 'Running', '10/10/2020'],
          selected: false,
        },
        {
          cells: ['Server 2', 'Node', 'Running', '10/10/2020'],
          selected: false,
        },
        {
          cells: ['Server 3', 'Node', 'Stopped', '10/10/2020'],
          selected: false,
        },
      ]);
      setLoading(false);
    }, 3000);
    return () => clearTimeout(timer);
  };

  return (
    <>
      <button onClick={onReloadTable}>Reload table</button>
      {loading ? (
        <SkeletonTable
          aria-label="Skeleton table loading example"
          columns={columns}
          isExpandable={true}
          isSelectable
          selectVariant={RowSelectVariant.checkbox}
        />
      ) : (
        <Table
          aria-label="Table with loading data"
          variant={TableVariant.compact}
          rows={rows}
          columns={columns}
          isExpandable={true}
          onExpand={(event, rowKey, isOpen) => {
            const row = rows[rowKey];
            row.isExpanded = isOpen;
            setRows([...rows]);
          }}
        />
      )}
    </>
  );
};
```

--------------------------------

### Modal deck

Source: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/Deck/Deck.md

Display the deck in a modal dialog. The `ModalDeck` component wraps the Deck in a PatternFly Modal without a close button or extra padding, ideal for guided walkthroughs that require user interaction.

```typescript
import { ModalDeck } from '@patternfly/react-component-groups/dist/dynamic/ModalDeck';
import { FunctionComponent, useState } from 'react';

const ModalDeckExample: FunctionComponent = () => {
  const [isModalOpen, setIsModalOpen] = useState(true);
  const [activeDeck, setActiveDeck] = useState(0);
  const deckCount = 2;

  const handleDeckChange = (newDeck: number) => {
    setActiveDeck(newDeck);
  };

  const handleCloseModal = () => {
    setIsModalOpen(false);
  };

  return (
    <>
      <button onClick={() => setIsModalOpen(true)}>Open Modal Deck</button>
      <ModalDeck
        isOpen={isModalOpen}
        onClose={handleCloseModal}
        activeDeck={activeDeck}
        onDeckChange={handleDeckChange}
        deckCount={deckCount}
      >
        <ModalDeck.Page title="Welcome to the Modal Deck!">
          <p>This is the first page of the modal deck.</p>
          <ModalDeck.Button navigation="next">Next</ModalDeck.Button>
        </ModalDeck.Page>
        <ModalDeck.Page title="Information">
          <p>This modal deck provides important information.</p>
          <ModalDeck.Button navigation="previous">Previous</ModalDeck.Button>
          <ModalDeck.Button navigation="close">Close</ModalDeck.Button>
        </ModalDeck.Page>
      </ModalDeck>
    </>
  );
};

export default ModalDeckExample;
```

--------------------------------

### Basic stale data warning example

Source: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/StaleDataWarning/StaleDataWarning.md

A basic stale data warning component displays a warning icon with additional details in a tooltip, including a timeline for data removal.

```js
import StaleDataWarning from '@patternfly/react-component-groups/dist/dynamic/StaleDataWarning';
import { Fragment, FunctionComponent } from 'react';

export const StaleDataWarningExample: FunctionComponent = () => (
  <Fragment>
    <StaleDataWarning />
  </Fragment>
);

```

--------------------------------

### Error boundary usage example

Source: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorBoundary/ErrorBoundary.md

A basic error boundary appears when an error is thrown inside of the wrapped content. The component itself has a headerTitle, an errorTitle, and shows an en error stack with details.

```javascript
import { Button, Card, CardBody, CardFooter, CardHeader } from '@patternfly/react-core';
import ErrorBoundary from "@patternfly/react-component-groups/dist/dynamic/ErrorBoundary";
import { FunctionComponent, useState } from 'react';

const ErrorBoundaryExample: FunctionComponent = () => {
  const [hasError, setHasError] = useState(false);

  const throwError = () => {
    setHasError(true);
  };

  return (
    <ErrorBoundary
      headerTitle="Error boundary"
      errorTitle="Something went wrong"
      errorStackDetails="This is a detailed error message."
    >
      {!hasError ? (
        <Card>
          <CardHeader>Card header</CardHeader>
          <CardBody>Card body</CardBody>
          <CardFooter>
            <Button onClick={throwError} variant="primary">
              Throw error
            </Button>
          </CardFooter>
        </Card>
      ) : (
        <div>Content that will throw an error</div>
      )}
    </ErrorBoundary>
  );
};

export { ErrorBoundaryExample };

```

--------------------------------

### Build for Production

Source: https://github.com/patternfly/react-component-groups/blob/main/README.md

Commands to build the project for production.

```bash
npm install
npm run build
```

--------------------------------

### Testing and Linting

Source: https://github.com/patternfly/react-component-groups/blob/main/README.md

Commands for running unit tests, Cypress component tests, Cypress E2E tests, and the linter.

```bash
npm run test
npm run cypress:run:cp
npm run cypress:run:e2e
npm run lint
```

--------------------------------

### Accessibility Testing

Source: https://github.com/patternfly/react-component-groups/blob/main/README.md

Commands to build documentation, serve it, run accessibility tests, and serve the accessibility report.

```bash
npm run build:docs
npm run serve:docs
npm run test:a11y
npm run serve:a11y
```

--------------------------------

### Breakpoint on container

Source: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/ResponsiveActions/ResponsiveActions.md

By passing in the `breakpointReference` property, the overflow menu's breakpoint will be relative to the width of the reference container rather than the viewport width. You can change the container width in this example by adjusting the slider. As the container width changes, the actions will change their layout despite the viewport width not changing.

```javascript
import * as React from 'react';
import {
  ResponsiveActions,
  ResponsiveAction
} from '@patternfly/react-component-groups/dist/dynamic/ResponsiveActions';
import {
  Slider
} from '@patternfly/react-core';

export const ResponsiveActionsBreakpointExample: React.FunctionComponent = () => {
  const [containerWidth, setContainerWidth] = React.useState(300);

  return (
    <React.Fragment>
      <div style={{ width: `${containerWidth}px`, border: '1px solid lightgray', padding: '10px' }}>
        <ResponsiveActions breakpointReference="#container-element">
          <ResponsiveAction isPersistent>Persistent action</ResponsiveAction>
          <ResponsiveAction isPinned>Pinned action</ResponsiveAction>
          <ResponsiveAction>Dropdown action</ResponsiveAction>
        </ResponsiveActions>
      </div>
      <div id="container-element" style={{ width: `${containerWidth}px` }}>
        <Slider
          value={containerWidth}
          onChange={(_event, value) => setContainerWidth(value)}
          minValue={100}
          maxValue={500}
          label={containerWidth}
          aria-label="Container width slider"
        />
      </div>
    </React.Fragment>
  );
};

```

--------------------------------

### Basic shortcut grid

Source: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/ShortcutGrid/ShortcutGrid.md

A basic shortcut grid can be used to display shortcuts available to the user together with their description. You can customize displayed shortcuts using `shortcuts` props. For mouse actions with given shortcuts, there are separate props to be enabled. You can customize showing symbols for control keys using `showSymbols`. The component also accepts all properties of the [grid layout](/layouts/grid).

```javascript
import ShortcutGrid from '@patternfly/react-component-groups/dist/dynamic/ShortcutGrid';
import Shortcut from '@patternfly/react-component-groups/dist/dynamic/Shortcut';
import {
  ShortcutGridProps,
  ShortcutGridItemProps,
} from '@patternfly/react-component-groups/dist/dynamic/ShortcutGrid';

const shortcutGridItems: ShortcutGridItemProps[] = [
  {
    key: '1',
    code: {
      // You can use symbols for control keys
      // showSymbols: true,
      // You can also use mouse actions
      // mouseAction: {
      //   name: 'Click',
      //   symbol: 'mouse',
      // },
      keys: ['Ctrl', 'Shift', 'A'],
    },
    description: 'Add new item',
  },
  {
    key: '2',
    code: {
      keys: ['Ctrl', 'Shift', 'B'],
    },
    description: 'Add new item',
  },
];

const ShortcutGridExample: FunctionComponent = () => (
  <ShortcutGrid
    shortcuts={{
      gridItems: shortcutGridItems,
    }}
  />
);

export default ShortcutGridExample;
```

--------------------------------

### Ansible unsupported

Source: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/Ansible/Ansible.md

To specify that Ansible is not supported, set the `isSupported` property to `false`.

```javascript
import Ansible from '@patternfly/react-component-groups/dist/dynamic/Ansible';
import { FunctionComponent } from 'react';

const AnsibleUnsupportedExample: FunctionComponent = () => (
  <Ansible isSupported={false} />
);

export default AnsibleUnsupportedExample;
```

--------------------------------

### Basic multi-content card

Source: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCard.md

To display a basic multi-content an array of content cards has to be passed using the `cards` property. It is recommended to use regular [card components](/components/card) in the content.

```typescript
import MultiContentCard from "@patternfly/react-component-groups/dist/dynamic/MultiContentCard";
import { Card, CardBody, CardTitle } from "@patternfly/react-core";
import { FunctionComponent } from "react";

export const MultiContentCardExample: FunctionComponent = () => (
  <MultiContentCard
    cards={[
      {
        title: "Card 1",
        content: (
          <CardBody>
            This is the content for card 1.
          </CardBody>
        )
      },
      {
        title: "Card 2",
        content: (
          <CardBody>
            This is the content for card 2.
          </CardBody>
        )
      },
      {
        title: "Card 3",
        content: (
          <CardBody>
            This is the content for card 3.
          </CardBody>
        )
      }
    ]}
  />
);
```

--------------------------------

### Status with description

Source: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/Status/Status.md

Optionally a description can be displayed by passing it to the `description` property.

```javascript
import React from 'react';
import { BanIcon, CheckCircleIcon, ExclamationCircleIcon, ExclamationTriangleIcon } from '@patternfly/react-icons/';
import { Status, StatusVariant, IconStatus } from '@patternfly/react-component-groups/dist/dynamic/Status';

export const StatusDescriptionExample: React.FunctionComponent = () => (
  <Status
    icon={<ExclamationTriangleIcon color="var(--pf-v5-global--warning-color--100)" />}
    label="Warning"
    description="This is a warning status."
    variant={StatusVariant.warning}
  />
);

```

--------------------------------

### Basic Field Builder

Source: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/FieldBuilder/FieldBuilder.md

This is a basic field builder!

```typescript
import { FunctionComponent, useState } from 'react';
import { FieldBuilder } from '@patternfly/react-component-groups/dist/dynamic/FieldBuilder';
import { MinusCircleIcon } from '@patternfly/react-icons';


const FieldBuilderExample: FunctionComponent = () => {
  const [fields, setFields] = useState<any[]>([
    {
      id: 'field-1',
      label: 'Field 1',
      type: 'text',
      value: ''
    }
  ]);

  const addField = () => {
    const newField = {
      id: `field-${fields.length + 1}`,
      label: `Field ${fields.length + 1}`,
      type: 'text',
      value: ''
    };
    setFields([...fields, newField]);
  };

  const removeField = (id: string) => {
    setFields(fields.filter(field => field.id !== id));
  };

  const handleFieldChange = (id: string, value: string) => {
    setFields(fields.map(field => (field.id === id ? { ...field, value } : field)));
  };

  return (
    <FieldBuilder
      fields={fields}
      onAddField={addField}
      onRemoveField={removeField}
      onFieldChange={handleFieldChange}
      FieldWrapperComponent={({ children, label, onRemove }) => (
        <div style={{ marginBottom: '16px' }}>
          <label>{label}</label>
          {children}
          {onRemove && <MinusCircleIcon onClick={onRemove} style={{ cursor: 'pointer', marginLeft: '8px' }} />}
        </div>
      )}
      FieldComponent={({ field, onChange }) => (
        <input
          type={field.type}
          id={field.id}
          value={field.value}
          onChange={(e) => onChange(field.id, e.target.value)}
          style={{ marginRight: '8px' }}
        />
      )}
    />
  );
};

export default FieldBuilderExample;

```

--------------------------------

### Basic column list

Source: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/ListManager/ListManager.md

The order of the columns can be changed by dragging and dropping the columns themselves. This list can be used within a page or within a modal. Always make sure to set `isShownByDefault` and `isSelected` (if needed) to the same boolean value in the initial state.

```javascript
import ListManager from '@patternfly/react-component-groups/dist/dynamic/ListManager';
import { FunctionComponent, useState } from 'react';

const ListManagerExample: FunctionComponent = () => {
  const [columns, setColumns] = useState([
    {
      id: 'name',
      header: {
        text: 'Name'
      },
      isShownByDefault: true,
      isSelected: true
    },
    {
      id: 'type',
      header: {
        text: 'Type'
      },
      isShownByDefault: true,
      isSelected: true
    },
    {
      id: 'instances',
      header: {
        text: 'Instances'
      },
      isShownByDefault: true,
      isSelected: true
    },
    {
      id: 'status',
      header: {
        text: 'Status'
      },
      isShownByDefault: true,
      isSelected: true
    }
  ]);

  return (
    <ListManager
      columns={columns}
      onColumnsChange={setColumns}
      title="List manager"
    />
  );
};

export default ListManagerExample;

```

--------------------------------

### Bulk select with all option

Source: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/BulkSelect/BulkSelect.md

To display an option for selecting all data at once, pass `canSelectAll` flag together with `totalCount` of data entries. You can also remove the page select option by setting `isDataPaginated` to `false`.

```javascript
import React from 'react';
import { BulkSelect, BulkSelectValue } from '@patternfly/react-component-groups/dist/dynamic/BulkSelect';

export const BulkSelectAllExample = () => {
  const [selectedCount, setSelectedCount] = React.useState(0);
  const [pageSelected, setPageSelected] = React.useState(false);
  const [pagePartiallySelected, setPagePartiallySelected] = React.useState(false);

  const onSelect = (value: BulkSelectValue) => {
    if (value === BulkSelectValue.all) {
      setSelectedCount(100);
      setPageSelected(true);
      setPagePartiallySelected(false);
    } else if (value === BulkSelectValue.none) {
      setSelectedCount(0);
      setPageSelected(false);
      setPagePartiallySelected(false);
    }
  };

  return (
    <BulkSelect
      selectedCount={selectedCount}
      onSelect={onSelect}
      pageCount={50}
      pageSelected={pageSelected}
      pagePartiallySelected={pagePartiallySelected}
      canSelectAll
      totalCount={100}
      isDataPaginated={false}
    />
  );
};

```

--------------------------------

### Ansible supported

Source: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/Ansible/Ansible.md

By default, the Ansible logo displays as normal and in full color, meaning that it is supported.

```javascript
import Ansible from '@patternfly/react-component-groups/dist/dynamic/Ansible';
import { FunctionComponent } from 'react';

const AnsibleSupportedExample: FunctionComponent = () => (
  <Ansible />
);

export default AnsibleSupportedExample;
```

--------------------------------

### Field Builder Select

Source: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/FieldBuilder/FieldBuilder.md

This is a field builder with Select components!

```typescript
import { FunctionComponent, useState } from 'react';
import { FieldBuilder } from '@patternfly/react-component-groups/dist/dynamic/FieldBuilder';
import { MinusCircleIcon } from '@patternfly/react-icons';
import { Select, SelectOption } from '@patternfly/react-core';


const FieldBuilderSelectExample: FunctionComponent = () => {
  const [fields, setFields] = useState<any[]>([
    {
      id: 'field-1',
      label: 'Field 1',
      type: 'select',
      options: ['Option 1', 'Option 2', 'Option 3'],
      value: 'Option 1'
    }
  ]);

  const addField = () => {
    const newField = {
      id: `field-${fields.length + 1}`,
      label: `Field ${fields.length + 1}`,
      type: 'select',
      options: ['Option 1', 'Option 2', 'Option 3'],
      value: 'Option 1'
    };
    setFields([...fields, newField]);
  };

  const removeField = (id: string) => {
    setFields(fields.filter(field => field.id !== id));
  };

  const handleFieldChange = (id: string, value: string) => {
    setFields(fields.map(field => (field.id === id ? { ...field, value } : field)));
  };

  return (
    <FieldBuilder
      fields={fields}
      onAddField={addField}
      onRemoveField={removeField}
      onFieldChange={handleFieldChange}
      FieldWrapperComponent={({ children, label, onRemove }) => (
        <div style={{ marginBottom: '16px' }}>
          <label>{label}</label>
          {children}
          {onRemove && <MinusCircleIcon onClick={onRemove} style={{ cursor: 'pointer', marginLeft: '8px' }} />}
        </div>
      )}
      FieldComponent={({ field, onChange }) => {
        if (field.type === 'select') {
          return (
            <Select
              id={field.id}
              isOpen={false} // In a real app, manage this state
              onToggle={() => {}}
              onSelect={(e, value) => onChange(field.id, value as string)}
              selected={field.value}
              style={{ width: '200px' }}
            >
              {field.options.map((option: string) => (
                <SelectOption key={option} value={option}>
                  {option}
                </SelectOption>
              ))}
            </Select>
          );
        }
        return null; // Or handle other field types
      }}
    />
  );
};

export default FieldBuilderSelectExample;

```

--------------------------------

### Expandable multi-content card with actions and labels

Source: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCard.md

Actions can be displayed in the multi-content card heading using `actions` property. Also, you can make use of [label components](/components/label) for your card content.

```typescript
import MultiContentCard from "@patternfly/react-component-groups/dist/dynamic/MultiContentCard";
import { Card, CardBody, CardTitle } from "@patternfly/react-core";
import { EllipsisVIcon } from "@patternfly/react-icons";
import { FunctionComponent } from "react";

export const MultiContentCardExpandableActionsExample: FunctionComponent = () => (
  <MultiContentCard
    isExpandable
    toggleText="Show more"
    cards={[
      {
        title: "Card 1",
        actions: <EllipsisVIcon />,
        content: (
          <CardBody>
            This is the content for card 1.
          </CardBody>
        )
      },
      {
        title: "Card 2",
        content: (
          <CardBody>
            This is the content for card 2.
          </CardBody>
        )
      },
      {
        title: "Card 3",
        content: (
          <CardBody>
            This is the content for card 3.
          </CardBody>
        )
      }
    ]}
  />
);
```

--------------------------------

### Basic paginated bulk select

Source: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/BulkSelect/BulkSelect.md

To display a default bulk select, you need to pass number of selected items using `selectedCount`, the `onSelect` callback accepting bulk select option values and selecting data accordingly, `pageCount` defining number of items on the current page, `pageSelected` and `pagePartiallySelected` boolean flags to define the state os the bulk select checkbox.

```javascript
import React from 'react';
import { BulkSelect, BulkSelectValue } from '@patternfly/react-component-groups/dist/dynamic/BulkSelect';

export const BulkSelectExample = () => {
  const [selectedCount, setSelectedCount] = React.useState(0);
  const [pageSelected, setPageSelected] = React.useState(false);
  const [pagePartiallySelected, setPagePartiallySelected] = React.useState(false);

  const onSelect = (value: BulkSelectValue) => {
    if (value === BulkSelectValue.all) {
      setSelectedCount(100);
      setPageSelected(true);
      setPagePartiallySelected(false);
    } else if (value === BulkSelectValue.none) {
      setSelectedCount(0);
      setPageSelected(false);
      setPagePartiallySelected(false);
    } else if (value === BulkSelectValue.page) {
      if (!pageSelected) {
        setSelectedCount(50);
        setPageSelected(true);
        setPagePartiallySelected(false);
      } else {
        setSelectedCount(0);
        setPageSelected(false);
        setPagePartiallySelected(false);
      }
    }
  };

  return (
    <BulkSelect
      selectedCount={selectedCount}
      onSelect={onSelect}
      pageCount={50}
      pageSelected={pageSelected}
      pagePartiallySelected={pagePartiallySelected}
    />
  );
};

```

--------------------------------

### Red Hat Ansible Automation Platform

Source: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/Ansible/Ansible.md

To display the Red Hat Ansible Automation Platform, add the `isRHAAP` property to the `<Ansible>` component.

```javascript
import Ansible from '@patternfly/react-component-groups/dist/dynamic/Ansible';
import { FunctionComponent } from 'react';

const AnsibleTechnologyExample: FunctionComponent = () => (
  <Ansible isRHAAP />
);

export default AnsibleTechnologyExample;
```

--------------------------------

### Basic warning modal

Source: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModal.md

A basic warning modal is triggered when a user tries to perform an action that is deemed risky. You can customize the contents of the modal to fit your use cases. To adjust the text in the modal, pass your desired title to `title` and your message to the `<WarningModal>` component. To customize the action buttons in the modal, use `onConfirm` and `onClose`. For further customization, you can utilize all properties of the [modal component](/components/modal), with the exception of `ref`.

```javascript
import WarningModal from '@patternfly/react-component-groups/dist/dynamic/WarningModal';
import { FunctionComponent, useState } from 'react';

export const WarningModalExample: FunctionComponent = () => {
  const [isOpen, setIsOpen] = useState(true);

  const handleClose = () => {
    setIsOpen(false);
  };

  const handleConfirm = () => {
    setIsOpen(false);
    // Perform action
  };

  return (
    <WarningModal
      title="Modal title"
      isOpen={isOpen}
      onClose={handleClose}
      onConfirm={handleConfirm}
      confirmButtonText="Confirm"
      cancelButtonText="Cancel"
    >
      This is a warning message.
    </WarningModal>
  );
};

```

--------------------------------

### Customizable column headers

Source: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTable.md

Custom column headers can be provided by passing an array of strings or `Th` components to the `columns` prop instead of an array of strings. This allows you to support sorting on columns, add custom content, or style the column headers.

```javascript
import React from 'react';
import SkeletonTable from '@patternfly/react-component-groups/dist/dynamic/SkeletonTable';
import { Th } from '@patternfly/react-table';

export const SkeletonTableCustomExample: React.FunctionComponent = () => (
  <SkeletonTable
    aria-label="Skeleton table custom example"
    columns={[
      'First name',
      'Last name',
      {
        header: 'Actions',
        custom: true,
      },
      <Th key="custom-header-2">Custom header 2</Th>,
    ]}
  />
);
```

--------------------------------

### Basic unavailable content

Source: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/Unavailable/UnavailableContent.md

A basic unavailable content component provides users with instructions, including a link to check a status page for known issues. The status page link can be specified using `statusPageUrl`.

```typescript
import UnavailableContent from '@patternfly/react-component-groups/dist/dynamic/UnavailableContent';
import { FunctionComponent } from 'react';

export const UnavailableContentExample: FunctionComponent = () => (
  <UnavailableContent
    title="Content unavailable"
      body="This content is currently unavailable. Please check the status page for known issues."
    statusPageUrl="https://status.example.com"
  />
);
```

--------------------------------

### Basic maintenance

Source: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/Maintenance/Maintenance.md

To provide users with basic information regarding maintenance. A basic maintenance state should contain an appropriate and informative titleText. defaultBodyText will be used by default.

```javascript
import React from 'react';
import Maintenance from '@patternfly/react-component-groups/dist/dynamic/Maintenance';

export const MaintenanceExample: React.FunctionComponent = () => (
  <Maintenance />
);

```

--------------------------------

### Page header with label and link

Source: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeader.md

To add specific element captions for user clarity and convenience, you can use the `label` property together with [label](/components/label) or your custom component. The `linkProps` can be used to define a link displayed under the subtitle.

```javascript
import PageHeader from "@patternfly/react-component-groups/dist/dynamic/PageHeader"
import { EllipsisVIcon } from '@patternfly/react-icons';
import pageHeaderIcon from '../../assets/icons/page-header-icon.svg'
import { Fragment, FunctionComponent, MouseEvent, Ref, useState } from 'react';

const PageHeaderLabelLinkExample: FunctionComponent = () => {
  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
  const handleTabClick = (_event: MouseEvent, tabIndex: string | number) => {
    setActiveTabKey(tabIndex);
  };

  return (
    <PageHeader
      title="Page header title"
      subtitle="This is a page header with a label and link"
      label="Status"
      linkProps={{ to: '#', children: 'Link to resource' }}
      headerActions={[
        {
          id: 'page-header-actions-1',
          label: 'Actions',
          items: [
            { title: 'Action 1' },
            { title: 'Action 2' },
            { title: 'Action 3' },
          ],
        },
      ]}
      tabs={[
        { eventKey: 0, title: 'Tab 1', 'aria-label': 'Page header tab 1' },
        { eventKey: 1, title: 'Tab 2', 'aria-label': 'Page header tab 2' },
        { eventKey: 2, title: 'Tab 3', 'aria-label': 'Page header tab 3' },
      ]}
      activeTabKey={activeTabKey}
      onTabClick={handleTabClick}
    />
  );
};

export { PageHeaderLabelLinkExample };

```

--------------------------------

### Basic log snippet

Source: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/LogSnippet/LogSnippet.md

The log snippet supports several variants configurable using `variant` property for different scenarios. Each variant has an associated status icon and color similar to alert component.

```javascript
import LogSnippet from '@patternfly/react-component-groups/dist/dynamic/LogSnippet';
import { FunctionComponent } from 'react';

const LogSnippetBasic: FunctionComponent = () => (
  <LogSnippet variant="info" title="Log snippet title" content="This is a log snippet content." />
);

export default LogSnippetBasic;

```

--------------------------------

### Basic page header

Source: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeader.md

In order to display a basic page header, pass the `title` and `subtitle`.

```javascript
import PageHeader from "@patternfly/react-component-groups/dist/dynamic/PageHeader"
import { EllipsisVIcon } from '@patternfly/react-icons';
import pageHeaderIcon from '../../assets/icons/page-header-icon.svg'
import { Fragment, FunctionComponent, MouseEvent, Ref, useState } from 'react';

const PageHeaderExample: FunctionComponent = () => {
  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
  const handleTabClick = (_event: MouseEvent, tabIndex: string | number) => {
    setActiveTabKey(tabIndex);
  };

  return (
    <PageHeader
      title="Page header title"
      subtitle="This is a basic page header"
      headerActions={[
        {
          id: 'page-header-actions-1',
          label: 'Actions',
          items: [
            { title: 'Action 1' },
            { title: 'Action 2' },
            { title: 'Action 3' },
          ],
        },
      ]}
      tabs={[
        { eventKey: 0, title: 'Tab 1', 'aria-label': 'Page header tab 1' },
        { eventKey: 1, title: 'Tab 2', 'aria-label': 'Page header tab 2' },
        { eventKey: 2, title: 'Tab 3', 'aria-label': 'Page header tab 3' },
      ]}
      activeTabKey={activeTabKey}
      onTabClick={handleTabClick}
    />
  );
};

export { PageHeaderExample };

```

--------------------------------

### Basic skeleton table

Source: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTable.md

To indicate that a table's cells are still loading, a basic skeleton table uses the skeleton component to place a placeholder skeleton in each cell. Once the data is loaded, the skeleton table is replaced with a table containing the real data.

```javascript
import React from 'react';
import SkeletonTable from '@patternfly/react-component-groups/dist/dynamic/SkeletonTable';

export const SkeletonTableExample: React.FunctionComponent = () => (
  <SkeletonTable
    aria-label="Skeleton table example"
    variant={undefined}
    borders={undefined}
    isSelectable={undefined}
    selectVariant={undefined}
    isExpandable={undefined}
    columns={undefined}
  />
);
```

--------------------------------

### Custom footer

Source: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorState/ErrorState.md

To override the default action button, specify your own using customFooter.

```javascript
import React from 'react';
import { ErrorState } from '@patternfly/react-component-groups/dist/dynamic/ErrorState';
import { PathMissingIcon } from '@patternfly/react-icons/dist/dynamic/icons/path-missing-icon';
import { Button } from '@patternfly/react-core';

export const ErrorStateFooterExample: React.FunctionComponent = () => (
  <ErrorState
    icon={PathMissingIcon}
    titleText="Page not found"
    bodyText="This could be because the page was moved, deleted, or never existed."
    customFooter={<Button variant="primary">Go to dashboard</Button>}
  />
);
```

--------------------------------

### Basic status

Source: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/Status/Status.md

Status component consinsts of an icon configured using `icon` and a message, specified with `label`.

```javascript
import React from 'react';
import { BanIcon, CheckCircleIcon, ExclamationCircleIcon, ExclamationTriangleIcon } from '@patternfly/react-icons/';
import { Status, StatusVariant, IconStatus } from '@patternfly/react-component-groups/dist/dynamic/Status';

export const StatusExample: React.FunctionComponent = () => (
  <Status
    icon={<ExclamationTriangleIcon color="var(--pf-v5-global--warning-color--100)" />}
    label="Warning"
    variant={StatusVariant.warning}
  />
);

```

--------------------------------

### Page header with actions menu

Source: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeader.md

In case you want to display actions in your header, you can use the `actionsMenu` property.

```javascript
import PageHeader from "@patternfly/react-component-groups/dist/dynamic/PageHeader"
import { EllipsisVIcon } from '@patternfly/react-icons';
import pageHeaderIcon from '../../assets/icons/page-header-icon.svg'
import { Fragment, FunctionComponent, MouseEvent, Ref, useState } from 'react';

const PageHeaderActionsExample: FunctionComponent = () => {
  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
  const handleTabClick = (_event: MouseEvent, tabIndex: string | number) => {
    setActiveTabKey(tabIndex);
  };

  return (
    <PageHeader
      title="Page header title"
      subtitle="This is a page header with an actions menu"
      headerActions={[
        {
          id: 'page-header-actions-1',
          label: 'Actions',
          items: [
            { title: 'Action 1' },
            { title: 'Action 2' },
            { title: 'Action 3' },
          ],
        },
      ]}
      tabs={[
        { eventKey: 0, title: 'Tab 1', 'aria-label': 'Page header tab 1' },
        { eventKey: 1, title: 'Tab 2', 'aria-label': 'Page header tab 2' },
        { eventKey: 2, title: 'Tab 3', 'aria-label': 'Page header tab 3' },
      ]}
      activeTabKey={activeTabKey}
      onTabClick={handleTabClick}
    />
  );
};

export { PageHeaderActionsExample };

```

--------------------------------

### Basic error state

Source: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorState/ErrorState.md

To provide users with error details, a basic error state should contain an appropriate and informative titleText and bodyText. Error state provides a default action to navigate back to the previous page, or the home page in the empty state's footer.

```javascript
import React from 'react';
import { ErrorState } from '@patternfly/react-component-groups/dist/dynamic/ErrorState';
import { PathMissingIcon } from '@patternfly/react-icons/dist/dynamic/icons/path-missing-icon';

export const ErrorStateExample: React.FunctionComponent = () => (
  <ErrorState
    icon={PathMissingIcon}
    titleText="Page not found"
    bodyText="This could be because the page was moved, deleted, or never existed."
  />
);
```

--------------------------------

### Basic service card

Source: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCard.md

This shows a basic service card with an icon, title, description, and optional footer passed in. You can also pass all props of the card component.

```javascript
import ServiceCard from "@patternfly/react-component-groups/dist/dynamic/ServiceCard";
import { EllipsisVIcon } from '@patternfly/react-icons';
import pageHeaderIcon from '../../assets/icons/page-header-icon.svg'
import { FunctionComponent } from 'react'

const ServiceCardExample: FunctionComponent = () => (
  <ServiceCard
    icon={pageHeaderIcon}
    title="Service name"
    description="This is a description for the service."
    footer={[
      {
        label: 'Action',
        onClick: () => {},
      },
    ]}
  />
);

export default ServiceCardExample;
```

--------------------------------

### Link status

Source: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/Status/Status.md

You can use the link `variant` to display the link button status.

```javascript
import React from 'react';
import { BanIcon, CheckCircleIcon, ExclamationCircleIcon, ExclamationTriangleIcon } from '@patternfly/react-icons/';
import { Status, StatusVariant, IconStatus } from '@patternfly/react-component-groups/dist/dynamic/Status';

export const LinkStatusExample: React.FunctionComponent = () => (
  <Status
    icon={<ExclamationTriangleIcon color="var(--pf-v5-global--warning-color--100)" />}
    label="Warning"
    variant={StatusVariant.link}
    href="#"
  />
);

```

--------------------------------

### Custom maintenance

Source: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/Maintenance/Maintenance.md

To override the default bodyText and footer link, specify your own using bodyText and customFooter. You may add a startTime, endTime and timeZone that will be displayed as shown below. timeZone will be set to UTC by default.

```javascript
import React from 'react';
import Maintenance from '@patternfly/react-component-groups/dist/dynamic/Maintenance';

export const MaintenanceCustomExample: React.FunctionComponent = () => (
  <Maintenance
    bodyText="We are performing scheduled maintenance. Please check back in a few minutes."
    customFooter={{
      linkText: 'Learn more about our maintenance schedule',
      url: '#',
    }}
    startTime="2024-01-01T10:00:00Z"
    endTime="2024-01-01T12:00:00Z"
    timeZone="America/New_York"
  />
);

```

--------------------------------

### Expandable multi-content card

Source: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCard.md

To make the multi-content card expandable, pass `isExpandable` flag together with `toggleText` or `toggleContent` property. Default expansion state can be adjusted using `defaultExpanded` property.

```typescript
import MultiContentCard from "@patternfly/react-component-groups/dist/dynamic/MultiContentCard";
import { Card, CardBody, CardTitle } from "@patternfly/react-core";
import { FunctionComponent } from "react";

export const MultiContentCardExpandableExample: FunctionComponent = () => (
  <MultiContentCard
    isExpandable
    toggleText="Show more"
    defaultExpanded
    cards={[
      {
        title: "Card 1",
        content: (
          <CardBody>
            This is the content for card 1.
          </CardBody>
        )
      },
      {
        title: "Card 2",
        content: (
          <CardBody>
            This is the content for card 2.
          </CardBody>
        )
      },
      {
        title: "Card 3",
        content: (
          <CardBody>
            This is the content for card 3.
          </CardBody>
        )
      }
    ]}
  />
);
```

--------------------------------

### Basic close button

Source: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/CloseButton/CloseButton.md

You can use `onClick` to execute a callback when a user clicks the close button.

```javascript
import React from 'react';
import { CloseIcon } from '@patternfly/react-icons';
import CloseButton from '@patternfly/react-component-groups/dist/dynamic/CloseButton';

export const CloseButtonExample: React.FunctionComponent = () => (
  <CloseButton onClick={() => console.log('Close button clicked')} />
);
```

--------------------------------

### Basic missing page

Source: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/MissingPage/MissingPage.md

A basic missing page component informs users that an error has occurred. It also includes a button link, which users can select to return to the homepage.

```typescript
import MissingPage from '@patternfly/react-component-groups/dist/dynamic/MissingPage';
import { FunctionComponent } from 'react';

const MissingPageExample: FunctionComponent = () => (
  <MissingPage
    title="Page not found"
    message="We could not find the page you were looking for."
    buttonText="Return to homepage"
    buttonLink="/"
  />
);

export { MissingPageExample };

```