feat: View PDF document preview when adding a document

And add react-pdf to deps.
The version number is intended to be synchronized
with the version present in cozy-viewer.

package.json

@@ -44,6 +44,7 @@
     "@testing-library/jest-dom": "6.6.2",
     "@testing-library/react": "16.0.1",
     "@testing-library/react-hooks": "8.0.1",
+    "@types/react-pdf": "^5.0.0",
     "@typescript-eslint/eslint-plugin": "5.54.0",
     "@typescript-eslint/parser": "5.54.0",
     "babel-preset-cozy-app": "2.0.2",
@@ -105,6 +106,7 @@
     "react-dom": "18.2.0",
     "react-input-mask": "3.0.0-alpha.2",
     "react-inspector": "5.1.1",
+    "react-pdf": "^5.7.2",
     "react-router-dom": "6.23.1",
     "terser-webpack-plugin": "1.4.5"
   }

src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCardPDF.jsx

@@ -2,10 +2,10 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import styles from 'src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCard.styl'
 import ScanResultCardPDFActions from 'src/components/ModelSteps/ScanResult/ScanResultCard/ScanResultCardPDFActions'
+import { PdfOverview } from 'src/components/PdfOverview/PdfOverview'
 
 import Box from 'cozy-ui/transpiled/react/Box'
 import Card from 'cozy-ui/transpiled/react/Card'
-import Icon from 'cozy-ui/transpiled/react/Icon'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 
 const ScanResultCardPDF = props => {
@@ -14,7 +14,7 @@ const ScanResultCardPDF = props => {
   return (
     <Card className="u-ta-center u-p-1 u-flex u-flex-column u-flex-justify-between">
       <div className={styles['image-container']}>
-        <Icon icon="file-type-pdf" size={80} aria-hidden="true" />
+        <PdfOverview file={currentFile} />
         <Typography className="u-mt-half">{currentFile.name}</Typography>
       </div>
       <Box display="flex" gridGap="1rem" marginTop="1rem">

src/components/PdfOverview/PdfOverview.tsx

@@ -0,0 +1,39 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { Document, Page } from 'react-pdf'
+
+interface PdfOverviewProps {
+  file: File
+}
+
+const styles = {
+  container: {
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'center'
+  }
+}
+
+export const PdfOverview: React.FC<PdfOverviewProps> = ({
+  file
+}: PdfOverviewProps) => {
+  const parentRef = useRef<HTMLDivElement | null>(null)
+  const [parentWidth, setParentWidth] = useState(0)
+
+  useEffect(() => {
+    const updateSize = (): void => {
+      if (parentRef.current) {
+        const width = parentRef.current.getBoundingClientRect().width
+        setParentWidth(width)
+      }
+    }
+    updateSize()
+  }, [])
+
+  return (
+    <div style={styles.container} ref={parentRef}>
+      <Document file={file}>
+        <Page pageNumber={1} width={parentWidth} />
+      </Document>
+    </div>
+  )
+}

yarn.lock

@@ -3052,6 +3052,14 @@
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.4.tgz#15925414e0ad2cd765bfef58842f7e26a7accb24"
   integrity sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==
 
+"@types/react-pdf@^5.0.0":
+  version "5.7.4"
+  resolved "https://registry.yarnpkg.com/@types/react-pdf/-/react-pdf-5.7.4.tgz#031a46a13f82390f84f490e66b0d263c8b7b3728"
+  integrity sha512-Im/HY4QhkhYcG+FJoGCy0WoGvdgYcpm+89W1lK5K9KBEQCy1YqTxhmWey5UkdnIPymmEDyeVJXdK0lPjtcvMyA==
+  dependencies:
+    "@types/react" "*"
+    pdfjs-dist "^2.10.377"
+
 "@types/react-transition-group@^4.2.0":
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.1.tgz#e1a3cb278df7f47f17b5082b1b3da17170bd44b1"
@@ -6387,6 +6395,11 @@ domhandler@^4.0.0, domhandler@^4.2.0:
   dependencies:
     domelementtype "^2.2.0"
 
+dommatrix@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/dommatrix/-/dommatrix-1.0.3.tgz#e7c18e8d6f3abdd1fef3dd4aa74c4d2e620a0525"
+  integrity sha512-l32Xp/TLgWb8ReqbVJAFIvXmY7go4nTxxlWiAFyhoQw9RKEOHBZNnyGvJWqDVSPmq3Y9HlM4npqF/T6VMOXhww==
+
 [email protected]:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/domready/-/domready-1.0.8.tgz#91f252e597b65af77e745ae24dd0185d5e26d58c"
@@ -12400,6 +12413,14 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/pdfjs-dist/-/pdfjs-dist-2.12.313.tgz#62f2273737bb956267ae2e02cdfaddcb1099819c"
   integrity sha512-1x6iXO4Qnv6Eb+YFdN5JdUzt4pAkxSp3aLAYPX93eQCyg/m7QFzXVWJHJVtoW48CI8HCXju4dSkhQZwoheL5mA==
 
+pdfjs-dist@^2.10.377:
+  version "2.16.105"
+  resolved "https://registry.yarnpkg.com/pdfjs-dist/-/pdfjs-dist-2.16.105.tgz#937b9c4a918f03f3979c88209d84c1ce90122c2a"
+  integrity sha512-J4dn41spsAwUxCpEoVf6GVoz908IAA3mYiLmNxg8J9kfRXc2jxpbUepcP0ocp0alVNLFthTAM8DZ1RaHh8sU0A==
+  dependencies:
+    dommatrix "^1.0.3"
+    web-streams-polyfill "^3.2.1"
+
 performance-now@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
@@ -15912,6 +15933,11 @@ web-resource-inliner@^4.2.1:
     valid-data-url "^2.0.0"
     xtend "^4.0.2"
 
+web-streams-polyfill@^3.2.1:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz#2073b91a2fdb1fbfbd401e7de0ac9f8214cecb4b"
+  integrity sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==
+
 webidl-conversions@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-5.0.0.tgz#ae59c8a00b121543a2acc65c0434f57b0fc11aff"