[code-infra] Refined docs generation

[alexfauquette]

This PR contains two modifications. I recomand reviewing per commit.

1. It sorts slots and classes item array alphabetically according to their names. For classes, seems it was already the case.got added because of this comment: [DataGrid] Allow to filter non-filterable columns programmatically mui-x#11538 (comment)
   Not sure, but I suspect the slots to be reliable on core because they are mostly defined in a single place whereas X has more interconnected slots, and so the order they get process might depend on the order TS resolves slots typing.

2. To update monorepo on v6 and still be able to parse slots, I needed to add a way to customize how slots are found because v6 does not use the same strategy as base for slot type naming: Bump monorepo mui-x#11667

I can still see some inconsistencies in object keys order (see this comment) Not sure about how we could ensure a consistency on this aspect.

[mui-bot]

Netlify deploy preview

https://deploy-preview-40603--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 3577970

[michaldudak]

As I noted in mui/mui-x#11538 (comment), I think we should treat the "root" slot in a special way and place it at the top, even if the others are sorted alphabetically. @samuelsycamore, @danilo-leal, what do you think?

[danilo-leal]

I'd agree — having the classes sorted closely to how we write the CSS itself would be better/easier to parse, in my opinion. I personally usually do root → any child styles → hover → focus → active. 👍

[alexfauquette]

I'd agree — having the classes sorted closely to how we write the CSS itself would be better/easier to parse, in my opinion. I personally usually do root → any child styles → hover → focus → active. 👍

Notice that classes are not concerned by the modification since they are already sorted by alphabetical order. Only slots are modified in this PR. Because classes were already sorted:

material-ui/packages/api-docs-builder/utils/parseSlotsAndClasses.ts

Lines 64 to 66 in 8cc116a

	const nonSlotClassDefinitions = classDefinitions
	.filter((classDefinition) => !Object.keys(slots).includes(classDefinition.key))
	.sort((a, b) => a.key.localeCompare(b.key));

For slots, my proposal would be to add a config such that core can keep slots order, and on x sort them the way we want

[LukasTy]

For slots, my proposal would be to add a config such that core can keep slots order, and on x sort them the way we want

Another argument for sorting - they are sorted alphabetically on the IDE suggestions list. 😉

[alexfauquette]

Few learning while doing that PR:

• Don't forget sorting are mutating the array. (it led to some weird behavior multiple time)
• I sorted array while generating the translation objects, because it ensure the object key order which was flaky from time to time

@michaldudak The second point explain why lot of "slotDescriptions" are modified (reordered) I made sure they are effectively just reorder

[alexfauquette]

I'm removing the sorting logic here such that sorting for classes and slots are both at the same place

[michaldudak]

It does work well. I found a few grammar and spelling mistakes, but I'm approving it already.