feat(storybook): upgrade from v6 to v10

[lsagetlethias]

Contexte

Migration de la configuration Storybook de Webpack v6 vers v10 Vite, plus quelques nettoyages et adaptations.

Ajout / suppression de dépendances

• Ajout : @storybook/react-vite, @storybook/addon-docs, @vueless/storybook-dark-mode (et dépendances liées à Storybook v10 / Vite).
• Suppression : storybook-dark-mode.

Modifications Storybook

• Migration de la config Storybook Webpack → Vite + passage en TS
• Adaptation dark mode / theming :
  • utilisation de @vueless/storybook-dark-mode
  • passage à l'utilisation du prop theme sur le container plutôt que d'overrider context
• Ajout de @storybook/addon-docs dans la config

Petits fixs additionnels hors Storybook

• .eslintignore : autorise le dossier .storybook (!.storybook)
• Ajustements de formatage/imports et typage
• Stories : titres explicites (ex. components/...)
• Composants : ajouts des props manquantes obligatoires

[lsagetlethias]

Le but étant de pouvoir utiliser le http://localhost:6006/index.json pour le tester https://github.com/stefanoamorelli/storybook-mcp-server et autres MCP qui viendront plus tards.

[Copilot]

Pull request overview

This PR upgrades Storybook from version 6 (Webpack) to version 10 (Vite), representing a major migration that modernizes the development and documentation infrastructure.

Key Changes:

• Migration from Webpack-based Storybook v6 to Vite-based Storybook v10
• Conversion of Storybook configuration files from JavaScript to TypeScript
• Replacement of storybook-dark-mode with @vueless/storybook-dark-mode for dark mode support
• Removal of the sectionName helper pattern in favor of inline story titles
• Updated type imports to use @storybook/react-vite types

Reviewed changes

Copilot reviewed 72 out of 73 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
package.json	Updated Storybook dependencies from v6 to v10, added Vite, updated scripts to use new Storybook CLI
.storybook/main.ts	New TypeScript configuration replacing main.js, using Vite framework
.storybook/preview.tsx	Migrated from preview.js to TypeScript with updated API for v10
.storybook/DocsContainer.tsx	Updated to use new dark mode package and simplified theme prop approach
.storybook/customTheme.ts	Formatting improvements and import path updates
stories/getStory.tsx	Updated type imports from @storybook/react-vite, removed sectionName parameter
stories/*.stories.tsx	Removed sectionName imports, added inline title properties, updated argTypes control syntax
stories/*.mdx	Updated imports from storybook-dark-mode to @vueless/storybook-dark-mode
stories/sectionName.ts	Removed (replaced with inline titles)
stories/blocks/sectionName.ts	Removed (replaced with inline titles)
stories/charts/sectionName.ts	Removed (replaced with inline titles)
src/Table.tsx	Added formatting improvements to type exclusion list
.eslintignore	Added .storybook directory to allowed list

Comments suppressed due to low confidence (4)

.storybook/customTheme.ts:1

• The import path "storybook/theming" is incorrect for Storybook v10. The correct import path should be "@storybook/theming".
  .storybook/DocsContainer.tsx:2
• The import path for DocsContainer should use "@storybook/blocks" instead of "@storybook/addon-docs/blocks". In Storybook v10, the blocks are exported from the main addon-docs package or from @storybook/blocks.
  stories/colorHelper.mdx:1
• The import path for Meta should use "@storybook/blocks" instead of "@storybook/addon-docs/blocks" for consistency with Storybook v10 best practices.
  stories/Pictograms.mdx:1
• The import path for Meta should use "@storybook/blocks" instead of "@storybook/addon-docs/blocks" for consistency with Storybook v10 best practices.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[lsagetlethias]

Et Joyeux Noël 🎅

[garronej]

This is such a beautiful Christmas present!
Thank you very much @lsagetlethias, I’m very excited.

I’ve been delighted to see how recent improvements in LLM capabilities, especially Codex, now make it possible to vibe-code react-dsfr / MUI / tss-react UIs in a very convincing way.

This feels like a bit of a game changer. I was able to vibe-code this in about an hour:
https://vite-insee-starter.demo-domain.ovh/

Your PR, by enabling MCP, will further facilitate this approach. I’d be really excited to get your feedback on how well it works for you and how you set it up. It might even be worth adding a documentation page about it.

It might also be time to revisit the DSFR theme for https://nextra.site/ that I started a while ago
(https://github.com/codegouvfr/nextra-theme-dsfr) but never finished, mainly because I was discouraged by the amount of repetitive and tedious work involved.
Now, AI might be able to one-shot it.

It feels like it’s about time we have a modern solution to generate extensible DSFR websites from a Markdown corpus.

I’ll test your PR now, make sure everything works, and if it does, I’ll merge it.

[garronej]

Unfortunately I can’t merge this as-is, as it introduces several notable regressions:

• The pictogram page is broken: https://components.react-dsfr.codegouv.studio/?path=/docs/%F0%9F%96%BC%EF%B8%8F-pictograms--page
• There is a recurring white flash when navigating between stories in dark mode.
• The component ordering (from most important to least important) has been lost.
• Stories that previously pointed to different anchors in the doc view now all open the canvas instead.

I know this is frustrating, sorry about that.

[lsagetlethias]

I'll take a look, the changes I made were only for the upgrade so we alt libs there's maybe some tweaks to do.

[lsagetlethias]

Picto and ColorHelper are working again.
No clue yet for the white flash ;
Also, the "storySort" doesn't seems to work. I don't know why.
EDIT: SB does a weird internal AST parsing of the preview file, therefore {"storySort": ...} was not found, but {storySort: ...} was. It's fixed.
Also, simplified as v7 introduced 2nd level sorting.