Markdown Components

/**
 * Heading level 1 component
 * @param {Object} props - Heading component props
 */
function H1(props);

/**
 * Heading level 2 component  
 * @param {Object} props - Heading component props
 */
function H2(props);

/**
 * Heading level 3 component
 * @param {Object} props - Heading component props
 */
function H3(props);

/**
 * Heading level 4 component
 * @param {Object} props - Heading component props
 */
function H4(props);

/**
 * Heading level 5 component
 * @param {Object} props - Heading component props
 */
function H5(props);

/**
 * Heading level 6 component
 * @param {Object} props - Heading component props
 */
function H6(props);

interface HeadingProps {
  /** Optional ID attribute for the heading */
  id?: string;
  /** Heading content */
  children?: React.ReactNode;
}

# This renders as H1
## This renders as H2
### This renders as H3
#### This renders as H4
##### This renders as H5
###### This renders as H6

/**
 * Paragraph component for text blocks
 * @param {Object} props - Paragraph component props
 */
function P(props);

/**
 * Anchor link component with external link styling
 * @param {Object} props - Anchor component props
 */
function A(props);

/**
 * List item component
 * @param {Object} props - List item component props
 */
function LI(props);

/**
 * Unordered list component
 * @param {Object} props - List component props
 */
function UL(props);

interface TextComponentProps {
  /** Component content */
  children?: React.ReactNode;
}

interface AnchorProps extends TextComponentProps {
  /** Required href attribute for the link */
  href: string;
}

This is a paragraph that renders as P component.

[This is a link](https://example.com) that renders as A component.

- This list item renders as LI
- Inside a UL component

/**
 * Code component with syntax highlighting using Storybook's SyntaxHighlighter
 * @param {Object} props - Code component props
 */
function Code(props);

interface CodeProps {
  /** Code content to display */
  code: string;
  /** Programming language for syntax highlighting */
  language?: string;
}

/**
 * Preformatted text block component with copy functionality
 * @param {Object} props - Pre component props
 */
function Pre(props);

interface PreProps {
  /** Content to display in pre block */
  children?: React.ReactNode;
  /** Theme object with pre styling */
  theme?: {
    pre?: Object;
  };
}

/**
 * Blockquote component for quoted text with special styling
 * @param {Object} props - Blockquote component props
 */
function Blockquote(props);

interface BlockquoteProps {
  /** Quote content */
  children?: React.ReactNode;
}

Here is some `inline code` that uses the Code component.

```javascript
// This code block uses the Code component with language="javascript"
function example() {
  return "formatted code";
}
\```

const defaultComponents = {
  h1: H1,
  h2: H2, 
  h3: H3,
  h4: H4,
  h5: H5,
  h6: H6,
  code: Code,
  p: P,
  a: A,
  li: LI,
  ul: UL,
  blockquote: Blockquote,
};

import { withInfo } from "@storybook/addon-info";

// Custom heading component
const CustomH1 = ({ children }) => (
  <h1 style={{ color: 'red', fontSize: '2rem' }}>
    🎯 {children}
  </h1>
);

// Custom code component
const CustomCode = ({ children, language }) => (
  <pre style={{ backgroundColor: '#f5f5f5', padding: '1rem' }}>
    <code className={`language-${language}`}>
      {children}
    </code>
  </pre>
);

// Use custom components
addDecorator(
  withInfo({
    components: {
      h1: CustomH1,
      code: CustomCode,
    },
  })
);

export const StoryWithCustomMarkdown = () => <Component />;
StoryWithCustomMarkdown.story = {
  parameters: {
    info: {
      text: `
        # Custom Styled Heading
        
        This story uses \`custom components\` for rendering.
      `,
      components: {
        h1: ({ children }) => (
          <h1 style={{ borderBottom: '2px solid blue' }}>
            {children}
          </h1>
        ),
        code: ({ children }) => (
          <code style={{ backgroundColor: 'yellow' }}>
            {children}
          </code>
        ),
      },
    },
  },
};

// Internal marksy configuration
const marksy = require('marksy')({
  createElement: React.createElement,
  elements: customComponents,
});

// Processes markdown text into React elements
const processedContent = marksy(markdownText).tree;

# H1 Header
## H2 Header  
### H3 Header

**Bold text**
*Italic text*
`Inline code`

- Unordered list item
- Another item

1. Ordered list item
2. Another ordered item

[Link text](https://example.com)

```javascript
function example() {
  return "code block";
}
```

export const DocumentedComponent = () => <Component />;
DocumentedComponent.story = {
  parameters: {
    info: {
      text: `
        # Component Documentation
        
        This component provides advanced functionality for data processing.
        
        ## Usage Examples
        
        Basic usage:
        \`\`\`javascript
        <Component data={[1, 2, 3]} />
        \`\`\`
        
        With options:
        \`\`\`javascript
        <Component 
          data={complexData}
          options={{ format: 'json' }}
          onComplete={handleComplete}
        />
        \`\`\`
        
        ## Important Notes
        
        - Always provide the \`data\` prop
        - The \`onComplete\` callback is optional
        - Use \`options.format\` to control output format
      `,
    },
  },
};

// React elements can be used directly instead of markdown strings
const dynamicInfo = (
  <div>
    <h2>Dynamic Documentation</h2>
    <p>This content is generated dynamically.</p>
    <button onClick={() => alert('Interactive!')}>
      Click me
    </button>
  </div>
);

export const DynamicExample = () => <Component />;
DynamicExample.story = {
  parameters: {
    info: dynamicInfo,
  },
};

// DEPRECATED: Use 'components' instead
interface DeprecatedOptions {
  /** @deprecated Use 'components' instead */
  marksyConf?: { [key: string]: React.ComponentType };
}

// OLD (deprecated)
withInfo({
  marksyConf: {
    h1: CustomH1,
    code: CustomCode,
  },
});

// NEW (recommended)
withInfo({
  components: {
    h1: CustomH1, 
    code: CustomCode,
  },
});