Addon-controls: Custom sort function

[giladgray]

👋 great stuff! huge fan. love the automatic-ness of the new features in v6, especially with typescript. it's the documentalist's dream!

Is your feature request related to a problem? Please describe.
I use Storybook with React and Typescript. The ordering of props in the ArgsTable seems somewhat based on declaration in the interface with a healthy does of "why are you here." This is quite confusing for a long list of props.

I would like to sort them all alphabetically, but I can't seem to find an option to do this.

Describe the solution you'd like

// preview.js
export const parameters = {
  controls: { alphabetize: true },
};

just like https://storybook.js.org/docs/react/essentials/controls#show-full-documentation-for-each-property

Describe alternatives you've considered
I've looked through all the docs and react-docgen-typescript and can't find anything to control the actual ordering of the controls.

Are you able to assist bring the feature to reality?
yes, with guidance / directions in the codebase.

Additional context
current state of things (this isn't even the full list):

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[astorije]

Hey stale bot, I think this would still be very valuable! Especially when using auto-generated controls: when doing so, manually configuring some controls will always position these at the top, even if the configuration is simply to disable the controls, so all auto-generated controls we disabled appear at the top.

[giladgray]

Worth noting that the former addon-knobs approach does automatically alphabetize its knobs, so I was dismayed to discover that controls do not share this behavior.

If you point me in the right direction, I'm happy to write some code.

[shilman]

@giladgray what do you think about the non-function interface here

https://storybook.js.org/docs/react/writing-stories/naming-components-and-hierarchy#sorting-stories

[giladgray]

@shilman you're suggesting this sort of thing?

export const parameters = {
  options: {
    storySort: {
      method: '',
      order: [], 
      locales: '', 
    },
  },
};

seems reasonable, if a bit verbose for just alphabetizing. i do like the potential of precise sorting, like i could push the as and ref props to the bottom and alph everything else.

i would love to see a single docs page that notes every single option supported by parameters, a la https://www.typescriptlang.org/docs/handbook/compiler-options.html

[shilman]

Closing as dupe to #9917