R30 Release Announcement

.circleci/config.yml

@@ -1,10 +1,10 @@
 version: 2.1
 orbs:
-    browser-tools: circleci/[email protected].2
+    browser-tools: circleci/[email protected].6
 jobs:
     build:
         docker:
-            - image: cimg/node:16.19.1-browsers
+            - image: cimg/node:18.17.1-browsers
         working_directory: ~/doc-it-dev
         environment:
             - MASTER_BRANCH: master

.github/workflows/firebase-hosting-pull-request.yml

@@ -7,20 +7,10 @@ jobs:
   build_and_preview:
     if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}'
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [14.19.0]
     steps:
       - uses: actions/checkout@v2
-
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
-
-        with:
-          node-version: ${{ matrix.node-version }}
-
       - run: yarn && yarn build
-      - uses: FirebaseExtended/action-hosting-deploy@v0
+      - uses: emclaug2/action-hosting-deploy@main
         with:
           repoToken: '${{ secrets.GITHUB_TOKEN }}'
           firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_BLUI_DOC_IT }}'

package.json

@@ -17,8 +17,8 @@
         "@mui/material": "^5.6.0",
         "@mui/styles": "^5.6.0",
         "@types/dompurify": "^3.0.2",
-        "axios": "^1.0.0",
-        "color": "^3.1.3",
+        "axios": "^1.6.0",
+        "color": "^4.2.3",
         "dompurify": "^3.0.2",
         "fireworks-canvas": "^2.6.2",
         "flexsearch": "~0.6.0",
@@ -34,7 +34,7 @@
         "react-router-dom": "^6.4.3",
         "react-scripts": "5.0.1",
         "redux": "^4.0.5",
-        "web-vitals": "^2.1.4"
+        "web-vitals": "^3.5.1"
     },
     "scripts": {
         "start": "craco start",

src/__configuration__/community/BluiProjects.ts

@@ -6,6 +6,7 @@ import BLI from '../../app/assets/blui-projects/bli.png';
 import PredictPulse from '../../app/assets/blui-projects/predict-pulse.png';
 import SmartEnergyManager from '../../app/assets/blui-projects/smart-energy-manager.png';
 import EVChargerManager from '../../app/assets/blui-projects/ev-charger-manager.png';
+import GreenMotionEVCharger from '../../app/assets/blui-projects/green-motion-ev-charger.jpg';
 
 import { BluiProjectTag, BluiProjectStack, BluiProject } from './BluiProjectsType';
 
@@ -144,4 +145,15 @@ export const bluiProjects: BluiProject[] = [
             BluiProjectTag.SCHEDULES,
         ],
     },
+    {
+        name: 'Green Motion Building / Fleet',
+        description: `Fast, cost-effective and sustainable charging for passenger vehicles, last mile delivery vehicles, light and medium-duty trucks, and school buses.`,
+        platformURLs: {}, // this is an HMI project; no URL available
+        website: `https://www.eaton.com/evchargers`,
+        image: GreenMotionEVCharger,
+        market: 'Commercial',
+        devices: 'EV chargers (HMI touch screens)',
+        stack: 'SGUS, Keil',
+        tags: [BluiProjectTag.REAL_TIME_MONITORING, BluiProjectTag.TRANSACTIONS],
+    },
 ].sort((a, b) => a.name.localeCompare(b.name));

src/__configuration__/community/BluiProjectsType.ts

@@ -9,6 +9,7 @@ export enum BluiProjectTag {
     PREDICTIONS = 'Predictions',
     REAL_TIME_MONITORING = 'Real-time Monitoring',
     SCHEDULES = 'Schedules & Automation',
+    TRANSACTIONS = 'Transactions',
 }
 
 export enum BluiProjectStack {
@@ -24,7 +25,7 @@ export type BluiProject = {
     description: string;
     market?: string;
     devices?: string;
-    stack?: BluiProjectStack[];
+    stack?: BluiProjectStack[] | string;
     platformURLs: {
         web?: string;
         ios?: string;

src/__configuration__/resources/ComponentCatalogLinks.ts

@@ -1,17 +1,20 @@
 import AppBar from '../../app/assets/component-catalog/app-bar.png';
 import ChannelValue from '../../app/assets/component-catalog/channel-value.png';
+import Chip from '../../app/assets/component-catalog/chip.png';
 import CollapsibleHeaderLayout from '../../app/assets/component-catalog/collapsible-header-layout.png';
 import Drawer from '../../app/assets/component-catalog/drawer.png';
 import EmptyState from '../../app/assets/component-catalog/empty-state.png';
+import Grade from '../../app/assets/component-catalog/grade.png';
 import Hero from '../../app/assets/component-catalog/hero.png';
 import Icon from '../../app/assets/component-catalog/icon.png';
+import IconSwitch from '../../app/assets/component-catalog/icon-switch.png';
 import InfoListItem from '../../app/assets/component-catalog/info-list-item.png';
 import ListItemTag from '../../app/assets/component-catalog/list-item-tag.png';
 import MobileStepper from '../../app/assets/component-catalog/mobile-stepper.png';
+import Overline from '../../app/assets/component-catalog/overline.png';
 import Scorecard from '../../app/assets/component-catalog/scorecard.png';
 import ThreeLiner from '../../app/assets/component-catalog/three-liner.png';
 import ToolbarMenu from '../../app/assets/component-catalog/toolbar-menu.png';
-import Typography from '../../app/assets/component-catalog/typography.png';
 import UserMenu from '../../app/assets/component-catalog/user-menu.png';
 
 const branchSuffix = window.location.hostname === 'brightlayer-ui.github.io' ? '' : '-dev';
@@ -48,6 +51,13 @@ export const componentCatalogLinks: ComponentCatalogType[] = [
         reactNative: `https://brightlayer-ui-components.github.io/react-native/?path=/info/components-documentation--channel-value`,
         image: ChannelValue,
     },
+    {
+        title: 'Chip',
+        angular: `Offered by Angular Material`,
+        react: `Offered by MUI`,
+        reactNative: `https://brightlayer-ui-components.github.io/react-native/?path=/info/components-documentation--chip`,
+        image: Chip,
+    },
     {
         title: 'Collapsible Header Layout',
         angular: `Included as part of Brightlayer UI's App Bar Component`,
@@ -69,6 +79,13 @@ export const componentCatalogLinks: ComponentCatalogType[] = [
         reactNative: `https://brightlayer-ui-components.github.io/react-native/?path=/info/components-documentation--empty-state`,
         image: EmptyState,
     },
+    {
+        title: 'Grade',
+        angular: `Not Available`,
+        react: `Not Available`,
+        reactNative: `https://brightlayer-ui-components.github.io/react-native/?path=/info/components-documentation--grade`,
+        image: Grade,
+    },
     {
         title: 'Hero',
         angular: `https://brightlayer-ui-components.github.io/angular${branchSuffix}/components/hero/examples`,
@@ -77,12 +94,19 @@ export const componentCatalogLinks: ComponentCatalogType[] = [
         image: Hero,
     },
     {
-        title: 'Icon (wrapper for Brightlayer UI icons)',
+        title: 'Icon',
         angular: `Offered by Angular Material's icon fonts and icon SVGs`,
         react: `Offered by MUI's icon fonts and icon components`,
         reactNative: `https://brightlayer-ui-components.github.io/react-native/?path=/info/components-documentation--icons`,
         image: Icon,
     },
+    {
+        title: 'Icon Switch',
+        angular: `Offered by Angular Material's slide toggle`,
+        react: `Offered by MUI's switch component`,
+        reactNative: `https://brightlayer-ui-components.github.io/react-native/?path=/info/components-documentation--icon-switch`,
+        image: IconSwitch,
+    },
     {
         title: 'Info List Item',
         angular: `https://brightlayer-ui-components.github.io/angular${branchSuffix}/components/info-list-item/examples`,
@@ -104,6 +128,13 @@ export const componentCatalogLinks: ComponentCatalogType[] = [
         reactNative: `https://brightlayer-ui-components.github.io/react-native/?path=/info/components-documentation--mobile-stepper`,
         image: MobileStepper,
     },
+    {
+        title: 'Overline',
+        angular: `Not Available`,
+        react: `Offered by MUI's Typography component`,
+        reactNative: `https://brightlayer-ui-components.github.io/react-native/?path=/info/components-documentation--overline`,
+        image: Overline,
+    },
     {
         title: 'Scorecard',
         angular: `https://brightlayer-ui-components.github.io/angular${branchSuffix}/components/score-card/examples`,
@@ -125,13 +156,6 @@ export const componentCatalogLinks: ComponentCatalogType[] = [
         reactNative: `Not Available`,
         image: ToolbarMenu,
     },
-    {
-        title: 'Typography',
-        angular: `Offered by Angular Material`,
-        react: `Offered by MUI`,
-        reactNative: `https://brightlayer-ui-components.github.io/react-native/?path=/info/components-documentation--typography`,
-        image: Typography,
-    },
     {
         title: 'User Menu',
         angular: `https://brightlayer-ui-components.github.io/angular${branchSuffix}/components/user-menu/examples`,

src/__configuration__/resources/index.tsx

@@ -138,16 +138,6 @@ export const resources: ResourceBucket[] = [
                 description: 'Brightlayer UI color palette definitions',
                 package: '@brightlayer-ui/colors',
                 repository: 'colors',
-                bugLabels: ['ui'],
-                workSpace: 'ui',
-            },
-            {
-                name: '@brightlayer-ui/colors-branding',
-                description: 'Eaton branding color palette definitions',
-                package: '@brightlayer-ui/colors-branding',
-                repository: 'colors',
-                bugLabels: ['branding'],
-                workSpace: 'branding',
             },
             {
                 name: '@brightlayer-ui/angular-themes',
@@ -165,7 +155,7 @@ export const resources: ResourceBucket[] = [
             },
             {
                 name: '@brightlayer-ui/react-native-themes',
-                description: 'Brightlayer UI themes for @brightlayer-ui/react-native-components',
+                description: 'Brightlayer UI themes for React Native Paper',
                 package: '@brightlayer-ui/react-native-themes',
                 repository: 'react-native-themes',
                 applies: ['react-native'],

src/__configuration__/roadmap/index.ts

@@ -1,12 +1,17 @@
 import { Quarter, Release } from '../../__types__';
 
-export const CURRENT_RELEASE: Release = 'R30';
+export const CURRENT_RELEASE: Release = 'R31';
 
 export const AVAILABLE_RELEASES: Array<{
     name: Release;
     year: number;
     quarter: Quarter;
 }> = [
+    {
+        name: 'R31',
+        year: 2024,
+        quarter: 'Q1',
+    },
     {
         name: 'R30',
         year: 2023,

src/__configuration__/themes/_schedule.ts

@@ -22,21 +22,21 @@ import { ValentineSchedule } from './valentine-s-day';
  * Add more holiday themes here.
  *
  * Current schedules:
- * * Feb 9 - Feb 13 2023: Spring Festival (changes each year) ** Feb 9 - Feb 15 2024 **
+ * * Feb 6 - Feb 12: Spring Festival (changes each year)
  * * Feb 13 - Feb 15: Valentine's Day
  * * Mar 7 - Mar 9: Women's Day
  * * Mar 16 - Mar 18: St. Patrick's Day
  * * Apr 1: April Fool's Day
  * * Apr 20 - Apr 24: Earth Day
  * * May 3 - May 5: May the Fourth Day
- * * July 2 - July 7: Independence Day
- * * Sept 29 - Oct 6 2023: Mid Autumn Festival (changes each year)
- * * Oct 25 - Nov 1: Halloween
- * * Nov 12 - Nov 16 2023: Diwali (changes each year)
- * * Nov 21 - Nov 27: Thanksgiving (changes each year)
- * * Dec 7 - Dec 15: Hanukkah (changes each year)
- * * Dec 23 - Dec 26: Christmas
- * * Dec 26 - Dec 30: Kwanzaa (Kwanzaa runs until Jan 1. Cutting this short to account for New Years.)
+ * * July 1 - July 7: Independence Day
+ * * Sept 12 - Sept 18: Mid Autumn Festival (changes each year)
+ * * Oct 24 - Oct 30: Halloween
+ * * Nov 1 - Nov 7: Diwali (changes each year)
+ * * Nov 22 - Nov 29: Thanksgiving (changes each year)
+ * * Dec 19 - Dec 25: Christmas
+ * * Dec 26 - Dec 28: Hanukkah (changes each year)
+ * * Dec 29 - Dec 30: Kwanzaa (Kwanzaa runs until Jan 1. Cutting this short to account for New Years.)
  * * Dec 31 - Jan 6: New Years
  */
 export const schedule: Schedule[] = [

src/__configuration__/themes/christmas.ts

@@ -6,8 +6,8 @@ import AppBarTile from '../../app/assets/themes/christmas/christmas-appbar-tile.
 import { Schedule } from './_types';
 
 export const ChristmasSchedule: Schedule = {
-    start: new Date(0, 11, 23), // Dec 23
-    end: new Date(0, 11, 26), // Dec 26
+    start: new Date(0, 11, 19), // Dec 19
+    end: new Date(0, 11, 26), // Dec 25
     config: {
         theme: {
             ...BLUIThemes.blue,

src/__configuration__/themes/diwali.ts

@@ -7,8 +7,8 @@ import AppBarTile from '../../app/assets/themes/diwali/diwali-appbar-tile.png';
 import { Schedule } from './_types';
 
 export const DiwaliSchedule: Schedule = {
-    start: new Date(0, 10, 12), // Nov 12
-    end: new Date(0, 10, 17), // Nov 16
+    start: new Date(0, 10, 1), // Nov 1
+    end: new Date(0, 10, 8), // Nov 7
     config: {
         theme: {
             ...BLUIThemes.blue,

src/__configuration__/themes/halloween.ts

@@ -90,8 +90,8 @@ const HalloweenTheme: ThemeOptions = {
 };
 
 export const HalloweenSchedule: Schedule = {
-    start: new Date(0, 9, 25), // Oct 25
-    end: new Date(0, 10, 2), // Nov 1
+    start: new Date(0, 9, 24), // Oct 24
+    end: new Date(0, 10, 1), // Oct 30
     config: {
         theme: HalloweenTheme,
         landingPageBanner: {

src/__configuration__/themes/hanukkah.ts

@@ -7,8 +7,8 @@ import AppBarTile from '../../app/assets/themes/hanukkah/hanukkah-appbar-tile.pn
 import { Schedule } from './_types';
 
 export const HanukkahSchedule: Schedule = {
-    start: new Date(0, 11, 7), // Dec 7
-    end: new Date(0, 11, 16), // Dec 15
+    start: new Date(0, 11, 26), // Dec 26
+    end: new Date(0, 11, 29), // Dec 28
     config: {
         theme: {
             ...BLUIThemes.blue,

src/__configuration__/themes/independence-day.ts

@@ -7,7 +7,7 @@ import AppBarTile from '../../app/assets/themes/independence-day/independence-da
 import { Schedule } from './_types';
 
 export const IndependenceDaySchedule: Schedule = {
-    start: new Date(0, 6, 2), // July 2
+    start: new Date(0, 6, 1), // July 1
     end: new Date(0, 6, 8), // July 7
     config: {
         theme: {

src/__configuration__/themes/kwanzaa.ts

@@ -8,7 +8,7 @@ import AppBarTile from '../../app/assets/themes/kwanzaa/kwanzaa-appbar-tile.png'
 import { Schedule } from './_types';
 
 export const KwanzaaSchedule: Schedule = {
-    start: new Date(0, 11, 26), // Dec 26
+    start: new Date(0, 11, 29), // Dec 29
     end: new Date(0, 11, 31), // Dec 30 - festival should run until Jan 1, but we cut this off on early to account for New Years theme
     config: {
         theme: {

src/__configuration__/themes/mid-autumn-festival.ts

@@ -8,8 +8,8 @@ import AppBarTile from '../../app/assets/themes/mid-autumn-festival/app-bar.png'
 import { Schedule } from './_types';
 
 export const MidAutumnSchedule: Schedule = {
-    start: new Date(0, 8, 29), // Sept 29
-    end: new Date(0, 9, 7), // Oct 6
+    start: new Date(0, 8, 12), // Sept 12
+    end: new Date(0, 8, 19), // Sept 18
     config: {
         theme: {
             ...BLUIThemes.blueDark,

src/__configuration__/themes/spring-festival.ts

@@ -7,7 +7,7 @@ import AppBarTile from '../../app/assets/themes/spring-festival/tile.svg';
 import { Schedule } from './_types';
 
 export const SpringFestivalSchedule: Schedule = {
-    start: new Date(0, 1, 9), // Feb 9
+    start: new Date(0, 1, 6), // Feb 6
     end: new Date(0, 1, 13), // Feb 12
     config: {
         theme: {

src/__configuration__/themes/thanksgiving.ts

@@ -7,8 +7,8 @@ import AppBarTile from '../../app/assets/themes/thanksgiving/thanksgiving-appbar
 import { Schedule } from './_types';
 
 export const ThanksgivingSchedule: Schedule = {
-    start: new Date(0, 10, 21), // Nov 21
-    end: new Date(0, 10, 28), // Nov 27
+    start: new Date(0, 10, 22), // Nov 22
+    end: new Date(0, 10, 30), // Nov 29
     config: {
         theme: {
             ...BLUIThemes.blue,

src/__types__/index.ts

@@ -50,7 +50,8 @@ export type Release =
     | 'R27'
     | 'R28'
     | 'R29'
-    | 'R30';
+    | 'R30'
+    | 'R31';
 
 export type RoadmapItem = {
     name: string;