📝(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/.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',

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';

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';

packages/react/src/components/Modal/index.tsx

@@ -36,20 +36,19 @@ export const useModal = ({
   };
 };
 
-export interface ModalProps
+export type ModalProps = PropsWithChildren & {
-  extends PropsWithChildren<{
+  size: ModalSize;
-    size: ModalSize;
+  isOpen: boolean;
-    isOpen: boolean;
+  onClose: () => void;
-    onClose: () => void;
+  leftActions?: React.ReactNode;
-    leftActions?: React.ReactNode;
+  rightActions?: React.ReactNode;
-    rightActions?: React.ReactNode;
+  actions?: React.ReactNode;
-    actions?: React.ReactNode;
+  title?: ReactNode;
-    title?: ReactNode;
+  titleIcon?: React.ReactNode;
-    titleIcon?: React.ReactNode;
+  hideCloseButton?: boolean;
-    hideCloseButton?: boolean;
+  closeOnClickOutside?: boolean;
-    closeOnClickOutside?: boolean;
+  preventClose?: 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");
   }

packages/react/src/docs/colors.mdx

@@ -1,6 +1,5 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'; import {
+import { Canvas, Meta, Source } from '@storybook/addon-docs';
-  tokens
+import * as Stories from './colors.stories.tsx';
-} from '../cunningham-tokens';
 
 <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">
+<Canvas sourceState="none" of={Stories.BackgroundColors}/>
-  {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>
 
 ## 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">
+<Canvas sourceState="none" of={Stories.TextColors}/>
-  {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>
 
 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">
+<Canvas sourceState="none" of={Stories.Example}/>
-<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>
 
 ## Customize
 

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>
+      </>
+    );
+  },
+};

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"/>
 

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"/>
 

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"/>
 

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"/>
 

packages/react/src/docs/spacings.mdx

@@ -1,5 +1,5 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs';
+import { Canvas, Meta } from '@storybook/addon-docs';
-import { tokens } from '../cunningham-tokens';
+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">
+<Canvas sourceState="none" of={Stories.Default}/>
-  <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>
 
 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">
+<Canvas sourceState="shown" of={Stories.Example} />
-  <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>

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>
+    );
+  },
+};

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"/>
 

packages/react/src/docs/typo.mdx

@@ -1,5 +1,5 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs';
+import { Canvas, Meta, Source } from '@storybook/addon-docs';
-import { tokens } from '../cunningham-tokens';
+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">
+<Canvas sourceState="none" of={Stories.Sizes}/>
-  <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>
 
 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">
+<Canvas sourceState="none" of={Stories.Weights}/>
-  <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>
 
 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">
+<Canvas sourceState="none" of={Stories.Families}/>
-  <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>
 
 You can customize the values of the font family design tokens with the configuration file this way:
 

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>
+    );
+  },
+};