fix(mocks): Storybook 8 compatibility

Author: bashmish

.changeset/thin-wombats-nail.md

@@ -0,0 +1,5 @@
+---
+'@web/mocks': minor
+---
+
+fix Storybook 8 compatibility

packages/mocks/storybook/addon.js

@@ -2,8 +2,8 @@
 
 import { createAddon } from '@web/storybook-prebuilt/create-addon.js';
 import { React } from '@web/storybook-prebuilt/manager.js';
-import { addons } from '@web/storybook-prebuilt/addons.js';
+import { addons, types } from '@web/storybook-prebuilt/addons.js';
 import { registerAddon } from './addon/register-addon.js';
 
 // Storybook 6
-registerAddon(addons, React, createAddon);
+registerAddon(addons, types, React, createAddon);

packages/mocks/storybook/addon/manager.js

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

packages/mocks/storybook/addon/register-addon.js

@@ -3,7 +3,7 @@
 import { LitElement, html, css } from 'lit';
 import { when } from 'lit/directives/when.js';
 
-export function registerAddon(addons, React, createAddon) {
+export function registerAddon(addons, types, React, createAddon) {
   const { createElement } = React;
 
   class MocksAddonElement extends LitElement {
@@ -242,7 +242,8 @@ export function registerAddon(addons, React, createAddon) {
   });
 
   addons.register('web/mocks', api => {
-    addons.addPanel('web/mocks/panel', {
+    addons.add('web/mocks/panel', {
+      type: types.PANEL,
       title: 'Mocks',
       paramKey: 'mocks',
       render: ({ active }) => createElement(MocksAddon, { api, active }),

packages/storybook-framework-web-components/package.json

@@ -28,7 +28,7 @@
   },
   "scripts": {
     "build": "tsc",
-    "test": "npm run test:build && npm run test:ui:build && npm run test:ui:runtime",
+    "test": "npm run test:build && npm run test:ui:runtime",
     "test:build": "storybook build -c ./tests/fixtures/all-in-one/.storybook -o ./tests/fixtures/all-in-one/storybook-build",
     "test:start:build": "wds -r ./tests/fixtures/all-in-one/storybook-build -p 3000",
     "test:start:runtime": "storybook dev -c ./tests/fixtures/all-in-one/.storybook -p 3000 --no-open",

packages/storybook-framework-web-components/tests/all-in-one.spec.js

@@ -79,6 +79,12 @@ test.describe('all in one', () => {
       await panelButton.click();
       await expect(panelButton).toHaveClass(/tabbutton-active/);
     });
+
+    test('renders @web/mocks/storybook-addon panel', async () => {
+      const panelButton = sbPage.panelButtonByText('Mocks');
+      await panelButton.click();
+      await expect(panelButton).toHaveClass(/tabbutton-active/);
+    });
   });
 
   test.describe('docs', () => {

packages/storybook-framework-web-components/tests/fixtures/all-in-one/.storybook/main.js

@@ -8,6 +8,7 @@ const config = {
     '@storybook/addon-links',
     '@storybook/addon-interactions',
     '@storybook/addon-a11y',
+    '@web/mocks/storybook-addon',
   ],
   framework: {
     name: '@web/storybook-framework-web-components',