@brightlayer-ui/react-native-themes 5.2.0-beta.0

package/CHANGELOG.md

@@ -0,0 +1,49 @@
+# 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
+
+-   blueDarkAlt theme deprecation notice.
+
+## v5.1.0 (March 30, 2021)
+
+### Added
+
+-   Initial Dark themes (regular and alternate)
+
+## v5.0.1 (November 19, 2020)
+
+### Changed
+
+-   Updated peerDependencies to allow for use with react-native-paper version 4.
+
+## v5.0.0 (June 30, 2020)
+
+### Changed
+
+-   Updated theme to comply with the [react-native-paper](https://callstack.github.io/react-native-paper/theming.html) specification.
+
+** Breaking Changes **
+
+-   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.
+
+## 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).

package/LICENSE

@@ -0,0 +1,29 @@
+BSD 3-Clause License
+
+Copyright (c) 2020 - present, Eaton
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this
+  list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice,
+  this list of conditions and the following disclaimer in the documentation
+  and/or other materials provided with the distribution.
+
+* Neither the name of the copyright holder nor the names of its
+  contributors may be used to endorse or promote products derived from
+  this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/README.md

@@ -0,0 +1,195 @@
+# Brightlayer UI themes for React Native applications
+
+[![](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:
+
+-   [@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 @brightlayer-ui/react-native-themes
+```
+
+or yarn
+
+```shell
+yarn add @brightlayer-ui/react-native-themes
+```
+
+# Usage
+
+> **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.
+
+### Light Theme
+
+To use the light theme in your application, simply wrap the app in a `Provider` and pass in your desired theme (`blue`).
+
+```tsx
+import { Provider as ThemeProvider} from 'react-native-paper';
+import * as BLUIThemes from '@brightlayer-ui/react-native-themes';
+...
+// Default Theme
+<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 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 BLUIThemes from '@brightlayer-ui/react-native-themes';
+...
+<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 Brightlayer UI styling. The following components should use the alternate dark theme:
+
+-   Activity Indicator
+-   Appbar
+-   Avatar
+-   Badge
+-   Bottom Navigation
+-   Button (`contained` mode variant)
+-   FAB
+-   ProgressBar
+-   Snackbar
+-   TextInput
+
+![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.
+
+##### One-Off Usage
+
+If you are only using a component from this list once or twice in your application, you can pass the alternate theme directly to the component through the `theme` prop.
+
+```tsx
+import { useTheme } from 'react-native-paper';
+import { blueDarkAlt } from '@brightlayer-ui/react-native-themes';
+const theme = useTheme();
+...
+<Badge size={24} visible theme={theme.dark ? blueDarkAlt : {}}></Badge>
+```
+
+##### Component-Based Usage
+
+If you are using components frequently, it's best to create a wrapper component that will handle the alternate theme logic. This will allow you to keep your code more readable and avoid errors with inconsistent theme application.
+
+To do this, you define a wrapper component that acts as a pass-through for all of the default props and adds the theme logic.
+
+```tsx
+import React from 'react';
+import { blueDarkAlt } from '@brightlayer-ui/react-native-themes';
+import { SomeComponent as PaperComponent, useTheme } from 'react-native-paper';
+...
+export const SomeComponent: typeof PaperComponent = (props) => {
+    const theme = useTheme(props.theme);
+    return (
+        <PaperComponent
+            {...props}
+            theme={
+                theme.dark
+                ? Object.assign({}, blueDarkAlt, props.theme)
+                : {}
+            }
+        />
+    );
+};
+```
+
+You would then use your custom wrapper component throughout your application instead of using the component directly from React Native Paper:
+
+```tsx
+import { SomeComponent } from './path/to/SomeComponent';
+...
+<SomeComponent {...samePropsAsThePaperComponent} />
+```
+
+The `Button` component is a special case that requires the alternate theme only if you are using the contained mode. The wrapper component for the `Button` should look like:
+
+```tsx
+import React from 'react';
+import { blueDarkAlt } from '@brightlayer-ui/react-native-themes';
+import { Button, useTheme } from 'react-native-paper';
+...
+export const MyCustomButton: typeof Button = (props) => {
+    const theme = useTheme(props.theme);
+    return (
+        <Button
+            {...props}
+            theme={
+                props.mode === 'contained' && theme.dark
+                    ? Object.assign({}, blueDarkAlt, props.theme)
+                    : {}
+            }
+        />
+    );
+};
+```
+
+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 "@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) : {}}
+        />
+    );
+};
+```
+
+> **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 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 {
+    namespace ReactNativePaper {
+        interface ThemeColors {
+            primaryBase: string;
+            textSecondary: string;
+        }
+        interface ThemeFonts {
+            bold: ThemeFont;
+        }
+    }
+}
+```
+
+<!--
+## Demo
+
+[Check it out](https://github.com/brightlayer-ui/react-native-showcase-demo/tree/master)
+-->

package/dist/blueDarkAltTheme.d.ts

@@ -0,0 +1,33 @@
+/**
+Copyright (c) 2020-present, Eaton
+
+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.
+**/
+/**
+ * @deprecated in v6.0.0 use blueDark theme
+ */
+export declare const blueDarkAltTheme: {
+    colors: {
+        primary: string;
+        accent: string;
+        background: string;
+        notification: string;
+        surface: string;
+        error: string;
+        text: string;
+        onSurface: string;
+        onBackground: string;
+        disabled: string;
+        placeholder: string;
+        backdrop: string;
+        primaryBase: string;
+        textSecondary: string;
+    };
+    dark: boolean;
+    mode?: "adaptive" | "exact" | undefined;
+    roundness: number;
+    fonts: ReactNativePaper.ThemeFonts;
+    animation: ReactNativePaper.ThemeAnimation;
+};

package/dist/blueDarkAltTheme.js

@@ -0,0 +1,28 @@
+"use strict";
+/**
+Copyright (c) 2020-present, Eaton
+
+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.
+**/
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.blueDarkAltTheme = void 0;
+var colors_1 = require("@brightlayer-ui/colors");
+var blueDarkTheme_1 = require("./blueDarkTheme");
+console.warn("blueDarkAlt theme will be deprecated in v6.0.0, use blueDark theme");
+/**
+ * @deprecated in v6.0.0 use blueDark theme
+ */
+exports.blueDarkAltTheme = __assign(__assign({}, blueDarkTheme_1.blueDarkTheme), { colors: __assign(__assign({}, blueDarkTheme_1.blueDarkTheme.colors), { primary: colors_1.blue[500], accent: colors_1.lightBlue[500], background: colors_1.black[900], notification: colors_1.lightBlue[500] }) });

package/dist/blueDarkTheme.d.ts

@@ -0,0 +1,8 @@
+/**
+Copyright (c) 2020-present, Eaton
+
+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.
+**/
+export declare const blueDarkTheme: ReactNativePaper.Theme;

package/dist/blueDarkTheme.js

@@ -0,0 +1,32 @@
+"use strict";
+/**
+Copyright (c) 2020-present, Eaton
+
+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.
+**/
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.blueDarkTheme = void 0;
+var react_native_paper_1 = require("react-native-paper");
+var colors_1 = require("@brightlayer-ui/colors");
+var shared_1 = require("./shared");
+var color_1 = __importDefault(require("color"));
+exports.blueDarkTheme = __assign(__assign({}, react_native_paper_1.DefaultTheme), { dark: true, roundness: 4, fonts: __assign(__assign({}, react_native_paper_1.configureFonts(shared_1.fontConfig)), { bold: {
+            fontFamily: "OpenSans-Bold",
+            fontWeight: "700",
+        } }), colors: __assign(__assign({}, react_native_paper_1.DefaultTheme.colors), { primary: colors_1.blue[200], primaryBase: colors_1.blue[500], accent: colors_1.lightBlue[200], background: colors_1.darkBlack[800], surface: colors_1.black[900], error: colors_1.red[200], text: colors_1.black[50], textSecondary: colors_1.black[200], placeholder: colors_1.black[200], onBackground: colors_1.black[50], onSurface: colors_1.black[50], notification: colors_1.lightBlue[200], disabled: color_1.default(colors_1.black[300]).alpha(0.36).rgb().string() }) });

package/dist/blueTheme.d.ts

@@ -0,0 +1,8 @@
+/**
+Copyright (c) 2020-present, Eaton
+
+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.
+**/
+export declare const blueTheme: ReactNativePaper.Theme;

package/dist/blueTheme.js

@@ -0,0 +1,28 @@
+"use strict";
+/**
+Copyright (c) 2020-present, Eaton
+
+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.
+**/
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.blueTheme = void 0;
+var react_native_paper_1 = require("react-native-paper");
+var colors_1 = require("@brightlayer-ui/colors");
+var shared_1 = require("./shared");
+exports.blueTheme = __assign(__assign({}, react_native_paper_1.DefaultTheme), { dark: false, roundness: 4, fonts: __assign(__assign({}, react_native_paper_1.configureFonts(shared_1.fontConfig)), { bold: {
+            fontFamily: "OpenSans-Bold",
+            fontWeight: "700",
+        } }), colors: __assign(__assign({}, react_native_paper_1.DefaultTheme.colors), { primary: colors_1.blue[500], primaryBase: colors_1.blue[500], accent: colors_1.lightBlue[500], background: colors_1.white[200], surface: colors_1.white[50], error: colors_1.red[500], text: colors_1.black[500], textSecondary: colors_1.black[300], onBackground: colors_1.black[500], onSurface: colors_1.black[500], notification: colors_1.lightBlue[500] }) });

package/dist/index.d.ts

@@ -0,0 +1,21 @@
+/**
+Copyright (c) 2021-present, Eaton
+
+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.
+**/
+export { blueTheme as blue } from './blueTheme';
+export { blueDarkTheme as blueDark } from './blueDarkTheme';
+export { blueDarkAltTheme as blueDarkAlt } from './blueDarkAltTheme';
+declare global {
+    namespace ReactNativePaper {
+        interface ThemeColors {
+            primaryBase: string;
+            textSecondary: string;
+        }
+        interface ThemeFonts {
+            bold: ThemeFont;
+        }
+    }
+}

package/dist/index.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+Copyright (c) 2021-present, Eaton
+
+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.
+**/
+var blueTheme_1 = require("./blueTheme");
+Object.defineProperty(exports, "blue", { enumerable: true, get: function () { return blueTheme_1.blueTheme; } });
+var blueDarkTheme_1 = require("./blueDarkTheme");
+Object.defineProperty(exports, "blueDark", { enumerable: true, get: function () { return blueDarkTheme_1.blueDarkTheme; } });
+var blueDarkAltTheme_1 = require("./blueDarkAltTheme");
+Object.defineProperty(exports, "blueDarkAlt", { enumerable: true, get: function () { return blueDarkAltTheme_1.blueDarkAltTheme; } });

package/dist/shared.d.ts

@@ -0,0 +1,58 @@
+declare type FontWeight = 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
+export declare const fontConfig: {
+    default: {
+        regular: {
+            fontFamily: string;
+            fontWeight: FontWeight;
+        };
+        medium: {
+            fontFamily: string;
+            fontWeight: FontWeight;
+        };
+        light: {
+            fontFamily: string;
+            fontWeight: FontWeight;
+        };
+        thin: {
+            fontFamily: string;
+            fontWeight: FontWeight;
+        };
+    };
+    ios: {
+        regular: {
+            fontFamily: string;
+            fontWeight: FontWeight;
+        };
+        medium: {
+            fontFamily: string;
+            fontWeight: FontWeight;
+        };
+        light: {
+            fontFamily: string;
+            fontWeight: FontWeight;
+        };
+        thin: {
+            fontFamily: string;
+            fontWeight: FontWeight;
+        };
+    };
+    android: {
+        regular: {
+            fontFamily: string;
+            fontWeight: FontWeight;
+        };
+        medium: {
+            fontFamily: string;
+            fontWeight: FontWeight;
+        };
+        light: {
+            fontFamily: string;
+            fontWeight: FontWeight;
+        };
+        thin: {
+            fontFamily: string;
+            fontWeight: FontWeight;
+        };
+    };
+};
+export {};

package/dist/shared.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fontConfig = void 0;
+var defaultFontConfig = {
+    regular: {
+        fontFamily: 'OpenSans-Regular',
+        fontWeight: '400',
+    },
+    medium: {
+        fontFamily: 'OpenSans-SemiBold',
+        fontWeight: '600',
+    },
+    light: {
+        fontFamily: 'OpenSans-Light',
+        fontWeight: '300',
+    },
+    thin: {
+        fontFamily: 'OpenSans-Light',
+        fontWeight: '100',
+    },
+};
+exports.fontConfig = {
+    default: defaultFontConfig,
+    ios: defaultFontConfig,
+    android: defaultFontConfig,
+};

package/package.json

@@ -0,0 +1,57 @@
+{
+    "name": "@brightlayer-ui/react-native-themes",
+    "author": "Brightlayer UI <brightlayer-ui@eaton.com>",
+    "license": "BSD-3-Clause",
+    "version": "5.2.0-beta.0",
+    "description": "React Native themes for Brightlayer UI applications",
+    "main": "./dist/index.js",
+    "scripts": {
+        "initialize": "bash scripts/initializeSubmodule.sh",
+        "install:showcase-ios": "cd demos/showcase && yarn && cd ios && pod install && cd ../../.. && yarn link:themes",
+        "install:showcase-android": "cd demos/showcase && yarn && cd ../.. && yarn link:themes",
+        "start": "yarn start:showcase",
+        "start:showcase": "yarn initialize && yarn start:showcase-ios",
+        "start:showcase-ios": "yarn initialize && yarn install:showcase-ios && cd demos/showcase && yarn ios",
+        "start:showcase-android": "yarn initialize && yarn install:showcase-android && cd demos/showcase && yarn android",
+        "build": "yarn && tsc",
+        "link:themes": "bash ./scripts/linkThemes.sh",
+        "test": "bash ./scripts/buildTest.sh",
+        "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/brightlayer-ui/react-native-themes.git"
+    },
+    "bugs": {
+        "url": "https://github.com/brightlayer-ui/react-native-themes/issues"
+    },
+    "homepage": "https://github.com/brightlayer-ui/react-native-themes/tree/master",
+    "keywords": [
+        "Brightlayer",
+        "BrightlayerUI",
+        "themes",
+        "Eaton",
+        "React Native"
+    ],
+    "dependencies": {
+        "@brightlayer-ui/colors": "^3.0.0",
+        "color": "^3.1.3"
+    },
+    "peerDependencies": {
+        "react-native-paper": "^3.0.0 || ^4.0.0"
+    },
+    "devDependencies": {
+        "@types/color": "^3.0.1",
+        "react-native-paper": "^4.0.0",
+        "typescript": "^3.7.2"
+    },
+    "files": [
+        "package.json",
+        "README.md",
+        "LICENSE",
+        "CHANGELOG.md",
+        "/dist"
+    ]
+}