From e70cd1dcea86844abc26370962e7ec899d96e885 Mon Sep 17 00:00:00 2001
From: Benjamin Arias <benjamin.j.arias@gmail.com>
Date: Tue, 6 Dec 2022 10:37:09 +0100
Subject: [PATCH] Remplace le colorpicker actuel par une version accessible
 (#2409)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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                         |  1 +
 site/source/design-system/global-style.ts | 13 +++++++++++++
 site/source/pages/Dev/IntegrationTest.tsx |  8 ++++++--
 site/source/pages/integration/Iframe.tsx  | 12 ++++++++++--
 yarn.lock                                 | 21 +++++++++++++++++++++
 5 files changed, 51 insertions(+), 4 deletions(-)

diff --git a/site/package.json b/site/package.json
index b61579525..4039d3fdc 100644
--- a/site/package.json
+++ b/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",
diff --git a/site/source/design-system/global-style.ts b/site/source/design-system/global-style.ts
index 56855f650..6cd56a838 100644
--- a/site/source/design-system/global-style.ts
+++ b/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;
+	}
+}
 `
diff --git a/site/source/pages/Dev/IntegrationTest.tsx b/site/source/pages/Dev/IntegrationTest.tsx
index 2b623e181..23502ba88 100644
--- a/site/source/pages/Dev/IntegrationTest.tsx
+++ b/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'}
diff --git a/site/source/pages/integration/Iframe.tsx b/site/source/pages/integration/Iframe.tsx
index d3eb95905..a4d333e1d 100644
--- a/site/source/pages/integration/Iframe.tsx
+++ b/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>
diff --git a/yarn.lock b/yarn.lock
index 1fd498797..262bd0906 100644
--- a/yarn.lock
+++ b/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