[docs] Add installation component

[siriwatknp]

After seeing the installation section (with pnpm added`) in #36650 and https://deploy-preview-36717--material-ui.netlify.app/base/getting-started/quickstart/#installation, I cannot tolerate anymore 🤣.

This PR adds Installation component that renders Tabs. Here is what it looks like:

• It store the latest value that you select in the local storage, so that the next time you open the page it focuses on that tab. (however, the UX is not great because the content swap after mounted. Feedbacks welcome)

• Let's you specify dep managers for each page

  {{"component": "components/markdown/Installation", "dep": "@mui/base", "managers": ["yarn", "npm", "pnpm"]}}
  

Note: At first, I wanted to extend the markdown to enable us to write some syntax that will generate Tabs but I could not find a good reference because GMF (Github markdown format) does not support tabs. The closest one is Rmarkdown but it looks really complicated to implement.

Todos

• [ ] Make it works for the X team https://mui.com/x/react-date-pickers/getting-started/
• [ ] Apply every where in the core docs

---

Preview: https://deploy-preview-36766--material-ui.netlify.app/experiments/docs/installation/

[mui-bot]

Netlify deploy preview

• docs/data/base/getting-started/installation/installation.md

Bundle size report

No bundle size changes

Generated by :no_entry_sign: dangerJS against 098fd4af78e6d5aee799be9e26c398c5e9b39153

[danilo-leal]

Very excited that we're working on this! At first, I'd suggest something within the markdown, but it's cool that you've explored that already. As far as the design goes, though, I imagined the tabs to be integrated into the code block, not an individual tab element on the page body (especially now that we're adding tabs to the high-level page navigation). I'd also like to see if there's a way to generalize this component more instead of something targeted at installation commands. We may want to use tabs within the code block for other stuff.

Additionally, I'm curious if we could also experiment with ways to display the file's name within the code block either ⎯ like we did on Joy's theme builder page. It would be visually very similar to the tabs, and it could even have a tab (exactly like Joy's example).

[siriwatknp]

@flaviendelangle I thinking about this syntax to make it works with DatePickers:

{{"component": "components/markdown/Installation", "installation": "%Plan %DateLibrary", "managers": ["yarn", "npm"], "Plan": [["Community", "@mui/x-date-pickers"], ["Pro", "@mui/x-date-pickers-pro"]], "DateLibrary": ["dayjs", "date-fns", "luxon", "moment"]}}

Do you get it at first glance 🤔?

Note: at first I'd like to use {{Plan}} {{DateLibary}} as a template but the markdown parser does not work with this so I have to go with %Plan %DateLibrary.

[siriwatknp]

@danilo-leal updated to

[flaviendelangle]

@siriwatknp I'm fine with this synthax I'd be curious to see the resulting UI :+1:

[siriwatknp]

@flaviendelangle How about this?

cc @danilo-leal

[flaviendelangle]

cc @alexfauquette @LukasTy

For me we also need to be able to clean the label ("DateLibrary" is not great without a space).

[LukasTy]

For me we also need to be able to clean the label ("DateLibrary" is not great without a space).

Agreed, IMHO, a bit of spacing between the label and toggle button group wouldn't hurt, but other than that it looks great. 👍

[mapache-salvaje]

Can we move forward with this? I like the idea of a higher-level API for this component but in the meantime I'd love to see this implemented in the docs sooner rather than later.

[alexfauquette]

I'd love to see this implemented in the docs sooner rather than later.

If something is not well done at the first shot in the docs, it ends up there for a long time before someone finds the motivation/time to fix it.

@siriwatknp would you need some help on this PR? This week I might be busy but after the alpha release, I should get a bit more bandwidth

[siriwatknp]

I'd love to see this implemented in the docs sooner rather than later.

If something is not well done at the first shot in the docs, it ends up there for a long time before someone finds the motivation/time to fix it.

@siriwatknp would you need some help on this PR? This week I might be busy but after the alpha release, I should get a bit more bandwidth

Definitely @alexfauquette, thanks for the help!.

[alexfauquette]

I'm closing it since the codeblock is now available on docs and the remaining interaction will be added in the X repo:

https://github.com/mui/mui-x/pull/9644