♻️(react) rename docs to new format

Previously we were using .stories.mdx extension for docs but now
.mdx is the most recommend extension according to official Storybook
7 documentation.

packages/react/src/docs/spacings.mdx

@@ -0,0 +1,58 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs';
+import { tokens } from '../cunningham-tokens';
+
+<Meta title="Getting Started/Spacings" />
+
+# Spacings
+
+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.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.theme.spacings[key]}</div>
+        <div className={"bg-danger-100 pl-" + key} style={{ height: '48px', width: 0 }}></div>
+      </div>
+    ))}
+  </div>
+</Canvas>
+
+Those can be used both with paddings and margins.
+
+## Margins
+
+You can use the following classes to add margins to your elements:
+
+| Class        | Equivalent                 |
+|--------------|----------------------------|
+| m-[spacing]  | `margin: [spacing]`        |
+| mt-[spacing] | `margin-top: [spacing]`    |
+| mr-[spacing] | `margin-right: [spacing]`  |
+| mb-[spacing] | `margin-bottom: [spacing]` |
+| ml-[spacing] | `margin-left: [spacing]`   |
+
+## Paddings
+
+You can use the following classes to add paddings to your elements:
+
+| Class        | Equivalent                 |
+|--------------|----------------------------|
+| p-[spacing]  | `padding: [spacing]`        |
+| pt-[spacing] | `padding-top: [spacing]`    |
+| pr-[spacing] | `padding-right: [spacing]`  |
+| pb-[spacing] | `padding-bottom: [spacing]` |
+| pl-[spacing] | `padding-left: [spacing]`   |
+
+
+## Example
+
+<Canvas sourceState="shown">
+  <div className="bg-danger-100">
+    <div className="bg-primary-500 clr-primary-text fw-medium p-t mb-l">Tiny padding + Large margin bottom</div>
+    <div className="bg-secondary-500 clr-secondary-text fw-medium p-l ml-b">Large padding + Base margin left</div>
+  </div>
+</Canvas>