📝(doc) update docs to install published packages + contributing guide

Updated various parts of existing documentations to make a clean path
to learn how to install the library. I let the most complicated part in
the tokens's README.md file, which is referenced from the Storybook.

packages/react/.storybook/preview.js

@@ -11,6 +11,7 @@ export const parameters = {
   options: {
     storySort: (a, b) => {
       const roots = ['Getting Started', 'Components'];
+      const gettingStartedOrder = ['Installation', 'Colors', 'Spacings', 'Typography'];
 
       const aParts = a.title.split('/');
       const bParts = b.title.split('/');
@@ -18,6 +19,9 @@ export const parameters = {
         return roots.indexOf(aParts[0]) - roots.indexOf(bParts[0]);
       }
       if (aParts[1] !== bParts[1]) {
+        if (aParts[0] === 'Getting Started') {
+          return gettingStartedOrder.indexOf(aParts[1]) - gettingStartedOrder.indexOf(bParts[1]);
+        }
         return aParts[1].localeCompare(bParts[1]);
       }
       return 0;

packages/react/src/docs/installation.stories.mdx

@@ -0,0 +1,67 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs';
+
+<Meta title="Getting Started/Installation"/>
+
+# Installation
+
+First, install the library
+
+<Source
+  language='bash'
+  dark
+  format={false}
+  code={`
+  yarn add @openfun/cunningham-react
+  `}
+/>
+
+Then, add this script to your `package.json` file
+
+<Source
+  language='json'
+  dark
+  format={false}
+  code={`
+{
+  "scripts": {
+    "build-theme": "cunningham -g css -o src"
+  },
+}
+`}
+/>
+
+> Please take a look at [tokens documentation](https://github.com/openfun/cunningham/tree/main/packages/tokens#configuration-file) for more informations about the `cunningham` command line tool and to customize your local theme.
+
+Then, in order to generate the css file, run
+
+<Source
+  language='bash'
+  dark
+  format={false}
+  code={`
+  yarn build-theme
+  `}
+/>
+
+It will generate a file named `cunningham-tokens.css`.
+
+Then, add these lines at the top of your main stylesheet file:
+
+
+<Source
+  language='css'
+  dark
+  format={false}
+  code={`
+@import "@openfun/cunningham-react/style"; // Imports the default theme.
+@import "cunningham-tokens"; // Imports the file you just generated.
+  `}
+/>
+
+> Please see [here](https://github.com/openfun/cunningham/tree/main/packages/tokens#use-the-design-tokens) to see how to use the design tokens in your source code.
+
+We're done! 🎉
+
+Now to verify that everything works well by trying to render a component, like the [Button](?path=/story/components-button-doc--page) for example.
+
+