Chore/deps migrate typescript v5

configs/typescript-config-spirit/dom.json

@@ -15,6 +15,10 @@
 
     // If types is specified, only packages listed will be included in the global scope.
     // @see: https://www.typescriptlang.org/tsconfig/#types
-    "types": ["node", "jest", "@testing-library/jest-dom"]
+    "types": ["node", "jest", "@testing-library/jest-dom"],
+
+    // Specify multiple folders that act like './node_modules/@types'.
+    // @see: https://www.typescriptlang.org/tsconfig/#typeRoots
+    "typeRoots": ["../../node_modules/@types", "../../node_modules"]
   }
 }

exporters/js/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../configs/typescript-config-spirit/dom",
+  "extends": "../../configs/typescript-config-spirit/base",
   "include": ["./src/**/*"],
   "exclude": ["./node_modules", "./dist/**/*"]
 }

exporters/scss/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../configs/typescript-config-spirit/dom",
+  "extends": "../../configs/typescript-config-spirit/base",
   "include": ["./src/**/*"],
   "exclude": ["./node_modules", "./dist/**/*"]
 }

package.json

@@ -99,13 +99,10 @@
     "remark-lint-heading-capitalization": "1.3.0",
     "sass-loader": "14.2.1",
     "style-loader": "4.0.0",
-    "typescript": "4.7.4",
+    "typescript": "5.6.3",
     "vite-raw-plugin": "1.0.2",
     "webpack": "5.96.1",
     "webpack-cli": "5.1.4"
   },
-  "resolutions": {
-    "typescript": "4.7.4"
-  },
   "packageManager": "yarn@4.6.0"
 }

packages/form-validations/src/FormValidations.ts

@@ -147,7 +147,7 @@ class FormValidations {
 
     if (typeof input !== 'boolean') {
       if (input instanceof HTMLElement) {
-        fields = [input.formValidations];
+        fields = [(input as FormValidationsElement).formValidations];
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore The left-hand side of an 'instanceof' expression must be of type 'any', an object type or a type parameter.
       } else if (input instanceof NodeList || input instanceof Array) {

packages/web-react/src/components/Alert/Alert.tsx

@@ -14,7 +14,7 @@ const defaultProps: Partial<SpiritAlertProps> = {
   elementType: 'div',
 };
 
-export const Alert = <T extends ElementType = 'div', E = void>(props: SpiritAlertProps<T, E>): JSX.Element => {
+export const Alert = <T extends ElementType = 'div', E = void>(props: SpiritAlertProps<T, E>) => {
   const propsWithDefaults = { ...defaultProps, ...props };
   const {
     elementType: ElementTag = defaultProps.elementType as ElementType,

packages/web-react/src/components/Flex/useFlexStyleProps.ts

@@ -8,7 +8,7 @@ import {
   useSpacingStyle,
   useWrapClass,
 } from '../../hooks';
-import { FlexAlignmentXType, FlexAlignmentYType, SpacingProp, SpiritFlexProps } from '../../types';
+import { FlexAlignmentXType, FlexAlignmentYType, SpacingType, SpiritFlexProps } from '../../types';
 import { generateStylePropsClassNames, stringOrObjectKebabCaseToCamelCase } from '../../utils';
 
 interface FlexCSSProperties extends CSSProperties {
@@ -39,10 +39,10 @@ export function useFlexStyleProps(props: SpiritFlexProps<ElementType>): FlexStyl
   const flexClass = useClassNamePrefix('Flex');
 
   const flexStyle: FlexCSSProperties = {
-    ...useSpacingStyle(spacing as SpacingProp, 'flex', DirectionAxis.X),
-    ...useSpacingStyle(spacing as SpacingProp, 'flex', DirectionAxis.Y),
-    ...useSpacingStyle(spacingX as SpacingProp, 'flex', DirectionAxis.X),
-    ...useSpacingStyle(spacingY as SpacingProp, 'flex', DirectionAxis.Y),
+    ...useSpacingStyle(spacing as SpacingType, 'flex', DirectionAxis.X),
+    ...useSpacingStyle(spacing as SpacingType, 'flex', DirectionAxis.Y),
+    ...useSpacingStyle(spacingX as SpacingType, 'flex', DirectionAxis.X),
+    ...useSpacingStyle(spacingY as SpacingType, 'flex', DirectionAxis.Y),
   };
 
   const directionClass = generateStylePropsClassNames(flexClass, stringOrObjectKebabCaseToCamelCase(direction!));

packages/web-react/src/hooks/__tests__/useSpacingStyles.test.ts

@@ -1,6 +1,6 @@
 import { renderHook } from '@testing-library/react';
 import { DirectionAxis } from '../../constants';
-import { SpacingProp } from '../../types';
+import { SpacingType } from '../../types';
 import { useSpacingStyle } from '../useSpacingStyle';
 
 describe('useSpacingStyles', () => {
@@ -11,7 +11,7 @@ describe('useSpacingStyles', () => {
       desktop: 'space-300',
     };
 
-    const { result } = renderHook(() => useSpacingStyle(mockProps as SpacingProp, 'test-prefix'));
+    const { result } = renderHook(() => useSpacingStyle(mockProps as SpacingType, 'test-prefix'));
 
     expect(result.current).toEqual({
       '--test-prefix-spacing': 'var(--spirit-space-100)',
@@ -23,7 +23,7 @@ describe('useSpacingStyles', () => {
   it('should process if spacing is a string', () => {
     const mockProps = 'space-100';
 
-    const { result } = renderHook(() => useSpacingStyle(mockProps as SpacingProp, 'test-prefix'));
+    const { result } = renderHook(() => useSpacingStyle(mockProps as SpacingType, 'test-prefix'));
 
     expect(result.current).toEqual({
       '--test-prefix-spacing': 'var(--spirit-space-100)',
@@ -37,7 +37,7 @@ describe('useSpacingStyles', () => {
       desktop: 'space-300',
     };
 
-    const { result } = renderHook(() => useSpacingStyle(mockProps as SpacingProp, 'test-prefix', DirectionAxis.X));
+    const { result } = renderHook(() => useSpacingStyle(mockProps as SpacingType, 'test-prefix', DirectionAxis.X));
 
     expect(result.current).toEqual({
       '--test-prefix-spacing-x': 'var(--spirit-space-100)',
@@ -49,7 +49,7 @@ describe('useSpacingStyles', () => {
   it('should process vertical direction with spacing if property spacing is a string', () => {
     const mockProps = 'space-100';
 
-    const { result } = renderHook(() => useSpacingStyle(mockProps as SpacingProp, 'test-prefix', DirectionAxis.Y));
+    const { result } = renderHook(() => useSpacingStyle(mockProps as SpacingType, 'test-prefix', DirectionAxis.Y));
 
     expect(result.current).toEqual({
       '--test-prefix-spacing-y': 'var(--spirit-space-100)',
@@ -59,7 +59,7 @@ describe('useSpacingStyles', () => {
   it('should process if spacing is undefined', () => {
     const mockProps = undefined;
 
-    const { result } = renderHook(() => useSpacingStyle(mockProps as SpacingProp | undefined, 'test-prefix'));
+    const { result } = renderHook(() => useSpacingStyle(mockProps as SpacingType | undefined, 'test-prefix'));
 
     expect(result.current).toEqual({});
   });

packages/web-react/src/hooks/useSpacingStyle.ts

@@ -1,8 +1,8 @@
 import { DirectionAxis } from '../constants';
-import { SpacingProp, SpacingCSSProperties } from '../types';
+import { SpacingCSSProperties, SpacingType } from '../types';
 
 export function useSpacingStyle(
-  spacing: SpacingProp | undefined,
+  spacing: SpacingType | undefined,
   prefix: string,
   direction: undefined | (typeof DirectionAxis)[keyof typeof DirectionAxis] = undefined,
 ): SpacingCSSProperties {

packages/web-react/src/types/alert.ts

@@ -1,4 +1,4 @@
-import { ElementType, JSXElementConstructor } from 'react';
+import { ElementType } from 'react';
 import { ChildrenProps, EmotionColorsDictionaryType, StyleProps, TransferProps } from './shared';
 
 export interface AriaAlertElementTypeProps<T extends ElementType = 'div'> {
@@ -7,7 +7,7 @@ export interface AriaAlertElementTypeProps<T extends ElementType = 'div'> {
    *
    * @default 'div'
    */
-  elementType?: T | JSXElementConstructor<unknown>;
+  elementType?: T;
 }
 
 export interface AlertProps extends ChildrenProps, StyleProps, TransferProps {}

packages/web-react/src/types/avatar.ts

@@ -1,4 +1,4 @@
-import { ElementType, JSXElementConstructor } from 'react';
+import { ElementType } from 'react';
 import { ChildrenProps, SizeExtendedDictionaryType, StyleProps, TransferProps } from './shared';
 
 export type AvatarSize<S> = SizeExtendedDictionaryType<S> | S;
@@ -9,7 +9,7 @@ export interface AriaAvatarElementTypeProps<E extends ElementType = 'div'> {
    *
    * @default 'div'
    */
-  elementType?: E | JSXElementConstructor<unknown>;
+  elementType?: E;
 }
 
 export interface AvatarProps extends ChildrenProps, StyleProps, TransferProps {}

packages/web-react/src/types/breadcrumbs.ts

@@ -1,4 +1,4 @@
-import { ElementType, JSXElementConstructor } from 'react';
+import { ElementType } from 'react';
 import { ChildrenProps, StyleProps, TransferProps } from './shared';
 
 type BreadcrumbsItem = {
@@ -22,7 +22,7 @@ export interface AriaBreadcrumbsElementTypeProps<T extends ElementType = 'nav'>
    *
    * @default 'nav'
    */
-  elementType?: T | JSXElementConstructor<unknown>;
+  elementType?: T;
 }
 
 export interface BreadcrumbsStyleProps extends StyleProps, TransferProps {

packages/web-react/src/types/pill.ts

@@ -1,4 +1,4 @@
-import { ElementType, JSXElementConstructor } from 'react';
+import { ElementType } from 'react';
 import { ChildrenProps, EmotionColorsDictionaryType, TransferProps } from './shared';
 
 export type PillColor<C> = EmotionColorsDictionaryType | 'selected' | 'neutral' | C;
@@ -9,7 +9,7 @@ export interface AriaPillElementTypeProps<T extends ElementType = 'span'> {
    *
    * @default 'span'
    */
-  elementType?: T | JSXElementConstructor<unknown>;
+  elementType?: T;
 }
 
 export interface SpiritPillProps<T extends ElementType = 'span', C = void>

packages/web-react/src/types/shared/style.ts

@@ -12,8 +12,10 @@ export type SpacingProps = {
     | Partial<Record<BreakpointToken, SpaceToken | StyleSpacingAuto>>;
 };
 
+export type SpacingType = SpaceToken | Partial<Record<BreakpointToken, SpaceToken>>;
+
 export interface SpacingProp {
-  spacing?: SpaceToken | Partial<Record<BreakpointToken, SpaceToken>>;
+  spacing?: SpacingType;
 }
 
 export interface SpacingCSSProperties extends CSSProperties {

packages/web-react/src/types/text.ts

@@ -1,4 +1,4 @@
-import { ElementType, JSXElementConstructor } from 'react';
+import { ElementType } from 'react';
 import {
   ChildrenProps,
   EmphasisDictionaryType,
@@ -15,7 +15,7 @@ export interface TextElementTypeProps<T extends ElementType = 'p'> {
    *
    * @default 'p'
    */
-  elementType?: T | JSXElementConstructor<unknown>;
+  elementType?: T;
 }
 
 export interface TextProps<T extends ElementType = 'p'>

packages/web/config/jest/setupTestingLibrary.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

packages/web/jest.config.ts

@@ -1,5 +1,14 @@
 const config = {
   preset: 'jest-config-spirit/jsdom',
+
+  /**
+   * @todo Move this configuration to the `jest-config-spirit` preset
+   *
+   * @see { @link https://github.com/lmc-eu/spirit-design-system/issues/1413 }
+   */
+  // A list of paths to modules that run some code to configure or set up the testing framework before each test file in the suite is executed.
+  // https://jestjs.io/docs/configuration#setupfilesafterenv-array
+  setupFilesAfterEnv: ['<rootDir>/config/jest/setupTestingLibrary.ts'],
 };
 
 export default config;

packages/web/package.json

@@ -64,6 +64,7 @@
     "@rollup/plugin-replace": "6.0.2",
     "@rollup/plugin-terser": "0.4.4",
     "@rollup/plugin-typescript": "12.1.2",
+    "@testing-library/jest-dom": "^6.6.3",
     "@types/eslint": "9.6.1",
     "@types/jest": "29.5.14",
     "autoprefixer": "10.4.20",
@@ -80,6 +81,7 @@
     "shx": "0.3.4",
     "stylelint": "16.14.1",
     "stylelint-config-spirit": "workspace:^",
+    "ts-node": "^10.9.2",
     "tslib": "2.8.1",
     "typescript": "5.6.3"
   },