Cant use enum's in template

[MickL]

Describe the bug
Within an Angular component, declaring a class-/template-variable that is an enum, does not work in Storybook templates.

To Reproduce

export enum Animals {
   Cat,
   Dog,
   Mouse,
}

@Component({...})
export class MyComponent {
     Animals = Animals;
     someVal = Animals.Cat;
}

<div *ngIf="someVal === Animals.Cat">Works!</div>

I noticed this already in earlier versions of Storybook. Weirdly if I rename the enum while Storybook is running, it suddenly works. But if I stop the process or make build, its not working again.

System

  System:
    OS: macOS 11.6
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 16.8.0 - ~/.nvm/versions/node/v16.8.0/bin/node
    Yarn: 1.22.11 - ~/.nvm/versions/node/v16.8.0/bin/yarn
    npm: 7.21.1 - ~/.nvm/versions/node/v16.8.0/bin/npm
  Browsers:
    Chrome: 94.0.4606.81
    Safari: 15.0
  npmPackages:
    @storybook/addon-actions: ^6.4.0-beta.13 => 6.4.0-beta.13 
    @storybook/addon-essentials: ^6.4.0-beta.13 => 6.4.0-beta.13 
    @storybook/addon-links: ^6.4.0-beta.13 => 6.4.0-beta.13 
    @storybook/angular: ^6.4.0-beta.13 => 6.4.0-beta.13 
    @storybook/builder-webpack5: ^6.4.0-beta.13 => 6.4.0-beta.13 
    @storybook/manager-webpack5: ^6.4.0-beta.13 => 6.4.0-beta.13 

[MickL]

Is there any fix to this? Most of my stories are broken in multiple projects. Basically Storybook is unusable at the moment. My team and customers cant review the components in Storybook.

In the console it shows a warning:

The specified value "NaN" cannot be parsed, or is out of range.

[shilman]

@MickL Do you a have a reproduction repo you can share? If not, can you create one? See how to create a repro. We prioritize issues with reproductions over those without. Thank you! 🙏

[MickL]

Here is a reproduction repro:

https://github.com/MickL/storybook-enum-issue

As you can see in the story the enum is not working. If you start the Angular app normally with yarn start it is working fine.

Just to mention I already invested SO much time with problems I had with Storybook and creating Github issues. It hasnt been a good experience to use Storybook with Angular over the last year.

[MickL]

Will this ever be fixed or at least reviewed? Storybook is currently unusable in multiple huge projects we work on.

[shilman]

@storybookjs/angular This one is pretty strange. Is there something non-standard about how we compile templates? I can reproduce with the repo @MickL has provided above

[Marklb]

This seems to be an issue with Storybook and Compodoc.

Looking at Compodoc output the "defaultValue" is "Animals", which is not correct. I don't know what Compodoc should be expected to put for the default value, because I don't know how enums are supposed to be serialized/deserialized, but if Compodoc would have specified the "type" as "enum" then it would at least be more clear that the "defaultValue" shouldn't be a string. https://github.com/MickL/storybook-enum-issue/blob/main/documentation.json#L38

The bigger issue is that Storybook should have never touched that property. The property is not an input/output, so I see no reason for there to even be a control in the ArgsTable, unless there is a control manually configured in the "argTypes" for that story.

This should not be necessary, but a workaround is to specify the "props" manually, like the following:

const Template: Story<AnimalComponentComponent> = (
  args: AnimalComponentComponent
) => ({
  // props: args,
  props: {
    animal: args.animal,
  },
});

[mateuszo]

I've bumped into this issue myself. The workaround I used was to declare enum as a getter instead of a field like this:

@Component({...})
export class MyComponent {
    get animals() {
     return Animals;
    }
}

It's a simple workaround, but I dislike that it requires modifying the component code to make a component work with both storybook and app.

[MickL]

Coming back to Storybook 1 year later, still not fixed, still most of our components are broken. Sadly our team decided to use Storybook for a project.

[stefanoschrs]

Same issue here. When running Storybook all the enums stop working, when you rename the enum and rebuild it works...

[Crylion]

I agree, it's really not great having the enums not working.
We use enums a lot in our templates to avoid just using arbitrary string values. And for the actual angular applications, that never posed any problem.

[secheverryl]

This needs fixing not only enums are not working but functions, formControls, class variables have the same issue!.
This is really a blocker to use storybook on angular.
please fix as soon as possible. !urgent

[FrancoisTurpinLeocare]

Same for me. I notice that it's work's fine until documentation.json was regenerated, from that controls of enum not working anymore...

Can't use storybook in my angular project without this...

[valentinpalkovic]

@FrancoisTurpinLeocare Which version of Storybook are you using?

[FrancoisTurpinLeocare]

@valentinpalkovic I link a screenshot of my package.json.
I can't use prerelease because for the moment I'm blocked with Node 14

[valentinpalkovic]

Thank you @FrancoisTurpinLeocare. In Storybook 7.0 (currently in beta) we did a lot of improvements also related to Angular. Please check it out and let me know, if the issue still exists for you. Please read the migration guide and upgrade today if you want

npx storybook@next upgrade --prerelease

[shilman]

Removing this from the 7.0 burndown until we have a 7.0 reproduction

[valentinpalkovic]

Closing the issue because I cannot reproduce it in Storybook 7.0.x