Storybook 6.0 args don't maintain array order.

[lifeiscontent]

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(R) Core(TM) 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

[shilman]

@hipstersmoothie is this something you can look into? I think it's happening in react-docgen-typescript. Even worse it's nondeterministic, so our snapshot tests become flakey. Any help you can provide would be much appreciated!

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

microsoft/TypeScript#17944

[hipstersmoothie]

I could add an option to one of the underlying libraries to sort the props. I'm not sure this will ever get "fixed" in typescript

[hipstersmoothie]

Yeah I don't think this is fixable from anyone but the typescript team. So this could probs be closed in the meantime @shilman

[shilman]

We added user-configurable sorting here:

#13125