Merge pull request #108 from etn-ccis/dev

PR for merging Dev branch against master

.github/workflows/blui-ci.yml

@@ -0,0 +1,81 @@
+name: Build
+
+on:
+  push:
+    branches: [ "dev", "master" ]
+  pull_request:
+    branches: [ "dev", "master" ]
+  pull_request_target:
+    types:
+      - opened
+    branches:
+      - '*/*'
+
+permissions:
+  pull-requests: write
+  contents: read
+
+jobs:
+  prettier:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.x]        
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+            node-version: ${{ matrix.node-version }}
+            cache: 'yarn'
+      - run: yarn install --immutable
+      - run: yarn prettier:check
+
+  build_theme_verify_artifacts:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.x]
+    steps:
+    - uses: actions/checkout@v4
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'yarn'
+    - run: yarn --immutable
+    - run: yarn build
+    - name: Save build
+      uses: actions/upload-artifact@v3
+      with:
+        name: dist
+        if-no-files-found: error
+        path: dist
+    - run: yarn test
+
+  publish_react_native_theme:
+    runs-on: ubuntu-latest
+    if: ${{ github.event_name == 'push' && (github.ref == 'refs/heads/master' || github.ref == 'refs/heads/dev') }}
+    needs: build_theme_verify_artifacts
+    strategy:
+      matrix:
+        node-version: [18.x]
+    env:
+      NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+      BRANCH: ${{ github.ref == 'refs/heads/master' && 'master' || 'dev' }}
+    steps:
+      - uses: actions/checkout@v4
+      - name: Download dist
+        uses: actions/download-artifact@v3
+        with:
+          name: dist
+          path: dist
+      - uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          registry-url: 'https://registry.npmjs.org'
+      - run: yarn --immutable
+      - run: npm run publish:package -b ${{env.BRANCH}}

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## v7.0.1 (May 9, 2024)
+
+### Fixed
+
+-   Text variants not working correctly on Android [89](https://github.com/etn-ccis/blui-react-native-themes/issues/89).
+
 ## v7.0.0 (January 12, 2024)
 
 ### Changed

PUBLISHING.md

@@ -2,7 +2,7 @@
 
 ## Automatic Publishing
 
-This package is published to NPM automatically by CircleCI when code is merged into the `dev` or `master` branches. To publish a new version, simply update the version in `package.json` and merge your code into the appropriate branch.
+This package is published to NPM automatically by Github when code is merged into the `dev` or `master` branches. To publish a new version, simply update the version in `package.json` and merge your code into the appropriate branch.
 
 -   The `dev` branch will publish versions marked as `alpha` or `beta`.
 -   The `master` branch will publish any version (`alpha`, `beta`, or `latest`).
@@ -26,4 +26,4 @@ yarn build
 npm adduser && yarn publish:package
 ```
 
-> Publishing manually should only be done for `alpha` or `beta` packages. The command will work for `latest` packages, but this should be avoided except in rare situations where the automatic publishing functionality is not working in CircleCI.
+> Publishing manually should only be done for `alpha` or `beta` packages. The command will work for `latest` packages, but this should be avoided except in rare situations where the automatic publishing functionality is not working in Github.

README.md

@@ -1,6 +1,6 @@
 # Brightlayer UI themes for React Native applications
 
-[![](https://img.shields.io/circleci/project/github/etn-ccis/blui-react-native-themes/master.svg?style=flat)](https://circleci.com/gh/etn-ccis/blui-react-native-themes/tree/master)
+[![Build](https://github.com/etn-ccis/blui-react-native-themes/actions/workflows/blui-ci.yml/badge.svg?branch=master)](https://github.com/etn-ccis/blui-react-native-themes/actions/workflows/blui-ci.yml)
 [![](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](https://brightlayer-ui.github.io/style/themes) 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.
@@ -55,7 +55,6 @@ import * as BLUIThemes from '@brightlayer-ui/react-native-themes';
 </ThemeProvider>
 ```
 
-
 ### React Native Paper Components Style Override
 
 This Document contains a set of style overrides in components around various [React Native Paper](https://callstack.github.io/react-native-paper/index.html) components.
@@ -77,6 +76,19 @@ const theme = useExtendedTheme();
 </Button>
 ```
 
+## Usage of useFontWeight hook in your project
+
+When the fontFamily of a Text element in your application needs to be modified, you can use the useFontWeight hook.For instance, to set the fontWeight to "bold", you can utilize the useFontWeight() hook as demonstrated below:
+
+```tsx
+import { useFontWeight } from '@brightlayer-ui/react-native-themes';
+...
+const fontStyleBold = useFontWeight('700');
+<Text variant={'headlineLarge'} style={{ ...fontStyleBold }}>
+    headlineLarge
+</Text>
+```
+
 ### Upgrading from version 6 -> 7
 
 In the version 7, the library has been updated to use [React Native Paper](https://callstack.github.io/react-native-paper/) v5, which is adopting [Material Design 3](https://m3.material.io/). The themes have now been updated to use Material Design 3 Themes.
@@ -85,4 +97,4 @@ In the version 7, the library has been updated to use [React Native Paper](https
 ## Demo
 
 [Check it out](https://github.com/etn-ccis/blui-react-native-showcase-demo/tree/master)
--->
+-->

package.json

@@ -2,7 +2,7 @@
     "name": "@brightlayer-ui/react-native-themes",
     "author": "Brightlayer UI <[email protected]>",
     "license": "BSD-3-Clause",
-    "version": "7.0.0",
+    "version": "7.0.1",
     "description": "React Native themes for Brightlayer UI applications",
     "main": "./dist/index.js",
     "scripts": {

src/index.ts

@@ -7,4 +7,4 @@ This code is licensed under the BSD-3 license found in the LICENSE file in the r
 **/
 export { MD3BluiLightTheme as blue } from './blueTheme';
 export { MD3BluiDarkTheme as blueDark } from './blueDarkTheme';
-export { ExtendedTheme, useExtendedTheme } from './shared';
+export { ExtendedTheme, useExtendedTheme, useFontWeight } from './shared';

src/shared.ts

@@ -1,15 +1,14 @@
 import { Platform } from 'react-native';
 
 import { MD3Theme, useTheme } from 'react-native-paper';
-import { MD3Type, MD3Typescale } from 'react-native-paper/lib/typescript/types';
 import { $DeepPartial } from '@callstack/react-theme-provider';
 
 export const fontConfig = {
     displaySmall: {
         fontFamily: 'OpenSans-Regular',
         fontWeight: '400' as const,
         fontSize: 36,
-        lineHeight: 45,
+        lineHeight: 48,
     },
     displayMedium: {
         fontFamily: 'OpenSans-Regular',
@@ -20,37 +19,37 @@ export const fontConfig = {
     displayLarge: {
         fontFamily: 'OpenSans-Regular',
         fontWeight: '400' as const,
-        fontSize: 54,
-        lineHeight: 68,
-        letterSpacing: 1,
+        fontSize: 57,
+        lineHeight: 72,
+        letterSpacing: -0.25,
     },
     headlineSmall: {
         fontFamily: 'OpenSans-Regular',
-        fontWeight: '500' as const,
+        fontWeight: '400' as const,
         fontSize: 24,
         lineHeight: 32,
     },
     headlineMedium: {
         fontFamily: 'OpenSans-Regular',
-        fontWeight: '500' as const,
-        fontSize: 27,
-        lineHeight: 40,
+        fontWeight: '400' as const,
+        fontSize: 28,
+        lineHeight: 36,
     },
     headlineLarge: {
         fontFamily: 'OpenSans-Regular',
-        fontWeight: '500' as const,
+        fontWeight: '400' as const,
         fontSize: 32,
         lineHeight: 40,
     },
     titleSmall: {
-        fontFamily: 'OpenSans-Regular',
+        fontFamily: 'OpenSans-SemiBold',
         fontWeight: '600' as const,
         fontSize: 14,
         lineHeight: 20,
         letterSpacing: 0.1,
     },
     titleMedium: {
-        fontFamily: 'OpenSans-Regular',
+        fontFamily: 'OpenSans-SemiBold',
         fontWeight: '600' as const,
         fontSize: 16,
         lineHeight: 24,
@@ -229,3 +228,42 @@ export type ExtendedTheme = Omit<MD3Theme, 'colors'> & {
 
 export const useExtendedTheme = (overrides?: $DeepPartial<ExtendedTheme>): ExtendedTheme =>
     useTheme<ExtendedTheme>(overrides);
+
+export type bluiFontWeight = '300' | '400' | '600' | '700' | '800' | undefined;
+
+export type FontStyle = {
+    fontFamily: string;
+    fontWeight: bluiFontWeight;
+};
+
+export const useFontWeight = (weight: bluiFontWeight): FontStyle => {
+    switch (weight) {
+        case '300':
+            return {
+                fontFamily: 'OpenSans-Light',
+                fontWeight: '300',
+            };
+        case '400':
+            return {
+                fontFamily: 'OpenSans-Regular',
+                fontWeight: '400',
+            };
+        case '600':
+            return {
+                fontFamily: 'OpenSans-SemiBold',
+                fontWeight: '600',
+            };
+        case '700':
+            return {
+                fontFamily: 'OpenSans-Bold',
+                fontWeight: '700',
+            };
+        case '800':
+            return {
+                fontFamily: 'OpenSans-ExtraBold',
+                fontWeight: '800',
+            };
+        default:
+            throw new Error(`Invalid font weight: ${weight}`);
+    }
+};

yarn.lock

@@ -2175,9 +2175,9 @@ invariant@*, invariant@^2.2.4:
     loose-envify "^1.0.0"
 
 ip@^1.1.5:
-  version "1.1.8"
-  resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.8.tgz#ae05948f6b075435ed3307acce04629da8cdbf48"
-  integrity sha512-PuExPYUiu6qMBQb4l06ecm6T6ujzhmh+MeJcW9wa89PoAz5pvd4zPgN5WJV104mb6S2T1AwNIAaB70JNrLQWhg==
+  version "1.1.9"
+  resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.9.tgz#8dfbcc99a754d07f425310b86a99546b1151e396"
+  integrity sha512-cyRxvOEpNHNtchU3Ln9KC/auJgup87llfQpQ+t5ghoC/UhL16SWzbueiCsdTnWmqAWl7LadfuwhlqmtOaqMHdQ==
 
 is-arrayish@^0.2.1:
   version "0.2.1"
@@ -3295,9 +3295,9 @@ react-is@^17.0.1:
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
 react-native-paper@^5.0.0:
-  version "5.11.1"
-  resolved "https://registry.yarnpkg.com/react-native-paper/-/react-native-paper-5.11.1.tgz#34f612d6fb28099334db08a1bd109086ea91dcac"
-  integrity sha512-axqRTagGL8LtuYh172cx2Q2THOVJ3PTpPjCKhL5ECRdpJs2ceiboVecSiOIBuO3H7dVpaneptBA0vJr9HeVHwg==
+  version "5.12.3"
+  resolved "https://registry.yarnpkg.com/react-native-paper/-/react-native-paper-5.12.3.tgz#d583119722ebbfbb7fe40400181d63748cca3683"
+  integrity sha512-nH1e1pGPE/aOE5YR2GRX7CfMHFA9cAfrAfgCtwL4amJPDZCoVjc5yt2VDiUE1rT+JUfk0qdICMP3UggxvjMgug==
   dependencies:
     "@callstack/react-theme-provider" "^3.0.9"
     color "^3.1.2"
@@ -3892,9 +3892,9 @@ type-fest@^0.7.1:
   integrity sha512-Ne2YiiGN8bmrmJJEuTWTLJR32nh/JdL1+PSicowtNb0WFpn59GK8/lfD61bVtzguz7b3PBt74nxpv/Pw5po5Rg==
 
 typescript@^5.0.4:
-  version "5.2.2"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.2.2.tgz#5ebb5e5a5b75f085f22bc3f8460fba308310fa78"
-  integrity sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==
+  version "5.4.5"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.4.5.tgz#42ccef2c571fdbd0f6718b1d1f5e6e5ef006f611"
+  integrity sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==
 
 uglify-es@^3.1.9:
   version "3.3.9"