How to use the react-docgen-typescript.withCustomConfig function in react-docgen-typescript

const fs = require('fs');
const path = require('path');

const removeExternalDeps = propItem =>
  propItem.description && (!propItem.parent || !propItem.parent.fileName.includes('@types'));

const removeWrapperProps = (propItem, Component) => {
  return (
    Component.name === 'ModalWrapper' ||
    (propItem.parent && propItem.parent.name !== 'ModalWrapperProps')
  );
};

const parser = require('react-docgen-typescript').withCustomConfig(
  path.resolve(__dirname, '..', '..', 'lib', 'tsconfig.json'),
  {
    // @ts-ignore
    propFilter: (...args) => removeExternalDeps(...args) && removeWrapperProps(...args),
  }
);

const doc = {};
const srcPath = path.resolve(__dirname, '..', '..', 'lib', 'src');

const components = [
  'wrappers/ModalWrapper.tsx',
  'DatePicker/DatePicker.tsx',
  'DatePicker/KeyboardDatePicker.tsx',
  'TimePicker/TimePicker.tsx',
  'DateTimePicker/DateTimePicker.tsx',

const getTsProgramAndParser = (filePaths: string[]): [ts.Program, FileParser] => {
  // By default react-docgen-typescript creates new ts program on each file parsed.
  // This has a huge impact on performance resulting in perse time of 600-900ms per file.
  // To improve the performance, we are creating progrm once with all files to be processed.

  const tsConfig = parseTsConfig(`${process.cwd()}/packages/grafana-ui/tsconfig.json`);
  const tsProgram = ts.createProgram(filePaths, tsConfig);
  const tsParser = withCustomConfig(`${process.cwd()}/packages/grafana-ui/tsconfig.json`, {});
  return [tsProgram, tsParser];
};

const path = require("path");
const glob = require("glob");

module.exports = {
  // components: "src/components/**/*.tsx",
  components: ["src/components/box/*.tsx", "src/components/button/*.tsx"],
  propsParser: require("react-docgen-typescript").withCustomConfig(
    "./tsconfig.json",
    {
      componentNameResolver: (exp, source) => {
        return require("react-docgen-typescript").getDefaultExportForFile(
          source
        );
      }
    }
  ).parse,
  resolver: require("react-docgen").resolver.findAllComponentDefinitions
};

const path = require('path');
const semver = require('semver');
const parseTsComponent = require('react-docgen-typescript').withCustomConfig(
  path.join(__dirname, '../../tsconfig.json'),
  {
    propFilter: prop => !(prop.parent && /node_modules/.test(prop.parent.fileName)),
  },
).parse;
const parseJsComponent = require('react-docgen').parse;
const { packageVersion, styleguidistVersion, removeProps } = require('../helpers');

const styles = {
  StyleGuide: {
    '@global body': {
      fontFamily: '"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
      fontSize: 14,
    },
    '@font-face': {
      fontFamily: 'Segoe UI',

module.exports = async playroomConfig => {
  const {
    cwd,
    typeScriptFiles = ['**/*.{ts,tsx}', '!**/node_modules']
  } = playroomConfig;

  const tsConfigPath = await findUp('tsconfig.json', { cwd });

  if (!tsConfigPath) {
    return {};
  }

  try {
    const { parse } = require('react-docgen-typescript').withCustomConfig(
      tsConfigPath
    );
    const files = await fastGlob(typeScriptFiles, { cwd, absolute: true });
    const types = parse(files);
    const typesByDisplayName = keyBy(types, 'displayName');
    const parsedTypes = mapValues(typesByDisplayName, component =>
      mapValues(filterProps(component.props || {}), prop =>
        parsePropTypeName(prop.type.name)
      )
    );

    return parsedTypes;
  } catch (err) {
    console.error('Error parsing static types.');
    console.error(err);
    return {};

propsParser(filePath, source, resolver, handlers) {
    if (/.tsx$/.test(filePath)) {
      return require('react-docgen-typescript').withCustomConfig('./tsconfig.json', {
        propFilter(prop) {
          if (prop.parent) {
            return !prop.parent.fileName.includes('node_modules')
          }
          return true
        },
      }).parse(filePath)
    } else {
      return require('react-docgen').parse(source, resolver, handlers, { filename: filePath })
    }
  },
  webpackConfig: merge(webpackConfig, {

propsParser: (filePath, source, resolver, handlers) => {
        const result = require('react-docgen-typescript')
            .withCustomConfig('./tsconfig.json').parse(filePath, source, resolver, handlers);

        return result.map(component => {
            const {props} = component;
            const mappedProps = Object.values(props).reduce((previous, prop) => {
                const {name, type} = prop;
                if (type.name.includes('| undefined')) {
                    type.name = type.name.replace('| undefined', '');
                    if (!prop.defaultValue) prop.defaultValue = {value: 'null'};
                    if (type.name.startsWith('(') && type.name.endsWith(')')) {
                        type.name = type.name.slice(1, type.name.length - 2);
                    }
                }
                if (prop.defaultValue && prop.defaultValue.value.charAt(0) === '{') {
                    let value = prop.defaultValue.value;
                    value = value.replace(/(\n)+/g, '&');

* Copyright Zendesk, Inc.
 *
 * Use of this source code is governed under the Apache License, Version 2.0
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */

const path = require('path');
const reactDocgenTypescript = require('react-docgen-typescript');
const reactDocgen = require('react-docgen');

/**
 * Package specific styleguide configuration
 * https://github.com/styleguidist/react-styleguidist/blob/master/docs/Configuration.md
 */
module.exports = {
  propsParser: reactDocgenTypescript.withCustomConfig(
    path.resolve(__dirname, '../../tsconfig.json'),
    {
      propFilter: props => {
        return props.parent.fileName.indexOf('node_modules') === -1;
      }
    }
  ).parse,
  resolver: reactDocgen.resolver.findAllComponentDefinitions,
  sections: [
    {
      name: '',
      content: '../../packages/pagination/README.md'
    },
    {
      name: 'Examples',
      sections: [

const path = require('path');
const fastGlob = require('fast-glob').async;
const { parse: parseTs } = require('react-docgen-typescript').withCustomConfig(
  path.join(process.cwd(), 'tsconfig.json'),
);

module.exports = async ({ include = '', exclude: ignore = [] } = {}) => {
  const files = await fastGlob(include, { ignore });
  return parseTs(files);
};