Merge pull request #22 from pxblue/feature/2684-bluify

Blui-fy Themes repo version n-1
etn-ccis · Dec 13, 2021 · ef9f1c9 · ef9f1c9
2 parents eaa2ee8 + 2242b08
commit ef9f1c9
Show file tree

Hide file tree

Showing 9 changed files with 115 additions and 96 deletions.
diff --git 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/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

diff --git 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-<Weight>`, 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
-<ThemeProvider theme={PXBThemes.blue}>
+<ThemeProvider theme={BLUIThemes.blue}>
     <App />
 </ThemeProvider>
 ```
 
 ### 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';
 ...
-<ThemeProvider theme={PXBThemes.blueDark}>
+<ThemeProvider theme={BLUIThemes.blueDark}>
     <App />
 </ThemeProvider>
 ```
 
 #### 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();
 ...
 <Badge size={24} visible theme={theme.dark ? blueDarkAlt : {}}></Badge>
@@ -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 <TextInput {...props} theme={theme.dark ? Object.assign({}, darkTheme, props.theme) : {}} />;
+    return (
+        <TextInput
+            {...props}
+            theme={theme.dark ? Object.assign({}, darkTheme, props.theme) : {}}
+        />
+    );
 };
 ```
 
-> **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 {
 <!--
 ## 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)
 -->
diff --git a/package.json b/package.json
@@ -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": "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
@@ -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
@@ -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
@@ -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
@@ -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: {