tessl/npm-storybook--docs-tools

Shared utility functions for frameworks to implement docs in Storybook

—

Pending

Overview

Eval results

Files

ArgTypes Enhancement

Name: tessl/npm-storybook--docs-tools
Author: tessl

Core functionality for enhancing component argTypes by intelligently combining extracted type information from docgen tools with user-provided argType definitions.

Capabilities

Enhanced ArgTypes Processing

The primary function for merging automated type extraction with manual argType definitions.

/**
 * Enhances argTypes by combining extracted type information with user-provided types
 * @param context - Story context containing component, argTypes, and parameters
 * @returns Enhanced argTypes with merged type information
 */
function enhanceArgTypes<TRenderer extends Renderer>(
  context: StoryContextForEnhancers<TRenderer>
): typeof userArgTypes;

The function processes the story context to:

Extract type information from the component using configured extractors
Combine extracted types with user-defined argTypes
Preserve user customizations while adding missing type information
Return enhanced argTypes for use in controls and documentation

Usage Examples:

import { enhanceArgTypes } from "@storybook/docs-tools";
import type { StoryContextForEnhancers, Renderer } from "@storybook/core/types";

// Basic usage in a decorator
const withEnhancedArgTypes = (story: any, context: StoryContextForEnhancers<any>) => {
  const enhancedArgTypes = enhanceArgTypes(context);
  
  return story({
    ...context,
    argTypes: enhancedArgTypes
  });
};

// Framework-specific implementation
function createFrameworkDecorator<TRenderer extends Renderer>() {
  return (story: any, context: StoryContextForEnhancers<TRenderer>) => {
    // Extract and enhance argTypes for this framework
    const argTypes = enhanceArgTypes(context);
    
    // Apply framework-specific processing
    const processedArgTypes = processFrameworkTypes(argTypes);
    
    return story({
      ...context,
      argTypes: processedArgTypes
    });
  };
}

// Custom extractor configuration
const storyWithCustomExtractor = {
  parameters: {
    docs: {
      extractArgTypes: (component: any) => {
        // Custom extraction logic
        return extractCustomTypes(component);
      }
    }
  }
};

Preset Detection

Utility function to detect whether docs or controls addons are present in the Storybook configuration.

/**
 * Checks if docs or controls addons are present in the preset list
 * @param options - Storybook configuration options
 * @returns true if docs or controls addons are detected
 */
function hasDocsOrControls(options: Options): boolean;

This function helps conditional feature activation based on addon availability.

Usage Examples:

import { hasDocsOrControls } from "@storybook/docs-tools";
import type { Options } from "@storybook/core/types";

// Conditional feature activation
function configureStorybook(options: Options) {
  const shouldEnableDocs = hasDocsOrControls(options);
  
  if (shouldEnableDocs) {
    // Enable documentation features
    return {
      ...options,
      features: {
        ...options.features,
        argTypeTargetsV7: true,
        docs: true
      }
    };
  }
  
  return options;
}

// Framework preset configuration
export const frameworkOptions = (options: Options) => {
  const baseConfig = {
    // Basic framework configuration
  };
  
  if (hasDocsOrControls(options)) {
    return {
      ...baseConfig,
      docs: {
        defaultName: 'Docs',
        autodocs: true
      }
    };
  }
  
  return baseConfig;
};

// Plugin conditional loading
function loadPlugins(options: Options) {
  const plugins = [
    // Core plugins
  ];
  
  if (hasDocsOrControls(options)) {
    plugins.push(
      // Documentation-specific plugins
      require('@storybook/addon-docs/preset'),
      require('@storybook/addon-controls/preset')
    );
  }
  
  return plugins;
}

Context Processing

The enhancement process works with the full story context to provide comprehensive type information.

// Context structure used by enhanceArgTypes
interface StoryContextForEnhancers<TRenderer extends Renderer> {
  component: any;
  argTypes: StrictArgTypes;
  parameters: {
    docs?: {
      extractArgTypes?: (component: any) => StrictArgTypes;
      // Other docs parameters
    };
    // Other parameters
  };
  // Other context properties
}

// Example of full context processing
function processStoryContext<T extends Renderer>(context: StoryContextForEnhancers<T>) {
  // Extract component metadata
  const { component, argTypes: userArgTypes, parameters } = context;
  
  // Check for custom extractor
  const extractArgTypes = parameters.docs?.extractArgTypes;
  
  // Enhance argTypes with extracted information
  const enhancedArgTypes = enhanceArgTypes(context);
  
  // Return processed context
  return {
    ...context,
    argTypes: enhancedArgTypes
  };
}

Integration with Extractors

The enhancement system integrates with various type extraction tools and frameworks.

// Common extractor patterns
const reactExtractor = (component: any) => {
  // React component type extraction
  if (component.__docgenInfo) {
    return processReactDocgen(component.__docgenInfo);
  }
  return {};
};

const vueExtractor = (component: any) => {
  // Vue component type extraction  
  if (component.__docgenApi) {
    return processVueDocgen(component.__docgenApi);
  }
  return {};
};

// Framework-specific enhancement
const enhanceForFramework = (context: StoryContextForEnhancers<any>, framework: string) => {
  const extractors = {
    react: reactExtractor,
    vue: vueExtractor,
    // Other framework extractors
  };
  
  const extractor = extractors[framework];
  if (extractor) {
    context.parameters.docs = {
      ...context.parameters.docs,
      extractArgTypes: extractor
    };
  }
  
  return enhanceArgTypes(context);
};

Install with Tessl CLI

npx tessl i tessl/npm-storybook--docs-tools

docs

argtypes-enhancement.md

component-extraction.md

tessl/npm-storybook--docs-tools