chore: v.2.10.0

Author: ssi02014

.storybook/main.js

@@ -1,5 +1,4 @@
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
-
 module.exports = {
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
@@ -21,7 +20,8 @@ module.exports = {
     config.resolve.plugins.push(new TsconfigPathsPlugin({}));
     return config;
   },
-  core: {
-    builder: 'webpack5',
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
   },
 };

package.json

@@ -1,14 +1,14 @@
 {
   "name": "react-thumbnail-generator",
-  "version": "2.9.5",
+  "version": "2.10.0",
   "description": "react-thumbnail-generator",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "rm -rf dist && rollup -c",
-    "storybook": "start-storybook -p 6006 -s public",
-    "build:storybook": "build-storybook",
+    "storybook": "storybook dev -p 6006 -s public",
+    "build:storybook": "storybook build",
     "deploy:storybook": "gh-pages -d storybook-static"
   },
   "repository": {
@@ -21,28 +21,26 @@
     "url": "https://github.com/ssi02014/react-thumbnail-generator.git/issues"
   },
   "homepage": "http://ssi02014.github.io/react-thumbnail-generator",
-  "dependencies": {},
   "devDependencies": {
-    "@babel/core": "^7.20.12",
-    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.18.6",
-    "@rollup/plugin-alias": "^4.0.3",
+    "@babel/core": "^7.22.1",
+    "@babel/preset-env": "^7.22.4",
+    "@babel/preset-react": "^7.22.3",
+    "@babel/preset-typescript": "^7.21.5",
+    "@rollup/plugin-alias": "^5.0.0",
     "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-commonjs": "^24.0.1",
-    "@rollup/plugin-node-resolve": "^15.0.1",
-    "@rollup/plugin-terser": "^0.4.0",
-    "@rollup/plugin-typescript": "^11.0.0",
-    "@storybook/addon-actions": "^6.5.16",
-    "@storybook/addon-essentials": "^6.5.16",
-    "@storybook/addon-interactions": "^6.5.16",
-    "@storybook/addon-links": "^6.5.16",
-    "@storybook/builder-webpack5": "^6.5.16",
-    "@storybook/manager-webpack5": "^6.5.16",
-    "@storybook/node-logger": "^6.5.16",
-    "@storybook/preset-create-react-app": "^4.1.2",
-    "@storybook/react": "^6.5.16",
-    "@storybook/testing-library": "^0.0.13",
+    "@rollup/plugin-commonjs": "^25.0.0",
+    "@rollup/plugin-node-resolve": "^15.1.0",
+    "@rollup/plugin-terser": "^0.4.3",
+    "@rollup/plugin-typescript": "^11.1.1",
+    "@storybook/addon-actions": "^7.0.18",
+    "@storybook/addon-essentials": "^7.0.18",
+    "@storybook/addon-interactions": "^7.0.18",
+    "@storybook/addon-links": "^7.0.18",
+    "@storybook/node-logger": "^7.0.18",
+    "@storybook/preset-create-react-app": "^7.0.18",
+    "@storybook/react": "^7.0.18",
+    "@storybook/react-webpack5": "^7.0.18",
+    "@storybook/testing-library": "^0.1.0",
     "@types/node": "^18.13.0",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
@@ -54,19 +52,20 @@
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.10",
+    "eslint-plugin-storybook": "^0.6.12",
     "eslint-webpack-plugin": "^4.0.0",
     "gh-pages": "^5.0.0",
     "prettier": "^2.8.4",
     "react": "^18.2.0",
     "react-color-palette": "^6.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "^5.0.1",
-    "rollup": "^3.17.2",
+    "rollup": "^3.23.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
+    "storybook": "^7.0.18",
     "styled-components": "^5.3.6",
     "tsconfig-paths-webpack-plugin": "^4.0.0",
-    "typescript": "^4.9.5"
+    "typescript": "^5.1.3"
   },
   "peerDependencies": {
     "react": ">=16.8.0",

src/stories/components/ThumbnailGenerator.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Story } from '@storybook/react/types-6-0';
+import { StoryFn } from '@storybook/react';
 import ThumbnailGenerator from '@lib/ThumbnailGenerator';
 import { Size } from '@utils/style';
 import { toggleButton } from '@assets/icons';
@@ -30,7 +30,7 @@ interface Props {
   isFullWidth?: boolean;
 }
 
-const Template: Story = ({
+const Template: StoryFn = ({
   modalPosition,
   iconPosition,
   iconSize,
@@ -48,12 +48,14 @@ const Template: Story = ({
   );
 };
 
-export const Default = Template.bind({});
+export const Default = {
+  render: Template,
 
-Default.args = {
-  iconSize: 'medium',
-  buttonIcon: <img src={toggleButton} width={40} height={40} />,
-  modalPosition: 'right',
-  iconPosition: [0, 20, 20, 0],
-  isFullWidth: false,
+  args: {
+    iconSize: 'medium',
+    buttonIcon: <img src={toggleButton} width={40} height={40} />,
+    modalPosition: 'right',
+    iconPosition: [0, 20, 20, 0],
+    isFullWidth: false,
+  },
 };