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": {