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.

Sign up for GitHub

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

Jump to bottom

Better TS enum support #877

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

Better TS enum support #877

shilman opened this issue Nov 30, 2023 · 3 comments · May be fixed by #884
Labels
new feature

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!
@danez danez linked a pull request Dec 22, 2023 that will close this issue
Open
3 tasks
@valentinpalkovic valentinpalkovic mentioned this issue Feb 1, 2024
Open
@valentinpalkovic valentinpalkovic mentioned this issue Apr 6, 2024
Closed
@rvetere
Copy link
Contributor

rvetere commented May 14, 2024 •
edited
Loading

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

@kasperpeulen
Copy link

kasperpeulen commented Jun 14, 2024 •
edited
Loading

@shilman maybe this is actually a storybook integration problem instead. It seems that the enum is available.
cc @valentinpalkovic

@jtiala
Copy link

jtiala commented Nov 12, 2024 •
edited
Loading

the typescript type looks like this:

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

That prop is not an enum but a string literal union.

Docgen doesn't work for enums or string literal tuples with const assertion:

import React from "react";

type Pet1 = "cat" | "dog";

const petTupleValues = ["cat", "dog"] as const;
type PetTuple = typeof petTupleValues;
type Pet2 = PetTuple[number];

enum PetEnum {
  CAT = "cat",
  DOG = "dog",
}

type Pet3 = PetEnum;

export interface ExampleProps {
  /** String literal union. */
  unionProp?: Pet1;

  /** Tuple of string literals with const assertion. */
  tupleProp?: Pet2;

  /** Enum. */
  enumProp?: Pet3;
}

/** Example */
export const Example = ({
  unionProp = "cat",
  tupleProp = "cat",
  enumProp = PetEnum.CAT,
}: ExampleProps) => {
  const unionValue = typeof unionProp === "string" ? unionProp : "";
  const tupleValue = typeof tupleProp === "string" ? tupleProp : "";
  const enumValue = typeof enumProp === "string" ? enumProp : "";

  return (
    <ul>
      <li>Union: {unionValue}</li>
      <li>Tuple: {tupleValue}</li>
      <li>Enum: {enumValue}</li>
    </ul>
  );
};
{
  "example.tsx": [
    {
      "description": "Example",
      "methods": [],
      "displayName": "Example",
      "props": {
        "unionProp": {
          "required": false,
          "tsType": {
            "name": "union",
            "raw": "\"cat\" | \"dog\"",
            "elements": [
              {
                "name": "literal",
                "value": "\"cat\""
              },
              {
                "name": "literal",
                "value": "\"dog\""
              }
            ]
          },
          "description": "String literal union.",
          "defaultValue": {
            "value": "\"cat\"",
            "computed": false
          }
        },
        "tupleProp": {
          "required": false,
          "tsType": {
            "name": "petTupleValues[number]",
            "raw": "PetTuple[number]"
          },
          "description": "Tuple of string literals with const assertion.",
          "defaultValue": {
            "value": "\"cat\"",
            "computed": false
          }
        },
        "enumProp": {
          "required": false,
          "tsType": {
            "name": "PetEnum"
          },
          "description": "Enum.",
          "defaultValue": {
            "value": "PetEnum.CAT",
            "computed": true
          }
        }
      }
    }
  ]
}

Reproduction in Storybook here.

react-docgen-typescript analyses all of these three cases correctly.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
new feature
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

TS Enum support reactjs/react-docgen
5 participants
@danez @shilman @kasperpeulen @rvetere @jtiala