upgrades to storybook 8

.storybook/main.js

@@ -2,7 +2,7 @@ module.exports = {
  staticDirs: ["public"],
 
  stories: [
- "./stories/*.stories.mdx",
+ "./stories/*.mdx",
  "./stories/*.stories.@(js|jsx|ts|tsx)"
  ],
 
@@ -19,5 +19,9 @@ module.exports = {
 
  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)