React 19 Upgrade (#1036)

* chore: bump deps to react v19

* Update Storybook dependencies and configuration

---------

Co-authored-by: dvngrb <[email protected]>
Co-authored-by: Lukas Masuch <[email protected]>

Author: 3 people

.github/workflows/node.js.yml

@@ -35,3 +35,12 @@ jobs:
                   node-version: 20.10.0
             - run: npm install
             - run: npm run test-18
+    test-react-19:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v4
+            - uses: actions/setup-node@v4
+              with:
+                  node-version: 20.10.0
+            - run: npm install
+            - run: npm run test-19

.storybook/main.js

@@ -4,7 +4,7 @@ import { mergeConfig } from "vite";
 
 export default {
     stories: ["../**/src/**/*.stories.tsx"],
-    addons: [getAbsolutePath("@storybook/addon-storysource"), getAbsolutePath("@storybook/addon-controls")],
+    addons: [getAbsolutePath("@storybook/addon-docs")],
 
     typescript: {
         reactDocgen: false,
@@ -19,11 +19,7 @@ export default {
     framework: {
         name: getAbsolutePath("@storybook/react-vite"),
         options: {},
-    },
-
-    docs: {
-        autodocs: false,
-    },
+    }
 };
 
 function getAbsolutePath(value) {

.storybook/main.ts

@@ -1,13 +1,18 @@
 const preview = {
     parameters: {
         layout: "fullscreen",
+
         options: {
             storySort: {
                 method: "alphabetical",
                 order: ["Glide-Data-Grid", "Extra Packages", "Subcomponents"],
                 locales: "en-US",
             },
         },
+
+        docs: {
+            codePanel: true
+        }
     },
 };
 

.storybook/preview.ts

@@ -13,7 +13,7 @@
 </picture>
 
 [![Version](https://img.shields.io/npm/v/@glideapps/glide-data-grid?color=blue&label=latest&style=for-the-badge)](https://github.com/glideapps/glide-data-grid/releases)
-[![React 16+](https://img.shields.io/badge/React-16+-00ADD8?style=for-the-badge&logo=react)](https://reactjs.org)
+[![React 16-19](https://img.shields.io/badge/React-16--19-00ADD8?style=for-the-badge&logo=react)](https://reactjs.org)
 [![Code Coverage](https://img.shields.io/coverallsCoverage/github/glideapps/glide-data-grid?color=457aba&label=Cover&style=for-the-badge)](https://coveralls.io/github/glideapps/glide-data-grid)
 [![npm bundle size](https://img.shields.io/bundlephobia/minzip/@glideapps/glide-data-grid?color=success&label=bundle&style=for-the-badge)](https://bundlephobia.com/package/@glideapps/glide-data-grid)
 [![License](https://img.shields.io/github/license/glideapps/glide-data-grid?color=red&style=for-the-badge)](https://github.com/glideapps/glide-data-grid/blob/main/LICENSE)
@@ -40,7 +40,7 @@ You can also visit our [main site](https://grid.glideapps.com).
 
 # ⚡ Quick Start
 
-First make sure you are using React 16 or greater. Then install the data grid:
+First make sure you are using React 16 or greater (including React 17, 18, and 19). Then install the data grid:
 
 ```shell
 npm i @glideapps/glide-data-grid