♻️(react) fix Storybook source blocks

Due to the recent upgrade to Storybook 7, the source blocks of Canvases
were broken, they were only showing args. This was mainly due to the fact
that as of Storybook 7 the meta tags of the MDX files have changed, thus
causing the issue. These are now based on imports. We also needed to rename
index.stories.mdx files to index.mdx because Storybook was throwing errors,
maybe due to a conflicts with index.stories.tsx files and new imports.
Anyway this way of naming MDX files seems to be the recommend one based on
the official documentation.

.changeset/fast-bulldogs-cross.md

@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": patch
+---
+
+fix Storybook source blocks

packages/react/.storybook/main.ts

@@ -2,7 +2,7 @@ import { StorybookConfig } from "@storybook/react-vite";
 import remarkGfm from "remark-gfm";
 
 const config: StorybookConfig = {
-  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",

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

@@ -1,9 +1,8 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs';
 import { Button } from "./index";
+import * as Stories from './index.stories';
 
-<Meta title="Components/Button/Doc" component={Button}/>
-
-export const Template = (args) => <Button {...args} />;
+<Meta of={Stories}/>
 
 # Button
 

packages/react/src/components/Button/index.stories.tsx

@@ -1,39 +1,37 @@
-import { Meta } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 import { Button } from "./index";
 
-export default {
+const meta: Meta<typeof Button> = {
   title: "Components/Button",
   component: Button,
-  argTypes: {
-    disabled: {
-      control: "boolean",
-    },
-  },
-} as Meta<typeof Button>;
+};
 
-export const Primary = {
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Primary: Story = {
   args: {
     children: "Primary",
     color: "primary",
   },
 };
 
-export const Secondary = {
+export const Secondary: Story = {
   args: {
     children: "Secondary",
     color: "secondary",
   },
 };
 
-export const Tertiary = {
+export const Tertiary: Story = {
   args: {
     children: "Tertiary",
     color: "tertiary",
   },
 };
 
-export const Disabled = {
+export const Disabled: Story = {
   args: {
     children: "Disabled",
     color: "primary",
@@ -41,14 +39,14 @@ export const Disabled = {
   },
 };
 
-export const Danger = {
+export const Danger: Story = {
   args: {
     children: "Danger",
     color: "danger",
   },
 };
 
-export const Small = {
+export const Small: Story = {
   args: {
     children: "Primary",
     color: "primary",
@@ -56,7 +54,7 @@ export const Small = {
   },
 };
 
-export const IconLeft = {
+export const IconLeft: Story = {
   args: {
     children: "Icon",
     icon: (
@@ -79,7 +77,7 @@ export const IconLeft = {
   },
 };
 
-export const IconRight = {
+export const IconRight: Story = {
   args: {
     children: "Icon",
     iconPosition: "right",
@@ -103,7 +101,7 @@ export const IconRight = {
   },
 };
 
-export const IconOnly = {
+export const IconOnly: Story = {
   args: {
     "aria-label": "Button with only an icon",
     icon: (

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

@@ -2,10 +2,9 @@ import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs';
 import { DataGrid } from './index';
 import { SimpleDataGrid } from './SimpleDataGrid';
 import { DataList } from './DataList';
+import * as Stories from './index.stories';
 
-<Meta title="Components/DataGrid/Doc" component={DataGrid}/>
-
-export const Template = (args) => <DataGrid {...args} />;
+<Meta of={Stories}/>
 
 # DataGrid
 

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

@@ -1,7 +1,7 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs';
-import { Checkbox } from "./index";
+import * as Stories from './index.stories';
 
-<Meta title="Components/Forms/Checkbox/Doc" component={Checkbox}/>
+<Meta of={Stories}/>
 
 # Checkbox
 

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

@@ -1,9 +1,8 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs';
 import { Field } from "./index";
+import * as Stories from './index.stories';
 
-<Meta title="Components/Forms/Field/Doc" component={Field}/>
-
-export const Template = (args) => <Field {...args} />;
+<Meta of={Stories}/>
 
 # Field
 

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

@@ -1,9 +1,8 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs';
 import { Input } from "./index";
+import * as Stories from './index.stories';
 
-<Meta title="Components/Forms/Input/Doc" component={Input}/>
-
-export const Template = (args) => <Input {...args} />;
+<Meta of={Stories}/>
 
 # Input
 

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

@@ -1,7 +1,8 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs';
 import { Radio } from "./index";
+import * as Stories from './index.stories';
 
-<Meta title="Components/Forms/Radio/Doc" component={Radio}/>
+<Meta of={Stories}/>
 
 # Radio
 

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

@@ -1,9 +1,8 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs';
 import { Select } from "./index";
+import * as Stories from './mono.stories';
 
-<Meta title="Components/Forms/Select/Doc" component={Select}/>
-
-export const Template = (args) => <Input {...args} />;
+<Meta of={Stories} name="Docs"/>
 
 # Select
 

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

@@ -1,7 +1,8 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs';
 import { Pagination, usePagination } from './index';
+import * as Stories from './index.stories';
 
-<Meta title="Components/Pagination/Doc" component={Pagination}/>
+<Meta of={Stories}/>
 
 # Pagination