From 1f8067471753f933601733720b2b579a8cae757f Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Thu, 14 Mar 2024 17:16:03 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D(doc)=20upgrade=20doc=20for=20Story?=
 =?UTF-8?q?book=20v8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Canvas block does not handle free source code anymore, now we need
to put it in a dedicated Story.
---
 packages/react/.storybook/preview.tsx         |   2 +-
 .../react/src/components/DataGrid/index.mdx   |   2 +-
 packages/react/src/components/Modal/index.mdx |   2 +-
 packages/react/src/components/Modal/index.tsx |  33 +++---
 packages/react/src/docs/colors.mdx            |  47 +-------
 packages/react/src/docs/colors.stories.tsx    | 105 ++++++++++++++++++
 packages/react/src/docs/customization.mdx     |   2 +-
 packages/react/src/docs/first-steps.mdx       |   2 +-
 packages/react/src/docs/installation.mdx      |   2 +-
 .../docs/migrating/1_migrating_v1_to_v2.mdx   |   2 +-
 packages/react/src/docs/spacings.mdx          |  23 +---
 packages/react/src/docs/spacings.stories.tsx  |  61 ++++++++++
 packages/react/src/docs/theming.mdx           |   2 +-
 packages/react/src/docs/typo.mdx              |  28 +----
 packages/react/src/docs/typo.stories.tsx      |  52 +++++++++
 15 files changed, 258 insertions(+), 107 deletions(-)
 create mode 100644 packages/react/src/docs/colors.stories.tsx
 create mode 100644 packages/react/src/docs/spacings.stories.tsx
 create mode 100644 packages/react/src/docs/typo.stories.tsx

diff --git a/packages/react/.storybook/preview.tsx b/packages/react/.storybook/preview.tsx
index bad4109..42d2dcb 100644
--- a/packages/react/.storybook/preview.tsx
+++ b/packages/react/.storybook/preview.tsx
@@ -42,7 +42,7 @@ const preview: Preview = {
         },
         options: {
             storySort: (a, b) => {
-                const roots = ['Getting Started', 'Components', 'Migrating'];
+                const roots = ['Getting Started', 'Components', 'Migrating', 'Misc'];
                 const gettingStartedOrder = [
                     'Installation',
                     'First steps',
diff --git a/packages/react/src/components/DataGrid/index.mdx b/packages/react/src/components/DataGrid/index.mdx
index 931e7e2..9f0e064 100644
--- a/packages/react/src/components/DataGrid/index.mdx
+++ b/packages/react/src/components/DataGrid/index.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story, Source, ArgTypes } from '@storybook/blocks';
+import { Canvas, Meta, Source, ArgTypes } from '@storybook/blocks';
 import { DataGrid } from './index';
 import { SimpleDataGrid } from './SimpleDataGrid';
 import { DataList } from './DataList';
diff --git a/packages/react/src/components/Modal/index.mdx b/packages/react/src/components/Modal/index.mdx
index 06857af..79acbc3 100644
--- a/packages/react/src/components/Modal/index.mdx
+++ b/packages/react/src/components/Modal/index.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story, Source, ArgTypes } from '@storybook/blocks';
+import { Canvas, Meta, Source, ArgTypes } from '@storybook/blocks';
 import * as Stories from './index.stories';
 import * as PreBuiltStories from './PreBuilt.stories';
 import { Modal } from './index';
diff --git a/packages/react/src/components/Modal/index.tsx b/packages/react/src/components/Modal/index.tsx
index e0d1a0f..5fc3ef1 100644
--- a/packages/react/src/components/Modal/index.tsx
+++ b/packages/react/src/components/Modal/index.tsx
@@ -36,20 +36,19 @@ export const useModal = ({
   };
 };
 
-export interface ModalProps
-  extends PropsWithChildren<{
-    size: ModalSize;
-    isOpen: boolean;
-    onClose: () => void;
-    leftActions?: React.ReactNode;
-    rightActions?: React.ReactNode;
-    actions?: React.ReactNode;
-    title?: ReactNode;
-    titleIcon?: React.ReactNode;
-    hideCloseButton?: boolean;
-    closeOnClickOutside?: boolean;
-    preventClose?: boolean;
-  }> {}
+export type ModalProps = PropsWithChildren & {
+  size: ModalSize;
+  isOpen: boolean;
+  onClose: () => void;
+  leftActions?: React.ReactNode;
+  rightActions?: React.ReactNode;
+  actions?: React.ReactNode;
+  title?: ReactNode;
+  titleIcon?: React.ReactNode;
+  hideCloseButton?: boolean;
+  closeOnClickOutside?: boolean;
+  preventClose?: boolean;
+};
 
 export const Modal = (props: ModalProps) => {
   /**
@@ -157,7 +156,11 @@ export const ModalInner = (props: ModalProps) => {
   );
 };
 
-const ModalFooter = ({ leftActions, rightActions, actions }: ModalProps) => {
+const ModalFooter = ({
+  leftActions,
+  rightActions,
+  actions,
+}: Pick<ModalProps, "leftActions" | "rightActions" | "actions">) => {
   if ((leftActions || rightActions) && actions) {
     throw new Error("Cannot use leftActions or rightActions with actions");
   }
diff --git a/packages/react/src/docs/colors.mdx b/packages/react/src/docs/colors.mdx
index 8b336e4..6435a9b 100644
--- a/packages/react/src/docs/colors.mdx
+++ b/packages/react/src/docs/colors.mdx
@@ -1,6 +1,5 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'; import {
-  tokens
-} from '../cunningham-tokens';
+import { Canvas, Meta, Source } from '@storybook/addon-docs';
+import * as Stories from './colors.stories.tsx';
 
 <Meta title="Getting Started/Colors"/>
 
@@ -26,18 +25,7 @@ You can use custom utility classes to set the background color of an element. Th
 
 You can find all existing classes below.
 
-<Canvas sourceState="none">
-  {colors.map(color => (
-    <div key={color} style={{display: 'flex', gap: '5px'}}>
-      {tints.map(tint => (
-        <div key={color + tint} style={{display: 'flex', flexDirection: 'column', flexShrink: 0,flexBasis: '120px', alignItems: 'center', flexGrow: 1}}>
-          <div style={{width: '72px', height: '48px'}} className={"bg-" + color + "-" + tint}></div>
-          <pre className="clr-greyscale-800 fs-s mt-st">bg-{color}-{tint}</pre>
-        </div>
-      ))}
-    </div>
-  ))}
-</Canvas>
+<Canvas sourceState="none" of={Stories.BackgroundColors}/>
 
 ## Text color
 
@@ -54,37 +42,12 @@ You can use custom utility classes to set the color attribute of an element. The
 
 You can find all existing classes below.
 
-<Canvas sourceState="none">
-  {colors.map(color => (
-    <div key={color} style={{display: 'flex', gap: '10px'}}>
-      {tints.map(tint => {
-        const classes = ['fs-s', 'mt-st', 'clr-' + color + '-' + tint];
-        if (tint === 'text') {
-          classes.push('bg-' + color + '-500');
-        }
-        return <div key={color + tint} style={{
-          display: 'flex',
-          flexDirection: 'column',
-          flexShrink: 0,
-          flexBasis: '110px',
-          alignItems: 'center',
-          flexGrow: 1
-        }}>
-          <pre className={classes.join(' ')}>clr-{color}-{tint}</pre>
-        </div>
-      })}
-    </div>
-  ))}
-</Canvas>
+<Canvas sourceState="none" of={Stories.TextColors}/>
 
 Pay attention the special `{color}-text` variation. Each color must have a text color variation, which is supposed to
 render readable text on top of a -500 background of its own color variation. Please check out the following examples:
 
-<Canvas sourceState="none">
-<div className="bg-primary-500 clr-primary-text fw-medium p-t">I'm a text on top of a primary-500 background 👋</div>
-<div className="clr-secondary-900 bg-secondary-500 clr-secondary-text fw-medium p-t">I'm a text on top of a secondary-500 background 👋</div>
-<div className="bg-danger-500 clr-danger-text fw-medium p-t">I'm a text on top of a danger-500 background 👋</div>
-</Canvas>
+<Canvas sourceState="none" of={Stories.Example}/>
 
 ## Customize
 
diff --git a/packages/react/src/docs/colors.stories.tsx b/packages/react/src/docs/colors.stories.tsx
new file mode 100644
index 0000000..1c52e9d
--- /dev/null
+++ b/packages/react/src/docs/colors.stories.tsx
@@ -0,0 +1,105 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+
+const meta: Meta = {
+  title: "Misc/Colors",
+};
+
+export default meta;
+type Story = StoryObj<{}>;
+
+const colors = [
+  "primary",
+  "secondary",
+  "greyscale",
+  "success",
+  "info",
+  "warning",
+  "danger",
+];
+const tints = [900, 800, 700, 600, 500, 400, 300, 200, 100];
+
+export const BackgroundColors: Story = {
+  render: () => {
+    return (
+      <div>
+        {colors.map((color) => (
+          <div key={color} style={{ display: "flex", gap: "5px" }}>
+            {tints.map((tint) => (
+              <div
+                key={color + tint}
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                  flexShrink: 0,
+                  flexBasis: "120px",
+                  alignItems: "center",
+                  flexGrow: 1,
+                }}
+              >
+                <div
+                  style={{ width: "72px", height: "48px" }}
+                  className={"bg-" + color + "-" + tint}
+                />
+                <pre className="clr-greyscale-800 fs-s mt-st">
+                  bg-{color}-{tint}
+                </pre>
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
+    );
+  },
+};
+
+export const TextColors: Story = {
+  render: () => {
+    return (
+      <div>
+        {colors.map((color) => (
+          <div key={color} style={{ display: "flex", gap: "10px" }}>
+            {tints.map((tint) => {
+              const classes = ["fs-s", "mt-st", "clr-" + color + "-" + tint];
+              return (
+                <div
+                  key={color + tint}
+                  style={{
+                    display: "flex",
+                    flexDirection: "column",
+                    flexShrink: 0,
+                    flexBasis: "110px",
+                    alignItems: "center",
+                    flexGrow: 1,
+                  }}
+                >
+                  <pre className={classes.join(" ")}>
+                    clr-{color}-{tint}
+                  </pre>
+                </div>
+              );
+            })}
+          </div>
+        ))}
+      </div>
+    );
+  },
+};
+
+export const Example: Story = {
+  render: () => {
+    return (
+      <>
+        <div className="bg-primary-500 clr-primary-text fw-medium p-t">
+          I am a text on top of a primary-500 background 👋
+        </div>
+        <div className="clr-secondary-900 bg-secondary-500 clr-secondary-text fw-medium p-t">
+          I am a text on top of a secondary-500 background 👋
+        </div>
+        <div className="bg-danger-500 clr-danger-text fw-medium p-t">
+          I am a text on top of a danger-500 background 👋
+        </div>
+      </>
+    );
+  },
+};
diff --git a/packages/react/src/docs/customization.mdx b/packages/react/src/docs/customization.mdx
index a434cea..06d5c5c 100644
--- a/packages/react/src/docs/customization.mdx
+++ b/packages/react/src/docs/customization.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs';
+import { Meta, Source } from '@storybook/addon-docs';
 
 <Meta title="Getting Started/Customization"/>
 
diff --git a/packages/react/src/docs/first-steps.mdx b/packages/react/src/docs/first-steps.mdx
index 0bb768b..fb2aa94 100644
--- a/packages/react/src/docs/first-steps.mdx
+++ b/packages/react/src/docs/first-steps.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs';
+import { Meta, Source } from '@storybook/addon-docs';
 
 <Meta title="Getting Started/First steps"/>
 
diff --git a/packages/react/src/docs/installation.mdx b/packages/react/src/docs/installation.mdx
index 992c2c9..ad794b4 100644
--- a/packages/react/src/docs/installation.mdx
+++ b/packages/react/src/docs/installation.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs';
+import { Meta, Source } from '@storybook/addon-docs';
 
 <Meta title="Getting Started/Installation"/>
 
diff --git a/packages/react/src/docs/migrating/1_migrating_v1_to_v2.mdx b/packages/react/src/docs/migrating/1_migrating_v1_to_v2.mdx
index 7ea56fc..b27d803 100644
--- a/packages/react/src/docs/migrating/1_migrating_v1_to_v2.mdx
+++ b/packages/react/src/docs/migrating/1_migrating_v1_to_v2.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs';
+import { Canvas, Meta, Story, Source } from '@storybook/addon-docs';
 
 <Meta title="Migrating/From v1 to v2"/>
 
diff --git a/packages/react/src/docs/spacings.mdx b/packages/react/src/docs/spacings.mdx
index 4b22c80..9e8189a 100644
--- a/packages/react/src/docs/spacings.mdx
+++ b/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} />
diff --git a/packages/react/src/docs/spacings.stories.tsx b/packages/react/src/docs/spacings.stories.tsx
new file mode 100644
index 0000000..4d2a5b5
--- /dev/null
+++ b/packages/react/src/docs/spacings.stories.tsx
@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { tokens } from ":/cunningham-tokens";
+
+const meta: Meta = {
+  title: "Misc/Spacings",
+};
+
+export default meta;
+type Story = StoryObj<{}>;
+
+export const Default: Story = {
+  render: () => {
+    return (
+      <div style={{ display: "flex", flexDirection: "column", gap: "10px" }}>
+        {Object.entries(tokens.themes.default.theme.spacings).map(
+          ([key, value]) => {
+            return (
+              <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" }}
+                >
+                  {value}
+                </div>
+                <div
+                  className={"bg-danger-100 pl-" + key}
+                  style={{ height: "48px", width: 0 }}
+                />
+              </div>
+            );
+          },
+        )}
+      </div>
+    );
+  },
+};
+
+export const Example: Story = {
+  render: () => {
+    return (
+      <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>
+    );
+  },
+};
diff --git a/packages/react/src/docs/theming.mdx b/packages/react/src/docs/theming.mdx
index 0a1f310..8219ba9 100644
--- a/packages/react/src/docs/theming.mdx
+++ b/packages/react/src/docs/theming.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs';
+import { Meta, Source } from '@storybook/addon-docs';
 
 <Meta title="Getting Started/Theming"/>
 
diff --git a/packages/react/src/docs/typo.mdx b/packages/react/src/docs/typo.mdx
index 0d98ba6..da60a39 100644
--- a/packages/react/src/docs/typo.mdx
+++ b/packages/react/src/docs/typo.mdx
@@ -1,5 +1,5 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs';
-import { tokens } from '../cunningham-tokens';
+import { Canvas, Meta, Source } from '@storybook/addon-docs';
+import * as Stories from "./typo.stories";
 
 <Meta title="Getting Started/Typography"/>
 
@@ -20,13 +20,7 @@ You can use custom utility classes to set the font size of an element. These cla
   `}
 />
 
-<Canvas sourceState="none">
-  <div style={{display: "flex", flexDirection: "column", gap: "20px"}}>
-    {Object.keys(tokens.themes.default.theme.font.sizes).map(key => (
-      <div key={key} className={"clr-greyscale-800 fs-" + key}>Using the <code>fs-{key}</code> class</div>
-    ))}
-  </div>
-</Canvas>
+<Canvas sourceState="none" of={Stories.Sizes}/>
 
 You can customize the values of the font size design tokens with the configuration file this way:
 
@@ -67,13 +61,7 @@ You can use custom utility classes to set the font weight of an element. These c
   `}
 />
 
-<Canvas sourceState="none">
-  <div style={{display: "flex", flexDirection: "column", gap: "20px"}}>
-    {Object.keys(tokens.themes.default.theme.font.weights).map(key => (
-      <div key={key} className={"clr-greyscale-800 fs-l fw-" + key}>Using the <code>fw-{key}</code> class</div>
-    ))}
-  </div>
-</Canvas>
+<Canvas sourceState="none" of={Stories.Weights}/>
 
 You can customize the values of the font weight design tokens with the configuration file this way:
 
@@ -118,13 +106,7 @@ class on every dom element.
   `}
 />
 
-<Canvas sourceState="none">
-  <div style={{display: "flex", flexDirection: "column", gap: "20px"}}>
-    {Object.keys(tokens.themes.default.theme.font.families).map(key => (
-    <div key={key} className={"clr-greyscale-800 f-" + key}>Using the <code>f-{key}</code> class</div>
-    ))}
-  </div>
-</Canvas>
+<Canvas sourceState="none" of={Stories.Families}/>
 
 You can customize the values of the font family design tokens with the configuration file this way:
 
diff --git a/packages/react/src/docs/typo.stories.tsx b/packages/react/src/docs/typo.stories.tsx
new file mode 100644
index 0000000..941b2de
--- /dev/null
+++ b/packages/react/src/docs/typo.stories.tsx
@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { tokens } from ":/cunningham-tokens";
+
+const meta: Meta = {
+  title: "Misc/Spacings",
+};
+
+export default meta;
+type Story = StoryObj<{}>;
+
+export const Sizes: Story = {
+  render: () => {
+    return (
+      <div style={{ display: "flex", flexDirection: "column", gap: "20px" }}>
+        {Object.keys(tokens.themes.default.theme.font.sizes).map((key) => (
+          <div key={key} className={"clr-greyscale-800 fs-" + key}>
+            Using the <code>fs-{key}</code> class
+          </div>
+        ))}
+      </div>
+    );
+  },
+};
+
+export const Weights: Story = {
+  render: () => {
+    return (
+      <div style={{ display: "flex", flexDirection: "column", gap: "20px" }}>
+        {Object.keys(tokens.themes.default.theme.font.weights).map((key) => (
+          <div key={key} className={"clr-greyscale-800 fs-l fw-" + key}>
+            Using the <code>fw-{key}</code> class
+          </div>
+        ))}
+      </div>
+    );
+  },
+};
+
+export const Families: Story = {
+  render: () => {
+    return (
+      <div style={{ display: "flex", flexDirection: "column", gap: "20px" }}>
+        {Object.keys(tokens.themes.default.theme.font.families).map((key) => (
+          <div key={key} className={"clr-greyscale-800 f-" + key}>
+            Using the <code>f-{key}</code> class
+          </div>
+        ))}
+      </div>
+    );
+  },
+};