open-index/open-npm huggingface dataset:
npm package: @patternfly/documentation-framework
Description: A framework to build documentation for PatternFly.
Author: Red Hat
Latest version: 6.37.0

# @patternfly/documentation-framework

## The PatternFly documentation framework lets you develop component examples in markdown format, so that they can be added to [patternfly.org](https://www.patternfly.org/).

## Install

We publish this theme [on npm.](https://www.npmjs.com/package/@patternfly/documentation-framework) Install it as a devDependency with your package manager.

1. @patternfly/documentation-framework

    `npm i --save-dev @patternfly/documentation-framework`

    or

    `yarn add -D @patternfly/documentation-framework`

2. Provide or install the following either as dependencies if you want to use them in your own project, or as devDependencies:
    ```
    "@patternfly/patternfly": "6.0.0-alpha.205",
    "@patternfly/react-core": "6.0.0-alpha.94",
    "@patternfly/react-table": "6.0.0-alpha.95",
    "@patternfly/react-code-editor": "6.0.0-alpha.94",
    ```
    `yarn add -D @patternfly/patternfly @patternfly/react-core @patternfly/react-table @patternfly/react-code-editor`

## First time setup

### Init documentation project

To get started, you can scaffold out a sample extension docs setup:

`npx pf-docs-framework init --name "My extension"`

If you also want to add relevant script targets to package.json, pass in `--scripts` as well:

`npx pf-docs-framework init --name "My extension" --scripts`

## Usage

For all CLI options, run `npx pf-docs-framework --help`

For individual CLI commands, you can also display more information by running `npx pf-docs-framework <COMMAND> --help`

### Develop docs

`npx pf-docs-framework start`

### Build docs

`npx pf-docs-framework build all --output public`

> NOTE: If you have `sideEffects: false` in your package.json, that will prevent the CSS from loading in the documentation production build. Set it to true or remove it to enable the CSS from being loaded.

### Publish docs to patternfly.org

  1. Include the `patternfly-docs/content` and `patternfly-docs/generated` folders as part of your npm published module

  2. Create a PR at [patternfly-org](https://github.com/patternfly/patternfly-org) to bundle in the package's examples so that they're part of the patternfly.org documentation.
npm package: @patternfly/generator-pfelement
Description: Yeoman generator for creating PatternFly Elements
Author: Kyle Buchanan
Latest version: 1.5.1

# PatternFly Elements Generator

```
npm install -g generator-pfelement
yo pfelement
```

1.  Choose whether you're building a new PFElement in the PatternFly Elements repository or creating a new web component that extends PFElement _If you are building a new PFElement, run this generator inside your /elements directory_
2.  Enter the name of the element you want to create (Example: pfe-card)
3.  Enter the name of the author
4.  Componetize the web
npm package: @patternfly/patternfly-next-workshop
Description: Assets, source, tooling, and content for PatternFly Next
Author: Cliff Pyles
Latest version: 0.0.5

# PatternFly Next

## Install

- run `npm install @patternfly/patternfly-next`

When you install PatternFly Next, the package includes:

- a single file for the entire compiled library: `node_modules/@patternfly/patternfly-next/dist/patternfly.css`
- individual files with each component compiled separately: `node_modules/@patternfly/patternfly-next/dist/<ComponentName>/styles.css`
- a single file for the entire library's source (SASS): `node_modules/@patternfly/patternfly-next/dist/patternfly.scss`
- individual files for each component's source (SASS): `node_modules/@patternfly/patternfly-next/dist/<ComponentName>/styles.scss`

Any of the files above are meant for use in consuming the library. The recommended
consumption approach will vary from project to project.

## Development

**PatternFly Next Development requires Node v8.0.0 or greater**

To setup the PatternFly Next development environment:

- clone the project
- run `npm install` from the project root
- run `npm run cli:setup` (only needed if doing development)
- run `npm run dev`
- open your browser to `http://localhost:8000`

### Create a new component

- run `pf generate component <name>`

 or generate a component that uses HTML for the template

- run `pf generate component-html <name>`

*To view visit http://localhost:8000/components/<name>*

### Create a new pattern

- run `pf generate pattern <name>`

*To view visit http://localhost:8000/patterns/<name>*

### Create a new demo

- run `pf generate demo <name>`

*To view visit http://localhost:8000/demos/<name>*

## FAQ

[How do I use CSS variables (custom properties) to customize
the library?](https://pf-next.com/guidelines#variables)
npm package: @patternfly/pfe-code-block
Description: PatternFly Elements | Code Block
Latest version: 2.0.0-next.0

# PatternFly Elements Code Block
`<pfe-code-block>` is a component that contains two or more lines of ready-only 
code. The code in a code block can be copied to the clipboard.

Read more about Code Block in the [PatternFly Elements Code Block 
documentation](https://patternflyelements.org/components/code-block)

##  Installation

Load `<pfe-code-block>` via CDN:

```html
<script src="https://unpkg.com/@patternfly/pfe-code-block?module"></script>
```

Or, if you are using [NPM](https://npm.im), install it

```bash
npm install @patternfly/pfe-code-block
```

Then once installed, import it to your application:

```js
import '@patternfly/pfe-code-block';
```

## Usage
### Basic

Place your code in a `script` tag with a [non-javascript mimetype][mime].
JavaScript snippets **must** use the `text/javascript-sample` script type. 
Script text content will be automatically dedented.


To add copy-to-clipboard functionality, be sure to import 
`@patternfly/pfe-clipboard` and add the `pfe-clipboard` to the `action` slot.

```html
<pfe-code-block>
  <script type="application/openshift">
    apiVersion: helm.openshift.io/v1beta1/
    kind: HelmChartRepository
    metadata:
    name: azure-sample-repo0oooo00ooo
    spec:
    connectionConfig:
    url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs
  </script>
</pfe-code-block>
```

### Expandable

If a block of code is long and you'd like to hide some of the code to take up 
less height on the page, place the code you'd like to hide in a `script` with 
`data-expand` attribute present.

It is important that you place the span right next to the first `script`, 
because of how the whitespace will be handled. Failing to do this can result in 
unwanted line breaks. 

```html
<pfe-code-block id="expandable-code">
  <script type="application/openshift">
    apiVersion: helm.openshift.io/v1beta1/
    kind: HelmChartRepository
    metadata:
    name: azure-sample-repo</script><script type="application/openshift" 
    data-expand>
    spec:
    connectionConfig:
    url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs
  </script>
  <pfe-clipboard slot="actions" copy-from="#expandable-code"></pfe-clipboard>
</pfe-code-block>
```
npm package: @patternfly/pfe-core
Description: PatternFly Elements Core Library
Latest version: 5.0.7

# `@patternfly/pfe-core`

Utilities for building PatternFly elements.

## Controllers

- `CascadeController` - cascades configured properties/attributes to child elements
- `ColorContextController` - enables colour context detection
- `CssVariableController` - caches computed styles
- `LightDOMController` - controls a light-DOM mutation observer
- `Logger` - logging utilities
- `PerfController` - measures element upgrading performance
- `PropertyObserverController` - caches set values for observed properties until element is updated
- `SlotController` - utilities for managing slots and slotted content

## Decorators

- `@bound` - binds a decorated method to the object instance
- `@cascades` - cascades the decorated property to configured light and shadow child elements
- `@initializer` - executes a decorated method when the element upgrades and on DOM mutations (opt-out)
- `@observed` - runs a callback when the decorated property changes
- `@time` - tracks the time a method takes to complete using the [performance 
  API](https://developer.mozilla.org/en-US/docs/Web/API/Performance)
- `@trace` - debug decorator which logs the name and result of a class method whenever it runs

## Directives

- `when` - element-position directive which adds or removes an element depending on a condition

## Functions

- `debounce` - debounce a function
- `getRandomId` - generate a random element ID, optionally with a given prefix
npm package: @patternfly/pfe-label
Description: PatternFly Elements | Label
Latest version: 1.0.0-next.7

# Label
An inline-block element component that provides a distinct visual style for metadata in a UI.  Commonly used as visual representations for tags, labels can include an optional pfe-icon and are available in a solid and outline style variant. 

Read more about Label in the [PatternFly Elements Label documentation](https://patternflyelements.org/components/label)

##  Installation

Load `<pfe-label>` via CDN:

```html
<script src="https://unpkg.com/@patternfly/pfe-label?module"></script>
```

Or, if you are using [NPM](https://npm.im), install it

```bash
npm install @patternfly/pfe-label
```

Then once installed, import it to your application:

```js
import '@patternfly/pfe-label';
```

## Usage

Default
```html
<p>Some Text <pfe-label>Your label text here</pfe-label>
```

Color Options: `grey (default), blue ,green, orange, red, purple, cyan`
```html
<p>Some Text <pfe-label color="red">Your label text here</pfe-label>
```

With and Icon:
```html
<p>Some Text <pfe-label icon="web-icon-globe">Your label text here</pfe-label>
```

Outline variant:
```html
<p>Some Text <pfe-label outline>Your label text here</pfe-label>
```



> ### Conveying meaning to assistive technologies
> Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that
> information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text 
> hidden with the a class.


```html
<pfe-label color="red">
 Some text <span class="visually-hidden-class">Some additional info</span>
</pfe-label>
```
npm package: @patternfly/pfe-spinner
Description: Spinner element for PatternFly Elements
Latest version: 2.0.0-next.6

# PatternFly Elements Spinner
     
`pfe-spinner` is used to indicate to users that an action is in progress.

Read more about Spinner in the [PatternFly Elements Spinner documentation](https://patternflyelements.org/components/spinner)

##  Installation

Load `<pfe-spinner>` via CDN:

```html
<script src="https://unpkg.com/@patternfly/pfe-spinner?module"></script>
```

Or, if you are using [NPM](https://npm.im), install it

```bash
npm install @patternfly/pfe-spinner
```

Then once installed, import it to your application:

```js
import '@patternfly/pfe-spinner';
```

## Usage
```html
<pfe-spinner>Loading...</pfe-spinner>
```

### Size variations

```html
<pfe-spinner size="sm">Loading...</pfe-spinner>
<pfe-spinner size="md">Loading...</pfe-spinner>
<pfe-spinner size="lg">Loading...</pfe-spinner>
<pfe-spinner size="xl">Loading...</pfe-spinner>
```

### Custom size

```html
<pfe-spinner diameter="80px">Loading...</pfe-spinner>
```
npm package: @patternfly/pfe-switch
Description: PatternFly Elements | Switch
Latest version: 2.0.0-next.0

# PatternFly Elements Switch
     
`pfe-switch` is a switch that toggles the state of a setting (between on and off). Switches provide a more explicit, visible representation on a setting.

Read more about Switch in the [PatternFly Elements Switch documentation](https://patternflyelements.org/components/switch)

##  Installation

Load `<pfe-switch>` via CDN:

```html
<script src="https://unpkg.com/@patternfly/pfe-switch?module"></script>
```

Or, if you are using [NPM](https://npm.im), install it

```bash
npm install @patternfly/pfe-switch
```

Then once installed, import it to your application:

```js
import '@patternfly/pfe-switch';
```

### Note
For `<pfe-switch>` to work in Safari, you'll need to load the [element-internals-polyfill](https://www.npmjs.com/package/element-internals-polyfill). Safari is in the process of [adding element internals to WebKit](https://bugs.webkit.org/show_bug.cgi?id=197960) so this polyfill should be temporary.

## Usage
```html
<pfe-switch id="switch"></pfe-switch>
<label for="switch" data-state="on">Message when on</label>
<label for="switch" data-state="off" hidden>Message when off</label>
```

### Form Associated

`<pfe-switch>` is a form-associated custom element. That means that it can
participate in HTML forms just like a native `<input>`. For example, if you add
the `name` attribute, or the `id` attribute, the element will appear in the
FormData object. For example, if you add the `name` attribute, or the `id`
attribute, the element will appear in the `FormData` object.

```html
<form>
  <label> Dark Mode
    <pfe-switch name="dark"></pfe-switch>
  </label>
  <script>
  document.currentScript.closest('form').addEventListener('submit', function() {
    console.log(this.elements.dark) // <pfe-switch>
  })
  </script>
</form>
```


### Without label

```html
<pfe-switch></pfe-switch>
```

### Checked with label

```html
<pfe-switch show-check-icon></pfe-switch>
<label for="switch" data-state="on">Message when on</label>
<label for="switch" data-state="off" hidden>Message when off</label>
```

### Disabled Switches

```html
<form>
  <fieldset>
    <legend>Checked and Disabled</legend>
    <pfe-switch id="checked-disabled" checked disabled></pfe-switch>
    <label for="checked-disabled" data-state="on">Message when on</label>
    <label for="checked-disabled" data-state="off">Message when off</label>
  </fieldset>

  <fieldset>
    <pfe-switch id="disabled" disabled></pfe-switch>
    <label for="disabled" data-state="on">Message when on</label>
    <label for="disabled" data-state="off">Message when off</label>
  </fieldset>
</form>
```
npm package: @patternfly/pfe-tile
Description: PatternFly Elements | Tile
Latest version: 2.0.0-next.0

# Tile
A **tile** component is a form of selection that can be used in place of a radio 
button and is commonly used in forms. A tile appears visually similar to a 
selectable card. However, tiles are used specifically when the user is selecting 
a static option, whereas a selectable card triggers an action or opens a 
quickstart or sidebar to provide additional information.

```html
<pfe-tile>
  <h3 slot="title">Default</h3>
</pfe-tile>
```
npm package: @patternfly/pfe-timestamp
Description: PatternFly Timestamp element
Latest version: 2.0.0-next.5

# PatternFly Elements Timestamp
     
A timestamp provides consistent formats for displaying date and time values.

Read more about Datetime in the [PatternFly Elements Timestamp documentation](https://patternflyelements.org/components/timestamp)

##  Installation

Load `<pfe-timestamp>` via CDN:

```html
<script src="https://unpkg.com/@patternfly/pfe-timestamp?module"></script>
```

Or, if you are using [NPM](https://npm.im), install it

```bash
npm install @patternfly/pfe-timestamp
```

Then once installed, import it to your application:

```js
import '@patternfly/pfe-timestamp';
```

## Usage

### Just the date: January 2, 2006
```html
<pfe-timestamp
  date="Mon Jan 2 15:04:05 EST 2006"
  date-format="long">
</pfe-timestamp>
```

### With time: Monday, January 2, 2006 at 3:04:05 PM EST
```html
<pfe-timestamp
  date="Mon Jan 2 15:04:05 EST 2006"
  date-format="full"
  time-format="long">
</pfe-timestamp>
```

### With an en-GB locale: Monday, 2 January 2006 at 15:04:05 GMT-5
You can use any locale here.
```html
<pfe-timestamp
  date="Mon Jan 2 15:04:05 EST 2006"
  date-format="full"
  time-format="long"
  locale="en-GB">
</pfe-timestamp>
```

### Relative time: 17 years ago
```html
<pfe-timestamp
  date="Mon Jan 2 15:04:05 EST 2006"
  relative>
</pfe-timestamp>
```
npm package: @patternfly/pfe-tools
Description: Development and build tools for PatternFly Elements and related projects
Latest version: 6.0.1

# `@patternfly/pfe-tools`

Tools and utilities for building PatternFly Elements and other design systems.

## Config

Repos using pfe-tools can customize the docs pages, dev server, and custom-elements manifest
generator by adding a `.pfe.config.json` file to the repository root.

See [config.ts](./config.ts) for info on what that file can contain.

## 11ty Helpers

- Helpers for collating and rendering [custom-elements manifests][cem] in 11ty
  sites.
- Various 11ty utility plugins

## test

Helpers for testing web components using [web test runner][wtr]

## dev-server

Preset [web-dev-server][wds] configuration.

### Troubleshooting

> I ran `npm start` but get `404 not found` when the dev server launches the browser

The dev server config in pfe-tools tries its best to find the root directory of your project,
but there are cases where this may not work. If you get a 404 error to index.html, 

1. Confirm that you have an `index.html` file in your repository root
2. Set the `rootDir` option to `pfeDevServerConfig`, e.g.
    ```js
    import { pfeDevServerConfig } from '@patternfly/pfe-tools/dev-server/config.js';

    export default pfeDevServerConfig({
      rootDir: '.',
    });
    ```

Make sure to do the same in `web-test-runner.config.js` as well, for your unit tests

[cem]: https://github.com/webcomponents/custom-elements-manifest/
[wds]: https://modern-web.dev/docs/dev-server/overview/
[wtr]: https://modern-web.dev/docs/test-runner/overview/
npm package: @patternfly/pfe-tooltip
Description: PatternFly Elements | Tooltip
Latest version: 2.0.0-next.9

# Tooltip
A tooltip is a floating text area triggered by a user that provides helpful or contextual information.

## Usage
A tooltip is used by wrapping an html element in the pfe-tooltip element along with contextual information to be displayed alongside of the element.  

Read more about tooltips in the [PatternFly Elements Tooltip documentation](https://patternflyelements.org/components/tooltip)

##  Installation

Load `<pfe-tooltip>` via CDN:

```html
<script src="https://unpkg.com/@patternfly/pfe-tooltip?module"></script>
```

Or, if you are using [NPM](https://npm.im), install it

```bash
npm install @patternfly/pfe-tooltip
```

Then once installed, import it to your application:

```js
import '@patternfly/pfe-tooltip';
```

## Usage


### Basic Tooltip 
```html
<pfe-tooltip>
    <div>
        This is An Element 
    </div>
    <div slot="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.
    </div>
</pfe-tooltip>
```

### Tooltip With Left Positioning (also available: top, right, bottom)
```html
<pfe-tooltip position="left">
    <div>
        This is An Element 
    </div>
    <div slot="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.
    </div>
</pfe-tooltip>
```

### Tooltip With Left Positioning And Offset
```html
<pfe-tooltip position="left" offset="10, 10">
    <div>
        This is An Element 
    </div>
    <div slot="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.
    </div>
</pfe-tooltip>
```
npm package: @patternfly/react-codemods
Description: _PatternFly React codemods are currently experimental only._
Author: Red Hat
Latest version: 2.0.2

# @patternfly/react-codemods

_PatternFly React codemods are currently experimental only._

This repository contains a collection of codemod scripts for use with
[JSCodeshift](https://github.com/facebook/jscodeshift) that help update Patternfly React projects.

## Setup & Run

1.  `yarn global add jscodeshift`
2.  `yarn install @patternfly/react-codemods`
3.  `jscodeshift -t node_modules/@patternfly/react-codemods/transforms/[transform].js [files]`
    * `path` - files or directory to transform;
    * use the `-d` option for a dry-run and use `-p` to print the output for comparison;
    * use the `--extensions` option if your files have different extensions than `.js` (for example, `--extensions js,jsx`);
    * if you use flowtype, you might also need to use `--parser=flow`;
    * see all available [jscodeshift options](https://github.com/facebook/jscodeshift#usage-cli).
4.  Review changes via git diff. Keep what you want, throw it out if you don't. Magic!

## Included Scripts

## `pf3-pf4`

Converts PF3 components of `patternfly-react` to compatible PF4 `@patternfly/react-core` components;

```sh
jscodeshift -t node_modules/@patternfly/react-codemods/transforms/pf3-pf4.js <path> [--component]=comma,separated,components
```

## Options
```text
--components     Comma separated list of components to transform. Defaults to "*". EX: --components=Button,Alert
```

## Components

### `Button`

### Supported Props
|  In Prop         | Out Prop     | Value Tranforms           |
|------------------|--------------|---------------------------|
| `block`          | `isBlock`    | n/a                       |
| `active`         | `isActive`   | n/a                       |
| `disabled`       | `isDisabled` | n/a                       |
| `componentClass` | `component`  | n/a                       |
| `bsClass`        | `undefined`  | n/a (removed)             |
| `bsStyle`        | `variant`    | primary     -> primary    |
|                  |              | secondary   -> secondary  |
|                  |              | danger      -> danger     |
|                  |              | link        -> link       |
|                  |              | info        -> secondary  |
|                  |              | `undefined` -> secondary  |

### Unsupported props
* `componentClass`
* `href`


#### Before

```jsx
import { Button } from 'patternfly-react';

const primary = <Button bsStyle="primary">Primary Button</Button>;
```

#### After

```jsx
import { Button } from '@patternfly/react-core';

const primary = <Button variant="primary">Primary Button</Button>;
```