Skip to content

Commit

Permalink
Merge pull request #20 from pxblue/dev
Browse files Browse the repository at this point in the history
Go BLUI
  • Loading branch information
daileytj authored Nov 10, 2021
2 parents fa4760f + 35255e4 commit 9c81327
Show file tree
Hide file tree
Showing 10 changed files with 75 additions and 65 deletions.
6 changes: 3 additions & 3 deletions .circleci/config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ jobs:
echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > ~/.npmrc
echo "//registry.yarnpkg.com/:_authToken=$NPM_TOKEN" >> ~/.npmrc
- run:
name: Publish @pxblue/react-native-themes
name: Publish @brightlayer-ui/react-native-themes
command: |
yarn publish:package -b $CIRCLE_BRANCH
Expand All @@ -59,9 +59,9 @@ jobs:
- attach_workspace:
at: .
- run:
name: Tag @pxblue/react-native-themes
name: Tag @brightlayer-ui/react-native-themes
command: |
yarn tag:package -b $CIRCLE_BRANCH
yarn tag:package -b $CIRCLE_BRANCH -s -blui-react-native-themes
workflows:
version: 2
Expand Down
2 changes: 1 addition & 1 deletion .gitmodules
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
[submodule "demos/showcase"]
path = demos/showcase
url = https://github.com/pxblue/react-native-showcase-demo
url = https://github.com/brightlayer-ui/react-native-showcase-demo
branch = dev
16 changes: 14 additions & 2 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,17 @@
# Changelog

## v6.0.0 (November 9, 2021)

### Changed

- Changed package namespace from `@pxblue` to `@brightlayer-ui`.

## Package Migration Notice

Previous versions listed after this indicator refer to our deprecated `@pxblue` packages.

---

## v6.0.0 (October 1, 2021)

### Added
Expand Down Expand Up @@ -38,10 +50,10 @@

- Font weights available in the theme have changed. We now have `thin`, `light`, `regular`, and `medium` (previously `semiBold`). `Bold` and `ExtraBold` have been removed.
- `onPrimary` color is no longer available.
- `sizes` property of the theme has been removed. If you need these size values, they are now exported from @pxblue/react-native-components.
- `sizes` property of the theme has been removed. If you need these size values, they are now exported from @brightlayer-ui/react-native-components.

## v4.0.0 (February 24, 2020)

### Changed

- Themes have been broken out into their own packages. This package was originally part of @pxblue/themes. If you are switching to this package, you'll need to update some import statements (refer to the usage instructions in the README).
- Themes have been broken out into their own packages. This package was originally part of @brightlayer-ui/themes. If you are switching to this package, you'll need to update some import statements (refer to the usage instructions in the README).
2 changes: 1 addition & 1 deletion CODEOWNERS
Validating CODEOWNERS rules …
Original file line number Diff line number Diff line change
@@ -1 +1 @@
* @emclaug2 @joebochill @huayunh @daileytj
* @emclaug2 @jeffvg @huayunh @daileytj
34 changes: 17 additions & 17 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,32 +1,32 @@
# PX Blue themes for React Native applications
# Brightlayer UI themes for React Native applications

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

This package provides theming support for Eaton applications using the PX Blue design system. It includes resources for developers using React Native with [react-native-paper](https://www.npmjs.com/package/react-native-paper). This package comes with two theme options: a Blue theme (standard) and a Dark theme.
This package provides theming support for Eaton applications using the Brightlayer UI design system. It includes resources for developers using React Native with [react-native-paper](https://www.npmjs.com/package/react-native-paper). 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-themes](https://www.npmjs.com/package/@pxblue/react-themes)
- [@brightlayer-ui/angular-themes](https://www.npmjs.com/package/@brightlayer-ui/angular-themes)
- [@brightlayer-ui/react-themes](https://www.npmjs.com/package/@brightlayer-ui/react-themes)

## Installation

Install with npm

```shell
npm install --save @pxblue/react-native-themes
npm install --save @brightlayer-ui/react-native-themes
```

or yarn

```shell
yarn add @pxblue/react-native-themes
yarn add @brightlayer-ui/react-native-themes
```

# Usage

> **NOTE:** Using the PX Blue React Native theme requires that you add the Open Sans font to your application. You can learn how to do this by reading the instructions for [Vanilla React Native](https://medium.com/react-native-training/react-native-custom-fonts-ccc9aacf9e5e) or [Expo](https://docs.expo.io/versions/latest/guides/using-custom-fonts/). This will be added automatically if you start your project with the [@pxblue/cli](https://www.npmjs.com/package/@pxblue/cli).
> **NOTE:** Using the Brightlayer UI React Native theme requires that you add the Open Sans font to your application. You can learn how to do this by reading the instructions for [Vanilla React Native](https://medium.com/react-native-training/react-native-custom-fonts-ccc9aacf9e5e) or [Expo](https://docs.expo.io/versions/latest/guides/using-custom-fonts/). This will be added automatically if you start your project with the [@brightlayer-ui/cli](https://www.npmjs.com/package/@brightlayer-ui/cli).
> When using Expo, you will need to specify the name for each font weight you load using the format `OpenSans-<Weight>`, e.g., OpenSans-SemiBold. Refer to one of our React Native demos for reference.
Expand All @@ -36,10 +36,10 @@ To use our themes in your application, simply wrap the app in a `Provider` and p

```tsx
import { Provider as ThemeProvider} from 'react-native-paper';
import * as PXBThemes from '@pxblue/react-native-themes';
import * as BLUIThemes from '@brightlayer-ui/react-native-themes';
...
// Default Theme
<ThemeProvider theme={PXBThemes.blue}>
<ThemeProvider theme={BLUIThemes.blue}>
<App />
</ThemeProvider>
```
Expand All @@ -48,9 +48,9 @@ import * as PXBThemes from '@pxblue/react-native-themes';

```tsx
import { Provider as ThemeProvider} from 'react-native-paper';
import * as PXBThemes from '@pxblue/react-native-themes';
import * as BLUIThemes from '@brightlayer-ui/react-native-themes';
...
<ThemeProvider theme={PXBThemes.blueDark}>
<ThemeProvider theme={BLUIThemes.blueDark}>
<App />
</ThemeProvider>
```
Expand All @@ -59,13 +59,13 @@ import * as PXBThemes from '@pxblue/react-native-themes';
### React Native Paper Wrapper Components

The default theme structure for React Native Paper components does not offer us enough control to make some components look exactly the way they should for PX Blue applications. Because of this, we have extended the default theme type definition (see below) and created wrapper components with the correct styles to use in place of some of the standard React Native Paper components.
The default theme structure for React Native Paper components does not offer us enough control to make some components look exactly the way they should for Brightlayer UI applications. Because of this, we have extended the default theme type definition (see below) and created wrapper components with the correct styles to use in place of some of the standard React Native Paper components.

In order for these components to look correct in your application, you should use the [PX Blue wrapper components](https://github.com/pxblue/react-native-component-library/tree/master/components/src/themed/readme.md) in place of the respective components from React Native Paper.
In order for these components to look correct in your application, you should use the [Brightlayer UI wrapper components](https://github.com/brightlayer-ui/react-native-component-library/blob/master/components/src/themed/README.md) in place of the respective components from React Native Paper.

### TypeScript

Our PX Blue themes extend the themes provided by React Native Paper. If you are using these themes in a TypeScript project and want to access any of the properties that were added to the defaults, you need to add the following [global augmentation](https://callstack.github.io/react-native-paper/theming.html#typescript) in your project's index.tsx file:
Our Brightlayer UI themes extend the themes provided by React Native Paper. If you are using these themes in a TypeScript project and want to access any of the properties that were added to the defaults, you need to add the following [global augmentation](https://callstack.github.io/react-native-paper/theming.html#typescript) in your project's index.tsx file:

```tsx
declare global {
Expand Down Expand Up @@ -116,5 +116,5 @@ declare global {
<!--
## Demo
[Check it out](https://github.com/pxblue/react-native-showcase-demo/tree/master)
[Check it out](https://github.com/brightlayer-ui/react-native-showcase-demo/tree/master)
-->
28 changes: 13 additions & 15 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
{
"name": "@pxblue/react-native-themes",
"author": "PX Blue <pxblue@eaton.com>",
"name": "@brightlayer-ui/react-native-themes",
"author": "Brightlayer UI <brightlayer-ui@eaton.com>",
"license": "BSD-3-Clause",
"version": "6.0.0",
"description": "React Native themes for PX Blue applications",
"description": "React Native themes for Brightlayer UI applications",
"main": "./dist/index.js",
"scripts": {
"initialize": "bash scripts/initializeSubmodule.sh",
Expand All @@ -16,48 +16,46 @@
"build": "yarn && tsc",
"link:themes": "bash ./scripts/linkThemes.sh",
"test": "bash ./scripts/buildTest.sh",
"publish:package": "set npm_config_yes=true && npx -p @pxblue/publish pxb-publish",
"tag:package": "npx -p @pxblue/tag pxb-tag",
"publish:package": "set npm_config_yes=true && npx -p @brightlayer-ui/publish blui-publish",
"tag:package": "npx -p @brightlayer-ui/tag blui-tag",
"update:submodule": "git submodule update --remote",
"prettier": "prettier \"src/**/**.{ts,tsx,js,jsx,json,css,scss,html}\" --write",
"prettier:check": "prettier \"src/**/**.{ts,tsx,js,jsx,json,css,scss,html}\" --check"
},
"repository": {
"type": "git",
"url": "git+https://github.com/pxblue/react-native-themes.git"
"url": "git+https://github.com/brightlayer-ui/react-native-themes.git"
},
"bugs": {
"url": "https://github.com/pxblue/react-native-themes/issues"
"url": "https://github.com/brightlayer-ui/react-native-themes/issues"
},
"homepage": "https://github.com/pxblue/react-native-themes/tree/master",
"homepage": "https://github.com/brightlayer-ui/react-native-themes/tree/master",
"keywords": [
"PXBlue",
"Brightlayer UI",
"themes",
"Eaton",
"Power",
"Xpert",
"React Native"
],
"dependencies": {
"@pxblue/colors": "^3.0.0",
"@brightlayer-ui/colors": "^3.0.0",
"color": "^3.1.3"
},
"peerDependencies": {
"react-native-paper": "^3.0.0 || ^4.0.0"
},
"devDependencies": {
"@pxblue/prettier-config": "^1.0.3",
"@brightlayer-ui/prettier-config": "^1.0.3",
"@types/color": "^3.0.1",
"prettier": "^2.4.1",
"react-native-paper": "^4.0.0",
"typescript": "^3.7.2"
},
"prettier": "@pxblue/prettier-config",
"prettier": "@brightlayer-ui/prettier-config",
"files": [
"package.json",
"README.md",
"LICENSE",
"CHANGELOG.md",
"/dist"
]
}
}
14 changes: 7 additions & 7 deletions scripts/linkThemes.sh
Original file line number Diff line number Diff line change
Expand Up @@ -13,20 +13,20 @@ echo -e "${BLUE}Building themes...${NC}"
yarn build

echo -en "${BLUE}Creating new folder in node_modules...${NC}"
rm -rf "./demos/showcase/node_modules/@pxblue/react-native-themes"
mkdir -p "./demos/showcase/node_modules/@pxblue/react-native-themes"
rm -rf "./demos/showcase/node_modules/@brightlayer-ui/react-native-themes"
mkdir -p "./demos/showcase/node_modules/@brightlayer-ui/react-native-themes"
echo -e "${GREEN}Done${NC}"

echo -en "${BLUE}Copying build output into node_modules...${NC}";
cp -r ./dist ./demos/showcase/node_modules/@pxblue/react-native-themes
cp ./package.json ./demos/showcase/node_modules/@pxblue/react-native-themes/package.json
cp -r ./dist ./demos/showcase/node_modules/@brightlayer-ui/react-native-themes
cp ./package.json ./demos/showcase/node_modules/@brightlayer-ui/react-native-themes/package.json
echo -e "${GREEN}Done${NC}"

echo -en "\r\n${BBLUE}Linking Themes: ${NC}"
if [ ! -f ./demos/showcase/node_modules/@pxblue/react-native-themes/package.json ]; then echo -e "${BRED}Themes Not Linked${NC}" && exit 1; fi
if [ ! -s ./demos/showcase/node_modules/@pxblue/react-native-themes/dist ];
if [ ! -f ./demos/showcase/node_modules/@brightlayer-ui/react-native-themes/package.json ]; then echo -e "${BRED}Themes Not Linked${NC}" && exit 1; fi
if [ ! -s ./demos/showcase/node_modules/@brightlayer-ui/react-native-themes/dist ];
then
if [ ! -f ./demos/showcase/node_modules/@pxblue/react-native-themes/dist/index.js ];
if [ ! -f ./demos/showcase/node_modules/@brightlayer-ui/react-native-themes/dist/index.js ];
then echo -e "${BRED}Themes Not Linked${NC}" && exit 1;
fi;
fi
Expand Down
2 changes: 1 addition & 1 deletion src/blueDarkTheme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ This code is licensed under the BSD-3 license found in the LICENSE file in the r
**/

import { configureFonts, DefaultTheme } from 'react-native-paper';
import { blue, red, darkBlack, black, white, lightBlue } from '@pxblue/colors';
import { blue, red, darkBlack, black, white, lightBlue } from '@brightlayer-ui/colors';
import { fontConfig, ThemeOpacity } from './shared';
import Color from 'color';

Expand Down
2 changes: 1 addition & 1 deletion src/blueTheme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ This code is licensed under the BSD-3 license found in the LICENSE file in the r
**/

import { configureFonts, DefaultTheme } from 'react-native-paper';
import { blue, red, black, gray, lightBlue, white } from '@pxblue/colors';
import { blue, red, black, gray, lightBlue, white } from '@brightlayer-ui/colors';
import { fontConfig, ThemeOpacity } from './shared';
import Color from 'color';

Expand Down
34 changes: 17 additions & 17 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,23 @@
# yarn lockfile v1


"@brightlayer-ui/colors@^3.0.0":
version "3.0.1"
resolved "https://registry.yarnpkg.com/@brightlayer-ui/colors/-/colors-3.0.1.tgz#f085acf6b6b4266a01798c78bc25841d15e44b3e"
integrity sha512-AE9F6FN1EQWMoqFTak6q8MN3wg9et2u2SUs6HjYhcS3GVSHjMWVSsuJZ2aD5Lu9409Gfi6pBHDWsJZ5PyeLsdQ==
dependencies:
"@brightlayer-ui/types" "^2.0.0"

"@brightlayer-ui/prettier-config@^1.0.3":
version "1.0.3"
resolved "https://registry.yarnpkg.com/@brightlayer-ui/prettier-config/-/prettier-config-1.0.3.tgz#e40a7ae7435c6fd5118acbf249080e0aa81e93af"
integrity sha512-EYm3+V7Qd+oYEF+8FadsXAZqXryEHHbGnrV1BMp9selhABjceqUqXPVE4Sn3SKWQdBNJ3En2A3EzgrzRbvRTaw==

"@brightlayer-ui/types@^2.0.0":
version "2.0.0"
resolved "https://registry.yarnpkg.com/@brightlayer-ui/types/-/types-2.0.0.tgz#d8adc0cdb96c164943adbad6e74043128a8b4112"
integrity sha512-DTCVwND6YC9qrkQl7pkFlN6QxDReJHtjuAiFU9HkXJN368vlw+fzHQ5/j4sB1sZl2eNwOgccv5ecl2XrlolOCw==

"@callstack/react-theme-provider@^3.0.5":
version "3.0.5"
resolved "https://registry.yarnpkg.com/@callstack/react-theme-provider/-/react-theme-provider-3.0.5.tgz#a173e455e9603c9c45357a3b6ace1273086527ca"
Expand All @@ -10,23 +27,6 @@
deepmerge "^3.2.0"
hoist-non-react-statics "^3.3.0"

"@pxblue/colors@^3.0.0":
version "3.0.0"
resolved "https://registry.yarnpkg.com/@pxblue/colors/-/colors-3.0.0.tgz#080fb5cfd5a08fea018ece7cac8022ed38f7878f"
integrity sha512-rMFW4an1V9M5KX4BiNzrbbaYe2fic4o9iGL8/bPYvITbeiwgAapyFX0VbMIoo8XKlIbNaxyn7oWnrxzI/tp8Rw==
dependencies:
"@pxblue/types" "^2.0.0"

"@pxblue/prettier-config@^1.0.3":
version "1.0.3"
resolved "https://registry.yarnpkg.com/@pxblue/prettier-config/-/prettier-config-1.0.3.tgz#285b9ba346f714d397ef4a59579443b95a77e63e"
integrity sha512-x9SDup4pf5H54r/stZBXz7/XlMcIqnwHkEJ+9pyXVtGyQljI28lDGQCWQj6heipWAett50yx0RB3P2+MWZDhJA==

"@pxblue/types@^2.0.0":
version "2.0.0"
resolved "https://registry.yarnpkg.com/@pxblue/types/-/types-2.0.0.tgz#3df970352aca5256974a10a97d75a2264bad1eba"
integrity sha512-rHABCqYALGjrDxdCfw/v4mFsHhE9y9+vdSD3VHfIzA3HY1g1Bp/VWwEuEXWbtj2H5n75D+jkMQZ0rTqSKY3vLw==

"@types/color-convert@*":
version "2.0.0"
resolved "https://registry.yarnpkg.com/@types/color-convert/-/color-convert-2.0.0.tgz#8f5ee6b9e863dcbee5703f5a517ffb13d3ea4e22"
Expand Down

0 comments on commit 9c81327

Please sign in to comment.