Add an introduction page to the storybook website

Author: garronej

.storybook/DocsContainer.js

@@ -43,7 +43,6 @@ export const DocsContainer = ({ children, context }) => {
                 .docblock-argstable-head th:nth-child(3), .docblock-argstable-body tr > td:nth-child(3) {
                     visibility: collapse;
                 }
-
             `}</style>
             <BaseContainer
                 context={{

.storybook/manager-head.html

@@ -4,6 +4,11 @@
 <link rel="manifest" href="favicon/manifest.webmanifest" crossorigin="use-credentials" />
 
 <style>
+
+	.sidebar-item[data-nodetype="document"] svg {
+		display: none;
+	}
+
 	@font-face {
 		font-family: Marianne;
 		src: url("fonts/Marianne-Light.woff2") format("woff2"), url("fonts/Marianne-Light.woff") format("woff");

.storybook/static/repo-card.png

@@ -1,30 +1,12 @@
 import { Meta } from "@storybook/addon-docs";
 import { useDarkMode } from "storybook-dark-mode";
 
-<Meta title="Documentation/Introduction" />
+<Meta title="Guides/🇫🇷 Introduction" />
 
-<div style={{ margin: '0 auto', maxWidth: '600px', color: 'white', textAlign: 'center' }}>
-<p align="center">
-    <img src={useDarkMode() ? "https://user-images.githubusercontent.com/81740200/182106566-100cfb98-814a-4c13-bddd-27a6e16dbf99.png" : "https://user-images.githubusercontent.com/81740200/182105896-2c1b04ce-a02f-4bbe-a3e5-ec1c16e0bf15.png"} />  
-</p>
-<p align="center">
-    <i>A disruptive UI toolkit</i><br/>
-    <i>Optimized for TypeScript</i><br/>
-    <i>Highly customizable but looks great out of the box.</i><br/>
-    <i>Compatible with mui large library of components</i>
-    <br/>
-    <br/>
-    <img src="https://github.com/InseeFrLab/disiz/workflows/ci/badge.svg?branch=main"/>
-    <img src="https://img.shields.io/npm/dw/disiz"/>
-    <img src="https://img.shields.io/npm/l/disiz"/>
-</p>
-
-Default design system carefully crafted by [Marc Hufschmitt](http://marchufschmitt.fr/)
-
-This project is under active development. It's APIs are susceptible to change until v1.
-
-`disiz` is largely inspired by [`onyxia-ui`](https://github.com/InseeFrlab/onyxia-ui)
-
-WARNING: `disiz` isn't currently working with SSR. (You can't use it with Next.js)
+<div style={{ "margin": "0 auto", "maxWidth": "600px", "textAlign": "center" }}>
+    <img src="repo-card.png" />  
+    🇫🇷 <i><a href="https://www.systeme-de-design.gouv.fr/">French State Design System</a> React integration</i> 🇫🇷 
 
+This module is a React integration layer for [@gouvfr/dsfr](https://github.com/GouvernementFR/dsfr), the vanilla JS/CSS implementation of the DSFR.  
+Comes with very precise type definitions. (But works fine in vanilla JavaScript projects.)
 </div>

docs/intro.stories.mdx

@@ -1,18 +1,27 @@
 import { Meta } from "@storybook/addon-docs";
 import { Alert } from "../dist/Alert";
+import ReactMarkdown from "react-markdown";
 
-<Meta title="Documentation/🔧 Initial setup" />
 
-{% hint style="warning" %}
-If you already had the DSFR installed in your project, let's start from scratch: &#x20;
+<Meta title="Guides/🔧 Initial setup" />
 
-* Remove [`@gouvfr/dsfr`](https://www.npmjs.com/package/@gouvfr/dsfr) from your dependencies.
-* Remove all imports:`dsfr.css`, `dsfr.module.js` the favicon and the fonts.
-* Remove `thedata-fr-scheme` (and `data-fr-theme` ) attribude from your `<html/>` tag.
-{% endhint %}
+
+# 🔧 Initial setup  
+  
+_Setup `@codegouvfr/react-dsfr` in your project_
+  
+<Alert 
+	severity="warning" 
+	title="Warning: If you already had the DSFR installed in your project" 
+	isClosable
+	description={<ReactMarkdown>{
+`* Remove [\`@gouvfr/dsfr\`](https://www.npmjs.com/package/@gouvfr/dsfr) from your dependencies.
+* Remove all imports: \`dsfr.css\`, \`dsfr.module.js\` the favicon and the fonts.
+* Remove the \`data-fr-scheme\` (and \`data-fr-theme\` ) attribude from your \`<html/>\` tag.`
+	}</ReactMarkdown>}
+/>
 
 ```bash
 yarn add @codegouvfr/react-dsfr # Or: 'npm install --save @codegouvfr/react-dsfr'
 ```
 
-<Alert severity="success" title="ok" description="description" />

docs/quick-start.stories.mdx

@@ -105,6 +105,7 @@
         "prettier": "^2.3.0",
         "react": "18.2.0",
         "react-dom": "18.2.0",
+        "react-markdown": "^8.0.3",
         "remixicon": "^2.5.0",
         "storybook-dark-mode": "^1.1.2",
         "ts-node": "^10.9.1",