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

The old way of using Canvas is deprecated, we need to migrate all the
stories to the new standard.
---
 .../react/src/components/Button/index.mdx     | 38 +++-------
 .../react/src/components/DataGrid/index.mdx   | 29 ++------
 .../src/components/Forms/Checkbox/index.mdx   | 56 ++++----------
 .../src/components/Forms/DatePicker/index.mdx | 57 ++++++---------
 .../components/Forms/FileUploader/index.mdx   | 49 +++----------
 .../src/components/Forms/Input/index.mdx      | 60 ++++-----------
 .../src/components/Forms/Radio/index.mdx      | 57 ++++-----------
 .../src/components/Forms/Select/mono.mdx      | 58 ++++-----------
 .../src/components/Forms/Select/multi.mdx     | 57 ++++-----------
 .../src/components/Forms/Switch/index.mdx     | 63 +++++-----------
 .../src/components/Forms/TextArea/index.mdx   | 52 ++++---------
 packages/react/src/components/Modal/index.mdx | 73 +++++--------------
 .../react/src/components/Pagination/index.mdx | 16 +---
 13 files changed, 175 insertions(+), 490 deletions(-)

diff --git a/packages/react/src/components/Button/index.mdx b/packages/react/src/components/Button/index.mdx
index 8c0cb13..5ec2a1d 100644
--- a/packages/react/src/components/Button/index.mdx
+++ b/packages/react/src/components/Button/index.mdx
@@ -23,19 +23,13 @@ You can use icons within the button by passing the icon name as a prop.
 
 > Use the attribute `iconPosition` to position the icon on the left or right side of the button. The default is `left`.
 
-<Canvas sourceState="shown">
-  <Story id="components-button--icon-left"/>
-</Canvas>
+<Canvas sourceState="shown" of={Stories.IconLeft}/>
 
-<Canvas sourceState="shown">
-  <Story id="components-button--icon-right"/>
-</Canvas>
+<Canvas sourceState="shown" of={Stories.IconRight}/>
 
 You can also use button with only an icon.
 
-<Canvas sourceState="shown">
-  <Story id="components-button--icon-only"/>
-</Canvas>
+<Canvas sourceState="shown" of={Stories.IconOnly}/>
 
 ## Disabled
 
@@ -43,34 +37,22 @@ The button can be disabled. The disabled button will render the same no matter w
 
 > Keep in the mind that a disabled button will never call `onClick` if it is provided.
 
-<Canvas sourceState="shown">
-  <Story id="components-button--disabled"/>
-</Canvas>
+<Canvas sourceState="shown" of={Stories.Disabled}/>
 
 ## Full width
 
 The button can be set to full width. You can use the `fullWidth` prop to do so.
 
-<Canvas sourceState="shown">
-  <Story id="components-button--full-width"/>
-</Canvas>
-<Canvas sourceState="shown">
-  <Story id="components-button--full-width-with-icon"/>
-</Canvas>
+<Canvas sourceState="shown" of={Stories.FullWidth}/>
+<Canvas sourceState="shown" of={Stories.FullWidthWithIcon}/>
 
 ## Size
 
 You can adjust the size of the button by using the `size` prop. Default value is `medium`.
 
-<Canvas sourceState="shown">
-  <Story id="components-button--primary"/>
-</Canvas>
-<Canvas sourceState="shown">
-  <Story id="components-button--small"/>
-</Canvas>
-<Canvas sourceState="shown">
-  <Story id="components-button--nano"/>
-</Canvas>
+<Canvas sourceState="shown" of={Stories.Primary}/>
+<Canvas sourceState="shown" of={Stories.Small}/>
+<Canvas sourceState="shown" of={Stories.Nano}/>
 
 ## Props
 
@@ -78,8 +60,6 @@ You can use all the props of the native html `<button>` element props plus the f
 
 <ArgTypes of={Button} />
 
-
-
 ## Design tokens
 
 Here a the custom design tokens defined by the button.
diff --git a/packages/react/src/components/DataGrid/index.mdx b/packages/react/src/components/DataGrid/index.mdx
index 9f0e064..4f8f3bb 100644
--- a/packages/react/src/components/DataGrid/index.mdx
+++ b/packages/react/src/components/DataGrid/index.mdx
@@ -2,6 +2,7 @@ import { Canvas, Meta, Source, ArgTypes } from '@storybook/blocks';
 import { DataGrid } from './index';
 import { SimpleDataGrid } from './SimpleDataGrid';
 import { DataList } from './DataList';
+
 import * as Stories from './index.stories';
 
 <Meta of={Stories}/>
@@ -11,9 +12,7 @@ import * as Stories from './index.stories';
 Cunningham provides a DataGrid component that can be used to display data in a tabular format. The DataGrid component
 is built on top of [Tan Stack Table](https://tanstack.com/table/v8). It can be used for client only data or server side data.
 
-<Canvas>
-  <Story id="components-datagrid--full-server-side"/>
-</Canvas>
+<Canvas of={Stories.FullServerSide}/>
 
 ## Get Started
 
@@ -39,9 +38,7 @@ This component is a wrapper around the more complicated DataGrid component. It i
 
 Here a quick usage example
 
-<Canvas sourceState="shown">
-  <Story id="components-datagrid--data-list-only"/>
-</Canvas>
+<Canvas sourceState="shown" of={Stories.DataListOnly}/>
 
 ### Props
 
@@ -62,9 +59,7 @@ Sorting etc ...
 
 Take a look at the following example that renders a table of users.
 
-<Canvas sourceState="shown">
-  <Story id="components-datagrid--client-side-without-pagination"/>
-</Canvas>
+<Canvas sourceState="shown" of={Stories.ClientSideWithoutPagination}/>
 
 As you can see in this example there is no pagination, but we can simply add it by adding a `defaultPaginationParams` props.
 We will also enable a default sorting on the `price` column with the `defaultSortModel` props, along with the row selection
@@ -73,9 +68,7 @@ with `enableRowSelection`, `rowSelection` and `onRowSelectionChange` props.
 > Please click on checkboxes to select rows to see hows the `onRowSelectionChange` prop works, selected ids are displayed
 below the table.
 
-<Canvas sourceState="shown">
-  <Story id="components-datagrid--client-side-with-pagination"/>
-</Canvas>
+<Canvas sourceState="shown" of={Stories.ClientSideWithPagination}/>
 
 As you can see, with `SimpleDataGrid` you can easily add pagination, sorting without have to worry about controlling
 their states.
@@ -93,9 +86,7 @@ pagination, sorting etc ...
 Please take a look at the following example that simulates a server side data that's re-fetched on each page and sorting
 change.
 
-<Canvas sourceState="shown">
-  <Story id="components-datagrid--full-server-side"/>
-</Canvas>
+<Canvas sourceState="shown" of={Stories.FullServerSide}/>
 
 As you can see, in this example the pagination and sorting are now controlled, this is more verbose but gives you more
 control over the state of the table, like being able to use `useEffect` to fetch data when the state changes.
@@ -151,17 +142,13 @@ outside the grid component ( for example to delete selected rows ).
 The component provides out of the box a loading state that can be enabled by setting the `isLoading` props to `true`.
 So feel free to use it between page or sorting changes when you are fetching data from a server.
 
-<Canvas sourceState="shown">
-  <Story id="components-datagrid--loading"/>
-</Canvas>
+<Canvas sourceState="shown" of={Stories.Loading}/>
 
 ## Empty State
 
 The component automatically displays an empty state when there is no data to display and it is not loading.
 
-<Canvas sourceState="shown">
-  <Story id="components-datagrid--empty"/>
-</Canvas>
+<Canvas sourceState="shown" of={Stories.Empty}/>
 
 ## Actions alignment
 
diff --git a/packages/react/src/components/Forms/Checkbox/index.mdx b/packages/react/src/components/Forms/Checkbox/index.mdx
index cba0811..6f5ffbb 100644
--- a/packages/react/src/components/Forms/Checkbox/index.mdx
+++ b/packages/react/src/components/Forms/Checkbox/index.mdx
@@ -8,9 +8,7 @@ import { Checkbox } from './index';
 
 Cunningham provides a versatile Checkbox component that you can use in your forms.
 
-<Canvas>
-  <Story id="components-forms-checkbox--group"/>
-</Canvas>
+<Canvas of={Stories.Group} />
 
 ## Label
 
@@ -18,80 +16,58 @@ The `label` props is optional, but you can use it to provide a description of th
 
 **Without label**
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-checkbox--default"/>
-</Canvas>
+<Canvas of={Stories.Default} />
 
 **With label**
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-checkbox--with-label"/>
-</Canvas>
+<Canvas of={Stories.WithLabel} />
 
 ## Value
 
 You can set the value of the checkbox in 3 different ways.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-checkbox--default"/>
-  <Story id="components-forms-checkbox--indeterminate"/>
-  <Story id="components-forms-checkbox--checked"/>
-</Canvas>
+<Canvas of={Stories.Default} />
+<Canvas of={Stories.Indeterminate} />
+<Canvas of={Stories.Checked} />
 
 ## Texts
 
 As the component uses [Field](?path=/story/components-forms-field-doc--page), you can use the `text` props to provide a description of the checkbox.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-checkbox--with-texts"/>
-</Canvas>
+<Canvas of={Stories.WithTexts} />
 
 ## Disabled
 
 As a regular checkbox, you can disable it by using the `disabled` props.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-checkbox--disabled"/>
-</Canvas>
+<Canvas of={Stories.Disabled} />
 
 ## States
 
 You can use the following props to change the state of the Input component by using the `state` props.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-checkbox--with-texts"/>
-</Canvas>
+<Canvas of={Stories.WithTexts} />
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-checkbox--success"/>
-</Canvas>
+<Canvas of={Stories.Success} />
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-checkbox--error"/>
-</Canvas>
+<Canvas of={Stories.Error} />
 
 ## Group
 
 It will happen often that you will need to use multiple grouped checkboxes. You can use the `CheckboxGroup` component to do so.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-checkbox--group"/>
-</Canvas>
+<Canvas of={Stories.Group} />
 
 You can also define `state`, `text` props on the group component
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-checkbox--group-error"/>
-  <Story id="components-forms-checkbox--group-success"/>
-</Canvas>
+<Canvas of={Stories.GroupError} />
+<Canvas of={Stories.GroupSuccess} />
 
 ## Usage with react-hook-form
 
 You can use this input with [react-hook-form](https://react-hook-form.com/docs)
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-checkbox--react-hook-form"/>
-</Canvas>
+<Canvas of={Stories.ReactHookForm} />
 
 
 ### Props
@@ -122,4 +98,4 @@ See also [Field](?path=/story/components-forms-field-doc--page)
 
 ##
 
-<img src="components/Forms/Checkbox/resources/dd_2.svg"/>
\ No newline at end of file
+<img src="components/Forms/Checkbox/resources/dd_2.svg"/>
diff --git a/packages/react/src/components/Forms/DatePicker/index.mdx b/packages/react/src/components/Forms/DatePicker/index.mdx
index 9d02809..ed5c848 100644
--- a/packages/react/src/components/Forms/DatePicker/index.mdx
+++ b/packages/react/src/components/Forms/DatePicker/index.mdx
@@ -1,9 +1,10 @@
-
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs';
+import { Canvas, Meta, Story, Source } from '@storybook/addon-docs';
 import { DatePicker } from "./index";
 import { DateRangePicker } from "./index";
+import * as Stories from "./index.stories"
+import { ArgTypes } from '@storybook/blocks';
 
-<Meta title="Components/Forms/DatePicker/Doc" component={DatePicker}/>
+<Meta of={Stories}/>
 
 
 # DatePicker
@@ -26,16 +27,13 @@ UI components provided by [React-Spectrum](https://react-spectrum.adobe.com/reac
   `}
 />
 
-<Canvas>
-  <Story id="components-forms-datepicker--default"/>
-</Canvas>
+<Canvas of={Stories.Default}/>
+
 
 ## Default value
 You can use the following props to change the default value of the DatePicker component by using the `state` props.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-datepicker--default-value"/>
-</Canvas>
+<Canvas of={Stories.DefaultValue} sourceState="shown"/>
 
 ## Range
 
@@ -65,62 +63,47 @@ Ex: If a `DateRangePicker` is named `"subscription"`, you would access its value
   `}
 />
 
-<Canvas>
-  <Story id="components-forms-datepicker--range-default"/>
-</Canvas>
-
+<Canvas of={Stories.RangeDefault}/>
 
 ## States
 
 You can use the following props to change the state of the DatePicker component by using the `state` props.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-datepicker--error"/>
-  <Story id="components-forms-datepicker--success"/>
-</Canvas>
+<Canvas of={Stories.Error}/>
+<Canvas of={Stories.Success}/>
 
 ## Disabled
 
 As a regular input, you can disable it by using the `disabled` props.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-datepicker--disabled"/>
-  <Story id="components-forms-datepicker--disabled-value"/>
-</Canvas>
+<Canvas of={Stories.Disabled} sourceState="shown"/>
+<Canvas of={Stories.DisabledValue} sourceState="shown"/>
 
 ## Texts
 
 As the component uses [Field](?path=/story/components-forms-field-doc--page), you can use the `text` props to provide a description of the checkbox.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-datepicker--with-text"/>
-</Canvas>
+<Canvas of={Stories.WithText} sourceState="shown"/>
 
 ## Controlled / Non Controlled
 
 Like a native input, you can use the DatePicker component in a controlled or non controlled way. You can see the example below
 using the component in a controlled way.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-datepicker--controlled"/>
-  <Story id="components-forms-datepicker--range-controlled"/>
-</Canvas>
+<Canvas of={Stories.Controlled} sourceState="shown"/>
+<Canvas of={Stories.RangeControlled} sourceState="shown"/>
 
 ## MinValue / MaxValue
 
 You can pass a date range that are valid using the `minValue` and `maxValue` props.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-datepicker--min-max-value"/>
-</Canvas>
+<Canvas of={Stories.MinMaxValue} sourceState="shown"/>
 
 ## Invalid date
 
 When passing an invalid date, for example outside of the valid range, the DatePicker component would render invalid.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-datepicker--invalid-value"/>
-</Canvas>
+<Canvas of={Stories.InvalidValue} sourceState="shown"/>
 
 ## International calendars
 
@@ -131,6 +114,8 @@ By default, the DatePicker component uses the CunninghamProvider locale.
   <Story id="components-forms-datepicker--custom-locale"/>
   <Story id="components-forms-datepicker--cunningham-locale"/>
 </Canvas>
+<Canvas of={Stories.CustomLocale}/>
+<Canvas of={Stories.CunninghamLocale}/>
 
 ## Timezone management
 
@@ -147,11 +132,11 @@ You can see the list of props below.
 
 ### DatePicker
 
-<ArgsTable of={DatePicker} />
+<ArgTypes of={DatePicker} />
 
 ### DateRangePicker
 
-<ArgsTable of={DateRangePicker} />
+<ArgTypes of={DateRangePicker} />
 
 
 ## Design tokens
diff --git a/packages/react/src/components/Forms/FileUploader/index.mdx b/packages/react/src/components/Forms/FileUploader/index.mdx
index ad7acaf..22797e2 100644
--- a/packages/react/src/components/Forms/FileUploader/index.mdx
+++ b/packages/react/src/components/Forms/FileUploader/index.mdx
@@ -8,10 +8,7 @@ import { FileUploader } from './index';
 
 Cunningham provides a file uploader component that you can use in your forms.
 
-
-<Canvas>
-  <Story id="components-forms-fileuploader--mono"/>
-</Canvas>
+<Canvas of={Stories.Mono}/>
 
 <Source
   language='ts'
@@ -24,38 +21,22 @@ Cunningham provides a file uploader component that you can use in your forms.
 
 The file uploader comes with a multi version to handle multiple files.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-fileuploader--multi-wih-files"/>
-</Canvas>
-
+<Canvas of={Stories.MultiWihFiles} sourceState="shown"/>
 
 ## States
 
 You can use the following props to change the state of the FileUploader component by using the `state` props.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-fileuploader--mono-with-file-success"/>
-</Canvas>
-
-<Canvas sourceState="shown">
-  <Story id="components-forms-fileuploader--mono-error"/>
-</Canvas>
-
-<Canvas sourceState="shown">
-  <Story id="components-forms-fileuploader--mono-uploading"/>
-</Canvas>
+<Canvas of={Stories.MultiWithFileSuccess} sourceState="shown"/>
+<Canvas of={Stories.MonoError} sourceState="shown"/>
+<Canvas of={Stories.MonoUploading} sourceState="shown"/>
 
 ## Texts
 
 You can customize displayed texts by using `bigText` and `text` props.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-fileuploader--mono-with-text"/>
-</Canvas>
-
-<Canvas sourceState="shown">
-  <Story id="components-forms-fileuploader--mono-with-big-text"/>
-</Canvas>
+<Canvas of={Stories.MonoWithText} sourceState="shown"/>
+<Canvas of={Stories.MonoWithBigText} sourceState="shown"/>
 
 ## Icons
 
@@ -63,15 +44,9 @@ You can customize the icons used by the FileUploader using `icon`, `successIcon`
 
 > You can also disable the icon animation on hover by using `animateIcon` props.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-fileuploader--mono-custom-icons"/>
-</Canvas>
-<Canvas sourceState="shown">
-  <Story id="components-forms-fileuploader--mono-custom-icons-success"/>
-</Canvas>
-<Canvas sourceState="shown">
-  <Story id="components-forms-fileuploader--mono-custom-icons-uploading"/>
-</Canvas>
+<Canvas of={Stories.MonoCustomIcons} sourceState="shown"/>
+<Canvas of={Stories.MonoCustomIconsSuccess} sourceState="shown"/>
+<Canvas of={Stories.MonoCustomIconsUploading} sourceState="shown"/>
 
 ## Controlled / Non Controlled
 
@@ -83,9 +58,7 @@ You can also reset the input by using the `reset` method available via the ref.
 
 It works the same for multiple or mono version.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-fileuploader--multi-value"/>
-</Canvas>
+<Canvas of={Stories.MultiValue} sourceState="shown"/>
 
 ## Props
 
diff --git a/packages/react/src/components/Forms/Input/index.mdx b/packages/react/src/components/Forms/Input/index.mdx
index b3940d9..0c6485d 100644
--- a/packages/react/src/components/Forms/Input/index.mdx
+++ b/packages/react/src/components/Forms/Input/index.mdx
@@ -8,9 +8,7 @@ import * as Stories from './index.stories';
 
 Cunningham provides a versatile Input component that you can use in your forms.
 
-<Canvas>
-  <Story id="components-forms-input--default"/>
-</Canvas>
+<Canvas of={Stories.Default} sourceState="shown"/>
 
 <Source
   language='ts'
@@ -23,96 +21,68 @@ Cunningham provides a versatile Input component that you can use in your forms.
 
 You can use the following props to change the state of the Input component by using the `state` props.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-input--default"/>
-</Canvas>
-
-<Canvas sourceState="shown">
-  <Story id="components-forms-input--success"/>
-</Canvas>
-
-<Canvas sourceState="shown">
-  <Story id="components-forms-input--error"/>
-</Canvas>
+<Canvas of={Stories.Default} sourceState="shown"/>
+<Canvas of={Stories.Success} sourceState="shown"/>
+<Canvas of={Stories.Error} sourceState="shown"/>
 
 ## Disabled
 
 As a regular input, you can disable it by using the `disabled` props.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-input--disabled-empty"/>
-  <Story id="components-forms-input--disabled-filled"/>
-</Canvas>
+<Canvas of={Stories.DisabledEmpty} sourceState="shown"/>
+<Canvas of={Stories.DisabledFilled} sourceState="shown"/>
 
 ## Icons
 
 You can define an icon that will appear on the left side of the input by using the `icon` props.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-input--icon"/>
-</Canvas>
+<Canvas of={Stories.Icon} sourceState="shown"/>
 
 You can also independently add an icon on the right side by using the `rightIcon` props.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-input--icon-right"/>
-</Canvas>
+<Canvas of={Stories.IconRight} sourceState="shown"/>
 
 ## Texts
 
 You can define a text that will appear below the input by using the `text` props.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-input--with-text"/>
-</Canvas>
+<Canvas of={Stories.WithText} sourceState="shown"/>
 
 You can also independently add a text on the right side by using the `rightText` props.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-input--with-both-texts"/>
-</Canvas>
+<Canvas of={Stories.WithBothTexts} sourceState="shown"/>
 
 ## Width
 
 By default, the input has a default width, like all inputs. But you can force it to take the full width of its container by using the `fullWidth` props.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-input--full-width"/>
-</Canvas>
+<Canvas of={Stories.FullWidth} sourceState="shown"/>
 
 ## Chars Counter
 
 You can display a counter of the number of characters entered in the input by using the `charsCounter` props. Please bare
 in mind to also define `charCounterMax`.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-input--char-counter"/>
-</Canvas>
+<Canvas of={Stories.CharCounter} sourceState="shown"/>
 
 ## Controlled / Non Controlled
 
 Like a native input, you can use the Input component in a controlled or non controlled way. You can see the example below
 using the component in a controlled way.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-input--controlled"/>
-</Canvas>
+<Canvas of={Stories.Controlled} sourceState="shown"/>
 
 ## Ref
 
 You can use the `ref` props to get a reference to the input element.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-input--with-ref"/>
-</Canvas>
+<Canvas of={Stories.WithRef} sourceState="shown"/>
 
 ## Usage with react-hook-form
 
 You can use this input with [react-hook-form](https://react-hook-form.com/docs)
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-input--react-hook-form"/>
-</Canvas>
+<Canvas of={Stories.ReactHookForm} sourceState="shown"/>
 
 ## Props
 
diff --git a/packages/react/src/components/Forms/Radio/index.mdx b/packages/react/src/components/Forms/Radio/index.mdx
index 66257c6..dd0a9b7 100644
--- a/packages/react/src/components/Forms/Radio/index.mdx
+++ b/packages/react/src/components/Forms/Radio/index.mdx
@@ -8,9 +8,7 @@ import * as Stories from './index.stories';
 
 Cunningham provides a versatile Radio component that can be used in a variety of ways. The radio component is a form element that allows the user to select one option from a set of options.
 
-<Canvas>
-  <Story id="components-forms-radio--group"/>
-</Canvas>
+<Canvas of={Stories.Group} sourceState="shown"/>
 
 ## Label
 
@@ -18,80 +16,55 @@ The `label` props is optional, but you can use it to provide a description of th
 
 **Without label**
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-radio--default"/>
-</Canvas>
+<Canvas of={Stories.Default} sourceState="shown"/>
 
 **With label**
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-radio--with-label"/>
-</Canvas>
+<Canvas of={Stories.WithLabel} sourceState="shown"/>
 
 ## Value
 
 You can set the value of the radio with the `checked` attribute.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-radio--default"/>
-  <Story id="components-forms-radio--checked"/>
-</Canvas>
+<Canvas of={Stories.Default}/>
+<Canvas of={Stories.Checked}/>
 
 ## Texts
 
 As the component uses [Field](?path=/story/components-forms-field-doc--page), you can use the `text` props to provide a description of the radio.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-radio--with-text"/>
-</Canvas>
+<Canvas of={Stories.WithText} sourceState="shown"/>
 
 ## Disabled
 
 As a regular radio, you can disable it by using the `disabled` props.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-radio--disabled"/>
-</Canvas>
+<Canvas of={Stories.Disabled} sourceState="shown"/>
 
 ## States
 
 You can use the following props to change the state of the Input component by using the `state` props.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-radio--with-text"/>
-</Canvas>
-
-<Canvas sourceState="shown">
-  <Story id="components-forms-radio--success"/>
-</Canvas>
-
-<Canvas sourceState="shown">
-  <Story id="components-forms-radio--error"/>
-</Canvas>
+<Canvas of={Stories.WithText} sourceState="shown"/>
+<Canvas of={Stories.Success} sourceState="shown"/>
+<Canvas of={Stories.Error} sourceState="shown"/>
 
 ## Group
 
 Here is how you can leverage the `RadioGroup` component to create a group of radio buttons.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-radio--group"/>
-</Canvas>
+<Canvas of={Stories.Group} sourceState="shown"/>
 
 You can also define `state`, `text` props on the group component
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-radio--group-error"/>
-  <Story id="components-forms-radio--group-success"/>
-</Canvas>
+<Canvas of={Stories.GroupError} sourceState="shown"/>
+<Canvas of={Stories.GroupSuccess} sourceState="shown"/>
 
 ## Usage with react-hook-form
 
 You can use this radio with [react-hook-form](https://react-hook-form.com/docs)
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-radio--react-hook-form"/>
-</Canvas>
-
+<Canvas of={Stories.ReactHookForm} sourceState="shown"/>
 
 ### Props
 
@@ -120,4 +93,4 @@ See also [Field](?path=/story/components-forms-field-doc--page)
 
 ##
 
-<img src="components/Forms/Radio/resources/dd_3.svg"/>
\ No newline at end of file
+<img src="components/Forms/Radio/resources/dd_3.svg"/>
diff --git a/packages/react/src/components/Forms/Select/mono.mdx b/packages/react/src/components/Forms/Select/mono.mdx
index 3b19d1c..8a35c6e 100644
--- a/packages/react/src/components/Forms/Select/mono.mdx
+++ b/packages/react/src/components/Forms/Select/mono.mdx
@@ -11,9 +11,7 @@ using [Downshift](https://www.downshift-js.com/), so that mean there is no `sele
 
 > You can also use the [multi version](?path=/docs/components-forms-select-multi--docs) if you need
 
-<Canvas>
-  <Story id="components-forms-select-mono--uncontrolled"/>
-</Canvas>
+<Canvas of={Stories.Uncontrolled}/>
 
 ## Options
 
@@ -36,9 +34,7 @@ As you can see the `value` is optional, if not provided, the `label` will be use
 
 You can enable the text live filtering simply by using the `searchable` props.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-select-mono--searchable-uncontrolled"/>
-</Canvas>
+<Canvas of={Stories.SearchableUncontrolled} />
 
 > You can use `onSearchInputChange` to get the value of the input when the user is typing.
 
@@ -46,54 +42,38 @@ You can enable the text live filtering simply by using the `searchable` props.
 
 You can use the following props to change the state of the Select component by using the `state` props.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-select-mono--success"/>
-</Canvas>
-
-<Canvas sourceState="shown">
-  <Story id="components-forms-select-mono--error"/>
-</Canvas>
+<Canvas of={Stories.Success}/>
+<Canvas of={Stories.Error}/>
 
 ## Disabled
 
 As a regular select, you can disable it by using the `disabled` props.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-select-mono--disabled"/>
-</Canvas>
+<Canvas of={Stories.Disabled}/>
 
 ## Texts
 
 As the component uses [Field](?path=/docs/components-forms-field--docs), you can use the `text` props to provide a description of the checkbox.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-select-mono--with-text"/>
-</Canvas>
+<Canvas of={Stories.WithText}/>
 
 ## Width
 
 By default, the select has a default width, like all inputs. But you can force it to take the full width of its container by using the `fullWidth` props.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-select-mono--full-width"/>
-</Canvas>
+<Canvas of={Stories.FullWidth}/>
 
 ## Clearable
 
 By default, the select is clearable ( the cross icon on the right is shown ). You can disable it by using the `clearable` props.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-select-mono--not-clearable"/>
-</Canvas>
-
+<Canvas of={Stories.NotClearable}/>
 
 ## Disabled options
 
 You can disable some options by using the `disabled` props on the `Option` object.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-select-mono--disabled-options"/>
-</Canvas>
+<Canvas of={Stories.DisabledOptions}/>
 
 ## Hide label
 
@@ -101,9 +81,7 @@ For some reasons you might want to hide the label of the select. You can do that
 
 > It is important for accessibility to always have a label for your inputs. Keep in mind that setting `hideLabel` to `true`, will only hide the label visually, but it will still be available for screen readers in the DOM.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-select-mono--hidden-label"/>
-</Canvas>
+<Canvas of={Stories.HiddenLabel}/>
 
 ## Custom render option
 
@@ -114,26 +92,20 @@ You can give customize the look of the options by providing `render` callback.
 Feel free to use the attribute `showLabelWhenSelected` to choose whether you want to display selected option with the custom
 HTML or with its `label`. It is set to `true` by default.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-select-mono--custom-render"/>
-</Canvas>
+<Canvas of={Stories.CustomRender}/>
 
 ## Controlled / Non Controlled
 
 Like a native select, you can use the Select component in a controlled or non controlled way. You can see the example below
 using the component in a controlled way.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-select-mono--controlled"/>
-</Canvas>
+<Canvas of={Stories.Controlled}/>
 
 ## Usage with react-hook-form
 
 You can use this input with [react-hook-form](https://react-hook-form.com/docs)
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-select-mono--react-hook-form"/>
-</Canvas>
+<Canvas of={Stories.ReactHookForm}/>
 
 ## Props
 
@@ -172,9 +144,7 @@ See also [Field](?path=/story/components-forms-field-doc--page)
 
 ## Form Example
 
-<Canvas>
-  <Story id="components-forms-select-mono--form-example"/>
-</Canvas>
+<Canvas of={Stories.FormExample}/>
 
 ##
 
diff --git a/packages/react/src/components/Forms/Select/multi.mdx b/packages/react/src/components/Forms/Select/multi.mdx
index bb836ab..040d0fa 100644
--- a/packages/react/src/components/Forms/Select/multi.mdx
+++ b/packages/react/src/components/Forms/Select/multi.mdx
@@ -10,9 +10,7 @@ using [Downshift](https://www.downshift-js.com/), so that mean there is no `sele
 
 The Multi-Select leverages the regular [Select](?path=/docs/components-forms-select-mono--docs) component, you just have to add the `multi` props.
 
-<Canvas>
-  <Story id="components-forms-select-multi--full-width"/>
-</Canvas>
+<Canvas of={Stories.FullWidth}/>
 
 ## Options
 
@@ -22,9 +20,7 @@ The `options` props works the same as the `options` props in the [Select](?path=
 
 You can enable the text live filtering simply by using the `searchable` props.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-select-multi--searchable-uncontrolled"/>
-</Canvas>
+<Canvas of={Stories.SearchableUncontrolled}/>
 
 > You can use `onSearchInputChange` to get the value of the input when the user is typing.
 
@@ -32,53 +28,38 @@ You can enable the text live filtering simply by using the `searchable` props.
 
 You can use the following props to change the state of the Multi-Select component by using the `state` props.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-select-multi--success"/>
-</Canvas>
-
-<Canvas sourceState="shown">
-  <Story id="components-forms-select-multi--error"/>
-</Canvas>
+<Canvas of={Stories.Success}/>
+<Canvas of={Stories.Error}/>
 
 ## Disabled
 
 As a regular select, you can disable it by using the `disabled` props. In this mode the user can't select nor unselect existing options.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-select-multi--disabled"/>
-</Canvas>
+<Canvas of={Stories.Disabled}/>
 
 ## Texts
 
 As the component uses [Field](?path=/docs/components-forms-field--docs), you can use the `text` props to provide a description of the checkbox.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-select-multi--with-text"/>
-</Canvas>
+<Canvas of={Stories.WithText}/>
 
 ## Width
 
 By default, the Multi-Select has a default width, like all inputs. But you can force it to take the full width of its container by using the `fullWidth` props.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-select-multi--full-width"/>
-</Canvas>
+<Canvas of={Stories.FullWidth}/>
 
 ## Clearable
 
 By default, the Multi-Select is clearable ( the cross icon on the right is shown ). You can disable it by using the `clearable` props.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-select-multi--not-clearable"/>
-</Canvas>
+<Canvas of={Stories.NotClearable}/>
 
 ## Disabled options
 
 You can disable some options by using the `disabled` props on the `Option` object.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-select-multi--disabled-options"/>
-</Canvas>
+<Canvas of={Stories.DisabledOptions}/>
 
 ## Hide label
 
@@ -86,9 +67,7 @@ For some reasons you might want to hide the label of the Multi-Select. You can d
 
 > It is important for accessibility to always have a label for your inputs. Keep in mind that setting `hideLabel` to `true`, will only hide the label visually, but it will still be available for screen readers in the DOM.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-select-multi--hidden-label"/>
-</Canvas>
+<Canvas of={Stories.HiddenLabel}/>
 
 ## Monoline
 
@@ -98,9 +77,7 @@ always see the full list of selected options without having to scroll.
 
 > At the moment this props cannot be used in conjunction with `searchable` props.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-select-multi--monoline"/>
-</Canvas>
+<Canvas of={Stories.Monoline}/>
 
 ## Custom render option
 
@@ -111,26 +88,20 @@ You can give customize the look of the options by providing `render` callback.
 Feel free to use the attribute `showLabelWhenSelected` to choose whether you want to display selected option with the custom
 HTML or with its `label`. It is set to `true` by default.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-select-multi--searchable-custom-render"/>
-</Canvas>
+<Canvas of={Stories.SearchableCustomRender}/>
 
 ## Controlled / Non Controlled
 
 Like a native select, you can use the Select component in a controlled or non controlled way. You can see the example below
 using the component in a controlled way.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-select-multi--controlled"/>
-</Canvas>
+<Canvas of={Stories.Controlled}/>
 
 ## Usage with react-hook-form
 
 You can use this input with [react-hook-form](https://react-hook-form.com/docs)
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-select-multi--react-hook-form"/>
-</Canvas>
+<Canvas of={Stories.ReactHookForm}/>
 
 ## Props
 
diff --git a/packages/react/src/components/Forms/Switch/index.mdx b/packages/react/src/components/Forms/Switch/index.mdx
index 0df129c..53c6785 100644
--- a/packages/react/src/components/Forms/Switch/index.mdx
+++ b/packages/react/src/components/Forms/Switch/index.mdx
@@ -1,6 +1,7 @@
-import { Canvas, Story, Meta, ArgsTable, Source } from '@storybook/addon-docs';
+import { Canvas, Story, Meta, Source } from '@storybook/addon-docs';
 import { Switch } from './index';
 import * as Stories from './index.stories';
+import { ArgTypes } from '@storybook/blocks';
 
 <Meta of={Stories}/>
 
@@ -10,10 +11,7 @@ Cunningham provides a Switch component that can be used in a variety of ways.
 
 > To better understand the Switch component, keep in mind that it is kind of a wrapper around the native HTML checkbox element.
 
-<Canvas>
-  <Story id="components-forms-switch--form-example"/>
-</Canvas>
-
+<Canvas of={Stories.FormExample}/>
 
 ## Label
 
@@ -21,15 +19,11 @@ The `label` props is optional, but you can use it to provide a description of th
 
 **Without label**
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-switch--default"/>
-</Canvas>
+<Canvas of={Stories.Default}/>
 
 **With label**
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-switch--with-label"/>
-</Canvas>
+<Canvas of={Stories.WithLabel}/>
 
 ## Label Side
 
@@ -39,53 +33,34 @@ You can decide where to place the label by using the `labelSide` prop.
 
 **Label on the left (default)**
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-switch--with-label"/>
-</Canvas>
+<Canvas of={Stories.WithLabel}/>
 
 **Label on the right**
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-switch--with-label-right"/>
-</Canvas>
+<Canvas of={Stories.WithLabelRight}/>
 
 ## Disabled
 
 You can disable the switch by using the `disabled` prop.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-switch--disabled"/>
-  <Story id="components-forms-switch--disabled-checked"/>
-</Canvas>
+<Canvas of={Stories.Disabled}/>
+<Canvas of={Stories.DisabledChecked}/>
 
 ## States
 
 You can use the following props to change the state of the component by using the `state` props.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-switch--with-text"/>
-</Canvas>
-
-<Canvas sourceState="shown">
-  <Story id="components-forms-switch--success"/>
-</Canvas>
-
-<Canvas sourceState="shown">
-  <Story id="components-forms-switch--error"/>
-</Canvas>
+<Canvas of={Stories.WithText}/>
+<Canvas of={Stories.Success}/>
+<Canvas of={Stories.Error}/>
 
 ## Width
 
 By default, the Switch will automatically take the minimum needed width. But you can force it to take the full width of
 its container by using the `fullWidth` prop.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-switch--full-width"/>
-</Canvas>
-
-<Canvas sourceState="shown">
-  <Story id="components-forms-switch--with-label-right-and-full-width"/>
-</Canvas>
+<Canvas of={Stories.FullWidth}/>
+<Canvas of={Stories.WithLabelRightAndFullWidth}/>
 
 ## Controlled / Non Controlled
 
@@ -95,23 +70,19 @@ In order to control the value of the switch, you can use the `checked` or `defau
 
 > If you use the `defaultChecked` prop, the switch will be uncontrolled.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-switch--controlled"/>
-</Canvas>
+<Canvas of={Stories.Controlled}/>
 
 ## Usage with react-hook-form
 
 You can use this input with [react-hook-form](https://react-hook-form.com/docs)
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-switch--react-hook-form"/>
-</Canvas>
+<Canvas of={Stories.ReactHookForm}/>
 
 ## Props
 
 The props of this component are as close as possible to the native checkbox component. You can see the list of props below.
 
-<ArgsTable of={Switch} />
+<ArgTypes of={Switch} />
 
 ## Design tokens
 
diff --git a/packages/react/src/components/Forms/TextArea/index.mdx b/packages/react/src/components/Forms/TextArea/index.mdx
index 212ad0a..7f3cf04 100644
--- a/packages/react/src/components/Forms/TextArea/index.mdx
+++ b/packages/react/src/components/Forms/TextArea/index.mdx
@@ -8,9 +8,7 @@ import { TextArea } from '.';
 
 Cunningham provides a versatile TextArea component that you can use in your forms.
 
-<Canvas>
-  <Story id="components-forms-textarea--default"/>
-</Canvas>
+<Canvas of={Stories.Default}/>
 
 <Source
   language='ts'
@@ -23,74 +21,52 @@ Cunningham provides a versatile TextArea component that you can use in your form
 
 You can use the following props to change the state of the TextArea component by using the `state` props.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-textarea--default"/>
-</Canvas>
-
-<Canvas sourceState="shown">
-  <Story id="components-forms-textarea--success"/>
-</Canvas>
-
-<Canvas sourceState="shown">
-  <Story id="components-forms-textarea--error"/>
-</Canvas>
+<Canvas of={Stories.Default}/>
+<Canvas of={Stories.Success}/>
+<Canvas of={Stories.Error}/>
 
 ## Disabled
 
 As a regular textarea, you can disable it by using the `disabled` props.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-textarea--disabled-empty"/>
-  <Story id="components-forms-textarea--disabled-filled"/>
-</Canvas>
+<Canvas of={Stories.DisabledEmpty}/>
+<Canvas of={Stories.DisabledFilled}/>
 
 ## Texts
 
 You can define a text that will appear below the input by using the `text` props.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-textarea--with-text"/>
-</Canvas>
+<Canvas of={Stories.WithText}/>
 
 You can also independently add a text on the right side by using the `rightText` props.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-textarea--with-both-texts"/>
-</Canvas>
+<Canvas of={Stories.WithBothTexts}/>
 
 ## Width
 
 By default, the textarea has a default width, like all inputs. But you can force it to take the full width of its container by using the `fullWidth` props.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-textarea--full-width"/>
-</Canvas>
+<Canvas of={Stories.FullWidth}/>
 
 ## Chars Counter
 
 You can display a counter of the number of characters entered in the textarea by using the `charsCounter` props. Please bare
 in mind to also define `charCounterMax`.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-textarea--char-counter"/>
-</Canvas>
+<Canvas of={Stories.CharCounter}/>
 
 ## Controlled / Non Controlled
 
 Like a native textarea, you can use the TextArea component in a controlled or non controlled way. You can see the example below
 using the component in a controlled way.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-textarea--controlled"/>
-</Canvas>
+<Canvas of={Stories.Controlled}/>
 
 ## Ref
 
 You can use the `ref` props to get a reference to the textarea element.
 
-<Canvas sourceState="shown">
-  <Story id="components-forms-textarea--with-ref"/>
-</Canvas>
+<Canvas of={Stories.WithRef}/>
 
 ## Props
 
@@ -121,6 +97,4 @@ Here are the custom design tokens defined by the textarea.
 
 ## Form Example
 
-<Canvas>
-  <Story id="components-forms-textarea--form-example"/>
-</Canvas>
+<Canvas of={Stories.FormExample}/>
diff --git a/packages/react/src/components/Modal/index.mdx b/packages/react/src/components/Modal/index.mdx
index 79acbc3..48cd73a 100644
--- a/packages/react/src/components/Modal/index.mdx
+++ b/packages/react/src/components/Modal/index.mdx
@@ -9,9 +9,7 @@ import { Modal } from './index';
 
 Cunningham provides a versatile Modal component for displaying any kind of information.
 
-<Canvas>
-  <Story of={Stories.ThreeButtons} inline={false}/>
-</Canvas>
+<Canvas of={Stories.ThreeButtons} story={{inline: false}}/>
 
 <Source
   language='ts'
@@ -98,36 +96,25 @@ You can set the size of the modal by passing the `size` prop.
 
 ### Small
 
-
-<Canvas>
-  <Story of={Stories.Small} inline={false}/>
-</Canvas>
+<Canvas of={Stories.Small} story={{inline: false}}/>
 
 ### Medium
 
-<Canvas>
-  <Story of={Stories.Medium} inline={false}/>
-</Canvas>
+<Canvas of={Stories.Medium} story={{inline: false}}/>
 
 ### Large
 
-<Canvas>
-  <Story of={Stories.Large} inline={false}/>
-</Canvas>
+<Canvas of={Stories.Large} story={{inline: false}}/>
 
 ### Full
 
-<Canvas>
-  <Story of={Stories.FullWithContent} inline={false}/>
-</Canvas>
+<Canvas of={Stories.FullWithContent} story={{inline: false}}/>
 
 ## Close button
 
 You can hide the close button by passing the `hideCloseButton` prop.
 
-<Canvas>
-  <Story of={Stories.HideCloseButton} inline={false}/>
-</Canvas>
+<Canvas of={Stories.HideCloseButton} story={{inline: false}}/>
 
 ## Buttons
 
@@ -135,42 +122,32 @@ You can hide the close button by passing the `hideCloseButton` prop.
 
 You can add buttons on the right side of the modal by passing the `rightActions` prop.
 
-<Canvas>
-  <Story of={Stories.PrimaryButton} inline={false}/>
-</Canvas>
+<Canvas of={Stories.PrimaryButton} story={{inline: false}}/>
 
 ### Left buttons
 
 You can add buttons on the left side of the modal by passing the `leftActions` prop.
 
-<Canvas>
-  <Story of={Stories.ThreeButtons} inline={false}/>
-</Canvas>
+<Canvas of={Stories.ThreeButtons} story={{inline: false}}/>
 
 ### Center buttons
 
 You can add buttons on the center of the modal by passing the `actions` prop.
 
-<Canvas>
-  <Story of={Stories.CenterButtons} inline={false}/>
-</Canvas>
+<Canvas of={Stories.CenterButtons} story={{inline: false}}/>
 
 ## Icon
 
 You can add an icon to the modal by passing the `titleIcon` prop.
 
-<Canvas>
-  <Story of={Stories.ExampleApplication} inline={false}/>
-</Canvas>
+<Canvas of={Stories.ExampleApplication} story={{inline: false}}/>
 
 ## Close on click outside
 
 By default, the modal will not be closed when you click outside of it in order to match the default behavior of the `<dialog/>` element.
 You can change this behavior by passing the `closeOnClickOutside` prop.
 
-<Canvas>
-  <Story of={Stories.CloseOnClickOutside} inline={false}/>
-</Canvas>
+<Canvas of={Stories.CloseOnClickOutside} story={{inline: false}}/>
 
 ## Pre Built Modals
 
@@ -208,15 +185,11 @@ const App = () => {
 
 ### Confirmation modal
 
-<Canvas>
-  <Story of={PreBuiltStories.ConfirmationModal} inline={false}/>
-</Canvas>
+<Canvas of={PreBuiltStories.ConfirmationModal} story={{inline: false}}/>
 
 ### Delete confirmation modal
 
-<Canvas>
-  <Story of={PreBuiltStories.DeleteConfirmationModal} inline={false}/>
-</Canvas>
+<Canvas of={PreBuiltStories.DeleteConfirmationModal} story={{inline: false}}/>
 
 ### Message modal
 
@@ -224,21 +197,11 @@ This modal can be used to display a message to the user. It is possible to use m
 
 #### Neutral
 
-<Canvas>
-  <Story of={PreBuiltStories.NeutralModal} inline={false}/>
-</Canvas>
-<Canvas>
-  <Story of={PreBuiltStories.SuccessModal} inline={false}/>
-</Canvas>
-<Canvas>
-  <Story of={PreBuiltStories.InfoModal} inline={false}/>
-</Canvas>
-<Canvas>
-  <Story of={PreBuiltStories.ErrorModal} inline={false}/>
-</Canvas>
-<Canvas>
-  <Story of={PreBuiltStories.WarningModal} inline={false}/>
-</Canvas>
+<Canvas of={PreBuiltStories.NeutralModal} story={{inline: false}}/>
+<Canvas of={PreBuiltStories.SuccessModal} story={{inline: false}}/>
+<Canvas of={PreBuiltStories.InfoModal} story={{inline: false}}/>
+<Canvas of={PreBuiltStories.ErrorModal} story={{inline: false}}/>
+<Canvas of={PreBuiltStories.WarningModal} story={{inline: false}}/>
 
 ## Props
 
diff --git a/packages/react/src/components/Pagination/index.mdx b/packages/react/src/components/Pagination/index.mdx
index 678dd6a..cdb4286 100644
--- a/packages/react/src/components/Pagination/index.mdx
+++ b/packages/react/src/components/Pagination/index.mdx
@@ -11,9 +11,7 @@ for synchronous loading as well as asynchronous loading. You can paginate your a
 fetch it from a server, the component is really versatile.
 
 
-<Canvas sourceState="none">
-  <Story id="components-pagination--basic"/>
-</Canvas>
+<Canvas sourceState="none" of={Stories.Basic}/>
 
 <Source
   language='ts'
@@ -31,9 +29,7 @@ The most basic usage you can make of it is this one, defining a pagination with
 
 ### Basic
 
-<Canvas sourceState="shown">
-  <Story id="components-pagination--basic"/>
-</Canvas>
+<Canvas sourceState="none" of={Stories.Basic}/>
 
 
 ### List of items
@@ -41,17 +37,13 @@ The most basic usage you can make of it is this one, defining a pagination with
 But this won't make you really happy if you want to paginate your list of items, so you can wire things a bit better.
 Let's make a component that paginate a list of random number.
 
-<Canvas sourceState="shown">
-  <Story id="components-pagination--list"/>
-</Canvas>
+<Canvas sourceState="none" of={Stories.List}/>
 
 ### Set page programmatically
 
 You can also set the page programmatically, for example, if you want to use a query parameter to set the page.
 
-<Canvas sourceState="shown">
-  <Story id="components-pagination--force-page"/>
-</Canvas>
+<Canvas sourceState="none" of={Stories.ForcePage}/>
 
 
 ### Hide go to input