Addon-controls: Blob control/arg type

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

Workaround

There is a workaround, which is to define an enum and then manually map it in the story function. For an example, see the last example in fully custom args docs:

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

const MAP = {
  One: <Foo />,
  Two: <Bar />
  Three: </Baz>
}

const Template = ({ propertyA, ...rest }) => {
  const someFunctionResult = MAP[propertyA];
  return <YourComponent someProperty={someFunctionResult} {...rest} />;
};

Proposal

We can make this much more ergonomic by providing a new ArgType and control for "blob" types.

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

const Template = (args) => {
  const someFunctionResult = MAP[propertyA];
  return <YourComponent {...args} />;
};

The blob ArgType is special because is implemented as a select control, but the Arg serialization serializes and displays the key, which must be be a serializable string. There needs to be some code in the preview rendering that maps that key to the blob value before the arg is received by the story function.

Related

This feature also makes the security restrictions introduced in URL handling more bearable: #13803

It can also be a workaround for #11429

[shilman]

Better yet we could change the behavior of the select control to this, and we wouldn't need to introduce a new control/arg. Closing in favor of #13888