### Start Development Server (Custom Setup)

Source: https://github.com/nicolethoen/patternfly-ai-coding/blob/main/_autodocs/02-setup-and-configuration.md

Run this command for custom setups. The exact command (`npm run dev` or `npm run start`) depends on your specific build tool configuration.

```bash
npm run dev
```

```bash
npm run start
```

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

### New Team Member Onboarding Steps

Source: https://github.com/nicolethoen/patternfly-ai-coding/blob/main/_autodocs/02-setup-and-configuration.md

Steps to clone the repository, install Node.js, dependencies, and start the development server for new team members.

```bash
# 1. Clone repository
git clone <project-repo>
cd <project-directory>

# 2. Install Node.js (if needed)
nvm install  # Reads .nvmrc file

# 3. Install dependencies
npm install

# 4. Start development
npm run start:dev

# 5. Verify setup
# - Application loads at http://localhost:9000
# - No console errors
# - Hot reload works
```

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

### Message with Quick Start Tile

Source: https://github.com/nicolethoen/patternfly-ai-coding/blob/main/patternfly-chatbot.txt

Integrate quick start tiles into messages using the `quickStarts` prop. This allows users to initiate quick starts from a link within the message tile. An `onSelectQuickStart` prop can capture the quick start name on click for custom application behavior.

```tsx
import React from 'react';
import {
  Chatbot,
  Message,
  MessageContent,
  MessageQuickStart
} from '@patternfly/react-chatbot';

const quickStarts: MessageQuickStart[] = [
  {
    title: 'Quick Start 1',
    description: 'This is a description for quick start 1.'
  },
  {
    title: 'Quick Start 2',
    description: 'This is a description for quick start 2.'
  }
];

export const MessageWithQuickStart = () => (
  <Chatbot>
    <Message>
      <MessageContent quickStarts={quickStarts} onSelectQuickStart={(name) => console.log(name)} />
    </Message>
  </Chatbot>
);
```

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

### OpenShift Pipelines QuickStart Configuration

Source: https://github.com/nicolethoen/patternfly-ai-coding/blob/main/patternfly-chatbot.txt

Defines a QuickStart configuration for installing the OpenShift Pipelines Operator, including metadata, prerequisites, and introduction.

```typescript
import userAvatar from './user_avatar.svg';

export const explorePipelinesQuickStart = {
  apiVersion: 'console.openshift.io/v1',
  kind: 'QuickStarts',
  metadata: {
    name: 'explore-pipelines'
  },
  spec: {
    version: 4.7,
    displayName: `Installing the Pipelines Operator`,
    durationMinutes: 10,
    icon: userAvatar,
    description: `Install the OpenShift® Pipelines Operator to build Pipelines using Tekton.`,
    prerequisites: [''],
    introduction: `OpenShift® Pipelines is a cloud-native, continuous integration and continuous delivery (CI/CD) solution based on Kubernetes resources. It uses Tekton building blocks to automate deployments across multiple Kubernetes distributions by abstracting away the underlying implementation details.
* OpenShift Pipelines is a serverless CI/CD system that runs pipelines with all the required dependencies in isolated containers.
* They are designed for decentralized teams that work on a microservice-based architecture.
* They are defined using standard Custom Resource Definitions making them extensible and easy to integrate with the existing Kubernetes tools. This enables you to scale on-demand.
* You can use OpenShift Pipelines to build images with Kubernetes tools such as Source-to-Image (S2I), Buildah, Buildpacks, and Kaniko that are portable across any Kubernetes platform.
* You can use the Developer perspective to create and manage pipelines and view logs in your namespaces.

To start using Pipelines, install the OpenShift® Pipelines Operator on your cluster.`,
    tasks: [
      {
        title: `Installing the OpenShift Pipelines Operator`,
        description: `### To install the OpenShift Pipelines Operator:

`
      }
    ]
  }
};
```

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

### Monitor Sample App Quick Start Configuration

Source: https://github.com/nicolethoen/patternfly-ai-coding/blob/main/patternfly-chatbot.txt

Defines the configuration for the 'monitor-sampleapp' quick start, detailing its version, display name, duration, icon, description, prerequisites, introduction, tasks, conclusion, and next quick start.

```typescript
export const monitorSampleAppQuickStart = {
  apiVersion: 'console.openshift.io/v1',
  kind: 'QuickStarts',
  metadata: {
    name: 'monitor-sampleapp'
  },
  spec: {
    version: 4.7,
    displayName: 'Monitoring your sample application',
    durationMinutes: 10,
    icon: '',
    description: `Now that you’ve created a sample application and added health checks, let’s monitor your application.`,
    prerequisites: [`You completed the "Getting started with a sample" quick start.`],
    introduction: `### This quick start shows you how to monitor your sample application.
You should have previously created the **sample-app** application and **nodejs-sample** deployment via the **Get started with a sample** quick start. If you haven't, you may be able to follow these tasks with any existing deployment.`,
    tasks: [
      {
        title: `Viewing the monitoring details of your sample application`,
        description: `### To view the details of your sample application:
1. Go to the project your sample application was created in.
2. In the **</> Developer** perspective, go to **Topology** view.
3. Click on the **nodejs-sample** deployment to view its details.
4. Click on the **Monitoring** tab in the side panel.
You can see context sensitive metrics and alerts in the **Monitoring** tab.`,
        review: {
          instructions: `#### To verify you can view the monitoring information:
1. Do you see a **Metrics** accordion in the side panel?
2. Do you see a **View monitoring dashboard** link in the **Metrics** accordion?
3. Do you see three charts in the **Metrics** accordion: **CPU Usage**, **Memory Usage** and **Receive Bandwidth**?`,
          failedTaskHelp: `This task isn’t verified yet. Try the task again.`
        },
        summary: {
          success: `You have learned how you can monitor your sample app!`,
          failed: `Try the steps again.`
        }
      },
      {
        title: `Viewing your project monitoring dashboard`,
        description: `### To view the project monitoring dashboard in the context of **nodejs-sample**:
1. Click on the **View monitoring dashboard** link in the side panel.
2. You can change the **Time Range** and **Refresh Interval** of the dashboard.
3. You can change the context of the dashboard as well by clicking on the drop-down list. Select a specific workload or **All Workloads** to view the dashboard in the context of the entire project.`,
        review: {
          instructions: `#### To verify that you are able to view the monitoring dashboard:
Do you see metrics charts in the dashboard?`,
          failedTaskHelp: `This task isn’t verified yet. Try the task again.`
        },
        summary: {
          success: `You have learned how to view the dashboard in the context of your sample app!`,
          failed: `Try the steps again.`
        }
      },
      {
        title: `Viewing custom metrics`,
        description: `### To view custom metrics:
1. Click on the **Metrics** tab of the **Monitoring** page.
2. Click the **Select Query** drop-down list to see the available queries.
3. Click on **Filesystem Usage** from the list to run the query.`,
        review: {
          instructions: `#### Verify you can see the chart associated with the query:
Do you see a chart displayed with filesystem usage for your project?  Note: select **Custom Query** from the dropdown to create and run a custom query utilizing PromQL.
`,
          failedTaskHelp: `This task isn’t verified yet. Try the task again.`
        },
        summary: {
          success: `You have learned how to run a query!`,
          failed: `Try the steps again.`
        }
      }
    ],
    conclusion: `You have learned how to access workload monitoring and metrics!`,

    nextQuickStart: [``]
  }
};
```

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

### Message with Quick Starts

Source: https://github.com/nicolethoen/patternfly-ai-coding/blob/main/patternfly-chatbot.txt

Displays a bot message with associated quick start guides. Quick starts can be displayed in a compact format.

```typescript
import React from 'react';
import Message from '@patternfly/chatbot/dist/dynamic/Message';
import patternflyAvatar from './patternfly_avatar.jpg';
import { explorePipelinesQuickStart } from './explore-pipeline-quickstart.ts';
import { monitorSampleAppQuickStart } from '@patternfly/chatbot/src/Message/QuickStarts/monitor-sampleapp-quickstart.ts';
import { QuickStart } from '@patternfly/chatbot/dist/esm/Message/QuickStarts/types';

export const MessageWithQuickStartExample: React.FunctionComponent = () => (
  <>
    <Message
      name="Bot"
      role="bot"
      avatar={patternflyAvatar}
      content="Follow this quick guide to install the Pipelines Operator."
      quickStarts={{
        quickStart: explorePipelinesQuickStart as QuickStart,
        onSelectQuickStart: (id) => alert(id)
      }}
    />
    <Message
      name="Bot"
      role="bot"
      avatar={patternflyAvatar}
      content="This quick start tile includes prerequisites and a default icon."
      quickStarts={{
        quickStart: monitorSampleAppQuickStart,
        onSelectQuickStart: (id) => alert(id)
      }}
    />
    <Message
      name="Bot"
      role="bot"
      avatar={patternflyAvatar}
      content="This quick start tile is compact"
      quickStarts={{
        quickStart: monitorSampleAppQuickStart,
        onSelectQuickStart: (id) => alert(id)
      }}
      isCompact
    />
  </>
);
```

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

### QuickStarts Tile SCSS Styling

Source: https://github.com/nicolethoen/patternfly-ai-coding/blob/main/patternfly-chatbot.txt

Provides SCSS styles for the PatternFly Chatbot's quick start tiles, including responsive adjustments and dark theme modifications for icons.

```scss
.pf-chatbot__quickstarts-tile {
  max-width: 650px;
  width: 100%;

  @media screen and (max-width: 700px) {
    max-width: 100%;
    min-width: initial;
  }
  // some icons provided to catalog tiles might have no defined height/width. Without this style, in those cases
  // the icons would have a height and width of 0.
  .pf-v6-c-card__header-main {
    .pf-v6-c-icon__content {
      display: contents;
    }
  }
}

.pf-v6-theme-dark {
  .pf-chatbot__quickstarts-tile {
    .pfext-catalog-item-icon__img {
      filter: brightness(1.5) invert(1) hue-rotate(180deg) saturate(4);
    }
  }
}
```

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

### QuickStartTileDescription component

Source: https://github.com/nicolethoen/patternfly-ai-coding/blob/main/patternfly-chatbot.txt

The QuickStartTileDescription component displays a description and optional prerequisites for a quick start guide. It utilizes PatternFly components for UI elements and includes a helper function for pluralization.

```typescript
import * as React from 'react';
import { Button, Flex, pluralize, Popover } from '@patternfly/react-core';
import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';

interface QuickStartTileDescriptionProps {
  /** QuickStart description */
  description: string;
  /** QuickStart prerequisites */
  prerequisites?: string[];
  /** Label for the English word "Prerequisite" */
  prerequisiteWord?: string;
  /** Label for the English word "Prerequisites" */
  prerequisiteWordPlural?: string;
  /** Aria-label for the quick start button */
  quickStartButtonAriaLabel?: string;
}

/** This function is a helper for pluralizing strings stolen from React.
 *
 * @param {number} i The quantity of the string you want to pluralize
 * @param {string} singular The singular version of the string
 * @param {string} plural The change to the string that should occur if the quantity is not equal to 1.
 *                 Defaults to adding an 's'.
 */
export function pluralizeWord(i: number, singular: string, plural?: string) {
  if (!plural) {
    plural = `${singular}s`;
  }
  return `${i === 1 ? singular : plural}`;
}
```

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

### Create a Basic PatternFly Component

Source: https://github.com/nicolethoen/patternfly-ai-coding/blob/main/_autodocs/02-setup-and-configuration.md

This example demonstrates how to create a simple React component using PatternFly's `Page`, `PageSection`, and `Title` components. Ensure PatternFly packages are installed and CSS is imported.

```jsx
import { Page, PageSection, Title } from '@patternfly/react-core';

function App() {
  return (
    <Page>
      <PageSection hasBodyWrapper>
        <Title headingLevel="h1">Welcome to PatternFly</Title>
      </PageSection>
    </Page>
  );
}

```

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

### Install and Build Project

Source: https://github.com/nicolethoen/patternfly-ai-coding/blob/main/patternfly-react-component-groups.txt

Installs NPM dependencies using a frozen lockfile and builds the project. Includes conditional installation based on cache hit.

```yaml
      - run: npm install --frozen-lockfile --legacy-peer-deps
        if: steps.yarn-cache.outputs.cache-hit != 'true'
      - run: npm run build
        name: Build component groups
```

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

### Render Message with QuickStart tile

Source: https://github.com/nicolethoen/patternfly-ai-coding/blob/main/patternfly-chatbot.txt

Renders a Message component with a QuickStart tile and asserts the presence of expected elements.

```javascript
render(
  <Message
    avatar="./img"
    role="user"
    name="User"
    content="Hi"
    quickStarts={{
      quickStart: monitorSampleAppQuickStart,
      onSelectQuickStart: (id) => alert(id)
    }}
  />
);
expect(screen.getByRole('button', { name: 'Monitoring your sample application' })).toBeTruthy();
expect(screen.getByRole('heading', { name: '1 Prerequisite' })).toBeTruthy();
expect(screen.getByRole('button', { name: 'Show prerequisites' })).toBeTruthy();
expect(screen.getByRole('button', { name: 'Start' })).toBeTruthy();
```

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

### Install Project Dependencies

Source: https://github.com/nicolethoen/patternfly-ai-coding/blob/main/_autodocs/02-setup-and-configuration.md

Run this command within your project directory to install all necessary Node.js dependencies defined in package.json. Ensure Node.js and npm are installed and configured.

```bash
npm install
```

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

### Global Setup Script

Source: https://github.com/nicolethoen/patternfly-ai-coding/blob/main/patternfly-react-component-groups.txt

A Node.js script to set the timezone to UTC for global test setup.

```javascript
module.exports = async () => {
  process.env.TZ = 'UTC';
};
```

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

### Install PatternFly

Source: https://github.com/nicolethoen/patternfly-ai-coding/blob/main/_autodocs/07-charts-reference.md

Install the PatternFly package to ensure all necessary components and styles are available.

```bash
npm install @patternfly/patternfly
```

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

### Install Node.js with nvm

Source: https://github.com/nicolethoen/patternfly-ai-coding/blob/main/_autodocs/10-troubleshooting-guide.md

Use Node Version Manager (nvm) to install and switch to a specific Node.js version, such as 18, if needed.

```bash
nvm install 18
nvm use 18
```

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

### Component Usage Example in Documentation

Source: https://github.com/nicolethoen/patternfly-ai-coding/blob/main/patternfly-react-component-groups.txt

A React component example demonstrating how to use the 'MyComponent' with its custom props, as referenced in the Markdown documentation.

```typescript
import React from 'react';

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

export default MyComponentExample;
```

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

### Chatbot Message with Quick Start

Source: https://github.com/nicolethoen/patternfly-ai-coding/blob/main/patternfly-chatbot.txt

A chatbot message that provides a quick start guide or prompt.

```tsx
import { MessageWithQuickStart } from "./MessageWithQuickStart";

export const MessageWithQuickStartExample = () => <MessageWithQuickStart />;
```

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

### Example Component Directory Structure

Source: https://github.com/nicolethoen/patternfly-ai-coding/blob/main/patternfly-react-component-groups.txt

Illustrates the recommended file and directory structure for a new component within the 'src/' folder.

```text
src
|- MyComponent
   |- index.ts
   |- MyComponent.tsx
```

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

### Handle click on QuickStart tile

Source: https://github.com/nicolethoen/patternfly-ai-coding/blob/main/patternfly-chatbot.txt

Tests the click interaction on a QuickStart tile and verifies the callback function is invoked with the correct ID.

```javascript
const spy = jest.fn();
render(
  <Message
    avatar="./img"
    role="user"
    name="User"
    content="Hi"
    quickStarts={{
      quickStart: monitorSampleAppQuickStart,
      onSelectQuickStart: (id) => spy(id)
    }}
  />
);
await userEvent.click(screen.getByRole('button', { name: 'Monitoring your sample application' }));
expect(spy).toHaveBeenCalledTimes(1);
expect(spy).toHaveBeenCalledWith(monitorSampleAppQuickStart.metadata.name);
```

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

### Setup and Build Script Execution

Source: https://github.com/nicolethoen/patternfly-ai-coding/blob/main/patternfly-react-component-groups.txt

Sets up the project environment by caching necessary files and running a setup script. The script execution is conditional on the cache hit status.

```yaml
      - uses: actions/checkout@v4
      - run: |
          if [[ ! -z "${GH_PR_NUM}" ]]; then 
            echo "Checking out PR"
            git fetch origin pull/$GH_PR_NUM/head:tmp
            git checkout tmp
          fi
      - uses: actions/cache@v4
        id: setup-cache
        name: Cache setup
        with:
          path: |
            README.md
            package.json
            .tmplr.yml
            packages/*/package.json
            packages/*/patternfly-docs/content/**
            packages/*/patternfly-docs/generated/**
          key: ${{ runner.os }}-setup-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('package.json', 'packages/module/package.json') }}
      - name: Run build script
        run: ./devSetup.sh
        shell: bash
        if: steps.setup-cache.outputs.cache-hit != 'true'
```

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

### OpenShift QuickStart Configuration: Monitor Sample App

Source: https://github.com/nicolethoen/patternfly-ai-coding/blob/main/patternfly-chatbot.txt

Defines an OpenShift QuickStart configuration for monitoring a sample application. It includes steps for viewing application monitoring details, the project monitoring dashboard, and custom metrics.

```typescript
export const monitorSampleAppQuickStartWithImage = {
  apiVersion: 'console.openshift.io/v1',
  kind: 'QuickStarts',
  metadata: {
    name: 'monitor-sampleapp'
  },
  spec: {
    icon: 'test.png', // this is only difference
    version: 4.7,
    displayName: 'Monitoring your sample application',
    durationMinutes: 10,
    description: `Now that you’ve created a sample application and added health checks, let’s monitor your application.`, 
    prerequisites: [`You completed the "Getting started with a sample" quick start.`],
    introduction: `### This quick start shows you how to monitor your sample application.
You should have previously created the **sample-app** application and **nodejs-sample** deployment via the **Get started with a sample** quick start. If you haven't, you may be able to follow these tasks with any existing deployment.`,
    tasks: [
      {
        title: `Viewing the monitoring details of your sample application`,
        description: `### To view the details of your sample application:
1. Go to the project your sample application was created in.
2. In the **</> Developer** perspective, go to **Topology** view.
3. Click on the **nodejs-sample** deployment to view its details.
4. Click on the **Monitoring** tab in the side panel.
You can see context sensitive metrics and alerts in the **Monitoring** tab.`,
        review: {
          instructions: `#### To verify you can view the monitoring information:
1. Do you see a **Metrics** accordion in the side panel?
2. Do you see a **View monitoring dashboard** link in the **Metrics** accordion?
3. Do you see three charts in the **Metrics** accordion: **CPU Usage**, **Memory Usage** and **Receive Bandwidth**?`,
          failedTaskHelp: `This task isn’t verified yet. Try the task again.`
        },
        summary: {
          success: `You have learned how you can monitor your sample app!`,
          failed: `Try the steps again.`
        }
      },
      {
        title: `Viewing your project monitoring dashboard`,
        description: `### To view the project monitoring dashboard in the context of **nodejs-sample**:
1. Click on the **View monitoring dashboard** link in the side panel.
2. You can change the **Time Range** and **Refresh Interval** of the dashboard.
3. You can change the context of the dashboard as well by clicking on the drop-down list. Select a specific workload or **All Workloads** to view the dashboard in the context of the entire project.`,
        review: {
          instructions: `#### To verify that you are able to view the monitoring dashboard:
Do you see metrics charts in the dashboard?`,
          failedTaskHelp: `This task isn’t verified yet. Try the task again.`
        },
        summary: {
          success: `You have learned how to view the dashboard in the context of your sample app!`,
          failed: `Try the steps again.`
        }
      },
      {
        title: `Viewing custom metrics`,
        description: `### To view custom metrics:
1. Click on the **Metrics** tab of the **Monitoring** page.
2. Click the **Select Query** drop-down list to see the available queries.
3. Click on **Filesystem Usage** from the list to run the query.`,
        review: {
          instructions: `#### Verify you can see the chart associated with the query:
Do you see a chart displayed with filesystem usage for your project?  Note: select **Custom Query** from the dropdown to create and run a custom query utilizing PromQL.
`,
          failedTaskHelp: `This task isn’t verified yet. Try the task again.`
        },
        summary: {
          success: `You have learned how to run a query!`,
          failed: `Try the steps again.`
        }
      }
    ],
    conclusion: `You have learned how to access workload monitoring and metrics!`,

    nextQuickStart: [``]
  }
};
```

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

### Promote Workflow Setup

Source: https://github.com/nicolethoen/patternfly-ai-coding/blob/main/patternfly-react-component-groups.txt

Sets up the Node.js environment for the promote workflow, including registry URL for publishing.

```yaml
      - uses: actions/setup-node@v4
        with:
          node-version: '20.x'
          registry-url: 'https://registry.npmjs.org'
```

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

### Start Development Server

Source: https://github.com/nicolethoen/patternfly-ai-coding/blob/main/_autodocs/02-setup-and-configuration.md

This command starts the development server, enabling hot module replacement and providing a local environment to view your application. Access the application at http://localhost:9000.

```bash
npm run start:dev
```

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

### Render Message with QuickStart tile with image

Source: https://github.com/nicolethoen/patternfly-ai-coding/blob/main/patternfly-chatbot.txt

Renders a Message component with a QuickStart tile that includes an image and verifies the image source.

```javascript
const spy = jest.fn();
render(
  <Message
    avatar="./img"
    role="user"
    name="User"
    content="Hi"
    quickStarts={{
      quickStart: monitorSampleAppQuickStartWithImage,
      onSelectQuickStart: (id) => spy(id)
    }}
  />
);
expect(screen.getAllByRole('img')[1]).toHaveAttribute('src', 'test.png');
```

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

### Verify Chatbot Package Installation

Source: https://github.com/nicolethoen/patternfly-ai-coding/blob/main/_autodocs/10-troubleshooting-guide.md

Check if the `@patternfly/chatbot` package is installed. Install it using npm if it's missing.

```bash
npm list @patternfly/chatbot
npm install @patternfly/chatbot  # If missing
```

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

### Verify Victory.js Installation

Source: https://github.com/nicolethoen/patternfly-ai-coding/blob/main/_autodocs/10-troubleshooting-guide.md

Check if the `victory` package is installed, which is required for some chart components in PatternFly. Install it if missing.

```bash
npm list victory
npm install victory  # If missing
```

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

### Verify Node.js and npm Installation

Source: https://github.com/nicolethoen/patternfly-ai-coding/blob/main/_autodocs/10-troubleshooting-guide.md

Check if Node.js and npm are installed and accessible by running version commands. If not installed, download from nodejs.org and ensure the LTS version (18+) is used. Restart your terminal after installation.

```bash
node --version
npm --version
```

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

### Node.js Setup

Source: https://github.com/nicolethoen/patternfly-ai-coding/blob/main/patternfly-chatbot.txt

Sets up the Node.js environment for the build and test processes. Ensures a specific Node.js version is used.

```yaml
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
```

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

### Install npm Dependencies

Source: https://github.com/nicolethoen/patternfly-ai-coding/blob/main/patternfly-react-component-groups.txt

Installs npm dependencies using 'npm install --frozen-lockfile'. This command is executed only if the npm cache was not hit.

```yaml
run: npm install --frozen-lockfile
        if: steps.npm-cache.outputs.cache-hit != 'true'
```

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

### Testing Setup with Jest and Mocking

Source: https://github.com/nicolethoen/patternfly-ai-coding/blob/main/patternfly-chatbot.txt

Sets up the testing environment using Jest, including polyfills, DOM mocking, and user authentication mocking.

```javascript
/* eslint-disable no-unused-vars */
import 'whatwg-fetch';
import 'babel-polyfill';
import '@testing-library/jest-dom';

global.SVGPathElement = function () {};

global.MutationObserver = class {
  constructor(callback) {}
  disconnect() {}
  observe(element, initObject) {}
};

global.window.insights = {
  ...(window.insights || {}),
  chrome: {
    ...((window.insights && window.insights.chrome) || {}),
    auth: {
      ...((window.insights && window.insights.chrome && window.insights.chrome) || {}),
      getUser: () =>
        new Promise((res) =>
          res({
            identity: {
              // eslint-disable-next-line camelcase
              account_number: '0',
              type: 'User',
              user: {
                // eslint-disable-next-line camelcase
                is_org_admin: true,
              },
            },
          })
        ),
    },
    getUserPermissions: () => new Promise((res) => res([])),
    isBeta: () => false,
  },
};
jest.mock('react', () => ({
  ...jest.requireActual('react'),
  useLayoutEffect: jest.requireActual('react').useEffect,
}));
Element.prototype.scrollTo = () => {};
```

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

### Avoid sudo for npm install

Source: https://github.com/nicolethoen/patternfly-ai-coding/blob/main/_autodocs/10-troubleshooting-guide.md

Never use `sudo` with `npm install` to prevent permission issues. Always use the correct command for installing packages.

```bash
# ❌ Wrong
sudo npm install

# ✅ Correct
npm install
```

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

### Component Usage File Example

Source: https://github.com/nicolethoen/patternfly-ai-coding/blob/main/patternfly-chatbot.txt

A React component example demonstrating how to use the 'MyComponent'. Ensure necessary imports are included in both the usage file and the parent markdown file.

```typescript
import React from 'react';

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

export default BatteryLowExample;
```

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

### Setup Node.js and Cache NPM Dependencies

Source: https://github.com/nicolethoen/patternfly-ai-coding/blob/main/patternfly-react-component-groups.txt

Sets up the Node.js environment and caches NPM dependencies to speed up build times. Ensures consistent dependency versions.

```yaml
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
      - uses: actions/cache@v4
        id: npm-cache
        name: Load npm deps from cache
        with:
          path: '**/node_modules'
          key: ${{ runner.os }}-npm-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('package-lock.json') }}
```

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

### Verify Chatbot Installation

Source: https://github.com/nicolethoen/patternfly-ai-coding/blob/main/_autodocs/08-chatbot-reference.md

Check if the @patternfly/chatbot package is installed in your project.

```bash
npm list @patternfly/chatbot
```

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

### Install PatternFly React Charts Dependencies (ECharts)

Source: https://github.com/nicolethoen/patternfly-ai-coding/blob/main/_autodocs/02-setup-and-configuration.md

Install the alternative ECharts-based PatternFly React charts and the ECharts library. Ensure the base PatternFly CSS is also installed.

```bash
# For ECharts-based charts (alternative)
npm install @patternfly/react-charts echarts

# Required CSS
npm install @patternfly/patternfly
```

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

### QuickStartTile Component Implementation

Source: https://github.com/nicolethoen/patternfly-ai-coding/blob/main/patternfly-chatbot.txt

This is the main implementation of the QuickStartTile component, handling its rendering, props, and event logic. It uses various PatternFly components to display quick start information.

```typescript
import * as React from 'react';
import RocketIcon from '@patternfly/react-icons/dist/js/icons/rocket-icon';
import OutlinedBookmarkIcon from '@patternfly/react-icons/dist/js/icons/outlined-bookmark-icon';
import {
  Card,
  CardBody,
  CardHeader,
  CardFooter,
  CardTitle,
  Icon,
  Button,
  Flex,
  Stack,
  Label,
  pluralize
} from '@patternfly/react-core';
import OutlinedClockIcon from '@patternfly/react-icons/dist/js/icons/outlined-clock-icon';
import QuickStartTileHeader from './QuickStartTileHeader';
import QuickStartTileDescription from './QuickStartTileDescription';
import { QuickStart, QuickstartAction } from './types';
import FallbackImg from './FallbackImg';

export const camelize = (str: string) =>
  str.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, function (match, index) {
    if (+match === 0) {
      return '';
    } // or if (/\s+\u0077/ .test(match)) for white spaces
    return index === 0 ? match.toLowerCase() : match.toUpperCase();
  });

export interface QuickStartTileProps {
  /** ClassName applied to the card */
  className?: string;
  /** The quickstart object triggered by this tile */
  quickStart: QuickStart;
  /** Event handler attached to the tile */
  onClick?: () => void;
  /** Action config for button rendered next to title */
  action?: QuickstartAction;
  /** Callback that returns active quick start value when clicked */
  onSelectQuickStart: (id?: string) => void;
  /** Label for the English word "minute". */
  minuteWord?: string;
  /** Label for the English word "minutes". */
  minuteWordPlural?: string;
  /** Label for the English word "Prerequisite" */
  prerequisiteWord?: string;
  /** Label for the English word "Prerequisites" */
  prerequisiteWordPlural?: string;
  /** Aria-label for the quick start description button */
  quickStartButtonAriaLabel?: string;
  /** Sets the tile to compact styling */
  isCompact?: boolean;
}

const QuickStartTile: React.FC<QuickStartTileProps> = ({
  className,
  quickStart,
  onClick,
  onSelectQuickStart,
  minuteWord = 'minute',
  minuteWordPlural = 'minutes',
  prerequisiteWord,
  prerequisiteWordPlural,
  quickStartButtonAriaLabel,
  action,
  isCompact
}) => {
  const {
    metadata: { name: id },
    spec: { icon, displayName, description, durationMinutes, prerequisites, link, type }
  } = quickStart;

  let quickStartIcon: React.ReactNode;
  if (typeof icon === 'object') {
    quickStartIcon = <Icon size="2xl">{icon}</Icon>;
  } else {
    quickStartIcon = (
      <Icon size="2xl">
        <FallbackImg src={icon as string} alt="" className="pfext-catalog-item-icon__img" fallback={<RocketIcon />} />
      </Icon>
    );
  }

  const onSelect = () => {
    if (!link) {
      onSelectQuickStart(id);
    } else {
      window.open(link.href, '_blank', 'noopener,noreferrer');
    }
    onClick && onClick();
  };

  const ActionIcon = action?.icon || OutlinedBookmarkIcon;
  const additionalAction = action ? (
    <Button
      aria-label={action['aria-label']}
      icon={<ActionIcon />}
      variant="plain"
      onClick={action.onClick}
      {...action.buttonProps}
    />
  ) : undefined;

  return (
    <Card
      className={`pf-chatbot__quickstarts-tile ${className ? className : ''}`}
      id={`${id}-chatbot-qs-tile`}
      style={{ height: '100%' }}
      data-testid={`chatbot-qs-card-${camelize(displayName)}`}
      isCompact={isCompact}
    >
      <CardHeader
        {...(action && { actions: { actions: additionalAction } })}
      >
        {quickStartIcon}
      </CardHeader>
      <CardTitle>
        <QuickStartTileHeader name={displayName} onSelect={onSelect} quickStartId={id} />
      </CardTitle>
      <CardBody>
        <Stack hasGutter>
          <Flex spaceItems={{ default: 'spaceItemsSm' }}>
            {type && <Label color={type.color}>{type.text}</Label>}
            {durationMinutes && (
              <Label variant="outline" data-test="duration" icon={<OutlinedClockIcon />}>
                {pluralize(durationMinutes, minuteWord, minuteWordPlural)}
              </Label>
            )}
          </Flex>
          <QuickStartTileDescription
            description={description}
            prerequisites={prerequisites}
            prerequisiteWord={prerequisiteWord}
            prerequisiteWordPlural={prerequisiteWordPlural}
            quickStartButtonAriaLabel={quickStartButtonAriaLabel}
          />
        </Stack>
      </CardBody>
      <CardFooter>
        <Button variant="link" isInline onClick={onSelect}>
          <span className="pf-v6-c-button__text">Start</span>
        </Button>
      </CardFooter>
    </Card>
  );
};

export default QuickStartTile;

```

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

### Install PatternFly React Charts Dependencies (Victory.js)

Source: https://github.com/nicolethoen/patternfly-ai-coding/blob/main/_autodocs/02-setup-and-configuration.md

Install the recommended Victory.js-based PatternFly React charts and the Victory.js library itself. Ensure the base PatternFly CSS is also installed.

```bash
# For Victory.js-based charts (recommended)
npm install @patternfly/react-charts victory

# Required CSS
npm install @patternfly/patternfly
```

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

### ShortcutGrid Example

Source: https://github.com/nicolethoen/patternfly-ai-coding/blob/main/patternfly-react-component-groups.txt

Demonstrates the usage of the Shortcut component within a ShortcutGrid.

```tsx
import React from 'react';
import Shortcut from '@patternfly/react-component-groups/dist/dynamic/Shortcut';

export const BasicExample: React.FunctionComponent = () => <Shortcut description='Shortcut description' keys={[ 'cmd', 'shift' ]} click/>;
```

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

### Responsive Actions Example

Source: https://github.com/nicolethoen/patternfly-ai-coding/blob/main/patternfly-react-component-groups.txt

Demonstrates basic responsive actions with persistent, pinned, overflow, and disabled actions. Uses the 'lg' breakpoint.

```tsx
import React from 'react';
import { ResponsiveAction } from '@patternfly/react-component-groups/dist/dynamic/ResponsiveAction';
import { ResponsiveActions } from '@patternfly/react-component-groups/dist/dynamic/ResponsiveActions';

export const TagCountDisabledExample: React.FunctionComponent = () => (
  <ResponsiveActions breakpoint="lg">
    <ResponsiveAction isPersistent>
        Persistent Action
    </ResponsiveAction>
    <ResponsiveAction isPinned variant='secondary'>
        Pinned Action
    </ResponsiveAction>
    <ResponsiveAction>
        Overflow Action
    </ResponsiveAction>
    <ResponsiveAction isDisabled>
        Disabled action
    </ResponsiveAction>
  </ResponsiveActions>
);
```

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

### Markdown File Example for Component Documentation

Source: https://github.com/nicolethoen/patternfly-ai-coding/blob/main/patternfly-chatbot.txt

Example of a markdown file used for documenting a component within the PatternFly documentation system. It specifies component usage and links to usage examples.

```yaml
---
section: extensions
subsection: ChatBot
id: MyComponent
propComponents: ['MyComponent']
---

import MyComponent from "@patternfly/chatbot/dist/dynamic/MyComponent";

## Component usage

MyComponent has been created to demo contributing to this repository.

### MyComponent component example label

```js file="./MyComponentExample.tsx"```

```

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

### Form and FormGroup Example

Source: https://github.com/nicolethoen/patternfly-ai-coding/blob/main/_autodocs/05-component-reference-core.md

Demonstrates how to use Form and FormGroup to structure a form with labeled input fields and action buttons. Ensure necessary state management for input values.

```jsx
import { Form, FormGroup, TextInput, Button, ActionGroup } from '@patternfly/react-core';

<Form onSubmit={handleSubmit}>
  <FormGroup label="Username" fieldId="username" isRequired>
    <TextInput
      id="username"
      value={username}
      onChange={(e) => setUsername(e.target.value)}
      required
    />
  </FormGroup>

  <FormGroup label="Email" fieldId="email">
    <TextInput
      id="email"
      type="email"
      value={email}
      onChange={(e) => setEmail(e.target.value)}
    />
  </FormGroup>

  <ActionGroup>
    <Button variant="primary" type="submit">
      Submit
    </Button>
    <Button variant="secondary" onClick={handleCancel}>
      Cancel
    </Button>
  </ActionGroup>
</Form>
```

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

### Install Missing Package

Source: https://github.com/nicolethoen/patternfly-ai-coding/blob/main/_autodocs/10-troubleshooting-guide.md

Install a specific missing package, such as `@patternfly/react-core`, using npm.

```bash
npm install @patternfly/react-core
```

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

### Complete Chart Implementation

Source: https://github.com/nicolethoen/patternfly-ai-coding/blob/main/_autodocs/07-charts-reference.md

This example demonstrates a complete chart implementation pattern, including data fetching with loading and error states, responsive sizing using a ref, and conditional rendering for empty states.

```jsx
import { useState, useEffect, useMemo, useRef } from 'react';
import { ChartLine } from '@patternfly/react-charts/victory';
import { Card, CardTitle, CardBody, Spinner, EmptyState, EmptyStateHeader } from '@patternfly/react-core';

const DataChart = () => {
  const containerRef = useRef(null);
  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);
  const [rawData, setRawData] = useState([]);

  // Fetch data
  useEffect(() => {
    const fetchData = async () => {
      setIsLoading(true);
      try {
        // const response = await fetch('/api/metrics');
        // const data = await response.json();
        // setRawData(data);
        
        // Mock data
        setRawData([
          { date: 'Jan', value: 100 },
          { date: 'Feb', value: 120 },
          { date: 'Mar', value: 110 }
        ]);
      } catch (err) {
        setError(err.message);
      } finally {
        setIsLoading(false);
      }
    };
    
    fetchData();
  }, []);

  // Handle responsive sizing
  useEffect(() => {
    const updateDimensions = () => {
      if (containerRef.current) {
        const { width } = containerRef.current.getBoundingClientRect();
        setDimensions({ width, height: 300 });
      }
    };

    updateDimensions();
    window.addEventListener('resize', updateDimensions);
    return () => window.removeEventListener('resize', updateDimensions);
  }, []);

  // Process data for chart
  const chartData = useMemo(() => {
    return rawData.map(item => ({
      x: item.date,
      y: item.value
    }));
  }, [rawData]);

  // Loading state
  if (isLoading) {
    return (
      <Card>
        <CardBody>
          <Spinner />
        </CardBody>
      </Card>
    );
  }

  // Error state
  if (error) {
    return (
      <Card>
        <CardBody>
          <EmptyState>
            <EmptyStateHeader titleText="Error loading chart" />
          </EmptyState>
        </CardBody>
      </Card>
    );
  }

  // Empty state
  if (!chartData || chartData.length === 0) {
    return (
      <Card>
        <CardBody>
          <EmptyState>
            <EmptyStateHeader titleText="No data available" />
          </EmptyState>
        </CardBody>
      </Card>
    );
  }

  // Success state
  return (
    <Card>
      <CardTitle>Metrics Over Time</CardTitle>
      <CardBody ref={containerRef}>
        {dimensions.width > 0 && (
          <ChartLine
            data={chartData}
            width={dimensions.width}
            height={dimensions.height}
            colorScale={['var(--pf-t--chart--color--blue--300)']}
            ariaTitle="Metrics chart"
            ariaDesc="Line chart showing metrics over time"
            tabIndex={0}
            role="img"
          />
        )}
      </CardBody>
    </Card>
  );
};

```

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

### Verify Package Installation

Source: https://github.com/nicolethoen/patternfly-ai-coding/blob/main/_autodocs/10-troubleshooting-guide.md

Check if a specific package, like `@patternfly/react-core`, is installed in your project.

```bash
npm list @patternfly/react-core
```

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

### QuickStartTileDescription Component

Source: https://github.com/nicolethoen/patternfly-ai-coding/blob/main/patternfly-chatbot.txt

Renders a description for a quick start tile, including optional prerequisites displayed in a popover. It uses PatternFly's Flex, Button, and Popover components.

```typescript
import * as React from 'react';
import {
  Button,
  Flex,
  Popover,
  QuickStartTileDescriptionProps,
} from '@patternfly/react-core';
import { pluralize, pluralizeWord } from '@patternfly/react-core/dist/esm/helpers';
import { InfoCircleIcon } from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';

const QuickStartTileDescription: React.FC<QuickStartTileDescriptionProps> = ({
  description,
  prerequisites,
  prerequisiteWord = 'Prerequisite',
  prerequisiteWordPlural = 'Prerequisites',
  quickStartButtonAriaLabel = 'Show prerequisites',
}) => {
  const prereqs = prerequisites?.filter((p) => p);
  const buttonRef = React.useRef<HTMLButtonElement>(null);
  const pluralizedPrereq = pluralizeWord(prereqs?.length || 0, prerequisiteWord, prerequisiteWordPlural);
  return (
    <>
      {description}
      {prereqs && prereqs.length > 0 && (
        <Flex spaceItems={{ default: 'spaceItemsSm' }}>
          <h5>{pluralize(prereqs.length, prerequisiteWord, prerequisiteWordPlural)}</h5>
          <Button
            variant="link"
            isInline
            data-testid="qs-card-prereqs"
            ref={buttonRef}
            onClick={(e) => {
              e.preventDefault();
              e.stopPropagation();
            }}
            aria-label={quickStartButtonAriaLabel}
          >
            <InfoCircleIcon />
          </Button>
          <Popover
            aria-label={pluralizedPrereq}
            headerContent={pluralizedPrereq}
            triggerRef={buttonRef}
            bodyContent={
              <div>
                <ul aria-label={pluralizedPrereq}>
                  {prereqs.map((prerequisite, index) => (
                    // eslint-disable-next-line react/no-array-index-key
                    <li key={index}>{prerequisite}</li>
                  ))}
                </ul>
              </div>
            }
          />
        </Flex>
      )}
    </>
  );
};
export default QuickStartTileDescription;

```

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

### Test Setup Imports

Source: https://github.com/nicolethoen/patternfly-ai-coding/blob/main/patternfly-react-component-groups.txt

Imports necessary polyfills and testing libraries for component tests.

```javascript
import 'whatwg-fetch';
import 'babel-polyfill';
import '@testing-library/jest-dom';
```

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

### Install Chrome for Puppeteer

Source: https://github.com/nicolethoen/patternfly-ai-coding/blob/main/patternfly-chatbot.txt

Installs a specific version of Chrome required by Puppeteer for accessibility testing.

```yaml
      - name: Install Chrome for Puppeteer
        run: npx puppeteer browsers install chrome
```

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

### Skeleton Table Example

Source: https://github.com/nicolethoen/patternfly-ai-coding/blob/main/patternfly-react-component-groups.txt

A basic example of a SkeletonTable component with specified row count and columns.

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

export const SkeletonTableExample: React.FC = () => <SkeletonTable rowsCount={10} columns={[ 'First', 'Second' ]} />
```

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

### Cypress E2E Testing Setup

Source: https://github.com/nicolethoen/patternfly-ai-coding/blob/main/patternfly-chatbot.txt

Basic setup file for Cypress end-to-end testing. It imports custom commands defined in './commands'.

```typescript
// ***********************************************************
// This example support/e2e.ts is processed and
// loaded automatically before your test files.
//
// This is a great place to put global configuration and
// behavior that modifies Cypress.
//
// You can change the location of this file or turn off
// automatically serving support files with the
// 'supportFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/configuration
// ***********************************************************

// Import commands.js using ES2015 syntax:
import './commands'

// Alternatively you can use CommonJS syntax:
// require('./commands')

```

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

### Release Workflow Setup and Caching

Source: https://github.com/nicolethoen/patternfly-ai-coding/blob/main/patternfly-react-component-groups.txt

Sets up Node.js, caches NPM dependencies, and caches build artifacts for the release workflow. Ensures efficient and repeatable builds.

```yaml
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
      - uses: actions/cache@v4
        id: npm-cache
        name: Cache npm deps
        with:
          path: |
           node_modules
           **/node_modules
           ~/.cache/Cypress
          key: ${{ runner.os }}-yarn-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('package-lock.json') }}
      - run: npm install --frozen-lockfile
        if: steps.npm-cache.outputs.cache-hit != 'true'
      - uses: actions/cache@v4
        id: dist
        name: Cache dist
        with:
          path: |
            packages/*/dist
            packages/react-styles/css
          key: ${{ runner.os }}-dist-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('package-lock.json', 'package.json', 'packages/*/*', '!packages/*/dist', '!packages/*/node_modules') }}
```

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

### Install PatternFly Chatbot Dependencies

Source: https://github.com/nicolethoen/patternfly-ai-coding/blob/main/_autodocs/02-setup-and-configuration.md

Install the PatternFly chatbot component for integrating chat functionalities into your application.

```bash
npm install @patternfly/chatbot
```

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

### Maintenance Example

Source: https://github.com/nicolethoen/patternfly-ai-coding/blob/main/patternfly-react-component-groups.txt

Basic example of the Maintenance component. This snippet shows the default rendering for maintenance notifications.

```tsx
import React from 'react';
import { Maintenance } from '@patternfly/react-component-groups';

export const MaintenanceExample = () => (
  <Maintenance />
);
```

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

### Log Snippet Example

Source: https://github.com/nicolethoen/patternfly-ai-coding/blob/main/patternfly-react-component-groups.txt

Example of the LogSnippet component. This snippet demonstrates how to display formatted log entries.

```tsx
import React from 'react';
import { LogSnippet } from '@patternfly/react-component-groups';

export const LogSnippetExample = () => (
  <LogSnippet />
);
```

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

### PatternFly Card Layout Example

Source: https://github.com/nicolethoen/patternfly-ai-coding/blob/main/_autodocs/04-styling-standards.md

Shows how to implement responsive card layouts using PatternFly's Grid and GridItem components.

```jsx
<Grid hasGutter>
  <GridItem span={12} spanMd={6} spanLg={4}>
    <Card>
      <CardTitle>Card Title</CardTitle>
      <CardBody>Card content</CardBody>
    </Card>
  </GridItem>
</Grid>
```

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

### Close Button Example

Source: https://github.com/nicolethoen/patternfly-ai-coding/blob/main/patternfly-react-component-groups.txt

A simple example of the CloseButton component. This snippet demonstrates its basic rendering and functionality.

```tsx
import React from 'react';
import { CloseButton } from '@patternfly/react-component-groups';

export const CloseButtonExample = () => (
  <CloseButton />
);
```