add backwards compatible support for Storybook 8 in utils and mocks

Author: bashmish

.changeset/beige-pugs-end.md

@@ -0,0 +1,6 @@
+---
+'@web/storybook-utils': minor
+'@web/mocks': minor
+---
+
+add backwards compatible support for Storybook 8

package-lock.json

@@ -175,7 +175,7 @@ mockRollupPlugin({
 
 This can be used to avoid CORS issues when deploying your Storybooks.
 
-In the Storybook 7+ (@web/storybook-builder) you can achieve the same by using native Storybook API [previewHead](https://storybook.js.org/docs/api/main-config-preview-head):
+In the Storybook 7+ (@web/storybook-builder) you can achieve the same by using native Storybook API [previewHead](https://storybook.js.org/docs/api/main-config/main-config-preview-head):
 
 ```js
 // .storybook/main.js

packages/mocks/README.md

@@ -63,9 +63,11 @@
     "mocks",
     "msw"
   ],
+  "peerDependencies": {
+    "@storybook/manager-api": "^7.0.0 || ^8.0.0",
+    "@storybook/preview-api": "^7.0.0 || ^8.0.0"
+  },
   "dependencies": {
-    "@storybook/manager-api": "^8.5.0",
-    "@storybook/preview-api": "^8.5.0",
     "@web/storybook-prebuilt": "^0.1.37",
     "@web/storybook-utils": "^1.0.0",
     "lit": "^2.7.5 || ^3.0.0",

packages/mocks/package.json

@@ -3,7 +3,7 @@
 import { addons, makeDecorator } from '@storybook/preview-api';
 import { createDecorator } from './create-decorator.js';
 
-// Storybook 7
+// Storybook 7+
 /**
  * @type {ReturnType<typeof makeDecorator>}
  */

packages/mocks/storybook/addon/decorator.js

@@ -5,5 +5,5 @@ import React from 'react';
 import { addons } from '@storybook/manager-api';
 import { registerAddon } from './register-addon.js';
 
-// Storybook 7
+// Storybook 7+
 registerAddon(addons, React, createAddon);

packages/mocks/storybook/addon/manager.js

@@ -40,11 +40,9 @@
     "utils"
   ],
   "peerDependencies": {
+    "@storybook/core-events": "^7.0.0 || ^8.0.0",
     "react": "^18.0.0"
   },
-  "dependencies": {
-    "@storybook/core-events": "^8.5.0"
-  },
   "devDependencies": {
     "react": "^18.0.0"
   }

packages/storybook-utils/package.json

@@ -1,6 +1,8 @@
 import { useEffect, useState } from 'react';
 
 /**
+ * Utility for Storybook 7 to allow asyng loading in MDX.
+ * @deprecated in Storybook 8 use MDX3 native await https://mdxjs.com/blog/v3/#await-in-mdx
  * @param {{ url: string, render: (content: string) => any }} props
  */
 export const MDXFileLoader = ({ url, render }) => {