tessl/npm-storybook--vue

Storybook Vue 2.x renderer that enables Vue 2.x component story development and documentation (Note: @storybook/vue3 is separate)

—

Pending

Overview

Eval results

Files

Story Type Definitions

Name: tessl/npm-storybook--vue
Author: tessl

Complete TypeScript support for defining Vue component stories with full type safety, IntelliSense support, and proper component prop inference.

Capabilities

Meta Type

Component metadata configuration for defining default story behavior, parameters, and argument types.

/**
 * Metadata to configure the stories for a Vue component
 * @see https://storybook.js.org/docs/formats/component-story-format/#default-export
 */
type Meta<TCmpOrArgs = Args> = ComponentAnnotations<VueRenderer, ComponentPropsOrProps<TCmpOrArgs>>;

Usage Example:

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

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

export default meta;

StoryFn Type

CSF v2 story function type for function-based story definitions with automatic prop inference.

/**
 * Story function that represents a CSFv2 component example
 * @see https://storybook.js.org/docs/formats/component-story-format/#named-story-exports
 */
type StoryFn<TCmpOrArgs = Args> = AnnotatedStoryFn<VueRenderer, ComponentPropsOrProps<TCmpOrArgs>>;

Usage Example:

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

type Story = StoryFn<typeof MyButton>;

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

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

StoryObj Type

CSF v3 story object type for object-based story definitions with enhanced type safety and better development experience.

/**
 * Story function that represents a CSFv3 component example
 * @see https://storybook.js.org/docs/formats/component-story-format/#named-story-exports
 */
type StoryObj<TMetaOrCmpOrArgs = Args> = TMetaOrCmpOrArgs extends {
  render?: ArgsStoryFn<VueRenderer, any>;
  component?: infer C;
  args?: infer DefaultArgs;
}
  ? TMetaOrCmpOrArgs extends Component<any>
    ? StoryAnnotations<VueRenderer, ComponentPropsOrProps<TMetaOrCmpOrArgs>>
    : Simplify<ComponentProps<C> & ArgsFromMeta<VueRenderer, TMetaOrCmpOrArgs>> extends infer TArgs
    ? StoryAnnotations<VueRenderer, TArgs, SetOptional<TArgs, Extract<keyof TArgs, keyof DefaultArgs>>>
    : never
  : StoryAnnotations<VueRenderer, ComponentPropsOrProps<TMetaOrCmpOrArgs>>;

Usage Example:

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

const meta: Meta<typeof MyButton> = {
  title: "Example/Button",
  component: MyButton,
};

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

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

export const Large: Story = {
  args: {
    size: "large",
    label: "Button",
  },
};

Deprecated Story Type

Legacy story type maintained for backwards compatibility.

/**
 * @deprecated Use `StoryFn` instead.
 * Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories.
 * You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/
 */
type Story<TArgs = Args> = StoryFn<TArgs>;

Supporting Types

Internal types used by the story type system for proper Vue component prop inference.

type ComponentProps<C> = C extends ExtendedVue<any, any, any, any, infer P>
  ? P
  : C extends Component<any, any, any, infer P>
  ? P
  : unknown;

type ComponentPropsOrProps<TCmpOrArgs> = TCmpOrArgs extends Component<any>
  ? unknown extends ComponentProps<TCmpOrArgs>
    ? TCmpOrArgs
    : ComponentProps<TCmpOrArgs>
  : TCmpOrArgs;

Re-exported Types

type Args = import("@storybook/types").Args;
type ArgTypes = import("@storybook/types").ArgTypes;
type Parameters = import("@storybook/types").Parameters;
type StrictArgs = import("@storybook/types").StrictArgs;

Install with Tessl CLI