Extracting type info from helper functions/utils?

[jgodi]

Is it possible to extract the types and get info for the following styles and dataTestIds as well? When I run parse on the following snippet I only get the props.

import React from 'react';
import { ClassesType } from '../types';

export const styles = () => {
  return {
    /** Color of the root */
    root: {
      color: 'red'
    }
  };
};

export const DataTestIds = {
  /** ONE */
  ONE: 'one'
};

export interface Example1ComponentProps {
  /**
   * Text to pass to the component
   * @default undefined
   */
  text: string;

  /**
   * Classes to pass to the component
   */
  classes?: ClassesType<typeof styles>;

  /** @private */
  prv?: string;
}

export const Example1Component = ({ text }: Example1ComponentProps) => {
  const test = styles();
  return (
    <div style={test.root} data-testid={DataTestIds.ONE}>
      Example 2 Component: {text}
    </div>
  );
};

The output is this:

[
  {
    "tags": {},
    "filePath": "example/example.tsx",
    "description": "",
    "displayName": "Example1Component",
    "methods": [],
    "props": {
      "text": {
        "defaultValue": { "value": "undefined" },
        "description": "Text to pass to the component",
        "name": "text",
        "parent": {
          "fileName": "example/example.tsx",
          "name": "Example1ComponentProps"
        },
        "declarations": [
          {
            "fileName": "example/example.tsx",
            "name": "Example1ComponentProps"
          }
        ],
        "required": true,
        "type": { "name": "string" }
      },
      "classes": {
        "defaultValue": null,
        "description": "Classes to pass to the component",
        "name": "classes",
        "parent": {
          "fileName": "example/example.tsx",
          "name": "Example1ComponentProps"
        },
        "declarations": [
          {
            "fileName": "example/example.tsx",
            "name": "Example1ComponentProps"
          }
        ],
        "required": false,
        "type": { "name": "ClassesType<() => { root: { color: string; }; }>" }
      }
    }
  }
]

My parser file looks like this:

import path from 'path';
import fs from 'fs';
import globby from 'globby';
import { withDefaultConfig } from 'react-docgen-typescript';

const customParser = withDefaultConfig({
  savePropValueAsString: true,
  shouldExtractLiteralValuesFromEnum: true
});

const paths = globby.sync([
  path.resolve(__dirname, '../packages/lib1/src/example/example.tsx')
]);

const docGen = customParser.parse(paths);

fs.writeFileSync(
  path.resolve(__dirname, './props.json'),
  JSON.stringify(docGen)
);

I am hoping to get types and info for the styles and dataTestIds so that I can show that in my custom documentation for props/styles/testing. This works in our storybook setup, but we are wanting to do a custom doc site and I am having troubles getting this to work.

Thank you!

[pvasek]

I think this is pretty common complain. Unfortunately, I think this can be handled for all cases only with completely different tool, something like https://typedoc.org/.

The output of react-docgen-typescript is only simple structure that's required by Styleguidist (with some small extensions) and it's not possible to handle everything that's supported in typescipt.

[github-actions[bot]]

There was no activity for a long time. The issue will be closed soon.

[github-actions[bot]]

Closing this issue as obsolete.