Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Better TS enum support #877

Open
shilman opened this issue Nov 30, 2023 · 1 comment · May be fixed by #884
Open

Better TS enum support #877

shilman opened this issue Nov 30, 2023 · 1 comment · May be fixed by #884

Comments

@shilman
Copy link

shilman commented Nov 30, 2023

Reporting from storybookjs/storybook#24165

Currently TS enums analysis is lossy:

enum ButtonType {
  Button = 'button',
  Reset = 'reset',
  Submit = 'submit',
}

type ButtonTestProps = {
  type?: ButtonType;
};

export const ButtonTest = (props: ButtonTestProps) => {
  return <button {...props}>Test</button>;
};

Produces:

          "tsType": {
            "name": "ButtonType"
          },

Compare this to a union:

type ButtonType = "button" | "reset" | "submit";

Which produces:

          "tsType": {
            "name": "union",
            "raw": "\"button\" | \"reset\" | \"submit\"",
            "elements": [
              {
                "name": "literal",
                "value": "\"button\""
              },
              {
                "name": "literal",
                "value": "\"reset\""
              },
              {
                "name": "literal",
                "value": "\"submit\""
              }
            ]
          },

It would be fantastic if react-docgen could produce something similar for enums!

@rvetere
Copy link

rvetere commented May 14, 2024

I believe this is not the case anymore...? When i test enums in our project, i got this output:

"variant": {
  "tsType": {
    "name": "union",
    "raw": "\"standard\" | \"primary\"",
    "elements": [
      {
        "name": "literal",
        "value": "\"standard\""
      },
      {
        "name": "literal",
        "value": "\"primary\""
      }
    ]
  },
  "required": false,
  "description": "The variant of the button.",
  "defaultValue": {
    "value": "\"standard\"",
    "computed": false
  }
}

the typescript type looks like this:

export type ButtonProps = {
  /** The variant of the button. */
  variant?: "standard" | "primary";
};

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants