Merge pull request #16 from pxblue/dev

Publish v6.0.0
etn-ccis · Oct 1, 2021 · fa4760f · fa4760f
2 parents eaa2ee8 + dde1ff8
commit fa4760f
Show file tree

Hide file tree

Showing 10 changed files with 285 additions and 156 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -7,6 +7,21 @@ jobs:
             -   image: circleci/node:12.9.1-browsers
         steps:
             - checkout
+            - restore_cache:
+                  keys:
+                      - v1-dependencies-{{ checksum "yarn.lock" }}
+            - run:
+                  name: Install Dependencies
+                  command: |
+                      yarn install --frozen-lockfile
+            - save_cache:
+                  name: Save Cache
+                  paths:
+                      - node_modules
+                  key: v1-dependencies-{{ checksum "yarn.lock" }}
+            - run:
+                  name: Prettier Check
+                  command: yarn prettier:check
             - run:
                   name: Build
                   command: yarn build

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,15 @@
 # Changelog
 
+## v6.0.0 (October 1, 2021)
+
+### Added
+
+-   Many new theme color properties to give greater control over the styles of various components. Note that the global ReactNativePaper namespace will need to be updated in your application to use these properties.
+
+### Removed
+-   The `blueDarkAlt` theme has been consolidated into the `blueDark` theme and a selection of wrapper components in the `@pxblue/react-native-components` library. This eliminates the need for using two theme providers and writing your own wrappers for these components.
+-   `theme.colors.textSecondary` — use `theme.colors.textPalette.secondary` instead.
+
 ## v5.2.0 (October 1, 2021)
 
 ### Added

diff --git a/README.md b/README.md
@@ -1,4 +1,5 @@
 # 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)
 
@@ -29,9 +30,9 @@ yarn add @pxblue/react-native-themes
 
 > 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 our themes in your application, simply wrap the app in a `Provider` and pass in your desired theme (e.g., `blue`, `blueDark`).
 
-To use the light theme in your application, simply wrap the app in a `Provider` and pass in your desired theme (`blue`).
+#### Light Theme
 
 ```tsx
 import { Provider as ThemeProvider} from 'react-native-paper';
@@ -43,11 +44,7 @@ import * as PXBThemes from '@pxblue/react-native-themes';
 </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 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.
+#### Dark Theme
 
 ```tsx
 import { Provider as ThemeProvider} from 'react-native-paper';
@@ -58,111 +55,13 @@ import * as PXBThemes from '@pxblue/react-native-themes';
 </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:
-
--   Activity Indicator
--   Appbar
--   Avatar
--   Badge
--   Bottom Navigation
--   Button (`contained` mode variant)
--   FAB
--   ProgressBar
--   Snackbar
--   TextInput
-
-![Dark Theme Infographic](https://raw.githubusercontent.com/pxblue/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 '@pxblue/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 '@pxblue/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:
+> When using either of these themes, you should use our React Native Paper wrapper components (see below).
 
-```tsx
-import { SomeComponent } from './path/to/SomeComponent';
-...
-<SomeComponent {...samePropsAsThePaperComponent} />
-```
+### React Native Paper Wrapper Components
 
-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 '@pxblue/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 '@pxblue/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) : {}} />;
-};
-```
+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.
 
-> **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).
+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.
 
 ### TypeScript
 
@@ -172,8 +71,40 @@ Our PX Blue themes extend the themes provided by React Native Paper. If you are
 declare global {
     namespace ReactNativePaper {
         interface ThemeColors {
-            primaryBase: string;
-            textSecondary: string;
+            primaryPalette: {
+                light: string;
+                main: string;
+                dark: string;
+            };
+            accentPalette: {
+                light: string;
+                main: string;
+                dark: string;
+            };
+            errorPalette: {
+                light: string;
+                main: string;
+                dark: string;
+            };
+            divider: string;
+            textPalette: {
+                primary: string;
+                secondary: string;
+                onPrimary: {
+                    light: string;
+                    main: string;
+                    dark: string;
+                };
+                disabled: string;
+            };
+            actionPalette: {
+                active: string;
+                background: string;
+                disabled: string;
+                disabledBackground: string;
+            };
+            overrides: $DeepPartial<ThemeOverrides>;
+            opacity: Partial<ThemeOpacity>;
         }
         interface ThemeFonts {
             bold: ThemeFont;

diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
     "name": "@pxblue/react-native-themes",
     "author": "PX Blue <[email protected]>",
     "license": "BSD-3-Clause",
-    "version": "5.2.0",
+    "version": "6.0.0",
     "description": "React Native themes for PX Blue applications",
     "main": "./dist/index.js",
     "scripts": {
@@ -18,7 +18,9 @@
         "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",
-        "update:submodule": "git submodule update --remote"
+        "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",
@@ -44,15 +46,18 @@
         "react-native-paper": "^3.0.0 || ^4.0.0"
     },
     "devDependencies": {
+        "@pxblue/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",
     "files": [
         "package.json",
         "README.md",
         "LICENSE",
         "CHANGELOG.md",
         "/dist"
     ]
-}
+}
diff --git a/src/blueDarkAltTheme.ts b/src/blueDarkAltTheme.ts
diff --git a/src/blueDarkTheme.ts b/src/blueDarkTheme.ts
@@ -7,10 +7,17 @@ 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, lightBlue } from '@pxblue/colors';
-import { fontConfig } from './shared';
+import { blue, red, darkBlack, black, white, lightBlue } from '@pxblue/colors';
+import { fontConfig, ThemeOpacity } from './shared';
 import Color from 'color';
 
+const themeOpacity: ThemeOpacity = {
+    disabled: 0.36,
+    divider: 0.36,
+    disabledBackground: 0.24,
+    actionOpacity: 0.1,
+};
+
 export const blueDarkTheme: ReactNativePaper.Theme = {
     ...DefaultTheme,
     dark: true,
@@ -25,17 +32,62 @@ export const blueDarkTheme: ReactNativePaper.Theme = {
     colors: {
         ...DefaultTheme.colors,
         primary: blue[200],
-        primaryBase: blue[500],
+        primaryPalette: {
+            light: blue[50],
+            main: blue[200],
+            dark: blue[500],
+        },
         accent: lightBlue[200],
+        accentPalette: {
+            light: lightBlue[50],
+            main: lightBlue[200],
+            dark: lightBlue[500],
+        },
+        error: red[200],
+        errorPalette: {
+            light: red[50],
+            main: red[200],
+            dark: red[500],
+        },
+        divider: Color(black[200]).alpha(themeOpacity.divider).string(),
         background: darkBlack[800],
         surface: black[900],
-        error: red[200],
         text: black[50],
-        textSecondary: black[200],
         placeholder: black[200],
-        onBackground: black[50],
         onSurface: black[50],
+        textPalette: {
+            primary: black[50],
+            secondary: black[200],
+            onPrimary: {
+                light: black[500],
+                main: black[500],
+                dark: white[50],
+            },
+            disabled: black[400],
+        },
+        actionPalette: {
+            active: black[500],
+            background: black[800],
+            disabled: Color(black[300]).alpha(themeOpacity.disabled).string(),
+            disabledBackground: Color(black[200]).alpha(themeOpacity.disabledBackground).string(),
+        },
+        disabled: Color(black[300]).alpha(themeOpacity.disabled).string(),
         notification: lightBlue[200],
-        disabled: Color(black[300]).alpha(0.36).rgb().string(),
+        opacity: themeOpacity,
+        overrides: {
+            avatar: {
+                background: Color(black[50]).alpha(themeOpacity.actionOpacity).string(),
+            },
+            chip: {
+                flat: {
+                    background: black[500],
+                },
+            },
+            toggleButtonGroup: {
+                checked: {
+                    background: Color(blue[500]).alpha(0.36).string(),
+                },
+            },
+        },
     },
 };