open-index/open-npm huggingface dataset:
npm package: @pxblue/symbols-mui
Description: PX Blue symbols for Material UI
Author: px-blue
Latest version: 1.1.1
Deprecated: This package has been deprecated. Please update to the new @brightlayer-ui/symbols-mui.

# PX Blue Symbols for Material-UI
This library contains componentized svg symbols from [@pxblue/symbols](https://github.com/pxblue/symbols) for use in React applications using Material UI. The symbols are made available in the same way that Material UI exposes the [Material Icons](https://material-ui.com/style/icons/#svg-material-icons). 

## Installation
To install the PX Blue mui symbols from NPM as a dependency for your project, you can run one of the following commands in your project root:
```
npm install --save @pxblue/symbols-mui
or
yarn add @pxblue/symbols-mui
```

>**NOTE (Peer Dependencies):** Using this package requires you to have @material-ui/core and @material-ui/icons defined as dependencies in your project's package.json file.


## Usage

### Angular
This package is intended for use only in React applications. For a way to link svg symbols for use in Angular applications, see [@pxblue/symbols](https://github.com/pxblue/symbols).


### React
Once you have installed the npm module, you can import the symbol components into your application as follows:
```
import mySymbol from '@pxblue/symbols-mui/MySymbol;
...
<mySymbol></mySymbol>
```
If you are importing multiple symbols, you can save some space by using named imports from the package root:
```
import {FirstSymbol, SecondSymbol, ThirdSymbol} from '@pxblue/symbols-mui';
```

Symbol names are in TitleCase - for a list of available symbols, refer to [@pxblue/symbols](https://github.com/pxblue/symbols/blob/master/README.md) or look at our live [demo](http://pxblue.github.io/style/iconography).

## Building Symbol Set (for contributors)
To build the symbols set, e.g. when new symbols are added:

```
yarn install
yarn run svgr
```
or
```
yarn install
yarn run mui
```
npm package: @pxblue/tag
Description: A script that can be used to automatically tag packages in a continuous integration pipeline.
Author: Power Xpert Blue
Latest version: 1.0.2
Deprecated: This package has been deprecated. Please update to the new @brightlayer-ui/tag.

# @pxblue/tag

This Command Line tool is a utility for automatically creating tags and github releases through a continuous integration pipeline.
Given a `package.json` and a `CHANGELOG.md`, it will parse out the latest release notes and publish the latest release.

## Prerequisites

In order to use this utility you must have the following installed:

-   [NodeJS](https://nodejs.org/en/download/) 12+
-   npm
-   [Github CLI](https://cli.github.com/)

## Usage

You can use this package by running it in the root directory of your project with npx (recommended):

```
npx -p @pxblue/tag pxb-tag -b <branch-name> -s <tag-suffix>
```

> The `root` directory assumes a `package.json` and a `CHANGELOG.md` are placed within the same folder.

#### Available options

The following table list out some options for the `pxb-tag` command. All these options can be configured:

| Option | Description                           |
| ------ | ------------------------------------- |
| `-b`   | (default: dev) The branch you are on. |
| `-s`   | (default: '') The tag suffix.         |

> The branch flag is used to determine whether a package should be tagged. Tags may only be created for the master branch (-b master).
npm package: @pxblue/themes
Description: PXBlue themes for Eaton applications
Author: PX Blue
Latest version: 3.0.2
Deprecated: @pxblue/themes has been split into separate packages for each supported framework. Please update to @brightlayer-ui/angular-themes, @brightlayer-ui/react-themes, or @brightlayer-ui/react-native-themes to stay up to date with the latest updates
npm package: @pxblue/types
Description: Type definitions shared between PX Blue packages
Author: px-blue
Latest version: 2.0.0
Deprecated: This package has been deprecated. Please update to the new @brightlayer-ui/types.

# PX Blue Types

## Installation
```
yarn add --dev @pxblue/types
```

## Summary
This package contains type definitions shared across other PX Blue packages. Most PX Blue packages are written in TypeScript and export their own types, but this package contains ones that are shared to avoid code duplication.

The following types are exposed:
- `PXBlueColor`

This package can be viewed on NPM as [@pxblue/types](https://www.npmjs.com/package/@pxblue/types)
npm package: @pxblue/visualizations
Description: Base configurations for assorted HighCharts graph types for PX Blue.
Author: pxblue
Latest version: 1.0.7
Deprecated: This package has been replaced by @brightlayer-ui/highcharts, please update your dependencies

# Visualizations
This package contains basic configuration settings for HighCharts line, pie, bar, and donut graphs for use with PX Blue. 

## Installation
Install with npm
```
npm install --save @pxblue/visualizations
```
or yarn
```
yarn add @pxblue/visualizations
```

## Basic Usage
The fastest way to use these configurations is to load one (or more) of the sample graphs.

```
import { 
    lineSample, 
    pieSample, 
    donutSample, 
    barSample 
} from '@pxblue/visualizations/highcharts/samples'; 
```

and then use them as placeholders in your application.

For Angular:
```
import { Chart } from 'angular-highcharts';
...
let lineChart = new Chart(lineSample);
```

For React:
```
import ReactHighcharts from 'react-highcharts';
...
<ReactHighcharts config={lineSample}/>
```

## Advanced Usage
When you are ready to build charts of your own, you can choose to extend one of the sample charts, or you can start from one of the base configurations. If you use the base configurations, your graphs will not draw (and your app may not even render) until you have supplied all of the requisite configuration information. Typically this means specifying a data source and configurations for the x and y axis.

In order to extend the basic configuration objects, you will need to make a clone of the object and then you will be able to directly manipulate the various properties. We recommend you use [lodash.clonedeep](https://www.npmjs.com/package/lodash.clonedeep) to simplify this process. If you do not properly deep clone the object, you may end up with shared references and changes being applied in certain places you do not intend.

```
import { pieBaseConfig } from '@pxblue/visualizations/highcharts';
import clonedeep from 'lodash.clonedeep';
...
let myPieConfig = clonedeep(pieBaseConfig);
myPie.series = [{
    name: 'Browsers',
    data: [
        { name: 'Chrome', y: 61.41 }, 
        { name: 'Internet Explorer', y: 11.84 }, 
        { name: 'Firefox', y: 10.85 }
    ]
}];
```

Please refer to the [Highcharts API](https://api.highcharts.com/highcharts/) for more information about all of the properties that you can specify as part of your chart configuration.

## Additional Utilities
This package also includes several utility functions and style variables to make it easier for users to customize certain parts of the chart configuration. Specific documentation for these functions/variables can be found in the source files.

```
import {
    OpenSans,       
    pxblueColors,
    sizes
} from '@pxblue/visualizations/styles';

import {
    getRandomData,       
    sharedTooltipFormatter,
    sharedTimeTooltipormatter,
    simpleTooltipFormatter
} from '@pxblue/visualizations/utilities';
```