NPM Upgrades

[cs-alexg]

Changes

• Upgraded to Node 20
• Upgraded to Typescript 5
• Upgraded to Webpack 5
• Upgraded to React 18
• Upgraded to Blueprint 5
• Converted all class components to functional components in React. Moved to the use of react-based hooks.

Resources used

• https://github.com/palantir/blueprint/wiki/Blueprint-4.0
• Localising @blueprintjs/datetime2 components in React 18 palantir/blueprint#5652 (comment)
• Datetime dependency warning will go away in v6
  • Issue updating to React 18 caused by @blueprintjs/datetime dependency  palantir/blueprint#5699 (comment)
  • Old date time package is included in datetime2 which is what causes the warnings even though the root datetime package is removed from package.json
• https://blueprintjs.com/docs/
• https://stackoverflow.com/questions/53575461/react-typescript-context-in-react-component-class
• https://www.npmjs.com/package/node-sass
• https://github.com/webpack/webpack-dev-server/blob/master/migration-v5.md
• https://stackoverflow.com/questions/67926476/webpack-dev-server-config-contentbase-not-working-in-latest-version
• Migrate to dart-sass palantir/blueprint#5216
• https://stackoverflow.com/questions/62494045/blueprintjs-sasserror-path-fill-5c7080-isnt-a-valid-css-value
• https://blueprintjs.com/docs/#blueprint/getting-started
• https://blueprintjs.com/docs/#datetime2
• https://blueprintjs.com/docs/#core/components/html-select
• https://blueprintjs.com/docs/#core/components/toast.overlaytoaster
• https://stackoverflow.com/questions/29722755/webpack-dev-server-does-not-watch-for-my-file-changes
• https://webpack.js.org/loaders/sass-loader/#api
• https://github.com/webpack/webpack-dev-middleware
• https://webpack.js.org/configuration/stats/#stats-presets
• https://www.npmjs.com/package/sass-loader#api
• https://github.com/survivejs/webpack-merge/blob/develop/CHANGELOG.md
• https://webpack.js.org/configuration/dev-server/#devserverdevmiddleware
• https://stackoverflow.com/questions/38320220/how-to-setup-typescript-babel-webpack

Screenshots

Fixed by adding children to context

Fixed by removing node-sass (deprecated) and replace with sass package

Fixed by editing date type

[cs-alexg]

Been trying to figure this one out to no avail. I think this is the culprit:

const DateInputWrapper = connect((props: DateInputProps & { formik?: FormikContextType<FormikValues> }) => (
  <DateInput {...props} />
));

[cs-alexg]

A lot of the errors I'm seeing are likely do that Babel 7+ natively supports Typescript so I had to add some plugins to support that.

[cs-alexg]

Next steps are getting the package to run locally with the local main platform.