Numeric literals don't work properly with defaultValue

[ajosedev]

Describe the bug
Numeric literals don't work with a number defaultValue on first load.
I believe this is related to the change to deprecate argTypes.defaultValue, but I believe the code in the repro should work as-is. It does work when passing a string as a defaultValue, even if the type is a numeric literal.

To Reproduce
https://github.com/ajosedev/sb-default-value-numeric-repro

System

Environment Info:

  System:
    OS: macOS 11.4
    CPU: (8) x64 Intel(R) Core(TM) i7-8569U CPU @ 2.80GHz
  Binaries:
    Node: 14.16.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.11 - /usr/local/bin/npm
  Browsers:
    Chrome: 91.0.4472.114
    Firefox: 89.0
    Safari: 14.1.1

Additional context
I'm unsure if this is a problem with Storybook as it only started happening when upgrading from 6.1.20, or if it's in the underlying docgen code.

The behaviour only seems to happen on a refresh of the page. Meaning that if you navigate to the page from another story, the defaultValue will work even if it's a number.

Also of note, you can see the console log for argTypes.sizeAsNumber.options is an array of strings.

Let me know if I've set up the repro correctly, haven't done many of these 🙏

[shilman]

This looks like a bug in the new default handling code and/or the URL serialization

  args: {
    sizeAsNumber: 1,
    sizeAsNumberUsedAsString: "1",
  },

What's happening:

• User is setting the args correctly
• The numeric arg is incorrectly getting set to undefined because it's identical to the default vale
• This is getting locked into the URL, and restored on reload

[shilman]

Something to do with enum handling:

  "argTypes": {
    "sizeAsNumber": {
      "control": {
        "type": "radio"
      },
      "options": [
        "1",
        "2",
        "3"
      ],
      "type": {
        "name": "enum",
        "required": true,
        "value": [
          "1",
          "2",
          "3"
        ]
      },

[tmeasday]

Ok the problem is this line @ghengeveld :

storybook/lib/client-api/src/story_store.ts

Line 283 in bd90a23

foundStory.args = validateOptions(foundStory.args, foundStory.argTypes);

The proximate cause is that the arg type is being detected as a set of strings as options.

I think the idea here is off though. We can't rely on arg types being right (this case being a great example). We should not be overriding something explicit (args.sizeAsNumber = 1) because of something inferred (argTypes.sizeAsNumber.options = ['1', '2', '3']).

Also I find it kind of weird that this code changes args without calling updateStoryArgs. Is that something we discussed already? It feels kind of like it is "cheating" doing that.

[ajosedev]

Per @tmeasday's suggestion on another issue I was having that may be related, I did some debugging around that line mentioned. I posted this in Discord but I'll add it here too in case it's helpful:

On first load, before calling validateOptions, foundStory.args contains properties and values for only the set args in the stories file - defined in both the default export as well as defined at a story-level.
After, it contains properties for all possible args (I imagine seeded from argTypes), setting each of them to undefined.
No logs are called when navigating from another story, i.e. not first load.

When dealing with a numeric literal as mentioned in this issue, it exists in the first log, but is entirely removed from the second. Other args that match types properly (e.g. children) are present in both logs.