Story Type Definitions

/**
 * Metadata to configure the stories for a component.
 * Provides type-safe configuration for component stories including controls, parameters, and decorators.
 */
type Meta<TCmpOrArgs = Args> = ComponentAnnotations<VueRenderer, ComponentPropsOrProps<TCmpOrArgs>>;

import type { Meta } from "@storybook/vue3";
import MyButton from "./MyButton.vue";

const meta: Meta<typeof MyButton> = {
  title: "Example/Button",
  component: MyButton,
  parameters: {
    layout: "centered",
  },
  argTypes: {
    size: { control: "select", options: ["small", "medium", "large"] },
    onClick: { action: "clicked" },
  },
};

export default meta;

/**
 * Story function that represents a CSFv2 component example.
 * Provides type-safe story functions with automatic prop inference from Vue components.
 */
type StoryFn<TCmpOrArgs = Args> = AnnotatedStoryFn<VueRenderer, ComponentPropsOrProps<TCmpOrArgs>>;

import type { StoryFn } from "@storybook/vue3";
import MyButton from "./MyButton.vue";

export const Primary: StoryFn<typeof MyButton> = (args) => ({
  components: { MyButton },
  setup() {
    return { args };
  },
  template: '<MyButton v-bind="args" />',
});

Primary.args = {
  label: "Button",
  primary: true,
};

/**
 * Story object that represents a CSFv3 component example.
 * Provides enhanced type safety with automatic argument inference from component props and meta configuration.
 */
type StoryObj<TMetaOrCmpOrArgs = Args> = TMetaOrCmpOrArgs extends {
  render?: ArgsStoryFn<VueRenderer, any>;
  component?: infer Component;
  args?: infer DefaultArgs;
}
  ? Simplify<ComponentPropsAndSlots<Component> & ArgsFromMeta<VueRenderer, TMetaOrCmpOrArgs>> extends infer TArgs
    ? StoryAnnotations<VueRenderer, TArgs, SetOptional<TArgs, Extract<keyof TArgs, keyof DefaultArgs>>>
    : never
  : StoryAnnotations<VueRenderer, ComponentPropsOrProps<TMetaOrCmpOrArgs>>;

import type { Meta, StoryObj } from "@storybook/vue3";
import MyButton from "./MyButton.vue";

const meta: Meta<typeof MyButton> = {
  component: MyButton,
};

export default meta;
type Story = StoryObj<typeof meta>;

export const Primary: Story = {
  args: {
    label: "Button",
    primary: true,
  },
};

/**
 * Combined Vue component props and slots type.
 * Extracts both props and slots from Vue components for comprehensive type coverage in stories.
 */
type ComponentPropsAndSlots<C> = ComponentProps<C> & ExtractSlots<C>;

type ExtractSlots<C> = AllowNonFunctionSlots<Partial<RemoveIndexSignature<ComponentSlots<C>>>>;

type AllowNonFunctionSlots<Slots> = {
  [K in keyof Slots]: Slots[K] | VNodeChild;
};

/**
 * Story decorator function type for Vue 3 components.
 * Provides type-safe decorators that can wrap and enhance story rendering.
 */
type Decorator<TArgs = StrictArgs> = DecoratorFunction<VueRenderer, TArgs>;

/**
 * Story loader function type for Vue 3 components.
 * Enables type-safe data loading and preparation before story rendering.
 */
type Loader<TArgs = StrictArgs> = LoaderFunction<VueRenderer, TArgs>;

import type { Decorator } from "@storybook/vue3";

const withMargin: Decorator = (story) => ({
  components: { story },
  template: '<div style="margin: 3em;"><story /></div>',
});

export const decorators = [withMargin];

/**
 * Story execution context for Vue 3 components.
 * Contains story metadata, arguments, parameters, and Vue-specific rendering context.
 */
type StoryContext<TArgs = StrictArgs> = GenericStoryContext<VueRenderer, TArgs>;

/**
 * Storybook preview configuration type for Vue 3 projects.
 * Defines global decorators, parameters, and story annotations.
 */
type Preview = ProjectAnnotations<VueRenderer>;

import type { Preview } from "@storybook/vue3";

const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
  decorators: [
    (story) => ({
      components: { story },
      template: '<div style="padding: 3em;"><story /></div>',
    }),
  ],
};

export default preview;

type Args = Record<string, any>;
type ArgTypes = Record<string, any>;
type Parameters = Record<string, any>;
type StrictArgs = Record<string, unknown>;

interface VueRenderer {
  component: Component;
  storyResult: StoryFnVueReturnType;
}