From 8cda41772df1cfe3fc553447bff8e46b02e0f780 Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Mon, 22 May 2023 11:39:11 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(react)=20fix=20Storybook=20s?=
 =?UTF-8?q?ource=20blocks?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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             |  5 +++
 packages/react/.storybook/main.ts             |  2 +-
 .../Button/{index.stories.mdx => index.mdx}   |  5 ++-
 .../src/components/Button/index.stories.tsx   | 32 +++++++++----------
 .../DataGrid/{index.stories.mdx => index.mdx} |  5 ++-
 .../Checkbox/{index.stories.mdx => index.mdx} |  4 +--
 .../Field/{index.stories.mdx => index.mdx}    |  5 ++-
 .../Input/{index.stories.mdx => index.mdx}    |  5 ++-
 .../Radio/{index.stories.mdx => index.mdx}    |  3 +-
 .../Select/{index.stories.mdx => index.mdx}   |  5 ++-
 .../{index.stories.mdx => index.mdx}          |  3 +-
 11 files changed, 37 insertions(+), 37 deletions(-)
 create mode 100644 .changeset/fast-bulldogs-cross.md
 rename packages/react/src/components/Button/{index.stories.mdx => index.mdx} (96%)
 rename packages/react/src/components/DataGrid/{index.stories.mdx => index.mdx} (98%)
 rename packages/react/src/components/Forms/Checkbox/{index.stories.mdx => index.mdx} (96%)
 rename packages/react/src/components/Forms/Field/{index.stories.mdx => index.mdx} (88%)
 rename packages/react/src/components/Forms/Input/{index.stories.mdx => index.mdx} (97%)
 rename packages/react/src/components/Forms/Radio/{index.stories.mdx => index.mdx} (97%)
 rename packages/react/src/components/Forms/Select/{index.stories.mdx => index.mdx} (97%)
 rename packages/react/src/components/Pagination/{index.stories.mdx => index.mdx} (96%)

diff --git a/.changeset/fast-bulldogs-cross.md b/.changeset/fast-bulldogs-cross.md
new file mode 100644
index 0000000..9e26032
--- /dev/null
+++ b/.changeset/fast-bulldogs-cross.md
@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": patch
+---
+
+fix Storybook source blocks
diff --git a/packages/react/.storybook/main.ts b/packages/react/.storybook/main.ts
index ed20f27..b16ffcb 100644
--- a/packages/react/.storybook/main.ts
+++ b/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",
diff --git a/packages/react/src/components/Button/index.stories.mdx b/packages/react/src/components/Button/index.mdx
similarity index 96%
rename from packages/react/src/components/Button/index.stories.mdx
rename to packages/react/src/components/Button/index.mdx
index a709ca6..b96f4d8 100644
--- a/packages/react/src/components/Button/index.stories.mdx
+++ b/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
 
diff --git a/packages/react/src/components/Button/index.stories.tsx b/packages/react/src/components/Button/index.stories.tsx
index 3959b36..143cd28 100644
--- a/packages/react/src/components/Button/index.stories.tsx
+++ b/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: (
diff --git a/packages/react/src/components/DataGrid/index.stories.mdx b/packages/react/src/components/DataGrid/index.mdx
similarity index 98%
rename from packages/react/src/components/DataGrid/index.stories.mdx
rename to packages/react/src/components/DataGrid/index.mdx
index 844b531..8601a51 100644
--- a/packages/react/src/components/DataGrid/index.stories.mdx
+++ b/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
 
diff --git a/packages/react/src/components/Forms/Checkbox/index.stories.mdx b/packages/react/src/components/Forms/Checkbox/index.mdx
similarity index 96%
rename from packages/react/src/components/Forms/Checkbox/index.stories.mdx
rename to packages/react/src/components/Forms/Checkbox/index.mdx
index 123aad3..d68adda 100644
--- a/packages/react/src/components/Forms/Checkbox/index.stories.mdx
+++ b/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
 
diff --git a/packages/react/src/components/Forms/Field/index.stories.mdx b/packages/react/src/components/Forms/Field/index.mdx
similarity index 88%
rename from packages/react/src/components/Forms/Field/index.stories.mdx
rename to packages/react/src/components/Forms/Field/index.mdx
index ea669b4..c120d74 100644
--- a/packages/react/src/components/Forms/Field/index.stories.mdx
+++ b/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
 
diff --git a/packages/react/src/components/Forms/Input/index.stories.mdx b/packages/react/src/components/Forms/Input/index.mdx
similarity index 97%
rename from packages/react/src/components/Forms/Input/index.stories.mdx
rename to packages/react/src/components/Forms/Input/index.mdx
index 45e44a7..b94a577 100644
--- a/packages/react/src/components/Forms/Input/index.stories.mdx
+++ b/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
 
diff --git a/packages/react/src/components/Forms/Radio/index.stories.mdx b/packages/react/src/components/Forms/Radio/index.mdx
similarity index 97%
rename from packages/react/src/components/Forms/Radio/index.stories.mdx
rename to packages/react/src/components/Forms/Radio/index.mdx
index 09b3f1c..3d3b783 100644
--- a/packages/react/src/components/Forms/Radio/index.stories.mdx
+++ b/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
 
diff --git a/packages/react/src/components/Forms/Select/index.stories.mdx b/packages/react/src/components/Forms/Select/index.mdx
similarity index 97%
rename from packages/react/src/components/Forms/Select/index.stories.mdx
rename to packages/react/src/components/Forms/Select/index.mdx
index bf15cc5..cdc08eb 100644
--- a/packages/react/src/components/Forms/Select/index.stories.mdx
+++ b/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
 
diff --git a/packages/react/src/components/Pagination/index.stories.mdx b/packages/react/src/components/Pagination/index.mdx
similarity index 96%
rename from packages/react/src/components/Pagination/index.stories.mdx
rename to packages/react/src/components/Pagination/index.mdx
index 581c6ec..809acd8 100644
--- a/packages/react/src/components/Pagination/index.stories.mdx
+++ b/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