Merge pull request #136 from osstotalsoft/feature/upgradePackages

upgrade packages and revert to webpack

.storybook/main.ts

@@ -1,23 +1,35 @@
-import { dirname, join } from 'path'
-import type { StorybookConfig } from 'storybook-react-rsbuild'
+import { dirname, join } from "path";
+import type { StorybookConfig } from '@storybook/react-webpack5'
+import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin'
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
-    getAbsolutePath('@storybook/addon-essentials'),
-    getAbsolutePath('@storybook/addon-links'),
-    getAbsolutePath('@storybook/addon-interactions'),
-    getAbsolutePath('@storybook/preview-api')
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-interactions"),
+    getAbsolutePath("@storybook/preview-api"),
+    getAbsolutePath("@storybook/addon-webpack5-compiler-swc"),
   ],
   staticDirs: ['../public'],
-  framework: 'storybook-react-rsbuild',
+  framework: {
+    name: getAbsolutePath('@storybook/react-webpack5'),
+    options: {}
+  },
+  core:{
+    builder:"@storybook/builder-webpack5"
+  },
   typescript: {
     reactDocgen: 'react-docgen',
     check: false
-  }
+  },
+  webpackFinal: async (config: any) => {
+    config.resolve.plugins = [new TsconfigPathsPlugin()]
+    return config
+  },
 }
 export default config
 
 function getAbsolutePath(value: string): any {
-  return dirname(require.resolve(join(value, 'package.json')))
-}
+  return dirname(require.resolve(join(value, "package.json")));
+}

.yarnrc.yml

@@ -1 +1 @@
-yarnPath: .yarn/releases/yarn-4.3.1.cjs
+yarnPath: .yarn/releases/yarn-4.5.1.cjs

package.json

@@ -57,86 +57,87 @@
     "verbose": true
   },
   "dependencies": {
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.5",
-    "@mui/icons-material": "^5.16.0",
-    "@mui/lab": "^5.0.0-alpha.171",
-    "@mui/material": "^5.16.0",
-    "@mui/system": "^5.16.0",
-    "@mui/types": "^7.2.14",
-    "@mui/x-date-pickers": "5.0.0-beta.6",
-    "attr-accept": "^2.2.2",
-    "chart.js": "3.9.1",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@mui/icons-material": "^5.16.7",
+    "@mui/lab": "^5.0.0-alpha.173",
+    "@mui/material": "^5.16.7",
+    "@mui/system": "^5.16.7",
+    "@mui/types": "^7.2.19",
+    "@mui/x-date-pickers": "5.0.20",
+    "attr-accept": "^2.2.4",
+    "chart.js": "4.4.6",
     "classnames": "^2.5.1",
     "date-fns": "^2.30.0",
-    "i18next": "^22.4.15",
+    "i18next": "^23.16.4",
     "lodash": "^4.17.21",
-    "ramda": "^0.29.0",
-    "react": "^18.2.0",
-    "react-chartjs-2": "4.3.1",
-    "react-dom": "18.2.0",
+    "ramda": "^0.30.1",
+    "react": "^18.3.1",
+    "react-chartjs-2": "5.2.0",
+    "react-dom": "18.3.1",
     "react-number-format": "^4.9.2",
-    "react-router-dom": "^6.10.0",
-    "react-toastify": "^8.2.0",
+    "react-router-dom": "^6.27.0",
+    "react-toastify": "^10.0.6",
     "ts-toolbelt": "^9.6.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.21.4",
-    "@emotion/css": "^11.11.2",
-    "@nrwl/js": "^15.9.2",
-    "@rsbuild/core": "^1.0.5",
-    "@rsbuild/plugin-react": "^1.0.2",
-    "@storybook/addon-essentials": "^8.1.11",
-    "@storybook/addon-interactions": "^8.1.11",
-    "@storybook/addon-links": "^8.1.11",
-    "@storybook/blocks": "^8.1.11",
-    "@storybook/core-events": "^8.1.11",
-    "@storybook/manager-api": "^8.1.11",
-    "@storybook/preview-api": "^8.1.11",
-    "@storybook/react": "^8.1.11",
-    "@storybook/theming": "^8.1.11",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/babel__core": "^7",
-    "@types/copyfiles": "^2",
-    "@types/dedent": "^0",
-    "@types/eslint": "^8",
-    "@types/jest": "^29.5.0",
-    "@types/lodash": "^4",
-    "@types/node": "^18.15.11",
-    "@types/prop-types": "^15",
-    "@types/ramda": "^0.29.0",
-    "@types/react": "^18.0.37",
-    "@types/react-dom": "^18.0.11",
-    "@types/react-syntax-highlighter": "^15",
-    "@types/testing-library__jest-dom": "^5.14.5",
-    "@typescript-eslint/eslint-plugin": "^5.59.0",
-    "@typescript-eslint/parser": "^5.59.0",
+    "@babel/core": "^7.26.0",
+    "@emotion/css": "^11.13.4",
+    "@nx/js": "^20.0.8",
+    "@storybook/addon-essentials": "8.3.0",
+    "@storybook/addon-interactions": "8.3.0",
+    "@storybook/addon-links": "8.3.0",
+    "@storybook/addon-webpack5-compiler-swc": "^1.0.5",
+    "@storybook/blocks": "8.3.0",
+    "@storybook/builder-webpack5": "8.3.0",
+    "@storybook/core-events": "8.3.0",
+    "@storybook/manager-api": "8.3.0",
+    "@storybook/preview-api": "8.3.0",
+    "@storybook/react": "8.3.0",
+    "@storybook/react-webpack5": "8.3.0",
+    "@storybook/theming": "8.3.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/babel__core": "^7.20.5",
+    "@types/copyfiles": "^2.4.4",
+    "@types/dedent": "^0.7.2",
+    "@types/eslint": "^9.6.1",
+    "@types/jest": "^29.5.14",
+    "@types/lodash": "^4.17.13",
+    "@types/node": "^22.9.0",
+    "@types/prop-types": "^15.7.13",
+    "@types/ramda": "^0.30.2",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "@typescript-eslint/eslint-plugin": "^8.13.0",
+    "@typescript-eslint/parser": "^8.13.0",
     "copyfiles": "^2.4.1",
-    "dedent": "^0.7.0",
-    "eslint": "8.38.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.8.0",
+    "dedent": "^1.5.3",
+    "eslint": "9.14.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-storybook": "^0.11.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.5.0",
-    "jest-environment-jsdom": "^29.5.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "jest-runner-vscode": "^3.0.1",
-    "prettier": "^2.8.7",
+    "prettier": "^3.3.3",
     "prop-types": "15.8.1",
-    "react-syntax-highlighter": "^15.5.0",
-    "rimraf": "^5.0.0",
-    "sort-package-json": "^2.4.1",
-    "storybook": "^8.1.11",
-    "storybook-react-rsbuild": "^0.1.0",
-    "ts-jest": "^29.1.0",
-    "ts-node": "^10.9.1",
-    "tss-react": "^4.8.2",
-    "typescript": "5.0.4"
+    "react-syntax-highlighter": "^15.6.1",
+    "rimraf": "^6.0.1",
+    "sort-package-json": "^2.10.1",
+    "storybook": "8.3.0",
+    "ts-jest": "^29.2.5",
+    "ts-node": "^10.9.2",
+    "tsconfig-paths-webpack-plugin": "^4.1.0",
+    "tss-react": "^4.9.13",
+    "typescript": "5.6.3"
   },
-  "packageManager": "yarn@4.3.1",
+  "packageManager": "yarn@4.5.1",
   "engines": {
     "node": ">=20.x",
     "yarn": ">=3.x"

src/components/feedback/Toast/ToastContainer.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { ToastContainer as ReactToastify, toast } from 'react-toastify'
+import { ToastContainer as ReactToastify } from 'react-toastify'
 import Container, { classes } from './ToastStyles'
 import 'react-toastify/dist/ReactToastify.css'
 import { ToastContainerProps } from './types'
@@ -10,7 +10,7 @@ import { ToastContainerProps } from './types'
  */
 
 const ToastContainer: React.FC<ToastContainerProps> = ({
-  position = toast.POSITION.TOP_CENTER,
+  position = 'top-center',
   newestOnTop = true,
   transitionType = 'Slide',
   limit = 5,

src/components/inputs/Autocomplete/utils.ts

@@ -41,7 +41,7 @@ export const filterOptions =
     return filtered
   }
 
-export const getSimpleValue = <T>(
+export const getSimpleValue = <T extends {}>(
   readonlyOptions: readonly T[],
   value: unknown,
   valueKey: string,

src/setupTests.ts

@@ -6,4 +6,3 @@
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom'
-import '@testing-library/jest-dom/extend-expect'

src/stories/_introduction/about/AboutContainer.tsx

@@ -1,11 +1,10 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import { Title } from './AboutStyles'
 import { Grid } from '@mui/material'
 import { orbits, homeData } from '../constants/orbits'
 import { Typography } from 'components'
 
-const AboutContainer = ({ activeItem }: any) => {
+const AboutContainer = ({ activeItem = 0 }: any) => {
   const data = [homeData, ...orbits].find(o => o.id === activeItem)
   return (
     <Grid container rowSpacing={2}>
@@ -26,12 +25,4 @@ const AboutContainer = ({ activeItem }: any) => {
   )
 }
 
-AboutContainer.propTypes = {
-  activeItem: PropTypes.number.isRequired
-}
-
-AboutContainer.defaultProps = {
-  activeItem: 0
-}
-
 export default AboutContainer

src/stories/feedback/Toast/PositionsPreview.tsx

@@ -3,7 +3,6 @@
 
 import React from 'react'
 import { Grid } from '@mui/material'
-import { toast } from 'react-toastify'
 import { Button, useToast } from 'components'
 
 const PositionsPreview = () => {
@@ -15,7 +14,7 @@ const PositionsPreview = () => {
         <Button
           size={'small'}
           color={'primary'}
-          onClick={() => addToast('This is a success message!', toast.TYPE.SUCCESS, { position: 'top-left' })}
+          onClick={() => addToast('This is a success message!', 'success', { position: 'top-left' })}
         >
           {'Top Left Position'}
         </Button>
@@ -24,7 +23,7 @@ const PositionsPreview = () => {
         <Button
           size={'small'}
           color={'primary'}
-          onClick={() => addToast('This the default position!', toast.TYPE.INFO, { position: 'top-center' })}
+          onClick={() => addToast('This the default position!', 'info', { position: 'top-center' })}
         >
           {'Top Center Position'}
         </Button>
@@ -33,7 +32,7 @@ const PositionsPreview = () => {
         <Button
           size={'small'}
           color={'primary'}
-          onClick={() => addToast('This is a warning message!', toast.TYPE.WARNING, { position: 'top-right' })}
+          onClick={() => addToast('This is a warning message!', 'warning', { position: 'top-right' })}
         >
           {'Top Right Position'}
         </Button>
@@ -42,7 +41,7 @@ const PositionsPreview = () => {
         <Button
           size={'small'}
           color={'primary'}
-          onClick={() => addToast('This is an error message!', toast.TYPE.ERROR, { position: 'bottom-right' })}
+          onClick={() => addToast('This is an error message!', 'error', { position: 'bottom-right' })}
         >
           {'Bottom Right Position'}
         </Button>
@@ -51,7 +50,7 @@ const PositionsPreview = () => {
         <Button
           size={'small'}
           color={'primary'}
-          onClick={() => addToast('This is a default message!', toast.TYPE.SUCCESS, { position: 'bottom-center' })}
+          onClick={() => addToast('This is a default message!', 'success', { position: 'bottom-center' })}
         >
           {'Bottom Center Position'}
         </Button>
@@ -60,7 +59,7 @@ const PositionsPreview = () => {
         <Button
           size={'small'}
           color={'primary'}
-          onClick={() => addToast('This is a default message!', toast.TYPE.WARNING, { position: 'bottom-left' })}
+          onClick={() => addToast('This is a default message!', 'warning', { position: 'bottom-left' })}
         >
           {'Bottom Left Position'}
         </Button>