### Mock Quick Starts

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/configuration.md

Example of mocking QuickStart objects for testing.

```typescript
import { QuickStart, QuickStartStatus } from '@patternfly/quickstarts';

const mockQuickStarts: QuickStart[] = [
  {
    apiVersion: 'v1',
    kind: 'QuickStart',
    metadata: { name: 'test-qs' },
    spec: {
      displayName: 'Test',
      description: 'Test quick start',
      icon: <TestIcon />,
    },
  },
];

const mockStates = {
  'test-qs': {
    status: QuickStartStatus.NOT_STARTED,
    taskNumber: -1,
  },
};
```

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

### Yarn Installation

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/configuration.md

Install the @patternfly/quickstarts package using yarn.

```bash
yarn add @patternfly/quickstarts
```

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

### Lazy Load Quick Starts

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/configuration.md

Example of lazy loading quick starts using useEffect and useState.

```typescript
const [quickStarts, setQuickStarts] = useState([]);

useEffect(() => {
  // Load initially visible quick starts only
  loadInitialQuickStarts().then(setQuickStarts);

  // Load remaining in background
  loadAllQuickStarts().then(allQs => {
    setQuickStarts(allQs);
  });
}, []);
```

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

### NPM Installation

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/configuration.md

Install the @patternfly/quickstarts package using npm.

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

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

### Setting Up Translations

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/configuration.md

Example of setting up translations for quickstarts using i18next.

```typescript
import i18n from 'i18next';

// Get language from localStorage or i18n
const language = localStorage.getItem('language') || 'en';
const resourceBundle = i18n.getResourceBundle(language, 'quickstart');

<QuickStartContainer
  {...props}
  language={language}
  resourceBundle={resourceBundle}
/>
```

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

### Environment Variables

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/configuration.md

Example of using environment variables for API base URL and Quick Starts path.

```typescript
const API_BASE = process.env.REACT_APP_API_BASE || '/api';
const QUICKSTARTS_PATH = process.env.REACT_APP_QUICKSTARTS_PATH || '/quickstarts';

async function loadQuickStarts() {
  return fetch(`${API_BASE}${QUICKSTARTS_PATH}`).then(r => r.json());
}
```

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

### Basic Setup

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/INDEX.md

Example of setting up the QuickStartContainer with local storage persistence for active quick start ID and states.

```typescript
import { QuickStartContainer, useLocalStorage } from '@patternfly/quickstarts';

function App() {
  const [activeQuickStartID, setActiveQuickStartID] = useLocalStorage('quickstartId', '');
  const [allQuickStartStates, setAllQuickStartStates] = useLocalStorage('quickstarts', {});

  return (
    <QuickStartContainer
      quickStarts={quickStarts}
      activeQuickStartID={activeQuickStartID}
      setActiveQuickStartID={setActiveQuickStartID}
      allQuickStartStates={allQuickStartStates}
      setAllQuickStartStates={setAllQuickStartStates}
    >
      <YourAppContent />
    </QuickStartContainer>
  );
}
```

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

### Clone and Run Quickstarts

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

Commands to clone the repository, install dependencies, build, and start the development server for PatternFly Quickstarts.

```bash
git clone https://github.com/patternfly/patternfly-quickstarts
cd patternfly-quickstarts
yarn install && yarn build && yarn start
```

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

### React useState for State Management

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/configuration.md

Example of using React's useState hook for managing quick start state.

```typescript
const [activeQuickStartID, setActiveQuickStartID] = useState('');
const [allQuickStartStates, setAllQuickStartStates] = useState({});
```

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

### Memoization

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/configuration.md

Example of memoizing a component using React.useMemo.

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

const MemoizedCatalog = useMemo(
  () => <QuickStartCatalogPage {...props} />,
  [props]
);
```

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

### Dynamic Quick Starts Example

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/QuickStartCatalogPage.md

Example showing how to pass quick starts directly via props to override context.

```typescript
<QuickStartCatalogPage
  quickStarts={[quickStart1, quickStart2]}
  showFilter={true}
/>
```

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

### External State Management Example

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/configuration.md

Example of integrating with external state management solutions like Redux.

```typescript
const { activeQuickStartID, allQuickStartStates } = useSelector(state => state.quickstarts);
const dispatch = useDispatch();

const setActiveQuickStartID = (id) => dispatch(setActiveQuickStart(id));
const setAllQuickStartStates = (states) => dispatch(setAllQuickStartStates(states));
```

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

### Jest Setup

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/configuration.md

Jest setup for PatternFly and Quick Starts, including mocking localStorage.

```typescript
// jest.setup.ts
import '@patternfly/react-core/dist/styles/base.css';
import '@patternfly/quickstarts/dist/quickstarts.min.css';

// Mock window.localStorage
const localStorageMock = {
  getItem: jest.fn(),
  setItem: jest.fn(),
  removeItem: jest.fn(),
};
global.localStorage = localStorageMock as any;
```

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

### Loading Quick Starts from JSON/YAML Files

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/configuration.md

Load quick start configurations from local JSON or YAML files using imports and the 'js-yaml' parser.

```typescript
import quickStartYaml from './quick-starts/getting-started.yaml';
import { parse } from 'js-yaml';

function loadQuickStarts() {
  const quickStart = parse(quickStartYaml);
  return [quickStart];
}
```

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

### Peer Dependencies Installation

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/configuration.md

Install required peer dependencies if they are not already present.

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

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

### Loading Quick Starts from API

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/configuration.md

Fetch quick start data from a backend API endpoint and update the state.

```typescript
async function loadQuickStarts() {
  const response = await fetch('/api/quickstarts');
  return response.json();
}

useEffect(() => {
  loadQuickStarts().then(qs => {
    setQuickStarts(qs);
    setLoading(false);
  });
}, []);
```

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

### useLocalStorage Hook for State Management

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/configuration.md

Example of using the useLocalStorage hook for persisting quick start state across sessions.

```typescript
import { useLocalStorage } from '@patternfly/quickstarts';

const [activeQuickStartID, setActiveQuickStartID] = useLocalStorage('quickstartId', '');
const [allQuickStartStates, setAllQuickStartStates] = useLocalStorage('quickstarts', {});
```

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

### Code Splitting

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/configuration.md

Example of code splitting using React.lazy and Suspense for QuickStartContainer.

```typescript
import { lazy, Suspense } from 'react';

const QuickStartContainer = lazy(() =>
  import('@patternfly/quickstarts').then(m => ({
    default: m.QuickStartContainer,
  }))
);

export function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <QuickStartContainer {...props}>
        {children}
      </QuickStartContainer>
    </Suspense>
  );
}
```

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

### Usage Example

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/packages/module/README.md

An example demonstrating how to integrate and use the QuickStartContainer and QuickStartCatalogPage components from the PatternFly Quick Starts library. It includes setting up quick starts, managing their states, and toggling them via props or context.

```javascript
import './styles.css';

// base styles/variables for PatternFly-react
import '@patternfly/react-core/dist/styles/base.css';
// quick starts styles
import '@patternfly/quickstarts/dist/quickstarts.min.css';

import * as React from 'react';
import {
  QuickStartContainer,
  QuickStartCatalogPage,
  QuickStartContext,
  useLocalStorage,
  setQueryArgument,
  removeQueryArgument,
  QUICKSTART_ID_FILTER_KEY,
} from '@patternfly/quickstarts';
import { Button } from '@patternfly/react-core';
import jsYaml from 'js-yaml';
// quick start files could be yaml files or js files, or really anything,
// as long as they get parsed out to the expected JSON format
import quickstartOne from './quick-starts/quickstart-one.yaml';
import quickstartTwo from './quick-starts/quickstart-two.yaml';
import quickstartThree from './quick-starts/quickstart-three';

const App = () => {
  const [quickStarts, setQuickStarts] = React.useState([]);
  const [loading, setLoading] = React.useState(true);

  // You can use the useLocalStorage hook if you want to store user progress in local storage
  // Otherwise you can use React.useState here or another means (backend) to store the active quick start ID and state
  const [activeQuickStartID, setActiveQuickStartID] = useLocalStorage('quickstartId', '');
  const [allQuickStartStates, setAllQuickStartStates] = useLocalStorage('quickstarts', {});
  // or
  // const [activeQuickStartID, setActiveQuickStartID] = React.useState("");
  // const [allQuickStartStates, setAllQuickStartStates] = React.useState({});

  React.useEffect(() => {
    const load = () => {
      const loadedQuickStarts = [
        jsYaml.load(quickstartOne),
        jsYaml.load(quickstartTwo),
        quickstartThree,
      ];
      setQuickStarts(loadedQuickStarts);
      setLoading(false);
    };
    setTimeout(() => {
      // simulate loading time to get the quick starts from somewhere
      load();
    }, 500);
  }, []);

  const withQueryParams = true;

  const drawerProps = {
    quickStarts,
    activeQuickStartID,
    allQuickStartStates,
    setActiveQuickStartID,
    setAllQuickStartStates,
    // Set to true to opt-out of default hidden card footers
    showCardFooters: false,
    // Set to true to opt-out of default drawer header colors of blue with white text
    useLegacyHeaderColors: false,
    loading,
    useQueryParams: withQueryParams,
  };

  const toggleQuickStart = (quickStartId: string) => {
    if (activeQuickStartID !== quickStartId) {
      // activate
      setActiveQuickStartID(quickStartId);
      // optionally add the browser URL query param
      withQueryParams && setQueryArgument(QUICKSTART_ID_FILTER_KEY, quickStartId);
    } else {
      // deactivate
      setActiveQuickStartID('');
      // optionally remove the browser URL query param
      withQueryParams && removeQueryArgument(QUICKSTART_ID_FILTER_KEY);
    }
  };

  return (
    <QuickStartContainer {...drawerProps}>
      <Button onClick={() => toggleQuickStart('node-with-s2i')}> 
        Toggle quick start through prop
      </Button>
      <SomeNestedComponent />
      <QuickStartCatalogPage 
        showFilter
        title="Quick starts"
        hint="Learn how to create, import, and run applications with step-by-step instructions and tasks."
      />
    </QuickStartContainer>
  );
};

const SomeNestedComponent = () => {
  const qsContext = React.useContext(QuickStartContext);
  // the quick start ID is defined in the quick start object's metadata.name field
  return (
    <button onClick={() => qsContext.setActiveQuickStart('monitor-sampleapp')}> 
      Toggle quick start through context
    </button>
  );
};

export default App;

```

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

### Quick starts with custom drawer

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/packages/module/patternfly-docs/content/extensions/quick-starts/examples/basic.md

This code snippet demonstrates quick starts placed into a non-managed, custom drawer. Click the image to view the fullscreen example.

```javascript
import React from 'react';
import { QuickStartContainer, QuickStartDrawerContent } from '@patternfly/quickstarts';
import { quickStarts as exampleQuickStarts } from './example-data';

export const WithCustomDrawer = () => (
  <QuickStartContainer drawerContent={(
    <QuickStartDrawerContent quickStarts={exampleQuickStarts} />
  )}>
    {/* Content that triggers the drawer */}
    <button>Open Quick Starts</button>
  </QuickStartContainer>
);

```

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

### Loading Quick Starts from Server Flags

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/configuration.md

Retrieve quick start configurations embedded in server flags, typically as a JSON string.

```typescript
declare const window: Window & {
  SERVER_FLAGS?: {
    quickStarts?: string;
  };
};

function getQuickStartsFromServer() {
  const flagData = window.SERVER_FLAGS?.quickStarts;
  if (flagData) {
    return JSON.parse(flagData);
  }
  return [];
}
```

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

### HelpTopicContainer Setup

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/configuration.md

Basic setup for the HelpTopicContainer component, including passing necessary props like help topics, language, and resource bundle.

```typescript
import { HelpTopicContainer } from '@patternfly/quickstarts';

<HelpTopicContainer
  helpTopics={helpTopics}
  language={language}
  resourceBundle={resourceBundle}
  loading={false}
  markdown={{
    extensions: [...],
  }}
>
  <YourAppContent />
</HelpTopicContainer>
```

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

### Basic Stylesheet Setup

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/configuration.md

Import PatternFly base styles and quickstarts styles in your application entry point.

```typescript
// Import PatternFly base styles
import '@patternfly/react-core/dist/styles/base.css';
// Import quickstarts styles
import '@patternfly/quickstarts/dist/quickstarts.min.css';
```

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

### Loading Help Topics from YAML

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/configuration.md

Asynchronously load help topics from a YAML file using the 'js-yaml' library.

```typescript
import { parse } from 'js-yaml';

async function loadHelpTopics() {
  const response = await fetch('/help-topics.yaml');
  const yaml = await response.text();
  const topics = parse(yaml);
  return topics;
}
```

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

### Markdown Extensions - Code Highlighting

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/configuration.md

Example of a custom markdown render extension for integrating code highlighting libraries like Highlight.js or Prism.

```typescript
markdown={{
  renderExtension: (docContext: Document, rootSelector: string) => {
    const codeBlocks = docContext.querySelectorAll('pre code');
    codeBlocks.forEach(block => {
      highlightBlock(block);
    });
  },
}}
```

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

### Markdown Extensions - Variable Substitution

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/configuration.md

Example of a common markdown extension for variable substitution within content.

```typescript
markdown={{
  extensions: [{
    type: 'output',
    filter: (html) => {
      const vars = {
        CLUSTER_NAME: 'my-cluster',
        NAMESPACE: 'default',
        REGISTRY: 'quay.io',
      };
      return Object.entries(vars).reduce(
        (html, [key, value]) =>
          html.replace(new RegExp(`\[${key}\]`, 'g'), value),
        html
      );
    },
  }],
}}
```

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

### QuickStart Usage Example

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/types.md

Example of how to define a QuickStart object.

```typescript
const quickStart: QuickStart = {
  apiVersion: 'console.openshift.io/v1',
  kind: 'QuickStart',
  metadata: {
    name: 'getting-started',
    displayName: 'Getting Started',
  },
  spec: {
    displayName: 'Getting Started Guide',
    description: 'Learn the basics',
    icon: <MyIcon />,
    durationMinutes: 10,
  },
};
```

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

### Standard Stylesheet Option

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/configuration.md

Recommended stylesheet import including all PatternFly components used by quickstarts.

```typescript
import '@patternfly/react-core/dist/styles/base.css';
import '@patternfly/quickstarts/dist/quickstarts.min.css';
```

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

### ProcQuickStartParser Example

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/utilities.md

Example of using ProcQuickStartParser to parse AsciiDoc HTML into quick start tasks.

```typescript
const htmlProc = `
  <div class="sect2">
    <h3>Deploy Application</h3>
    <div class="sectionbody">
      <div class="paragraph">
        <p>Prerequisites</p>
      </div>
      <div class="ulist">
        <li>Docker installed</li>
      </div>
      <div class="olist">
        <h4>Procedure</h4>
        <ol class="arabic">
          <li>Build the image</li>
          <li>Push to registry</li>
        </ol>
      </div>
    </div>
  </div>
`;

const quickStart = {
  metadata: { name: 'deploy' },
  spec: {
    displayName: 'Deploy',
    description: 'Deploy app',
    icon: <Icon />,
    tasks: [{ proc: htmlProc }],
  },
};

const parsed = ProcQuickStartParser(quickStart, { REGISTRY: 'docker.io' });
```

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

### Quick Start Type Example

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/catalog-components.md

Example of how to define a quick start type with a specific color.

```typescript
{
  spec: {
    type: {
      text: 'Getting Started',
      color: 'blue'
    }
  }
}
```

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

### Accessing QuickStartContext

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/QuickStartContainer.md

Example of a component using the QuickStartContext to get the active quick start and programmatically change it.

```typescript
const MyComponent = () => {
  const qsContext = useContext(QuickStartContext);
  
  return (
    <button onClick={() => qsContext.setActiveQuickStart('my-quickstart-id')}> 
      Start Tutorial
    </button>
  );
};
```

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

### Usage Example

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/QuickStartContainer.md

An example of how to use the `QuickStartContainer` component in a React application, including state management and loading quick starts.

```typescript
import React, { useState } from 'react';
import {
  QuickStartContainer,
  QuickStartCatalogPage,
  QuickStartContext,
  useLocalStorage,
  setQueryArgument,
  removeQueryArgument,
  QUICKSTART_ID_FILTER_KEY,
} from '@patternfly/quickstarts';
import '@patternfly/react-core/dist/styles/base.css';
import '@patternfly/quickstarts/dist/quickstarts.min.css';

const App = () => {
  const [quickStarts, setQuickStarts] = useState([]);
  const [loading, setLoading] = useState(true);

  // Use custom state management or useLocalStorage hook
  const [activeQuickStartID, setActiveQuickStartID] = useLocalStorage('quickstartId', '');
  const [allQuickStartStates, setAllQuickStartStates] = useLocalStorage('quickstarts', {});

  React.useEffect(() => {
    // Load quick starts (e.g., from API or YAML files)
    const loadedQuickStarts = [...]; // Your quick starts
    setQuickStarts(loadedQuickStarts);
    setLoading(false);
  }, []);

  return (
    <QuickStartContainer
      quickStarts={quickStarts}
      activeQuickStartID={activeQuickStartID}
      setActiveQuickStartID={setActiveQuickStartID}
      allQuickStartStates={allQuickStartStates}
      setAllQuickStartStates={setAllQuickStartStates}
      loading={loading}
      useQueryParams={true}
      showCardFooters={false}
      resourceBundle={{
        'Start': "Let's go!",
        'Continue': 'Resume',
      }}
    >
      <YourMainContent />
      <QuickStartCatalogPage
        showFilter
        title="Quick Starts"
        hint="Learn how to use this application"
      />
    </QuickStartContainer>
  );
};

export default App;
```

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

### Enable Query Params

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/configuration.md

Enable query parameter support in Quick Starts to update URLs based on active quick start, search filters, or status filters.

```typescript
<QuickStartContainer
  {...props}
  useQueryParams={true}
/>
```

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

### Custom Translations

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/configuration.md

Override default English translations for UI elements in Quick Starts.

```typescript
const customBundle = {
  'Start': "Let's begin!",
  'Continue': 'Keep going',
  'Quick Starts': 'Learn & Explore',
  'Estimated time': 'Time needed',
};

<QuickStartContainer
  {...props}
  resourceBundle={customBundle}
/>
```

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

### Query Param Keys

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/configuration.md

Import and use constants for configurable query parameter keys.

```typescript
import {
  QUICKSTART_ID_FILTER_KEY,
  QUICKSTART_SEARCH_FILTER_KEY,
  QUICKSTART_STATUS_FILTER_KEY,
  HELP_TOPIC_NAME_KEY,
} from '@patternfly/quickstarts';

// 'quickstart'
// 'keyword'
// 'status'
// 'topic'
```

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

### Install Peer Dependencies

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/packages/module/README.md

Install necessary peer dependencies like React Core and Showdown if not already present.

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

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

### Custom Close Handlers

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/configuration.md

Implement custom handlers for quick start close events, allowing for actions like showing confirmations or logging analytics.

```typescript
<QuickStartContainer
  {...props}
  onCloseInProgress={() => {
    console.log('User closing active tutorial');
    // Show confirmation, analytics, etc.
  }}
  onCloseNotInProgress={() => {
    console.log('User closed completed tutorial');
  }}
>
  {children}
</QuickStartContainer>
```

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

### Inline copyable text example

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/packages/module/README.md

Example of how to create inline copyable text using markdown.

```markdown
`echo "Donec id est ante"`{{copy}}
```

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

### Multiline copyable text example

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/packages/module/README.md

Example of how to create multiline copyable text using markdown.

```markdown
    ```
      First line of text.
      Second line of text.
    ```{{copy}}
```

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

### Quick starts catalog

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/packages/module/patternfly-docs/content/extensions/quick-starts/examples/basic.md

This code snippet displays a basic quick starts catalog.

```javascript
import React from 'react';
import { QuickStartContainer, QuickStartCatalogPage } from '@patternfly/quickstarts';
import { quickStarts as exampleQuickStarts } from './example-data';

export const Basic = () => (
  <QuickStartContainer>
    <QuickStartCatalogPage quickStarts={exampleQuickStarts} />
  </QuickStartContainer>
);

```

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

### Stylesheet with Global Styles Option

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/configuration.md

Stylesheet import that includes global styles along with quickstarts styles.

```typescript
import '@patternfly/react-core/dist/styles/base.css';
import '@patternfly/quickstarts/dist/patternfly-global.css';
import '@patternfly/quickstarts/dist/quickstarts.min.css';
```

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

### Example YAML Help Topic

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/packages/module/README.md

A sample YAML structure for a help topic, demonstrating content with markdown and links.

```yaml
- name: auto-deploy
  tags:
    - page-1
  title: Automatic Deployment
  content: |-
    **An Automatic Deployment** is...

    Etiam viverra et tortor et maximus. Aliquam quis scelerisque metus. Proin luctus pretium sodales. Mauris nibh nibh, auctor eu scelerisque et, hendrerit a metus. Vivamus pharetra bibendum finibus. Sed a pulvinar ipsum. Fusce pharetra venenatis porttitor. Praesent justo metus, consectetur quis erat id, congue varius metus. Suspendisse dui est, tempor nec diam quis, facilisis sodales erat. Curabitur viverra convallis ex. Ut egestas condimentum augue, id euismod leo volutpat vitae. Quisque aliquet ac dolor quis pretium. Nunc at nibh quis arcu maximus elementum vel a mi.
  links:
    - text: 'Creating quick starts (external)'
      href: 'https://docs.openshift.com/container-platform/4.9/web_console/creating-quick-start-tutorials.html'
      isExternal: true
    - text: 'Redhat Console (opens in new tab)'
      href: 'https://console.redhat.com'
      newTab: true

```

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

### MockConsole Component Example

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/packages/module/README.md

This example shows how to use the HelpTopicContext to interact with help topics within a mock console interface, including setting active topics and filtering them based on page state.

```tsx
import * as React from 'react';
import {
  Banner,
  Button,
  Divider,
  Form,
  FormGroup,
  PageSection,
  Popover,
  Split,
  SplitItem,
  TextInput,
  Title,
} from '@patternfly/react-core';
import { HelpTopicContext, HelpTopicContextValues } from '@patternfly/quickstarts';
import HelpIcon from '@patternfly/react-icons/dist/js/icons/help-icon';
import { HelpTopic } from '@patternfly/quickstarts/dist/utils/help-topic-types';

// Example usage of topics, render certain topics depending on the page
// used this case when "consolePageState" below is between 4 - 6
// these HelpTopics with the following names will be rendered
const helpTopicNamesByPage = [
  ['auto-deploy', 'code-sample', 'manual-deployment'],
  ['manual-deployment', 'target-port', 'build-configuration'],
  ['deploy-configuration', 'environment-variables', 'health-checks'],
];

interface FormGroupWithHelpTopicPopoverProps extends React.HTMLProps<HTMLDivElement> {
  topic: HelpTopic;
}

// Example usage of setActiveHelpTopicByName()
// render a popover with a learn more link to open the drawer
const FormGroupWithHelpTopicPopover: React.FC<FormGroupWithHelpTopicPopoverProps> = ({ topic }) => {
  const { setActiveHelpTopicByName } = React.useContext<HelpTopicContextValues>(HelpTopicContext);

  return (
    <FormGroup
      label={topic.title}
      isRequired
      fieldId={topic.name}
      key={topic.name}
      labelIcon={
        <Popover
          bodyContent={(hide) => (
            <div>
              {topic.title} is quite amazing{' '}
              <Button
                variant="link"
                onClick={() => {
                  setActiveHelpTopicByName(topic.name);
                  hide();
                }}
              >
                Learn more
              </Button>
            </div>
          )} >
          <Button variant="plain">
            <HelpIcon noVerticalAlign />
          </Button>
        </Popover>
      }
    >
      <TextInput isRequired type="text" id={topic.name} />
    </FormGroup>
  );
};

export const MockConsole: React.FC = () => {
  const { helpTopics, setFilteredHelpTopics, filteredHelpTopics, setActiveHelpTopicByName } =
    React.useContext<HelpTopicContextValues>(HelpTopicContext);

  // mock console page identifiers: 1 - 6
  // click handlers to change page
  const [consolePageState, setConsolePageState] = React.useState(1);

  const handleClickNext = () => {
    setActiveHelpTopicByName('');
    if (consolePageState === 6) {
      setConsolePageState(1);
      return;
    }
    setConsolePageState(consolePageState + 1);
  };

  const handleClickBack = () => {
    setActiveHelpTopicByName('');
    if (consolePageState === 6) {
      setConsolePageState(4);
      return;
    }
    setConsolePageState(consolePageState - 1);
  };

  // Example usage setFilteredHelpTopics()
  // After rendering the console, set the filtered help topics
  React.useEffect(() => {
    // set filtered topics using tags, matching to the consolePageState
    if (consolePageState < 4) {

```

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

### Localization example with custom resource bundle

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/packages/module/README.md

Example of how to override the default English language by providing custom key/value pairs to the QuickStartContainer or QuickStartContextProvider resourceBundle prop.

```javascript
// load my own resource Czech translations resource bundle using i18next
const resourceBundle = i18n.getResourceBundle('cs', 'quickstart');
const resources = {
  ...resourceBundle,
  Start: "Let's go!",
  Continue: 'Resume',
  Restart: 'Start over',
};
return <QuickStartContainer resourceBundle={resources}></QuickStartContainer>;
```

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

### Plural Forms

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/configuration.md

Handle complex plural rules for different languages using i18next plural format.

```typescript
const bundle = {
  'items': 'item',
  'items_plural': 'items',
  'completed': '{{count}} completed',
  'completed_plural': '{{count}} completed',
};
```

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

### Box Example

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/utilities.md

Example of using the Box component.

```typescript
<Box className="custom-class">Content</Box>
```

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

### LoadingBox Example

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/utilities.md

Example of using the LoadingBox component.

```typescript
<LoadingBox message="Loading quick starts..." />
```

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

### getQuickStartStatus

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/utilities.md

Gets the status of a quick start.

```typescript
export const getQuickStartStatus = (
  allQuickStartStates: AllQuickStartStates,
  quickStartID: string
): QuickStartStatus
```

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

### Highlighting an element on the page

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/packages/module/README.md

Example of how to add a data-quickstart-id attribute to an HTML element and then target it within a quick start task description using markdown.

```html
<button data-quickstart-id="special-btn">Click me</button>
```

```markdown
Highlight [special button]{{highlight special-btn}}
```

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

### Usage Example

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/QuickStartController.md

An example of how to use the QuickStartController component within a React application, integrating with QuickStartContext.

```typescript
import React, { useContext } from 'react';
import {
  QuickStartController,
  QuickStartContext,
  QuickStart,
  QuickStartStatus,
} from '@patternfly/quickstarts';

const MyQuickStartView = () => {
  const { activeQuickStartID, allQuickStarts } = useContext(QuickStartContext);
  const contentRef = React.useRef<HTMLDivElement>(null);

  const activeQuickStart = allQuickStarts.find(
    qs => qs.metadata.name === activeQuickStartID
  );

  if (!activeQuickStart) {
    return null;
  }

  const relatedQuickStarts = allQuickStarts.filter(qs => 
    activeQuickStart.spec.nextQuickStart?.includes(qs.metadata.name)
  );

  return (
    <QuickStartController
      quickStart={activeQuickStart}
      nextQuickStarts={relatedQuickStarts}
      contentRef={contentRef}
      footerClass="custom-footer-class"
    />
  );
};

export default MyQuickStartView;
```

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

### EmptyBox Example

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/utilities.md

Example of using the EmptyBox component.

```typescript
<EmptyBox label="No quick starts available" />
```

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

### Development Scripts

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/packages/dev/README.md

A set of scripts for installing dependencies, starting the development server, running a production build, and serving the production build output.

```sh
# Install development/build dependencies
# Note: You shouldn't have to do this if you run this from the repo root
yarn install

# Start the development server
yarn start

# Run a production build of the dev server (outputs to public/)
yarn build

# Run the production buid output of public/
yarn serve
```

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

### Fullscreen help topic

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/packages/module/patternfly-docs/content/extensions/quick-starts/examples/help-topics.md

A fullscreen example of the HelpTopicContainer component.

```jsx
import React from 'react';
import { LoadingBox, HelpTopicContainer, HelpTopicContext } from '@patternfly/quickstarts';
import { helpTopics as exampleHelpTopics } from './example-data';
import '@patternfly/quickstarts/dist/quickstarts.css';

const HelpTopic = () => {
  const helpTopics = exampleHelpTopics;
  const activeTopic = helpTopics[0];

  return (
    <HelpTopicContext.Provider value={{ helpTopics }}>
      <HelpTopicContainer activeTopic={activeTopic} isFullscreen />
    </HelpTopicContext.Provider>
  );
};

export default HelpTopic;
```

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

### Resource Bundle Structure

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/configuration.md

Interface defining the structure of the resource bundle for localization.

```typescript
interface ResourceBundle {
  'Start': string;
  'Continue': string;
  'Restart': string;
  'Back': string;
  'Next': string;
  'Exit': string;
  'Review': string;
  'Complete': string;
  'In progress': string;
  'Not started': string;
  // ... more keys
}
```

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

### Custom Sorting Example

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/catalog-components.md

Example of using the `sortFnc` prop on `QuickStartCatalogPage` to sort quick starts by duration.

```typescript
<QuickStartCatalogPage
  sortFnc={(q1, q2) => {
    // Sort by duration
    return (q1.spec.durationMinutes || 0) - (q2.spec.durationMinutes || 0);
  }}
/>
```

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

### QuickStart Interface

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/types.md

The main quick start object structure. Based on Kubernetes-style resource definition.

```typescript
interface QuickStart {
  apiVersion?: string;
  kind?: string;
  metadata: ObjectMetadata;
  spec: QuickStartSpec;
}
```

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

### Access Context

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/INDEX.md

Example of accessing and using the QuickStartContext within a component to manage the active quick start.

```typescript
import { useContext } from 'react';
import { QuickStartContext } from '@patternfly/quickstarts';

function MyComponent() {
  const { activeQuickStartID, setActiveQuickStart } = useContext(QuickStartContext);

  return (
    <button onClick={() => setActiveQuickStart?.('getting-started')}> 
      Start Tutorial
    </button>
  );
}
```

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

### Standalone Stylesheet Option

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/configuration.md

Stylesheet option for older PatternFly versions (< 4.115.2) that nests styles under .pfext-quick-start__base.

```typescript
import '@patternfly/react-core/dist/styles/base.css';
import '@patternfly/quickstarts/dist/patternfly-global.css';
import '@patternfly/quickstarts/dist/quickstarts-standalone.min.css';
```

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

### Markdown extensions for variable substitution

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/packages/module/README.md

Example of how to define markdown extensions in JavaScript for variable substitution within quick start content.

```javascript
const drawerProps: QuickStartContainerProps = {
  markdown: {
    extensions: [
      // variable substitution example
      // this replaces the strings [APPLICATION] and [PRODUCT]
      {
        type: 'output',
        filter: function(html: string) {
          html = html.replace(/\ \[APPLICATION\]/g, 'Mercury');
          html = html.replace(/\ \[PRODUCT\]/g, 'Lightning');

          return html;
        },
      },
    ],
  },
};

return <QuickStartContainer {...drawerProps}>My page content</QuickStartContainer>
```

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

### Usage Example

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/packages/module/README.md

This code snippet demonstrates how to filter and render help topics based on the current console page state. It includes logic for filtering by tags or by predefined topic names and renders them using a `FormGroupWithHelpTopicPopover` component. It also includes navigation buttons.

```typescript
      const topics = helpTopics.filter((topic: HelpTopic) => {
        const pageTagNumbers = topic.tags.map((tag: string) => {
          return Number(tag.slice(-1));
        });
        return pageTagNumbers.includes(consolePageState);
      });
      setFilteredHelpTopics(topics);
    } else {
      // set filtered topics using the appropriate helpTopicNamesByPage array above
      setFilteredHelpTopics(
        helpTopics.filter((topic) => {
          return helpTopicNamesByPage[consolePageState - 4].includes(topic.name);
        }),
      );
    }
  }, [consolePageState, helpTopics, setFilteredHelpTopics]);

  // Render filteredHelpTopics in a <FormGroupWithHelpTopicPopover />
  const formGroupsFromTags = filteredHelpTopics.map((topic: HelpTopic, index) => {
    return <FormGroupWithHelpTopicPopover topic={topic} key={index} />;
  });

  // From an array of topic names, render all topics in a <FormGroupWithHelpTopicPopover />
  const formGroupsFromTopicNames = (helpTopicNames: string[]) => {
    return helpTopicNames.map((topicName: string, index) => {
      const topicToRender = helpTopics.find((topic) => {
        return topicName === topic.name;
      });

      if (topicToRender) {
        return <FormGroupWithHelpTopicPopover topic={topicToRender} key={index} />;
      }
    });
  };

  return (
    <>
      <PageSection>
        <Banner variant="info">
          <Title headingLevel="h1">Console Page {consolePageState}</Title>
        </Banner>
      </PageSection>
      <PageSection>
        <Title headingLevel="h3">
          Example usage of help topics opened via popover 
          <b>
            {consolePageState < 4
              ? 'using tags that match the Console Page number'
              : 'by defining which help topics should be present on each page'}
          </b>
        </Title>
        <Divider />
        <Form>
          {consolePageState < 4
            ? formGroupsFromTags
            : formGroupsFromTopicNames(helpTopicNamesByPage[consolePageState - 4])}
        </Form>
      </PageSection>
      <PageSection>
        <Split hasGutter>
          <SplitItem>
            <Button onClick={handleClickBack} variant="tertiary">
              Previous
            </Button>
          </SplitItem>
          <SplitItem>
            <Button onClick={handleClickNext}>Next</Button>
          </SplitItem>
        </Split>
      </PageSection>
    </>
  );
};
```
```

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

### Accessing Quick Start State

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/task-management.md

Example of how to access the active quick start state and task number from the QuickStartContext.

```typescript
const { activeQuickStartState } = useContext(QuickStartContext);

// Get current task number
const taskNumber = activeQuickStartState?.taskNumber;

// Get status of task 0
const task0Status = activeQuickStartState?.taskStatus0;
```

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

### Development Scripts

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

Common development scripts for managing dependencies, starting the server, and building the module.

```sh
# Install development/build dependencies
yarn install

# Start the development server
yarn start

# Build the main module (outputs to "packages/module/dist" dir)
yarn build

# Quick build of the main module for local dev
yarn build:quick
```

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

### setActiveQuickStart Usage Example

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/contexts.md

Example demonstrating how to call the setActiveQuickStart method using the context.

```typescript
const qsContext = useContext(QuickStartContext);
qsContext.setActiveQuickStart?.('my-quickstart-id');
```

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

### Custom Sorting Example

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/QuickStartCatalogPage.md

Example demonstrating how to override the default alphabetical sorting with a custom comparator function.

```typescript
<QuickStartCatalogPage
  sortFnc={(q1, q2) => {
    // Sort by duration, ascending
    const dur1 = q1.spec.durationMinutes || 0;
    const dur2 = q2.spec.durationMinutes || 0;
    return dur1 - dur2;
  }}
/>
```

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

### AppHelpTopicDemo Component

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/packages/module/README.md

This component demonstrates the basic setup for using the HelpTopicContainer, including loading help topics and passing necessary props.

```tsx
import './App.css';
import { Page } from '@patternfly/react-core';
import { LoadingBox, HelpTopicContainerProps, HelpTopicContainer } from '@patternfly/quickstarts';
import { helpTopics } from './quickstarts-data/quick-start-test-data';
import React from 'react';
import i18n from './i18n/i18n';
import { AppHeader, AppSidebar } from './common/Page';

type AppProps = {
  children?: React.ReactNode;
  showCardFooters?: boolean;
};

const AppHelpTopicDemo: React.FC<AppProps> = ({ children }) => {
  const language = localStorage.getItem('bridge/language') || 'en';
  const resourceBundle = i18n.getResourceBundle(language, 'quickstart');

  const [loading, setLoading] = React.useState(true);
  React.useEffect(() => {
    const load = async () => {
      setLoading(false);
    };
    setTimeout(() => {
      load();
    }, 500);
  }, []);

  const inContextHelpProps: HelpTopicContainerProps = {
    helpTopics,
    resourceBundle,
    language,
    loading,
  };

  return (
    <React.Suspense fallback={<LoadingBox />}>
      <HelpTopicContainer {...inContextHelpProps}>
        <Page header={AppHeader} sidebar={AppSidebar} isManagedSidebar>
          {children}
        </Page>
      </HelpTopicContainer>
    </React.Suspense>
  );
};

```

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

### QuickStartContainer Required Props Interface

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/configuration.md

Interface defining the required props for the QuickStartContainer component.

```typescript
interface QuickStartContainerRequiredProps {
  quickStarts: QuickStart[];
  activeQuickStartID: string;
  setActiveQuickStartID: React.Dispatch<React.SetStateAction<string>>;
  allQuickStartStates: AllQuickStartStates;
  setAllQuickStartStates: React.Dispatch<React.SetStateAction<AllQuickStartStates>>;
}
```

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

### Portal Rendering

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/configuration.md

Configure the portal rendering for the drawer to be outside the normal DOM flow, useful for escaping overflow containers.

```typescript
<QuickStartContainer
  {...props}
  appendTo={document.getElementById('drawer-portal') || document.body}
>
  {children}
</QuickStartContainer>
```

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

### Usage in Components

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/contexts.md

Example of how to use the QuickStartContext within a React component to access and manipulate quick start data.

```typescript
import React, { useContext } from 'react';
import { QuickStartContext, QuickStartContextValues } from '@patternfly/quickstarts';

const MyComponent = () => {
  const {
    allQuickStarts,
    activeQuickStartID,
    setActiveQuickStart,
    getResource,
  } = useContext<QuickStartContextValues>(QuickStartContext);

  return (
    <div>
      <h1>{getResource('Quick Starts')}</h1>
      {allQuickStarts?.map(qs => (
        <button
          key={qs.metadata.name}
          onClick={() => setActiveQuickStart?.(qs.metadata.name)}
          disabled={activeQuickStartID === qs.metadata.name}
        >
          {qs.spec.displayName}
        </button>
      ))}
    </div>
  );
};

```

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

### Markdown Extensions - Output Filter

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/configuration.md

Add custom markdown processors for transformations, such as replacing variable placeholders.

```typescript
<QuickStartContainer
  {...props}
  markdown={{
    extensions: [
      {
        type: 'output',
        filter: function(html: string) {
          // Replace variable placeholders
          html = html.replace(/\ \[ APPLICATION\]/g, 'MyApp');
          html = html.replace(/\ \[ VERSION\]/g, '1.0.0');
          return html;
        },
      },
    ],
  }}
>
  {children}
</QuickStartContainer>
```

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

### Basic help topic

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/packages/module/patternfly-docs/content/extensions/quick-starts/examples/help-topics.md

A basic example of the HelpTopicContainer component.

```jsx
import React from 'react';
import { LoadingBox, HelpTopicContainer, HelpTopicContext } from '@patternfly/quickstarts';
import { helpTopics as exampleHelpTopics } from './example-data';
import '@patternfly/quickstarts/dist/quickstarts.css';

const HelpTopic = () => {
  const helpTopics = exampleHelpTopics;
  const activeTopic = helpTopics[0];

  return (
    <HelpTopicContext.Provider value={{ helpTopics }}>
      <HelpTopicContainer activeTopic={activeTopic} />
    </HelpTopicContext.Provider>
  );
};

export default HelpTopic;
```

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

### Usage Example

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/QuickStartCatalogPage.md

An example demonstrating how to use the QuickStartCatalogPage component within a QuickStartContainer, including custom sorting.

```typescript
import React, { useContext } from 'react';
import {
  QuickStartContainer,
  QuickStartCatalogPage,
  QuickStartContext,
} from '@patternfly/quickstarts';

const App = () => {
  const [activeQuickStartID, setActiveQuickStartID] = React.useState('');
  const [allQuickStartStates, setAllQuickStartStates] = React.useState({});

  const quickStarts = [
    {
      apiVersion: 'console.openshift.io/v1',
      kind: 'QuickStart',
      metadata: {
        name: 'getting-started',
      },
      spec: {
        displayName: 'Getting Started',
        description: 'Learn the basics',
        icon: <YourIcon />,
        durationMinutes: 10,
      },
    },
    // More quick starts...
  ];

  return (
    <QuickStartContainer
      quickStarts={quickStarts}
      activeQuickStartID={activeQuickStartID}
      setActiveQuickStartID={setActiveQuickStartID}
      allQuickStartStates={allQuickStartStates}
      setAllQuickStartStates={setAllQuickStartStates}
    >
      <QuickStartCatalogPage
        showFilter={true}
        title="Learn the Basics"
        hint="Step-by-step tutorials to get you started"
        sortFnc={(q1, q2) => {
          // Custom sort: show pinned items first, then by name
          const q1IsPinned = q1.metadata.labels?.pinned === 'true';
          const q2IsPinned = q2.metadata.labels?.pinned === 'true';
          if (q1IsPinned !== q2IsPinned) {
            return q1IsPinned ? -1 : 1;
          }
          return q1.spec.displayName.localeCompare(q2.spec.displayName);
        }}
      />
    </QuickStartContainer>
  );
};

export default App;
```

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

### Help Topics

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/INDEX.md

Example of integrating HelpTopicContainer into an application.

```typescript
import { HelpTopicContainer } from '@patternfly/quickstarts';

<HelpTopicContainer helpTopics={topics}>
  <YourAppContent />
</HelpTopicContainer>
```

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

### Basic Task Example

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/task-management.md

An example of a QuickStartTask object with title, description, review, and summary properties.

```typescript
const task: QuickStartTask = {
  title: 'Deploy Your Application',
  description: 'Learn how to deploy your application to the cluster.',
  review: {
    instructions: 'Verify that your application is running.',
    failedTaskHelp: 'If your deployment failed, check the logs for errors.',
  },
  summary: {
    success: 'Your application is now deployed!',
    failed: 'Deployment failed. Please review the logs.',
  },
};
```

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

### Empty State Example

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/catalog-components.md

Example of an EmptyState component to display when no quick starts match filter criteria.

```typescript
<EmptyState
  headingLevel="h4"
  titleText="No results found"
>
  <EmptyStateBody>No results match the filter criteria. Remove filters or clear all filters to show results.</EmptyStateBody>
  <EmptyStateActions>
    <Button variant="link" onClick={clearFilters}>
      Clear all filters
    </Button>
  </EmptyStateActions>
</EmptyState>
```

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

### QuickStartCatalog Usage

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/catalog-components.md

Example of how to use the QuickStartCatalog component.

```typescript
import { QuickStartCatalog } from '@patternfly/quickstarts';

<QuickStartCatalog />
```

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

### startQuickStart Method Signature

Source: https://github.com/patternfly/patternfly-quickstarts/blob/main/_autodocs/contexts.md

Signature for the startQuickStart method, which explicitly starts a new quick start.

```typescript
startQuickStart?: (quickStartId: string, totalTasks?: number) => void
```