How to use react-docgen-typescript - 10 common examples

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
};

),
                    'rsg-components/Editor': path.join(__dirname, '.styleguide/EditorLoader'),
                },
            },
        }
    ),
    // getExampleFilename(componentPath) {
    //     return componentPath.replace(/\.tsx?$/, '.md');
    // },
    require: [
        path.join(__dirname, 'css/index.scss'),
        path.join(__dirname, 'docs/assets/css/project.css'),
        path.join(__dirname, 'docs/assets/css/local.css'),
    ],
    styleguideDir: './docs/docs',
    propsParser: require('react-docgen-typescript').withDefaultConfig([]).parse,

    // STYLES:
    showSidebar: true,
    theme: {
        baseBackground: '#fdfdfc',
        link: '#274e75',
        linkHover: '#90a7bf',
        border: '#e0d2de',
        fontFamily: {
            base: [
                'HelveticaNeue-Light',
                '-apple-system',
                'BlinkMacSystemFont',
                '"Segoe UI"',
                '"Roboto"',
                '"Oxygen"',

const parseTypescript = path => ensurePropsKey(typescriptParser.parse(path)[0] || {}); // react-docgen-typescript returns array, so

export const mapReactDocgenTypeScript: T.AnalysisMapper = async (
	path: string,
	ctx: T.AnalysisMapperContext
): Promise => {
	try {
		const info = reactDocgenTypescript.parse(path);
		if (info.length > 0) {
			ctx.analysis.attach(path, { type: label, payload: info });
		}
		// tslint:disable-next-line:no-empty
	} catch (err) {}
};

: options.propFilter,
    shouldExtractLiteralValuesFromEnum:
      options.shouldExtractLiteralValuesFromEnum,
  };

  // Configure parser using settings provided to loader.
  // See: node_modules/react-docgen-typescript/lib/parser.d.ts
  let parser: FileParser = withDefaultConfig(parserOptions);

  let compilerOptions: ts.CompilerOptions = {
    allowJs: true,
  };
  let tsConfigFile: ts.ParsedCommandLine | null = null;

  if (options.tsconfigPath) {
    parser = withCustomConfig(options.tsconfigPath, parserOptions);

    tsConfigFile = getTSConfigFile(options.tsconfigPath!);
    compilerOptions = tsConfigFile.options;

    const filesToLoad = tsConfigFile.fileNames;
    loadFiles(filesToLoad);
  } else if (options.compilerOptions) {
    parser = withCompilerOptions(options.compilerOptions, parserOptions);
    compilerOptions = options.compilerOptions;
  }

  if (!tsConfigFile) {
    const basePath = path.dirname(context.context);
    tsConfigFile = getDefaultTSConfigFile(basePath);

    const filesToLoad = tsConfigFile.fileNames;

const parserOptions: ParserOptions = {
    componentNameResolver: options.componentNameResolver,
    propFilter:
      options.skipPropsWithName || options.skipPropsWithoutDoc
        ? {
            skipPropsWithName: options.skipPropsWithName || undefined,
            skipPropsWithoutDoc: options.skipPropsWithoutDoc || undefined,
          }
        : options.propFilter,
    shouldExtractLiteralValuesFromEnum:
      options.shouldExtractLiteralValuesFromEnum,
  };

  // Configure parser using settings provided to loader.
  // See: node_modules/react-docgen-typescript/lib/parser.d.ts
  let parser: FileParser = withDefaultConfig(parserOptions);

  let compilerOptions: ts.CompilerOptions = {
    allowJs: true,
  };
  let tsConfigFile: ts.ParsedCommandLine | null = null;

  if (options.tsconfigPath) {
    parser = withCustomConfig(options.tsconfigPath, parserOptions);

    tsConfigFile = getTSConfigFile(options.tsconfigPath!);
    compilerOptions = tsConfigFile.options;

    const filesToLoad = tsConfigFile.fileNames;
    loadFiles(filesToLoad);
  } else if (options.compilerOptions) {
    parser = withCompilerOptions(options.compilerOptions, parserOptions);

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 {};