CPC: Use storybook package as the peerDep

.github/workflows/canary-release-pr.yml

@@ -105,7 +105,7 @@ jobs:
 
             | | |
             | --- | --- |
-            | **Published version** | [`${{ steps.version.outputs.next-version }}`](https://npmjs.com/package/@storybook/cli/v/${{ steps.version.outputs.next-version }}) |
+            | **Published version** | [`${{ steps.version.outputs.next-version }}`](https://npmjs.com/package/storybook/v/${{ steps.version.outputs.next-version }}) |
             | **Triggered by** | @${{ github.triggering_actor }} |
             | **Repository** | [${{ steps.info.outputs.repository }}](https://github.com/${{ steps.info.outputs.repository }}) |
             | **Branch** | [`${{ steps.info.outputs.branch }}`](https://github.com/${{ steps.info.outputs.repository }}/tree/${{ steps.info.outputs.branch }}) |

code/.eslintrc.js

@@ -23,6 +23,7 @@ module.exports = {
   },
   plugins: ['local-rules'],
   rules: {
+    'import/no-unresolved': 'off', // covered by typescript
     'eslint-comments/disable-enable-pair': ['error', { allowWholeFile: true }],
     'eslint-comments/no-unused-disable': 'error',
     'react-hooks/rules-of-hooks': 'off',

code/addons/a11y/package.json

@@ -71,7 +71,7 @@
     "typescript": "^5.3.2"
   },
   "peerDependencies": {
-    "@storybook/core": "workspace:^"
+    "storybook": "workspace:^"
   },
   "publishConfig": {
     "access": "public"

code/addons/a11y/src/a11yRunner.test.ts

@@ -1,9 +1,9 @@
 import type { Mock } from 'vitest';
 import { describe, beforeEach, it, expect, vi } from 'vitest';
-import { addons } from '@storybook/core/preview-api';
+import { addons } from 'storybook/preview-api';
 import { EVENTS } from './constants';
 
-vi.mock('@storybook/core/preview-api');
+vi.mock('storybook/preview-api');
 const mockedAddons = vi.mocked(addons);
 
 describe('a11yRunner', () => {

code/addons/a11y/src/a11yRunner.ts

@@ -1,5 +1,5 @@
 import { global } from '@storybook/global';
-import { addons } from '@storybook/core/preview-api';
+import { addons } from 'storybook/preview-api';
 import { EVENTS } from './constants';
 import type { A11yParameters } from './params';
 

code/addons/a11y/src/components/A11YPanel.test.tsx

@@ -4,13 +4,13 @@ import { describe, beforeEach, afterEach, it, expect, vi } from 'vitest';
 import React from 'react';
 import { render, waitFor, fireEvent, act, cleanup } from '@testing-library/react';
 
-import { ThemeProvider, themes, convert } from '@storybook/core/theming';
-import * as api from '@storybook/core/manager-api';
+import { ThemeProvider, themes, convert } from 'storybook/theming';
+import * as api from 'storybook/manager-api';
 
 import { A11YPanel } from './A11YPanel';
 import { EVENTS } from '../constants';
 
-vi.mock('@storybook/core/manager-api');
+vi.mock('storybook/manager-api');
 
 global.ResizeObserver = require('resize-observer-polyfill');
 

code/addons/a11y/src/components/A11YPanel.tsx

@@ -1,8 +1,8 @@
 import React, { useCallback, useMemo, useState } from 'react';
 
-import { styled } from '@storybook/core/theming';
+import { styled } from 'storybook/theming';
 
-import { ActionBar, ScrollArea } from '@storybook/core/components';
+import { ActionBar, ScrollArea } from 'storybook/components';
 import { SyncIcon, CheckIcon } from '@storybook/icons';
 
 import type { AxeResults } from 'axe-core';
@@ -11,7 +11,7 @@ import {
   useParameter,
   useStorybookApi,
   useStorybookState,
-} from '@storybook/core/manager-api';
+} from 'storybook/manager-api';
 
 import { Report } from './Report';
 

code/addons/a11y/src/components/A11yContext.test.tsx

@@ -4,14 +4,14 @@ import { describe, beforeEach, afterEach, it, expect, vi } from 'vitest';
 import * as React from 'react';
 import type { AxeResults } from 'axe-core';
 import { render, act, cleanup } from '@testing-library/react';
-import * as api from '@storybook/core/manager-api';
-import { STORY_CHANGED } from '@storybook/core/core-events';
+import * as api from 'storybook/manager-api';
+import { STORY_CHANGED } from 'storybook/core-events';
 import { HIGHLIGHT } from '@storybook/addon-highlight';
 
 import { A11yContextProvider, useA11yContext } from './A11yContext';
 import { EVENTS } from '../constants';
 
-vi.mock('@storybook/core/manager-api');
+vi.mock('storybook/manager-api');
 const mockedApi = vi.mocked(api);
 
 const storyId = 'jest';

code/addons/a11y/src/components/A11yContext.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { themes, convert } from '@storybook/core/theming';
+import { themes, convert } from 'storybook/theming';
 import type { Result } from 'axe-core';
-import { useChannel, useAddonState, useStorybookApi } from '@storybook/core/manager-api';
-import { STORY_CHANGED, STORY_RENDERED } from '@storybook/core/core-events';
+import { useChannel, useAddonState, useStorybookApi } from 'storybook/manager-api';
+import { STORY_CHANGED, STORY_RENDERED } from 'storybook/core-events';
 import { HIGHLIGHT } from '@storybook/addon-highlight';
 import { ADDON_ID, EVENTS } from '../constants';
 

code/addons/a11y/src/components/Report/Elements.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { styled } from '@storybook/core/theming';
+import { styled } from 'storybook/theming';
 
 import type { NodeResult } from 'axe-core';
 import { Rules } from './Rules';

code/addons/a11y/src/components/Report/HighlightToggle.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { styled } from '@storybook/core/theming';
+import { styled } from 'storybook/theming';
 
 import type { NodeResult } from 'axe-core';
 import { useA11yContext } from '../A11yContext';

code/addons/a11y/src/components/Report/Info.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { styled } from '@storybook/core/theming';
+import { styled } from 'storybook/theming';
 import type { Result } from 'axe-core';
 
 const Wrapper = styled.div({

code/addons/a11y/src/components/Report/Item.tsx

@@ -1,6 +1,6 @@
 import React, { Fragment, useState } from 'react';
 
-import { styled } from '@storybook/core/theming';
+import { styled } from 'storybook/theming';
 
 import type { Result } from 'axe-core';
 import { Info } from './Info';

code/addons/a11y/src/components/Report/Rules.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
-import { styled } from '@storybook/core/theming';
-import { Badge } from '@storybook/core/components';
+import { styled } from 'storybook/theming';
+import { Badge } from 'storybook/components';
 import type { CheckResult } from 'axe-core';
 import { useResizeDetector } from 'react-resize-detector';
 

code/addons/a11y/src/components/Report/Tags.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { styled } from '@storybook/core/theming';
+import { styled } from 'storybook/theming';
 import type { TagValue } from 'axe-core';
 
 const Wrapper = styled.div({

code/addons/a11y/src/components/Report/index.tsx

@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 import React, { Fragment } from 'react';
-import { EmptyTabContent } from '@storybook/core/components';
+import { EmptyTabContent } from 'storybook/components';
 import type { Result } from 'axe-core';
 
 import { Item } from './Item';

code/addons/a11y/src/components/Tabs.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { styled } from '@storybook/core/theming';
+import { styled } from 'storybook/theming';
 import type { NodeResult, Result } from 'axe-core';
 import { useResizeDetector } from 'react-resize-detector';
 import HighlightToggle from './Report/HighlightToggle';

code/addons/a11y/src/components/VisionSimulator.test.tsx

@@ -5,7 +5,7 @@ import { describe, it, expect } from 'vitest';
 import React from 'react';
 import { render, fireEvent, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { ThemeProvider, themes, convert } from '@storybook/core/theming';
+import { ThemeProvider, themes, convert } from 'storybook/theming';
 import { VisionSimulator, baseList } from './VisionSimulator';
 
 const getOptionByNameAndPercentage = (option: string, percentage?: number) =>

code/addons/a11y/src/components/VisionSimulator.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 import React, { useState } from 'react';
-import { Global, styled } from '@storybook/core/theming';
-import { IconButton, WithTooltip, TooltipLinkList } from '@storybook/core/components';
+import { Global, styled } from 'storybook/theming';
+import { IconButton, WithTooltip, TooltipLinkList } from 'storybook/components';
 
 import { AccessibilityIcon } from '@storybook/icons';
 import { Filters } from './ColorFilters';

code/addons/a11y/src/manager.test.tsx

@@ -1,12 +1,12 @@
 // @vitest-environment happy-dom
 
 import { describe, it, expect, vi } from 'vitest';
-import * as api from '@storybook/core/manager-api';
-import type { Addon_BaseType } from '@storybook/core/types';
+import * as api from 'storybook/manager-api';
+import type { Addon_BaseType } from 'storybook/types';
 import { PANEL_ID } from './constants';
 import './manager';
 
-vi.mock('@storybook/core/manager-api');
+vi.mock('storybook/manager-api');
 const mockedApi = vi.mocked<api.API>(api as any);
 mockedApi.useAddonState = vi.fn();
 const mockedAddons = vi.mocked(api.addons);

code/addons/a11y/src/manager.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { addons, types, useAddonState } from '@storybook/core/manager-api';
-import { Badge, Spaced } from '@storybook/core/components';
+import { addons, types, useAddonState } from 'storybook/manager-api';
+import { Badge, Spaced } from 'storybook/components';
 import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';
 import { VisionSimulator } from './components/VisionSimulator';
 import { A11YPanel } from './components/A11YPanel';

code/addons/actions/package.json

@@ -82,8 +82,8 @@
     "typescript": "^5.3.2"
   },
   "peerDependencies": {
-    "@storybook/core": "workspace:^",
-    "@storybook/test": "workspace:*"
+    "@storybook/test": "workspace:*",
+    "storybook": "workspace:^"
   },
   "publishConfig": {
     "access": "public"

code/addons/actions/src/addArgs.ts

@@ -1,4 +1,4 @@
-import type { ArgsEnhancer } from '@storybook/core/types';
+import type { ArgsEnhancer } from 'storybook/types';
 import { addActionsFromArgTypes, inferActionsFromArgTypesRegex } from './addArgsHelpers';
 
 export const argsEnhancers: ArgsEnhancer[] = [

code/addons/actions/src/addArgsHelpers.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import type { StoryContext } from '@storybook/core/types';
+import type { StoryContext } from 'storybook/types';
 import { inferActionsFromArgTypesRegex, addActionsFromArgTypes } from './addArgsHelpers';
 
 describe('actions parameter enhancers', () => {

code/addons/actions/src/addArgsHelpers.ts

@@ -1,4 +1,4 @@
-import type { Args, Renderer, ArgsEnhancer } from '@storybook/core/types';
+import type { Args, Renderer, ArgsEnhancer } from 'storybook/types';
 import { action } from './runtime/action';
 
 // interface ActionsParameter {

code/addons/actions/src/components/ActionLogger/index.tsx

@@ -1,10 +1,10 @@
 import type { ElementRef, ReactNode } from 'react';
 import React, { forwardRef, Fragment, useEffect, useRef } from 'react';
-import type { Theme } from '@storybook/core/theming';
-import { styled, withTheme } from '@storybook/core/theming';
+import type { Theme } from 'storybook/theming';
+import { styled, withTheme } from 'storybook/theming';
 
 import { Inspector } from 'react-inspector';
-import { ActionBar, ScrollArea } from '@storybook/core/components';
+import { ActionBar, ScrollArea } from 'storybook/components';
 
 import { Action, Counter, InspectorContainer } from './style';
 import type { ActionDisplay } from '../../models';

code/addons/actions/src/components/ActionLogger/style.tsx

@@ -1,4 +1,4 @@
-import { styled } from '@storybook/core/theming';
+import { styled } from 'storybook/theming';
 import { opacify } from 'polished';
 
 export const Action = styled.div({

code/addons/actions/src/containers/ActionLogger/index.tsx

@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import { dequal as deepEqual } from 'dequal';
 
-import type { API } from '@storybook/core/manager-api';
-import { STORY_CHANGED } from '@storybook/core/core-events';
+import type { API } from 'storybook/manager-api';
+import { STORY_CHANGED } from 'storybook/core-events';
 
 import { ActionLogger as ActionLoggerComponent } from '../../components/ActionLogger';
 import type { ActionDisplay } from '../../models';

code/addons/actions/src/decorator.ts

@@ -1,6 +1,6 @@
 import { global } from '@storybook/global';
-import { useEffect, makeDecorator } from '@storybook/core/preview-api';
-import type { PartialStoryFn, Renderer } from '@storybook/core/types';
+import { useEffect, makeDecorator } from 'storybook/preview-api';
+import type { PartialStoryFn, Renderer } from 'storybook/types';
 import { actions } from './runtime/actions';
 
 import { PARAM_KEY } from './constants';

code/addons/actions/src/loaders.ts

@@ -1,5 +1,5 @@
 /* eslint-disable no-underscore-dangle */
-import type { LoaderFunction } from '@storybook/core/types';
+import type { LoaderFunction } from 'storybook/types';
 import { global } from '@storybook/global';
 import type { onMockCall as onMockCallType } from '@storybook/test';
 import { action } from './runtime';

code/addons/actions/src/manager.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { addons, types, useAddonState, useChannel } from '@storybook/core/manager-api';
-import { STORY_CHANGED } from '@storybook/core/core-events';
-import { Badge, Spaced } from '@storybook/core/components';
+import { addons, types, useAddonState, useChannel } from 'storybook/manager-api';
+import { STORY_CHANGED } from 'storybook/core-events';
+import { Badge, Spaced } from 'storybook/components';
 import ActionLogger from './containers/ActionLogger';
 import { ADDON_ID, CLEAR_ID, EVENT_ID, PANEL_ID, PARAM_KEY } from './constants';
 

code/addons/actions/src/runtime/__tests__/action.test.js

@@ -1,8 +1,8 @@
 import { describe, it, expect, vi } from 'vitest';
-import { addons } from '@storybook/core/preview-api';
+import { addons } from 'storybook/preview-api';
 import { action, configureActions } from '../..';
 
-vi.mock('@storybook/core/preview-api');
+vi.mock('storybook/preview-api');
 
 const createChannel = () => {
   const channel = { emit: vi.fn() };

code/addons/actions/src/runtime/__tests__/actions.test.js

@@ -1,8 +1,8 @@
 import { describe, it, expect, vi } from 'vitest';
-import { addons } from '@storybook/core/preview-api';
+import { addons } from 'storybook/preview-api';
 import { actions } from '../..';
 
-vi.mock('@storybook/core/preview-api');
+vi.mock('storybook/preview-api');
 
 const createChannel = () => {
   const channel = { emit: vi.fn() };

code/addons/actions/src/runtime/action.ts

@@ -1,9 +1,9 @@
 import { v4 as uuidv4 } from 'uuid';
-import type { PreviewWeb } from '@storybook/core/preview-api';
-import { addons } from '@storybook/core/preview-api';
-import type { Renderer } from '@storybook/core/types';
+import type { PreviewWeb } from 'storybook/preview-api';
+import { addons } from 'storybook/preview-api';
+import type { Renderer } from 'storybook/types';
 import { global } from '@storybook/global';
-import { ImplicitActionsDuringRendering } from '@storybook/core/preview-errors';
+import { ImplicitActionsDuringRendering } from 'storybook/preview-errors';
 import { EVENT_ID } from '../constants';
 import type { ActionDisplay, ActionOptions, HandlerFunction } from '../models';
 import { config } from './configureActions';

code/addons/actions/src/typings.d.ts

@@ -1 +1 @@
-declare var FEATURES: import('@storybook/core/types').StorybookConfigRaw['features'];
+declare var FEATURES: import('storybook/types').StorybookConfigRaw['features'];

code/addons/backgrounds/package.json

@@ -67,7 +67,7 @@
     "typescript": "^5.3.2"
   },
   "peerDependencies": {
-    "@storybook/core": "workspace:^"
+    "storybook": "workspace:^"
   },
   "publishConfig": {
     "access": "public"

code/addons/backgrounds/src/components/ColorIcon.tsx

@@ -1,4 +1,4 @@
-import { styled } from '@storybook/core/theming';
+import { styled } from 'storybook/theming';
 
 export const ColorIcon = styled.span(
   ({ background }: { background: string }) => ({

code/addons/backgrounds/src/containers/BackgroundSelector.tsx

@@ -2,9 +2,9 @@ import type { FC } from 'react';
 import React, { useState, Fragment, useCallback, useMemo, memo } from 'react';
 import memoize from 'memoizerific';
 
-import { useParameter, useGlobals } from '@storybook/core/manager-api';
-import { logger } from '@storybook/core/client-logger';
-import { IconButton, WithTooltip, TooltipLinkList } from '@storybook/core/components';
+import { useParameter, useGlobals } from 'storybook/manager-api';
+import { logger } from 'storybook/client-logger';
+import { IconButton, WithTooltip, TooltipLinkList } from 'storybook/components';
 
 import { PhotoIcon } from '@storybook/icons';
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';

code/addons/backgrounds/src/containers/GridSelector.tsx

@@ -1,8 +1,8 @@
 import type { FC } from 'react';
 import React, { memo } from 'react';
 
-import { useGlobals, useParameter } from '@storybook/core/manager-api';
-import { IconButton } from '@storybook/core/components';
+import { useGlobals, useParameter } from 'storybook/manager-api';
+import { IconButton } from 'storybook/components';
 
 import { GridIcon } from '@storybook/icons';
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';