Migrate to React 19

eslint.config.mjs

@@ -0,0 +1,30 @@
+import react from '@eslint-react/eslint-plugin'
+import js from '@eslint/js'
+import eslintConfigPrettier from 'eslint-config-prettier'
+import reactHooks from 'eslint-plugin-react-hooks'
+import { defineConfig } from 'eslint/config'
+import tseslint from 'typescript-eslint'
+
+export default defineConfig({
+  files: ['**/*.{ts,tsx}'],
+  languageOptions: {
+    parser: tseslint.parser,
+    parserOptions: {
+      projectService: true,
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+  extends: [
+    js.configs.recommended,
+    ...tseslint.configs.recommended,
+    eslintConfigPrettier,
+    reactHooks.configs.flat.recommended,
+    react.configs['recommended-type-checked'],
+  ],
+  rules: {
+    // Too strict for our codebase
+    '@eslint-react/no-array-index-key': 'off',
+    '@eslint-react/hooks-extra/no-direct-set-state-in-use-effect': 'off',
+  },
+  ignores: ['dist', 'build/'],
+})

example/.storybook/main.js

@@ -1,30 +1,23 @@
-const path = require('path')
-const toPath = (_path) => path.join(process.cwd(), _path)
-module.exports = {
+/** @type {import('@storybook/react-vite').StorybookConfig} */
+const config = {
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
-    // '@storybook/preset-create-react-app',
-  ],
-  webpackFinal: async (config) => ({
-    ...config,
-    resolve: {
-      ...config.resolve,
-      alias: {
-        ...config.resolve.alias,
-        '@emotion/core': toPath('node_modules/@emotion/react'),
-        '@emotion/styled': toPath('node_modules/@emotion/styled'),
-        'emotion-theming': toPath('node_modules/@emotion/react'),
-      },
-    },
-  }),
+  addons: ['@storybook/addon-links'],
   framework: {
-    name: '@storybook/react-webpack5',
+    name: '@storybook/react-vite',
     options: {},
   },
   docs: {
     autodocs: true,
   },
+  viteFinal: (config) => {
+    config.build = config.build ?? {}
+    config.build.rollupOptions = config.build.rollupOptions ?? {}
+    config.build.rollupOptions.onwarn = (warning, warn) => {
+      if (warning.code === 'MODULE_LEVEL_DIRECTIVE') return
+      warn(warning)
+    }
+    return config
+  },
 }
+
+export default config

example/package.json

@@ -1,76 +1,29 @@
 {
   "name": "@solved-ac/ui-react-example",
-  "homepage": ".",
   "version": "0.0.0",
   "private": true,
+  "type": "module",
   "scripts": {
-    "start": "node ../node_modules/react-scripts/bin/react-scripts.js start",
-    "build": "node ../node_modules/react-scripts/bin/react-scripts.js build",
-    "test": "node ../node_modules/react-scripts/bin/react-scripts.js test",
-    "eject": "node ../node_modules/react-scripts/bin/react-scripts.js eject",
-    "storybook": "storybook dev -p 6006 -s public",
-    "build-storybook": "storybook build -s public"
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@emotion/react": "link:../node_modules/@emotion/react",
     "@emotion/styled": "link:../node_modules/@emotion/styled",
     "@floating-ui/react": "link:../node_modules/@floating-ui/react",
     "@solved-ac/ui-react": "link:..",
-    "@testing-library/jest-dom": "link:../node_modules/@testing-library/jest-dom",
-    "@testing-library/react": "link:../node_modules/@testing-library/react",
-    "@testing-library/user-event": "link:../node_modules/@testing-library/user-event",
-    "@types/jest": "link:../node_modules/@types/jest",
-    "@types/node": "link:../node_modules/@types/node",
     "@types/react": "link:../node_modules/@types/react",
     "@types/react-dom": "link:../node_modules/@types/react-dom",
     "framer-motion": "link:../node_modules/framer-motion",
     "react": "link:../node_modules/react",
     "react-dom": "link:../node_modules/react-dom",
-    "react-scripts": "link:../node_modules/react-scripts",
     "typescript": "link:../node_modules/typescript"
   },
   "devDependencies": {
-    "@babel/core": "^7.0.0",
-    "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
-    "@babel/preset-env": "^7.22.5",
-    "@babel/preset-react": "^7.22.5",
-    "@babel/preset-typescript": "^7.22.5",
-    "@storybook/addon-actions": "^7.0.21",
-    "@storybook/addon-essentials": "^7.0.21",
-    "@storybook/addon-interactions": "^7.0.21",
-    "@storybook/addon-links": "^7.0.21",
-    "@storybook/node-logger": "^7.0.21",
-    "@storybook/preset-create-react-app": "^7.0.21",
-    "@storybook/react": "^7.0.21",
-    "@storybook/react-webpack5": "^7.0.21",
-    "@storybook/testing-library": "^0.1.0",
-    "babel-plugin-dynamic-import-node": "^2.3.3",
-    "storybook": "^7.0.21",
-    "webpack": "5"
-  },
-  "eslintConfig": {
-    "extends": "react-app",
-    "overrides": [
-      {
-        "files": [
-          "**/*.stories.*"
-        ],
-        "rules": {
-          "import/no-anonymous-default-export": "off"
-        }
-      }
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+    "@storybook/addon-links": "^10.2.12",
+    "@storybook/react": "^10.2.12",
+    "@storybook/react-vite": "^10.2.12",
+    "storybook": "^10.2.12",
+    "vite": "^6.0.0"
   }
 }

example/src/App.tsx

@@ -1,4 +1,3 @@
-import '@solved-ac/ui-react/dist/index.css'
 import React from 'react'
 
 const App = () => {

example/src/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import App from './App'
-import './index.css'
 
-
-ReactDOM.render(<App />, document.getElementById('root'))
+const container = document.getElementById('root')!
+const root = createRoot(container)
+root.render(<App />)

example/src/react-app-env.d.ts

@@ -1 +1 @@
-/// <reference types="react-scripts" />
+/// <reference types="vite/client" />

example/src/stories/Button.stories.tsx

@@ -48,7 +48,7 @@ export default {
       description: 'The element to render the button as',
     },
   },
-} as Meta<typeof Button>
+} satisfies Meta<typeof Button>
 
 const Template: StoryFn<typeof Button> = (args) => <Button {...args} />
 

example/src/stories/Card.stories.tsx

@@ -35,7 +35,7 @@ export default {
       description: 'The element to render the card as',
     },
   },
-} as Meta<typeof Card>
+} satisfies Meta<typeof Card>
 
 const Template: StoryFn<typeof Card> = (args) => <Card {...args} />
 

example/src/stories/Chip.stories.tsx

@@ -19,7 +19,7 @@ export default {
       description: 'The element to render the chip as',
     },
   },
-} as Meta<typeof Chip>
+} satisfies Meta<typeof Chip>
 
 const Template: StoryFn<typeof Chip> = (args) => <Chip {...args} />
 

example/src/stories/Collapse.stories.tsx

@@ -18,15 +18,12 @@ export default {
       defaultValue: 'div',
     },
     children: {
-      control: 'none',
       description: 'The children to display',
     },
   },
-} as Meta<typeof Collapse>
+} satisfies Meta<typeof Collapse>
 
-const Template: StoryFn<typeof Collapse> = (args) => (
-  <Collapse {...args} />
-)
+const Template: StoryFn<typeof Collapse> = (args) => <Collapse {...args} />
 
 export const Default = Template.bind({})
 Default.args = {

example/src/stories/Container.stories.tsx

@@ -27,11 +27,9 @@ export default {
       description: 'The element to render the container as',
     },
   },
-} as Meta<typeof Container>
+} satisfies Meta<typeof Container>
 
-const Template: StoryFn<typeof Container> = (args) => (
-  <Container {...args} />
-)
+const Template: StoryFn<typeof Container> = (args) => <Container {...args} />
 
 export const Default = Template.bind({})
 Default.args = {

example/src/stories/Divider.stories.tsx

@@ -18,7 +18,7 @@ export default {
       description: 'The element to render the divider as',
     },
   },
-} as Meta<typeof Divider>
+} satisfies Meta<typeof Divider>
 
 const Template: StoryFn<typeof Divider> = (args) => <Divider {...args} />
 

example/src/stories/Dropdown.stories.tsx

@@ -26,7 +26,7 @@ export default {
       defaultValue: true,
     },
   },
-} as Meta<typeof Dropdown>
+} satisfies Meta<typeof Dropdown>
 
 const Template: StoryFn<typeof Dropdown> = (args) => (
   <Centering

example/src/stories/EmptyStatePlaceholder.stories.tsx

@@ -24,7 +24,7 @@ export default {
       description: 'The element to render the placeholder as',
     },
   },
-} as Meta<typeof EmptyStatePlaceholder>
+} satisfies Meta<typeof EmptyStatePlaceholder>
 
 const Template: StoryFn<typeof EmptyStatePlaceholder> = (args) => (
   <EmptyStatePlaceholder {...args} />

example/src/stories/Footer.stories.tsx

@@ -7,7 +7,6 @@ export default {
   component: Footer,
   argTypes: {
     children: {
-      control: 'none',
       description: 'Children to display',
     },
     backgroundColor: {
@@ -19,7 +18,7 @@ export default {
       description: 'The element to render the footer as',
     },
   },
-} as Meta<typeof Footer>
+} satisfies Meta<typeof Footer>
 
 const Template: StoryFn<typeof Footer> = (args) => <Footer {...args} />
 

example/src/stories/Item/Enumerate.stories.tsx

@@ -7,15 +7,12 @@ export default {
   component: Enumerate,
   argTypes: {
     children: {
-      control: 'none',
       description: 'The children to display inside the list',
     },
   },
-} as Meta<typeof Enumerate>
+} satisfies Meta<typeof Enumerate>
 
-const Template: StoryFn<typeof Enumerate> = (args) => (
-  <Enumerate {...args} />
-)
+const Template: StoryFn<typeof Enumerate> = (args) => <Enumerate {...args} />
 
 export const Default = Template.bind({})
 Default.args = {