From 660951f9b15838bb6863e46480f261cdbd3e4843 Mon Sep 17 00:00:00 2001 From: daileytj Date: Mon, 13 Dec 2021 10:53:56 -0500 Subject: [PATCH 1/2] Remove PX Blue references in favor of Brightlayer UI --- .circleci/config.yml | 48 +++++++++++++++++----------------- README.md | 58 +++++++++++++++++++++++------------------ package.json | 23 ++++++++-------- scripts/linkThemes.sh | 14 +++++----- src/blueDarkAltTheme.ts | 10 ++++--- src/blueDarkTheme.ts | 12 ++++----- src/blueTheme.ts | 10 +++---- yarn.lock | 24 ++++++++--------- 8 files changed, 103 insertions(+), 96 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index e1887a0..b98dd80 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -4,7 +4,7 @@ orbs: jobs: build: docker: - - image: circleci/node:12.9.1-browsers + - image: circleci/node:12.9.1-browsers steps: - checkout - run: @@ -13,40 +13,40 @@ jobs: - run: name: Verify Artifacts command: yarn test - - persist_to_workspace: - root: . - paths: - - dist + - persist_to_workspace: + root: . + paths: + - dist publish: docker: - - image: circleci/node:12.9.1-browsers + - image: circleci/node:12.9.1-browsers steps: - checkout - - attach_workspace: - at: . - - run: - name: Authenticate with registry - command: | - echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > ~/.npmrc - echo "//registry.yarnpkg.com/:_authToken=$NPM_TOKEN" >> ~/.npmrc - - run: - name: Publish @pxblue/react-native-themes - command: | - yarn publish:package -b $CIRCLE_BRANCH + - attach_workspace: + at: . + - run: + name: Authenticate with registry + command: | + echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > ~/.npmrc + echo "//registry.yarnpkg.com/:_authToken=$NPM_TOKEN" >> ~/.npmrc + - run: + name: Publish @brightlayer-ui/react-native-themes + command: | + yarn publish:package -b $CIRCLE_BRANCH tag: docker: - - image: circleci/node:12.9.1-browsers + - image: circleci/node:12.9.1-browsers steps: - checkout - gh/setup - - attach_workspace: - at: . - - run: - name: Tag @pxblue/react-native-themes - command: | - yarn tag:package -b $CIRCLE_BRANCH + - attach_workspace: + at: . + - run: + name: Tag @brightlayer-ui/react-native-themes + command: | + yarn tag:package -b $CIRCLE_BRANCH workflows: version: 2 diff --git a/README.md b/README.md index 8731a70..9550338 100644 --- a/README.md +++ b/README.md @@ -1,31 +1,32 @@ -# PX Blue 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) +# Brightlayer UI themes for React Native applications -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. +[![](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 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-`, e.g., OpenSans-SemiBold. Refer to one of our React Native demos for reference. @@ -35,32 +36,32 @@ To use the light theme in your application, simply wrap the app in a `Provider` ```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 - + ``` ### Dark Theme -The theming mechanism for React Native Paper is a bit limited in the amount of customization available for components. Because of this, there are two dark themes available from PX Blue that should be applied to different components. +The theming mechanism for React Native Paper is a bit limited in the amount of customization available for components. Because of this, there are two dark themes available from Brightlayer UI that should be applied to different components. The main theme should be applied using a `Provider` that wraps your application and passing in the theme (`blueDark`). This will be applied to the majority of the component in the RNP library. ```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'; ... - + ``` #### Alternate Dark Theme -The alternate dark theme (`blueDarkAlt`) should be applied to select components to give them the desired PX Blue styling. The following components should use the alternate dark theme: +The alternate dark theme (`blueDarkAlt`) should be applied to select components to give them the desired Brightlayer UI styling. The following components should use the alternate dark theme: - Activity Indicator - Appbar @@ -73,7 +74,7 @@ The alternate dark theme (`blueDarkAlt`) should be applied to select components - Snackbar - TextInput -![Dark Theme Infographic](https://raw.githubusercontent.com/pxblue/themes/master/react-native/assets/dark-theme-infographic.png) +![Dark Theme Infographic](https://raw.githubusercontent.com/brightlayer-ui/themes/master/react-native/assets/dark-theme-infographic.png) 1. For these components, make sure you are using the darkThemeAlt. 2. Do not use the darkTheme or these components will render using the incorrect color scheme. @@ -84,7 +85,7 @@ If you are only using a component from this list once or twice in your applicati ```tsx import { useTheme } from 'react-native-paper'; -import { blueDarkAlt } from '@pxblue/react-native-themes'; +import { blueDarkAlt } from '@brightlayer-ui/react-native-themes'; const theme = useTheme(); ... @@ -98,7 +99,7 @@ To do this, you define a wrapper component that acts as a pass-through for all o ```tsx import React from 'react'; -import { blueDarkAlt } from '@pxblue/react-native-themes'; +import { blueDarkAlt } from '@brightlayer-ui/react-native-themes'; import { SomeComponent as PaperComponent, useTheme } from 'react-native-paper'; ... export const SomeComponent: typeof PaperComponent = (props) => { @@ -128,7 +129,7 @@ The `Button` component is a special case that requires the alternate theme only ```tsx import React from 'react'; -import { blueDarkAlt } from '@pxblue/react-native-themes'; +import { blueDarkAlt } from '@brightlayer-ui/react-native-themes'; import { Button, useTheme } from 'react-native-paper'; ... export const MyCustomButton: typeof Button = (props) => { @@ -149,24 +150,29 @@ export const MyCustomButton: typeof Button = (props) => { The `TextInput` component is a special case that requires usage of both `blueDark` and `blueDarkAlt` themes. The wrapper component for the `TextInput` should look like: ```tsx -import { blueDark, blueDarkAlt } from '@pxblue/react-native-themes'; -import { TextInput, useTheme } from 'react-native-paper'; -import _clonedeep from 'lodash.clonedeep'; +import { blueDark, blueDarkAlt } from "@brightlayer-ui/react-native-themes"; +import { TextInput, useTheme } from "react-native-paper"; +import _clonedeep from "lodash.clonedeep"; export const MyCustomTextInput: typeof TextInput = (props) => { const theme = useTheme(props.theme); const darkTheme = _clonedeep(blueDarkAlt); darkTheme.colors.primary = blueDark.colors.primary; - return ; + return ( + + ); }; ``` -> **Sample Wrappers:** PX Blue has sample wrapper code for all of these components that you can copy for use in your application. These can be found in our [Showcase Demo](https://github.com/pxblue/react-native-showcase-demo/tree/master/components/wrappers). +> **Sample Wrappers:** Brightlayer UI has sample wrapper code for all of these components that you can copy for use in your application. These can be found in our [Showcase Demo](https://github.com/brightlayer-ui/react-native-showcase-demo/tree/master/components/wrappers). ### 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 { @@ -185,5 +191,5 @@ declare global { diff --git a/package.json b/package.json index 04cdaa1..f361f31 100644 --- a/package.json +++ b/package.json @@ -1,9 +1,9 @@ { - "name": "@pxblue/react-native-themes", - "author": "PX Blue ", + "name": "@brightlayer-ui/react-native-themes", + "author": "Brightlayer UI ", "license": "BSD-3-Clause", "version": "5.2.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", @@ -16,28 +16,27 @@ "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" }, "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", + "BrightlayerUI", "themes", "Eaton", - "Power", - "Xpert", "React Native" ], "dependencies": { - "@pxblue/colors": "^3.0.0", + "@brightlayer-ui/colors": "^3.0.0", "color": "^3.1.3" }, "peerDependencies": { diff --git a/scripts/linkThemes.sh b/scripts/linkThemes.sh index 34de148..46ef059 100644 --- a/scripts/linkThemes.sh +++ b/scripts/linkThemes.sh @@ -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 diff --git a/src/blueDarkAltTheme.ts b/src/blueDarkAltTheme.ts index 4011228..1a5d334 100644 --- a/src/blueDarkAltTheme.ts +++ b/src/blueDarkAltTheme.ts @@ -6,12 +6,14 @@ All rights reserved. This code is licensed under the BSD-3 license found in the LICENSE file in the root directory of this source tree and at https://opensource.org/licenses/BSD-3-Clause. **/ -import { blue, black, lightBlue } from '@pxblue/colors'; -import { blueDarkTheme } from './blueDarkTheme'; +import { blue, black, lightBlue } from "@brightlayer-ui/colors"; +import { blueDarkTheme } from "./blueDarkTheme"; -console.warn('blueDarkAlt theme will be deprecated in v6.0.0, use blueDark theme'); +console.warn( + "blueDarkAlt theme will be deprecated in v6.0.0, use blueDark theme" +); -/** +/** * @deprecated in v6.0.0 use blueDark theme */ export const blueDarkAltTheme = { diff --git a/src/blueDarkTheme.ts b/src/blueDarkTheme.ts index 4e9e464..b698e96 100644 --- a/src/blueDarkTheme.ts +++ b/src/blueDarkTheme.ts @@ -6,10 +6,10 @@ All rights reserved. This code is licensed under the BSD-3 license found in the LICENSE file in the root directory of this source tree and at https://opensource.org/licenses/BSD-3-Clause. **/ -import { configureFonts, DefaultTheme } from 'react-native-paper'; -import { blue, red, darkBlack, black, lightBlue } from '@pxblue/colors'; -import { fontConfig } from './shared'; -import Color from 'color'; +import { configureFonts, DefaultTheme } from "react-native-paper"; +import { blue, red, darkBlack, black, lightBlue } from "@brightlayer-ui/colors"; +import { fontConfig } from "./shared"; +import Color from "color"; export const blueDarkTheme: ReactNativePaper.Theme = { ...DefaultTheme, @@ -18,8 +18,8 @@ export const blueDarkTheme: ReactNativePaper.Theme = { fonts: { ...configureFonts(fontConfig), bold: { - fontFamily: 'OpenSans-Bold', - fontWeight: '700', + fontFamily: "OpenSans-Bold", + fontWeight: "700", }, }, colors: { diff --git a/src/blueTheme.ts b/src/blueTheme.ts index 7fd1e19..cf1b6b5 100644 --- a/src/blueTheme.ts +++ b/src/blueTheme.ts @@ -6,9 +6,9 @@ All rights reserved. This code is licensed under the BSD-3 license found in the LICENSE file in the root directory of this source tree and at https://opensource.org/licenses/BSD-3-Clause. **/ -import { configureFonts, DefaultTheme } from 'react-native-paper'; -import { blue, red, black, lightBlue, white } from '@pxblue/colors'; -import { fontConfig } from './shared'; +import { configureFonts, DefaultTheme } from "react-native-paper"; +import { blue, red, black, lightBlue, white } from "@brightlayer-ui/colors"; +import { fontConfig } from "./shared"; export const blueTheme: ReactNativePaper.Theme = { ...DefaultTheme, @@ -17,8 +17,8 @@ export const blueTheme: ReactNativePaper.Theme = { fonts: { ...configureFonts(fontConfig), bold: { - fontFamily: 'OpenSans-Bold', - fontWeight: '700', + fontFamily: "OpenSans-Bold", + fontWeight: "700", }, }, colors: { diff --git a/yarn.lock b/yarn.lock index cc4e750..f1be0d3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,6 +2,18 @@ # 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/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" @@ -10,18 +22,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/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" From 2242b08301a95fc503546a2b405bd6b2cf2139eb Mon Sep 17 00:00:00 2001 From: daileytj Date: Mon, 13 Dec 2021 10:54:23 -0500 Subject: [PATCH 2/2] Update CHANGELOG.md --- CHANGELOG.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 74b0fc6..c0a04fe 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,17 @@ # Changelog +## v5.2.0 (December 13, 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. + +--- + ## v5.2.0 (October 1, 2021) ### Added