A way to sort categories in controls table

[jattasNI]

Is your feature request related to a problem? Please describe.

In my storybook we manually specify a table category in the argTypes for every control. When rendered in a Controls block these categories are appearing in a different order across stories. I would like to put more important categories first and have a consistent order so that users of my storybook know what to expect.

Describe the solution you'd like

A way to provide a custom sort order for categories which is shared across all stories. Ideally it would have as much customizability as storySort: some preconfigured orders like "alphabetical", an array specifying the order of known items, or a custom sort function. Personally I would only need an order array since I have a small fixed set of categories.

If we added that level of customizability for sorting categories we'd probably want the same for sorting arguments. Right now there are only a couple preconfigured orders.

Here's a first draft at an API on parameters.docs.controls:

Existing
sort: 'none' | 'alpha' | 'requiredFirst'

Proposed
sort: 'none' | 'alpha' | 'requiredFirst' | order array | sort function
sortCategories: 'none' | 'alpha' | order array | sort function

Describe alternatives you've considered

1. I'm using docs.controls.sort = 'alpha' to sort individual arguments. It works within a category but doesn't impact the categories themselves. A less-ideal alternative would be for this to affect category sort too; that would at least provide consistency if not customizability.
2. Documenting how the current sort order is determined would also be helpful. It might depend on the order the controls are processed in, but I'm not sure what determines that.

Are you able to assist to bring the feature to reality?

yes, I can

Additional context

You can see an example of the inconsistency in this story and this story (source here). My categories are things like "Slots", "Attributes", "Properties", "Methods", "Events", and "Styles". I would like them to appear in that order since that's roughly the order of importance for configuring components correctly.

[Shinigami92]

I found out that the order can be affected by ordering args, but tbh this is bad, because I do not have everything in args which I have in argTypes
I also need a solution for that

I would like to order by category and then by name or give me the possibility to define my own comparator

Right now it is somehow based on the component that is used 🤷

[Shinigami92]

I opened a PR to address this

• Allow custom argType sorting #28565

[bragaru-i]

@Shinigami92, @jattasNI

I wonder, is it possible to sort not only categories, but subcategories too.
so, I think, perhaps haviing a function that will solve this:

function sortControls : ( args: StrictArgTypes<TArgs>) =>  StrictArgTypes<TArgs>

[Shinigami92]

@Shinigami92, @jattasNI

I wonder, is it possible to sort not only categories, but subcategories too.

so, I think, perhaps haviing a function that will solve this:

function sortControls : ( args: StrictArgTypes<TArgs>) =>  StrictArgTypes<TArgs>

Right now it is not possible to pass a function at all 😕
We might need to wait for SB v9

The only potential workaround I currently have in my mind would be to allow an order property at argTypes and so leave the sorting fully to the user.

[adriantrunzo]

You can use zero width space characters in your category names to influence the sort order in combination with parameters.docs.controls.sort: "alpha". Just put as many as needed at the start of the names. For example, if you want to put "Attributes" and "Styles" first:

export const apiCategory = {
    attributes: 'Attributes',
    events: '\u200BEvents',
    localizableLabels: '\u200BLocalizable Labels',
    methods: '\u200BMethods',
    nonAttributeProperties: '\u200BProperties',
    slots: '\u200BSlots',
    styles: 'Styles'
} as const;

The final order will be: "Attributes", "Styles", "Events", "Localizable Labels", "Methods", "Properties", "Slots".

At least, this approach has been working well for me. It's absolutely a hack. You can verify the effect of the zero width space in a REPL:

console.log(["\u200BAC", "\u200B\u200BAA", "\u200BE"].sort())
VM266:1 (3) ['​AC', '​E', '​​AA']