Documentation Blocks

/**
 * Renders stories with source code and toolbar
 * @param props - Canvas configuration options
 * @returns React component displaying story with controls
 */
function Canvas(props: CanvasProps): React.ReactElement;

interface CanvasProps {
  /** Story to render */
  of?: ModuleExport;
  /** CSF file exports for unattached MDX */
  meta?: ModuleExports;
  /** Show/hide toolbar */
  withToolbar?: boolean;
  /** Source panel visibility state */
  sourceState?: 'hidden' | 'shown' | 'none';
  /** Story layout mode */
  layout?: 'padded' | 'fullscreen' | 'centered';
  /** CSS class name */
  className?: string;
  /** Custom toolbar actions */
  additionalActions?: Array<{
    title: string;
    onClick: () => void;
    disabled?: boolean;
  }>;
  /** Source code configuration */
  source?: SourceProps;
  /** Story display configuration */
  story?: StoryProps;
}

import { Canvas } from "@storybook/addon-docs/blocks";
import * as ButtonStories from "./Button.stories";

// Basic canvas
<Canvas of={ButtonStories.Primary} />

// Canvas with custom configuration
<Canvas 
  of={ButtonStories.Primary}
  withToolbar={true}
  sourceState="shown"
  layout="centered"
/>

/**
 * Renders individual stories
 * @param props - Story configuration options
 * @returns React component displaying single story
 */
function Story(props: StoryProps): React.ReactElement;

interface StoryProps {
  /** Story export to render */
  of?: ModuleExport;
  /** CSF file exports for context */
  meta?: ModuleExports;
  /** Render inline or in iframe */
  inline?: boolean;
  /** Story height for iframe mode */
  height?: string;
  /** Auto-run play function */
  autoplay?: boolean;
  /** Internal: force initial args */
  __forceInitialArgs?: boolean;
  /** Internal: mark as primary story */
  __primary?: boolean;
}

/**
 * Displays component argument types in table format
 * @param props - ArgsTable configuration
 * @returns React component with args documentation
 */
function ArgTypes(props: ArgTypesProps): React.ReactElement;

interface ArgTypesProps {
  /** Component or CSF file to extract args from */
  of?: React.ComponentType | ModuleExports;
  /** Properties to include */
  include?: PropDescriptor;
  /** Properties to exclude */
  exclude?: PropDescriptor;
  /** Sorting configuration */
  sort?: SortType;
}

/**
 * Pure args table component without automatic extraction
 */
const PureArgsTable: React.FC<ArgsTableProps>;

interface ArgsTableProps {
  rows: ArgType[];
  args?: Args;
  globals?: Args;
  updateArgs?: (args: Args) => void;
  resetArgs?: () => void;
  inAddonPanel?: boolean;
  sort?: SortType;
}

/**
 * Displays component/story descriptions from various sources
 * @param props - Description configuration
 * @returns React component with description content
 */
function Description(props: DescriptionProps): React.ReactElement;

interface DescriptionProps {
  /** Where to get description from */
  of?: Of;
  /** Description type */
  type?: DescriptionType;
  /** Markdown content */
  children?: string;
}

enum DescriptionType {
  INFO = 'info',
  NOTES = 'notes', 
  DOCGEN = 'docgen',
  AUTO = 'auto'
}

/**
 * Displays syntax-highlighted source code
 * @param props - Source configuration options
 * @returns React component with formatted code
 */
function Source(props: SourceProps): React.ReactElement;

interface SourceProps {
  /** Story to show source for */
  of?: ModuleExport;
  /** Direct code to display */
  code?: string;
  /** Programming language for syntax highlighting */
  language?: SupportedLanguage;
  /** Code formatting options */
  format?: boolean | 'dedent' | string;
  /** Dark theme */
  dark?: boolean;
  /** Source extraction type */
  type?: 'auto' | 'code' | 'dynamic';
  /** Code transformation function */
  transform?: (code: string, storyContext: any) => string;
}

type SupportedLanguage = 
  | 'javascript' | 'typescript' | 'jsx' | 'tsx'
  | 'html' | 'css' | 'scss' | 'json' 
  | 'markdown' | 'yaml' | 'bash';

/**
 * Displays all component stories in organized layout
 * @param props - Stories configuration
 * @returns React component with all stories
 */
function Stories(props: StoriesProps): React.ReactElement;

interface StoriesProps {
  /** Section title */
  title?: React.ReactElement | string;
  /** Include primary story */
  includePrimary?: boolean;
}

/**
 * Displays the primary story with enhanced presentation
 * @param props - Primary story configuration
 * @returns React component with primary story
 */
function Primary(props: PrimaryProps): React.ReactElement;

interface PrimaryProps {
  /** Where to get primary story from */
  of?: Of;
}

/**
 * Main page title component
 */
function Title(props: {children?: React.ReactNode}): React.ReactElement;

/**
 * Page subtitle component
 */
function Subtitle(props: {children?: React.ReactNode}): React.ReactElement;

/**
 * Section heading component
 */
function Heading(props: {children?: React.ReactNode}): React.ReactElement;

/**
 * Subsection heading component
 */
function Subheading(props: {children?: React.ReactNode}): React.ReactElement;

/**
 * Associates MDX file with CSF file metadata
 */
function Meta(props: {of?: ModuleExports; title?: string}): React.ReactElement;

/**
 * Renders markdown content in docs
 */
function Markdown(props: {children: string}): React.ReactElement;

/**
 * Creates linkable anchors in documentation
 */
function Anchor(props: {storyId: string}): React.ReactElement;

/**
 * Layout wrapper component
 */
function Wrapper(props: {children: React.ReactNode}): React.ReactElement;

/**
 * Removes Storybook styling from content
 */
function Unstyled(props: {children: React.ReactNode}): React.ReactElement;

/**
 * Main context for docs functionality 
 */
const DocsContext: React.Context<DocsContextProps>;

/**
 * Resolves 'of' prop to component/story/meta references
 * @param moduleExportOrType - Reference to resolve
 * @param validTypes - Valid resolution types
 * @returns Resolved reference data
 */
function useOf<TType>(
  moduleExportOrType: Of, 
  validTypes?: TType[]
): ResolvedOf<TType>;

/**
 * Manages story arguments with update/reset functionality
 * @returns Tuple of current args, update function, reset function
 */
function useArgs(): [Args, (args: Args) => void, () => void];

/**
 * Manages global parameters
 * @returns Tuple of current globals, update function
 */
function useGlobals(): [Args, (globals: Args) => void];

/**
 * Retrieves story data and context
 * @param storyId - Story identifier
 * @returns Story data and context
 */
function useStory(storyId?: string): StoryContext | null;

/**
 * Transforms source code for display with formatting
 * @param story - Story context
 * @param source - Source configuration
 * @returns Transformed source code
 */
function useTransformCode(story: any, source?: SourceProps): string;

type Of = 
  | React.ComponentType
  | ModuleExports
  | ModuleExport;

interface ResolvedOf<TType> {
  type: TType;
  story?: any;
  component?: React.ComponentType;
  meta?: any;
}

/**
 * Color documentation container
 */
function ColorPalette(props: ColorPaletteProps): React.ReactElement;

/**
 * Individual color display with title and subtitle
 */
function ColorItem(props: ColorItemProps): React.ReactElement;

interface ColorPaletteProps {
  children: React.ReactNode;
}

interface ColorItemProps {
  /** Color name/title */
  title: string;
  /** Color description */
  subtitle: string;
  /** Color values as array or object */
  colors: Colors;
}

type Colors = string[] | Record<string, string>;

/**
 * Icon documentation container
 */
function IconGallery(props: IconGalleryProps): React.ReactElement;

/**
 * Individual icon display with name
 */
function IconItem(props: IconItemProps): React.ReactElement;

interface IconGalleryProps {
  children: React.ReactNode;
}

interface IconItemProps {
  /** Icon name */
  name: string;
  /** Icon element */
  children?: React.ReactNode;
}

/**
 * Typography demonstration component
 */
function Typeset(props: TypesetProps): React.ReactElement;

interface TypesetProps {
  /** Font family name */
  fontFamily?: string;
  /** Array of font sizes to display */
  fontSizes: (string | number)[];
  /** Font weight */
  fontWeight?: number;
  /** Sample text to display */
  sampleText?: string;
}

/**
 * Generated table of contents from headings
 * @param props - TOC configuration
 * @returns React component with navigation links
 */
function TableOfContents(props: TableOfContentsProps): React.ReactElement;

interface TableOfContentsProps {
  /** CSS class name */
  className?: string;
  /** Heading levels to include */
  headingSelector?: string;
  /** Disable TOC generation */
  disable?: boolean;
}

/**
 * Automatic documentation page component
 * Generates comprehensive docs from story metadata
 */
function DocsPage(): React.ReactElement;

/**
 * Container for docs pages with theme and context setup
 * @param props - Container configuration
 * @returns React component wrapping docs content
 */
function DocsContainer(props: DocsContainerProps): React.ReactElement;

/**
 * Story wrapper component for docs rendering
 * @param props - Story wrapper configuration  
 * @returns React component wrapping individual stories
 */
function DocsStory(props: DocsStoryProps): React.ReactElement;

/**
 * Main docs rendering component
 * @param props - Docs configuration
 * @returns React component with complete docs
 */
function Docs(props: DocsProps): React.ReactElement;

interface DocsContainerProps {
  /** Docs rendering context */
  context: DocsContextProps;
  /** Child components */
  children: React.ReactNode;
  /** Theme configuration */
  theme?: ThemeVars;
}

interface DocsStoryProps {
  /** Story export */
  of: ModuleExport;
  /** Expanded view mode */
  expanded?: boolean;
  /** Include source */
  withSource?: boolean;
}

interface DocsProps {
  /** Documentation renderer */
  renderer?: DocsRenderer;
  /** Layout configuration */
  layout?: 'sidebar' | 'canvas';
}

/**
 * External docs integration component
 * @param props - External docs configuration
 * @returns React component with external docs
 */
function ExternalDocs(props: ExternalDocsProps): React.ReactElement;

/**
 * Container for external documentation
 * @param props - External container configuration
 * @returns React component wrapping external content
 */
function ExternalDocsContainer(props: ExternalDocsContainerProps): React.ReactElement;

interface ExternalDocsProps {
  /** External docs URL or content */
  source: string | React.ComponentType;
  /** Display title */
  title?: string;
  /** Integration mode */
  mode?: 'iframe' | 'embed';
}

interface ExternalDocsContainerProps {
  /** Container content */
  children: React.ReactNode;
  /** Custom styling */
  className?: string;
}

interface CanvasBlockParameters {
  /** Source code display configuration */
  sourceState?: 'hidden' | 'shown' | 'none';
  /** Story layout in canvas */
  layout?: 'padded' | 'fullscreen' | 'centered';
  /** Disable source snippets */
  disable?: boolean;
  /** Additional actions for toolbar */
  additionalActions?: ActionItem[];
  /** Custom source transformation */
  withSource?: SourceType;
}

interface SourceBlockParameters {
  /** Source code type */
  type?: 'auto' | 'code' | 'dynamic';
  /** Code language */
  language?: SupportedLanguage;
  /** Code formatting */
  format?: boolean | 'dedent';
  /** Exclude from source */
  excludeDecorators?: boolean;
  /** Source transformation function */
  transform?: (code: string, context: any) => string;
}

interface StoryBlockParameters {
  /** Auto-play interaction tests */
  autoplay?: boolean;
  /** Inline rendering mode */
  inline?: boolean;
  /** Story height for iframe */
  height?: string;
  /** Primary story marker */
  iframeHeight?: number;
}

interface ActionItem {
  /** Action title */
  title: string;
  /** Click handler */
  onClick: () => void;
  /** Disabled state */
  disabled?: boolean;
  /** Icon component */
  icon?: React.ComponentType;
}

type SourceType = 
  | 'auto'
  | 'code' 
  | 'dynamic'
  | 'none';

interface ArgType {
  /** Argument name */
  name: string;
  /** Argument description */
  description?: string;
  /** Default value */
  defaultValue?: any;
  /** Type information */
  type?: {
    name: string;
    required?: boolean;
  };
  /** Control configuration */
  control?: ControlConfig;
  /** Table configuration */
  table?: {
    category?: string;
    subcategory?: string;
    disable?: boolean;
  };
}

interface Args {
  [key: string]: any;
}

interface ControlConfig {
  /** Control type */
  type?: string;
  /** Control options */
  options?: any[];
  /** Control labels */
  labels?: Record<string, string>;
}

interface ThemeVars {
  /** Base theme colors */
  base?: 'light' | 'dark';
  /** Color overrides */
  colorPrimary?: string;
  colorSecondary?: string;
  /** Typography overrides */
  fontBase?: string;
  fontCode?: string;
  /** Brand configuration */
  brandTitle?: string;
  brandUrl?: string;
  brandImage?: string;
}

interface DocsRenderer {
  /** Render method */
  render: (story: any, context: any) => React.ReactElement;
  /** Story configuration */
  storyContext?: any;
  /** Global configuration */
  globals?: Args;
}