[Chore] Upgrade examples to Vite v8 and stories to Storybook v10

[fzaninotto]

Problem

Vite v7 has many dependencies with vulnerabilities, an do does Storybook v8 (which relies on good old webpack). So we often get notifications from dependabot that aren't significant (as we only use vite for the demos, the packages are built with zshy).

Solution

• Updgrade to vite v8, following the guide at https://vite.dev/guide/migration
• Upgrade to Storybook v10 (backed by Vite V8), following their migration guides (https://storybook.js.org/docs/releases/migration-guide-from-older-version, https://storybook.js.org/docs/releases/migration-guide)

How To Test

• Run and build all demos, test them.
• Run the storybook, test it

Additional Checks

• The PR targets master for a bugfix or a documentation fix, or next for a feature
• [ ] The PR includes unit tests (if not possible, describe why)
• [ ] The PR includes one or several stories (if not possible, describe why)
• [ ] The documentation is up to date

[erwanMarmelab]

Question: Shouldn't we use resolve.dedupe: ['@mui/material', '@mui/icons-material'] instead ?

[fzaninotto]

yes, it works, but only in the tutorial, not in the other examples. In the CRM for instance, there is no direct dependency to MUI, so it uses the hoisted version of MUI V5 from RA, and that's where the CJS error arrives. So I changed it only in the tutorial.

[erwanMarmelab]

Issue: With v10 the interactions panel is now dispay. I don't think we need it.

Suggestion: BTW, I think we can remove the actions panel too

Suggested change

	viteFinal: async viteConfig => {
	features: {
	interactions: false,
	actions: false,
	},
	viteFinal: async viteConfig => {

[fzaninotto]

Agreed

[erwanMarmelab]

With this new version of Storybook, the Code panel is no longer the first panel displayed. Now, Controls is the first one.

As a user, I'd like to see the code first, and then click on Controls for the few stories that require it.

To do that, could you create a file named .storybook/manager.ts with this content?

import { addons, types } from 'storybook/manager-api';

addons.register('react-admin/panel-order', () => {
    const panels = addons.getElements(types.PANEL);
    const controls = panels['addon-controls'];
    delete panels['addon-controls'];
    panels['addon-controls'] = controls;
});

It will re-order the tabs.
Unfortunately, Storybook doesn't expose the API to do this directly from main.ts, so we have to reorder it manually

[fzaninotto]

Good suggestion! implemented.