chore: upgrade typescript, frontend dependencies and set type module

Typescript upgraded to the latest version and framework and docs are
made into es modules. When this happened a lot of type errors occured.
Upgrading all frontend dependencies solved all errors but three who needed
manual correction.

Lint config files have been made into cjs files as a consequence of
type: module.

docs/package.json

@@ -4,6 +4,7 @@
   "main": "index.ts",
   "license": "UNLICENSED",
   "private": true,
+  "type": "module",
   "scripts": {
     "start": "yarn vite",
     "dev": "yarn start",
@@ -21,15 +22,15 @@
     "vite": "^4.4.9"
   },
   "dependencies": {
-    "@chakra-ui/clickable": "^2.0.14",
-    "@chakra-ui/react": "^2.5.1",
-    "@chakra-ui/system": "^2.5.1",
-    "@chakra-ui/theme-tools": "^2.0.16",
-    "@emotion/react": "^11.10.6",
+    "@chakra-ui/clickable": "^2.1.0",
+    "@chakra-ui/react": "^2.8.1",
+    "@chakra-ui/system": "^2.6.1",
+    "@chakra-ui/theme-tools": "^2.1.1",
+    "@emotion/react": "^11.11.1",
     "@northlight/icons": "^1.1.1",
     "@northlight/tokens": "^1.0.7",
     "@northlight/ui": "^2.10.1",
-    "@react-aria/i18n": "^3.6.3",
+    "@react-aria/i18n": "^3.8.2",
     "@shopify/react-i18n": "^7.7.2",
     "chakra-react-select": "^4.4.3",
     "fuse.js": "^6.6.2",
@@ -41,7 +42,7 @@
     "react": "^18.1.0",
     "react-docgen-typescript": "^2.2.2",
     "react-dom": "^18.1.0",
-    "react-live": "^4.0.0",
+    "react-live": "^4.1.5",
     "react-router-dom": "^5.0.0"
   }
 }

docs/src/app/components/code-editor-theme.tsx

@@ -1,6 +1,6 @@
-import PrismTheme from 'prism-react-renderer/themes/*'
+import type { PrismTheme } from 'prism-react-renderer'
 
-export const paleNight: typeof PrismTheme = {
+export const paleNight: PrismTheme = {
   plain: {
     color: '#bfc7d5',
     backgroundColor: '#292d3e',

framework/lib/components/form/form.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react'
 import {
-  DeepPartial,
+  DefaultValues,
   FieldValues,
   FormProvider,
   Resolver,
@@ -132,7 +132,7 @@ export const Form = forwardRef(<FormValues extends FieldValues>({
   const newMethods =
     methods ||
     useForm<FormValues>({
-      defaultValues: initialValues as DeepPartial<FormValues>,
+      defaultValues: initialValues as DefaultValues<FormValues>,
       resolver: validate ? customResolver : undefined,
       ...formSettings,
     })

framework/lib/components/text-field/types.ts

@@ -35,7 +35,9 @@ export interface PresetOptions {
   decimalSeparator: string
 }
 
-export interface FormattedNumberInputProps extends Omit<NumericFormatProps, 'onChange'> {
+export interface FormattedNumberInputProps extends Omit<NumericFormatProps, 'onChange' | 'max' | 'min'> {
+  max?: number
+  min?: number
   /** Changes thousand and decimal separators */
   preset?: FormattedNumberInputPreset
   /** Gives you back an object, see https://s-yadav.github.io/react-number-format/docs/quirks */

framework/package.json

@@ -4,6 +4,7 @@
   "description": "Northlight UI library, based on Chakra-ui",
   "license": "MIT",
   "author": "Mediatool",
+  "type": "module",
   "exports": {
     "./package.json": "./package.json",
     ".": {
@@ -26,31 +27,31 @@
     "watch": "yarn transpile -w"
   },
   "dependencies": {
-    "@chakra-ui/clickable": "^2.0.14",
-    "@chakra-ui/react": "^2.5.1",
-    "@chakra-ui/system": "^2.5.1",
-    "@chakra-ui/theme-tools": "^2.0.16",
+    "@chakra-ui/clickable": "^2.1.0",
+    "@chakra-ui/react": "^2.8.1",
+    "@chakra-ui/system": "^2.6.1",
+    "@chakra-ui/theme-tools": "^2.1.1",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^6.0.1",
     "@dnd-kit/sortable": "^7.0.2",
     "@dnd-kit/utilities": "^3.2.1",
-    "@emotion/react": "^11.10.6",
-    "@emotion/styled": "^11.10.6",
-    "@internationalized/date": "^3.0.2",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@internationalized/date": "^3.5.0",
     "@northlight/icons": "^1.1.1",
     "@northlight/tokens": "^1.0.7",
-    "@react-aria/button": "^3.6.4",
-    "@react-aria/calendar": "^3.0.5",
-    "@react-aria/checkbox": "^3.7.1",
-    "@react-aria/datepicker": "^3.2.1",
-    "@react-aria/focus": "^3.10.1",
-    "@react-aria/i18n": "^3.6.3",
-    "@react-aria/radio": "^3.4.2",
-    "@react-aria/utils": "^3.14.2",
-    "@react-stately/calendar": "^3.0.5",
-    "@react-stately/checkbox": "^3.3.2",
-    "@react-stately/datepicker": "^3.2.1",
-    "@react-stately/radio": "^3.6.2",
+    "@react-aria/button": "^3.8.2",
+    "@react-aria/calendar": "^3.5.0",
+    "@react-aria/checkbox": "^3.11.0",
+    "@react-aria/datepicker": "^3.7.0",
+    "@react-aria/focus": "^3.14.1",
+    "@react-aria/i18n": "^3.8.2",
+    "@react-aria/radio": "^3.8.0",
+    "@react-aria/utils": "^3.20.0",
+    "@react-stately/calendar": "^3.4.0",
+    "@react-stately/checkbox": "^3.5.0",
+    "@react-stately/datepicker": "^3.7.0",
+    "@react-stately/radio": "^3.9.0",
     "@types/mocha": "^10.0.1",
     "@types/ramda": "^0.28.15",
     "@types/react-avatar-editor": "^13.0.0",
@@ -61,13 +62,13 @@
     "framer-motion": "^4",
     "ramda": "^0.15.1",
     "react-avatar-editor": "^13.0.0",
-    "react-hook-form": "^7.43.1",
+    "react-hook-form": "^7.46.2",
     "react-input-mask": "2.0.4",
     "react-number-format": "^5.3.1",
     "react-router-dom": "5.2.0",
-    "react-virtualized": "^9.22.3",
-    "react-virtualized-auto-sizer": "^1.0.7",
-    "react-window": "^1.8.8",
+    "react-virtualized": "^9.22.5",
+    "react-virtualized-auto-sizer": "^1.0.20",
+    "react-window": "^1.8.9",
     "sinon": "^15.2.0"
   },
   "devDependencies": {
@@ -91,7 +92,7 @@
     "rollup-plugin-dts": "^5.2.0",
     "rollup-plugin-esbuild": "^5.0.0",
     "sinon": "^15.2.0",
-    "typescript": "^4.9.5"
+    "typescript": "^5.2.2"
   },
   "peerDependencies": {
     "react": ">=18.0.0",

tokens/package.json

@@ -16,7 +16,7 @@
     "transform": "yarn token-transformer lib/tokens.json dist/sets/tott/global.json global --resolveReferences=false && yarn token-transformer lib/tokens.json dist/sets/tott/tott.json global,tott global --resolveReferences=false && yarn token-transformer lib/tokens.json dist/sets/tott/tott-components.json global,tott,components global,tott && yarn token-transformer lib/tokens.json dist/sets/webapp/global.json global --resolveReferences=false && yarn token-transformer lib/tokens.json dist/sets/webapp/webapp.json global,webapp global --resolveReferences=false && yarn token-transformer lib/tokens.json dist/sets/webapp/webapp-components.json global,webapp,components global,webapp",
     "transpile": "yarn transform && node scripts/sd-build.js && yarn rollup -c",
     "clean": "rm -rf dist",
-    "lint": "eslint --ext ts,js scripts/*.* *.ts *.js",
+    "lint": "eslint --ext ts,js scripts/*.* *.ts *.cjs",
     "prepublishOnly": "yarn clean && yarn transpile",
     "test": "echo testless"
   },