open-index/open-npm huggingface dataset:
npm package: @patternfly-java/charts
Description: Web Components wrapper around PatternFly React Charts
Author: Harald Pehl
Latest version: 0.7.3

# PatternFly Java Charts

This package contains a subset of the [PatternFly React Charts](https://www.patternfly.org/charts/about-charts) wrapped as web components.

The package is a prerequisite if you want to use charts in [PatternFly Java](https://patternfly-java.github.io/), but can also be used independently.

## Available charts

The following web components are available:

- `<pfj-chart-donut>` → [`ChartDonut`](https://www.patternfly.org/charts/donut-chart)
- `<pfj-chart-donut-threshold>` → [`ChartDonutThreshold`](https://www.patternfly.org/charts/donut-utilization-chart#donut-utilization-threshold-examples)
- `<pfj-chart-donut-utilization>` → [`ChartDonutUtilization`](https://www.patternfly.org/charts/donut-utilization-chart#donut-utilization-examples)
- `<pfj-chart-bullet>` → [`ChartBullet`](https://www.patternfly.org/charts/bullet-chart)
- `<pfj-chart-pie>` → [`ChartPie`](https://www.patternfly.org/charts/pie-chart)

## Installation

Install the package using npm:

```
npm install @patternfly-java/charts
```

Import it in your JavaScript file:

```js
import "@patternfly-java/charts/dist/charts";
```

## Usage

```html
<pfj-chart-donut
        id="chart-donut-0"
        width="300"
        height="300"
        title="Pets"
        sub-title="Count"
></pfj-chart-donut>

<pfj-chart-donut-utilization
        width="300"
        height="300"
        title="60%"
        sub-title="Utilization"
        data='{"x":"Storage","y":60}'
></pfj-chart-donut-utilization>

<pfj-chart-donut-threshold
        aria-desc="Storage capacity"
        aria-title="Donut utilization chart with static threshold example"
        constrain-to-visible-area
        data='[{"x":"Warning at 60%","y":60},{"x":"Danger at 90%","y":90}]'
        width="300"
        height="300"
>
    <pfj-chart-donut-utilization
            id="chart-donut-utilization-0"
            sub-title="of 100 GBps"
            title="0%"
            thresholds='[{"value": 60}, {"value": 90}]'
    ></pfj-chart-donut-utilization>
</pfj-chart-donut-threshold>

<script type="module">
    const cd = document.getElementById('chart-donut-0');
    cd.data = [
        {x: 'Cats', y: 25},
        {x: 'Dogs', y: 55},
        {x: 'Birds', y: 20}
    ];
    cd.labels = ({datum}) => `${datum.x}: ${datum.y}%`;

    const cdu = document.getElementById('chart-donut-utilization-0');
    cdu.data = {x: 'Storage capacity', y: 0};
    setInterval(() => {
        let previous = cdu.data.y;
        let current = (previous + 10) % 100;
        cdu.data = {x: 'Storage capacity', y: current};
        cdu.title = `${current}%`;
        cdu.subTitle = `${current} of 100 GBps`;
    }, 1000);
</script>
```
npm package: @patternfly-java/core
Description: CSS for PatternFly Java.
Author: Harald Pehl
Latest version: 0.7.3

# PatternFly Java Core

CSS styles for [PatternFly Java](https://patternfly-java.github.io/).

This package provides the CSS only.

## Installation

Install the package using npm:

```
npm install @patternfly-java/core
```

## Usage

Import the CSS in your stylesheet or JavaScript entry point:

```css
@import "@patternfly-java/core";
```

## Requirements

This package requires [PatternFly 6](https://www.patternfly.org/) CSS ([
`@patternfly/patternfly`](https://www.npmjs.com/package/@patternfly/patternfly)) to be present, as it references PatternFly design tokens for colors, spacing, borders, and typography.

## License

Apache-2.0
npm package: @patternfly-java/finder
Description: CSS for the PatternFly Java finder extension.
Author: Harald Pehl
Latest version: 0.7.3

# PatternFly Java Finder

CSS styles for the [PatternFly Java](https://patternfly-java.github.io/extensions/finder) finder extension. The finder is a macOS Finder-style column browser for hierarchical navigation.

This package provides the CSS only. It is meant to be used together with the
[
`org.patternfly:patternfly-java-finder`](https://central.sonatype.com/artifact/org.patternfly/patternfly-java-finder) Maven artifact, which contains the Java component implementation.

## Installation

Install the package using npm:

```
npm install @patternfly-java/finder
```

## Usage

Import the CSS in your stylesheet or JavaScript entry point:

```css
@import "@patternfly-java/finder";
```

## Requirements

This package requires [PatternFly 6](https://www.patternfly.org/) CSS ([
`@patternfly/patternfly`](https://www.npmjs.com/package/@patternfly/patternfly)) to be present, as it references PatternFly design tokens for colors, spacing, borders, and typography.

## License

Apache-2.0
npm package: @patternfly-test/react-codemods
Description: This repository contains a collection of codemod scripts for use with [JSCodeshift](https://github.com/facebook/jscodeshift) that help update Patternfly React projects.
Author: Red Hat
Latest version: 0.1.1

# @patternfly-test/react-codemods

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-test/react-codemods`
3. `jscodeshift -t node_modules/@patternfly-test/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

### `patternfly-react-to-react-core`

Converts imports of `patternfly-react` to compatible `@patternfly-test/react-core`;

```sh
jscodeshift -t node_modules/@patternfly-test/react-codemods/transforms/patternfly-react-to-react-core.js <path>
```
#### Before
```jsx
import { Button, Alert } from 'patternfly-react';
```

#### After
```jsx
import { Button, Alert } from '@patternfly-test/react-core';
```
npm package: @patternfly-test/react-console
Description: This library provides a set of Console React components for use with the PatternFly reference implementation.
Author: Red Hat
Latest version: 0.3.0

# @patternfly-react/console

This package provides VncConsole and SerialConsole React components to be used alongside patternfly-react.

**_The below commands are temporary and will be replaced once this repo starts using Lerna._**

### 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 `build:console:*`.

### Testing

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

```
yarn test packages/console
```

### Publishing

```
yarn publish
```