Fix: node upgrade

.eslintrc.json

@@ -7,10 +7,10 @@
         "eslint:recommended",
         "plugin:react/recommended",
         "plugin:@typescript-eslint/recommended",
-        "prettier"
-    ],
-    "overrides": [
+        "prettier",
+        "plugin:storybook/recommended"
     ],
+    "overrides": [],
     "parser": "@typescript-eslint/parser",
     "parserOptions": {
         "ecmaVersion": "latest",
@@ -24,12 +24,20 @@
     "rules": {
         "react/react-in-jsx-scope": "off",
         "spaced-comment": "error",
-        "quotes": ["error", "single"],
+        "quotes": [
+            "error",
+            "single"
+        ],
         "no-duplicate-imports": "error",
         "react/prop-types": 0,
         "@typescript-eslint/no-empty-function": "off",
         "@typescript-eslint/no-explicit-any": "off",
-        "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }]
+        "@typescript-eslint/no-unused-vars": [
+            "error",
+            {
+                "argsIgnorePattern": "^_"
+            }
+        ]
     },
     "settings": {
         "import/resolver": {

.github/workflows/docker.yml

@@ -47,9 +47,9 @@ jobs:
         needs: [extract-version]
         steps:
             - name: Checkout sources
-              uses: actions/checkout@v3
+              uses: actions/checkout@v4
             - name: Use node 18
-              uses: actions/setup-node@v3
+              uses: actions/setup-node@v4
               with:
                 node-version: 18
                 cache: 'yarn'
@@ -82,8 +82,8 @@ jobs:
             VERSION: ${{ needs.extract-version.outputs.VERSION }}
             VERSION_SUFFIX: ${{ needs.extract-version.outputs.VERSION_SUFFIX }}
         steps:
-            - uses: actions/checkout@v3
-            - uses: docker/setup-qemu-action@v2
+            - uses: actions/checkout@v4
+            - uses: docker/setup-qemu-action@v3
             - name: Dockerhub login
               run: |
                   echo "${DOCKER_PASSWORD}" | docker login --username ${DOCKER_USERNAME} --password-stdin

.github/workflows/release.yml

@@ -14,7 +14,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout sources
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Extract version
         run: echo "VERSION=$(echo ${GITHUB_REF#refs/tags/})" >> $GITHUB_OUTPUT
         # Used for running without tags
@@ -48,9 +48,9 @@ jobs:
     needs: extract-version
     steps:
       - name: Checkout sources
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Use node 18
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18
       - name: Configure Yarn Timeout
@@ -141,7 +141,7 @@ jobs:
     steps:
       # This is necessary for generating the changelog. It has to come before "Download Artifacts" or else it deletes the artifacts.
       - name: Checkout sources
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
 

.github/workflows/ui-tests.yml

@@ -10,34 +10,11 @@ jobs:
     steps:
         - name: Check that the pull request is not targeting the stable branch
           run: test ${{ github.base_ref }} != "stable"
-  # Run interaction and accessibility tests
-  build-storybook:
-    runs-on: ubuntu-latest
-    outputs:
-      deploy_storybook: ${{ steps.final.outputs.deploy_storybook }}
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
-        with:
-          node-version: '14.x'
-      - name: Install dependencies
-        run: yarn
-      - name: Install Playwright
-        run: npx playwright install --with-deps
-      - name: Build Storybook
-        run: yarn build-storybook --quiet
-      - id: final
-        name: Serve Storybook and run tests
-        run: |
-          npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
-            "npx http-server storybook-static --port 6006 --silent" \
-            "npx wait-on tcp:6006 && yarn test-storybook" 
-            echo "::set-output name=deploy_storybook::storybookUrl"
   # Run visual and composition tests with Chromatic
   visual-and-composition:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0 # Required to retrieve git history
       - name: Install dependencies

.storybook/main.js

@@ -1,20 +1,23 @@
-const path = require('path');
+const path = require('path')
 
 module.exports = {
-  "stories": [
-    "../src/**/*.stories.mdx",
-    "../src/**/*.stories.@(js|jsx|ts|tsx)"
-  ],
-  "addons": [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-    "@storybook/preset-create-react-app",
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/preset-create-react-app',
     'storybook-dark-mode/register',
-    'storybook-tailwind-dark-mode'
+    'storybook-tailwind-dark-mode',
   ],
-  "framework": "@storybook/react",
-  "core": {
-    "builder": "@storybook/builder-webpack5"
+
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+
+  docs: {
+    autodocs: true,
   },
-}
+}

custom.d.ts

@@ -12,3 +12,7 @@ declare module 'rodal'
 declare module 'svg-identicon'
 
 declare module 'crypto-js'
+
+declare module 'i18next'
+
+declare module '@testing-library/react'

package.json

@@ -10,7 +10,7 @@
   "dependencies": {
     "@electron-forge/maker-dmg": "^6.0.5",
     "@hookform/resolvers": "^2.9.8",
-    "@storybook/theming": "^6.5.10",
+    "@storybook/theming": "^7.5.3",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.4.0",
     "@testing-library/react-hooks": "^8.0.1",
@@ -63,15 +63,15 @@
   },
   "scripts": {
     "dev": "concurrently -k \"BROWSER=none npm start\" \"npm:electron\"",
-    "electron": "wait-on tcp:3000 && electron .",
+    "electron": "wait-on tcp:127.0.0.1:3000 && electron .",
     "start": "BROWSER=none react-scripts start",
     "build": "react-scripts build",
     "test": "jest",
     "coverage": "jest --coverage",
     "eject": "react-scripts eject",
     "build-all": "yarn build && yarn make",
-    "storybook": "start-storybook -p 6006 -s public",
-    "build-storybook": "build-storybook -s public",
+    "storybook": "storybook dev -p 6006 -s public",
+    "build-storybook": "storybook build -s public",
     "test-storybook": "test-storybook",
     "lint": "eslint src/**/*.{ts,tsx}",
     "lint:fix": "eslint --fix 'src/**/*.{ts,tsx}'",
@@ -123,19 +123,18 @@
     "@electron-forge/maker-squirrel": "^6.0.3",
     "@electron-forge/maker-zip": "^6.0.3",
     "@faker-js/faker": "^7.5.0",
-    "@storybook/addon-actions": "^6.5.10",
-    "@storybook/addon-essentials": "^6.5.10",
-    "@storybook/addon-interactions": "^6.5.10",
-    "@storybook/addon-links": "^6.5.10",
+    "@storybook/addon-actions": "^7.5.3",
+    "@storybook/addon-essentials": "^7.5.3",
+    "@storybook/addon-interactions": "^7.5.3",
+    "@storybook/addon-links": "^7.5.3",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/addons": "^6.5.10",
-    "@storybook/builder-webpack5": "^6.5.10",
-    "@storybook/manager-webpack5": "^6.5.10",
-    "@storybook/node-logger": "^6.5.10",
-    "@storybook/preset-create-react-app": "^4.1.2",
-    "@storybook/react": "^6.5.10",
-    "@storybook/test-runner": "^0.7.0",
-    "@storybook/testing-library": "^0.0.13",
+    "@storybook/addons": "^7.5.3",
+    "@storybook/node-logger": "^7.5.3",
+    "@storybook/preset-create-react-app": "^7.5.3",
+    "@storybook/react": "^7.5.3",
+    "@storybook/react-webpack5": "^7.5.3",
+    "@storybook/test-runner": "^0.14.0",
+    "@storybook/testing-library": "^0.2.2",
     "@typescript-eslint/eslint-plugin": "^5.38.0",
     "@typescript-eslint/parser": "^5.38.0",
     "babel-plugin-named-exports-order": "^0.0.2",
@@ -150,15 +149,20 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-promise": "^6.0.0",
     "eslint-plugin-react": "^7.31.8",
+    "eslint-plugin-storybook": "^0.6.15",
     "foreman": "^3.0.1",
     "jest": "^29.3.1",
     "jest-svg-transformer": "^1.0.0",
     "postcss": "^8",
     "prettier": "^2.7.1",
     "prop-types": "^15.8.1",
     "react-test-renderer": "^18.2.0",
-    "storybook-dark-mode": "^1.1.0",
-    "storybook-tailwind-dark-mode": "^1.0.15",
+    "storybook": "^7.5.3",
+    "storybook-dark-mode": "^3.0.1",
+    "storybook-tailwind-dark-mode": "^1.0.22",
     "webpack": "^5.74.0"
+  },
+  "resolutions": {
+    "@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.cd77847.0"
   }
 }

src/App.tsx

@@ -29,7 +29,11 @@ function App() {
           </Suspense>
         )
       case AppView.ONBOARD:
-        return <Onboard />
+        return (
+          <Suspense fallback={<AppLoadFallback />}>
+            <Onboard />
+          </Suspense>
+        )
       case AppView.CHANGE_SCREEN:
         return <ChangeScreen />
       default:

src/components/Button/Button.tsx

@@ -2,6 +2,7 @@ import React, { FC, ReactNode } from 'react'
 import { TypographyFamily, TypographyType } from '../Typography/Typography'
 import Spinner from '../Spinner/Spinner'
 import addClassString from '../../utilities/addClassString'
+import { OptionalBoolean } from '../../types'
 
 export enum ButtonFace {
   PRIMARY = 'PRIMARY',
@@ -14,19 +15,19 @@ export enum ButtonFace {
 }
 
 export interface ButtonProps {
-  type?: ButtonFace
-  isDisabled?: boolean
+  type?: ButtonFace | undefined
+  isDisabled?: OptionalBoolean
   font?: TypographyFamily
   fontType?: TypographyType
   children: ReactNode | ReactNode[]
-  onClick?: () => void
+  onClick?: (() => void) | undefined
   dataTestId?: string
   padding?: string
   className?: string
   renderAs?: 'submit' | 'reset' | 'button'
   href?: string
-  target?: '_self' | '_blank'
-  isLoading?: boolean
+  target?: '_self' | '_blank' | undefined
+  isLoading?: OptionalBoolean
 }
 
 const Button: FC<ButtonProps> = ({

src/components/DeviceSelect/DeviceSelect.tsx

@@ -5,7 +5,7 @@ import RodalModal from '../RodalModal/RodalModal'
 import useLocalStorage from '../../hooks/useLocalStorage'
 import { DeviceKeyStorage, DeviceListStorage } from '../../types/storage'
 import { AppView, UiMode } from '../../constants/enums'
-import { DeviceList } from '../../types'
+import { DeviceList, OptionalString } from '../../types'
 import Typography from '../Typography/Typography'
 import DropDown from '../DropDown/DropDown'
 import useClickOutside from '../../hooks/useClickOutside'
@@ -14,8 +14,8 @@ import Button, { ButtonFace } from '../Button/Button'
 import { useTranslation, Trans } from 'react-i18next'
 
 export interface DeviceSelectProps {
-  devices?: DeviceList
-  value?: string
+  devices?: DeviceList | undefined
+  value?: OptionalString
   uiMode?: UiMode
   type?: 'default' | 'black'
 }

src/components/DiagnosticCard/DiagnosticCard.tsx

@@ -7,9 +7,9 @@ import Status from '../Status/Status'
 import ProgressCircle from '../ProgressCircle/ProgressCircle'
 import generateId from '../../utilities/generateId'
 import Tooltip from '../ToolTip/Tooltip'
-import { ITooltip } from 'react-tooltip'
+import { PlacesType } from 'react-tooltip'
 import addClassString from '../../utilities/addClassString'
-import { StatusColor } from '../../types'
+import { OptionalString, StatusColor } from '../../types'
 
 export type CardSize = 'lg' | 'md' | 'sm' | 'health'
 
@@ -22,12 +22,12 @@ export interface DiagnosticCardProps {
   subTitle: string
   border?: string
   subTitleHighlightColor?: string
-  maxHeight?: string
-  maxWidth?: string
+  maxHeight?: OptionalString
+  maxWidth?: OptionalString
   isBackground?: boolean
-  size?: CardSize
-  toolTipText?: string
-  toolTipPosition?: ITooltip['place']
+  size?: CardSize | undefined
+  toolTipText?: OptionalString
+  toolTipPosition?: PlacesType
   isDisabled?: boolean
 }
 
@@ -123,7 +123,7 @@ const DiagnosticCard: FC<DiagnosticCardProps> = ({
           className='h-full'
           maxWidth={250}
           id={toolTipId}
-          place={toolTipPosition}
+          place={toolTipPosition as PlacesType}
           text={toolTipText}
         >
           {renderContent()}

src/components/DisabledTooltip/DisabledTooltip.tsx

@@ -1,20 +1,20 @@
 import Tooltip from '../ToolTip/Tooltip'
 import { FC, ReactNode } from 'react'
 import { useTranslation } from 'react-i18next'
-import { ITooltip } from 'react-tooltip'
+import { PlacesType } from 'react-tooltip'
 
 export interface DisabledTooltipProps {
   children: ReactNode
   className?: string
-  place?: ITooltip['place']
+  place?: PlacesType
 }
 
 const DisabledTooltip: FC<DisabledTooltipProps> = ({ children, place, className }) => {
   const { t } = useTranslation()
   return (
     <Tooltip
       className={className}
-      place={place}
+      place={place as PlacesType}
       text={t('comingSoon')}
       id={Math.random().toString()}
     >