Addon-controls: Improve select arg serialization

As a developer,
I want to use non-serializable objects in controls,
so that I can choose between different {images, react components, etc.}

Currently, all keys and values must be JSON serializable (telejson-serializable, actually), which is a serious restriction when components can take arbitrary blob values / complex functions as their inputs.

If we modify the select arg serialization, we can make use of the existing API to support non-serializable objects.

Consider the following example:

export default {
  component: YourComponent,
  title: 'A complex case with a function',
  // creates specific argTypes with options
  argTypes: {
    propertyA: {
      control: {
        type: 'select',
        options: {
          One: <Foo />,
          Two: <Bar />
          Three: </Baz>
        },
      },
    },
  },
};

Currently this will fail because we try to serialize <Foo/>, <Bar/>, and <Baz/>, which are non-serializable. However, if we updated the behavior to serialize One, Two, and Three, and then did a lookup in the options map before the arg values were passed into the story rendering function, then the user could use any value.

This would be a non-breaking change because the serialization behavior is currently an implementation detail.

Fixing this will also mitigate the security restrictions introduced in URL handling: #13803

┆Issue is synchronized with this Asana task by Unito

[shilman]

@ghengeveld chatted with @tmeasday about this today. his suggestion (which I think makes sense) is to make this a feature of args. So

argTypes: {
  foo: {
    // typical argType stuff
    control: { type: 'select', options: { key1: 'val1', key2: 'val2' }
    mapping: {
      val1: <SomeComplexValue />,
      val2: () => someFunction,
      ...
    }
  }
}

Then it would be up to the StoryStore to transform the serializable values into the complex values before the story is rendered. WDYT?

[shilman]

Jeepers creepers!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.2.0-beta.12 containing PR #14169 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there’s still more to do.