♻️(react) migrate ArgsTable to ArgTypes and rework imports

Storybook was emitting warnings errors about the fact that ArgsTable
is deprecated, and also I rewrote imports as those are not the one
used in the doc anymore, this will prevent breaking changes in the
upcoming upgrades.

.changeset/stale-hotels-jump.md

@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": patch
+---
+
+migrate ArgsTable to ArgTypes and rework imports

packages/react/src/components/Button/index.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs';
+import { Canvas, Meta, Story, Source, ArgTypes } from '@storybook/blocks';
 import { Button } from "./index";
 import * as Stories from './index.stories';
 
@@ -56,7 +56,7 @@ The button can be disabled. The disabled button will render the same no matter w
 
 You can use all the props of the native html `<button>` element props plus the following.
 
-<ArgsTable of={Button} />
+<ArgTypes of={Button} />
 
 
 

packages/react/src/components/DataGrid/index.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs';
+import { Canvas, Meta, Story, Source, ArgTypes } from '@storybook/blocks';
 import { DataGrid } from './index';
 import { SimpleDataGrid } from './SimpleDataGrid';
 import { DataList } from './DataList';
@@ -45,7 +45,7 @@ Here a quick usage example
 
 ### Props
 
-<ArgsTable of={DataList} />
+<ArgTypes of={DataList} />
 
 ## SimpleDataGrid
 
@@ -82,7 +82,7 @@ their states.
 
 ### Props
 
-<ArgsTable of={SimpleDataGrid} />
+<ArgTypes of={SimpleDataGrid} />
 
 ## DataGrid
 
@@ -102,7 +102,7 @@ control over the state of the table, like being able to use `useEffect` to fetch
 
 ### Props
 
-<ArgsTable of={DataGrid} />
+<ArgTypes of={DataGrid} />
 
 ## Columns
 

packages/react/src/components/Forms/Checkbox/index.mdx

@@ -1,5 +1,6 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs';
+import { Canvas, Meta, Story, ArgTypes } from '@storybook/blocks';
 import * as Stories from './index.stories';
+import { Checkbox } from './index';
 
 <Meta of={Stories}/>
 
@@ -84,6 +85,10 @@ You can also define `state`, `text` props on the group component
   <Story id="components-forms-checkbox--group-success"/>
 </Canvas>
 
+### Props
+
+<ArgTypes of={Checkbox} />
+
 ## Design tokens
 
 Here are available custom design tokens.

packages/react/src/components/Forms/Field/index.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs';
+import { Meta, ArgTypes } from '@storybook/blocks';
 import { Field } from "./index";
 import * as Stories from './index.stories';
 
@@ -23,4 +23,4 @@ available design token to do so.
 
 ## Props
 
-<ArgsTable of={Field} exclude={["compact"]} />
+<ArgTypes of={Field} exclude={["compact"]} />

packages/react/src/components/Forms/Input/index.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs';
+import { Canvas, Meta, Story, Source, ArgTypes } from '@storybook/blocks';
 import { Input } from "./index";
 import * as Stories from './index.stories';
 
@@ -110,7 +110,7 @@ You can use the `ref` props to get a reference to the input element. The ref to
 
 You can use all the props of the native html `<input>` element props plus the following.
 
-<ArgsTable of={Input} />
+<ArgTypes of={Input} />
 
 ## Design tokens
 

packages/react/src/components/Forms/Radio/index.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs';
+import { Canvas, Meta, Story, ArgTypes } from '@storybook/blocks';
 import { Radio } from "./index";
 import * as Stories from './index.stories';
 
@@ -84,6 +84,10 @@ You can also define `state`, `text` props on the group component
   <Story id="components-forms-radio--group-success"/>
 </Canvas>
 
+### Props
+
+<ArgTypes of={Radio} />
+
 ## Design tokens
 
 Here are available custom design tokens.

packages/react/src/components/Forms/Select/index.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs';
+import { Canvas, Meta, Story, Source, ArgTypes } from '@storybook/blocks';
 import { Select } from "./index";
 import * as Stories from './mono.stories';
 
@@ -88,7 +88,7 @@ using the component in a controlled way.
 
 The props of this component are as close as possible to the native select component. You can see the list of props below.
 
-<ArgsTable of={Select} />
+<ArgTypes of={Select} />
 
 ## Design tokens
 

packages/react/src/components/Pagination/index.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs';
+import { Canvas, Meta, Story, Source, ArgTypes } from '@storybook/blocks';
 import { Pagination, usePagination } from './index';
 import * as Stories from './index.stories';
 
@@ -61,8 +61,8 @@ You can also set the page programmatically, for example, if you want to use a qu
 
 ### `<Pagination/>` component
 
-<ArgsTable of={Pagination} />
+<ArgTypes of={Pagination} />
 
 ### `usePagination` hook
 
-<ArgsTable of={usePagination} />
+<ArgTypes of={usePagination} />