Merge pull request #9919 from marmelab/react-19

Prepare for react 19
marmelab · Jun 17, 2024 · e2fa925 · e2fa925
2 parents c445440 + 1ad36bd
commit e2fa925
Show file tree

Hide file tree

Showing 47 changed files with 2,968 additions and 3,169 deletions.
diff --git a/.storybook/main.js → .storybook/main.ts b/.storybook/main.js → .storybook/main.ts
@@ -1,25 +1,24 @@
-const fs = require('fs');
-const path = require('path');
+import { StorybookConfig } from '@storybook/react-webpack5';
+import fs from 'fs';
+import path, { dirname, join } from 'path';
+
 const packages = fs.readdirSync(path.resolve(__dirname, '../packages'));
-module.exports = {
-    stories: [`../packages/${process.env.ONLY || '**'}/**/*.stories.@(tsx)`],
+
+const config: StorybookConfig = {
+    stories: [
+        path.resolve(
+            __dirname,
+            `../packages/${process.env.ONLY || '**'}/**/*.stories.@(tsx)`
+        ),
+    ],
     addons: [
-        {
-            name: '@storybook/addon-storysource',
-            options: {
-                loaderOptions: {
-                    injectStoryParameters: false,
-                    parser: 'typescript',
-                },
-            },
-        },
+        '@storybook/addon-webpack5-compiler-babel',
         '@storybook/addon-actions',
         '@storybook/addon-controls',
     ],
     typescript: {
         check: false,
-        checkOptions: {},
-        reactDocgen: 'none',
+        reactDocgen: false,
     },
     babel: async options => {
         const { plugins = [] } = options;
@@ -54,6 +53,16 @@ module.exports = {
         };
     },
     webpackFinal: async (config, { configType }) => {
+        config.module?.rules?.push({
+            test: /\.stories\.tsx?$/,
+            use: [
+                {
+                    loader: require.resolve('@storybook/source-loader'),
+                    options: { parser: 'typescript' },
+                },
+            ],
+            enforce: 'pre',
+        });
         return {
             ...config,
             resolve: {
@@ -72,10 +81,14 @@ module.exports = {
         };
     },
     framework: {
-        name: '@storybook/react-webpack5',
+        name: getAbsolutePath('@storybook/react-webpack5'),
         options: {},
     },
-    docs: {
-        autodocs: false,
-    },
+    docs: {},
 };
+
+export default config;
+
+function getAbsolutePath(value: string): any {
+    return dirname(require.resolve(join(value, 'package.json')));
+}
diff --git a/examples/crm/package.json b/examples/crm/package.json
@@ -5,31 +5,31 @@
     "type": "module",
     "dependencies": {
         "@hello-pangea/dnd": "^16.3.0",
-        "@mui/icons-material": "^5.15.15",
-        "@mui/material": "^5.15.15",
+        "@mui/icons-material": "^5.15.20",
+        "@mui/material": "^5.15.20",
         "@nivo/bar": "^0.80.0",
         "@nivo/core": "^0.80.0",
         "clsx": "^2.1.1",
         "date-fns": "^3.6.0",
         "faker": "~5.4.0",
         "lodash": "~4.17.5",
         "ra-data-fakerest": "^5.0.0-alpha.0",
-        "react": "^18.0.0",
+        "react": "^18.3.1",
         "react-admin": "^5.0.0-alpha.0",
-        "react-dom": "^18.2.0",
+        "react-dom": "^18.3.1",
         "react-error-boundary": "^4.0.3",
         "react-router": "^6.22.0",
         "react-router-dom": "^6.22.0"
     },
     "devDependencies": {
-        "@testing-library/jest-dom": "^6.1.4",
-        "@testing-library/react": "^14.1.2",
-        "@testing-library/user-event": "^14.5.1",
+        "@testing-library/jest-dom": "^6.4.5",
+        "@testing-library/react": "^15.0.7",
+        "@testing-library/user-event": "^14.5.2",
         "@types/faker": "^5.1.7",
         "@types/jest": "^29.5.2",
         "@types/lodash": "~4.14.168",
-        "@types/react": "^18.2.37",
-        "@types/react-dom": "^18.2.16",
+        "@types/react": "^18.3.3",
+        "@types/react-dom": "^18.3.0",
         "@vitejs/plugin-react": "^4.2.1",
         "rollup-plugin-visualizer": "^5.12.0",
         "rollup-preserve-directives": "^1.1.1",

diff --git a/examples/crm/vite.config.ts b/examples/crm/vite.config.ts
@@ -5,7 +5,6 @@ import react from '@vitejs/plugin-react';
 import { visualizer } from 'rollup-plugin-visualizer';
 import preserveDirectives from 'rollup-preserve-directives';
 
-
 // https://vitejs.dev/config/
 export default defineConfig(async () => {
     const packages = fs.readdirSync(path.resolve(__dirname, '../../packages'));
@@ -23,44 +22,46 @@ export default defineConfig(async () => {
         );
     }
     return {
-    plugins: [
-        react(),
-        visualizer({
-            open: process.env.NODE_ENV !== 'CI',
-            filename: './dist/stats.html',
-        }),
-    ],
-    define: {
-        'process.env': process.env,
-    },
-    server: {
-        port: 8000,
-        open: true,
-    },
-    base: './',
-    esbuild: {
-        keepNames: true,
-    },
-    build: {
-        sourcemap: true,
-        rollupOptions: {
-            plugins: [preserveDirectives()],
-        }
-    },
-    resolve: {
-        preserveSymlinks: true,
-        alias: [
-            // allow profiling in production
-            { find: /^react-dom$/, replacement: 'react-dom/profiling' },
-            {
-                find: 'scheduler/tracing',
-                replacement: 'scheduler/tracing-profiling',
-            },
-            // we need to manually follow the symlinks for local packages to allow deep HMR
-            ...Object.keys(aliases).map(packageName => ({
-                find: packageName,
-                replacement: aliases[packageName],
-            })),
+        plugins: [
+            react(),
+            visualizer({
+                open: process.env.NODE_ENV !== 'CI',
+                filename: './dist/stats.html',
+            }),
         ],
-    },
-}});
+        define: {
+            'process.env': process.env,
+        },
+        server: {
+            port: 8000,
+            open: true,
+        },
+        base: './',
+        esbuild: {
+            keepNames: true,
+        },
+        build: {
+            sourcemap: true,
+            rollupOptions: {
+                plugins: [preserveDirectives()],
+            },
+        },
+        resolve: {
+            preserveSymlinks: true,
+            alias: [
+                // FIXME: doesn't work with react 19
+                // allow profiling in production
+                // { find: /^react-dom$/, replacement: 'react-dom/profiling' },
+                // {
+                //     find: 'scheduler/tracing',
+                //     replacement: 'scheduler/tracing-profiling',
+                // },
+                // we need to manually follow the symlinks for local packages to allow deep HMR
+                ...Object.keys(aliases).map(packageName => ({
+                    find: packageName,
+                    replacement: aliases[packageName],
+                })),
+            ],
+        },
+    };
+});
diff --git a/examples/demo/package.json b/examples/demo/package.json
@@ -5,8 +5,8 @@
     "type": "module",
     "dependencies": {
         "@apollo/client": "^3.3.19",
-        "@mui/icons-material": "^5.15.15",
-        "@mui/material": "^5.15.15",
+        "@mui/icons-material": "^5.15.20",
+        "@mui/material": "^5.15.20",
         "@types/recharts": "^1.8.10",
         "@vitejs/plugin-react": "^2.2.0",
         "clsx": "^2.1.1",
@@ -26,9 +26,9 @@
         "ra-input-rich-text": "^5.0.0-alpha.0",
         "ra-language-english": "^5.0.0-alpha.0",
         "ra-language-french": "^5.0.0-alpha.0",
-        "react": "^18.0.0",
+        "react": "^18.3.1",
         "react-admin": "^5.0.0-alpha.0",
-        "react-dom": "^18.2.0",
+        "react-dom": "^18.3.1",
         "react-router": "^6.22.0",
         "react-router-dom": "^6.22.0",
         "recharts": "^2.1.15"
@@ -43,8 +43,8 @@
         "@types/fetch-mock": "^7.3.2",
         "@types/jest": "^29.5.2",
         "@types/node": "^20.10.7",
-        "@types/react": "^18.2.37",
-        "@types/react-dom": "^18.2.16",
+        "@types/react": "^18.3.3",
+        "@types/react-dom": "^18.3.0",
         "@vitejs/plugin-react": "^4.2.1",
         "rewire": "^5.0.0",
         "rollup-plugin-visualizer": "^5.12.0",

diff --git a/examples/demo/src/dashboard/PendingReviews.tsx b/examples/demo/src/dashboard/PendingReviews.tsx
@@ -90,7 +90,12 @@ const PendingReviews = () => {
                         </ListItemAvatar>
 
                         <ListItemText
-                            primary={<StarRatingField record={record} />}
+                            primary={
+                                <StarRatingField
+                                    record={record}
+                                    source="rating"
+                                />
+                            }
                             secondary={record.comment}
                             sx={{
                                 overflowY: 'hidden',

diff --git a/examples/demo/src/invoices/InvoiceList.tsx b/examples/demo/src/invoices/InvoiceList.tsx
@@ -61,7 +61,7 @@ const InvoiceList = () => (
             <TextField source="id" />
             <DateField source="date" />
             <ReferenceField source="customer_id" reference="customers">
-                <FullNameField />
+                <FullNameField source="last_name" />
             </ReferenceField>
             <ReferenceField
                 source="customer_id"

diff --git a/examples/demo/src/orders/MobileGrid.tsx b/examples/demo/src/orders/MobileGrid.tsx
@@ -41,6 +41,7 @@ const MobileGrid = () => {
                         />
                         <CardContent sx={{ pt: 0 }}>
                             <CustomerReferenceField
+                                source="customer_id"
                                 sx={{ display: 'block', mb: 1 }}
                             />
                             <Typography variant="body2" gutterBottom>

diff --git a/examples/demo/src/orders/OrderList.tsx b/examples/demo/src/orders/OrderList.tsx
@@ -131,7 +131,7 @@ const TabbedDatagrid = () => {
                         >
                             <DateField source="date" showTime />
                             <TextField source="reference" />
-                            <CustomerReferenceField />
+                            <CustomerReferenceField source="customer_id" />
                             <ReferenceField
                                 source="customer_id"
                                 reference="customers"
@@ -182,7 +182,7 @@ const TabbedDatagrid = () => {
                         >
                             <DateField source="date" showTime />
                             <TextField source="reference" />
-                            <CustomerReferenceField />
+                            <CustomerReferenceField source="customer_id" />
                             <ReferenceField
                                 source="customer_id"
                                 reference="customers"
@@ -237,7 +237,7 @@ const TabbedDatagrid = () => {
                         >
                             <DateField source="date" showTime />
                             <TextField source="reference" />
-                            <CustomerReferenceField />
+                            <CustomerReferenceField source="customer_id" />
                             <ReferenceField
                                 source="customer_id"
                                 reference="customers"

diff --git a/examples/demo/src/products/ProductEdit.tsx b/examples/demo/src/products/ProductEdit.tsx
@@ -85,8 +85,11 @@ const ProductEdit = () => (
                         }}
                     >
                         <DateField source="date" />
-                        <CustomerReferenceField />
-                        <StarRatingField />
+                        <CustomerReferenceField source="customer_id" />
+                        <StarRatingField
+                            label="resources.reviews.fields.rating"
+                            source="rating"
+                        />
                         <TextField source="comment" />
                         <TextField source="status" />
                         <EditButton />

diff --git a/examples/demo/src/reviews/ReviewEdit.tsx b/examples/demo/src/reviews/ReviewEdit.tsx
@@ -40,8 +40,8 @@ const ReviewEdit = ({ id, onCancel }: ReviewEditProps) => {
                 >
                     <Grid container rowSpacing={1} mb={1}>
                         <Grid item xs={6}>
-                            <Labeled>
-                                <CustomerReferenceField />
+                            <Labeled source="customer_id">
+                                <CustomerReferenceField source="customer_id" />
                             </Labeled>
                         </Grid>
                         <Grid item xs={6}>
@@ -55,8 +55,8 @@ const ReviewEdit = ({ id, onCancel }: ReviewEditProps) => {
                             </Labeled>
                         </Grid>
                         <Grid item xs={6}>
-                            <Labeled>
-                                <StarRatingField />
+                            <Labeled label="resources.reviews.fields.rating">
+                                <StarRatingField source="rating" />
                             </Labeled>
                         </Grid>
                     </Grid>

diff --git a/examples/demo/src/reviews/ReviewListDesktop.tsx b/examples/demo/src/reviews/ReviewListDesktop.tsx
@@ -47,9 +47,13 @@ const ReviewListDesktop = ({ selectedRow }: ReviewListDesktopProps) => (
         }}
     >
         <DateField source="date" />
-        <CustomerReferenceField link={false} />
+        <CustomerReferenceField source="customer_id" link={false} />
         <ProductReferenceField source="product_id" link={false} />
-        <StarRatingField size="small" />
+        <StarRatingField
+            size="small"
+            label="resources.reviews.fields.rating"
+            source="rating"
+        />
         <TextField source="comment" />
         <TextField source="status" />
     </DatagridConfigurable>

diff --git a/examples/demo/src/reviews/StarRatingField.tsx b/examples/demo/src/reviews/StarRatingField.tsx
@@ -36,9 +36,4 @@ const StarRatingField = ({ size = 'large' }: FieldProps & OwnProps) => {
     );
 };
 
-StarRatingField.defaultProps = {
-    label: 'resources.reviews.fields.rating',
-    source: 'rating',
-};
-
 export default StarRatingField;
diff --git a/examples/demo/src/visitors/Aside.tsx b/examples/demo/src/visitors/Aside.tsx
@@ -327,7 +327,7 @@ const Review = () => {
                 {record.comment}
             </Typography>
             <Typography variant="body2" color="textSecondary">
-                <StarRatingField />
+                <StarRatingField source="rating" />
             </Typography>
         </>
     );

diff --git a/examples/demo/src/visitors/CustomerLinkField.tsx b/examples/demo/src/visitors/CustomerLinkField.tsx
@@ -11,7 +11,7 @@ const CustomerLinkField = (_: FieldProps<Customer>) => {
     }
     return (
         <Link to={`/customers/${record.id}`}>
-            <FullNameField />
+            <FullNameField source="last_name" />
         </Link>
     );
 };

diff --git a/examples/demo/src/visitors/CustomerReferenceField.tsx b/examples/demo/src/visitors/CustomerReferenceField.tsx
@@ -9,12 +9,8 @@ const CustomerReferenceField = (
     }
 ) => (
     <ReferenceField source="customer_id" reference="customers" {...props}>
-        <FullNameField />
+        <FullNameField source="last_name" />
     </ReferenceField>
 );
 
-CustomerReferenceField.defaultProps = {
-    source: 'customer_id',
-};
-
 export default CustomerReferenceField;