Remplace le colorpicker actuel par une version accessible (#2409)

* feat: Ajoute ColorPicker + cache la barre d'opacité

* fix: Essai fix stopPropagation

* chore: Retire code inutile

* chore: Ajoute lien vers l'issue

site/package.json

@@ -48,6 +48,7 @@
 		"build:storybook": "NODE_OPTIONS=--openssl-legacy-provider build-storybook"
 	},
 	"dependencies": {
+		"@atomik-color/component": "^1.0.16",
 		"@axe-core/react": "^4.5.2",
 		"@internationalized/number": "^3.1.1",
 		"@react-aria/accordion": "^3.0.0-alpha.13",

site/source/design-system/global-style.ts

@@ -203,4 +203,17 @@ figure {
 		font-size: 0.9rem;
 	}
 }
+
+// Cache le slider opacité du ColorPicker
+#color-rectangle1 + div {
+	&:first-child {
+		align-items: center;
+	}
+	& div[aria-label='Hue slider'] {
+		margin-bottom: 0!important;
+	}
+	& div[aria-label='Alpha slider'] {
+		display: none;
+	}
+}
 `

site/source/pages/Dev/IntegrationTest.tsx

@@ -1,5 +1,6 @@
+import ColorPicker from '@atomik-color/component'
+import { str2Color } from '@atomik-color/core'
 import { useEffect, useMemo, useRef, useState } from 'react'
-import { HexColorPicker } from 'react-colorful'
 
 import { Button } from '@/design-system/buttons'
 import { H2 } from '@/design-system/typography/heading'
@@ -44,7 +45,10 @@ export default function IntegrationTest() {
 			</select>
 
 			<H2>Quelle couleur ?</H2>
-			<HexColorPicker color={color} onChange={setColor} />
+			<ColorPicker
+				value={str2Color(color)}
+				onChange={({ hex }: { hex: string }) => setColor(`#${hex}`)}
+			/>
 
 			<Button onPress={() => setVersion(version + 1)}>
 				{!version ? 'Visualiser le module' : 'Valider les changements'}

site/source/pages/integration/Iframe.tsx

@@ -1,5 +1,6 @@
+import ColorPicker from '@atomik-color/component'
+import { str2Color } from '@atomik-color/core'
 import { useEffect, useRef, useState } from 'react'
-import { HexColorPicker } from 'react-colorful'
 import { Trans, useTranslation } from 'react-i18next'
 import { useHref, useSearchParams } from 'react-router-dom'
 import styled from 'styled-components'
@@ -145,7 +146,14 @@ function IntegrationCustomizer() {
 						onChange={setColor}
 					/>
 					<Spacing md />
-					<HexColorPicker color={color} onChange={setColor} />
+					{/*
+						Conflit de scrolling sur Firefox sur mobile
+						Issue ouverte : https://github.com/deebov/atomik-color-picker/issues/2
+					*/}
+					<ColorPicker
+						value={str2Color(color)}
+						onChange={({ hex }: { hex: string }) => setColor(`#${hex}`)}
+					/>
 				</Grid>
 				<Grid item xs>
 					<H3>

yarn.lock

@@ -282,6 +282,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@atomik-color/component@npm:^1.0.16":
+  version: 1.0.16
+  resolution: "@atomik-color/component@npm:1.0.16"
+  dependencies:
+    "@atomik-color/core": ^1.0.12
+  peerDependencies:
+    react: 16.x
+  checksum: da85cc375f6d40ac887fae525bce79825191feb3c5eb9ddf3b616c58759f9e4271f36d3d2b71448bf7faa059164648f1310d6a253a50550a466460289367e6a6
+  languageName: node
+  linkType: hard
+
+"@atomik-color/core@npm:^1.0.12":
+  version: 1.0.12
+  resolution: "@atomik-color/core@npm:1.0.12"
+  peerDependencies:
+    react: 16.x
+  checksum: bc5c44793f401b10c7780811e35652ab5f3fb6ff9999f11c8dd0f5577d5710f563acca27349dfbbd2c2da3c909b458e817c96a748ccd87dba00db49366e5bfa4
+  languageName: node
+  linkType: hard
+
 "@aws-crypto/ie11-detection@npm:^2.0.0":
   version: 2.0.2
   resolution: "@aws-crypto/ie11-detection@npm:2.0.2"
@@ -25877,6 +25897,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "site@workspace:site"
   dependencies:
+    "@atomik-color/component": ^1.0.16
     "@axe-core/react": ^4.5.2
     "@internationalized/number": ^3.1.1
     "@react-aria/accordion": ^3.0.0-alpha.13