Core: Add 'mapping' to support complex arg values

[ghengeveld]

Issue: #13888
Related: #12613

What I did

This introduces a mapping property for fields in argTypes, to allow the use of complex arg values. It looks like this:

argTypes: {
  label: {
    control: {
      type: 'select',
      options: ['Normal', 'Bold', 'Italic'],
    },
    mapping: {
      Bold: <b>Bold</b>,
      Italic: <i>Italic</i>,
    },
  },
},

This works on any control type, but makes most sense when used with a radio/select type. Control options must be simple strings so they can be serialized and synced to the URL. Control options can still be defined as an object, but the only use case is if you want a custom select label that may not be serializable (e.g. outside the [a-z0-9 _-] range).

How to test

• Is this testable with Jest or Chromatic screenshots? Beyond mapping of the initial value, not really
• Does this need a new example in the kitchen sink apps? Updated official-storybook.
• Does this need an update to the documentation? Yes, done.

If your answer is yes to any of these, please make sure to include it in your PR.

[shilman]

does this actually fix the bug in #12613? or just in the case where the user provides a mapping?

[tmeasday]

Good start!

Definitely need a test in story_store.test.js

[ghengeveld]

does this actually fix the bug in #12613? or just in the case where the user provides a mapping?

No it doesn't. It logs a warning when you try to use an object as value, and suggest to use a mapping, but the actual bug remains (which I think we can leave in, since we're saying it's not supported).

[ghengeveld]

Definitely need a test in story_store.test.js

Done.

[shilman]

Looking great @ghengeveld 💯

[ghengeveld]

Note I reopened the original issue #13888 because we changed our minds on the approach. In addition to mapping, we're going to hoist control.options to options, and introduce control.labels.

The mapping feature introduced in this PR is here to stay and will work independently from options.

[lifeiscontent]

@ghengeveld after upgrading to latest beta I'm getting this error: Uncaught TypeError: _ref$control is null