Vue App Setup and Configuration

/**
 * Sets up Vue app plugins and initialization functions for Storybook stories.
 * Functions registered with this function will be called with the Vue app instance
 * used for rendering each story, allowing for plugin setup and configuration.
 * 
 * @param fn - Function that receives the Vue app instance and optional story context
 */
function setup(fn: (app: App, storyContext?: StoryContext<VueRenderer>) => unknown): void;

import { setup } from "@storybook/vue3";
import { createPinia } from "pinia";
import { createI18n } from "vue-i18n";
import MyGlobalComponent from "./MyGlobalComponent.vue";

// Setup Pinia store
setup((app) => {
  app.use(createPinia());
});

// Setup i18n
setup((app) => {
  const i18n = createI18n({
    locale: "en",
    messages: {
      en: { hello: "Hello" },
      fr: { hello: "Bonjour" },
    },
  });
  app.use(i18n);
});

// Register global component
setup((app) => {
  app.component("MyGlobalComponent", MyGlobalComponent);
});

import { setup } from "@storybook/vue3";
import { createRouter, createWebHashHistory } from "vue-router";

setup((app) => {
  const router = createRouter({
    history: createWebHashHistory(),
    routes: [
      { path: "/", component: { template: "<div>Home</div>" } },
      { path: "/about", component: { template: "<div>About</div>" } },
    ],
  });
  
  app.use(router);
});

import { setup } from "@storybook/vue3";
import { createPinia } from "pinia";
import Toast from "vue-toastification";
import "vue-toastification/dist/index.css";

// Setup state management
setup((app) => {
  app.use(createPinia());
});

// Setup toast notifications
setup((app) => {
  app.use(Toast, {
    timeout: 3000,
    closeOnClick: true,
    pauseOnFocusLoss: true,
    pauseOnHover: true,
  });
});

import { setup } from "@storybook/vue3";

// Custom global properties
setup((app) => {
  app.config.globalProperties.$customApi = {
    fetchData: () => Promise.resolve("mock data"),
    formatCurrency: (amount) => `$${amount.toFixed(2)}`,
  };
});

// Custom directives
setup((app) => {
  app.directive("focus", {
    mounted(el) {
      el.focus();
    },
  });
});

// .storybook/preview.js
import { setup } from "@storybook/vue3";
import { createPinia } from "pinia";

// Global setup
setup((app) => {
  app.use(createPinia());
});

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

import { setup } from "@storybook/vue3";
import { createPinia } from "pinia";
import { useUserStore } from "@/stores/user";

setup((app) => {
  const pinia = createPinia();
  app.use(pinia);
  
  // Initialize store with mock data for stories
  const userStore = useUserStore(pinia);
  userStore.setUser({
    id: 1,
    name: "John Doe",
    email: "john@example.com",
  });
});

import { setup } from "@storybook/vue3";

setup((app) => {
  // Mock API calls in Storybook environment
  app.provide("api", {
    get: (url) => Promise.resolve({ data: `Mock response for ${url}` }),
    post: (url, data) => Promise.resolve({ success: true }),
  });
});

interface SetupFunction {
  (app: App, storyContext?: StoryContext<VueRenderer>): unknown;
}

declare global {
  var PLUGINS_SETUP_FUNCTIONS: Set<SetupFunction>;
}