✨(demo) use modal to show create form

Now that we have a modal component, let's use it to display our creation
 form.

apps/demo/src/App.tsx

@@ -1,4 +1,9 @@
-import { Button, CunninghamProvider, Select } from "@openfun/cunningham-react";
+import {
+  Button,
+  CunninghamProvider,
+  Select,
+  useModal,
+} from "@openfun/cunningham-react";
 import React, { useEffect, useMemo, useState } from "react";
 import { Create } from "./Create";
 import { Home } from "./Home";
@@ -29,14 +34,7 @@ const THEMES: Record<Theme, Record<Variant, string | undefined>> = {
   },
 };
 
-export enum Page {
+export type PageProps = ReturnType<typeof useModal>;
-  HOME,
-  CREATE,
-}
-
-export interface PageProps {
-  changePage: (page: Page) => void;
-}
 
 const preferredScheme = window.matchMedia("(prefers-color-scheme: dark)")
   .matches
@@ -54,7 +52,7 @@ export const App = () => {
       preferredScheme.variant,
   );
   const activeTheme = useMemo(() => THEMES[theme][variant], [theme, variant]);
-  const [page, setPage] = useState<Page>(Page.HOME);
+  const modal = useModal();
   const handleThemeChange = (event: MediaQueryListEvent) => {
     const nextVariant = event.matches ? Variant.DARK : Variant.LIGHT;
     if (THEMES[theme][nextVariant] !== undefined) {
@@ -92,8 +90,8 @@ export const App = () => {
             alt="Background pattern"
           />
         )}
-        {page === Page.HOME && <Home changePage={(p) => setPage(p)} />}
+        <Home modal={modal} />
-        {page === Page.CREATE && <Create changePage={(p) => setPage(p)} />}
+        <Create {...modal} />
       </div>
 
       <div className="theme-switch">

apps/demo/src/Create.tsx

@@ -7,6 +7,8 @@ import {
   DateRangePicker,
   FileUploader,
   Input,
+  Modal,
+  ModalSize,
   Radio,
   RadioGroup,
   Select,
@@ -16,10 +18,10 @@ import {
   VariantType,
 } from "@openfun/cunningham-react";
 import { faker } from "@faker-js/faker";
+import { PageProps } from "./App";
 import { Character, database, randomDates } from "./Character";
-import { Page, PageProps } from "./App";
 
-export const Create = ({ changePage }: PageProps) => {
+export const Create = (props: PageProps) => {
   const { toast } = useToastProvider();
 
   const submit: React.FormEventHandler<HTMLFormElement> = (e) => {
@@ -40,11 +42,12 @@ export const Create = ({ changePage }: PageProps) => {
     };
     database.unshift(character);
 
-    changePage(Page.HOME);
+    props.close();
     toast("Character created successfully", VariantType.SUCCESS);
   };
 
   return (
+    <Modal {...props} size={ModalSize.LARGE} closeOnClickOutside>
       <form className="page__create clr-greyscale-900" onSubmit={submit}>
         <h1>Add a character</h1>
         <div className="card">
@@ -137,5 +140,6 @@ export const Create = ({ changePage }: PageProps) => {
           </Button>
         </div>
       </form>
+    </Modal>
   );
 };

apps/demo/src/Home.tsx

@@ -3,14 +3,15 @@ import {
   Button,
   DataGrid,
   SortModel,
-  VariantType,
   usePagination,
   useToastProvider,
+  VariantType,
 } from "@openfun/cunningham-react";
-import { Page, PageProps } from "./App";
+
+import { PageProps } from "./App";
 import { database } from "./Character";
 
-export const Home = ({ changePage }: PageProps) => {
+export const Home = ({ modal }: { modal: PageProps }) => {
   const { toast } = useToastProvider();
   const [rowSelection, setRowSelection] = useState({});
   const [isLoading, setIsLoading] = useState(true);
@@ -21,6 +22,7 @@ export const Home = ({ changePage }: PageProps) => {
       sort: "desc",
     },
   ]);
+
   const [rows, setRows] = useState<typeof database>([]);
   const [refresh, setRefresh] = useState(1);
 
@@ -49,7 +51,7 @@ export const Home = ({ changePage }: PageProps) => {
       ),
     );
     setIsLoading(false);
-  }, [pagination.page, sortModel, refresh]);
+  }, [pagination.page, sortModel, modal.isOpen, refresh]);
 
   return (
     <div className="page__home">
@@ -70,7 +72,7 @@ export const Home = ({ changePage }: PageProps) => {
         <Button
           color="primary"
           icon={<span className="material-icons">movie</span>}
-          onClick={() => changePage(Page.CREATE)}
+          onClick={modal.open}
         >
           Add character
         </Button>

apps/demo/src/index.scss

@@ -19,7 +19,6 @@ p {
 // App
 html {
   min-height: 100vh;
-  padding-bottom: 5rem;
   background: linear-gradient(153deg, var(--c--theme--colors--greyscale-100) 0%, var(--c--theme--colors--greyscale-000) 100%);
 }
 
@@ -95,6 +94,10 @@ html[data-theme="blueney"] {
 
 // Create
 .page__create {
+  max-width: 960px;
+  margin: 0 auto;
+  padding-bottom: 5rem;
+
   h1 {
     text-align: center;
     margin: 4rem 0;
@@ -104,6 +107,7 @@ html[data-theme="blueney"] {
     display: flex;
     flex-direction: column;
     gap: 1.5rem;
+    text-align: left;
 
     h3, h4 {
       margin: 0;