Fallback to use corresponding new packages for storybook version 8

examples/v8-react18/package.json

@@ -34,9 +34,10 @@
     "@storybook/addon-actions": "^8.0.0",
     "@storybook/addon-essentials": "^8.0.0",
     "@storybook/addon-links": "^8.0.0",
-    "@storybook/addons": "^7.6.17",
     "@storybook/cli": "^8.0.0",
+    "@storybook/manager-api": "^8.0.0",
     "@storybook/preset-create-react-app": "^8.0.0",
+    "@storybook/preview-api": "^8.0.0",
     "@storybook/react": "^8.0.0",
     "@storybook/react-webpack5": "^8.0.0",
     "@testing-library/react": "^14.0.0",

packages/storycap/decl/storybook.d.ts

@@ -1,6 +1,40 @@
-declare module '@storybook/addons' {
+declare module '@storybook/manager-api' {
   import { EventEmitter } from 'events';
+  export interface API {
+    raw?: () => { id: string; kind: string; name: string }[];
+    getStorybook(): { kind: string; stories: { name: string }[] }[];
+  }
+  export interface StoryKind {
+    kind: string;
+    stories: string[];
+  }
+  export class Channel extends EventEmitter {
+    on(name: 'setStories', listener: (event: { stories: StoryKind[] }) => void): this;
+    once(name: 'setStories', listener: (event: { stories: StoryKind[] }) => void): this;
+  }
+  export interface Addons {
+    register(name: string, callback: (api: API) => void): void;
+    getChannel(): Channel;
+  }
+
+  export const addons: Addons;
+}
+declare module '@storybook/preview-api' {
+  interface MakeDecorator {
+    (options: {
+      name: string;
+      parameterName: string;
+      skipIfNoParametersOrOptions: boolean;
+      allowDeprecatedUsage: boolean;
+      wrapper: (getStory: any, context: any, args: { parameters: any; options: any }) => any;
+    }): Function;
+  }
 
+  export const makeDecorator: MakeDecorator;
+}
+declare module '@storybook/addons' {
+  // eslint-disable-next-line no-duplicate-imports
+  import { EventEmitter } from 'events';
   export interface API {
     raw?: () => { id: string; kind: string; name: string }[];
     getStorybook(): { kind: string; stories: { name: string }[] }[];

packages/storycap/src/client/register.ts

@@ -1,7 +1,16 @@
-import { addons } from '@storybook/addons';
+import type { Addons } from '@storybook/addons';
+
+let addons: Addons | undefined;
+try {
+  addons = require('@storybook/addons').addons;
+} catch {}
+try {
+  addons = require('@storybook/manager-api').addons;
+} catch {}
 
 (window as any).__STORYCAP_MANAGED_MODE_REGISTERED__ = true;
 
-addons.register('storycap', () => {
-  // nothing to do
-});
+addons &&
+  addons.register('storycap', () => {
+    // nothing to do
+  });

packages/storycap/src/client/with-screenshot.ts

@@ -1,4 +1,11 @@
-import { StoryKind, makeDecorator } from '@storybook/addons';
+import type { StoryKind, MakeDecorator } from '@storybook/addons';
+let makeDecorator: MakeDecorator | undefined;
+try {
+  makeDecorator = require('@storybook/addons').makeDecorator;
+} catch {}
+try {
+  makeDecorator = require('@storybook/preview-api').makeDecorator;
+} catch {}
 
 import { ScreenshotOptions } from '../shared/types';
 import { triggerScreenshot } from './trigger-screenshot';