Merge branch 'upgrades-libs'

.github/workflows/release.yml

@@ -15,10 +15,10 @@ jobs:
     runs-on: ubuntu-22.04
     if: ${{ github.event.inputs.REPOSITORY_NAME ==  github.repository }}
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Release library
         uses: chrvadala/github-actions/nodejs-release-library-action@v1
         with:
           NEXT_VERSION: ${{ github.event.inputs.NEXT_VERSION }}
           NPM_TOKEN: ${{ secrets.npm_token }}
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/test.yml

@@ -10,16 +10,16 @@ jobs:
     strategy:
       matrix:
         os: [ ubuntu-22.04 ]
-        node: [ 14, 16 ]
+        node: [ 16, 18, 20 ]
     name: Test Nodejs v${{ matrix.node }} on ${{ matrix.os }}
     runs-on: ${{ matrix.os }}
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: chrvadala/github-actions/nodejs-test-library-action@v1
         with:
           NODE_VERSION: ${{ matrix.node }}
       - name: Publish Coveralls
-        uses: coverallsapp/github-action@v1.1.2
+        uses: coverallsapp/github-action@v2.2.3
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           flag-name: run-nodejs-v${{ matrix.node }}-${{ matrix.os }}
@@ -31,7 +31,7 @@ jobs:
     runs-on: ubuntu-22.04
     steps:
       - name: Coveralls Finished
-        uses: coverallsapp/github-action@v1.1.2
+        uses: coverallsapp/github-action@v2.2.3
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
-          parallel-finished: true
+          parallel-finished: true

.github/workflows/website.yml

@@ -10,7 +10,7 @@ jobs:
     name: Publish Github Pages Website
     runs-on: ubuntu-22.04
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: chrvadala/github-actions/gh-pages-publish-action@v1
         with:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.storybook/main.js

@@ -1,16 +1,27 @@
 module.exports = {
   staticDirs: ["public"],
+
   stories: [
-    "./stories/*.stories.mdx",
+     "./stories/*.mdx",
     "./stories/*.stories.@(js|jsx|ts|tsx)"
   ],
+
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/preset-create-react-app"
   ],
-  framework: "@storybook/react",
-  core: {
-    "builder": "webpack5"
+
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {}
+  },
+
+  docs: {
+    autodocs: true
+  },
+
+  typescript: {
+    reactDocgen: "react-docgen-typescript"
   }
 };

.storybook/manager.js

@@ -1,4 +1,4 @@
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/manager-api';
 import myTheme from './myTheme'
 
 addons.setConfig({

.storybook/stories/Welcome.stories.mdx → .storybook/stories/Welcome.mdx

@@ -1,8 +1,9 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
 
 <Meta title="Welcome" />
 
 # react-svg-pan-zoom
+
 **react-svg-pan-zoom** is a React component that adds **pan** and **zoom** features to the **SVG images**. It helps to display big SVG images in a small space.
 
 [![chrvadala](https://img.shields.io/badge/website-chrvadala-orange.svg)](https://chrvadala.github.io)
@@ -11,23 +12,24 @@ import { Meta } from '@storybook/addon-docs';
 [![Downloads](https://img.shields.io/npm/dm/react-svg-pan-zoom.svg)](https://www.npmjs.com/package/react-svg-pan-zoom)
 [![Donate](https://img.shields.io/badge/donate-GithubSponsor-green.svg)](https://github.com/sponsors/chrvadala)
 
-
 ## Features
+
 This component can work in four different modes depending on the selected tool:
-- With the tool **pan** the user can move the image and drag it around within the viewer, but can't interact with SVG child elements.
-- With the tool **zoom** the user can scale the image either with a point click or selecting a region to zoom the specified area, but can't interact with SVG child elements.
-- With the tool **none** the user can interact with SVG child elements and trigger events.
-- With the tool **auto** the user can interact with SVG child elements, perform *pan* (dragging the image), *zoom in* (double click), *zoom out* (double click + shift).
 
+* With the tool **pan** the user can move the image and drag it around within the viewer, but can't interact with SVG child elements.
+* With the tool **zoom** the user can scale the image either with a point click or selecting a region to zoom the specified area, but can't interact with SVG child elements.
+* With the tool **none** the user can interact with SVG child elements and trigger events.
+* With the tool **auto** the user can interact with SVG child elements, perform *pan* (dragging the image), *zoom in* (double click), *zoom out* (double click + shift).
 
 ## Documentation
-- [Getting Started](https://github.com/chrvadala/react-svg-pan-zoom/blob/main/docs/getting-started.md#props)
-- [Props](https://github.com/chrvadala/react-svg-pan-zoom/blob/main/docs/documentation.md#props)
-- [Methods](https://github.com/chrvadala/react-svg-pan-zoom/blob/main/docs/documentation.md#methods)
-- [API](https://github.com/chrvadala/react-svg-pan-zoom/blob/main/docs/documentation.md#api)
-- [Autosizer viewer](https://github.com/chrvadala/react-svg-pan-zoom/blob/main/docs/autosizer-viewer.md)
-- [SVG dynamically loaded](https://github.com/chrvadala/react-svg-pan-zoom/blob/main/docs/svg-dynamically-loaded.md)
 
+* [Getting Started](https://github.com/chrvadala/react-svg-pan-zoom/blob/main/docs/getting-started.md#props)
+* [Props](https://github.com/chrvadala/react-svg-pan-zoom/blob/main/docs/documentation.md#props)
+* [Methods](https://github.com/chrvadala/react-svg-pan-zoom/blob/main/docs/documentation.md#methods)
+* [API](https://github.com/chrvadala/react-svg-pan-zoom/blob/main/docs/documentation.md#api)
+* [Autosizer viewer](https://github.com/chrvadala/react-svg-pan-zoom/blob/main/docs/autosizer-viewer.md)
+* [SVG dynamically loaded](https://github.com/chrvadala/react-svg-pan-zoom/blob/main/docs/svg-dynamically-loaded.md)
 
 ## Source Code
-- [GitHub](https://github.com/chrvadala/react-svg-pan-zoom)
+
+* [GitHub](https://github.com/chrvadala/react-svg-pan-zoom)

babel.config.js

@@ -6,7 +6,7 @@ module.exports = function (api) {
   const presets = [];
   const plugins = [];
 
-  plugins.push("@babel/plugin-proposal-object-rest-spread")
+  plugins.push("@babel/plugin-transform-object-rest-spread")
 
   presets.push(["@babel/preset-env", {
     modules: KEEP_MODULES ? false : 'commonjs',

examples/controlled-component/package.json

@@ -3,8 +3,8 @@
   "version": "0.0.0",
   "private": true,
   "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-svg-pan-zoom": "*"
   },
   "devDependencies": {

examples/uncontrolled-component/package.json

@@ -3,8 +3,8 @@
   "version": "0.0.0",
   "private": true,
   "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-svg-pan-zoom": "*"
   },
   "devDependencies": {