make packages peerDep on storybook package instead of `@storybook/c…

…ore`

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

@@ -95,4 +95,4 @@
       "react-native"
     ]
   }
-}
+}

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": "workspace:^",
-    "@storybook/test": "workspace:*"
+    "@storybook/test": "workspace:*",
+    "storybook": "workspace:^"
   },
   "publishConfig": {
     "access": "public"
@@ -108,4 +108,4 @@
     ],
     "icon": "https://user-images.githubusercontent.com/263385/101991666-479cc600-3c7c-11eb-837b-be4e5ffa1bb8.png"
   }
-}
+}

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

@@ -91,4 +91,4 @@
       "react-native"
     ]
   }
-}
+}

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';

code/addons/backgrounds/src/decorators/withBackground.ts

@@ -1,9 +1,5 @@
-import { useMemo, useEffect } from '@storybook/core/preview-api';
-import type {
-  Renderer,
-  PartialStoryFn as StoryFunction,
-  StoryContext,
-} from '@storybook/core/types';
+import { useMemo, useEffect } from 'storybook/preview-api';
+import type { Renderer, PartialStoryFn as StoryFunction, StoryContext } from 'storybook/types';
 
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
 import {