Merge pull request #231 from Drawbotics/feat/widen-react-peerdeps

Widen React peerDependencies, bump use-screen-size, add React 18 CI

Author: laurent86

.github/workflows/ci.yml

@@ -44,6 +44,39 @@ jobs:
         env:
           NODE_AUTH_TOKEN: ${{secrets.GH_TOKEN}}
 
+  test-react-18:
+    runs-on: ubuntu-latest
+    if: "!contains(github.event.head_commit.message, 'skip ci')"
+    continue-on-error: true
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+          registry-url: https://npm.pkg.github.com/
+          scope: '@drawbotics'
+      - name: Install dependencies and build libs
+        run: |
+          npm run bootstrap
+          npm run build-libs
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.GH_TOKEN}}
+      - name: Swap to React 18
+        run: |
+          # Install React 18 in a temp dir to avoid disrupting lerna's symlinks
+          TMPDIR=$(mktemp -d)
+          cd "$TMPDIR" && npm init -y > /dev/null 2>&1
+          npm install react@18 react-dom@18 react-test-renderer@18 2>&1
+          # Replace only the react packages in root node_modules (where jest resolves them)
+          for pkg in react react-dom react-test-renderer scheduler; do
+            rm -rf "$GITHUB_WORKSPACE/node_modules/$pkg"
+            [ -d "$TMPDIR/node_modules/$pkg" ] && cp -rL "$TMPDIR/node_modules/$pkg" "$GITHUB_WORKSPACE/node_modules/$pkg"
+          done
+          rm -rf "$TMPDIR"
+      - name: Run react-drylus tests
+        run: npm run test:react
+
   release:
     needs: test
     if: contains(github.ref, 'master')

README.md

@@ -17,7 +17,7 @@ There are 7 total packages:
 - [![npm version](https://badge.fury.io/js/%40drawbotics%2Fdrylus-style-vars.svg)](https://badge.fury.io/js/%40drawbotics%2Fdrylus-style-vars) [drylus-style-vars](/packages/drylus-style-vars):
  This package holds all the variables used in the Drawbotics styles. Exports js, less and css vars.
 - [![npm version](https://badge.fury.io/js/%40drawbotics%2Ficons.svg)](https://badge.fury.io/js/%40drawbotics%2Ficons) [icons](/packages/icons): This package holds all the icons used throughout the Drawbotics design system
-- [![npm version](https://badge.fury.io/js/%40drawbotics%2Freact-drylus.svg)](https://badge.fury.io/js/%40drawbotics%2Freact-drylus) [react-drylus](/packages/react-drylus): This is basically the source of all the components for the library; it uses React
+- [![npm version](https://badge.fury.io/js/%40drawbotics%2Freact-drylus.svg)](https://badge.fury.io/js/%40drawbotics%2Freact-drylus) [react-drylus](/packages/react-drylus): This is basically the source of all the components for the library; it uses React (>=16.8, best-effort React 18/19 support)
 - [![npm version](https://badge.fury.io/js/%40drawbotics%2Fvanilla-drylus.svg)](https://badge.fury.io/js/%40drawbotics%2Fvanilla-drylus) [vanilla-drylus](/packages/vanilla-drylus): The vanilla JS version of the library. The styles (CSS) is extracted from `react-drylus` using `extract-emotion` (see next point) and bundled to be used in non-react apps. Since we can't extract JS logic from React, the component logic is re-written in non-react code and bundled separately as well
 - [![npm version](https://badge.fury.io/js/%40drawbotics%2Fextract-emotion.svg)](https://badge.fury.io/js/%40drawbotics%2Fextract-emotion) [extract-emotion](/packages/extract-emotion): A small CLI tool to extract the CSS from React components that use [emotion](https://github.com/emotion-js/emotion) for styling (see [readme](/packages/extract-emotion/README.md))
 - [drylus-web-components](/packages/drylus-web-components): __WIP__ Auto generated from `react-drylus`

package.json

@@ -65,7 +65,7 @@
     "@babel/preset-react": "^7.0.0",
     "@drawbotics/check-env": "^3.0.0",
     "@drawbotics/s3sync": "^1.0.1",
-    "@drawbotics/use-screen-size": "^2.0.2",
+    "@drawbotics/use-screen-size": "^3.0.1",
     "@emotion/core": "^10.0.21",
     "@hot-loader/react-dom": "^16.8.6",
     "@mdx-js/loader": "^1.6.21",

packages/extract-emotion/package.json

@@ -25,7 +25,7 @@
   },
   "peerDependencies": {
     "emotion": "^10",
-    "react": "^16.8.0"
+    "react": ">=16.8.0 <20"
   },
   "repository": {
     "type": "git",

packages/react-drylus/README.md

@@ -4,6 +4,10 @@ The "root" package for all of the Drawbotics styles (excluding [icons]('../icons
 
 The components are written in React and are styled using [emotion](https://github.com/emotion-js/emotion).
 
+## React Version Support
+- Developed and tested against **React 16**
+- **React 18/19** support is best-effort and community-tested
+- If you encounter issues on newer React versions, please report them
 
 ## Development
 ```

packages/react-drylus/package.json

@@ -28,7 +28,7 @@
     "@dnd-kit/utilities": "^3.1.0",
     "@drawbotics/drylus-style-vars": "file:../drylus-style-vars",
     "@drawbotics/icons": "file:../icons",
-    "@drawbotics/use-screen-size": "^2.0.2",
+    "@drawbotics/use-screen-size": "^3.0.1",
     "@emotion/core": "^10.0.21",
     "@turf/circle": "^6.0.1",
     "animejs": "^3.0.1",
@@ -47,8 +47,8 @@
     "uuid": "^3.3.2"
   },
   "peerDependencies": {
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6"
+    "react": ">=16.8.0 <20",
+    "react-dom": ">=16.8.0 <20"
   },
   "repository": {
     "type": "git",

packages/styleguide/package.json

@@ -16,7 +16,7 @@
   "dependencies": {
     "@drawbotics/icons": "file:../icons",
     "@drawbotics/react-drylus": "file:../react-drylus",
-    "@drawbotics/use-screen-size": "^2.0.2",
+    "@drawbotics/use-screen-size": "^3.0.1",
     "@drawbotics/vanilla-drylus": "file:../vanilla-drylus",
     "core-js": "2",
     "fast-xml-parser": "^3.12.16",