Storybook 6.0 args don't maintain array order.

Describe the bug When using both typescript types and argTypes, the order of args are not maintained.

To Reproduce Steps to reproduce the behavior:

1. Create a component that has a prop with multiple options
2. Add story with args
3. See arg order is not maintained

Expected behavior Args are ordered

Screenshots

Code snippets using this as props

interface Props {
  src: string;
  alt: string;
  size: 'smallest' | 'small' | 'medium' | 'large' | 'largest';
}

export function Example(
  args: React.ComponentPropsWithoutRef<typeof UIAvatar>
): JSX.Element {
  return <UIAvatar {...args} />;
}

Example.args = {
  src: 'avatar.jpg',
  alt: 'Avatar',
  size: 'medium',
};

System: Please paste the results of npx -p @storybook/cli@next sb info here.

Environment Info:

System: OS: macOS 10.15.6 CPU: (12) x64 Intel® Core™ i7-8750H CPU @ 2.20GHz Binaries: Node: 12.8.1 - ~/n/bin/node Yarn: 1.22.4 - ~/.yarn/bin/yarn npm: 6.14.5 - ~/n/bin/npm Browsers: Firefox: 72.0.2 Safari: 13.1.2

Additional context I don’t know if this is possible, but I love you

[lifeiscontent]

@shilman I looked into it more on the TypeScript side, looks like it might be planned to fix this behavior upstream, but currently no fix.

https://github.com/Microsoft/TypeScript/issues/17944

[shilman]

We added user-configurable sorting here:

https://github.com/storybookjs/storybook/pull/13125