Tech – Importer les composants react-epic-spinners et le supprimer de…

…s dépendances Frontend (#3643) ## Linked issues - Resolve #3632 ---- - [ ] Tests E2E (Cypress)
MTES-MCT · Sep 12, 2024 · 50651aa · 50651aa
2 parents 76e9b6b + f37a13b
commit 50651aa
Show file tree

Hide file tree

Showing 21 changed files with 381 additions and 39 deletions.
diff --git a/.../kotlin/fr/gouv/cnsp/monitorfish/infrastructure/api/outputs/ReportingSummaryDataOutput.kt b/.../kotlin/fr/gouv/cnsp/monitorfish/infrastructure/api/outputs/ReportingSummaryDataOutput.kt
@@ -8,12 +8,14 @@ data class ReportingSummaryDataOutput(
     val numberOfObservations: Int,
 ) {
     companion object {
-        fun fromReportingSummary(reportingSummary: ReportingSummary) = ReportingSummaryDataOutput(
-            infractionSuspicionsSummary = reportingSummary.infractionSuspicionsSummary.map {
-                ReportingTitleAndNumberOfOccurrencesDataOutput.fromReportingTitleAndNumberOfOccurrences(it)
-            },
-            numberOfInfractionSuspicions = reportingSummary.numberOfInfractionSuspicions,
-            numberOfObservations = reportingSummary.numberOfObservations
-        )
+        fun fromReportingSummary(reportingSummary: ReportingSummary) =
+            ReportingSummaryDataOutput(
+                infractionSuspicionsSummary =
+                    reportingSummary.infractionSuspicionsSummary.map {
+                        ReportingTitleAndNumberOfOccurrencesDataOutput.fromReportingTitleAndNumberOfOccurrences(it)
+                    },
+                numberOfInfractionSuspicions = reportingSummary.numberOfInfractionSuspicions,
+                numberOfObservations = reportingSummary.numberOfObservations,
+            )
     }
 }
diff --git a/.../monitorfish/infrastructure/api/outputs/ReportingTitleAndNumberOfOccurrencesDataOutput.kt b/.../monitorfish/infrastructure/api/outputs/ReportingTitleAndNumberOfOccurrencesDataOutput.kt
@@ -7,7 +7,9 @@ data class ReportingTitleAndNumberOfOccurrencesDataOutput(
     val numberOfOccurrences: Int,
 ) {
     companion object {
-        fun fromReportingTitleAndNumberOfOccurrences(reportingTitleAndNumberOfOccurrences: ReportingTitleAndNumberOfOccurrences) = ReportingTitleAndNumberOfOccurrencesDataOutput(
+        fun fromReportingTitleAndNumberOfOccurrences(
+            reportingTitleAndNumberOfOccurrences: ReportingTitleAndNumberOfOccurrences,
+        ) = ReportingTitleAndNumberOfOccurrencesDataOutput(
             title = reportingTitleAndNumberOfOccurrences.title,
             numberOfOccurrences = reportingTitleAndNumberOfOccurrences.numberOfOccurrences,
         )

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -37,7 +37,7 @@
   "dependencies": {
     "@dnd-kit/core": "6.1.0",
     "@dnd-kit/modifiers": "6.0.1",
-    "@mtes-mct/monitor-ui": "22.0.1",
+    "@mtes-mct/monitor-ui": "23.0.0",
     "@reduxjs/toolkit": "2.2.7",
     "@sentry/react": "7.117.0",
     "@tanstack/react-table": "8.20.5",
@@ -65,7 +65,6 @@
     "react-color": "2.19.3",
     "react-device-detect": "2.2.3",
     "react-dom": "18.3.1",
-    "react-epic-spinners": "0.5.0",
     "react-highlight-words": "0.20.0",
     "react-imask": "6.4.3",
     "react-markdown": "8.0.7",

diff --git a/frontend/src/components/FingerprintSpinner.tsx b/frontend/src/components/FingerprintSpinner.tsx
@@ -0,0 +1,127 @@
+// https://github.com/bondz/react-epic-spinners/blob/c5b731c58edd75a93753ab95857dbc633e387fb1/src/components/FingerprintSpinner.js
+
+import styled from 'styled-components'
+
+import type { HTMLAttributes } from 'react'
+
+function generateRings(num: number) {
+  // eslint-disable-next-line react/no-array-index-key
+  return Array.from({ length: num }).map((_val, index) => <div key={index} className="spinner-ring" />)
+}
+
+type FingerprintSpinnerProps = Readonly<
+  HTMLAttributes<HTMLElement> & {
+    animationDuration?: number
+    color?: string
+    size?: number
+  }
+>
+export function FingerprintSpinner({
+  animationDuration = 1500,
+  className = '',
+  color = '#fff',
+  size = 60,
+  ...props
+}: FingerprintSpinnerProps) {
+  const ringsNum = 9
+  const containerPadding = 2
+  const outerRingSize = size - containerPadding * 2
+  const ringBase = outerRingSize / ringsNum
+
+  return (
+    <RingSpinner
+      $animationDuration={animationDuration}
+      $color={color}
+      $containerPadding={containerPadding}
+      $ringBase={ringBase}
+      $size={size}
+      className={`fingerprint-spinner${className ? ` ${className}` : ''}`}
+      {...props}
+    >
+      {generateRings(ringsNum)}
+    </RingSpinner>
+  )
+}
+
+const RingSpinner = styled.div<{
+  $animationDuration: number
+  $color: string
+  $containerPadding: number
+  $ringBase: number
+  $size: number
+}>`
+  height: ${props => props.$size}px;
+  width: ${props => props.$size}px;
+  padding: ${props => props.$containerPadding}px;
+  overflow: hidden;
+  position: relative;
+
+  * {
+    box-sizing: border-box;
+  }
+
+  .spinner-ring {
+    position: absolute;
+    border-radius: 50%;
+    border: 2px solid transparent;
+    border-top-color: ${props => props.$color};
+    animation: fingerprint-spinner-animation ${props => props.$animationDuration}ms
+      cubic-bezier(0.68, -0.75, 0.265, 1.75) infinite forwards;
+    margin: auto;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    top: 0;
+  }
+  .spinner-ring:nth-child(1) {
+    height: ${props => props.$ringBase + 0 * props.$ringBase}px;
+    width: ${props => props.$ringBase + 0 * props.$ringBase}px;
+    animation-delay: calc(50ms * 1);
+  }
+  .spinner-ring:nth-child(2) {
+    height: ${props => props.$ringBase + 1 * props.$ringBase}px;
+    width: ${props => props.$ringBase + 1 * props.$ringBase}px;
+    animation-delay: calc(50ms * 2);
+  }
+  .spinner-ring:nth-child(3) {
+    height: ${props => props.$ringBase + 2 * props.$ringBase}px;
+    width: ${props => props.$ringBase + 2 * props.$ringBase}px;
+    animation-delay: calc(50ms * 3);
+  }
+  .spinner-ring:nth-child(4) {
+    height: ${props => props.$ringBase + 3 * props.$ringBase}px;
+    width: ${props => props.$ringBase + 3 * props.$ringBase}px;
+    animation-delay: calc(50ms * 4);
+  }
+  .spinner-ring:nth-child(5) {
+    height: ${props => props.$ringBase + 4 * props.$ringBase}px;
+    width: ${props => props.$ringBase + 4 * props.$ringBase}px;
+    animation-delay: calc(50ms * 5);
+  }
+  .spinner-ring:nth-child(6) {
+    height: ${props => props.$ringBase + 5 * props.$ringBase}px;
+    width: ${props => props.$ringBase + 5 * props.$ringBase}px;
+    animation-delay: calc(50ms * 6);
+  }
+  .spinner-ring:nth-child(7) {
+    height: ${props => props.$ringBase + 6 * props.$ringBase}px;
+    width: ${props => props.$ringBase + 6 * props.$ringBase}px;
+    animation-delay: calc(50ms * 7);
+  }
+  .spinner-ring:nth-child(8) {
+    height: ${props => props.$ringBase + 7 * props.$ringBase}px;
+    width: ${props => props.$ringBase + 7 * props.$ringBase}px;
+    animation-delay: calc(50ms * 8);
+  }
+  .spinner-ring:nth-child(9) {
+    height: ${props => props.$ringBase + 8 * props.$ringBase}px;
+    width: ${props => props.$ringBase + 8 * props.$ringBase}px;
+    animation-delay: calc(50ms * 9);
+  }
+
+  @keyframes fingerprint-spinner-animation {
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+`
diff --git a/frontend/src/components/FulfillingBouncingCircleSpinner.tsx b/frontend/src/components/FulfillingBouncingCircleSpinner.tsx
@@ -0,0 +1,138 @@
+// https://github.com/bondz/react-epic-spinners/blob/c5b731c58edd75a93753ab95857dbc633e387fb1/src/components/FulfillingBouncingCircleSpinner.js
+
+import styled from 'styled-components'
+
+import type { HTMLAttributes } from 'react'
+
+type FulfillingBouncingCircleSpinnerProps = Readonly<
+  HTMLAttributes<HTMLDivElement> & {
+    animationDuration?: number
+    color?: string
+    size?: number
+  }
+>
+export function FulfillingBouncingCircleSpinner({
+  animationDuration = 4000,
+  className = '',
+  color = '#fff',
+  size = 60,
+  ...props
+}: FulfillingBouncingCircleSpinnerProps) {
+  return (
+    <BouncingCircle
+      $animationDuration={animationDuration}
+      $color={color}
+      $size={size}
+      className={`fulfilling-bouncing-circle-spinner${className ? ` ${className}` : ''}`}
+      {...props}
+    >
+      <div className="circle" />
+      <div className="orbit" />
+    </BouncingCircle>
+  )
+}
+
+const BouncingCircle = styled.div<{
+  $animationDuration: number
+  $color: string
+  $size: number
+}>`
+  height: ${props => props.$size}px;
+  width: ${props => props.$size}px;
+  position: relative;
+  animation: fulfilling-bouncing-circle-spinner-animation infinite ${props => props.$animationDuration}ms ease;
+
+  * {
+    box-sizing: border-box;
+  }
+
+  .orbit {
+    height: ${props => props.$size}px;
+    width: ${props => props.$size}px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    border-radius: 50%;
+    border: calc(${props => props.$size}px * 0.03) solid ${props => props.$color};
+    animation: fulfilling-bouncing-circle-spinner-orbit-animation infinite ${props => props.$animationDuration}ms ease;
+  }
+  .circle {
+    height: ${props => props.$size}px;
+    width: ${props => props.$size}px;
+    color: ${props => props.$color};
+    display: block;
+    border-radius: 50%;
+    position: relative;
+    border: calc(${props => props.$size}px * 0.1) solid ${props => props.$color};
+    animation: fulfilling-bouncing-circle-spinner-circle-animation infinite ${props => props.$animationDuration}ms ease;
+    transform: rotate(0deg) scale(1);
+  }
+  @keyframes fulfilling-bouncing-circle-spinner-animation {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes fulfilling-bouncing-circle-spinner-orbit-animation {
+    0% {
+      transform: scale(1);
+    }
+    50% {
+      transform: scale(1);
+    }
+    62.5% {
+      transform: scale(0.8);
+    }
+    75% {
+      transform: scale(1);
+    }
+    87.5% {
+      transform: scale(0.8);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+  @keyframes fulfilling-bouncing-circle-spinner-circle-animation {
+    0% {
+      transform: scale(1);
+      border-color: transparent;
+      border-top-color: inherit;
+    }
+    16.7% {
+      border-color: transparent;
+      border-top-color: initial;
+      border-right-color: initial;
+    }
+    33.4% {
+      border-color: transparent;
+      border-top-color: inherit;
+      border-right-color: inherit;
+      border-bottom-color: inherit;
+    }
+    50% {
+      border-color: inherit;
+      transform: scale(1);
+    }
+    62.5% {
+      border-color: inherit;
+      transform: scale(1.4);
+    }
+    75% {
+      border-color: inherit;
+      transform: scale(1);
+      opacity: 1;
+    }
+    87.5% {
+      border-color: inherit;
+      transform: scale(1.4);
+    }
+    100% {
+      border-color: transparent;
+      border-top-color: inherit;
+      transform: scale(1);
+    }
+  }
+`