Prop Tables

/**
 * Default prop table component for displaying component props
 * @param {Object} props - PropTable component props
 */
function PropTable(props);

interface PropTableProps {
  /** React component type to analyze for props */
  type?: Function;
  /** Pre-computed array of prop definitions to display */
  propDefinitions?: Array<PropDefinition>;
  /** Array of prop names to exclude from the table */
  excludedPropTypes?: Array<string>;
  /** Maximum object keys to display in prop values */
  maxPropObjectKeys: number;
  /** Maximum array length to display in prop values */
  maxPropArrayLength: number;
  /** Maximum string length to display in prop values */
  maxPropStringLength: number;
}

interface PropDefinition {
  /** Property name */
  property: string;
  /** PropType information object or string describing the type */
  propType: Object | string;
  /** Whether the prop is required */
  required?: boolean;
  /** Prop description from React docgen or JSDoc comments */
  description?: string;
  /** Default value for the prop */
  defaultValue?: any;
}

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

// Used automatically by withInfo, but can be used standalone
<PropTable
  type={MyComponent}
  maxPropObjectKeys={5}
  maxPropArrayLength={3}
  maxPropStringLength={100}
  excludedPropTypes={['children']}
/>

/**
 * Creates a table component that extracts prop definitions from component types
 * @param {React.ComponentType} Component - Base table component to wrap
 * @returns {React.ComponentType} Enhanced table component with prop extraction
 */
function makeTableComponent(Component);

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

// Create custom table component
const MyCustomTable = ({ propDefinitions }) => (
  <div>
    {propDefinitions.map(prop => (
      <div key={prop.property}>
        <strong>{prop.property}</strong>: {prop.propType}
      </div>
    ))}
  </div>
);

const EnhancedTable = makeTableComponent(MyCustomTable);

// Use in withInfo
addDecorator(withInfo({ TableComponent: EnhancedTable }));

/**
 * Formats multi-line text with proper line breaks for display
 * @param {string} input - Text input to format
 * @returns {React.ReactNode} Formatted text with line breaks
 */
function multiLineText(input);

/**
 * Renders property values with syntax highlighting and formatting
 * @param {Object} props - PropVal component props
 */
function PropVal(props);

interface PropValProps {
  /** Value to display */
  val?: any;
  /** Maximum object keys to display */
  maxPropObjectKeys?: number;
  /** Maximum array length to display */
  maxPropArrayLength?: number;
  /** Maximum string length to display */
  maxPropStringLength?: number;
  /** Maximum props per line for objects/arrays */
  maxPropsIntoLine?: number;
  /** Nesting level for indentation */
  level?: number;
  /** Theme configuration for colors */
  theme?: {
    codeColors?: {
      func?: string;
      attr?: string;
      object?: string;
      array?: string;
      number?: string;
      string?: string;
      bool?: string;
    };
  };
  /** Custom value styles override */
  valueStyles?: ValueStyles;
}

/**
 * Renders prop type information with proper formatting
 * @param {Object} props - PrettyPropType component props
 */
function PrettyPropType(props);

interface PrettyPropTypeProps {
  /** PropType information to render */
  propType?: TypeInfo;
  /** Nesting depth for complex types */
  depth?: number;
}

interface TypeInfo {
  /** Type name (e.g., 'string', 'number', 'shape', 'arrayOf') */
  name: string;
  /** Additional type information for complex types */
  value?: any;
  /** For union types, array of possible types */
  computed?: boolean;
  /** Raw PropType for advanced processing */
  raw?: string;
}

interface ValueStyles {
  func?: Object;
  attr?: Object;
  object?: Object;
  array?: Object;
  number?: Object;
  string?: Object;
  bool?: Object;
  empty?: Object;
}

/**
 * Main table container with info-table CSS class
 * @param {Object} props - Table component props
 */
function Table(props);

/**
 * Table header section component
 * @param {Object} props - Thead component props
 */
function Thead(props);

/**
 * Table body section component
 * @param {Object} props - Tbody component props
 */
function Tbody(props);

/**
 * Table row component
 * @param {Object} props - Tr component props
 */
function Tr(props);

/**
 * Table header cell component
 * @param {Object} props - Th component props
 */
function Th(props);

/**
 * Table data cell component with optional monospace styling
 * @param {Object} props - Td component props
 */
function Td(props);

interface TableProps {
  /** Table content (thead, tbody, tr elements) */
  children: React.ReactElement | React.ReactElement[];
}

interface TableSectionProps {
  /** Section content */
  children?: React.ReactNode;
}

interface TdProps {
  /** Apply monospace font styling */
  isMonospace?: boolean;
  /** Cell content */
  children?: React.ReactNode;
}

/**
 * Button component description from docgen
 * @param {Object} props - Component props
 */
const DocgenButton = ({ disabled, label, onClick }) => (
  <button disabled={disabled} onClick={onClick}>
    {label}
  </button>
);

DocgenButton.propTypes = {
  /** Boolean indicating whether the button should render as disabled */
  disabled: PropTypes.bool,
  /** Button label text */
  label: PropTypes.string.isRequired,
  /** Click handler function */
  onClick: PropTypes.func,
};

import PropTypes from 'prop-types';

const Component = ({ name, age, isActive }) => (
  <div>{name} is {age} years old</div>
);

Component.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number,
  isActive: PropTypes.bool,
};

Component.defaultProps = {
  age: 0,
  isActive: false,
};

import PropTypes from 'prop-types';

const ComplexComponent = () => <div />;

ComplexComponent.propTypes = {
  // Shape (object with specific structure)
  user: PropTypes.shape({
    name: PropTypes.string.isRequired,
    email: PropTypes.string,
    preferences: PropTypes.object,
  }),
  
  // Array of specific type
  items: PropTypes.arrayOf(PropTypes.string),
  
  // Object with values of specific type
  mapping: PropTypes.objectOf(PropTypes.number),
  
  // One of specific values (enum)
  status: PropTypes.oneOf(['active', 'inactive', 'pending']),
  
  // One of multiple types (union)
  value: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.bool,
  ]),
  
  // Instance of specific class
  date: PropTypes.instanceOf(Date),
  
  // Function with specific signature
  callback: PropTypes.func,
};

// Create fully custom prop table
const CustomPropTable = ({ propDefinitions }) => {
  const requiredProps = propDefinitions.filter(prop => prop.required);
  const optionalProps = propDefinitions.filter(prop => !prop.required);
  
  return (
    <div>
      {requiredProps.length > 0 && (
        <div>
          <h4>Required Props</h4>
          {requiredProps.map(prop => (
            <div key={prop.property}>
              <code>{prop.property}</code>: {prop.propType.name}
              {prop.description && <p>{prop.description}</p>}
            </div>
          ))}
        </div>
      )}
      
      {optionalProps.length > 0 && (
        <div>
          <h4>Optional Props</h4>
          {optionalProps.map(prop => (
            <div key={prop.property}>
              <code>{prop.property}</code>: {prop.propType.name}
              {prop.defaultValue !== undefined && (
                <span> = {String(prop.defaultValue)}</span>
              )}
              {prop.description && <p>{prop.description}</p>}
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

// Use in info addon
addDecorator(withInfo({ TableComponent: CustomPropTable }));

// Exclude specific props from display
export const CleanExample = () => <Component />;
CleanExample.story = {
  parameters: {
    info: {
      propTables: [Component],
      excludedPropTypes: ['children', 'className', 'style'],
    },
  },
};