open-index/open-npm huggingface dataset:
npm package: @redallen-patternfly/eslint-plugin-patternfly-react
Description: This package provides PatternFly React all ESLint rules bundled together for use in PatternFly React and downstream applications.
Author: Red Hat
Latest version: 0.7.0
Deprecated: this package has been deprecated. use @patternfly/eslint-plugin-patternfly-react instead.

# eslint-plugin-patternfly-react

This package provides PatternFly React all ESLint rules bundled together for use in PatternFly React and downstream applications.

### Installing

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

or

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

### Usage

Add eslint-plugin-patternfly-react to your `.eslintrc.json` or `.eslintrc.js`.

.eslintrc.json:

```json
{
  "plugins": ["plugin:patternfly-react/recommended"]
}
```

.eslintrc.js:

```javascript
module.exports = {
  root: true,
  extends: ['plugin:patternfly-react/recommended']
};
```

### Building

```
yarn build
```

Note the build scripts for this are located in the root package.json under `yarn build`.

### Publishing

```
yarn publish
```
npm package: @redallen-patternfly/patternfly-react
Description: This library provides a set of common React components for use with the PatternFly reference implementation.
Author: Red Hat
Latest version: 2.34.0
Deprecated: this package has been deprecated. use @patternfly/patternfly-react instead.

# patternfly-react

This package provides Core PatternFly React components for PatternFly 3.

### Prerequisite

#### Node Environment

This project currently supports Node [Active LTS](https://github.com/nodejs/Release#release-schedule) releases. Please stay current with Node Active LTS when developing patternfly-react.

For example, to develop with Node 8, use the following:

```
nvm install 8
nvm use 8
```

This project also requires a Yarn version of >=1.6.0. The latest version can be installed [here](https://yarnpkg.com/).

### Installing

```
yarn add patternfly-react
```

or

```
npm install patternfly-react --save
```

### Usage

```javascript
import { Alert } from 'patternfly-react';
```

#### Styling with LESS:

Example with LESS:

```
@import "~bootstrap/less/variables";
@import "~patternfly/dist/less/variables";
@import "~patternfly-react/dist/less/patternfly-react.less";
```

#### Using patterfly-react Sass files

As an alernative to consuming the `patternfly-react.css` file (found in `dist/css`), you can build patternfly-react styles into your css by including the Sass partials from `dist/sass`. The partial `_patternfly-react.scss` will pull in all the partials required for the patternfly-react components. When using the patternfly-react Sass files, you **MUST** include bootstrap and patternfly variables and mixins. An example of the required imports can be found in [patternfly-react.scss](./packages/patternfly-3/patternfly-react/sass/patternfly-react.scss).

### Building

```
yarn build
```

Note the build scripts for this are located in the root package.json under `yarn build`.

### Testing

Testing is done at the root of this repo. To only run the patternfly-react tests:

```
yarn test packages/patternfly-3/patternfly-react
```

### Publishing

```
yarn publish
```

### Storybook UI Development

This project uses [React Storybook](https://storybook.js.org/) to test and demo new PaternFly 3React UI components. You can view our current storybook [here](http://patternfly-react.surge.sh/).

How to use Storybook locally:

```
yarn install
yarn start
```

How to deploy storybook to github pages in your fork:

```
yarn storybook:build
yarn storybook:deploy
```

To deploy Storybook to a remote other than `origin`, pass a `--remote` flag to `yarn storybook:deploy`.
For example, to deploy to your `upstream` remote:

```
yarn storybook:deploy --remote=upstream
```

To deploy Storybook to a target branch and serve with rawgit instead of gh-pages, pass `--branch` flag to `yarn storybook:deploy`. This will create a new branch to serve your Storybook (and will be useful if you have multiple open pull requests).

For example, say you have `feature-branch`, you can deploy the storybook to a rawgit branch with:

```
yarn storybook:deploy --branch=feature-branch-storybook
```
npm package: @redallen-patternfly/patternfly-react-extensions
Description: This library provides an extended set of React components for use with the PatternFly reference implementation.
Author: Red Hat
Latest version: 2.21.0
Deprecated: this package has been deprecated. use @patternfly/patternfly-react-extensions instead.

# patternfly-react-extensions

This package provides extensions to the Patternfly React components to be used alongside patternfly-react.
The components in this package do not yet have associated patterns found on [PatternFly.org](https://www.patternfly.org/).

### Installing

```
yarn add patternfly-react-extensions
```

or

```
npm install patternfly-react-extension --save
```

### Usage

```javascript
import { <component> } from 'patternfly-react-extensions';
```

#### Styling:

Example with LESS:

```
@import "~bootstrap/less/variables";
@import "~patternfly/dist/less/variables";
@import "~patternfly-react/dist/less/patternfly-react.less";
@import "~patternfly-react-extensions/dist/less/patternfly-react-extensions.less";
```

### Building

```
yarn build
```

Note the build scripts for this are located in the root package.json under `yarn build`.

### Testing

Testing is done at the root of this repo. To only run the extensions tests:

```
yarn test packages/patternfly-3/patternfly-react-extensions
```

### Publishing

```
yarn publish
```
npm package: @redallen-patternfly/react-codemods
Description: _PatternFly React codemods are currently experimental only._
Author: Red Hat
Latest version: 1.6.0
Deprecated: this package has been deprecated. use @patternfly/react-codemods instead.

# @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>;
```
npm package: @redallen-patternfly/react-console
Description: This library provides a set of Console React components for use with the PatternFly reference implementation.
Author: Red Hat
Latest version: 1.15.0
Deprecated: this package has been deprecated. use @patternfly/react-console instead.

# @patternfly/react-console

This package provides VncConsole, SerialConsole and DesktopViewer React components
to be used alongside patternfly-react to access virtual machine or server consoles.

### Installing

```
yarn add @patternfly/react-console
```

or

```
npm install @patternfly/react-console --save
```

### Usage

```javascript
import { VncConsole, SerialConsole } from '@patternfly/react-console';
```

#### Styling:

Example with LESS:

```
@import "~bootstrap/less/variables";
@import "~patternfly/dist/less/variables";
@import "~patternfly-react/dist/less/patternfly-react.less";
@import "~xterm/dist/xterm.css";
@import "~@patternfly/react-console/dist/less/console.less";
```

### Building

```
yarn build
```

Note the build scripts for this are located in the root package.json under `yarn build`.

### Testing

Testing is done at the root of this repo. To only run the console tests:

```
yarn test packages/console
```

### Publishing

```
yarn publish
```
npm package: @redallen-patternfly/react-docs
Description: PatternFly React Docs
Author: Red Hat
Latest version: 3.26.4
Deprecated: this package has been deprecated. use @patternfly/react-docs instead.

# PatternFly React Docs
This site uses gatsby.

For an overview of the project structure please refer to the [Gatsby documentation - Building with Components](https://www.gatsbyjs.org/docs/building-with-components/).



### Note: All commands below assume you are on the root directory in this repository.
## Install
Run to install all the dependencies
```sh
lerna bootstrap
```

## Running
To start the site locally.
```sh
yarn build && yarn start:pf4
```

## Building
To build the site.
```sh
yarn build:site
```

## Live examples
### Disabling globally
You can turn off the functionality to live edit the examples globally by settings GATSBY_LIVE_EXAMPLES to false, either by editing [.env.development](./.env.development) and [.env.production](./.env.production) or by setting it in the CLI prior to starting the docs:
```sh
GATSBY_LIVE_EXAMPLES=false yarn start:pf4
```
### Other example settings
There are some special static fields you can specify in the example to change behavior:
```sh
// Sets the title for the example
static title = 'Example title';

// Sets the description for the example
static description = 'Example description';

// True by default, set to false to disable live editing for this example
static live = false;

// Pass imports into the liveScope object so it is available to the live editor.
// By default, the live editor only knows about React.*, react-core components, react-icons, and the react-styles css function
// If you have additional imports in your examples, they can be passed to the live editor scope like this:
static liveScope = { spacingStyles };

// Additional styles relevant to the example display can be added via a static field getContainerProps.
// getContainerProps is an import to a .js file that has content such as:
/*
import { css, StyleSheet } from '@patternfly/react-styles';
const styles = StyleSheet.create({
  demoLayout: {
    '& > .pf-c-alert': {
      marginBottom: '0.5rem'
    }
  }
});
export default () => ({ className: css(styles.demoLayout) });
*/
static getContainerProps = getContainerProps;

```
In the examples *.docs.js file, you can specify these properties:
```sh
// Main title for the examples
title: 'Alert',

// Components to display in the props table
components: {
  Alert
},

// Enums that need to be evaluated for the props table
enumValues: {
  'Object.values(AlertVariant)': Object.values(AlertVariant)
},

// The examples
examples: [SuccessExample, DangerExample, InfoExample, WarningExample],
// True to show links instead of inline examples, also turns live editing off

fullPageOnly: false
```
npm package: @redallen-patternfly/react-icons
Description: PatternFly 4 Icons as React Components
Author: Red Hat
Latest version: 7.0.0
Deprecated: this package has been deprecated. use @patternfly/react-icons instead.

# @patternfly/react-icons

PatternFly 4 Icons as React Components.

## Usage

```jsx
import React from 'react';
import { TimesIcon } from '@patternfly/react-icons';

const closeIcon = <TimesIcon />;
```

For a list of the available icons please refer to the [PatternFly React Docs](https://patternfly-react.surge.sh/patternfly-4/styles/icons)

Every icon component has the following props:

| Prop  | Description                                                      | Default        |
| ----- | ---------------------------------------------------------------- | -------------- |
| color | Color of the icon (e.g. red, white, #c3ee)                       | 'currentColor' |
| size  | Size of the icon. There are 4 different sizes: sm, md, lg and xl | sm             |
| title | Label of the icon                                                | null           |

## Adding Icons

Icons for this package are generated from the `@fortawesome/free-solid-svg-icons` package. To add more to what is generated, modify the [icons.js](./build/icons.js) file in the build folder.

If you have some custom icon defined by svg path the best way to add such icon to this repository is to add it's path definition in [pfIcons.js](./build/pfIcons.js) file in the build folder.
```JS
module.exports = {
  pfIcons: {
    // ... other icon defintions
    bigPlus: {width: 1024, height: 1024, svgPathData: 'M2 1 h1 v1 h1 v1 h-1 v1 h-1 v-1 h-1 v-1 h1 z'}
  }
}
```
npm package: @redallen-patternfly/react-integration
Description: Integration testing for PF4 using demo applications
Author: Red Hat
Latest version: 1.0.26
Deprecated: this package has been deprecated. use @patternfly/react-integration instead.

# react-integration

1. Make your changes in packages/patternfly-4/react-core
2. `yarn build` in packages/patternfly-4/react-core
3. `yarn integration:setup` in packages/patternfly-4/react-integration
4. Update the demo in packages/patternfly-4/react-integration/demo-app-ts/src/App.tsx
5. `yarn build:demo` in packages/patternfly-4/react-integration/demo-app-ts
npm package: @redallen-patternfly/react-tokens
Description: This library provides access to the design tokens of PatternFly 4 from JavaScript
Author: Red Hat
Latest version: 6.0.0
Deprecated: this package has been deprecated. use @patternfly/react-tokens instead.

# @patternfly/react-tokens

## Installation

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

or

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

## Usage

All Tokens and their corresponding values can be viewed on the
[PatternFly React Tokens][token-page] page.

#### Import tokens

```js
import { global_BackgroundColor_100 } from '@patternfly/react-tokens';
```

#### Each token as three properties

- `name`: The CSS custom property name.
- `value`: The default value for the custom property.
- `var`: The property name wrapped in `var()`.

```js
import { global_BackgroundColor_100 } from '@patternfly/react-tokens';

global_BackgroundColor_100.name === '--pf-global--BackgroundColor--100'; //true
global_BackgroundColor_100.value === '#fff'; // true
global_BackgroundColor_100.var === 'var(--pf-global--BackgroundColor--100)'; //true
```

[token-page]: https://patternfly-react.surge.sh/patternfly-4/styles/tokens