Updates to storybook v7

example/.storybook/main.js

@@ -1,4 +1,8 @@
 module.exports = {
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
   stories: [
     "../stories/docs/*.stories.(js|mdx)",
     "../stories/components/websites/*.stories.(js|mdx)",
@@ -16,11 +20,6 @@ module.exports = {
     "@storybook/addon-viewport",
     {
       name: "@storybook/addon-docs",
-      options: {
-        sourceLoaderOptions: {
-          injectStoryParameters: false,
-        },
-      },
     },
     "@storybook/addon-controls",
     "@storybook/addon-backgrounds",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "storybook-amp",
-  "version": "2.0.9",
+  "version": "3.0.0",
   "description": "Storybook addon for AMP Html. Allows to display in your stories AMP Html components generated with React.",
   "author": {
     "name": "onWidget",
@@ -40,41 +40,50 @@
     "watch": "npm run clean && babel ./src/render-fn --ignore '**/*.test.js' --out-dir ./render-fn && babel --watch ./src --ignore '**/*.test.js','src/render-fn' --out-dir ./dist",
     "clean": "rm -rf dist render-fn",
     "prepublish": "npm run build",
-    "storybook": "start-storybook -c ./example/.storybook -s example/public",
-    "build-storybook": "build-storybook -c ./example/.storybook -s example/public"
+    "storybook": "sb dev -c ./example/.storybook -s example/public",
+    "build-storybook": "sb build -c ./example/.storybook -s example/public"
   },
   "dependencies": {
+<<<<<<< HEAD
     "@storybook/addons": "^6.0.0",
     "@storybook/components": "^6.0.0",
     "@storybook/core-events": "^6.0.0",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
+=======
+>>>>>>> b48c8d5 (Update to storybook v7)
     "global": "^4.4.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.13.16",
-    "@babel/core": "^7.14.2",
-    "@babel/plugin-proposal-class-properties": "^7.3.0",
-    "@babel/preset-env": "^7.14.2",
-    "@babel/preset-react": "^7.13.13",
-    "@emotion/cache": "^11.7.1",
-    "@emotion/react": "^11.9.0",
-    "@emotion/server": "^11.4.0",
-    "@emotion/styled": "^11.8.1",
-    "@storybook/addon-backgrounds": "^6.0.0",
-    "@storybook/addon-controls": "^6.0.0",
-    "@storybook/addon-docs": "^6.0.0",
-    "@storybook/addon-links": "^6.0.0",
-    "@storybook/addon-storysource": "^6.0.0",
-    "@storybook/addon-viewport": "^6.0.0",
-    "@storybook/react": "^6.0.0",
+    "@babel/cli": "^7.19.3",
+    "@babel/core": "^7.20.5",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@emotion/cache": "^11.10.5",
+    "@emotion/react": "^11.10.5",
+    "@emotion/server": "^11.10.0",
+    "@emotion/styled": "^11.10.5",
+    "@storybook/addon-backgrounds": "^7.0.0",
+    "@storybook/addon-controls": "^7.0.0",
+    "@storybook/addon-docs": "^7.0.0",
+    "@storybook/addon-links": "^7.0.0",
+    "@storybook/addon-storysource": "^7.0.0",
+    "@storybook/addon-viewport": "^7.0.0",
+    "@storybook/cli": "^7.0.0",
+    "@storybook/react": "^7.0.0",
+    "@storybook/react-webpack5": "^7.0.0",
     "babel-loader": "^8.2.2",
-    "storybook-css-modules": "^1.0.0",
-    "styled-components": "^5.3.5",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "storybook-css-modules": "^1.0.8",
+    "styled-components": "^5.3.6"
   },
   "peerDependencies": {
+    "@storybook/addons": "^7.0.0",
+    "@storybook/components": "^7.0.0",
+    "@storybook/core-events": "^7.0.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },

src/components/PanelContent.js

@@ -12,10 +12,6 @@ import getBase64ForAMPValidator from "../utils/getBase64ForAMPValidator";
 import getHtmlFormatForType from "../utils/getHtmlFormatForType"
 import getAmpLabelForType from "../utils/getAmpLabelForType"
 
-const ValidateButton = styled(Button)(({ theme }) => ({
-  background: theme.barBg,
-}));
-
 const Tooltip = ({ onHide }) => (
   <TooltipMessage
     title="Use Online Validator"
@@ -53,14 +49,15 @@ export const PanelContent = ({ data }) => {
           {/* <Badge status="positive" style={{ marginRight: 8}}>PASS</Badge> */}
           {html && (
             <WithTooltip placement="auto" trigger="hover" tooltip={<Tooltip />}>
-              <ValidateButton
+              <Button
                 small
                 outline
                 type="button"
                 onClick={(e) => handleValidate(e)}
+                // style={{ backgroundColor: theme.barBg }}
               >
                 Validate
-              </ValidateButton>
+              </Button>
             </WithTooltip>
           )}
         </div>

src/withAmpDecorator.js

@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOMServer from "react-dom/server";
 
-import addonAPI, { makeDecorator } from "@storybook/addons";
+import { addons as addonAPI, makeDecorator } from "@storybook/addons";
 
 import { getTemplateFn } from "./templates";
 import getBlodURL from "./utils/getBlodURL";
@@ -50,7 +50,7 @@ const getAmpHTML = (
 };
 /* *************** */
 
-const decorator = (storyFn, context = {}, { parameters }) => {
+const decorator = (storyFn, context = {}, { parameters = {} }) => {
   const { title } = context;
 
   const {