React 19 upgrade (#1008)

* Upgrade React, Dom to 19; testing-lib to 16

* Update tsconfig

* Upgrade storybook 8

* Fix unit tests

* Fix build

* Fix lint

* Replace react-popper with floating-ui/react; replace storybook/addon-styling with storybook/addon-themes

* Upgrade Jest to 29

* Fix more unit tests; PopOver component

* Fix storybook related issues

* Fix PopOver component and unit tests

* Update package-lock.json

* Update supported node and npm versions

* Upgrate chime js sdk to the latest

* Resolve comments, update React to 19.2

* Fix /docs/themes--page links

* Add CHANGELOG, fix issues when running build:release

Author: ziyiz-amzn

.storybook/main.ts

@@ -11,6 +11,26 @@ const config: StorybookConfig = {
         prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
     },
   },
+  webpackFinal: async (config) => {
+    config.module = config.module || {};
+    config.module.rules = config.module.rules || [];
+    
+    // Ensure TypeScript files are handled correctly
+    config.module.rules.push({
+      test: /\.tsx?$/,
+      use: [
+        {
+          loader: require.resolve('ts-loader'),
+          options: {
+            transpileOnly: true,
+          },
+        },
+      ],
+      exclude: /node_modules/,
+    });
+    
+    return config;
+  },
   stories: ['../src/**/*.@(stories.tsx|mdx)'],
   addons: [
     {
@@ -19,8 +39,7 @@ const config: StorybookConfig = {
         actions: false,
       },
     },
-    '@storybook/addon-storysource',
-    '@storybook/addon-styling',
+    '@storybook/addon-themes',
     '@storybook/addon-a11y',
   ],
   framework: {

.storybook/manager.ts

@@ -1,9 +1,9 @@
 import { create } from '@storybook/theming';
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/manager-api';
 
 addons.setConfig({
   theme:create({
     base: 'light',
     brandTitle: 'Amazon Chime SDK Components'
   })
-});
+});

.storybook/preview.ts

@@ -1,34 +1,37 @@
 import { ThemeProvider } from 'styled-components';
-import { withThemeFromJSXProvider } from '@storybook/addon-styling';
+import { withThemeFromJSXProvider } from '@storybook/addon-themes';
+import type { Preview } from '@storybook/react';
 
 import { GlobalStyles } from '../src/theme/GlobalStyles';
 import lightTheme from '../src/theme/light';
 import darkTheme from '../src/theme/dark';
 
-export const decorators = [
-  withThemeFromJSXProvider({
-    themes: {
-      light: lightTheme,
-      dark: darkTheme,
-    },
-    defaultTheme: 'light',
-    Provider: ThemeProvider,
-    GlobalStyles: GlobalStyles,
-  }),
-];
-
-export const argTypes = {
-  tag: { table: { disable: true } },
-  id: { table: { disable: true } },
-  className: { table: { disable: true } },
-  css: { table: { disable: true } },
-  testId: { table: { disable: true } },
-  viewBox: { table: { disable: true } },
-  height: { table: { disable: true } },
-  title: { table: { disable: true } },
-  children: { table: { disable: true } },
+const preview: Preview = {
+  decorators: [
+    withThemeFromJSXProvider({
+      themes: {
+        light: lightTheme,
+        dark: darkTheme,
+      },
+      defaultTheme: 'light',
+      Provider: ThemeProvider,
+      GlobalStyles: GlobalStyles,
+    }),
+  ],
+  argTypes: {
+    tag: { table: { disable: true } },
+    id: { table: { disable: true } },
+    className: { table: { disable: true } },
+    css: { table: { disable: true } },
+    testId: { table: { disable: true } },
+    viewBox: { table: { disable: true } },
+    height: { table: { disable: true } },
+    title: { table: { disable: true } },
+    children: { table: { disable: true } },
+  },
+  parameters: {
+    layout: 'centered',
+  },
 };
 
-export const parameters = {
-  layout: 'centered',
-};
+export default preview;

CHANGELOG.md

@@ -16,6 +16,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Removed
 
 ### Changed
+- Add support for React 19.
+- Migrate storybook to v8.
+- Migrate Jest to v29.
+- Rewrite PopOver component using floating-ui
 
 ### Fixed
 

jest.config.js

@@ -4,13 +4,9 @@ module.exports = {
   moduleFileExtensions: ['ts', 'tsx', 'js', 'json', 'jsx', 'node'],
   transform: {
     '\\.tsx?$': 'ts-jest',
-    '^.+\\.mdx$': '@storybook/addon-docs/jest-transform-mdx'
-  },
-  globals: {
-    'ts-jest': {
-      tsconfig: 'tsconfig.json'
-    }
+    '^.+\\.m?js$': 'ts-jest',
   },
+  preset: 'ts-jest',
   testPathIgnorePatterns: ['node_modules', '/tst/snapshots/',],
   testEnvironment: 'jsdom',
   collectCoverage: true,
@@ -36,4 +32,7 @@ module.exports = {
    * https://jestjs.io/docs/configuration#coverageprovider-string
    */
   coverageProvider: 'v8',
+  transformIgnorePatterns: [
+    'node_modules/(?!uuid)',
+  ],
 };