chore: add some slide

README.md

@@ -1,3 +1,5 @@
+<a href="https://github.com/storybooks/storybook" target="_blank"><img src="https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg"></a>
+
 # Stories of Todo
 
 Using a Todo List application, this project demonstrates how to use [Storybook](https://storybook.js.org/) to develop components in isolation, document them, and test them.

package.json

@@ -23,7 +23,8 @@
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.52.1",
     "react-router-dom": "^6.26.1",
-    "react-toastify": "^10.0.5"
+    "react-toastify": "^10.0.5",
+    "spectacle": "^10.1.8"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.6.1",

src/pages/Slideshow.tsx

@@ -1 +1,37 @@
-export const Slideshow = () => <div>WIP</div>;
+import {
+  ApiPlatformAdmin,
+  B2bApp,
+  HackDay,
+  Hero,
+  ReactAdmin,
+  Conclusion,
+  Title,
+  Why,
+  What,
+  Yata,
+} from "@/slides";
+import { Deck, DeckProps, DefaultTemplate } from "spectacle";
+
+const theme: DeckProps["theme"] = {
+  colors: {
+    primary: "#F3E9D2", // text body
+    secondary: "#F3E9D2", // heading
+    tertiary: "#0d1026", // background
+    quaternary: "#F3E9D2",
+  },
+};
+
+export const Slideshow = () => (
+  <Deck theme={theme} template={<DefaultTemplate />}>
+    <Title />
+    <Hero />
+    <B2bApp />
+    <ApiPlatformAdmin />
+    <ReactAdmin />
+    <Why />
+    <HackDay />
+    <What />
+    <Yata />
+    <Conclusion />
+  </Deck>
+);

src/pages/TodoApp.tsx

@@ -1,6 +1,6 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
-import { Todos } from "../components/Todos";
+import { Todos } from "@/components/Todos";
 
 const queryClient = new QueryClient();
 export const TodosApp = () => (

src/slides/ApiPlatformAdmin.tsx

@@ -0,0 +1,19 @@
+import { Slide, Notes } from "spectacle";
+import adminDemo from "@/assets/admin-demo.gif";
+
+export const ApiPlatformAdmin = () => (
+  <Slide
+    backgroundImage={`url(${adminDemo})`}
+    backgroundSize="contain"
+    backgroundColor="#fff"
+  >
+    <Notes>
+      API Platform Admin est un outil permettant de créer automatiquement une
+      interface d'administration et complète pour toute API prenant en charge le
+      vocabulaire Hydra Core, exposant une documentation OpenAPI ou d'autres
+      formats de spécification d'API pris en charge par
+      @api-platform/api-doc-parser. Cette application est développée sur la base
+      de React-admin.
+    </Notes>
+  </Slide>
+);

src/slides/B2bApp.tsx

@@ -0,0 +1,17 @@
+import { Notes, Slide } from "spectacle";
+import b2bInterface from "@/assets/b2b-interface.png";
+
+export const B2bApp = () => (
+  <Slide
+    padding="0 0 0"
+    backgroundImage={`url(${b2bInterface})`}
+    backgroundSize="contain"
+    backgroundColor="#0D262B"
+  >
+    <Notes>
+      Qui a déjà utilisé la partie admin d'Api-platform ? <br />
+      Dans sa distribution complète, Api-platform fournit une interface
+      d'administration B2B, auto-générée grâce à la découverte de l'API.
+    </Notes>
+  </Slide>
+);

src/slides/Conclusion.tsx

@@ -0,0 +1,18 @@
+import { Appear, Slide, Text } from "spectacle";
+
+export const Conclusion = () => (
+  <>
+    <Slide>
+      <Text>This is a slide fragment.</Text>
+    </Slide>
+    <Slide>
+      <Text>This is also a slide fragment.</Text>
+      <Appear>
+        <Text>This item shows up!</Text>
+      </Appear>
+      <Appear>
+        <Text>This item also shows up!</Text>
+      </Appear>
+    </Slide>
+  </>
+);

src/slides/HackDay.tsx

@@ -0,0 +1,127 @@
+import { Appear, Box, FlexBox, Image, Notes, Slide, Text } from "spectacle";
+import errorBlocked from "@/assets/error-blocked.jpg";
+import reactAdminContribs from "@/assets/react-admin-contribs.png";
+import apiPlatformAdminContribs from "@/assets/api-platform-admin-contribs.png";
+import uxThinking from "@/assets/ux-thinking.jpg";
+import testCi from "@/assets/test-ci.png";
+import basicStory from "@/assets/basic-story.png";
+import dockerCompose from "@/assets/docker-compose.png";
+import pr541 from "@/assets/pr-541.png";
+
+export const HackDay = () => (
+  <>
+    <Slide
+      transition={{
+        from: {
+          transform: "scale(0.5) rotate(45deg)",
+          opacity: 0,
+        },
+        enter: {
+          transform: "scale(1) rotate(0)",
+          opacity: 1,
+        },
+        leave: {
+          transform: "scale(0.2) rotate(315deg)",
+          opacity: 0,
+        },
+      }}
+      backgroundColor="tertiary"
+      backgroundOpacity={0.5}
+    >
+      <Image
+        src="https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExZG1mbG9pZHcyOTEzN2xkcWZjcngzdDZienhueHpkNWE4eWFkenl6dCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/ieBWQkIVEELhbizGAp/giphy.gif"
+        alt="Hackerman"
+        imgContainerProps={{
+          width: "100%",
+        }}
+      />
+      <Notes>
+        À Marmelab, nous avons des Hack Days: nous ne sommes pas des Hackers,
+        mais ce sont des jours où nous pouvons explorer une technologie,
+        développer des projets, etc... Venant de l'univers PHP/Symfony, et
+        fraîchement débarqué dans l'univers React, j'ai voulu m'amuser un peu
+        avec Api-platform et l'interface B2B. C'était l'occasion pour moi de
+        garder un pied dans PHP et de montrer à mes collègues que "PHP c'est
+        bien quand même !" 😄
+      </Notes>
+    </Slide>
+    <Slide backgroundImage={`url(${errorBlocked})`}>
+      <FlexBox alignContent="" justifyContent="end">
+        <Text fontSize={16} backgroundColor="#000">
+          Photo de{" "}
+          <a href="https://unsplash.com/fr/@davfts?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">
+            David Pupăză
+          </a>{" "}
+          sur{" "}
+          <a href="https://unsplash.com/fr/photos/texte-heNwUmEtZzo?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">
+            Unsplash
+          </a>
+        </Text>
+      </FlexBox>
+      <Notes>
+        En développant mon POC, j'ai été confronté à plusieurs problèmes assez
+        bloquant, et j'ai remarqué que l'app B2B souffrait de quelques retards
+        par rapport à React-admin. La démo de mon POC devant mes collègues n'a
+        pas eut l'effet WAHOU que j'espérait.
+      </Notes>
+    </Slide>
+    <Slide>
+      <FlexBox flexDirection="row" alignItems="start" flex={1}>
+        <Box width="100%">
+          <Image src={reactAdminContribs} />
+        </Box>
+        <Box width="100%">
+          <Image src={apiPlatformAdminContribs} />
+        </Box>
+      </FlexBox>
+      <Notes>
+        Il faut dire que depuis la première intégration de React-admin à
+        Api-platform, les outils ont évolué à différents rythmes.
+      </Notes>
+    </Slide>
+    <Slide backgroundImage="url(https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExZGF3OXE5cmM5YnAxNHJyaXZoNnRidWxhcHY4YTZiM3N1Z3cyODJzcSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/lVBtp4SRW6rvDHf1b6/giphy.gif)">
+      <Notes>
+        On s'est dit que ça serait profitable pour tout le monde de corriger et
+        de faire profiter api-platform/admin des nouvelles features de
+        React-admin. Mais pour cela il nous fallait un environnement de dev qui
+        convienne à notre manière de travailler sur React-admin.
+      </Notes>
+    </Slide>
+    <Slide>
+      <Image src={uxThinking} />
+      <Notes>
+        Nous voulions un env dev avec plusieurs scénarios (des stories),
+        testable facilement, mockable, et plugable à Api-platform pour tester
+        son intégration avec le framework PHP.
+      </Notes>
+    </Slide>
+    <Slide>
+      <FlexBox>
+        <Appear>
+          <Image src={dockerCompose} />
+        </Appear>
+        <Appear>
+          <Image src={basicStory} />
+        </Appear>
+        <Appear>
+          <Image src={testCi} />
+        </Appear>
+      </FlexBox>
+      <Notes>
+        À coup de Docker, de Storybook et de CI, nous avons réussi à mettre en
+        place environnements de dev solide et facilement maintenable pour des
+        développeurs React (et React-admin)
+      </Notes>
+    </Slide>
+    <Slide backgroundImage={`url(${pr541})`} backgroundSize="contain">
+      <Notes>
+        Je ne vais pas vous expliquer en détail comment nous avons développé cet
+        environnement. Vous trouverez des PR assez détaillées sur le sujet,
+        notamment celle à l'écran.
+        <a href="https://github.com/api-platform/admin/pull/541">
+          chore: make the development process easier with Storybook #541
+        </a>
+      </Notes>
+    </Slide>
+  </>
+);

src/slides/Hero.tsx

@@ -0,0 +1,14 @@
+import { SlideLayout } from "spectacle";
+import me from "@/assets/me.jpg";
+
+export const Hero = () => (
+  <SlideLayout.VerticalImage
+    src={me}
+    alt="Adrien Guernier"
+    title="Adrien Guernier"
+    listItems={[
+      "Développeur fullstack chez Marmelab",
+      "Membre de la Core Team de React-Admin",
+    ]}
+  ></SlideLayout.VerticalImage>
+);

src/slides/ReactAdmin.tsx

@@ -0,0 +1,14 @@
+import { Notes, Slide } from "spectacle";
+import reactAdmin from "@/assets/react-admin.png";
+
+export const ReactAdmin = () => (
+  <Slide padding="0 0 0" backgroundImage={`url(${reactAdmin})`}>
+    <Notes>
+      React-admin est un framework open source, édité par Marmelab et développé
+      en... React. Ce framework permet de créer des interfaces d'administration
+      rapidement. Mais pas que. Vous pouvez aller voir le site si cela vous
+      intéresse. À main levé, qui a déjà entendu parlé de React-admin ? Qui
+      utilise React-admin ?
+    </Notes>
+  </Slide>
+);

src/slides/Title.tsx

@@ -0,0 +1,15 @@
+import { Notes, SlideLayout, Text } from "spectacle";
+import logo from "@/assets/storybook-logo.png";
+
+export const Title = () => (
+  <SlideLayout.Center backgroundColor="#0d1026">
+    <Text>Développer des composants en isolation avec</Text>
+    <img src={logo} alt="storybook-logo" />
+    <div className="divider" />
+    <Text fontSize={16}>Adrien Guernier - Marmelab</Text>
+    <Notes>
+      Dans cette conférence, nNous allons voir comment isoler nos composants
+      frontend et ainsi leur rendre leur libérté.
+    </Notes>
+  </SlideLayout.Center>
+);

src/slides/What.tsx

@@ -0,0 +1,17 @@
+import { Heading, Notes, SlideLayout } from "spectacle";
+
+export const What = () => (
+  <SlideLayout.Full>
+    <Heading>So what?</Heading>
+    <iframe
+      height="100%"
+      src="https://react-admin-storybook-marmelab.vercel.app/?path=/story/ra-ui-materialui-list-datagrid--full-app/"
+    />
+    <Notes>
+      Ce que je vais vous expliquer, c'est comment nous utilisons Storybook sur
+      React-admin et comment nous l'avons utilisé sur api-platform/admin.
+      Comment développer ses composants, les tester, et les documenter. Et je
+      vais l'expliquer en prenant pour base un projet assez simple.
+    </Notes>
+  </SlideLayout.Full>
+);

src/slides/Why.tsx

@@ -0,0 +1,32 @@
+import { Notes, SlideLayout } from "spectacle";
+import why from "@/assets/why.jpg";
+
+const PhotoCredit = () => (
+  <>
+    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>
+  </>
+);
+
+export const Why = () => (
+  <SlideLayout.BigFact
+    backgroundImage={`url(${why})`}
+    backgroundOpacity={0.4}
+    factInformation={<PhotoCredit />}
+    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/Yata.tsx

@@ -0,0 +1,7 @@
+import { Heading, SlideLayout } from "spectacle";
+
+export const Yata = () => (
+  <SlideLayout.Section>
+    <Heading>Yet Another Todolist App </Heading>
+  </SlideLayout.Section>
+);

src/slides/index.ts

@@ -0,0 +1,10 @@
+export * from "./ApiPlatformAdmin";
+export * from "./B2bApp";
+export * from "./Conclusion";
+export * from "./HackDay";
+export * from "./Hero";
+export * from "./ReactAdmin";
+export * from "./Title";
+export * from "./Why";
+export * from "./What";
+export * from "./Yata";

tsconfig.app.json

@@ -4,7 +4,8 @@
       "@/*": ["./src/*"],
       "@assets/*": ["./src/assets/*"],
       "@components/*": ["./src/components/*"],
-      "@services/*": ["./src/services/*"]
+      "@services/*": ["./src/services/*"],
+      "@slides/*": ["./src/slides/*"]
     },
     "composite": true,
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",