diff --git a/.circleci/config.yml b/.circleci/config.yml deleted file mode 100644 index 0c4ff26..0000000 --- a/.circleci/config.yml +++ /dev/null @@ -1,65 +0,0 @@ -version: 2.1 -orbs: - gh: circleci/github-cli@1.0.3 -jobs: - build: - docker: - - image: cimg/node:16.19.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 - - run: - name: Verify Artifacts - command: yarn test - - persist_to_workspace: - root: . - paths: - - dist - - publish: - docker: - - image: cimg/node:16.19.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 @brightlayer-ui/react-native-themes - command: | - yarn publish:package -b $CIRCLE_BRANCH - -workflows: - version: 2 - themes: - jobs: - - build - - publish: - requires: - - build - filters: - branches: - only: - - master - - dev diff --git a/.github/workflows/blui-ci.yml b/.github/workflows/blui-ci.yml new file mode 100644 index 0000000..c65d9da --- /dev/null +++ b/.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}} \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md index 311111a..feee2da 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/PUBLISHING.md b/PUBLISHING.md index 201b702..96e37f2 100644 --- a/PUBLISHING.md +++ b/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. diff --git a/README.md b/README.md index a146a53..d91b305 100644 --- a/README.md +++ b/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'; ``` - ### 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(); ``` +## 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'); + + headlineLarge + +``` + ### 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) ---> \ No newline at end of file +--> diff --git a/package.json b/package.json index 8cee170..6e14b4c 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "@brightlayer-ui/react-native-themes", "author": "Brightlayer UI ", "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": { diff --git a/src/index.ts b/src/index.ts index 165fbb5..6a7873d 100644 --- a/src/index.ts +++ b/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'; diff --git a/src/shared.ts b/src/shared.ts index 91a556c..df4682c 100644 --- a/src/shared.ts +++ b/src/shared.ts @@ -1,7 +1,6 @@ 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 = { @@ -9,7 +8,7 @@ export const fontConfig = { 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 & { export const useExtendedTheme = (overrides?: $DeepPartial): ExtendedTheme => useTheme(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}`); + } +}; diff --git a/yarn.lock b/yarn.lock index ca91fa7..e4b9255 100644 --- a/yarn.lock +++ b/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"