improve conf

src/components/Item/Item.stories.tsx

@@ -67,4 +67,4 @@ export const Expired: Story = {
   },
 };
 
-// TODO: Add a story with a long title
+// TODO: Add a story with a long title

src/components/Toast/Toast.tsx

@@ -9,8 +9,6 @@ export const Toast = () => (
     newestOnTop={false}
     closeOnClick
     rtl={false}
-    pauseOnFocusLoss
-    draggable
     pauseOnHover={false}
     theme="dark"
   />

src/components/Todos.tsx

@@ -3,7 +3,6 @@ import { DueDateTimeInput } from "@components/DueDateTimeInput/DueDateTimeInput"
 import { TitleInput } from "@components/TitleInput/TitleInput";
 import { List } from "@components/List/List";
 import { PrioritySelectInput } from "@components/PrioritySelectInput/PrioritySelectInput";
-import { Toast } from "@components/Toast/Toast";
 import { useCreateTodo } from "@services/mutations";
 import { FormProvider, SubmitHandler, useForm } from "react-hook-form";
 import { toast } from "react-toastify";
@@ -39,7 +38,6 @@ export const Todos = () => {
       </FormProvider>
       <div className="divider" />
       <List />
-      <Toast />
     </>
   );
 };

src/pages/Slideshow.tsx

@@ -20,6 +20,10 @@ const theme: DeckProps["theme"] = {
     tertiary: "#0d1026", // background
     quaternary: "#F3E9D2",
   },
+  fonts: {
+    header: "Courier New",
+    text: "Arial",
+  },
 };
 
 export const Slideshow = () => (

src/pages/TodoApp.tsx

@@ -1,6 +1,7 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { Todos } from "@/components/Todos";
+import { Toast } from "@/components/Toast/Toast";
 
 const queryClient = new QueryClient();
 export const TodosApp = () => (
@@ -9,6 +10,7 @@ export const TodosApp = () => (
     <QueryClientProvider client={queryClient}>
       <ReactQueryDevtools initialIsOpen={false} />
       <Todos />
+      <Toast />
     </QueryClientProvider>
   </div>
 );

src/slides/ApiPlatformAdmin.tsx

@@ -1,7 +1,6 @@
 import { NavLink } from "react-router-dom";
 import { Slide, Notes, Heading, SlideLayout } from "spectacle";
 import reactAdmin from "@/assets/react-admin.png";
-import why from "@/assets/why.jpg";
 import b2bInterface from "@/assets/b2b-interface.png";
 
 export const ApiPlatformAdmin = () => (
@@ -56,30 +55,5 @@ export const ApiPlatformAdmin = () => (
         React-admin ? Qui utilise React-admin ?
       </Notes>
     </Slide>
-    <SlideLayout.BigFact
-      backgroundImage={`url(${why})`}
-      backgroundOpacity={0.4}
-      factInformation={
-        <>
-          Photo de{" "}
-          <a href="https://unsplash.com/fr/@emilymorter?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">
-            Emily Morter
-          </a>{" "}
-          sur{" "}
-          <a href="https://unsplash.com/fr/photos/point-dinterrogation-signalisation-au-neon-8xAA0f9yQnE?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">
-            Unsplash
-          </a>
-        </>
-      }
-      factInformationProps={{
-        fontSize: "1.5rem",
-        theme: "dark",
-      }}
-    >
-      Why
-      <Notes>
-        <p>Pourquoi je vous parles de ces outils ? Un peu de mise en context</p>
-      </Notes>
-    </SlideLayout.BigFact>
   </>
 );

src/slides/Component.tsx

@@ -48,14 +48,20 @@ export const Component = () => (
     <SlideLayout.Section>
       <Heading>C'est quoi un composant ?</Heading>
     </SlideLayout.Section>
+    <SlideLayout.BigFact
+      backgroundColor="red"
+      factInformation="vous allez voir du JavaScript"
+    >
+      <Heading>Warning</Heading>
+    </SlideLayout.BigFact>
     <Slide>
       <Box className="overflow-auto">
         <CodePane language="tsx">
           {`
             import { CSSProperties } from "react";
             import { useCountdown } from "./useCountdown";
 
-            const Countdown = ({ targetDate }: { targetDate: Date }) => {
+            export const Countdown = ({ targetDate }: { targetDate: Date }) => {
               const [days, hours, minutes, seconds] = useCountdown(targetDate);
 
               return (
@@ -92,10 +98,10 @@ export const Component = () => (
       </Box>
       <Notes>
         Un composant est une unité de code JavaScript qui représente une partie
-        de l’interface utilisateur (UI) d’une application. Ils se veulent
-        réutilisables et modulaires. Un composant nous permet de modifier notre
+        de l’interface utilisateur (UI) d’une application. Un composant se veut
+        réutilisable et modulaire. Un composant nous permet de modifier notre
         code à un seul endroit et de voir ces modifications propagées partout où
-        ce composant est utilisé.
+        ce composant est utilisé. Ici nous avons un composant de Compte à rebour
       </Notes>
     </Slide>
     <Slide>

src/slides/HackDay.tsx

@@ -31,12 +31,8 @@ export const HackDay = () => (
         }}
       />
       <Notes>
-        À Marmelab, nous avons des jours où nous pouvons explorer une
-        technologie, développer un projet, etc... c'est ce que nous appelons de
-        Hack Days. Venant de l'univers PHP/Symfony, et fraîchement débarqué dans
-        l'univers React et étant contributeur React-admin, j'ai voulu m'amuser
-        un peu avec Api-platform et l'interface B2B. Cela me paraissait être un
-        bon parallèle.
+        Faisant partie de la Core Team React-admin, j'ai voulu explorer le
+        projet api-platform/admin pour en voir ces fonctionnalités
       </Notes>
     </Slide>
     <Slide backgroundImage={`url(${errorBlocked})`}>

src/slides/Hero.tsx

@@ -1,17 +1,25 @@
-import { SlideLayout } from "spectacle";
+import { Box, Heading, ListItem, SlideLayout, UnorderedList } from "spectacle";
 import me from "@/assets/me.jpg";
 import background from "@/assets/background-0.jpg";
 
 export const Hero = () => (
-  <SlideLayout.VerticalImage
+  <SlideLayout.TwoColumn
     backgroundImage={`url(${background})`}
-    src={me}
-    alt="Adrien Guernier"
-    title="Adrien Guernier"
-    listItems={[
-      "Développeur fullstack chez Marmelab",
-      "Membre de la Core Team de React-Admin",
-      "PHP anthousiast",
-    ]}
+    left={
+      <>
+        <Heading>Adrien Guernier</Heading>
+        <img src={me} alt="Adrien Guernier" />
+      </>
+    }
+    right={
+      <Box marginTop={100}>
+        <UnorderedList>
+          <ListItem>Fullstack Developer @ Marmelab</ListItem>
+          <ListItem>Membre de la Core Team React-Admin</ListItem>
+          <ListItem>PHP anthousiast</ListItem>
+          <ListItem>Musicien à ses heures perdues 🤟</ListItem>
+        </UnorderedList>
+      </Box>
+    }
   />
 );

src/slides/HowTo.tsx

@@ -15,6 +15,9 @@ import isolatedItem from "@/assets/isolated-item.png";
 import isolatedPriorityBadge from "@/assets/isolated-priority-badge.png";
 import isolatedDueDateInput from "@/assets/isolated-due-date-input.png";
 import interactionsTest from "@/assets/interactions-test.png";
+import storybookStats from "@/assets/storybook-stats.png";
+import storybookUsage from "@/assets/storybook-usage.png";
+import testCi from "@/assets/test-ci.png";
 
 export const HowTo = () => (
   <>
@@ -60,10 +63,15 @@ export const HowTo = () => (
       <Heading textAlign="left" margin="0 0">
         Storybook
       </Heading>
-      <iframe height="100%" src="https://storybook.js.org/showcase/projects" />
+      <div className="flex ">
+        <Image src={storybookStats} />
+        <Image src={storybookUsage} />
+      </div>
       <Notes>
         L'outil Storybook va nous fournir un environnement de développement
-        idéal pour développer nos composants de manière isolée.
+        idéal pour développer nos composants de manière isolée. Comme vous le
+        voyez, Storybook est utilisé dans de nombreux projet et est activement
+        maintenu
       </Notes>
     </Slide>
     <SlideLayout.BigFact>Avantages</SlideLayout.BigFact>
@@ -138,7 +146,16 @@ export const HowTo = () => (
       <Heading textAlign="left" margin="0 0">
         Tests intégrés
       </Heading>
-      <Notes>Tester les composants dans une CI</Notes>
+      <Notes>
+        Nous pouvons tester nos composants directement dans les stories
+      </Notes>
+    </Slide>
+    <Slide>
+      <Image src={testCi} />
+      <Heading textAlign="left" margin="0 0">
+        CI
+      </Heading>
+      <Notes>Et ces tests peuvent être directement executé dans la CI</Notes>
     </Slide>
   </>
 );

src/slides/Problematic.tsx

@@ -22,6 +22,10 @@ import incrementalStep4 from "@/assets/incremental-step-4.png";
 import incrementalStep5 from "@/assets/incremental-step-5.png";
 import incrementalStep6 from "@/assets/incremental-step-6.png";
 import incrementalStep7 from "@/assets/incremental-step-7.png";
+import eCommerceCustomerHistory from "@/assets/e-commerce-customer-history.png";
+import eCommerceCustomerList from "@/assets/e-commerce-customer-list.png";
+import eCommerceCustomer1 from "@/assets/e-commerce-customer-1.png";
+import eCommerceCustomer2 from "@/assets/e-commerce-customer-2.png";
 import electricity from "@/assets/electricity.jpg";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { MswWrapper } from "@/msw/MswWrapper";
@@ -46,8 +50,7 @@ const MyTodo = () => {
 export const Problematic = () => (
   <>
     <SlideLayout.Section>
-      <Heading>Problématique </Heading>
-      <Text>YATA! Yet Another Todolist App</Text>
+      <Heading>YATA! Yet Another Todolist App</Heading>
     </SlideLayout.Section>
 
     <Slide backgroundImage={`url(${todoListPostIt})`}>
@@ -71,10 +74,9 @@ export const Problematic = () => (
     <Slide>
       <Heading>Un utilisateur peut</Heading>
       <UnorderedList>
-        <ListItem>Voir la liste des tâches à réaliser</ListItem>
         <ListItem>Ajouter une tâche</ListItem>
+        <ListItem>Voir la liste des tâches à réaliser</ListItem>
         <ListItem>Marquer une tâche comme réalisée</ListItem>
-        <ListItem>Difficulté à partager des composants</ListItem>
         <ListItem>Supprimer une tâche</ListItem>
       </UnorderedList>
       <Notes>
@@ -234,6 +236,53 @@ export const Problematic = () => (
         me convient pas, je dois modifier mon composant
       </Notes>
     </Slide>
+    <Slide backgroundImage="url(https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExbDBpdzRoNHl4bTRwMnpoeGV3N3lia3I1OW1naDl5emo4cTQzNWN3ZyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/3o7btPCcdNniyf0ArS/giphy.gif)">
+      <Notes>
+        Ici nous sommes dans une application assez simple, mais imaginez une
+        grosse application comme un e-commerce
+      </Notes>
+    </Slide>
+    <Slide>
+      <div className="flex justify-center items-center align-middle h-lvh">
+        <Stepper
+          alwaysVisible
+          values={[
+            eCommerceCustomerHistory,
+            eCommerceCustomerList,
+            eCommerceCustomer1,
+            eCommerceCustomer2,
+          ]}
+        >
+          {(value) => <Image src={value} />}
+        </Stepper>
+      </div>
+      <Notes>
+        Ici je veux développer le composant History qui apparait dans le détail
+        d'un utilisateur. Pour le développer, je dois naviguer dans
+        l'application, trouver un utilisateur avec un historique, et le tester.
+      </Notes>
+    </Slide>
+    <Slide backgroundImage={`url(${electricity})`}>
+      <FlexBox height="100%" justifyContent="center" alignItems="end">
+        <Text fontSize={20}>
+          Photo de{" "}
+          <a href="https://unsplash.com/fr/@framesforyourheart?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">
+            Frames For Your Heart
+          </a>{" "}
+          sur{" "}
+          <a href="https://unsplash.com/fr/photos/fils-enduits-jaunes-bleus-et-noirs-iOLHAIaxpDA?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">
+            Unsplash
+          </a>
+        </Text>
+      </FlexBox>
+      <Notes>
+        Pour développer un composant, je dois naviguer dans toute l'application
+        pour trouver ce dernier et le tester, ainsi que toute ces variantes. Et
+        plus le nombre de composants augmente, plus il faudra naviguer dans
+        l'application pour les trouver. Le problème c'est que les composants
+        sont dépendants de l'application.
+      </Notes>
+    </Slide>
     <Slide>
       <Heading>Inconvénients</Heading>
       <UnorderedList>
@@ -265,33 +314,5 @@ export const Problematic = () => (
         </ul>
       </Notes>
     </Slide>
-    <Slide backgroundImage="url(https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExbDBpdzRoNHl4bTRwMnpoeGV3N3lia3I1OW1naDl5emo4cTQzNWN3ZyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/3o7btPCcdNniyf0ArS/giphy.gif)">
-      <Notes>
-        Ici nous sommes dans une application assez simple, mais imaginez une
-        grosse application ou une bibliothèque de composants ? La maintenabilité
-        sera sans doute hardue
-      </Notes>
-    </Slide>
-    <Slide backgroundImage={`url(${electricity})`}>
-      <FlexBox height="100%" justifyContent="center" alignItems="end">
-        <Text fontSize={20}>
-          Photo de{" "}
-          <a href="https://unsplash.com/fr/@framesforyourheart?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">
-            Frames For Your Heart
-          </a>{" "}
-          sur{" "}
-          <a href="https://unsplash.com/fr/photos/fils-enduits-jaunes-bleus-et-noirs-iOLHAIaxpDA?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">
-            Unsplash
-          </a>
-        </Text>
-      </FlexBox>
-      <Notes>
-        À mesure que les front-ends se développent, le nombre de composants
-        gonfle. Les projets matures peuvent contenir des centaines de composants
-        qui produisent des milliers de variations. Pour développer un composant,
-        je dois naviguer dans toute l'application pour trouver ce dernier et le
-        tester, ainsi que toute ces variantes.
-      </Notes>
-    </Slide>
   </>
 );

src/slides/Summary.tsx

@@ -7,7 +7,7 @@ export const Summary = () => (
     title="Sommaire"
     items={[
       "Définition d'un composant ?",
-      "Problèmatique",
+      "Yet Another Todolist App",
       "Isolation ses composants",
       "Demo",
       "Api-platform/admin",

src/slides/Thanks.tsx

@@ -1,19 +1,17 @@
 import { Box, FlexBox, Heading, Slide, Text } from "spectacle";
 import background from "@/assets/background-0.jpg";
 import github from "@/assets/github-mark-white.png";
+import qrCode from "@/assets/qr-code.png";
 
 export const Thanks = () => (
   <Slide backgroundImage={`url(${background})`}>
     <FlexBox>
       <Box>
         <Heading>Thank you! 🖤</Heading>
         <Text textAlign="center">Des questions ?</Text>
-        <div className="flex flex-col items-center gap-2">
+        <div className="flex flex-col items-center gap-5">
           <img src={github} alt="github" width="40" height="40" />
-          <span className="text-xl">github.com/adguernier</span>
-          <span className="text-xl">github.com/marmelab/stories-of-todo</span>
-          <span className="text-xl">github.com/marmelab/react-admin</span>
-          <span className="text-xl">github.com/api-platform/admin</span>
+          <img width="20%" src={qrCode} />
         </div>
       </Box>
     </FlexBox>

src/slides/Title.tsx

@@ -8,10 +8,11 @@ export const Title = () => (
     <div className="divider" />
     <Text fontSize={16}>Adrien Guernier - Marmelab</Text>
     <Notes>
-      Dans cette conférence, nous allons voir développer une application
-      frontend, en isolant les composants. Quelle problèmatique cela résoud,
-      comment cela va nous aider à développer une application plus robuste et
-      comment Storybook peut nous y aider.
+      Dans cette conférence, nous allons voir comment développer une application
+      frontend, en isolant les composants. Quelle problèmatique cela résoud
+      d'isoler ses composants, comment faire pour développer une application
+      plus robuste et comment Storybook peut nous y aider. Est-ce qu'il y'a des
+      développeur front-end dans la salle ? Des développeurs React ?
     </Notes>
   </SlideLayout.Center>
 );