📝(doc) upgrade doc for Storybook v8

The Canvas block does not handle free source code anymore, now we need
to put it in a dedicated Story.

packages/react/src/docs/spacings.mdx

@@ -1,5 +1,5 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs';
-import { tokens } from '../cunningham-tokens';
+import { Canvas, Meta } from '@storybook/addon-docs';
+import * as Stories from "./spacings.stories";
 
 <Meta title="Getting Started/Spacings" />
 
@@ -9,17 +9,7 @@ Cunningham comes with an existing toolkit to deal with spacings. 📏
 
 Here are the existing spacings:
 
-<Canvas sourceState="none">
-  <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
-    {Object.keys(tokens.themes.default.theme.spacings).map(key => (
-      <div key={key} style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
-        <div className="fw-bold clr-secondary-text" style={{ width: '30px' }}>-{key}</div>
-        <div className="fw-medium fs-m clr-secondary-text" style={{ width: '100px' }}>{tokens.themes.default.theme.spacings[key]}</div>
-        <div className={"bg-danger-100 pl-" + key} style={{ height: '48px', width: 0 }}></div>
-      </div>
-    ))}
-  </div>
-</Canvas>
+<Canvas sourceState="none" of={Stories.Default}/>
 
 Those can be used both with paddings and margins.
 
@@ -50,9 +40,4 @@ You can use the following classes to add paddings to your elements:
 
 ## Example
 
-<Canvas sourceState="shown">
-  <div className="clr-greyscale-800 bg-danger-100">
-    <div className="clr-greyscale-800 bg-primary-500 clr-primary-text fw-medium p-t mb-l">Tiny padding + Large margin bottom</div>
-    <div className="clr-secondary-900 bg-secondary-500 clr-secondary-text fw-medium p-l ml-b">Large padding + Base margin left</div>
-  </div>
-</Canvas>
+<Canvas sourceState="shown" of={Stories.Example} />