Remplace le selecteur de couleur

betagouv · Aug 2, 2022 · a5333de · a5333de
1 parent ccd0203
commit a5333de
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 84 deletions.
diff --git a/site/package.json b/site/package.json
@@ -80,7 +80,7 @@
 		"publicodes": "^1.0.0-beta.46",
 		"publicodes-react": "^1.0.0-beta.46",
 		"react": "^17.0.0",
-		"react-color": "^2.14.0",
+		"react-colorful": "^5.5.1",
 		"react-dom": "^17.0.0",
 		"react-easy-emoji": "^1.6.1",
 		"react-helmet-async": "^1.1.2",

diff --git a/site/source/pages/Dev/ColorPicker.tsx b/site/source/pages/Dev/ColorPicker.tsx
diff --git a/site/source/pages/Dev/IntegrationTest.tsx b/site/source/pages/Dev/IntegrationTest.tsx
@@ -1,10 +1,9 @@
 import { Button } from '@/design-system/buttons'
 import { H2 } from '@/design-system/typography/heading'
-import { lazy, Suspense, useEffect, useMemo, useRef, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { HexColorPicker } from 'react-colorful'
 import useSimulatorsData from '../Simulateurs/metadata'
 
-const LazyColorPicker = lazy(() => import('./ColorPicker'))
-
 export default function IntegrationTest() {
 	const simulators = useSimulatorsData()
 	const integrableModuleNames = useMemo(
@@ -43,9 +42,7 @@ export default function IntegrationTest() {
 			</select>
 
 			<H2>Quelle couleur ?</H2>
-			<Suspense fallback={<div>Chargement...</div>}>
-				<LazyColorPicker color={color} onChange={setColor} />
-			</Suspense>
+			<HexColorPicker color={color} onChange={setColor} />
 
 			<Button onPress={() => setVersion(version + 1)}>
 				{!version ? 'Visualiser le module' : 'Valider les changements'}

diff --git a/site/source/pages/integration/Iframe.tsx b/site/source/pages/integration/Iframe.tsx
@@ -7,7 +7,8 @@ import { H1, H2, H3 } from '@/design-system/typography/heading'
 import { Link } from '@/design-system/typography/link'
 import { Body, Intro } from '@/design-system/typography/paragraphs'
 import urssafLogo from '@/images/Urssaf.svg'
-import { lazy, Suspense, useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
+import { HexColorPicker } from 'react-colorful'
 import { Trans, useTranslation } from 'react-i18next'
 import { useHref, useSearchParams } from 'react-router-dom-v5-compat'
 import styled from 'styled-components'
@@ -18,8 +19,6 @@ import cciLogo from './images/cci.png'
 import minTraLogo from './images/min-tra.jpg'
 import poleEmploiLogo from './images/pole-emploi.png'
 
-const LazyColorPicker = lazy(() => import('../Dev/ColorPicker'))
-
 const checkIframe = (obj: SimulatorData[keyof SimulatorData]) =>
 	'iframePath' in obj && obj.iframePath && !('private' in obj && obj.private)
 
@@ -49,7 +48,7 @@ function IntegrationCustomizer() {
 		setSearchParams({ module: currentModule }, { replace: true })
 	}, [currentModule, setSearchParams])
 
-	const [color, setColor] = useState<string | undefined>()
+	const [color, setColor] = useState<string>('#005aa1')
 
 	const currentSimulator = getFromSimu(simulatorsData, currentModule)
 
@@ -128,9 +127,7 @@ function IntegrationCustomizer() {
 						<Trans i18nKey="pages.développeur.couleur">Quelle couleur ? </Trans>
 						<Emoji emoji="🎨" />
 					</H3>
-					<Suspense fallback={<div>Chargement...</div>}>
-						<LazyColorPicker color={color} onChange={setColor} />
-					</Suspense>
+					<HexColorPicker color={color} onChange={setColor} />
 				</Grid>
 				<Grid item xs>
 					<H3>

diff --git a/yarn.lock b/yarn.lock
@@ -3442,15 +3442,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@icons/material@npm:^0.2.4":
-  version: 0.2.4
-  resolution: "@icons/material@npm:0.2.4"
-  peerDependencies:
-    react: "*"
-  checksum: 24baa360cb83f7e1a9e6784ac11185d57eb895b0efd3070ec915693378330f35ff9feb248f650b9649fa3e1045601286585dc05795a4c734d4849b33900351ee
-  languageName: node
-  linkType: hard
-
 "@internationalized/date@npm:3.0.0-alpha.4":
   version: 3.0.0-alpha.4
   resolution: "@internationalized/date@npm:3.0.0-alpha.4"
@@ -19799,13 +19790,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash-es@npm:^4.17.15":
-  version: 4.17.21
-  resolution: "lodash-es@npm:4.17.21"
-  checksum: 05cbffad6e2adbb331a4e16fbd826e7faee403a1a04873b82b42c0f22090f280839f85b95393f487c1303c8a3d2a010048bf06151a6cbe03eee4d388fb0a12d2
-  languageName: node
-  linkType: hard
-
 "lodash.camelcase@npm:^4.3.0":
   version: 4.3.0
   resolution: "lodash.camelcase@npm:4.3.0"
@@ -19953,7 +19937,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash@npm:^4.0.1, lodash@npm:^4.17.11, lodash@npm:^4.17.12, lodash@npm:^4.17.13, lodash@npm:^4.17.15, lodash@npm:^4.17.19, lodash@npm:^4.17.20, lodash@npm:^4.17.21":
+"lodash@npm:^4.17.11, lodash@npm:^4.17.12, lodash@npm:^4.17.13, lodash@npm:^4.17.15, lodash@npm:^4.17.19, lodash@npm:^4.17.20, lodash@npm:^4.17.21":
   version: 4.17.21
   resolution: "lodash@npm:4.17.21"
   checksum: eb835a2e51d381e561e508ce932ea50a8e5a68f4ebdd771ea240d3048244a8d13658acbd502cd4829768c56f2e16bdd4340b9ea141297d472517b83868e677f7
@@ -20307,13 +20291,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"material-colors@npm:^1.2.1":
-  version: 1.2.6
-  resolution: "material-colors@npm:1.2.6"
-  checksum: 72d005ccccb82bab68eef3cd757e802668634fc86976dedb9fc564ce994f2d3258273766b7efecb7404a0031969e2d72201a1b74169763f0a53c0dd8d649209f
-  languageName: node
-  linkType: hard
-
 "maxstache-stream@npm:^1.0.0":
   version: 1.0.4
   resolution: "maxstache-stream@npm:1.0.4"
@@ -23152,7 +23129,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prop-types@npm:^15.0.0, prop-types@npm:^15.5.10, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
+"prop-types@npm:^15.0.0, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
   version: 15.8.1
   resolution: "prop-types@npm:15.8.1"
   dependencies:
@@ -23527,20 +23504,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-color@npm:^2.14.0":
-  version: 2.19.3
-  resolution: "react-color@npm:2.19.3"
-  dependencies:
-    "@icons/material": ^0.2.4
-    lodash: ^4.17.15
-    lodash-es: ^4.17.15
-    material-colors: ^1.2.1
-    prop-types: ^15.5.10
-    reactcss: ^1.2.0
-    tinycolor2: ^1.4.1
+"react-colorful@npm:^5.5.1":
+  version: 5.5.1
+  resolution: "react-colorful@npm:5.5.1"
   peerDependencies:
-    react: "*"
-  checksum: 40b49e1aa2ab27a099cc37a3fa2d5bb906b8def4dbe2d922c0e42365e386d82b03f9b06a2b29a44a51f1e114cef72e61c0ba0740581a128d951936ea4617429b
+    react: ">=16.8.0"
+    react-dom: ">=16.8.0"
+  checksum: e60811781716e57f0990379eff20d6f22d4d35b9e858c47ecf857c1dc1c1a2274c924ded7248bad5f1e2fbf2aab06e59b12852910c8dee5e6850f8e4df293670
   languageName: node
   linkType: hard
 
@@ -23969,15 +23939,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"reactcss@npm:^1.2.0":
-  version: 1.2.3
-  resolution: "reactcss@npm:1.2.3"
-  dependencies:
-    lodash: ^4.0.1
-  checksum: c53e386a0881f1477e1cff661f6a6ad4c662230941f3827862193ac30f9b75cdf7bc7b4c7e5ca543d3e4e80fee1a3e9fa0056c206b1c0423726c41773ab3fe45
-  languageName: node
-  linkType: hard
-
 "read-package-json-fast@npm:^2.0.2":
   version: 2.0.3
   resolution: "read-package-json-fast@npm:2.0.3"
@@ -25359,7 +25320,7 @@ __metadata:
     publicodes: ^1.0.0-beta.46
     publicodes-react: ^1.0.0-beta.46
     react: ^17.0.0
-    react-color: ^2.14.0
+    react-colorful: ^5.5.1
     react-dom: ^17.0.0
     react-easy-emoji: ^1.6.1
     react-helmet-async: ^1.1.2
@@ -26761,13 +26722,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tinycolor2@npm:^1.4.1":
-  version: 1.4.2
-  resolution: "tinycolor2@npm:1.4.2"
-  checksum: 57ed262e08815a4ab0ed933edafdbc6555a17081781766149813b44a080ecbe58b3ee281e81c0e75b42e4d41679f138cfa98eabf043f829e0683c04adb12c031
-  languageName: node
-  linkType: hard
-
 "tinypool@npm:^0.1.2, tinypool@npm:^0.1.3":
   version: 0.1.3
   resolution: "tinypool@npm:0.1.3"