open-index/open-npm huggingface dataset:
npm package: @pxblue/angular-template-authentication
Description: Authentication template for Angular projects created with the PX Blue CLI.
Latest version: 3.0.0
Deprecated: This package has been deprecated. Please update to the new @brightlayer-ui/angular-template-authentication.

# Blank Template

![npm (scoped)](https://img.shields.io/npm/v/@pxblue/angular-template-authentication?color=%23007bc1&label=%40pxblue%2Fangular-template-authentication)

This is an official PX Blue template for use with the [PX Blue CLI](https://www.npmjs.com/package/@pxblue/cli).

This template installs the basic PX Blue libraries for themes and components and configures the application to use them. It includes the PX Blue Authentication workflow.

## Usage

```sh
npx -p @pxblue/cli pxb new angular --name=myapp --template=authentication
```
npm package: @pxblue/angular-template-blank
Description: The base template for Angular projects created with the PX Blue CLI.
Latest version: 2.0.0
Deprecated: This package has been deprecated. Please update to the new @brightlayer-ui/angular-template-blank.

# Blank Template

![npm (scoped)](https://img.shields.io/npm/v/@pxblue/angular-template-blank?color=%23007bc1&label=%40pxblue%2Fangular-template-blank)

This is an official PX Blue template for use with the [PX Blue CLI](https://www.npmjs.com/package/@pxblue/cli).

This template installs the basic PX Blue libraries for themes and components and configures the application to use them. It includes a simple placeholder screen that you can replace with your own application content.

## Usage

```sh
npx -p @pxblue/cli pxb new angular --name=myapp --template=blank
```
npm package: @pxblue/angular-template-routing
Description: Routing template for Angular projects created with the PX Blue CLI.
Latest version: 2.0.0
Deprecated: This package has been deprecated. Please update to the new @brightlayer-ui/angular-template-routing.

# Routing Template

![npm (scoped)](https://img.shields.io/npm/v/@pxblue/angular-template-routing?color=%23007bc1&label=%40pxblue%2Fangular-template-routing)

This is an official PX Blue template for use with the [PX Blue CLI](https://www.npmjs.com/package/@pxblue/cli).

This template installs the basic PX Blue libraries for themes and components and configures the application to use them. It includes a drawer implementation with basic routing.

## Usage

```sh
npx -p @pxblue/cli pxb new angular --name=myapp --template=routing
```
npm package: @pxblue/angular-themes
Description: Angular themes for PX Blue applications
Author: PX Blue
Latest version: 6.3.0
Deprecated: This package has been deprecated. Please update to the new @brightlayer-ui/angular-themes.

# PX Blue themes for Angular applications

[![](https://img.shields.io/circleci/project/github/pxblue/angular-themes/master.svg?style=flat)](https://circleci.com/gh/pxblue/angular-themes/tree/master)
[![](https://img.shields.io/npm/v/@pxblue/angular-themes.svg?label=@pxblue/angular-themes&style=flat)](https://www.npmjs.com/package/@pxblue/angular-themes)

This package provides theming support for Eaton applications using the PX Blue design system. It includes resources for developers using Angular w/ [Angular Material](https://www.npmjs.com/package/@angular/material). This package comes with two theme options: a Blue theme (standard) and a Dark theme.

For other frameworks, check out our related packages:

-   [@pxblue/react-themes](https://www.npmjs.com/package/@pxblue/react-themes)
-   [@pxblue/react-native-themes](https://www.npmjs.com/package/@pxblue/react-native-themes)

## Installation

Install with npm

```shell
npm install --save @pxblue/angular-themes
```

or yarn

```shell
yarn add @pxblue/angular-themes
```

## Usage

In order to use the PX Blue themes and font (Open Sans), you will need to modify your angular.json file "styles" entries (there is one under "build" and one under "test") to include the PX Blue themes and Open Sans reference:

```js
"styles": [
    "src/styles.scss",
    "./node_modules/@pxblue/angular-themes/theme.scss",
    "./node_modules/@pxblue/angular-themes/open-sans.scss"
],
```

Alternatively, you can also import the theme file in your top-level SCSS file.

```scss
// in styles.scss or your top-level scss file
import '~@pxblue/angular-themes/theme.scss'
import '~@pxblue/angular-themes/open-sans.scss'
```

You can then apply the theme to your application by adding the proper class to your application's body element:

```HTML
// Default Theme
<body class="pxb-blue">

// Dark Theme
<body class="pxb-blue-dark">
```

> If you do not specify a theme class, your application will use the default Material theme.

### Updating From Version 5 ~> 6

In version 6, we have migrated from the deprecated `typeface-open-sans` package to `@fontsource/open-sans` (bundled with the PX Blue themes). You'll need to update your Open Sans references in angular.json:

Before:

```js
'./node_modules/typeface-open-sans';

```

After:

```js
'./node_modules/@pxblue/angular-themes/open-sans.scss';

```

## Demo

[View on Stackblitz](https://stackblitz.com/github/pxblue/angular-showcase-demo/tree/master)
npm package: @pxblue/chartjs
Description: PXBlue ChartJS configuration objects
Author: PX Blue
Latest version: 1.0.0
Deprecated: This package has been deprecated. Please update to the new @brightlayer-ui/chartjs.

# ChartJS Configurations
[![](https://img.shields.io/npm/v/@pxblue/chartjs.svg?label=@pxblue/chartjs&style=flat)](https://www.npmjs.com/package/@pxblue/chartjs)
[![](https://img.shields.io/circleci/project/github/pxblue/chartjs/master.svg?style=flat)](https://circleci.com/gh/pxblue/chartjs/tree/master)

This package contains basic support for ChartJS line, pie, bar, and donut graphs for use with PX Blue. 

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

## Basic Usage

To use this library, specify in your HTML where you want your graph to be rendered: 
```
<canvas id="graphId"></canvas>
```

Import the chart generator functions from the package:

```
import { 
    drawGraph, 
    createLineChartConfig, 
    createPieChartConfig, 
    createBarChartConfig, 
    createDonutChartConfig
} from '@pxblue/chartjs'; 
```

and then use these functions create PXBlue-themed chart configurations.

```
import { createLineChartConfig, drawChart } from '@pxblue/chartjs'
...
const lineChartConfig = createLineChartConfig();
drawChart(lineChartConfig, 'graphId');
```
This will use default sample data to render a chart in your application.  

Read the following section for instructions on specifying your own configuration/data.

## Advanced Usage
When you are ready to customize charts of your own, you can modify the returned configuration object before drawing it. 

```
import { createPieChartConfig, drawChart } from '@pxblue/chartjs';
...
const config = createPieChartConfig();
config.data.datasets[0].backgroundColor = ['red', 'blue', 'green'];
drawChart(config, 'pie-chart-id');

```
This configuration object will accept any property than can be supplied to a standard ChartJS config object ([API Reference](https://www.chartjs.org/docs/latest/)).

## Demos
| Framework           | Live Examples  |
| ---------------- |------------------|
| Angular | [View on Stackblitz](https://stackblitz.com/github/pxblue/chartjs/tree/master/angular-demo)
| React | [View on Code Sandbox](https://codesandbox.io/s/github/pxblue/chartjs/tree/master/react-demo)
npm package: @pxblue/colors
Description: PX Blue colors for Eaton applications
Author: px-blue
Latest version: 3.0.1
Deprecated: This package has been deprecated. Please update to the new @brightlayer-ui/colors.

# PX Blue Colors

This package contains PX Blue UI color definitions. These are intended for use as primary UI colors.

It contains the following color defintions:

```
blue / $pxb-blue
white / $pxb-white
gray / $pxb-gray
black / $pxb-black
darkBlack / $pxb-darkBlack
red / $pxb-red
orange / $pxb-orange
gold / $pxb-gold
yellow / $pxb-yellow
green / $pxb-green
lightBlue / $pxb-lightBlue
purple / $pxb-purple
```

These all have color definitions for the following values: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900.

## Installation

Install with npm

```
npm install --save @pxblue/colors
```

or yarn

```
yarn add @pxblue/colors
```

## Usage

Incorporating these colors into your project is handled differently depending on the framework that you are using.

### Angular or Ionic

```
// in styles.scss or your top-level sass file
@import '~@pxblue/colors/palette.scss'
...
background-color: map-get($pxb-blue, 500)
```

### React or React Native

```
import * as Colors from '@pxblue/colors';
...
<div style={{background: Colors.blue['500']}}/>
```
npm package: @pxblue/colors-branding
Description: Eaton Branding colors for Eaton applications
Author: px-blue
Latest version: 3.1.0
Deprecated: This package has been deprecated. Please update to the new @brightlayer-ui/colors-branding.

# Branding Colors Colors

This package contains branding color definitions. These are intended for use in supplemental materials (e.g., charting), but not as primary UI colors.

It contains the following color definitions:

```
$brand-blue
$brand-teal
$brand-citron
$brand-pine
$brand-emerald
$brand-wine
$brand-crimson
$brand-sunset
$brand-rust
$brand-navy
$brand-sky
$brand-sage
$brand-toad
$brand-butter
$brand-goldenrod
$brand-trophy
```

## Installation

Install with npm

```
npm install --save @pxblue/colors-branding
```

or yarn

```
yarn add @pxblue/colors-branding
```

## Usage

Incorporating these colors into your project is handled differently depending on the framework that you are using.

### Angular or Ionic

```
// in styles.scss or your top-level sass file
@import '~@pxblue/colors-branding/palette.scss'
...
background-color: map-get($brand-rust, 500)
```

### React or React Native

```
import * as Colors from '@pxblue/colors-branding';
...
<div style={{background: Colors.rust['500']}}/>
```
npm package: @pxblue/cra-template-blank
Description: The base template for React projects created with the PX Blue CLI.
Latest version: 1.1.2
Deprecated: This package has been deprecated. Please update to the new @brightlayer-ui/cra-template-blank.

# Blank Template (JavaScript)

![npm (scoped)](https://img.shields.io/npm/v/@pxblue/cra-template-blank?color=%23007bc1&label=%40pxblue%2Fcra-template-blank)

This is an official PX Blue template for use with the [Create React App](https://create-react-app.dev/) CLI. It is also used internally by the [PX Blue CLI](https://www.npmjs.com/package/@pxblue/cli).

This template installs the basic PX Blue libraries for themes and components and configures the application to use them. It includes a simple placeholder screen that you can replace with your own application content.

## Usage
This template can be used with Create React App:
```sh
npx create-react-app myapp --template @pxblue/blank
```
or using the PX Blue CLI:
```sh
npx -p @pxblue/cli pxb new react --name=myapp --language=js --template=blank
```

## Project Structure
Projects created using this template will start out with the following file structure:

```
└── /src
    |── index.jsx                           // the root file that renders the application (Theme Provider & CSS Baseline styles)
    └── App.jsx                             // a sample landing page
```
npm package: @pxblue/cra-template-blank-typescript
Description: The base template for React projects created with the PX Blue CLI.
Latest version: 1.1.2
Deprecated: This package has been deprecated. Please update to the new @brightlayer-ui/cra-template-blank-typescript.

# Blank Template (TypeScript)

![npm (scoped)](https://img.shields.io/npm/v/@pxblue/cra-template-blank-typescript?color=%23007bc1&label=%40pxblue%2Fcra-template-blank-typescript)

This is an official PX Blue template for use with the [Create React App](https://create-react-app.dev/) CLI. It is also used internally by the [PX Blue CLI](https://www.npmjs.com/package/@pxblue/cli).

This template installs the basic PX Blue libraries for themes and components and configures the application to use them. It includes a simple placeholder screen that you can replace with your own application content.

## Usage
This template can be used with Create React App:
```sh
npx create-react-app myapp --template @pxblue/blank-typescript
```
or using the PX Blue CLI:
```sh
npx -p @pxblue/cli pxb new react --name=myapp --language=ts --template=blank
```

## Project Structure
Projects created using this template will start out with the following file structure:

```
└── /src
    |── index.tsx                           // the root file that renders the application (Theme Provider & CSS Baseline styles)
    └── App.tsx                             // a sample landing page
```
npm package: @pxblue/cra-template-routing
Description: A template with pre-configured routing for React projects created with the PX Blue CLI.
Latest version: 1.1.2
Deprecated: This package has been deprecated. Please update to the new @brightlayer-ui/cra-template-routing.

# Routing Template (JavaScript)

![npm (scoped)](https://img.shields.io/npm/v/@pxblue/cra-template-routing?color=%23007bc1&label=%40pxblue%2Fcra-template-routing)

This is an official PX Blue template for use with the [Create React App](https://create-react-app.dev/) CLI. It is also used internally by the [PX Blue CLI](https://www.npmjs.com/package/@pxblue/cli).

This template includes the installation and initial setup of routing using [React Router](https://reactrouter.com/). It includes several placeholder routes/screens and a [Drawer](https://pxblue-components.github.io/react/?path=/info/components-drawer--get-read-me-story) navigator from the PX Blue [React Component Library](https://www.npmjs.com/package/@pxblue/react-components).

## Usage
This template can be used with Create React App:
```sh
npx create-react-app myapp --template @pxblue/routing
```
or using the PX Blue CLI:
```sh
npx -p @pxblue/cli pxb new react --name=myapp --language=js --template=routing
```

## Project Structure
Projects created using this template will start out with the following file structure:

```
└── /src
    |── index.jsx                           // the root file that renders the application (Theme Provider, Router, & CSS Baseline styles)
    |── App.jsx                             // sets up the DrawerLayout component
    |── /components                           
    │   └── Logo.jsx                        // PXB spinning logo graphic
    |── /contexts                           
    │   └── drawerContextProvider.jsx       // creates a Context to allow pages to open/close the navigation drawer
    |── /pages                              // sample application pages
    └── /router
        |── drawer.jsx                      // the contents of the navigation drawer
        |── main.jsx                        // React Router route configuration
        └── routes.jsx                      // route definitions for use in the Router
```
npm package: @pxblue/cra-template-routing-typescript
Description: A template with pre-configured routing for React projects created with the PX Blue CLI.
Latest version: 1.1.2
Deprecated: This package has been deprecated. Please update to the new @brightlayer-ui/cra-template-routing-typescript.

# Routing Template (TypeScript)

![npm (scoped)](https://img.shields.io/npm/v/@pxblue/cra-template-routing-typescript?color=%23007bc1&label=%40pxblue%2Fcra-template-routing-typescript)

This is an official PX Blue template for use with the [Create React App](https://create-react-app.dev/) CLI. It is also used internally by the [PX Blue CLI](https://www.npmjs.com/package/@pxblue/cli).

This template includes the installation and initial setup of routing using [React Router](https://reactrouter.com/). It includes several placeholder routes/screens and a [Drawer](https://pxblue-components.github.io/react/?path=/info/components-drawer--get-read-me-story) navigator from the PX Blue [React Component Library](https://www.npmjs.com/package/@pxblue/react-components).

## Usage
This template can be used with Create React App:
```sh
npx create-react-app myapp --template @pxblue/routing-typescript
```
or using the PX Blue CLI:
```sh
npx -p @pxblue/cli pxb new react --name=myapp --language=ts --template=routing
```

## Project Structure
Projects created using this template will start out with the following file structure:

```
└── /src
    |── index.tsx                           // the root file that renders the application (Theme Provider, Router, & CSS Baseline styles)
    |── App.tsx                             // sets up the DrawerLayout component
    |── /components                           
    │   └── Logo.tsx                        // PXB spinning logo graphic
    |── /contexts                           
    │   └── drawerContextProvider.tsx       // creates a Context to allow pages to open/close the navigation drawer
    |── /pages                              // sample application pages
    └── /router
        |── drawer.tsx                      // the contents of the navigation drawer
        |── main.tsx                        // React Router route configuration
        └── routes.tsx                      // route definitions for use in the Router
```
npm package: @pxblue/eslint-config
Description: ESLint profile for PXBlue
Author: PX Blue
Latest version: 2.0.5
Deprecated: This package has been deprecated. Please update to the new @brightlayer-ui/eslint-config.

# PX Blue ESLint Configuration

[![](https://img.shields.io/npm/v/@pxblue/eslint-config?label=%40pxblue%2Feslint-config&style=flat)](https://www.npmjs.com/package/@pxblue/eslint-config)

This package contains PX Blue ESLint configurations for Typescript and TSX projects. ESLint is used for enforcement of code quality across PX Blue applications.

> **NOTE:** The PX Blue ESLint configuration package is only compatible with TypeScript projects.

All ESLint rules enforcing code style have been disabled in favor of using prettier for code formatting. Refer to [@pxblue/prettier-config](https://www.npmjs.com/package/@pxblue/prettier-config) for integrating prettier into your application.

## Installation

From the root of your package, install the PX Blue configuration:

`yarn add --dev @pxblue/eslint-config`

You will also need to install the following peer dependencies:

`yarn add --dev eslint eslint-config-prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser`

If your project is using React with the TSX file extension, you also need to install:

`yarn add --dev eslint-plugin-react`

## Configuration

### Add Linting Scripts

Add the following scripts to your `package.json`.

```
"scripts": {
    "lint": "eslint \"src/**/**.ts\"",
    "lint:fix": "eslint \"src/**/**.ts\" --fix",
}
```

> **TSX Projects:** Make sure to include .tsx file extension in your lint commands (e.g. `eslint '**/**.{tsx,ts}'`)

The `--fix` flag will automatically attempt to fix reported errors. Leaving this off will report errors/warnings without attempting to fix them.

### Import the Linting configuration

The PX Blue configuration needs to be imported into ESLint. Add the following `.eslintrc.js` to the root of your project.

```
module.exports =  {
    parser:  '@typescript-eslint/parser',
    extends:  [ '@pxblue/eslint-config/ts' ],
    parserOptions:  {
        project: "./tsconfig.json",
    },
    env: {
        browser: true
    }
};
```

> **TSX Projects:** Extend from `@pxblue/eslint-config/tsx`.

## Usage

To lint all typescript files in your project, run `yarn lint`.

To automatically fix linting errors in your project, run `yarn lint:fix` or `yarn lint --fix`.
npm package: @pxblue/mapbox
Description: Various Mapbox themes for use in PX Blue applications
Author: pxblue
Latest version: 1.0.1
Deprecated: This package has been deprecated. Please update to the new @brightlayer-ui/mapbox.

# Mapbox Themes
This package contains various Mapbox themes for use with PX Blue. 

## Installation
Install with npm
```
npm install --save @pxblue/mapbox
```
or yarn
```
yarn add @pxblue/mapbox
```
## Usage
To use the PX Blue themes for Mapbox, you simply need to pass the theme file into the configuration object for mapbox initialization.

### Angular
Import the theme into your target typescript file:
```
// app.component.ts
declare var require;
const defaultTheme = require('@pxblue/mapbox/default.json');
const darkTheme = require('@pxblue/mapbox/dark.json');
```

Bind the theme to the style attribute of the ```<mgl-map>```:
```
// app.component.html
<mgl-map
    [style]="theme" // bind to your theme variable here
    [zoom]="[10]"
    [center]="coordinates"
>
```

### React
Import the theme into your target file:
```
// App.js
const defaultTheme = require('@pxblue/mapbox/default.json');
const darkTheme = require('@pxblue/mapbox/dark.json');
```

Apply the theme variable to the style parameter of the mapboxgl configuration:
```
// App.js
const map = new mapboxgl.Map({
    container: this.mapContainer,
    style: darkTheme, // add the theme variable here
    center: [lng, lat],
    zoom
});
```

For more detailed instructions on using Mapbox in your application, see our demos for [Angular](https://stackblitz.com/edit/pxblue-mapbox-angular) or [React](https://stackblitz.com/edit/pxblue-mapbox-react).
npm package: @pxblue/prettier-config
Description: Prettier config for PXBlue
Author: PX Blue
Latest version: 1.0.3
Deprecated: This package has been deprecated. Please update to the new @brightlayer-ui/prettier-config.

# PX Blue Prettier Configuration
[![](https://img.shields.io/npm/v/@pxblue/prettier-config?label=%40pxblue%2Fprettier-config&style=flat)](https://www.npmjs.com/package/@pxblue/prettier-config) 

This package contains the PXBlue prettier and editorconfig profiles used to enforce consistent code style.

## Installation
From the root of your project, install prettier:  

`yarn add --dev prettier`

and the PX Blue prettier config:

`yarn add --dev @pxblue/prettier-config`

## Configuration
Add the following script to your `package.json`.
```
"prettier": "@pxblue/prettier-config",
"scripts": {
    "prettier": "prettier \"src/**/**.{ts,tsx,js,jsx,json,css,scss,html}\" --write",
}
```
The `--write` flag will automatically fix all code style violations. 

> You can update the file extensions list to suit the particular files you would like to format.

## Usage
To format the files in your project, run `yarn prettier`.
npm package: @pxblue/publish
Description: A script that can be used to automatically publish packages to npm.
Author: Power Xpert Blue
Latest version: 1.1.0
Deprecated: This package has been deprecated. Please update to the new @brightlayer-ui/publish.

# @pxblue/publish

This Command Line tool is a utility for automatically publishing NPM packages based on the version number in the package.json file.

## Prerequisites

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

-   [NodeJS](https://nodejs.org/en/download/) 12+
-   npm

## Usage

You can use this package without installing any global or local dependencies by running it with npx (recommended):

```
npx -p @pxblue/publish pxb-publish -b <branch-name>
```

#### Available options

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

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

> The branch flag is used to determine whether a latest package can be published. Latest packages may only be published for the master branch (-b master).
npm package: @pxblue/react-auth-shared
Description: Re-usable react logic for Authentication and Registration within Eaton applications. For use with @pxblue/react-native-auth-workflow and @pxblue/react-auth-workflow.
Author: PX Blue
Latest version: 3.5.0
Deprecated: This package has been deprecated. Please update to the new @brightlayer-ui/react-auth-shared.

# React Auth Shared

![npm (scoped)](https://img.shields.io/npm/v/@pxblue/react-auth-shared)

The React Auth Shared package provides extracts the common logic shared by [@pxblue/react-native-auth-workflow](https://www.npmjs.com/package/@pxblue/react-native-auth-workflow) and [@pxblue/react-auth-workflow](https://www.npmjs.com/package/@pxblue/react-auth-workflow). This package must be used in combination with workflow screen definitions (either by using one of the packages above, or by building your own and integrating them yourself).

# Installation

To install the latest version of this package, run:

```shell
npm install --save @pxblue/react-auth-shared
// or
yarn add @pxblue/react-auth-shared
```

You will also need to install all of the peer dependencies. You can get the latest version of them all by running:

```
npm install --save date-fns@^2.19.0 i18next@^20.1.0 react@^17.0.0 react-i18next@^11.8.11
// or
yarn add date-fns@^2.19.0 i18next@^20.1.0 react@^17.0.0 react-i18next@^11.8.11
```

# Usage

We recommend you use the [@pxblue/react-native-auth-workflow](https://www.npmjs.com/package/@pxblue/react-native-auth-workflow) or [@pxblue/react-auth-workflow](https://www.npmjs.com/package/@pxblue/react-auth-workflow) packages, which use this shared logic under the hood. If you want to build your own screens and connect to this shared log, please contact us.

# Documentation

More information about exported objects and functions can found in the [API](https://github.com/pxblue/react-auth-shared/tree/master/docs/API.md) documentation.

# Contributors

To work on this package as a contributor, first clone down the repository:

```shell
git clone https://github.com/pxblue/react-auth-shared
cd react-auth-shared
```

You can build the library by running:

```shell
yarn build
```

You can run the Lint checks, prettier formatter, typescript validator, and unit tests by running:

```shell
yarn validate
```

You can update the auto-generated licenses.md file by running:

```shell
yarn generate:licenses
```
npm package: @pxblue/react-native-template-authentication
Description: A template with pre-configured login workflow and routing for React Native projects created with the PX Blue CLI.
Latest version: 2.0.0
Deprecated: This package has been deprecated. Please update to the new @brightlayer-ui/react-native-template-authentication.

# Authentication Template (JavaScript)

![npm (scoped)](https://img.shields.io/npm/v/@pxblue/react-native-template-authentication?color=%23007bc1&label=%40pxblue%2Freact-native-template-authentication)

This is an official PX Blue template used internally by the [PX Blue CLI](https://www.npmjs.com/package/@pxblue/cli).

This template installs and configures the PX Blue [react-native-auth-workflow](https://www.npmjs.com/package/@pxblue/react-native-auth-workflow) package to automatically wrap your main application with functions and screens for Login, Registration, Change Password, etc. This uses the same configurations as the sample project for that package — you will need to replace the API integrations with implementations specific to your API. This template also includes the installation and initial setup of routing using [React Navigation](https://reactnavigation.org/). It includes several placeholder routes/screens and a [Drawer](https://pxblue-components.github.io/react-native/?path=/info/components-documentation--drawer) navigator from the PX Blue [React Native Component Library](https://www.npmjs.com/package/@pxblue/react-native-components).

## Usage
This template can be used with the PX Blue CLI:
```sh
npx -p @pxblue/cli pxb new react-native --name=myapp --cli=rnc --language=js --template=authentication
```

## Project Structure
Projects created using this template will start out with the following file structure:

```
|── /ios                              // ios project folder
|── /android                          // android project folder
|── /actions                          
|   |── AuthUIActions.js              // handles the implementation of the authentication related actions (such as login and forgot password)
|   └── RegistrationUIActions.js      // handles the implementation of the registration related actions (such as loading the EULA and registration by invitation)
|── /assets                           // fonts and images used by the application
|── App.tsx                           // app entry point
|── /constants                          
|   |── index.js                      // application constants
|   └── sampleEula.js                 // sample Eula
|── /pages                            // sample application pages
|── /router                             
|   |── index.js                      // sets up routing
|   |── DeepLinking.js                // sets up deep linking
|   └── navigation-drawer.js          // sets up Drawer
└── /store                             
    └── local-storage.js              // mock implementation for storing/retrieving user authentication session data 
```
npm package: @pxblue/react-native-template-authentication-typescript
Description: A template with pre-configured login workflow and routing for React Native projects created with the PX Blue CLI.
Latest version: 2.0.0
Deprecated: This package has been deprecated. Please update to the new @brightlayer-ui/react-native-template-authentication-typescript.

# Authentication Template (TypeScript)

![npm (scoped)](https://img.shields.io/npm/v/@pxblue/react-native-template-authentication-typescript?color=%23007bc1&label=%40pxblue%2Freact-native-template-authentication-typescript)

This is an official PX Blue template used internally by the [PX Blue CLI](https://www.npmjs.com/package/@pxblue/cli).

This template installs and configures the PX Blue [react-native-auth-workflow](https://www.npmjs.com/package/@pxblue/react-native-auth-workflow) package to automatically wrap your main application with functions and screens for Login, Registration, Change Password, etc. This uses the same configurations as the sample project for that package — you will need to replace the API integrations with implementations specific to your API. This template also includes the installation and initial setup of routing using [React Navigation](https://reactnavigation.org/). It includes several placeholder routes/screens and a [Drawer](https://pxblue-components.github.io/react-native/?path=/info/components-documentation--drawer) navigator from the PX Blue [React Native Component Library](https://www.npmjs.com/package/@pxblue/react-native-components).

## Usage
This template can be used with the PX Blue CLI:
```sh
npx -p @pxblue/cli pxb new react-native --name=myapp --cli=rnc --language=ts --template=authentication
```

## Project Structure
Projects created using this template will start out with the following file structure:

```
|── /ios                              // ios project folder
|── /android                          // android project folder
|── /actions                          
|   |── AuthUIActions.tsx             // handles the implementation of the authentication related actions (such as login and forgot password)
|   └── RegistrationUIActions.tsx     // handles the implementation of the registration related actions (such as loading the EULA and registration by invitation)
|── /assets                           // fonts and images used by the application
|── App.tsx                           // app entry point
|── /constants                          
|   |── index.ts                      // application constants
|   └── sampleEula.ts                 // sample Eula
|── /pages                            // sample application pages
|── /router                             
|   |── index.tsx                     // sets up routing
|   |── DeepLinking.ts                // sets up deep linking
|   └── navigation-drawer.tsx         // sets up Drawer
└── /store                             
    └── local-storage.ts              // mock implementation for storing/retrieving user authentication session data 
```
npm package: @pxblue/react-native-template-blank
Description: The base template for React Native projects created with the PX Blue CLI.
Latest version: 2.0.0
Deprecated: This package has been deprecated. Please update to the new @brightlayer-ui/react-native-template-blank.

# Blank Template (JavaScript)

![npm (scoped)](https://img.shields.io/npm/v/@pxblue/react-native-template-blank?color=%23007bc1&label=%40pxblue%2Freact-native-template-blank)

This is an official PX Blue template used internally by the [PX Blue CLI](https://www.npmjs.com/package/@pxblue/cli).

This template installs the basic PX Blue libraries for themes and components and configures the application to use them. It includes a simple placeholder screen that you can replace with your own application content.

## Usage
This template can be used with the PX Blue CLI:
```sh
npx -p @pxblue/cli pxb new react-native --name=myapp --cli=rnc --language=js --template=blank
```

## Project Structure
Projects created using this template will start out with the following file structure:

```
|── /ios                                   // ios project folder
|── /android                               // android project folder
|── /assets                                // fonts and images used by the application
└── App.js                                 // sample landing page
```
npm package: @pxblue/react-native-template-blank-typescript
Description: The base template for React Native projects created with the PX Blue CLI.
Latest version: 2.0.0
Deprecated: This package has been deprecated. Please update to the new @brightlayer-ui/react-native-template-blank-typescript.

# Blank Template (TypeScript)

![npm (scoped)](https://img.shields.io/npm/v/@pxblue/react-native-template-blank-typescript?color=%23007bc1&label=%40pxblue%2Freact-native-template-blank-typescript)

This is an official PX Blue template used internally by the [PX Blue CLI](https://www.npmjs.com/package/@pxblue/cli).

This template installs the basic PX Blue libraries for themes and components and configures the application to use them. It includes a simple placeholder screen that you can replace with your own application content.

## Usage
This template can be used with the PX Blue CLI:
```sh
npx -p @pxblue/cli pxb new react-native --name=myapp --cli=rnc --language=ts --template=blank
```

## Project Structure
Projects created using this template will start out with the following file structure:

```
|── /ios                                   // ios project folder
|── /android                               // android project folder
|── /assets                                // fonts and images used by the application
└── App.tsx                                // sample landing page
```
npm package: @pxblue/react-native-template-routing
Description: A template with pre-configured routing for React Native projects created with the PX Blue CLI.
Latest version: 2.0.0
Deprecated: This package has been deprecated. Please update to the new @brightlayer-ui/react-native-template-routing.

# Routing Template (JavaScript)

![npm (scoped)](https://img.shields.io/npm/v/@pxblue/react-native-template-routing?color=%23007bc1&label=%40pxblue%2Freact-native-template-routing)

This is an official PX Blue template used internally by the [PX Blue CLI](https://www.npmjs.com/package/@pxblue/cli).

This template includes the installation and initial setup of routing using [React Navigation](https://reactnavigation.org/). It includes several placeholder routes/screens and a [Drawer](https://pxblue-components.github.io/react-native/?path=/info/components-documentation--drawer) navigator from the PX Blue [React Native Component Library](https://www.npmjs.com/package/@pxblue/react-native-components).

## Usage
This template can be used with the PX Blue CLI:
```sh
npx -p @pxblue/cli pxb new react-native --name=myapp --cli=rnc --language=js --template=routing
```

## Project Structure
Projects created using this template will start out with the following file structure:

```
|── /ios                              // ios project folder
|── /android                          // android project folder
|── /assets                           // fonts and images used by the application
|── App.js                            // app entry point
|── /pages                             // sample application pages
└── /router                             
    |── index.js                      // sets up routing
    └── navigation-drawer.js          // sets up Drawer
```
npm package: @pxblue/react-native-template-routing-typescript
Description: A template with pre-configured routing for React Native projects created with the PX Blue CLI.
Latest version: 2.0.0
Deprecated: This package has been deprecated. Please update to the new @brightlayer-ui/react-native-template-routing-typescript.

# Routing Template (TypeScript)

![npm (scoped)](https://img.shields.io/npm/v/@pxblue/react-native-template-routing-typescript?color=%23007bc1&label=%40pxblue%2Freact-native-template-routing-typescript)

This is an official PX Blue template used internally by the [PX Blue CLI](https://www.npmjs.com/package/@pxblue/cli).

This template includes the installation and initial setup of routing using [React Navigation](https://reactnavigation.org/). It includes several placeholder routes/screens and a [Drawer](https://pxblue-components.github.io/react-native/?path=/info/components-documentation--drawer) navigator from the PX Blue [React Native Component Library](https://www.npmjs.com/package/@pxblue/react-native-components).

## Usage
This template can be used with the PX Blue CLI:
```sh
npx -p @pxblue/cli pxb new react-native --name=myapp --cli=rnc --language=ts --template=routing
```

## Project Structure
Projects created using this template will start out with the following file structure:

```
|── /ios                              // ios project folder
|── /android                          // android project folder
|── /assets                           // fonts and images used by the application
|── App.tsx                           // app entry point
|── /pages                            // sample application pages
└── /router                             
    |── index.tsx                     // sets up routing
    └── navigation-drawer.tsx         // sets up Drawer
```
npm package: @pxblue/react-native-vector-icons
Description: PX Blue vector icons for use in React Native projects, based on react-native-vector-icons
Author: PX Blue
Latest version: 1.4.0
Deprecated: This package has been deprecated. Please update to the new @brightlayer-ui/react-native-vector-icons.

# React Native Vector Icons

[![](https://img.shields.io/npm/v/@pxblue/react-native-vector-icons.svg?label=@pxblue/react-native-vectoricons&style=flat)](https://www.npmjs.com/package/@pxblue/react-native-vector-icons)

This package allows you to use PX Blue supplemental icons in the same way as you use [react-native-vector-icons](https://www.npmjs.com/package/react-native-vector-icons) for Material Icons.

## Installation

To install the PX Blue react native vector icons from NPM as a dependency for your project, you can run one of the following commands in your project root:

```
npm install --save @pxblue/react-native-vector-icons
or
yarn add @pxblue/react-native-vector-icons
```

This package relies on [react-native-vector-icons](https://www.npmjs.com/package/react-native-vector-icons) as a peer dependency:

```
npm install --save react-native-vector-icons
or
yarn add react-native-vector-icons
```

> Carefully follow the [integration instructions](https://github.com/oblador/react-native-vector-icons#installation) in their documentation for making the icons available in your project.

#### iOS

To use this package in iOS projects, the native modules will need to be linked (this will be very familiar after you have linked the native modules for RNVI). We recommend doing this via CocoaPods:

Add the following to your `Podfile`:
```
pod 'RNPXBVectorIcons', :path => '../node_modules/@pxblue/react-native-vector-icons'
```

Edit your `Info.plist`
-   Under the "Fonts Provided By Application" property (which you should have added when setting up RNVI), add an entry for PXBlueIcons.ttf.

After updating these files you will need to install the Pods and recompile your application:

```sh
cd ios
pod install
```

#### Android

To use this package in Android projects, you need to make the icon font available in your application (this will be very familiar after you have linked the fonts for RNVI). We recommend doing this via Gradle:

Edit `android/app/build.gradle` ( NOT `android/build.gradle` ) and add the following:

```
apply from: "../../node_modules/@pxblue/react-native-vector-icons/fonts.gradle"
```

> NOTE: if you are restricting which fonts are being added to your application for `react-native-vector-icons`, you will need to include 'PXBlueIcons.ttf' in your `iconFontNames` array in this file as well.

## Usage

Using these icons in your application is exactly the same as using react-native-vector-icons (we use their library to build ours so the API is identical).

```tsx
import PXBIcon from '@pxblue/react-native-vector-icons';
...
<PXBIcon name={'broccoli'} color={'green'} size={24}/>
```
npm package: @pxblue/react-themes
Description: React themes for PX Blue applications
Author: PX Blue
Latest version: 6.1.0
Deprecated: This package has been deprecated. Please update to the new @brightlayer-ui/react-themes.

# PX Blue themes for React applications

This package provides theming support for Eaton applications using the PX Blue design system. It includes resources for developers using React w/ [Material UI](https://www.npmjs.com/package/@material-ui/core) version 4+ (prior versions of this package will work with Material UI version 3 - check the [Changelog](https://github.com/pxblue/themes/blob/master/CHANGELOG.md) for details). This package comes with two theme options: a Blue theme (standard) and a Dark theme.

For other frameworks, check out our related packages:

-   [@pxblue/angular-themes](https://www.npmjs.com/package/@pxblue/angular-themes)
-   [@pxblue/react-native-themes](https://www.npmjs.com/package/@pxblue/react-native-themes)

## Installation

Install with npm

```shell
npm install --save @pxblue/react-themes
```

or yarn

```shell
yarn add @pxblue/react-themes
```

# Usage

To use these themes in your application, simply wrap the app in a `ThemeProvider` and pass in your desired theme (`blue` or `blueDark`). You'll also need to include the Open Sans font resources (included with the themes):

```tsx
import {
    ThemeProvider,
    createMuiTheme
} from '@material-ui/core/styles';
import * as PXBlueThemes from '@pxblue/react-themes';
import "@pxblue/react-themes/open-sans";
...
<ThemeProvider theme={createMuiTheme(PXBlueThemes.blue)}>
    <App />
</ThemeProvider>
```

### Updating From Version 5 ~> 6

In version 6, we have migrated from the deprecated `typeface-open-sans` package to `@fontsource/open-sans` (bundled with the PX Blue themes). You'll need to update your Open Sans import references in your root file:

Before:

```js
require('typeface-open-sans');
```

After:

```js
import '@pxblue/react-themes/open-sans';
```

## Demo

[View on Code Sandbox](https://codesandbox.io/s/github/pxblue/themes/tree/master/react/demos/theme/)
npm package: @pxblue/storybook-themes
Description: Storybook theme for PX Blue documentation
Author: PX Blue
Latest version: 1.1.0
Deprecated: This package has been deprecated. Please update to the new @brightlayer-ui/storybook-themes.

# PX Blue themes for Storybook applications

This package contains theming support for [Storybook](https://storybook.js.org/) applications built using Angular or React. It is primarily used to give these applications a PX Blue look and feel. Integrating this theme into your storybook application will change the appearance of the storybook container and any Markdown notes found within the `@storybook/addon-notes` add-on.

## Installation

This theme package depends on [@pxblue/colors](https://www.npmjs.com/package/@pxblue/colors) and the [@storybook/theming](https://www.npmjs.com/package/@storybook/theming) add-on. To begin, install all three by running:

```
yarn add @pxblue/colors @storybook/theming @pxblue/storybook-themes
```

## Usage

To integrate the theme into your storybook app, add the following code to your config:

```typescript
import { pxblueTheme } from '@pxblue/storybook-themes';
import { addParameters } from '@storybook/react';

addParameters({
    options: {
        theme: pxblueTheme,
    },
});
```

For additional help while integrating storybook themes, see the [storybook docs](https://storybook.js.org/docs/configurations/theming/).

## Demos

You can see this theme in action in the documentation for PX Blue component libraries at [pxblue-components.github.io](https://pxblue-components.github.io).
npm package: @pxblue/symbols
Description: Oneline symbols for PX Blue applications
Author: px-blue
Latest version: 1.0.7
Deprecated: This package has been deprecated. Please update to the new @brightlayer-ui/symbols.

# PX Blue Symbols
[![](https://img.shields.io/npm/v/@pxblue/symbols.svg?label=@pxblue/symbols&style=flat)](https://www.npmjs.com/package/@pxblue/symbols)
[![](https://img.shields.io/circleci/project/github/pxblue/icons/master.svg?style=flat)](https://circleci.com/gh/pxblue/icons/tree/master)

This is a library of one-line symbols for use in PX Blue applications.

## Installation
To install the PX Blue 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
or
yarn add @pxblue/symbols
```

## Usage
### Angular
The simplest way to use these SVG symbols in Angular is to register them with the matIconRegistry so they can be used with the ```<mat-icon>``` tag. You can register symbols individually, or as the entire PX Blue set:

```
import { Component } from "@angular/core";
import { MatIconRegistry } from "@angular/material/icon";
import { DomSanitizer } from "@angular/platform-browser";

declare var require: any;
const symbol = require("@pxblue/symbols/battery.svg"); // individual symbol
const symbolSet = require("@pxblue/symbols/symbols.svg"); // full set
```

Then, in your constructor, register the symbol or the symbol set. It will then be available for use as a ```<mat-icon>```.

#### Individual Icon
```
// app.component.ts
export class AppComponent {
  constructor(
    private matIconRegistry: MatIconRegistry,
    private domSanitizer: DomSanitizer
  ) {
    this.matIconRegistry.addSvgIcon(
      "battery",
      this.domSanitizer.bypassSecurityTrustResourceUrl(symbol)
    );
  }
}
```

```
// app.component.html
<mat-icon svgIcon="battery"></mat-icon>
```

#### Entire Icon Set
```
// app.component.ts
export class AppComponent {
  constructor(
    private matIconRegistry: MatIconRegistry,
    private domSanitizer: DomSanitizer
  ) {
    this.matIconRegistry.addSvgIconSetInNamespace('px-symbols', this.domSanitizer.bypassSecurityTrustResourceUrl(symbolSet));
  }
}
```

```
// app.component.ts
<mat-icon svgIcon="px-symbols:battery"></mat-icon>
```

### React
```
const symbol = require('@pxblue/symbols/SYMBOL_NAME.svg');
...
<img src={symbol}/>
```

>NOTE: If you will be using many of these symbols in your application, we recommend you use [@pxblue/symbols-mui](https://www.npmjs.com/package/@pxblue/symbols-mui) to simplify usage. This library makes more sense if you just need one or two symbols or if you want to reduce the size of your bundle.

### Available Symbols
Please see [Available Symbols](https://github.com/pxblue/icons/blob/master/available_symbols.md) for a list of currently available symbols.

# For Icon Creators
Each symbol has its own folder in the /icons/symbols folder, which includes the clean SVG file .