Addon-controls: Improve select arg serialization

[shilman]

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

[tmeasday]

Is this related? #12613

[shilman]

Yes, seems like this would also fix #12613

[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]

Shiver me timbers!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.2.0-beta.8 containing PR #14100 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.

[ghengeveld]

Going to reopen this because we changed our minds. The new proposal is:

argTypes.children = {
  options: ['a', 'b', 'c'], // Must be an array
  mapping: {  // Must be an object
    a: <A />,
    b: <B />,
  }, 
  control: {
    type: 'select', // inferred from options existing
    labels: { // Inferred from `options` if set -- must be an object
      a: 'A is a good choice',
      b: 'João',
    }
  }
}

[acerbastimur]

I wonder if I will be able to use it like that ?

[ghengeveld]

@acerbastimur That looks like you want a control on a nested property. Unfortunately that's not possible. However you can use the newly introduced JSON editor for objects such as theme. It doesn't include a color picker though.

Feel free to open a feature request for controls on nested properties. Your example it a legit use case.

[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.