Fix vue-cli/default-js sandbox

code/renderers/vue3/template/stories/preview.ts → code/renderers/vue3/template/stories/preview.js

@@ -1,25 +1,12 @@
-import type { App, Plugin } from 'vue';
-import type { StoryContext } from '@storybook/csf';
 import { global as globalThis } from '@storybook/global';
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { setup, type VueRenderer } from '@storybook/vue3';
+import { setup } from '@storybook/vue3';
 
-declare module 'vue' {
-  interface ComponentCustomProperties {
-    $greetingMessage: (key: string) => string;
-  }
-}
-
-declare global {
-  // eslint-disable-next-line no-var,vars-on-top
-  var Components: Record<string, any>;
-}
-
-const somePlugin: Plugin = {
-  install: (app: App, options) => {
+const somePlugin = {
+  install: (app, options) => {
     // inject a globally available $greetingText() method
     // eslint-disable-next-line no-param-reassign
-    app.config.globalProperties.$greetingMessage = (key: string) => {
+    app.config.globalProperties.$greetingMessage = (key) => {
       // retrieve a nested property in `options`
       // using `key`
       return options.greetings[key];
@@ -29,13 +16,13 @@ const somePlugin: Plugin = {
 const someColor = 'someColor';
 
 // add components to global scope
-setup((app: App) => {
+setup((app) => {
   // This adds a component that can be used globally in stories
   app.component('GlobalButton', globalThis.Components.Button);
 });
 
 // this adds a plugin to vue app that can be used globally in stories
-setup((app: App, context?: StoryContext<VueRenderer>) => {
+setup((app, context) => {
   app.use(somePlugin, {
     greetings: {
       hello: `Hello Story! from some plugin your name is ${context?.name}!`,
@@ -46,6 +33,6 @@ setup((app: App, context?: StoryContext<VueRenderer>) => {
 });
 
 // additonal setup to provide some propriety  to the app
-setup((app: App, context) => {
+setup((app, context) => {
   app.provide(someColor, 'green');
 });

code/renderers/vue3/template/stories/GlobalSetup.stories.ts → code/renderers/vue3/template/stories_vue3-vite-default-ts/GlobalSetup.stories.ts

@@ -1,5 +1,5 @@
 import { expect } from '@storybook/jest';
-import type { Meta, StoryObj } from 'renderers/vue3/src';
+import type { Meta, StoryObj } from '@storybook/vue3';
 import { within } from '@storybook/testing-library';
 import { inject } from 'vue';
 import GlobalSetup from './GlobalSetup.vue';

code/renderers/vue3/template/stories_vue3-vite-default-ts/preview.ts

@@ -0,0 +1,12 @@
+declare module 'vue' {
+  interface ComponentCustomProperties {
+    $greetingMessage: (key: string) => string;
+  }
+}
+
+declare global {
+  // eslint-disable-next-line no-var,vars-on-top
+  var Components: Record<string, any>;
+}
+
+export default {};

scripts/tasks/sandbox-parts.ts

@@ -322,11 +322,11 @@ async function linkPackageStories(
       if (await pathExists(previewPath)) {
         let storiesDir = 'template-stories';
         if (linkInDir) {
-          storiesDir = (await pathExists(join(cwd, `src/${storiesFolderName}`)))
-            ? `src/${storiesFolderName}`
-            : storiesFolderName;
+          storiesDir = (await pathExists(join(cwd, 'src/stories'))) ? 'src/stories' : 'stories';
         }
-        addPreviewAnnotations(mainConfig, [`./${join(storiesDir, packageDir, previewFile)}`]);
+        addPreviewAnnotations(mainConfig, [
+          `./${join(storiesDir, variant ? `${packageDir}_${variant}` : packageDir, previewFile)}`,
+        ]);
       }
     })
   );