[docs-infra] Support code tabs overflow

[arminmeh]

Related to mui/mui-x#9270

With a lot of files, tab names get squashed together.

Before	After

Preview: https://deploy-preview-42913--material-ui.netlify.app/experiments/docs/demos/#multiple-tabs-demo

[mui-bot]

Netlify deploy preview

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

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 978bb77

[alexfauquette]

The build has 2 issues:

1. It seems some of the stuff you import from '@mui/x-data-grid-generator' are not exported 🤔 Here is the lines of the build log on Netlify:

10:53:25 AM: ./pages/experiments/docs/DemoMultiTabs.js
10:53:25 AM: Attempted import error: 'COUNTRY_ISO_OPTIONS_SORTED' is not exported from '@mui/x-data-grid-generator' (imported as 'COUNTRY_ISO_OPTIONS_SORTED').
10:53:25 AM: ./pages/experiments/docs/DemoMultiTabs.js
10:53:25 AM: Attempted import error: 'STATUS_OPTIONS' is not exported from '@mui/x-data-grid-generator' (imported as 'STATUS_OPTIONS').
10:53:25 AM: ./pages/experiments/docs/DemoMultiTabs.js
10:53:25 AM: Attempted import error: 'INCOTERM_OPTIONS' is not exported from '@mui/x-data-grid-generator' (imported as 'INCOTERM_OPTIONS').
10:53:25 AM: ./pages/experiments/docs/renderers/country.js
10:53:25 AM: Attempted import error: 'COUNTRY_ISO_OPTIONS' is not exported from '@mui/x-data-grid-generator' (imported as 'COUNTRY_ISO_OPTIONS').
10:53:25 AM: ./pages/experiments/docs/renderers/incoterm.js
10:53:25 AM: Attempted import error: 'INCOTERM_OPTIONS' is not exported from '@mui/x-data-grid-generator' (imported as 'INCOTERM_OPTIONS').
10:53:25 AM: ./pages/experiments/docs/renderers/status.js
10:53:25 AM: Attempted import error: 'STATUS_OPTIONS' is not exported from '@mui/x-data-grid-generator' (imported as 'STATUS_OPTIONS').

2. The experiement folder is a bit special.

The docs structure is the following one.
The demo and the file imported are in data folder. And pages field are just a layout importing the md

data/
  grid/
    Demo.js
    helperToImport.js
pages/
  grid.js

But the experiments is slightly different, because every think is directly in the pages folder. So all the JS files are expected to render a page.

For now the workaround was to import JSON files. You could probably create a data/experiments/renderer to store those helpers

10:53:42 AM: > Build optimization failed: found pages without a React Component as default export in
10:53:42 AM: pages/experiments/docs/renderers/country
10:53:42 AM: pages/experiments/docs/renderers/incoterm
10:53:42 AM: pages/experiments/docs/renderers/progress
10:53:42 AM: pages/experiments/docs/renderers/rating
10:53:42 AM: pages/experiments/docs/renderers/status

[arminmeh]

It seems some of the stuff you import from '@mui/x-data-grid-generator' are not exported

Updated. eslint complains about the import path, so I have disabled it for those lines

@alexfauquette, I have moved the renderers as you have suggested. In the experiments demo the filenames are a bit long now, but in the actual docs for xGrid this should not be the problem as we can keep the renderers in the subfolder

[alexfauquette]

In the experiments demo the filenames are a bit long now, but in the actual docs for xGrid this should not be the problem as we can keep the renderers in the subfolder

Yes, and it would be a nice feature to only keep the file name without its folder to be able to import from anywhere without having to care about the UI impact

[bharatkashyap]

In the experiments demo the filenames are a bit long now, but in the actual docs for xGrid this should not be the problem as we can keep the renderers in the subfolder

Yes, and it would be a nice feature to only keep the file name without its folder to be able to import from anywhere without having to care about the UI impact

Good shout @alexfauquette and @arminmeh - I'll add this to #41754 which I'm working on

[arminmeh]

In the experiments demo the filenames are a bit long now, but in the actual docs for xGrid this should not be the problem as we can keep the renderers in the subfolder

Yes, and it would be a nice feature to only keep the file name without its folder to be able to import from anywhere without having to care about the UI impact

Good shout @alexfauquette and @arminmeh - I'll add this to #41754 which I'm working on

Thanks @bharatkashyap. Nice list of improvements in #41754 👍

I will merge this one then, so that we can update the grid docs.
If you want help, I can also work on the point about having the labels.

[bharatkashyap]

I will merge this one then, so that we can update the grid docs. If you want help, I can also work on the point about having the labels.

Please go ahead (only if it's not squeezing your existing bandwidth 😅)