### Start Local Development Server

Source: https://github.com/styleguidist/react-docgen-typescript/blob/master/examples/react-styleguidist-example/README.md

Execute this command to start the project's local development server. The application will typically be accessible in your web browser at http://localhost:6060/.

```bash
npm start
```

--------------------------------

### Install Node.js Project Dependencies

Source: https://github.com/styleguidist/react-docgen-typescript/blob/master/examples/react-styleguidist-example/README.md

Run this command to install all required Node.js packages for the project. This should be done once after cloning the repository or when dependencies change.

```bash
npm install
```

--------------------------------

### Install react-docgen-typescript

Source: https://github.com/styleguidist/react-docgen-typescript/blob/master/README.md

Installs the `react-docgen-typescript` package as a development dependency using npm.

```bash
npm install --save-dev react-docgen-typescript
```

--------------------------------

### React Column Component Usage Example

Source: https://github.com/styleguidist/react-docgen-typescript/blob/master/examples/react-styleguidist-example/components/Column.md

Illustrates the basic usage of a React `Column` component, demonstrating how to pass different types of props such as a number (`prop2`), `null` (`prop3`), and a string (`prop4`). This snippet shows a common pattern for component instantiation in JSX.

```jsx
<Column prop2={0} prop3={null} prop4="option1" />
```

--------------------------------

### Parse a file for docgen information with default options

Source: https://github.com/styleguidist/react-docgen-typescript/blob/master/README.md

Demonstrates how to use the `parse` function from `react-docgen-typescript` to extract documentation from a TypeScript component file, including an example of passing options.

```typescript
const docgen = require("react-docgen-typescript");

const options = {
  savePropValueAsString: true,
};

// Parse a file for docgen info
docgen.parse("./path/to/component", options);
```

--------------------------------

### React Column Component Usage Example

Source: https://github.com/styleguidist/react-docgen-typescript/blob/master/examples/react-styleguidist-sections-example/components/Column.md

Demonstrates how to use the Column component with various prop types including number, null, and string literals.

```jsx
<Column prop2={0} prop3={null} prop4="option1" />
```

--------------------------------

### React Class Component with TypeScript Props Example

Source: https://github.com/styleguidist/react-docgen-typescript/blob/master/README.md

Defines a React class component `Column` and its `IColumnProps` interface in TypeScript. This example shows how `react-docgen-typescript` parses JSDoc comments, optional properties, and various type definitions for component documentation.

```javascript
import * as React from "react";
import { Component } from "react";

/**
 * Column properties.
 */
export interface IColumnProps {
  /** prop1 description */
  prop1?: string;
  /** prop2 description */
  prop2: number;
  /**
   * prop3 description
   */
  prop3: () => void;
  /** prop4 description */
  prop4: "option1" | "option2" | "option3";
}

/**
 * Form column.
 */
export class Column extends Component<IColumnProps, {}> {
  render() {
    return <div>Test</div>;
  }
}
```

--------------------------------

### React Functional Component with TypeScript Props Example

Source: https://github.com/styleguidist/react-docgen-typescript/blob/master/README.md

Illustrates a React functional component `Grid` with its `IGridProps` interface in TypeScript. This snippet demonstrates how `react-docgen-typescript` extracts documentation from functional components, including prop types and descriptions.

```javascript
import * as React from "react";

/**
 * Grid properties.
 */
export interface IGridProps {
  /** prop1 description */
  prop1?: string;
  /** prop2 description */
  prop2: number;
  /**
   * prop3 description
   */
  prop3: () => void;
  /** Working grid description */
  prop4: "option1" | "option2" | "option3";
}

/**
 * Form Grid.
 */
export const Grid = (props: IGridProps) => {
  const smaller = () => {
    return;
  };
  return <div>Grid</div>;
};
```

--------------------------------

### Integrate react-docgen-typescript with React Styleguidist

Source: https://github.com/styleguidist/react-docgen-typescript/blob/master/README.md

Configures React Styleguidist to use `react-docgen-typescript` for parsing component props. Examples include using the default configuration and specifying a custom `tsconfig.json` file.

```javascript
module.exports = {
  propsParser: require("react-docgen-typescript").withDefaultConfig([
    parserOptions,
  ]).parse,
};
```

```javascript
module.exports = {
  propsParser: require("react-docgen-typescript").withCustomConfig(
    "./tsconfig.json",
    [parserOptions]
  ).parse,
};
```

--------------------------------

### TypeScript Resolver for Styled Components

Source: https://github.com/styleguidist/react-docgen-typescript/blob/master/README.md

Provides a `componentNameResolver` function example in TypeScript for `react-docgen-typescript`, specifically tailored to identify and resolve names for styled components using `getDefaultExportForFile`.

```typescript
componentNameResolver: (exp, source) =>
  exp.getName() === "StyledComponentClass" && getDefaultExportForFile(source);
```

--------------------------------

### Create custom parsers with specific TypeScript or docgen configurations

Source: https://github.com/styleguidist/react-docgen-typescript/blob/master/README.md

Shows various methods to create custom parsers: `withDefaultConfig` for custom docgen options, `withCompilerOptions` for custom TypeScript compiler options, and `withCustomConfig` for using an existing `tsconfig.json` file.

```typescript
const docgen = require("react-docgen-typescript");

// Create a parser with the default typescript config and custom docgen options
const customParser = docgen.withDefaultConfig(options);

const docs = customParser.parse("./path/to/component");

// Create a parser with the custom typescript and custom docgen options
const customCompilerOptionsParser = docgen.withCompilerOptions(
  { esModuleInterop: true },
  options
);

// Create a parser with using your typescript config
const tsConfigParser = docgen.withCustomConfig("./tsconfig.json", {
  savePropValueAsString: true,
});
```

--------------------------------

### react-docgen-typescript Parser Options

Source: https://github.com/styleguidist/react-docgen-typescript/blob/master/README.md

Detailed documentation for configuration options available in `react-docgen-typescript` to customize prop filtering, component name resolution, and value extraction from enums/unions.

```APIDOC
propFilter:
  type: FilterOptions | PropFilter
  description: Allows you to omit certain props from documentation generation.
  FilterOptions:
    skipPropsWithName: string[] | string
      description: An array of prop names or a single prop name to omit.
    skipPropsWithoutDoc: boolean
      description: If true, props without a JSDoc comment will be omitted.
  PropFilter:
    signature: (prop: PropItem, component: Component) => boolean
    parameters:
      prop: PropItem
      component: Component
    returns: boolean
      description: Returns true to include the prop, false to omit it.

componentNameResolver:
  type: (exp: ts.Symbol, source: ts.SourceFile) => string | undefined | null | false
  description: A function to resolve the component name. If a string is returned, that name is used; otherwise, the default parser logic is applied.

shouldExtractLiteralValuesFromEnum:
  type: boolean
  description: If set to true, string enums and unions will be converted to docgen enum format. Useful for Storybook addon-smart-knobs.

shouldExtractValuesFromUnion:
  type: boolean
  description: If set to true, every unions will be converted to docgen enum format.

shouldSortUnions:
  type: boolean
  description: When used in combination with shouldExtractValuesFromUnion or shouldExtractLiteralValuesFromEnum, sorts union members in string-sort order when set to true. This is useful for ensuring the same order of members every time.

skipChildrenPropWithoutDoc:
  type: boolean
  default: true
  description: If set to false, the docs for the `children` prop will be generated even without an explicit description.

shouldRemoveUndefinedFromOptional:
  type: boolean
  description: If set to true, types that are optional will not display " | undefined" in the type.
```

--------------------------------

### JavaScript Default Props Input for Docgen Processing

Source: https://github.com/styleguidist/react-docgen-typescript/blob/master/README.md

Demonstrates how `Component.defaultProps` are defined in JavaScript, serving as input for `react-docgen-typescript` to extract property default values and types.

```javascript
Component.defaultProps = {
  counter: 123,
  disabled: false,
};
```

--------------------------------

### Docgen Output with savePropValueAsString Enabled

Source: https://github.com/styleguidist/react-docgen-typescript/blob/master/README.md

Illustrates the structured output generated by `react-docgen-typescript` when `savePropValueAsString` is true. Default values are converted to strings, and inferred types are included.

```javascript
  counter: {
      defaultValue: '123',
      required: true,
      type: 'number'
  },
  disabled: {
      defaultValue: 'false',
      required: true,
      type: 'boolean'
  }
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.