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

Documentation Integration

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

Automatic documentation generation including component prop extraction, source code generation, and argument type inference for Vue components in Storybook.

Capabilities

Extract Arg Types

Extracts argument types from Vue components using docgen information and component analysis.

/**
 * Extract argument types from Vue components
 * @param component - Vue component to analyze
 * @returns Argument type definitions or null if no docgen info available
 */
function extractArgTypes(component: VueRenderer['component']): StrictArgTypes | null;

interface StrictArgTypes {
  [key: string]: {
    name: string;
    description?: string;
    type: {
      required: boolean;
      name: string;
      value?: any;
      summary?: string;
    };
    table?: {
      type: any;
      jsDocTags?: any;
      defaultValue?: any;
      category: string;
    };
  };
}

Usage Example:

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

// Automatically extract arg types from component
const argTypes = extractArgTypes(MyButton);
console.log(argTypes);

// Manual usage in meta
const meta: Meta<typeof MyButton> = {
  title: "Example/Button",
  component: MyButton,
  argTypes: extractArgTypes(MyButton),
};

Source Decorator

Generates source code snippets for stories in the Docs addon, showing the actual Vue template syntax.

/**
 * Generate source code snippets for stories
 * @param storyFn - Story function to analyze
 * @param context - Story context for source generation
 * @returns Vue component with source generation capabilities
 */
function sourceDecorator(storyFn: any, context: StoryContext): ComponentOptions<Vue>;

Usage Example:

// Applied automatically in docs preview
export const decorators: DecoratorFunction<VueRenderer>[] = [sourceDecorator];

// Results in generated source like:
// <MyButton primary="true" label="Button" />

Skip Source Render

Determines whether source code should be rendered based on story parameters and configuration.

/**
 * Determine if source should be rendered
 * @param context - Story context to check
 * @returns Boolean indicating if source rendering should be skipped
 */
function skipSourceRender(context: StoryContext): boolean;

VNode to String Conversion

Converts Vue VNode structures to string representations for source code display.

/**
 * Convert Vue VNode to string representation
 * @param vnode - Vue VNode to convert
 * @returns String representation of the VNode structure
 */
function vnodeToString(vnode: Vue.VNode): string;

/**
 * Argument type enhancers for improving type definitions
 */
const argTypesEnhancers: ArgTypesEnhancer<VueRenderer>[];

/**
 * Documentation-specific parameters for stories
 */
const parameters: {
  docs: {
    story: { inline: boolean; iframeHeight: string };
    extractArgTypes: typeof extractArgTypes;
    extractComponentDescription: Function;
  };
};

Documentation Configuration

Preview Parameters

Configure documentation behavior in your preview:

// .storybook/preview.js
import type { Preview } from "@storybook/vue";

const preview: Preview = {
  parameters: {
    docs: {
      story: { inline: true, iframeHeight: '120px' },
      extractArgTypes,
      extractComponentDescription,
    },
  },
};

export default preview;

Component Documentation Sections

The documentation system recognizes these Vue component sections:

const SECTIONS = ['props', 'events', 'slots', 'methods'];

Props Section:

Extracts component prop definitions
Includes types, defaults, and validation rules
Supports enum inference from JSDoc @values tags

Events Section:

Documents component events and their payloads
Includes event binding examples
Supports custom event documentation

Slots Section:

Documents available component slots
Includes slot prop documentation
Shows slot usage examples

Methods Section:

Documents exposed component methods
Includes method signatures and descriptions
Shows method usage examples

Advanced Documentation Features

Enum Type Inference

Automatically infers enum types from JSDoc comments:

<script>
export default {
  props: {
    /**
     * Button size
     * @values small, medium, large
     */
    size: {
      type: String,
      default: 'medium'
    }
  }
}
</script>

Results in:

{
  size: {
    control: { type: 'select' },
    options: ['small', 'medium', 'large']
  }
}

Source Code Parameters

Control source code generation with parameters:

export const MyStory: StoryObj = {
  parameters: {
    docs: {
      source: {
        type: 'dynamic', // 'auto' | 'dynamic' | 'code'
        code: '<MyButton custom="code" />', // Custom source code
      },
    },
  },
};

Component Description Extraction

Automatically extract component descriptions from:

JSDoc comments in component files
README files in component directories
Inline component documentation

<script>
/**
 * A versatile button component that supports multiple variants,
 * sizes, and interaction states for consistent UI design.
 */
export default {
  name: 'MyButton',
  // ...
}
</script>

Args Story Detection

The system automatically detects args-based stories for optimal documentation:

// Automatically detected as args story
export const Primary: StoryObj = {
  args: {
    primary: true,
    label: 'Button',
  },
};

Error Handling

Graceful error handling for documentation generation:

Failed docgen extraction falls back to basic type analysis
Missing component descriptions are handled gracefully
VNode conversion errors are logged but don't break rendering
Invalid source code generation shows fallback content

Debug Information:

// Enable debug logging for documentation issues
console.warn(`Failed to find story component: ${storyComponent}`);
console.warn(`Failed to generate dynamic source: ${error}`);

Install with Tessl CLI