Storybook: [addon-knobs] unexpected string type conversion on a ISO-8601 formatted string

[leoyli]

Describe the bug
If text knob take a string like 2019-03-08T07:27:34.000Z as a default value, it can give console errors. This is due to internally it take this ISO-8601 date string and parse it to give a date-typed object. This is then output as, for example, Fri Mar 08 2019 02:27:34 GMT-0500 (Eastern Standard Time) string. Kind of magic and surprise.

To Reproduce
Steps to reproduce the behavior:

1. Clone the repo to the local machine
2. Run official-storybook
3. Visit addons-knobs-withknobs--tweaks-static-values story
4. Change the name knob as 2019-03-08T07:27:34.000Z
5. See the transformation and errors in action

Expected behavior
Have no change its type or any sort of unexpected transformation on string. Note, this is nothing to do with escapeHTML knob configs.

Screenshots
N/A

Code snippets
N/A

System:

• OS: MacOS
• Device: Macbook Air 2013
• Browser: chrome 73
• Framework: react
• Addons: knob
• Version: 5.1.0-a9

Additional context
N/A

[Armanio]

I investigated this and found that problem in telejson stringify. Ok it's not really the problem, but telejson convert strings as a '2019-03-08T07:27:34.000Z' date.
We have any solutions:

• nothing to do
• add the exception in the channel
• add little trick in knob panel for convert Date object to string through toISOString method.
  What you think, guys? @shilman @ndelangen

[leoyli]

@Armanio,

Oh man, thank you for debugging this! I guess this also explains some mysterious behaviour that I really didn't understand while I'm writing customized add-on. I was used Symbol as a token to avoid potential event collision but it is always showing my symbol is not the same symbol between one side to the other.

And just guessing, maybe not so relevant. I have also noticed that if my knob used with name like <children> or meta.error, the subsequent knobs don't get displayed... Probably for the same reason?!

[Armanio]

And just guessing, maybe not so relevant. I have also noticed that if my knob used with name like or meta.error, the subsequent knobs don't get displayed... Probably for the same reason?!

Can't reproduce:

Could you share code snipper?

[leoyli]

For example, like this in v5.0.2:

import React from 'react';
import { storiesOf } from '@storybook/react';
import { boolean as bool, text } from '@storybook/addon-knobs';

const X = () => <div>X</div>;

storiesOf('X', module).add('X', () => {
  return (
    <X
      name="checkbox"
      meta={{
        submitting: bool('meta.submitting', false),
        pristine: bool('meta.pristine', true),
        error: text('meta.error', ''),
      }}
    />
  );
});

I can only see meta.submitting..., meta.pristine, and meta.error is not shown. I don't see errors from my console too. Meanwhile, this bug(?) is also depending on which knob is get called first, I can rearrange the knob to make it work occasionally. I suspect is due to some special characters like . or <>.

[Armanio]

Ok, I repro. But I have no idea what it is. 🤔
And it works:

      <X
        name="checkbox"
        meta={{
          submitting: bool('meta_submitting', false), // <- change . to _
          pristine: bool('meta.pristine', true),
          error: text('meta.error', ''),
        }}
      />

Man, we need a support. Its a magic.
Stranger Things - the next season will be about knobs addon.

[leoyli]

I have taken a glimpse into the source code and found they are basically outputs in a factory, or saying derivatives of a class per se. I have also suspected the root cause may come from telejson because its arguments looks like to be stringnified and parsed with the channel API. But what I don't know is where errors get swallowed, if any?...

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[shilman]

I think this might have been addressed by @ndelangen in https://github.com/storybooks/storybook/pull/6486/files

@leoyli would you mind checking this out and letting me know if it's fixed?

[leoyli]

@shilman Thanks! It fixed. I will open another issue for the other issue I've been mentioned, which wasn't fixed.