Configuration

/**
 * Main docs configuration interface
 */
interface DocsParameters {
  /** Docs-specific configuration */
  docs?: DocsConfig;
}

interface DocsConfig {
  /** Enable automatic docs generation */
  autodocs?: boolean | 'tag';
  /** Default name for docs entries */
  defaultName?: string;
  /** Disable docs for specific stories */
  disable?: boolean;
  /** Custom docs page component */
  page?: React.ComponentType<DocsPageProps>;
  /** Custom docs container component */
  container?: React.ComponentType<DocsContainerProps>;
  /** Source code extraction configuration */
  source?: Partial<SourceBlockParameters>;
  /** Canvas block configuration */
  canvas?: Partial<CanvasBlockParameters>;
  /** Story block configuration */
  story?: Partial<StoryBlockParameters>;
  /** Args table configuration */
  argTypes?: ArgTypesBlockParameters;
  /** Controls configuration */
  controls?: ControlsBlockParameters;
  /** Description extraction configuration */
  description?: DescriptionBlockParameters;
  /** Custom theme configuration */
  theme?: ThemeVars;
  /** Page title override */
  title?: string;
  /** Page subtitle */
  subtitle?: string;
  /** Table of contents configuration */
  toc?: boolean | TocParameters;
  /** Enable code panel addon */
  codePanel?: boolean;
  /** Custom component description extractor */
  extractComponentDescription?: (component: any, context: any) => string | null;
  /** Custom story description extractor */
  extractStoryDescription?: (story: any, context: any) => string | null;
}

/**
 * Source block configuration parameters
 */
interface SourceBlockParameters {
  /** Source code display type */
  type?: 'auto' | 'code' | 'dynamic';
  /** Source code language for highlighting */
  language?: string;
  /** Code formatting options */
  format?: boolean | 'dedent' | string;
  /** Source code transformation function */
  transform?: (code: string, storyContext: any) => string;
  /** Exclude source for specific stories */
  excludeDecorators?: boolean;
  /** Dark theme for source display */
  dark?: boolean;
}

/**
 * Canvas block configuration parameters
 */
interface CanvasBlockParameters {
  /** Canvas layout mode */
  layout?: 'padded' | 'fullscreen' | 'centered';
  /** Source panel initial state */
  sourceState?: 'hidden' | 'shown' | 'none';
  /** Show/hide canvas toolbar */
  withToolbar?: boolean;
  /** Additional canvas actions */
  additionalActions?: Array<{
    title: string;
    onClick: () => void;
    disabled?: boolean;
  }>;
}

/**
 * Story block configuration parameters
 */
interface StoryBlockParameters {
  /** Render story inline or in iframe */
  inline?: boolean;
  /** Story height for iframe mode */
  height?: string;
  /** Auto-run story play function */
  autoplay?: boolean;
  /** Story iframe configuration */
  iframe?: {
    height?: string;
    width?: string;
  };
}

/**
 * Args table configuration parameters
 */
interface ArgTypesBlockParameters {
  /** Properties to include in table */
  include?: PropDescriptor;
  /** Properties to exclude from table */
  exclude?: PropDescriptor;
  /** Sorting configuration */
  sort?: SortType;
  /** Category grouping */
  category?: string;
  /** Expand all categories by default */
  expanded?: boolean;
}

/**
 * Controls configuration parameters  
 */
interface ControlsBlockParameters {
  /** Controls to include */
  include?: PropDescriptor;
  /** Controls to exclude */
  exclude?: PropDescriptor;
  /** Controls sorting */
  sort?: SortType;
  /** Expanded state */
  expanded?: boolean;
  /** Hide no-controls message */
  hideNoControlsWarning?: boolean;
}

/**
 * Description block configuration parameters
 */
interface DescriptionBlockParameters {
  /** Description source type */
  type?: DescriptionType;
  /** Markdown content */
  markdown?: string;
}

/**
 * Table of contents configuration parameters
 */
interface TocParameters {
  /** Disable TOC generation */
  disable?: boolean;
  /** CSS selector for headings to include */
  headingSelector?: string;
  /** Ignore specific headings */
  ignoreSelector?: string;
  /** Heading levels to include */
  headingLevels?: number[];
  /** TOC title */
  title?: string;
  /** Custom TOC container className */
  className?: string;
  /** Expand TOC by default */
  expanded?: boolean;
}

/**
 * Theme configuration variables
 */
interface ThemeVars {
  /** Base colors */
  base?: 'light' | 'dark';
  /** Brand colors */
  colorPrimary?: string;
  colorSecondary?: string;
  /** Application colors */
  appBg?: string;
  appContentBg?: string;
  appBorderColor?: string;
  appBorderRadius?: number;
  /** Typography */
  fontBase?: string;
  fontCode?: string;
  /** Text colors */
  textColor?: string;
  textInverseColor?: string;
  textMutedColor?: string;
  /** Button colors */
  buttonBg?: string;
  buttonBorder?: string;
  /** Input colors */
  inputBg?: string;
  inputBorder?: string;
  inputTextColor?: string;
  inputBorderRadius?: number;
  /** Brand configuration */
  brandTitle?: string;
  brandUrl?: string;
  brandImage?: string;
  brandTarget?: string;
}

/**
 * Webpack configuration modification function
 * @param config - Existing webpack configuration
 * @param options - Storybook webpack options
 * @returns Modified webpack configuration
 */
function webpack(
  config: WebpackConfig, 
  options: WebpackOptions
): WebpackConfig;

interface WebpackConfig {
  module?: {
    rules?: WebpackRule[];
  };
  resolve?: {
    extensions?: string[];
    alias?: Record<string, string>;
  };
  plugins?: any[];
  [key: string]: any;
}

interface WebpackOptions {
  configType: 'DEVELOPMENT' | 'PRODUCTION';
  framework?: string;
  typescript?: {
    check?: boolean;
    reactDocgen?: string;
  };
  docs?: {
    transcludeMarkdown?: boolean;
  };
}

interface WebpackRule {
  test: RegExp;
  use: any[];
  exclude?: RegExp;
  include?: RegExp;
}

/**
 * Vite configuration modification function
 * @param config - Existing Vite configuration
 * @param options - Storybook Vite options
 * @returns Modified Vite configuration
 */
function viteFinal(
  config: ViteConfig,
  options: ViteOptions
): Promise<ViteConfig> | ViteConfig;

interface ViteConfig {
  plugins?: any[];
  resolve?: {
    alias?: Record<string, string>;
    extensions?: string[];
  };
  define?: Record<string, any>;
  optimizeDeps?: {
    include?: string[];
    exclude?: string[];
  };
  server?: {
    fs?: {
      allow?: string[];
    };
  };
  [key: string]: any;
}

interface ViteOptions {
  framework?: string;
  configType: 'DEVELOPMENT' | 'PRODUCTION';
  docs?: {
    transcludeMarkdown?: boolean;
  };
}

/**
 * Docs configuration preset object
 */
const docs: DocsPreset;

interface DocsPreset {
  /** Preset name */
  name: string;
  /** Preset options */
  options?: any;
}

/**
 * Required addon dependencies
 */
const addons: string[];

/**
 * React dependency resolution configuration
 */
const resolvedReact: ReactResolution;

interface ReactResolution {
  /** React package location */
  react: string;
  /** React DOM package location */
  'react-dom': string;
  /** React DOM server location */
  'react-dom/server': string;
}

/**
 * Vite optimization configuration
 */
const optimizeViteDeps: ViteOptimization;

interface ViteOptimization {
  /** Dependencies to include in optimization */
  include: string[];
  /** Dependencies to exclude from optimization */
  exclude: string[];
}

/**
 * Manager plugin registration for code panel
 * Registers the code panel addon in Storybook manager UI
 */
interface ManagerConfig {
  /** Panel registration */
  panels?: PanelConfig[];
  /** Addon metadata */
  addons?: AddonConfig[];
}

interface PanelConfig {
  /** Panel ID */
  id: string;
  /** Panel title */
  title: string;
  /** Panel component */
  render: React.ComponentType;
  /** Panel icon */
  icon?: React.ComponentType;
  /** Panel disabled state */
  disabled?: boolean;
}

interface AddonConfig {
  /** Addon ID */
  id: string;
  /** Addon name */
  name: string;
  /** Addon URL */
  url?: string;
  /** Addon title */
  title: string;
}

// .storybook/main.js
export default {
  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx|mdx)"],
  addons: [
    "@storybook/addon-docs",
    // other addons
  ],
  docs: {
    autodocs: true,
    defaultName: "Documentation",
  },
  typescript: {
    reactDocgen: "react-docgen-typescript",
  },
};

// .storybook/preview.js
import { themes } from "@storybook/theming";

export const parameters = {
  docs: {
    theme: themes.dark,
    toc: {
      title: "Table of Contents",
      headingSelector: "h2, h3",
      expanded: true,
    },
    source: {
      type: "dynamic",
      language: "typescript",
      format: "dedent",
    },
    canvas: {
      sourceState: "shown",
      withToolbar: true,
    },
    controls: {
      sort: "requiredFirst",
      expanded: true,
    },
  },
};

// .storybook/manager.js
import { addons } from "@storybook/manager-api";
import { themes } from "@storybook/theming";

addons.setConfig({
  theme: {
    ...themes.normal,
    brandTitle: "My Component Library",
    brandUrl: "https://example.com",
    brandImage: "./logo.svg",
    colorPrimary: "#007acc",
    colorSecondary: "#4ecdc4",
    appBg: "#f8f9fa",
    appContentBg: "#ffffff",
    fontBase: '"Inter", sans-serif',
    fontCode: '"Fira Code", monospace',
  },
});

// Angular with Compodoc
export default {
  stories: ["../src/**/*.stories.@(js|ts|mdx)"],
  addons: ["@storybook/addon-docs"],
  docs: {
    autodocs: true,
  },
  typescript: {
    check: true,
    reactDocgen: false,
  },
  angular: {
    enableIvy: true,
  },
};

// React with TypeScript
export default {
  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx|mdx)"],
  addons: ["@storybook/addon-docs"],
  docs: {
    autodocs: true,
  },
  typescript: {
    reactDocgen: "react-docgen-typescript",
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: (prop) => 
        prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
    },
  },
};