### Install and Start Locally

Source: https://github.com/patternfly/patternfly-react/blob/main/packages/react-charts/README.md

Installs all project dependencies, builds the project, and starts the local development server.

```sh
yarn install && yarn start
```

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

### Start Development Workspace

Source: https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/CONTRIBUTING.md

Commands to install dependencies and start the local development server.

```bash
# Start up the workspace locally on port 8002
 yarn install && yarn start
```

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

### Initialize and Build Project

Source: https://github.com/patternfly/patternfly-react/blob/main/CONTRIBUTING.md

Commands to install dependencies, build the project, run tests, and start the development server.

```sh
# Install dependencies
yarn install

# Build the project
yarn build

# Run tests to verify setup
yarn test

# Start development server (optional)
yarn start
```

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

### Install @patternfly/react-code-editor

Source: https://github.com/patternfly/patternfly-react/blob/main/packages/react-code-editor/README.md

Install the package using yarn or npm.

```sh
yarn add @patternfly/react-code-editor
```

```sh
npm install @patternfly/react-code-editor
```

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

### Promotion script output example

Source: https://github.com/patternfly/patternfly-react/wiki/Releasing

Example of the output generated by the promotion script indicating the package version transition.

```sh
Promoting @patternfly/react-catalog-view-extension@1.3.14 to latest from 1.2.5
npm dist-tag add @patternfly/react-catalog-view-extension@1.3.14 latest
...
```

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

### Install and Build PatternFly React

Source: https://github.com/patternfly/patternfly-react/wiki/Getting-Started-as-a-Contributor

Run this command to install project dependencies and build the entire project.

```sh
yarn install && yarn build
```

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

### Install @patternfly/react-charts with NPM

Source: https://github.com/patternfly/patternfly-react/blob/main/packages/react-charts/README.md

Installs the @patternfly/react-charts package and its peer dependency 'victory' using NPM.

```sh
npm install @patternfly/react-charts --save
npm install victory --save
```

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

### Application Launcher Menu Example

Source: https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/CustomMenus/ApplicationLauncher.md

This example showcases how to build an application launcher using the new dropdown component, which is built off of the menu component. It utilizes various menu components like MenuToggle, MenuSearch, and DropdownItem.

```typescript
import { cloneElement, Fragment, useRef, useState } from 'react';

import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
import brandImg from '../assets/PF-IconLogo.svg';

import {
  ApplicationLauncher,
  ApplicationLauncherGroup,
  ApplicationLauncherItem,
  ApplicationLauncherSeparator,
  ApplicationLauncherToggle,
} from '@patternfly/react-core';

export const ApplicationLauncherDemo = () => {
  const [isOpen, setIsOpen] = useState(false);
  const onToggleClick = () => {
    setIsOpen(!isOpen);
  };

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

  const ref = useRef<HTMLDivElement>();

  const menuItems = (
    <Fragment>
      <ApplicationLauncherItem onClick={onSelect} href="#" >Application 1</ApplicationLauncherItem>
      <ApplicationLauncherItem onClick={onSelect} href="#" >Application 2</ApplicationLauncherItem>
      <ApplicationLauncherItem onClick={onSelect} href="#" >Application 3</ApplicationLauncherItem>
      <ApplicationLauncherItem onClick={onSelect} href="#" >Application 4</ApplicationLauncherItem>
    </Fragment>
  );

  const menuItems2 = (
    <Fragment>
      <ApplicationLauncherItem onClick={onSelect} href="#" >Application 5</ApplicationLauncherItem>
      <ApplicationLauncherItem onClick={onSelect} href="#" >Application 6</ApplicationLauncherItem>
    </Fragment>
  );

  return (
    <ApplicationLauncher
      onSelect={onSelect}
      isOpen={isOpen}
      toggle={<ApplicationLauncherToggle onClick={onToggleClick} aria-label="Application launcher" />}
      id="application-launcher-demo"
    >
      <ApplicationLauncherGroup aria-label="Application launcher group 1">
        {menuItems}
      </ApplicationLauncherGroup>
      <ApplicationLauncherSeparator />
      <ApplicationLauncherGroup aria-label="Application launcher group 2">
        {menuItems2}
      </ApplicationLauncherGroup>
    </ApplicationLauncher>
  );
};

```

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

### Basic Progress stepper - PatternFly React

Source: https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/ProgressStepperDemo.md

This is a basic example of the progress stepper component. It shows how to render a series of steps to indicate progress. No specific setup is required beyond importing the component.

```typescript
import { useState } from 'react';
import accessibilityStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';

// Assuming ProgressStepper and ProgressStep components are imported from '@patternfly/react-core'

const ProgressStepperBasic = () => {
  const [activeStep, setActiveStep] = useState(1);

  const steps = [
    { id: 1, name: 'Step 1', description: 'First step description' },
    { id: 2, name: 'Step 2', description: 'Second step description' },
    { id: 3, name: 'Step 3', description: 'Third step description' },
    { id: 4, name: 'Step 4', description: 'Fourth step description' }
  ];

  return (
    <ProgressStepper aria-label="Progress stepper basic example" initialWidth="100%">
      {steps.map((step) => (
        <ProgressStep
          key={step.id}
          id={`step-${step.id}`}
          name={step.name}
          description={step.description}
          isCurrent={step.id === activeStep}
          isVisited={step.id < activeStep}
        />
      ))}
    </ProgressStepper>
  );
};

export default ProgressStepperBasic;

```

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

### Skeleton default example

Source: https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Skeleton/examples/Skeleton.md

This is a basic example of the Skeleton component. It renders a default-sized placeholder.

```ts
import React from 'react';
import { Skeleton } from '@patternfly/react-core';

export const SkeletonDefault: React.FunctionComponent = () => (
  <Skeleton />
);

```

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

### Badge - Read example

Source: https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Badge/examples/Badge.md

Displays a badge in its default 'read' state. No specific setup is required beyond importing the component.

```typescript
import React from 'react';
import { Badge } from '@patternfly/react-core';

export const BadgeRead: React.FunctionComponent = () => (
  <Badge isRead>1</Badge>
);
```

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

### Install @patternfly/react-charts with Yarn

Source: https://github.com/patternfly/patternfly-react/blob/main/packages/react-charts/README.md

Installs the @patternfly/react-charts package and its peer dependency 'victory' using Yarn.

```sh
yarn add @patternfly/react-charts
yarn add victory
```

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

### Basic Back to top example

Source: https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/BackToTop/examples/BackToTop.md

This example demonstrates the basic implementation of the Back to top component. The component is only visible after the user scrolls 400px down the page.

```typescript
import './BackToTop.css'

```

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

### Install PatternFly React Core with Yarn

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

Use this command to install the core PatternFly React library using Yarn. This is an alternative to npm for managing project dependencies.

```bash
yarn add @patternfly/react-core
```

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

### Install eslint-plugin-patternfly-react

Source: https://github.com/patternfly/patternfly-react/blob/main/packages/eslint-plugin-patternfly-react/README.md

Install the package as a development dependency using yarn or npm.

```sh
yarn add -D eslint-plugin-patternfly-react
```

```sh
npm install eslint-plugin-patternfly-react --save-dev
```

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

### Primary-detail full page example

Source: https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/PrimaryDetail.md

This snippet demonstrates a full-page implementation of the Primary-detail pattern. It requires no specific setup beyond standard React component rendering.

```typescript

```

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

### All patterns

Source: https://github.com/patternfly/patternfly-react/blob/main/packages/react-charts/src/victory/components/Patterns/examples/patterns.md

Comprehensive example showing all available patterns.

```ts
```ts file = "PatternsAll.tsx"

```
```

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

### Resizable at start

Source: https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Drawer/examples/Drawer.md

A resizable drawer with the panel positioned at the start.

```TypeScript
import React from 'react';
import {
  Drawer,
  DrawerContent,
  DrawerContentBody,
  DrawerPanel,
  DrawerPanelBody,
  DrawerHead,
  DrawerActions,
  DrawerCloseButton,
} from '@patternfly/react-core';

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

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

  return (
    <Drawer isExpanded={isOpen} position="left" isResizable>
      <DrawerContent>
        <DrawerContentBody>Drawer content</DrawerContentBody>
      </DrawerContent>
      <DrawerPanel>
        <DrawerHead>
          <DrawerActions>
            <DrawerCloseButton id="drawer-close-button" onClose={onClose} />
          </DrawerActions>
        </DrawerHead>
        <DrawerPanelBody>Drawer panel content</DrawerPanelBody>
      </DrawerPanel>
    </Drawer>
  );
};

```

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

### Install PatternFly React Core with npm

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

Use this command to install the core PatternFly React library using npm. This is the first step to integrating PatternFly components into your React project.

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

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

### Date and time picker example

Source: https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/DateTimePicker.md

This example demonstrates how to compose a simple DateTimePicker using CalendarMonth and Dropdown components. The input is read-only, and time selection is limited to predefined options.

```typescript
import { useState } from 'react';
import OutlinedCalendarAltIcon from '@patternfly/react-icons/dist/esm/icons/outlined-calendar-alt-icon';
import OutlinedClockIcon from '@patternfly/react-icons/dist/esm/icons/outlined-clock-icon';

const DateTimePicker = () => {
  const [selectedDate, setSelectedDate] = useState<Date | null>(null);
  const [selectedTime, setSelectedTime] = useState<string>('');

  const handleDateChange = (date: Date | null) => {
    setSelectedDate(date);
  };

  const handleTimeChange = (time: string) => {
    setSelectedTime(time);
  };

  const timeOptions = [
    { value: '10:00 AM', label: '10:00 AM' },
    { value: '11:00 AM', label: '11:00 AM' },
    { value: '12:00 PM', label: '12:00 PM' },
    { value: '1:00 PM', label: '1:00 PM' },
    { value: '2:00 PM', label: '2:00 PM' },
    { value: '3:00 PM', label: '3:00 PM' },
    { value: '4:00 PM', label: '4:00 PM' },
    { value: '5:00 PM', label: '5:00 PM' }
  ];

  return (
    <DateTimePicker
      datePickerProps={{
        onChange: handleDateChange,
        value: selectedDate,
        placeholder: 'Select a date',
        popoverProps: {
          appendTo: 'parent'
        },
        validators: {
          isRequired: true
        }
      }}
      timePickerProps={{
        onChange: handleTimeChange,
        placeholder: 'Select a time',
        options: timeOptions,
        popoverProps: {
          appendTo: 'parent'
        },
        validators: {
          isRequired: true
        }
      }}
      icon={<OutlinedCalendarAltIcon />}
      timeIcon={<OutlinedClockIcon />}
    />
  );
};

export default DateTimePicker;

```

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

### Basic

Source: https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Drawer/examples/Drawer.md

A basic drawer example.

```TypeScript
import React from 'react';
import {
  Drawer,
  DrawerContent,
  DrawerContentBody,
  DrawerPanel,
  DrawerPanelBody,
  DrawerHead,
  DrawerActions,
  DrawerCloseButton,
} from '@patternfly/react-core';

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

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

  return (
    <Drawer isExpanded={isOpen}>
      <DrawerContent>
        <DrawerContentBody>Drawer content</DrawerContentBody>
      </DrawerContent>
      <DrawerPanel>
        <DrawerHead>
          <DrawerActions>
            <DrawerCloseButton id="drawer-close-button" onClose={onClose} />
          </DrawerActions>
        </DrawerHead>
        <DrawerPanelBody>Drawer panel content</DrawerPanelBody>
      </DrawerPanel>
    </Drawer>
  );
};

```

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

### Tabs: Open tabs example

Source: https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/Tabs.md

This example demonstrates the basic usage of the Tabs component for organizing content into open tabs.

```typescript
import { Fragment, useCallback, useRef, useState } from 'react';
import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';
import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
import display from '@patternfly/react-styles/css/utilities/Display/display';
import sizing from '@patternfly/react-styles/css/utilities/Sizing/sizing';
import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';

// Assuming Tabs and Tab components are imported from '@patternfly/react-core'
// and the actual content for each tab is defined elsewhere.
// This is a placeholder for the actual TabsOpen.tsx content.
const TabsOpen = () => {
  // Component logic would go here
  return (
    <Fragment>
      {/* Tabs component implementation */}
    </Fragment>
  );
};

export default TabsOpen;

```

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

### Tabs: Open tabs with secondary tabs example

Source: https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/Tabs.md

This example shows how to implement secondary tabs within the main tabs for more complex content organization.

```typescript
import { Fragment, useCallback, useRef, useState } from 'react';
import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';
import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
import display from '@patternfly/react-styles/css/utilities/Display/display';
import sizing from '@patternfly/react-styles/css/utilities/Sizing/sizing';
import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';

// Assuming Tabs and Tab components are imported from '@patternfly/react-core'
// and the actual content for each tab is defined elsewhere.
// This is a placeholder for the actual TabsOpenWithSecondaryTabs.tsx content.
const TabsOpenWithSecondaryTabs = () => {
  // Component logic would go here
  return (
    <Fragment>
      {/* Tabs component implementation with secondary tabs */}
    </Fragment>
  );
};

export default TabsOpenWithSecondaryTabs;

```

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

### Install null-loader

Source: https://github.com/patternfly/patternfly-react/wiki/Disabling-Style-Injection-with-Webpack

Add the null-loader package as a development dependency.

```sh
yarn add null-loader --dev
```

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

### Expand/collapse all

Source: https://github.com/patternfly/patternfly-react/blob/main/packages/react-table/src/demos/Table.md

Example of a table with expand/collapse all functionality.

```typescript
```ts isFullscreen file="examples/TableExpandCollapseAll.tsx"

```
```

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

### Options

Source: https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Tooltip/examples/Tooltip.md

Tooltip example with various options.

```typescript
import React from 'react';
import { Tooltip, Button } from '@patternfly/react-core';

export const TooltipOptions: React.FunctionComponent = () => (
  <Tooltip
    content={<div>This is a tooltip with options</div>}
    position="right"
    trigger="click"
    mouseOverBehavior="toggle"
    maxWidth="200px"
    enableFlip={false}
    aria-label="Tooltip with options"
  >
    <Button variant="plain" aria-label="Action details">
      Click me
    </Button>
  </Tooltip>
);
```

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

### Compact

Source: https://github.com/patternfly/patternfly-react/blob/main/packages/react-table/src/demos/Table.md

Example of a compact table.

```typescript
```ts isFullscreen file="examples/TableCompact.tsx"

```
```

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

### Basic ExpandableSection Example

Source: https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/ExpandableSection/examples/ExpandableSection.md

A simple implementation of the ExpandableSection component.

```typescript
import React from 'react';
import { ExpandableSection } from '@patternfly/react-core';

export const ExpandableSectionBasic: React.FunctionComponent = () => (
  <ExpandableSection toggleText="ExpandableSection">
    This content is visible when the section is expanded.
  </ExpandableSection>
);
```

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

### Date and time range picker example

Source: https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/DateTimePicker.md

This example demonstrates a DateTimeRangePicker, allowing users to select a start and end date and time. It utilizes CalendarMonth and Dropdown components for input.

```typescript
import { useState } from 'react';
import OutlinedCalendarAltIcon from '@patternfly/react-icons/dist/esm/icons/outlined-calendar-alt-icon';
import OutlinedClockIcon from '@patternfly/react-icons/dist/esm/icons/outlined-clock-icon';

const DateTimeRangePicker = () => {
  const [startDate, setStartDate] = useState<Date | null>(null);
  const [startTime, setStartTime] = useState<string>('');
  const [endDate, setEndDate] = useState<Date | null>(null);
  const [endTime, setEndTime] = useState<string>('');

  const handleStartDateChange = (date: Date | null) => {
    setStartDate(date);
  };

  const handleStartTimeChange = (time: string) => {
    setStartTime(time);
  };

  const handleEndDateChange = (date: Date | null) => {
    setEndDate(date);
  };

  const handleEndTimeChange = (time: string) => {
    setEndTime(time);
  };

  const timeOptions = [
    { value: '10:00 AM', label: '10:00 AM' },
    { value: '11:00 AM', label: '11:00 AM' },
    { value: '12:00 PM', label: '12:00 PM' },
    { value: '1:00 PM', label: '1:00 PM' },
    { value: '2:00 PM', label: '2:00 PM' },
    { value: '3:00 PM', label: '3:00 PM' },
    { value: '4:00 PM', label: '4:00 PM' },
    { value: '5:00 PM', label: '5:00 PM' }
  ];

  return (
    <DateTimeRangePicker
      startDatePickerProps={{
        onChange: handleStartDateChange,
        value: startDate,
        placeholder: 'Select start date',
        popoverProps: {
          appendTo: 'parent'
        },
        validators: {
          isRequired: true
        }
      }}
      startTimePickerProps={{
        onChange: handleStartTimeChange,
        placeholder: 'Select start time',
        options: timeOptions,
        popoverProps: {
          appendTo: 'parent'
        },
        validators: {
          isRequired: true
        }
      }}
      endDatePickerProps={{
        onChange: handleEndDateChange,
        value: endDate,
        placeholder: 'Select end date',
        popoverProps: {
          appendTo: 'parent'
        },
        validators: {
          isRequired: true
        }
      }}
      endTimePickerProps={{
        onChange: handleEndTimeChange,
        placeholder: 'Select end time',
        options: timeOptions,
        popoverProps: {
          appendTo: 'parent'
        },
        validators: {
          isRequired: true
        }
      }}
      icon={<OutlinedCalendarAltIcon />}
      timeIcon={<OutlinedClockIcon />}
    />
  );
};

export default DateTimeRangePicker;

```

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

### Get Current Step from Wizard

Source: https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Wizard/examples/Wizard.md

Example demonstrating how to retrieve the currently active step within the Wizard component using the `useWizardContext` hook.

```typescript
import React from 'react';
import {
  Wizard,
  WizardStep,
  WizardBody,
  WizardFooterWrapper,
  Button,
  useWizardContext
} from '@patternfly/react-core';

const StepContent = () => {
  const { activeStep } = useWizardContext();
  return <>This is the current step: {activeStep.name}</>;
};

export const WizardGetCurrentStep: React.FunctionComponent = () => {
  const [activeStep, setActiveStep] = React.useState(1);

  const handleNext = () => {
    setActiveStep(prev => prev + 1);
  };

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

  const steps = [
    {
      location: 1,
      name: 'Step 1',
      component: (
        <WizardStep id="step1" name="Step 1">
          <WizardBody><StepContent /></WizardBody>
        </WizardStep>
      )
    },
    {
      location: 2,
      name: 'Step 2',
      component: (
        <WizardStep id="step2" name="Step 2">
          <WizardBody><StepContent /></WizardBody>
        </WizardStep>
      )
    },
    {
      location: 3,
      name: 'Step 3',
      component: (
        <WizardStep id="step3" name="Step 3">
          <WizardBody><StepContent /></WizardBody>
        </WizardStep>
      )
    }
  ];

  return (
    <Wizard 
      steps={steps}
      activeStep={activeStep}
      onNext={handleNext}
      onBack={handleBack}
      footerWrapper={(
        <WizardFooterWrapper 
          isNextDisabled={activeStep === 3} 
          isBackDisabled={activeStep === 1}
        >
          <Button variant="primary" onClick={handleNext} isDisabled={activeStep === 3}>Next</Button>
          <Button variant="secondary" onClick={handleBack} isDisabled={activeStep === 1}>Back</Button>
        </WizardFooterWrapper>
      )}
    />
  );
};
```

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

### Install @patternfly/react-tokens

Source: https://github.com/patternfly/patternfly-react/blob/main/packages/react-tokens/README.md

Use yarn or npm to add the package to your project dependencies.

```bash
yarn add @patternfly/react-tokens
```

```bash
npm install --save @patternfly/react-tokens
```

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

### Install Patternfly Core

Source: https://github.com/patternfly/patternfly-react/wiki/Disabling-Style-Injection-with-Webpack

Add the core CSS package to the project.

```sh
yarn add @patternfly/patternfly
```

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

### Asynchronous Alert Group Example

Source: https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Alert/examples/Alert.md

Demonstrates triggering alerts via an asynchronous event. The `aria-live` property can be adjusted to customize how alerts are announced by assistive technologies. This setup is useful for alerts that appear after a delay or in response to background processes.

```ts
import React from 'react';
import { Alert, AlertGroup } from '@patternfly/react-core';

export const AlertGroupAsync: React.FunctionComponent = () => (
  <AlertGroup isLiveRegion aria-live="polite">
    <Alert variant="success" title="Success alert title">
      This is a success alert.
    </Alert>
    <Alert variant="info" title="Info alert title">
      This is an info alert.
    </Alert>
  </AlertGroup>
);
```

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

### Panel at start

Source: https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Drawer/examples/Drawer.md

A drawer with the panel positioned at the start.

```TypeScript
import React from 'react';
import {
  Drawer,
  DrawerContent,
  DrawerContentBody,
  DrawerPanel,
  DrawerPanelBody,
  DrawerHead,
  DrawerActions,
  DrawerCloseButton,
} from '@patternfly/react-core';

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

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

  return (
    <Drawer isExpanded={isOpen} position="left">
      <DrawerContent>
        <DrawerContentBody>Drawer content</DrawerContentBody>
      </DrawerContent>
      <DrawerPanel>
        <DrawerHead>
          <DrawerActions>
            <DrawerCloseButton id="drawer-close-button" onClose={onClose} />
          </DrawerActions>
        </DrawerHead>
        <DrawerPanelBody>Drawer panel content</DrawerPanelBody>
      </DrawerPanel>
    </Drawer>
  );
};

```

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

### Implement a basic menu

Source: https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Menu/examples/Menu.md

Demonstrates various menu item states including selection callbacks, navigation links, disabled items, and plain styling.

```ts
```ts file="MenuBasic.tsx"

```
```

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

### Enable YAML syntax highlighting

Source: https://github.com/patternfly/patternfly-react/blob/main/packages/react-code-editor/README.md

Install monaco-yaml and configure diagnostics at the app entrypoint.

```shell
$ npm install --save monaco-yaml
```

```javascript
import { setDiagnosticsOptions } from 'monaco-yaml';

setDiagnosticsOptions({
  enableSchemaRequest: true,
  hover: true,
  completion: true,
  validate: true,
  format: true,
  schemas: []
});
```

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

### Tree View guides

Source: https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/TreeView/examples/TreeView.md

Displays visual guides for the tree structure.

```ts
```ts file='./TreeViewGuides.tsx'

```
```

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

### Install @patternfly/react-templates

Source: https://github.com/patternfly/patternfly-react/blob/main/packages/react-templates/README.md

Use yarn or npm to add the package to your project dependencies.

```sh
yarn add @patternfly/react-templates
```

```sh
npm install @patternfly/react-templates --save
```

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

### Inline panel at start

Source: https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Drawer/examples/Drawer.md

An inline drawer with the panel positioned at the start.

```TypeScript
import React from 'react';
import {
  Drawer,
  DrawerContent,
  DrawerContentBody,
  DrawerPanel,
  DrawerPanelBody,
  DrawerHead,
  DrawerActions,
  DrawerCloseButton,
} from '@patternfly/react-core';

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

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

  return (
    <Drawer isExpanded={isOpen} isInline position="left">
      <DrawerContent>
        <DrawerContentBody>Drawer content</DrawerContentBody>
      </DrawerContent>
      <DrawerPanel>
        <DrawerHead>
          <DrawerActions>
            <DrawerCloseButton id="drawer-close-button" onClose={onClose} />
          </DrawerActions>
        </DrawerHead>
        <DrawerPanelBody>Drawer panel content</DrawerPanelBody>
      </DrawerPanel>
    </Drawer>
  );
};

```

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

### Toggle icon at start Accordion

Source: https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Accordion/examples/Accordion.md

Positions the toggle icon at the start of the accordion header.

```ts
```ts file="./AccordionToggleIconAtStart.tsx"
```
```

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

### Clone and Configure Repository

Source: https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/CONTRIBUTING.md

Commands to clone a fork and set up the upstream remote.

```bash
# Clone your fork of the repo into the current directory
git clone https://github.com/<your-username>/patternfly-react.git
# Navigate to the newly cloned directory
cd patternfly-react
# Assign the original repo to a remote called "upstream"
git remote add upstream https://github.com/patternfly/patternfly-react.git
```

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

### Install monaco-editor peer dependency

Source: https://github.com/patternfly/patternfly-react/blob/main/packages/react-code-editor/README.md

Install monaco-editor as a dev dependency for TypeScript type definitions.

```sh
yarn add --dev monaco-editor
```

```sh
npm install --dev monaco-editor
```

```text
yarn add --dev monaco-editor
```

```text
npm install --dev monaco-editor
```

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

### Basic Composable Table Example

Source: https://github.com/patternfly/patternfly-react/blob/main/packages/react-table/README.md

Demonstrates how to create a basic table using the composable Table API from @patternfly/react-table. Ensure base CSS is imported for correct styling.

```typescript
import { Table, Thead, Tr, Th, Td, Tbody } from '@patternfly/react-table';

export const ComposableTableBasic = () => {
  const repositories = [
    { name: 'one', branches: 'two', prs: 'three' },
    { name: 'one - 2', branches: null, prs: null },
    { name: 'one - 3', branches: 'two - 3', prs: 'three - 3' }
  ];

  const columnNames = {
    name: 'Repositories',
    branches: 'Branches',
    prs: 'Pull requests'
  };
  
  return (
    <Table>
      <Thead>
        <Tr>
          <Th>{columnNames.name}</Th>
          <Th>{columnNames.branches}</Th>
          <Th>{columnNames.prs}</Th>
        </Tr>
      </Thead>
      <Tbody>
        {repositories.map(repo => (
          <Tr key={repo.name}>
            <Td dataLabel={columnNames.name}>{repo.name}</Td>
            <Td dataLabel={columnNames.branches}>{repo.branches}</Td>
            <Td dataLabel={columnNames.prs}>{repo.prs}</Td>
          </Tr>
        ))}
      </Tbody>
    </Table>
  );
}
export default SimpleTable;
```

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

### Run PatternFly 3 Docs Locally

Source: https://github.com/patternfly/patternfly-react/wiki/Getting-Started-as-a-Contributor

Starts the local development server for PatternFly 3 React components using Storybook. Navigate to http://localhost:6006 after running.

```sh
yarn start:pf3
```

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

### Flex Justify Content Flex Start

Source: https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/layouts/Flex/examples/Flex.md

Justifies Flex items to the start of the main axis.

```tsx
import './flex.css';

<Flex justifyContent={{ default: 'justifyContentFlexStart' }}>
  <FlexItem>Flex item 1</FlexItem>
  <FlexItem>Flex item 2</FlexItem>
  <FlexItem>Flex item 3</FlexItem>
</Flex>
```

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

### Promote packages to latest

Source: https://github.com/patternfly/patternfly-react/wiki/Releasing

Execute the promotion script to generate the necessary npm commands for updating package tags.

```sh
./scripts/promote.sh promote
```

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

### Basic Wizard Example

Source: https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Wizard/examples/Wizard.md

A fundamental implementation of the PatternFly Wizard component.

```typescript
import React from 'react';
import {
  Wizard,
  WizardStep,
  WizardBody,
  WizardFooterWrapper,
  Button
} from '@patternfly/react-core';

export const WizardBasic: React.FunctionComponent = () => {
  const [activeStep, setActiveStep] = React.useState(1);

  const handleNext = () => {
    setActiveStep(prev => prev + 1);
  };

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

  const steps = [
    {
      location: 1,
      name: 'Step 1',
      component: (
        <WizardStep id="step1" name="Step 1">
          <WizardBody>This is step 1 content</WizardBody>
        </WizardStep>
      )
    },
    {
      location: 2,
      name: 'Step 2',
      component: (
        <WizardStep id="step2" name="Step 2">
          <WizardBody>This is step 2 content</WizardBody>
        </WizardStep>
      )
    },
    {
      location: 3,
      name: 'Step 3',
      component: (
        <WizardStep id="step3" name="Step 3">
          <WizardBody>This is step 3 content</WizardBody>
        </WizardStep>
      )
    }
  ];

  return (
    <Wizard 
      steps={steps}
      activeStep={activeStep}
      onNext={handleNext}
      onBack={handleBack}
      footerWrapper={(
        <WizardFooterWrapper 
          isNextDisabled={activeStep === 3} 
          isBackDisabled={activeStep === 1}
        >
          <Button variant="primary" onClick={handleNext} isDisabled={activeStep === 3}>Next</Button>
          <Button variant="secondary" onClick={handleBack} isDisabled={activeStep === 1}>Back</Button>
        </WizardFooterWrapper>
      )}
    />
  );
};
```

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

### Install @patternfly/react-table with NPM

Source: https://github.com/patternfly/patternfly-react/blob/main/packages/react-table/README.md

Use this command to add the @patternfly/react-table package to your project using NPM.

```sh
npm install @patternfly/react-table --save
```

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

### Tabs: Nested tabs example

Source: https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/Tabs.md

This example demonstrates how to nest tabs within each other to create hierarchical navigation structures.

```typescript
import { Fragment, useCallback, useRef, useState } from 'react';
import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';
import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
import display from '@patternfly/react-styles/css/utilities/Display/display';
import sizing from '@patternfly/react-styles/css/utilities/Sizing/sizing';
import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';

// Assuming Tabs and Tab components are imported from '@patternfly/react-core'
// and the actual content for each tab is defined elsewhere.
// This is a placeholder for the actual NestedTabs.tsx content.
const NestedTabs = () => {
  // Component logic would go here
  return (
    <Fragment>
      {/* Nested Tabs component implementation */}
    </Fragment>
  );
};

export default NestedTabs;

```

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

### Basic Form Example

Source: https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Form/examples/Form.md

Demonstrates a basic form structure. Ensure helper text is wrapped in FormHelperText for proper spacing.

```typescript
import React from 'react';
import {
  Form,
  FormGroup,
  TextInput,
  Button,
  FormHelperText,
  HelperText,
  HelperTextItem,
} from '@patternfly/react-core';

export const FormBasic: React.FunctionComponent = () => (
  <Form>
    <FormGroup label="Name" fieldId="form-basic-name">
      <TextInput isRequired type="text" id="form-basic-name" name="form-basic-name" />
    </FormGroup>
    <FormGroup label="Email" fieldId="form-basic-email">
      <FormHelperText>
        <HelperText>
          <HelperTextItem>Enter a valid email address</HelperTextItem>
        </HelperText>
      </FormHelperText>
      <TextInput type="email" id="form-basic-email" name="form-basic-email" />
    </FormGroup>
    <Button variant="primary">Submit</Button>
  </Form>
);
```

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

### Tabs: Tabs and table example

Source: https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/Tabs.md

This example integrates the Tabs component with tables, allowing for tabbed views of tabular data.

```typescript
import { Fragment, useCallback, useRef, useState } from 'react';
import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';
import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
import display from '@patternfly/react-styles/css/utilities/Display/display';
import sizing from '@patternfly/react-styles/css/utilities/Sizing/sizing';
import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';

// Assuming Tabs and Tab components are imported from '@patternfly/react-core'
// and the actual content for each tab is defined elsewhere.
// This is a placeholder for the actual TabsAndTable.tsx content.
const TabsAndTable = () => {
  // Component logic would go here
  return (
    <Fragment>
      {/* Tabs component implementation with tables */}
    </Fragment>
  );
};

export default TabsAndTable;

```

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

### Run Tests

Source: https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/CONTRIBUTING.md

Command to execute the test suite.

```text
$ yarn test
```

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

### Tabs: Nested, unindented tabs example

Source: https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/Tabs.md

This example shows nested tabs that do not have indentation, providing a flatter visual hierarchy.

```typescript
import { Fragment, useCallback, useRef, useState } from 'react';
import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';
import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
import display from '@patternfly/react-styles/css/utilities/Display/display';
import sizing from '@patternfly/react-styles/css/utilities/Sizing/sizing';
import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';

// Assuming Tabs and Tab components are imported from '@patternfly/react-core'
// and the actual content for each tab is defined elsewhere.
// This is a placeholder for the actual NestedUnindentedTabs.tsx content.
const NestedUnindentedTabs = () => {
  // Component logic would go here
  return (
    <Fragment>
      {/* Nested, unindented Tabs component implementation */}
    </Fragment>
  );
};

export default NestedUnindentedTabs;

```

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

### Sticky columns and header with toolbar

Source: https://github.com/patternfly/patternfly-react/blob/main/packages/react-table/src/demos/Table.md

Example of a table with sticky columns and header, including a toolbar.

```javascript
```js isFullscreen file="../components/Table/examples/TableStickyColumnsAndHeader.tsx"

```
```

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

### Embed React Component Example

Source: https://github.com/patternfly/patternfly-react/blob/main/packages/react-docs/README.md

Include interactive React examples by wrapping code in a TypeScript block within the MD file.

```ts
import { YourComponent } from '@patternfly/react-core';

BasicExample = () => (
  <YourComponent />
)
```

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

### Tabs: Modal tabs example

Source: https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/Tabs.md

This example demonstrates the usage of the Tabs component within a modal dialog for organizing modal content.

```typescript
import { Fragment, useCallback, useRef, useState } from 'react';
import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';
import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
import display from '@patternfly/react-styles/css/utilities/Display/display';
import sizing from '@patternfly/react-styles/css/utilities/Sizing/sizing';
import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';

// Assuming Tabs and Tab components are imported from '@patternfly/react-core'
// and the actual content for each tab is defined elsewhere.
// This is a placeholder for the actual ModalTabs.tsx content.
const ModalTabs = () => {
  // Component logic would go here
  return (
    <Fragment>
      {/* Tabs component implementation within a modal */}
    </Fragment>
  );
};

export default ModalTabs;

```

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

### Stack Chart Example

Source: https://github.com/patternfly/patternfly-react/blob/main/packages/react-charts/src/victory/components/Skeletons/examples/skeletons.md

Use this component to render a stack chart. Ensure necessary imports are included.

```typescript
import { useState } from 'react';
import { Chart, ChartStack, ChartAxis, ChartThemeColor } from '@patternfly/react-charts/victory';

export const StackChart = () => {
  const datum = [
    { name: 'A', x: 'A', y: 2 },
    { name: 'B', x: 'B', y: 4 },
    { name: 'C', x: 'C', y: 3 },
    { name: 'D', x: 'D', y: 5 },
    { name: 'E', x: 'E', y: 3 },
    { name: 'F', x: 'F', y: 7 },
    { name: 'G', x: 'G', y: 5 }
  ];
  return (
    <Chart 
      aria-label="Stack chart"
      height={300}
      width={500}
      themeColor={ChartThemeColor.blue}
      padding={{ top: 50, left: 50, right: 50, bottom: 50 }}
    >
      <ChartStack>
        <ChartBar data={datum} />
      </ChartStack>
      <ChartAxis />
      <ChartAxis dependentAxis showGrid />
    </Chart>
  );
};
```

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

### OUIA Example

Source: https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/helpers/OUIA/OUIA.md

This example demonstrates how to use OUIA attributes in a PatternFly component. The `ouiaId` prop can be used to specify a concrete ID for automation.

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

// Example usage of OUIA attributes
<Button ouiaId="my-button" variant="primary">
  Primary
</Button>

<Alert ouiaId="my-alert" title="This is an alert">
  This is a description
</Alert>
```

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

### Install @patternfly/react-table with Yarn

Source: https://github.com/patternfly/patternfly-react/blob/main/packages/react-table/README.md

Use this command to add the @patternfly/react-table package to your project using Yarn.

```sh
yarn add @patternfly/react-table
```

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

### Start Truncation

Source: https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Truncate/examples/Truncate.md

Truncates content at the beginning, keeping the end visible. Useful when the unique part of the string is at the end. Use the `position` property set to 'start'.

```typescript
import React from 'react';
import { Truncate } from '@patternfly/react-core';

export const TruncateStart: React.FunctionComponent = () => (
  <div style={{ width: '200px', border: '1px solid lightgray' }}>
    <Truncate content="This is a long string that will be truncated because it is too long to fit in the container." position="start" trailingNumChars={10}>
      This is a long string that will be truncated because it is too long to fit in the container.
    </Truncate>
  </div>
);
```

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

### Line Chart Example

Source: https://github.com/patternfly/patternfly-react/blob/main/packages/react-charts/src/victory/components/Skeletons/examples/skeletons.md

Use this component to render a line chart. Ensure necessary imports are included.

```typescript
import { useState } from 'react';
import { Chart, ChartLine, ChartAxis, ChartThemeColor } from '@patternfly/react-charts/victory';

export const LineChart = () => {
  const datum = [
    { x: 'A', y: 2 },
    { x: 'B', y: 4 },
    { x: 'C', y: 3 },
    { x: 'D', y: 5 },
    { x: 'E', y: 3 },
    { x: 'F', y: 7 },
    { x: 'G', y: 5 }
  ];
  return (
    <Chart 
      aria-label="Line chart"
      height={300}
      width={500}
      themeColor={ChartThemeColor.blue}
      padding={{ top: 50, left: 50, right: 50, bottom: 50 }}
    >
      <ChartLine data={datum} />
      <ChartAxis />
      <ChartAxis dependentAxis showGrid />
    </Chart>
  );
};
```

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

### Basic Dropdown Example

Source: https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Dropdown/examples/Dropdown.md

Demonstrates a basic dropdown with disabled items, onClick actions, and a divider to separate menu sections. Ensure the `isOpen` property is passed into the `onOpenChange` callback to manage the menu's open state.

```typescript
import React from 'react';
import {
  Dropdown,
  DropdownItem,
  DropdownList,
  MenuToggle,
  Divider
} from '@patternfly/react-core';

export const DropdownBasic: React.FunctionComponent = () => {
  const [isOpen, setIsOpen] = React.useState(false);

  const onSelect = () => {
    // You can also use the onSelect prop to close the dropdown when an item is selected.
    setIsOpen(false);
  };

  const onToggleClick = () => {
    setIsOpen(!isOpen);
  };

  const dropdownItems = [
    <DropdownItem key="item 1">Item 1</DropdownItem>,
    <DropdownItem key="item 2" isDisabled>Item 2 (disabled)</DropdownItem>,
    <DropdownItem key="item 3">Item 3</DropdownItem>
  ];

  return (
    <Dropdown
      onSelect={onSelect}
      isOpen={isOpen}
      toggle={
        <MenuToggle onClick={onToggleClick} isExpanded={isOpen}>
          Dropdown
        </MenuToggle>
      }
      dropdownItems={dropdownItems}
    />
  );
};
```

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

### Application Launcher Menu Demo

Source: https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/CustomMenus/CustomMenus.md

Displays an application launcher menu component.

```ts
```ts file="./examples/ApplicationLauncherDemo.tsx"

```
```