Core: Re-Export renderers from frameworks

code/.storybook/bench.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react-vite';
 
 // @ts-expect-error - TS doesn't know about import.meta.glob from Vite
 const allMetafiles = import.meta.glob([

code/.storybook/preview.tsx

@@ -16,8 +16,8 @@ import {
 
 import { DocsContext } from '@storybook/blocks';
 import { global } from '@storybook/global';
-import type { Decorator, Loader, ReactRenderer } from '@storybook/react';
 
+import type { Decorator, Loader, ReactRenderer } from '@storybook/react-vite';
 // TODO add empty preview
 // import * as storysource from '@storybook/addon-storysource';
 // import * as designs from '@storybook/addon-designs/preview';

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { ManagerContext } from 'storybook/internal/manager-api';
 import { ThemeProvider, convert, themes } from 'storybook/internal/theming';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import type axe from 'axe-core';
 import { fn } from 'storybook/test';

code/addons/a11y/src/components/TestDiscrepancyMessage.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { ManagerContext } from 'storybook/internal/manager-api';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { fn } from 'storybook/test';
 

code/addons/controls/src/SaveStory.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { action } from '@storybook/addon-actions';
 

code/addons/interactions/src/components/Interaction.stories.tsx

@@ -1,6 +1,6 @@
 import { CallStates } from 'storybook/internal/instrumenter';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { expect, userEvent, within } from 'storybook/test';
 

code/addons/interactions/src/components/InteractionsPanel.stories.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { CallStates } from 'storybook/internal/instrumenter';
 import { styled } from 'storybook/internal/theming';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { expect, userEvent, waitFor, within } from 'storybook/test';
 

code/addons/onboarding/package.json

@@ -48,7 +48,6 @@
     "@neoconfetti/react": "^1.0.0",
     "@radix-ui/react-dialog": "^1.0.5",
     "@storybook/icons": "^1.2.12",
-    "@storybook/react": "workspace:*",
     "framer-motion": "^11.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

code/addons/onboarding/src/components/Button/Button.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { Button } from './Button';
 

code/addons/onboarding/src/components/Confetti/Confetti.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { Confetti } from './Confetti';
 

code/addons/onboarding/src/components/HighlightElement/HighlightElement.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { expect, waitFor, within } from 'storybook/test';
 

code/addons/onboarding/src/components/List/List.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { expect, userEvent, waitFor, within } from 'storybook/test';
 

code/addons/onboarding/src/features/GuidedTour/GuidedTour.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { fn } from 'storybook/test';
 

code/addons/onboarding/src/features/SplashScreen/SplashScreen.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { SplashScreen } from './SplashScreen';
 

code/addons/test/src/components/GlobalErrorModal.stories.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 
 import { ManagerContext } from 'storybook/internal/manager-api';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { expect, fn, userEvent, within } from 'storybook/test';
 import dedent from 'ts-dedent';

code/addons/test/src/components/Interaction.stories.tsx

@@ -1,6 +1,6 @@
 import { CallStates } from 'storybook/internal/instrumenter';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { expect, userEvent, within } from 'storybook/test';
 

code/addons/test/src/components/InteractionsPanel.stories.tsx

@@ -4,7 +4,7 @@ import { CallStates } from 'storybook/internal/instrumenter';
 import { ManagerContext } from 'storybook/internal/manager-api';
 import { styled } from 'storybook/internal/theming';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { expect, fn, userEvent, waitFor, within } from 'storybook/test';
 

code/addons/test/src/components/RelativeTime.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { RelativeTime } from './RelativeTime';
 

code/addons/test/src/components/TestDiscrepancyMessage.stories.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { CallStates } from 'storybook/internal/instrumenter';
 import { ManagerContext } from 'storybook/internal/manager-api';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { fn } from 'storybook/test';
 

code/addons/test/src/components/TestProviderRender.stories.tsx

@@ -5,7 +5,7 @@ import { ManagerContext } from 'storybook/internal/manager-api';
 import { styled } from 'storybook/internal/theming';
 import { Addon_TypesEnum } from 'storybook/internal/types';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { expect, fn } from 'storybook/test';
 

code/addons/test/src/components/TestStatusIcon.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { TestStatusIcon } from './TestStatusIcon';
 

code/core/src/cli/helpers.test.ts

@@ -158,7 +158,7 @@ describe('Helpers', () => {
           filePath === normalizePath('@storybook/react/template/cli')
       );
       await helpers.copyTemplateFiles({
-        renderer: 'react',
+        templateLocation: 'react',
         language,
         packageManager: packageManagerMock,
         commonAssetsDir: normalizePath('create-storybook/rendererAssets/common'),
@@ -182,7 +182,7 @@ describe('Helpers', () => {
       return filePath === normalizePath('@storybook/react/template/cli') || filePath === './src';
     });
     await helpers.copyTemplateFiles({
-      renderer: 'react',
+      templateLocation: 'react',
       language: SupportedLanguage.JAVASCRIPT,
       packageManager: packageManagerMock,
       features: ['dev', 'docs', 'test'],
@@ -195,7 +195,7 @@ describe('Helpers', () => {
       return filePath === normalizePath('@storybook/react/template/cli');
     });
     await helpers.copyTemplateFiles({
-      renderer: 'react',
+      templateLocation: 'react',
       language: SupportedLanguage.JAVASCRIPT,
       packageManager: packageManagerMock,
       features: ['dev', 'docs', 'test'],
@@ -208,7 +208,7 @@ describe('Helpers', () => {
     const expectedMessage = `Unsupported renderer: ${renderer}`;
     await expect(
       helpers.copyTemplateFiles({
-        renderer,
+        templateLocation: renderer,
         language: SupportedLanguage.JAVASCRIPT,
         packageManager: packageManagerMock,
         features: ['dev', 'docs', 'test'],

code/core/src/cli/helpers.ts

@@ -135,7 +135,7 @@ export function copyTemplate(templateRoot: string, destination = '.') {
 
 type CopyTemplateFilesOptions = {
   packageManager: JsPackageManager;
-  renderer: SupportedFrameworks | SupportedRenderers;
+  templateLocation: SupportedFrameworks | SupportedRenderers;
   language: SupportedLanguage;
   commonAssetsDir?: string;
   destination?: string;
@@ -205,7 +205,7 @@ export const cliStoriesTargetPath = async () => {
 
 export async function copyTemplateFiles({
   packageManager,
-  renderer,
+  templateLocation,
   language,
   destination,
   commonAssetsDir,
@@ -218,7 +218,7 @@ export async function copyTemplateFiles({
     [SupportedLanguage.TYPESCRIPT_4_9]: 'ts-4-9',
   };
   // FIXME: remove after 9.0
-  if (renderer === 'svelte') {
+  if (templateLocation === 'svelte') {
     const svelteVersion = await getVersionSafe(packageManager, 'svelte');
     if (svelteVersion && major(svelteVersion) >= 5) {
       languageFolderMapping = {
@@ -230,7 +230,7 @@ export async function copyTemplateFiles({
     }
   }
   const templatePath = async () => {
-    const baseDir = await getRendererDir(packageManager, renderer);
+    const baseDir = await getRendererDir(packageManager, templateLocation);
     const assetsDir = join(baseDir, 'template', 'cli');
 
     const assetsLanguage = join(assetsDir, languageFolderMapping[language]);
@@ -253,7 +253,7 @@ export async function copyTemplateFiles({
     if (existsSync(assetsDir)) {
       return assetsDir;
     }
-    throw new Error(`Unsupported renderer: ${renderer} (${baseDir})`);
+    throw new Error(`Unsupported renderer: ${templateLocation} (${baseDir})`);
   };
 
   const destinationPath = destination ?? (await cliStoriesTargetPath());
@@ -264,7 +264,7 @@ export async function copyTemplateFiles({
   await cp(await templatePath(), destinationPath, { recursive: true, filter });
 
   if (commonAssetsDir && features.includes('docs')) {
-    let rendererType = frameworkToRenderer[renderer] || 'react';
+    let rendererType = frameworkToRenderer[templateLocation] || 'react';
 
     // This is only used for docs links and the docs site uses `vue` for both `vue` & `vue3` renderers
     if (rendererType === 'vue3') {

code/core/src/components/components/Badge/Badge.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { Badge } from './Badge';
 

code/core/src/components/components/Button/Button.deprecated.stories.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 
 import { LinkIcon } from '@storybook/icons';
-import type { Meta, StoryObj } from '@storybook/react';
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { Form } from '../form';
 import { Button } from './Button';

code/core/src/components/components/ErrorFormatter/ErrorFormatter.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { dedent } from 'ts-dedent';
 

code/core/src/components/components/IconButton/IconButton.stories.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 
 import { FaceHappyIcon } from '@storybook/icons';
-import type { Meta, StoryObj } from '@storybook/react';
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { IconButton } from './IconButton';
 

code/core/src/components/components/Modal/Modal.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { expect, userEvent, within } from 'storybook/test';
 

code/core/src/components/components/ProgressSpinner/ProgressSpinner.stories.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 
 import { StopAltIcon } from '@storybook/icons';
-import type { Meta, StoryObj } from '@storybook/react';
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { ProgressSpinner } from './ProgressSpinner';
 

code/core/src/components/components/syntaxhighlighter/syntaxhighlighter.stories.tsx

@@ -180,7 +180,7 @@ export const UnsupportedDark = {
 export const Story = {
   args: {
     language: 'jsx',
-    children: `import type { Meta, StoryObj } from '@storybook/react';
+    children: `import type { Meta, StoryObj } from '@storybook/react-vite';
 
     import { Header } from './Header';
     

code/core/src/components/components/tabs/EmptyTabContent.stories.tsx

@@ -3,7 +3,8 @@ import React from 'react';
 import { Link } from 'storybook/internal/components';
 
 import { DocumentIcon } from '@storybook/icons';
-import type { Meta, StoryObj } from '@storybook/react';
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { EmptyTabContent } from './EmptyTabContent';
 

code/core/src/components/components/tabs/tabs.stories.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 
 import { BottomBarIcon, CloseIcon } from '@storybook/icons';
-import type { Meta, StoryObj } from '@storybook/react';
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { action } from '@storybook/addon-actions';
 

code/core/src/components/components/tooltip/TooltipLinkList.stories.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 
 import { LinkIcon, LinuxIcon } from '@storybook/icons';
-import type { Meta, StoryObj } from '@storybook/react';
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { action } from '@storybook/addon-actions';
 

code/core/src/components/components/tooltip/TooltipMessage.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react-vite';
 
 import { TooltipMessage } from './TooltipMessage';
 import { WithTooltip } from './WithTooltip';

code/core/src/components/components/tooltip/WithTooltip.stories.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 import { styled } from 'storybook/internal/theming';
 
-import type { StoryObj } from '@storybook/react';
+import type { StoryObj } from '@storybook/react-vite';
 
 import { expect, screen } from 'storybook/test';
 

code/core/src/core-server/utils/save-story/mocks/csf-variances.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { FC } from 'react';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 export default {
   title: 'MyComponent',

code/core/src/core-server/utils/save-story/mocks/data-variances.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { FC } from 'react';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 export default {
   title: 'MyComponent',

code/core/src/core-server/utils/save-story/mocks/export-variances.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { FC } from 'react';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 export default {
   title: 'MyComponent',