V8 migration

.storybook/Button/Button.stories.jsx

@@ -23,17 +23,17 @@ export const ButtonMultiple = () => (
 
 ButtonNormal.parameters = {
     zeplinLink:
-        "zpl://components?pid=5ecff3a2d8a8ab2a61937a66&coids=6050f561b398fd6ec62563ff",
+        "https://app.zeplin.io/project/62380c9fa84e9916db1710b0/styleguide/components?coid=63345e42ecd1379acf991123",
 };
 
 ButtonPressed.parameters = {
     zeplinLink:
-        "zpl://components?pid=5ecff3a2d8a8ab2a61937a66&coids=6050f561afc34742f62d40b9",
+        "https://app.zeplin.io/project/62380c9fa84e9916db1710b0/styleguide/components?coid=63345e4297f930b58e7a3a8d",
 };
 
 ButtonDisabled.parameters = {
     zeplinLink:
-        "zpl://components?pid=5ecff3a2d8a8ab2a61937a66&coids=6050f5610d8b6e6cd0c1f8b2",
+        "https://app.zeplin.io/project/62380c9fa84e9916db1710b0/styleguide/components?coid=63345e42ecd1379acf991123",
 };
 
 ButtonMultiple.parameters = {

.storybook/main.js

@@ -9,5 +9,12 @@ if(!IS_PRODUCTION) {
 
 module.exports = {
     stories,
-    addons: ["../dist/register"],
+    addons: ["../dist/register", "@storybook/addon-webpack5-compiler-babel"],
+    framework: "@storybook/react-webpack5",
+    babel: async (options) => {
+        return {
+            ...options,
+            presets: ['@babel/preset-react', '@babel/preset-typescript'],
+        };
+    },
 };

.storybook/preview.js

@@ -1,9 +1,12 @@
 import React from "react";
-import { addDecorator } from '@storybook/react';
-import { ThemeProvider, themes, convert } from '@storybook/theming';
+import { ThemeProvider, convert, themes } from '@storybook/theming';
 
-const withTheme = story => <ThemeProvider theme={convert(themes.normal)}>
-  {story()}
-</ThemeProvider>
+const withTheme = (StoryFn) => {
+    return (
+        <ThemeProvider theme={convert(themes.light)}>
+            <StoryFn />
+        </ThemeProvider>
+    )
+}
 
-addDecorator(withTheme)
+export const decorators = [withTheme]

README.md

@@ -28,19 +28,25 @@
 
 ## Requirements
 
--   Storybook@>=5.0.0
-
-This addon should work with any framework. If you find a case that the addon does not work, please open an issue.
+Storybook Zeplin addon v3 is compatible with Storybook 8 and Node Version >18. 
+For Storybook versions 5-7, please use Storybook Zeplin addon v2.0.3
 
 ## Getting started
 
 ### 1. Install
 
+For using Storybook 8:
 ```sh
 npm install --save-dev storybook-zeplin
 # yarn add -D storybook-zeplin
 ```
 
+For using Storybook version 5-7:
+```sh
+npm install --save-dev [email protected]
+# yarn add -D [email protected]
+```
+
 ### 2. Register the addon in `main.js`
 
 ```js
@@ -50,7 +56,7 @@ module.exports = {
 };
 ```
 
-If you're using [email protected];
+If you're using [email protected]:
 
 ```js
 // .storybook/addons.js