Constants and Configuration

/**
 * Main addon identifier for the Storybook docs addon
 * Value: "storybook/docs"
 */
const ADDON_ID: "storybook/docs";

/**
 * Panel component identifier, derived from ADDON_ID
 * Value: "storybook/docs/panel"
 */
const PANEL_ID: string;

/**
 * Parameter key used for docs configuration in stories
 * Value: "docs"
 */
const PARAM_KEY: "docs";

/**
 * Event identifier for snippet rendering notifications
 * Value: "storybook/docs/snippet-rendered"
 */
const SNIPPET_RENDERED: string;

import { ADDON_ID, PARAM_KEY } from "@storybook/docs-tools";

// Register addon
export default {
  title: 'My Component',
  parameters: {
    [PARAM_KEY]: {
      extractComponentDescription: true,
      source: {
        type: 'code'
      }
    }
  }
};

// Listen for snippet rendering events
if (typeof window !== 'undefined') {
  window.addEventListener(SNIPPET_RENDERED, (event) => {
    console.log('Code snippet rendered:', event.detail);
  });
}

/**
 * Defines how source code should be extracted and displayed in documentation
 */
enum SourceType {
  /** 
   * AUTO is the default behavior
   * - Uses CODE logic if user has set custom source snippet or story is not args-based
   * - Uses DYNAMIC rendered snippet if story is args-based
   */
  AUTO = "auto",
  
  /** Render the code extracted by source-loader */
  CODE = "code",
  
  /** Render dynamically-rendered source snippet from story's virtual DOM (React only) */
  DYNAMIC = "dynamic"
}

import { SourceType } from "@storybook/docs-tools";

// Configure source extraction in story parameters
export const MyStory = {
  parameters: {
    docs: {
      source: {
        type: SourceType.CODE  // Force static code extraction
      }
    }
  }
};

// Conditional source type based on framework
const getSourceType = (framework: string) => {
  if (framework === 'react') {
    return SourceType.DYNAMIC;  // Use virtual DOM rendering
  }
  return SourceType.CODE;  // Fallback to static extraction
};

export const ResponsiveStory = {
  parameters: {
    docs: {
      source: {
        type: getSourceType(process.env.STORYBOOK_FRAMEWORK)
      }
    }
  }
};

import { ADDON_ID, PARAM_KEY, SourceType } from "@storybook/docs-tools";

// Addon registration
const addonConfig = {
  name: ADDON_ID,
  parameterName: PARAM_KEY,
  defaultParameters: {
    [PARAM_KEY]: {
      source: {
        type: SourceType.AUTO
      }
    }
  }
};

// Framework-specific configuration
const frameworkDefaults = {
  react: {
    [PARAM_KEY]: {
      source: { type: SourceType.DYNAMIC }
    }
  },
  vue: {
    [PARAM_KEY]: {
      source: { type: SourceType.CODE }
    }
  }
};