From dd86c6a6f6becdfc10bf666c3c03a2641d1f6e95 Mon Sep 17 00:00:00 2001
From: Nitzan Yizhar <nitzany@wix.com>
Date: Wed, 14 Feb 2024 17:44:57 +0200
Subject: [PATCH 01/20] Started working on implementing reanimated into the
 color picker

---
 demo/src/screens/PlaygroundScreen.tsx         | 12 +----
 .../colorPicker/ColorPickerContext.tsx        | 51 +++++++++++++++++++
 src/components/gradient/index.tsx             |  3 +-
 src/components/slider/GradientSlider.tsx      | 13 +++--
 src/index.ts                                  |  2 +
 5 files changed, 66 insertions(+), 15 deletions(-)
 create mode 100644 src/components/colorPicker/ColorPickerContext.tsx

diff --git a/demo/src/screens/PlaygroundScreen.tsx b/demo/src/screens/PlaygroundScreen.tsx
index 0bda100e67..523c00cc80 100644
--- a/demo/src/screens/PlaygroundScreen.tsx
+++ b/demo/src/screens/PlaygroundScreen.tsx
@@ -1,19 +1,11 @@
 import React, {Component} from 'react';
-import {View, Text, Card, TextField, Button} from 'react-native-ui-lib';
+import {View, Text, Card, TextField, Button, MyColorPicker} from 'react-native-ui-lib';
 
 export default class PlaygroundScreen extends Component {
   render() {
     return (
       <View bg-grey80 flex padding-20>
-        <View marginT-20>
-          <TextField migrate placeholder="Placeholder"/>
-        </View>
-        <Card height={100} center padding-20>
-          <Text text50>Playground Screen</Text>
-        </Card>
-        <View flex center>
-          <Button marginV-20 label="Button"/>
-        </View>
+        <MyColorPicker/>
       </View>
     );
   }
diff --git a/src/components/colorPicker/ColorPickerContext.tsx b/src/components/colorPicker/ColorPickerContext.tsx
new file mode 100644
index 0000000000..08bcc540bf
--- /dev/null
+++ b/src/components/colorPicker/ColorPickerContext.tsx
@@ -0,0 +1,51 @@
+import React, {PropsWithChildren, createContext, useCallback, useEffect, useMemo} from 'react';
+import {SharedValue, useSharedValue} from 'react-native-reanimated';
+import type {ColorFormats} from 'tinycolor2';
+import Slider from '../slider';
+import GradientSlider, {GradientSliderTypes} from '../slider/GradientSlider';
+
+type HSL = ColorFormats.HSL;
+type SharedColorContextType = {
+  value: SharedValue<HSL>;
+  reset: () => void;
+}
+
+export const ColorPickerContext = createContext<SharedColorContextType>({} as SharedColorContextType);
+
+interface ColorPickerContextProviderProps<T> extends PropsWithChildren {
+  initialValue?: T;
+}
+
+const DEFAULT_VALUE = {h: 0, s: 0, l: 0};
+
+const ColorPickerContextProvider = (props: ColorPickerContextProviderProps<HSL>) => {
+  const {initialValue, children} = props;
+  const colorValue = useSharedValue<HSL>(initialValue ?? DEFAULT_VALUE);
+
+  useEffect(() => {
+    colorValue.value = initialValue ?? DEFAULT_VALUE;
+  }, [colorValue, initialValue]);
+
+  const reset = useCallback(() => {
+    colorValue.value = DEFAULT_VALUE;
+  }, [colorValue]);
+
+  const providerValue = useMemo(() => {
+    return {
+      value: colorValue,
+      reset
+    };
+  }, [colorValue, reset]);
+
+  return <ColorPickerContext.Provider value={providerValue}>{children}</ColorPickerContext.Provider>;
+};
+
+const MyComponent = () => {
+  return (
+    <ColorPickerContextProvider>
+      <GradientSlider type={GradientSlider.types.HUE}/>
+    </ColorPickerContextProvider>
+  );
+};
+
+export default MyComponent;
diff --git a/src/components/gradient/index.tsx b/src/components/gradient/index.tsx
index 7cb308d2c4..09af4f4d04 100644
--- a/src/components/gradient/index.tsx
+++ b/src/components/gradient/index.tsx
@@ -5,6 +5,7 @@ import {StyleSheet, StyleProp, ViewStyle} from 'react-native';
 import Constants from '../../commons/Constants';
 import {Colors} from '../../style';
 import View from '../view';
+import { SharedValue } from 'react-native-reanimated';
 
 export enum GradientTypes {
   HUE = 'hue',
@@ -13,7 +14,7 @@ export enum GradientTypes {
 }
 
 export interface GradientProps {
-  color?: string | tinycolor.ColorFormats.HSLA;
+  color?: string | tinycolor.ColorFormats.HSLA | SharedValue<tinycolor.ColorFormats.HSL>;
   type?: GradientTypes | `${GradientTypes}`;
   numberOfSteps: number;
   style?: StyleProp<ViewStyle>;
diff --git a/src/components/slider/GradientSlider.tsx b/src/components/slider/GradientSlider.tsx
index ff4d47bb58..0c4d4983fb 100644
--- a/src/components/slider/GradientSlider.tsx
+++ b/src/components/slider/GradientSlider.tsx
@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import React, {useCallback, useEffect, useState, useMemo} from 'react';
+import React, {useCallback, useEffect, useState, useMemo, useContext} from 'react';
 import {asBaseComponent, forwardRef, ForwardRefInjectedProps} from '../../commons/new';
 import {ComponentStatics} from '../../typings/common';
 import {Colors} from '../../style';
@@ -9,6 +9,7 @@ import {GradientSliderProps, GradientSliderTypes, HSLA} from './types';
 import Slider from './index';
 import {SliderContextProps} from './context/SliderContext';
 import asSliderGroupChild from './context/asSliderGroupChild';
+import {ColorPickerContext} from '../colorPicker/ColorPickerContext';
 
 type GradientSliderComponentProps<T> = {
   sliderContext: SliderContextProps;
@@ -40,7 +41,12 @@ const GradientSlider = <T extends string | HSLA = string>(props: Props<T>) => {
     return _.isString(propsColors) ? Colors.getHSL(propsColors) : propsColors;
   }, [propsColors]);
   const [color, setColor] = useState(initialColor);
-  
+
+  const colorPickerContext = useContext(ColorPickerContext);
+
+  console.log(`Nitzan - colorPickerContext.value`, colorPickerContext.value.value.h);
+
+
   useEffect(() => {
     setColor(initialColor);
   }, [initialColor]);
@@ -173,5 +179,4 @@ GradientSlider.types = GradientSliderTypes;
 // @ts-expect-error
 export default asBaseComponent<GradientSliderProps, ComponentStatics<typeof GradientSlider>>(
   // @ts-expect-error
-  forwardRef(asSliderGroupChild(forwardRef(GradientSlider)))
-);
+  forwardRef(asSliderGroupChild(forwardRef(GradientSlider))));
diff --git a/src/index.ts b/src/index.ts
index 6d8e2cfee8..370f49412a 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -190,6 +190,8 @@ export {
   WheelPickerAlign
 } from './components/WheelPicker';
 
+export {default as MyColorPicker} from './components/colorPicker/ColorPickerContext';
+
 /* ===== TestKit ===== */
 // export {default as TextTestKit} from './components/text/Text.driver';
 // export {default as ImageTestKit} from './components/image/Image.driver';

From 6f6fc434b399bc8e09e330ad80fb6c6a56850f67 Mon Sep 17 00:00:00 2001
From: Nitzan Yizhar <nitzany@wix.com>
Date: Thu, 15 Feb 2024 17:51:45 +0200
Subject: [PATCH 02/20] Implemented Gradient with reanimated

---
 demo/src/screens/Gradient.tsx         | 82 +++++++++++++++++++++++++++
 demo/src/screens/PlaygroundScreen.tsx | 32 +++++++----
 2 files changed, 104 insertions(+), 10 deletions(-)
 create mode 100644 demo/src/screens/Gradient.tsx

diff --git a/demo/src/screens/Gradient.tsx b/demo/src/screens/Gradient.tsx
new file mode 100644
index 0000000000..04071ba81d
--- /dev/null
+++ b/demo/src/screens/Gradient.tsx
@@ -0,0 +1,82 @@
+import React, {useMemo} from 'react';
+import {GradientTypes, View, Constants, Text} from 'react-native-ui-lib';
+import Animated, {SharedValue, useAnimatedStyle} from 'react-native-reanimated';
+import {StyleSheet} from 'react-native';
+import tinycolor from 'tinycolor2';
+
+const toHSLStringWorklet = (hsla: tinycolor.ColorFormats.HSLA | tinycolor.ColorFormats.HSL) => {
+  'worklet';
+  if ('a' in hsla) {
+    return `hsla(${hsla.h}, ${Math.round(hsla.s * 100)}%, ${Math.round(hsla.l * 100)}%, ${hsla.a})`;
+  }
+  return `hsl(${hsla.h}, ${Math.round(hsla.s * 100)}%, ${Math.round(hsla.l * 100)}%)`;
+};
+
+
+interface GradientStepProps {
+  color: SharedValue<tinycolor.ColorFormats.HSLA>;
+  index: number;
+  type?: GradientTypes | `${GradientTypes}`;
+  numberOfSteps: number;
+}
+
+const AnimatedGradientStep = (props: GradientStepProps) => {
+  const {color, type, index, numberOfSteps} = props;
+  const maximum = type === GradientTypes.HUE ? 359 : 1;
+  const i = (index * maximum) / numberOfSteps;
+
+  const animatedStepStyle = useAnimatedStyle(() => {
+    const hslColor = color.value;
+    let backgroundColor;
+    switch (type) {
+      case GradientTypes.HUE:
+        backgroundColor = toHSLStringWorklet({s: 1, l: 0.5, h: i});
+        break;
+      case GradientTypes.LIGHTNESS:
+        backgroundColor = toHSLStringWorklet({...hslColor, l: i});
+        break;
+      case GradientTypes.SATURATION:
+        backgroundColor = toHSLStringWorklet({...hslColor, s: i});
+        break;
+      default:
+        backgroundColor = toHSLStringWorklet({...hslColor, a: i});
+    }
+    // console.log(`Nitzan - backgroundColor`, backgroundColor);
+    return {
+      backgroundColor
+    };
+  });
+  return <Animated.View key={i} style={[animatedStepStyle, styles.row]}/>;
+};
+
+export interface GradientProps {
+  color: SharedValue<tinycolor.ColorFormats.HSLA>;
+  type?: GradientTypes | `${GradientTypes}`;
+  numberOfSteps: number;
+}
+
+const Gradient = (props: GradientProps) => {
+  const {color, type, numberOfSteps} = props;
+  const rows = [...Array(numberOfSteps).keys()].map(index => {
+    return (
+      // <Text key={index}>Hello</Text>
+      <AnimatedGradientStep color={color} type={type} index={index} numberOfSteps={numberOfSteps} key={index}/>
+    );
+  });
+  return <View style={[styles.container]}>{rows}</View>;
+};
+
+export default Gradient;
+
+const styles = StyleSheet.create({
+  row: {
+    flex: 1,
+    marginLeft: Constants.isIOS ? -StyleSheet.hairlineWidth : 0
+  },
+  container: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'stretch'
+  }
+});
diff --git a/demo/src/screens/PlaygroundScreen.tsx b/demo/src/screens/PlaygroundScreen.tsx
index 523c00cc80..a0f7f8baa1 100644
--- a/demo/src/screens/PlaygroundScreen.tsx
+++ b/demo/src/screens/PlaygroundScreen.tsx
@@ -1,12 +1,24 @@
-import React, {Component} from 'react';
-import {View, Text, Card, TextField, Button, MyColorPicker} from 'react-native-ui-lib';
+import React, {Component, useState} from 'react';
+import {View, Gradient, Button, MyColorPicker, GradientTypes} from 'react-native-ui-lib';
+import Animated, {useSharedValue} from 'react-native-reanimated';
+import MyGradient from './Gradient';
 
-export default class PlaygroundScreen extends Component {
-  render() {
-    return (
-      <View bg-grey80 flex padding-20>
-        <MyColorPicker/>
+export default () => {
+  const color = useSharedValue<tinycolor.ColorFormats.HSLA>({h: 300, s: 1, l: 0.5, a: 1});
+  return (
+    <View flex bg-grey80 padding-20 gap-80>
+      <View height={50} gap-50>
+        <MyGradient color={color} numberOfSteps={100} type={GradientTypes.SATURATION}/>
       </View>
-    );
-  }
-}
+      <View height={50} gap-50>
+        <Gradient numberOfSteps={100} color={color.value} type={GradientTypes.SATURATION}/>
+      </View>
+      <Button
+        label="Change color"
+        onPress={() => {
+          color.value = {h: Math.floor(Math.random() * 350), s: 1, l: 0.5, a: 1};
+        }}
+      />
+    </View>
+  );
+};

From af2a112dbe2f4aee2b4a55d12772fa183b4293dc Mon Sep 17 00:00:00 2001
From: Nitzan Yizhar <nitzany@wix.com>
Date: Sun, 18 Feb 2024 14:57:08 +0200
Subject: [PATCH 03/20] Gradient using reanimated

---
 .../components/gradient/AnimatedGradient.tsx  | 31 ++++++++++++-------
 1 file changed, 19 insertions(+), 12 deletions(-)
 rename demo/src/screens/Gradient.tsx => src/components/gradient/AnimatedGradient.tsx (69%)

diff --git a/demo/src/screens/Gradient.tsx b/src/components/gradient/AnimatedGradient.tsx
similarity index 69%
rename from demo/src/screens/Gradient.tsx
rename to src/components/gradient/AnimatedGradient.tsx
index 04071ba81d..461f181e40 100644
--- a/demo/src/screens/Gradient.tsx
+++ b/src/components/gradient/AnimatedGradient.tsx
@@ -1,7 +1,10 @@
 import React, {useMemo} from 'react';
-import {GradientTypes, View, Constants, Text} from 'react-native-ui-lib';
-import Animated, {SharedValue, useAnimatedStyle} from 'react-native-reanimated';
-import {StyleSheet} from 'react-native';
+import {GradientTypes} from './index';
+import View from '../view';
+import Constants from '../../commons/Constants';
+import Colors from '../../style/colors';
+import Animated, {SharedValue, useAnimatedStyle, isSharedValue} from 'react-native-reanimated';
+import {StyleSheet, StyleProp, ViewStyle} from 'react-native';
 import tinycolor from 'tinycolor2';
 
 const toHSLStringWorklet = (hsla: tinycolor.ColorFormats.HSLA | tinycolor.ColorFormats.HSL) => {
@@ -12,21 +15,20 @@ const toHSLStringWorklet = (hsla: tinycolor.ColorFormats.HSLA | tinycolor.ColorF
   return `hsl(${hsla.h}, ${Math.round(hsla.s * 100)}%, ${Math.round(hsla.l * 100)}%)`;
 };
 
-
 interface GradientStepProps {
-  color: SharedValue<tinycolor.ColorFormats.HSLA>;
+  color?: SharedValue<tinycolor.ColorFormats.HSLA>;
   index: number;
   type?: GradientTypes | `${GradientTypes}`;
   numberOfSteps: number;
 }
 
 const AnimatedGradientStep = (props: GradientStepProps) => {
-  const {color, type, index, numberOfSteps} = props;
+  const {color = tinycolor(Colors.white).toHsl(), type, index, numberOfSteps} = props;
   const maximum = type === GradientTypes.HUE ? 359 : 1;
   const i = (index * maximum) / numberOfSteps;
 
   const animatedStepStyle = useAnimatedStyle(() => {
-    const hslColor = color.value;
+    const hslColor = isSharedValue<tinycolor.ColorFormats.HSLA>(color) ? color.value : color;
     let backgroundColor;
     switch (type) {
       case GradientTypes.HUE:
@@ -41,7 +43,6 @@ const AnimatedGradientStep = (props: GradientStepProps) => {
       default:
         backgroundColor = toHSLStringWorklet({...hslColor, a: i});
     }
-    // console.log(`Nitzan - backgroundColor`, backgroundColor);
     return {
       backgroundColor
     };
@@ -50,22 +51,28 @@ const AnimatedGradientStep = (props: GradientStepProps) => {
 };
 
 export interface GradientProps {
-  color: SharedValue<tinycolor.ColorFormats.HSLA>;
+  color?: SharedValue<tinycolor.ColorFormats.HSLA>;
   type?: GradientTypes | `${GradientTypes}`;
   numberOfSteps: number;
+  style?: StyleProp<ViewStyle>;
 }
 
 const Gradient = (props: GradientProps) => {
-  const {color, type, numberOfSteps} = props;
+  const {color, type, numberOfSteps, style} = props;
   const rows = [...Array(numberOfSteps).keys()].map(index => {
     return (
-      // <Text key={index}>Hello</Text>
       <AnimatedGradientStep color={color} type={type} index={index} numberOfSteps={numberOfSteps} key={index}/>
     );
   });
-  return <View style={[styles.container]}>{rows}</View>;
+  const containerStyle = useMemo(() => {
+    return [styles.container, style];
+  }, [style]);
+
+  return <View style={containerStyle}>{rows}</View>;
 };
 
+Gradient.types = GradientTypes;
+
 export default Gradient;
 
 const styles = StyleSheet.create({

From 10fec7f0da2ae3b2170044c5357503e86fd59855 Mon Sep 17 00:00:00 2001
From: Nitzan Yizhar <nitzany@wix.com>
Date: Sun, 18 Feb 2024 15:01:32 +0200
Subject: [PATCH 04/20] minor change to animated gradient

---
 src/components/gradient/AnimatedGradient.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/gradient/AnimatedGradient.tsx b/src/components/gradient/AnimatedGradient.tsx
index 461f181e40..e0b92dfc1d 100644
--- a/src/components/gradient/AnimatedGradient.tsx
+++ b/src/components/gradient/AnimatedGradient.tsx
@@ -59,11 +59,13 @@ export interface GradientProps {
 
 const Gradient = (props: GradientProps) => {
   const {color, type, numberOfSteps, style} = props;
-  const rows = [...Array(numberOfSteps).keys()].map(index => {
-    return (
+  const rows = Array(numberOfSteps);
+  for (let index = 0; index < numberOfSteps; index++) {
+    rows[index] = (
       <AnimatedGradientStep color={color} type={type} index={index} numberOfSteps={numberOfSteps} key={index}/>
     );
-  });
+  }
+  
   const containerStyle = useMemo(() => {
     return [styles.container, style];
   }, [style]);

From 122b4a8940c8605054cd08c06bfb2c2be02b2d05 Mon Sep 17 00:00:00 2001
From: Nitzan Yizhar <nitzany@wix.com>
Date: Mon, 19 Feb 2024 15:57:23 +0200
Subject: [PATCH 05/20] moved colorpicker to new location

---
 .../colorPicker/ColorPickerContext.tsx        | 51 -----------
 .../context/ColorPickerContext.tsx            | 85 +++++++++++++++++++
 2 files changed, 85 insertions(+), 51 deletions(-)
 delete mode 100644 src/components/colorPicker/ColorPickerContext.tsx
 create mode 100644 src/components/colorPicker/context/ColorPickerContext.tsx

diff --git a/src/components/colorPicker/ColorPickerContext.tsx b/src/components/colorPicker/ColorPickerContext.tsx
deleted file mode 100644
index 08bcc540bf..0000000000
--- a/src/components/colorPicker/ColorPickerContext.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import React, {PropsWithChildren, createContext, useCallback, useEffect, useMemo} from 'react';
-import {SharedValue, useSharedValue} from 'react-native-reanimated';
-import type {ColorFormats} from 'tinycolor2';
-import Slider from '../slider';
-import GradientSlider, {GradientSliderTypes} from '../slider/GradientSlider';
-
-type HSL = ColorFormats.HSL;
-type SharedColorContextType = {
-  value: SharedValue<HSL>;
-  reset: () => void;
-}
-
-export const ColorPickerContext = createContext<SharedColorContextType>({} as SharedColorContextType);
-
-interface ColorPickerContextProviderProps<T> extends PropsWithChildren {
-  initialValue?: T;
-}
-
-const DEFAULT_VALUE = {h: 0, s: 0, l: 0};
-
-const ColorPickerContextProvider = (props: ColorPickerContextProviderProps<HSL>) => {
-  const {initialValue, children} = props;
-  const colorValue = useSharedValue<HSL>(initialValue ?? DEFAULT_VALUE);
-
-  useEffect(() => {
-    colorValue.value = initialValue ?? DEFAULT_VALUE;
-  }, [colorValue, initialValue]);
-
-  const reset = useCallback(() => {
-    colorValue.value = DEFAULT_VALUE;
-  }, [colorValue]);
-
-  const providerValue = useMemo(() => {
-    return {
-      value: colorValue,
-      reset
-    };
-  }, [colorValue, reset]);
-
-  return <ColorPickerContext.Provider value={providerValue}>{children}</ColorPickerContext.Provider>;
-};
-
-const MyComponent = () => {
-  return (
-    <ColorPickerContextProvider>
-      <GradientSlider type={GradientSlider.types.HUE}/>
-    </ColorPickerContextProvider>
-  );
-};
-
-export default MyComponent;
diff --git a/src/components/colorPicker/context/ColorPickerContext.tsx b/src/components/colorPicker/context/ColorPickerContext.tsx
new file mode 100644
index 0000000000..d087b50ad8
--- /dev/null
+++ b/src/components/colorPicker/context/ColorPickerContext.tsx
@@ -0,0 +1,85 @@
+import React, {PropsWithChildren, createContext, useCallback, useMemo} from 'react';
+import {SharedValue, runOnJS, useAnimatedReaction, useSharedValue, useWorkletCallback} from 'react-native-reanimated';
+import type {ColorFormats} from 'tinycolor2';
+import {getValidColorString, hslToHex} from '../ColorPickerPresenter';
+
+type HSLA = ColorFormats.HSLA;
+export type SharedColorContextType = {
+  value: SharedValue<HSLA>;
+  hex: SharedValue<string | undefined>;
+  isValid: SharedValue<boolean>;
+  updateAlpha: (a: number) => void;
+  updateHue: (h: number) => void;
+  updateSaturation: (s: number) => void;
+  updateLightness: (l: number) => void;
+  reset: () => void;
+};
+ 
+export const ColorPickerContext = createContext<SharedColorContextType | null>(null);
+
+interface ColorPickerContextProviderProps<T> extends PropsWithChildren {
+  color: T;
+}
+
+const DEFAULT_VALUE = {h: 0, s: 0, l: 0, a: 0};
+
+export const ColorPickerContextProvider = (props: ColorPickerContextProviderProps<SharedValue<HSLA>>) => {
+  const {color, children} = props;
+  // const color = useSharedValue<HSLA>(initialValue ?? DEFAULT_VALUE);
+
+  const reset = useCallback(() => {
+    color.value = DEFAULT_VALUE;
+  }, [color]);
+
+  const updateAlpha = useWorkletCallback((a: number) => {
+    'worklet';
+    color.value = {...color.value, a};
+  },
+  [color]);
+
+  const updateHue = useWorkletCallback((h: number) => {
+    'worklet';
+    color.value = {...color.value, h};
+  },
+  [color]);
+  const updateLightness = useWorkletCallback((l: number) => {
+    'worklet';
+    color.value = {...color.value, l};
+  },
+  [color]);
+  const updateSaturation = useWorkletCallback((s: number) => {
+    'worklet';
+    color.value = {...color.value, s};
+  },
+  [color]);
+
+  const hex = useSharedValue<string | undefined>(undefined);
+  const isValid = useSharedValue<boolean>(false);
+
+  useAnimatedReaction(() => {
+    const {h, s, l} = color.value;
+    return getValidColorString(hslToHex({h, s: s * 100, l: l * 100}));
+  },
+  (current, prev) => {
+    if (current.hex !== prev?.hex) {
+      hex.value = current.hex?.toUpperCase();
+    }
+    if (current.valid !== prev?.valid) {
+      isValid.value = current.valid;
+    }
+  });
+
+  const providerValue = useMemo(() => {
+    return {
+      value: color,
+      hex,
+      isValid,
+      updateAlpha,
+      updateHue,
+      updateLightness,
+      updateSaturation,
+      reset
+    };
+  }, [color, reset, updateAlpha, updateHue, updateLightness, updateSaturation, hex, isValid]);
+  return <ColorPickerContext.Provider value={providerValue}>{children}</ColorPickerContext.Provider>;
+};

From 3b36c133e9d382fb1136ca8cc5fb774cf08c70e2 Mon Sep 17 00:00:00 2001
From: Nitzan Yizhar <nitzany@wix.com>
Date: Mon, 19 Feb 2024 16:03:29 +0200
Subject: [PATCH 06/20] Dialog to use new context and reanimated

---
 .../colorPicker/ColorPickerDialog.tsx         | 104 +++++++-----------
 1 file changed, 40 insertions(+), 64 deletions(-)

diff --git a/src/components/colorPicker/ColorPickerDialog.tsx b/src/components/colorPicker/ColorPickerDialog.tsx
index 926498459a..0d390ad2fd 100644
--- a/src/components/colorPicker/ColorPickerDialog.tsx
+++ b/src/components/colorPicker/ColorPickerDialog.tsx
@@ -1,14 +1,16 @@
-import _ from 'lodash';
 import React, {useCallback, useEffect, useState} from 'react';
 import {LayoutAnimation, StyleSheet, Keyboard, StyleProp, ViewStyle} from 'react-native';
+import {useSharedValue} from 'react-native-reanimated';
+import tinycolor from 'tinycolor2';
 import {Constants, asBaseComponent} from '../../commons/new';
 import {Colors} from '../../style';
 import {ModalProps} from '../../components/modal';
 import Dialog, {DialogProps} from '../../incubator/Dialog';
-import {getColorValue, getValidColorString, getTextColor, BORDER_RADIUS, HSLColor} from './ColorPickerPresenter';
+import {getTextColor, BORDER_RADIUS} from './ColorPickerPresenter';
 import Header from './ColorPickerDialogHeader';
 import Preview from './ColorPickerPreview';
 import Sliders from './ColorPickerDialogSliders';
+import {ColorPickerContextProvider} from './context/ColorPickerContext';
 
 export interface ColorPickerDialogProps extends DialogProps {
   /**
@@ -68,9 +70,10 @@ const ColorPickerDialog = (props: ColorPickerDialogProps) => {
   } = props;
 
   const [keyboardHeight, setKeyboardHeight] = useState(KEYBOARD_HEIGHT);
-  const [color, setColor] = useState(Colors.getHSL(initialColor));
-  const [text, setText] = useState(getColorValue(initialColor));
-  const [valid, setValid] = useState(getValidColorString(text).valid);
+  // const [color, setColor] = useState(Colors.getHSL(initialColor));
+  // const [text, setText] = useState(getColorValue(initialColor));
+
+  const color = useSharedValue<tinycolor.ColorFormats.HSLA>(tinycolor(initialColor).toHsl());
 
   const changeHeight = (height: number) => {
     setKeyboardHeight(prevKeyboardHeight => {
@@ -107,13 +110,7 @@ const ColorPickerDialog = (props: ColorPickerDialogProps) => {
   }, [keyboardDidShow, keyboardDidHide]);
 
   const resetValues = () => {
-    const color = Colors.getHSL(initialColor);
-    const text = getColorValue(initialColor);
-    const {valid} = getValidColorString(text);
-
-    setColor(color);
-    setText(text);
-    setValid(valid);
+    color.value = tinycolor(initialColor).toHsl();
   };
 
   const onDismiss = () => {
@@ -122,8 +119,7 @@ const ColorPickerDialog = (props: ColorPickerDialogProps) => {
   };
 
   const onDonePressed = () => {
-    const {hex} = getValidColorString(text);
-
+    const hex = tinycolor(color.value).toHexString();
     if (hex) {
       props.onSubmit?.(hex, getTextColor(hex));
       onDismiss();
@@ -133,58 +129,38 @@ const ColorPickerDialog = (props: ColorPickerDialogProps) => {
     changeHeight(0);
   };
 
-  const onChangeText = (value: string) => {
-    applyColor(value);
-  };
-
-  const applyColor = (text: string) => {
-    const {hex, valid} = getValidColorString(text);
-
-    if (hex) {
-      setColor(Colors.getHSL(hex));
-    }
-    setText(text);
-    setValid(valid);
-  };
-
-  const updateColor = useCallback((value: HSLColor) => {
-    setColor(value);
-    const hex = Colors.getHexString(value);
-    setText(_.toUpper(getColorValue(hex)));
-    setValid(true);
-  }, []);
   return (
-    <Dialog
-      visible={visible} //TODO: pass all Dialog props instead
-      width="100%"
-      bottom
-      centerH
-      onDismiss={onDismiss}
-      containerStyle={styles.dialog}
-      testID={`${testID}.dialog`}
-      modalProps={MODAL_PROPS}
-      {...dialogProps}
-    >
-      <Header
-        accessibilityLabels={accessibilityLabels}
-        valid={valid}
-        onDonePressed={onDonePressed}
-        testID={testID}
-        doneButtonColor={doneButtonColor}
+    <ColorPickerContextProvider color={color}>
+      <Dialog
+        visible={visible} //TODO: pass all Dialog props instead
+        width="100%"
+        bottom
+        centerH
         onDismiss={onDismiss}
-      />
-      <Preview
-        color={color}
-        text={text}
-        valid={valid}
-        accessibilityLabels={accessibilityLabels}
-        previewInputStyle={previewInputStyle}
-        testID={testID}
-        onFocus={onFocus}
-        onChangeText={onChangeText}
-      />
-      <Sliders keyboardHeight={keyboardHeight} color={color} onSliderValueChange={updateColor} migrate={migrate}/>
-    </Dialog>
+        containerStyle={styles.dialog}
+        testID={`${testID}.dialog`}
+        modalProps={MODAL_PROPS}
+        {...dialogProps}
+      >
+        <Header
+          accessibilityLabels={accessibilityLabels}
+          onDonePressed={onDonePressed}
+          testID={testID}
+          doneButtonColor={doneButtonColor}
+          onDismiss={onDismiss}
+        />
+        <Preview
+          accessibilityLabels={accessibilityLabels}
+          previewInputStyle={previewInputStyle}
+          testID={testID}
+          onFocus={onFocus}
+          onChangeText={(value: string) => {
+            color.value = tinycolor(value).toHsl();
+          }}
+        />
+        <Sliders keyboardHeight={keyboardHeight} migrate/>
+      </Dialog>
+    </ColorPickerContextProvider>
   );
 };
 

From 5363cc95c8e719edebfdf36959b3911c72050c4d Mon Sep 17 00:00:00 2001
From: Nitzan Yizhar <nitzany@wix.com>
Date: Mon, 19 Feb 2024 16:04:10 +0200
Subject: [PATCH 07/20] header to use validity from context

---
 .../colorPicker/ColorPickerDialogHeader.tsx   | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/components/colorPicker/ColorPickerDialogHeader.tsx b/src/components/colorPicker/ColorPickerDialogHeader.tsx
index 3b0a550e0c..1d87bf606e 100644
--- a/src/components/colorPicker/ColorPickerDialogHeader.tsx
+++ b/src/components/colorPicker/ColorPickerDialogHeader.tsx
@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import React from 'react';
+import React, {useContext, useState} from 'react';
 import {StyleSheet} from 'react-native';
 
 import View from '../view';
@@ -8,15 +8,27 @@ import Assets from '../../assets';
 import {Colors} from '../../style';
 import {ColorPickerDialogProps} from './ColorPickerDialog';
 import {BORDER_RADIUS} from './ColorPickerPresenter';
+import {ColorPickerContext} from './context/ColorPickerContext';
+import {runOnJS, useAnimatedReaction} from 'react-native-reanimated';
 
 type HeaderProps = Pick<ColorPickerDialogProps, 'doneButtonColor' | 'accessibilityLabels' | 'testID'> & {
-  valid: boolean;
   onDismiss: () => void;
-  onDonePressed: () => void;
+  onDonePressed: (hex: string) => void;
 };
 
 const Header = (props: HeaderProps) => {
-  const {onDismiss, accessibilityLabels, testID, doneButtonColor, valid, onDonePressed} = props;
+  const {onDismiss, accessibilityLabels, testID, doneButtonColor, onDonePressed} = props;
+  const [valid, setValid] = useState(false);
+  const colorPickerContext = useContext(ColorPickerContext);
+
+  useAnimatedReaction(() => {
+    return colorPickerContext?.isValid.value;
+  },
+  (currentValidity, prevValidity) => {
+    if (currentValidity !== prevValidity) {
+      runOnJS(setValid)(!!currentValidity);
+    }
+  });
 
   return (
     <View row spread bg-$backgroundDefault paddingH-20 style={styles.header}>

From 75b8fbfbca262bab2b397462079f04caabe9db8f Mon Sep 17 00:00:00 2001
From: Nitzan Yizhar <nitzany@wix.com>
Date: Mon, 19 Feb 2024 16:04:40 +0200
Subject: [PATCH 08/20] Sliders to take value from context if preset

---
 .../colorPicker/ColorPickerDialogSliders.tsx     | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/colorPicker/ColorPickerDialogSliders.tsx b/src/components/colorPicker/ColorPickerDialogSliders.tsx
index 335d89c691..a6c378637e 100644
--- a/src/components/colorPicker/ColorPickerDialogSliders.tsx
+++ b/src/components/colorPicker/ColorPickerDialogSliders.tsx
@@ -1,20 +1,23 @@
-import React from 'react';
+import React, {useContext} from 'react';
 import {StyleSheet} from 'react-native';
 import {Colors} from '../../style';
 import ColorSliderGroup from '../slider/ColorSliderGroup';
 import {HSLColor} from './ColorPickerPresenter';
 import {ColorPickerDialogProps} from './ColorPickerDialog';
+import {ColorPickerContext} from './context/ColorPickerContext';
 
 type SlidersProps = Pick<ColorPickerDialogProps, 'migrate'> & {
   keyboardHeight: number;
-  color: HSLColor;
-  onSliderValueChange: (value: HSLColor) => void;
 };
 
 const Sliders = (props: SlidersProps) => {
-  const {keyboardHeight, color, migrate, onSliderValueChange} = props;
-  const colorValue = color.a === 0 ? Colors.getHSL(Colors.$backgroundInverted) : color;
-  
+  const {keyboardHeight, migrate} = props;
+  const colorPickerContext = useContext(ColorPickerContext);
+  const colorValue =
+    !colorPickerContext || colorPickerContext.value.value.a === 0
+      ? Colors.getHSL(Colors.$backgroundInverted)
+      : colorPickerContext?.value.value;
+
   return (
     <ColorSliderGroup<HSLColor>
       initialColor={colorValue}
@@ -24,7 +27,6 @@ const Sliders = (props: SlidersProps) => {
       labelsStyle={styles.label}
       accessible={false}
       migrate={migrate}
-      onValueChange={onSliderValueChange}
     />
   );
 };

From 30cecea25d553de043ddc92d5bb3a9fc472c315f Mon Sep 17 00:00:00 2001
From: Nitzan Yizhar <nitzany@wix.com>
Date: Mon, 19 Feb 2024 16:05:27 +0200
Subject: [PATCH 09/20] Made some functions into worklet functions and added
 functions

---
 .../colorPicker/ColorPickerPresenter.ts       | 31 +++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/components/colorPicker/ColorPickerPresenter.ts b/src/components/colorPicker/ColorPickerPresenter.ts
index 226fff1fd6..3678d580ca 100644
--- a/src/components/colorPicker/ColorPickerPresenter.ts
+++ b/src/components/colorPicker/ColorPickerPresenter.ts
@@ -10,8 +10,14 @@ export function getColorValue(color?: string) {
   }
   return color.replace('#', '');
 }
+
+export function isTransparent(color?: string) {
+  'worklet';
+  return color && color.toUpperCase() === 'transparent'.toUpperCase();
+}
 export function getHexColor(text: string) {
-  if (!Colors.isTransparent(text)) {
+  'worklet';
+  if (!isTransparent(text)) {
     const trimmed = text.replace(/\s+/g, '');
     const hex = `#${trimmed}`;
     return hex;
@@ -19,17 +25,38 @@ export function getHexColor(text: string) {
   return text;
 }
 
+export function isValidHex(string: string) {
+  'worklet';
+  return /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(string);
+}
+
 export function getValidColorString(text?: string) {
+  'worklet';
   if (text) {
     const hex = getHexColor(text);
 
-    if (Colors.isValidHex(hex)) {
+    if (isValidHex(hex)) {
       return {hex, valid: true};
     }
   }
   return {undefined, valid: false};
 }
 
+export function hslToHex(hsl: {h: number; s: number; l: number}) {
+  'worklet';
+  let {h, s, l} = hsl;
+  l /= 100;
+  const a = (s * Math.min(l, 1 - l)) / 100;
+  const f = (n: number) => {
+    const k = (n + h / 30) % 12;
+    const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+    return Math.round(255 * color)
+      .toString(16)
+      .padStart(2, '0'); // convert to Hex and prefix "0" if needed
+  };
+  return `${f(0)}${f(8)}${f(4)}`;
+}
+
 export function getHexString(color: HSLColor) {
   return _.toUpper(Colors.getHexString(color));
 }

From 90b64d328c7f307920e51a360523888fe1c15661 Mon Sep 17 00:00:00 2001
From: Nitzan Yizhar <nitzany@wix.com>
Date: Mon, 19 Feb 2024 16:06:09 +0200
Subject: [PATCH 10/20] Changed preview to use reanimated values

---
 .../colorPicker/ColorPickerPreview.tsx        | 103 +++++++++++-------
 1 file changed, 62 insertions(+), 41 deletions(-)

diff --git a/src/components/colorPicker/ColorPickerPreview.tsx b/src/components/colorPicker/ColorPickerPreview.tsx
index e67f19e32f..2b4c55bf76 100644
--- a/src/components/colorPicker/ColorPickerPreview.tsx
+++ b/src/components/colorPicker/ColorPickerPreview.tsx
@@ -1,64 +1,84 @@
-import React, {useRef} from 'react';
+import React, {useContext, useEffect, useRef} from 'react';
 import {StyleSheet, TextInput, PixelRatio, I18nManager} from 'react-native';
 
 import {Colors, Typography} from '../../style';
 import {ColorPickerDialogProps} from './ColorPickerDialog';
-import {BORDER_RADIUS, HSLColor, getColorValue, getHexString, getTextColor} from './ColorPickerPresenter';
+import {BORDER_RADIUS, getTextColor} from './ColorPickerPresenter';
+import {ColorPickerContext} from './context/ColorPickerContext';
 import View from '../view';
 import TouchableOpacity from '../touchableOpacity';
 import Text from '../text';
 import {Constants} from '../../commons/new';
+import Animated, {useAnimatedStyle, useAnimatedProps, useAnimatedRef, useDerivedValue} from 'react-native-reanimated';
 
 type PreviewProps = Pick<ColorPickerDialogProps, 'accessibilityLabels' | 'previewInputStyle' | 'testID'> & {
-  color: HSLColor;
-  text: ReturnType<typeof getColorValue>;
-  valid: boolean;
   onChangeText: (value: string) => void;
   onFocus: () => void;
 };
-const Preview = (props: PreviewProps) => {
-  const {color, text, onChangeText, previewInputStyle, onFocus, accessibilityLabels, testID} = props;
-  const textInput = useRef<TextInput>(null);
 
-  const hex = getHexString(color);
-  const textColor = getTextColor(hex);
+Animated.addWhitelistedNativeProps({text: true, selectionColor: true});
+
+const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
+
+const Preview = (props: PreviewProps) => {
+  const {onChangeText, previewInputStyle, onFocus, accessibilityLabels, testID} = props;
+  const colorPickerContext = useContext(ColorPickerContext);
+  const {grey10, white} = Colors;
   const fontScale = PixelRatio.getFontScale();
-  const value = Colors.isTransparent(text) ? '000000' : text;
+
+  const previewBackgroundColor = useAnimatedStyle(() => {
+    return {
+      backgroundColor: colorPickerContext?.hex.value || '#ffffff'
+    };
+  });
+
+  const textColor = useDerivedValue(() => {
+    const l = colorPickerContext?.value.value.l;
+    return l && l > 0.45 ? grey10 : white;
+  });
+
+  const textStyle = useAnimatedStyle(() => {
+    const value = colorPickerContext?.hex.value;
+    return {
+      color: textColor.value,
+      width: value ? value.length * 16.5 * fontScale : undefined
+    };
+  });
+
+  const underlineStyle = useAnimatedStyle(() => {
+    return {
+      backgroundColor: textColor.value
+    };
+  });
+
+  const animatedProps = useAnimatedProps(() => {
+    return {
+      text: colorPickerContext?.hex.value?.toUpperCase()
+      // selectionColor: textColor.value
+    } as any;
+  }, [colorPickerContext]);
+
+  const textInput = useAnimatedRef<TextInput>();
 
   return (
-    <View style={[styles.preview, {backgroundColor: hex}]}>
-      <TouchableOpacity center onPress={textInput.current?.focus} activeOpacity={1} accessible={false}>
+    <Animated.View style={[styles.preview, previewBackgroundColor]}>
+      <TouchableOpacity
+        center
+        onPress={() => {
+          textInput.current?.focus();
+        }}
+        activeOpacity={1}
+        accessible={false}
+      >
         <View style={styles.inputContainer}>
-          <Text
-            text60
-            white
-            marginL-13
-            marginR-5={Constants.isIOS}
-            style={{
-              color: textColor,
-              transform: [{scaleX: I18nManager.isRTL ? -1 : 1}]
-            }}
-            accessible={false}
-            recorderTag={'unmask'}
-          >
-            #
-          </Text>
-          <TextInput
+          <AnimatedTextInput
+            // @ts-expect-error
             ref={textInput}
-            value={value}
+            value={colorPickerContext?.hex.value}
             maxLength={6}
             numberOfLines={1}
             onChangeText={onChangeText}
-            style={[
-              styles.input,
-              {
-                color: textColor,
-                width: value ? (value.length + 1) * 16.5 * fontScale : undefined
-              },
-              Constants.isAndroid && {padding: 0},
-              previewInputStyle
-            ]}
-            selectionColor={textColor}
+            style={[styles.input, textStyle, Constants.isAndroid && {padding: 0}, previewInputStyle]}
             underlineColorAndroid="transparent"
             autoCorrect={false}
             autoComplete={'off'}
@@ -69,11 +89,12 @@ const Preview = (props: PreviewProps) => {
             onFocus={onFocus}
             accessibilityLabel={accessibilityLabels?.input}
             testID={`${testID}.dialog.textInput`}
+            {...{animatedProps}}
           />
         </View>
-        <View style={[{backgroundColor: textColor}, styles.underline]}/>
+        <Animated.View style={[underlineStyle, styles.underline]}/>
       </TouchableOpacity>
-    </View>
+    </Animated.View>
   );
 };
 

From 2c3c3c73b9e752478e50f324ab1fa5ded320fc85 Mon Sep 17 00:00:00 2001
From: Nitzan Yizhar <nitzany@wix.com>
Date: Mon, 19 Feb 2024 17:17:45 +0200
Subject: [PATCH 11/20] Added focus change

---
 .../colorPicker/ColorPickerPreview.tsx        | 143 +++++++++++++++---
 1 file changed, 120 insertions(+), 23 deletions(-)

diff --git a/src/components/colorPicker/ColorPickerPreview.tsx b/src/components/colorPicker/ColorPickerPreview.tsx
index 2b4c55bf76..c8e848201a 100644
--- a/src/components/colorPicker/ColorPickerPreview.tsx
+++ b/src/components/colorPicker/ColorPickerPreview.tsx
@@ -1,15 +1,15 @@
-import React, {useContext, useEffect, useRef} from 'react';
+import React, {useContext, useState, useRef} from 'react';
 import {StyleSheet, TextInput, PixelRatio, I18nManager} from 'react-native';
 
 import {Colors, Typography} from '../../style';
 import {ColorPickerDialogProps} from './ColorPickerDialog';
-import {BORDER_RADIUS, getTextColor} from './ColorPickerPresenter';
+import {BORDER_RADIUS} from './ColorPickerPresenter';
 import {ColorPickerContext} from './context/ColorPickerContext';
 import View from '../view';
 import TouchableOpacity from '../touchableOpacity';
-import Text from '../text';
 import {Constants} from '../../commons/new';
 import Animated, {useAnimatedStyle, useAnimatedProps, useAnimatedRef, useDerivedValue} from 'react-native-reanimated';
+import tinycolor from 'tinycolor2';
 
 type PreviewProps = Pick<ColorPickerDialogProps, 'accessibilityLabels' | 'previewInputStyle' | 'testID'> & {
   onChangeText: (value: string) => void;
@@ -21,10 +21,12 @@ Animated.addWhitelistedNativeProps({text: true, selectionColor: true});
 const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
 
 const Preview = (props: PreviewProps) => {
-  const {onChangeText, previewInputStyle, onFocus, accessibilityLabels, testID} = props;
+  const {previewInputStyle, onFocus, accessibilityLabels, testID} = props;
   const colorPickerContext = useContext(ColorPickerContext);
   const {grey10, white} = Colors;
   const fontScale = PixelRatio.getFontScale();
+  const [isFocused, setIsFocused] = useState(false);
+  const [hex, setHex] = useState<string | undefined>(colorPickerContext?.hex.value);
 
   const previewBackgroundColor = useAnimatedStyle(() => {
     return {
@@ -50,34 +52,130 @@ const Preview = (props: PreviewProps) => {
       backgroundColor: textColor.value
     };
   });
+  const textInput = useRef<TextInput>();
 
   const animatedProps = useAnimatedProps(() => {
     return {
-      text: colorPickerContext?.hex.value?.toUpperCase()
+      text: colorPickerContext?.hex.value
       // selectionColor: textColor.value
     } as any;
   }, [colorPickerContext]);
 
-  const textInput = useAnimatedRef<TextInput>();
+  const _onFocus = () => {
+    setIsFocused(true);
+    setHex(colorPickerContext?.hex.value);
+    // onFocus();
+    console.log(`Nitzan - textInput.current?.focus()`, textInput.current?.focus);
+    textInput.current?.focus();
+  };
+  const _onChangeText = (value: string) => {
+    if (isFocused) {
+      setHex(value || '#');
+    }
+  };
 
+  const _onBlur = () => {
+    console.log(`Nitzan - bbb`);
+    if (colorPickerContext?.value) {
+      colorPickerContext.setColor(tinycolor(hex).toHsl());
+    }
+    setIsFocused(false);
+    setHex(undefined);
+  };
+
+  const TextInputRenderFunction = () => {
+    if (!isFocused) {
+      return (
+        <AnimatedTextInput
+          // // @ts-expect-error
+          // ref={textInput}
+          value={colorPickerContext?.hex.value}
+          maxLength={7}
+          numberOfLines={1}
+          // onChangeText={_onChangeText}
+          style={[styles.input, textStyle, Constants.isAndroid && {padding: 0}, previewInputStyle]}
+          underlineColorAndroid="transparent"
+          autoCorrect={false}
+          autoComplete={'off'}
+          autoCapitalize={'characters'}
+          // keyboardType={'numbers-and-punctuation'} // doesn't work with `autoCapitalize`
+          returnKeyType={'done'}
+          enablesReturnKeyAutomatically
+          accessibilityLabel={accessibilityLabels?.input}
+          testID={`${testID}.dialog.textInput`}
+          editable={false}
+          {...{animatedProps}}
+        />
+      );
+    } else {
+      return (
+        <AnimatedTextInput
+          // @ts-expect-error
+          ref={textInput}
+          value={hex}
+          maxLength={7}
+          numberOfLines={1}
+          onChangeText={_onChangeText}
+          style={[styles.input, textStyle, Constants.isAndroid && {padding: 0}, previewInputStyle]}
+          underlineColorAndroid="transparent"
+          autoCorrect={false}
+          autoComplete={'off'}
+          autoCapitalize={'characters'}
+          // keyboardType={'numbers-and-punctuation'} // doesn't work with `autoCapitalize`
+          returnKeyType={'done'}
+          enablesReturnKeyAutomatically
+          accessibilityLabel={accessibilityLabels?.input}
+          testID={`${testID}.dialog.textInput`}
+          onBlur={_onBlur}
+        />
+      );
+    }
+  };
+
+  console.log(`Nitzan - isFocused`, isFocused);
   return (
     <Animated.View style={[styles.preview, previewBackgroundColor]}>
-      <TouchableOpacity
-        center
-        onPress={() => {
-          textInput.current?.focus();
-        }}
-        activeOpacity={1}
-        accessible={false}
-      >
-        <View style={styles.inputContainer}>
+      <View style={styles.inputContainer}>
+        {!isFocused ? (
+          <TouchableOpacity
+            center
+            bg-red10
+            onPress={() => {
+              _onFocus();
+            }}
+            activeOpacity={1}
+            accessible={false}
+          >
+            <AnimatedTextInput
+              // @ts-expect-error
+              // ref={textInput}
+              value={colorPickerContext?.hex.value}
+              maxLength={7}
+              numberOfLines={1}
+              // onChangeText={_onChangeText}
+              style={[styles.input, textStyle, Constants.isAndroid && {padding: 0}, previewInputStyle]}
+              underlineColorAndroid="transparent"
+              autoCorrect={false}
+              autoComplete={'off'}
+              autoCapitalize={'characters'}
+              // keyboardType={'numbers-and-punctuation'} // doesn't work with `autoCapitalize`
+              returnKeyType={'done'}
+              enablesReturnKeyAutomatically
+              accessibilityLabel={accessibilityLabels?.input}
+              testID={`${testID}.dialog.textInput`}
+              editable={false}
+              pointerEvents={'none'}
+              {...{animatedProps}}
+            />
+          </TouchableOpacity>
+        ) : (
           <AnimatedTextInput
             // @ts-expect-error
             ref={textInput}
-            value={colorPickerContext?.hex.value}
-            maxLength={6}
+            value={hex}
+            maxLength={7}
             numberOfLines={1}
-            onChangeText={onChangeText}
+            onChangeText={_onChangeText}
             style={[styles.input, textStyle, Constants.isAndroid && {padding: 0}, previewInputStyle]}
             underlineColorAndroid="transparent"
             autoCorrect={false}
@@ -86,14 +184,13 @@ const Preview = (props: PreviewProps) => {
             // keyboardType={'numbers-and-punctuation'} // doesn't work with `autoCapitalize`
             returnKeyType={'done'}
             enablesReturnKeyAutomatically
-            onFocus={onFocus}
             accessibilityLabel={accessibilityLabels?.input}
             testID={`${testID}.dialog.textInput`}
-            {...{animatedProps}}
+            onBlur={_onBlur}
           />
-        </View>
-        <Animated.View style={[underlineStyle, styles.underline]}/>
-      </TouchableOpacity>
+        )}
+      </View>
+      <Animated.View style={[underlineStyle, styles.underline]}/>
     </Animated.View>
   );
 };

From 594c5194fe1d49afba2641fc5f33b5100f34cc37 Mon Sep 17 00:00:00 2001
From: Nitzan Yizhar <nitzany@wix.com>
Date: Mon, 19 Feb 2024 17:18:07 +0200
Subject: [PATCH 12/20] Added updateColorFunction

---
 .../colorPicker/context/ColorPickerContext.tsx           | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/colorPicker/context/ColorPickerContext.tsx b/src/components/colorPicker/context/ColorPickerContext.tsx
index d087b50ad8..37dc8a648f 100644
--- a/src/components/colorPicker/context/ColorPickerContext.tsx
+++ b/src/components/colorPicker/context/ColorPickerContext.tsx
@@ -8,6 +8,7 @@ export type SharedColorContextType = {
   value: SharedValue<HSLA>;
   hex: SharedValue<string | undefined>;
   isValid: SharedValue<boolean>;
+  setColor: (hsla: HSLA) => void;
   updateAlpha: (a: number) => void;
   updateHue: (h: number) => void;
   updateSaturation: (s: number) => void;
@@ -65,21 +66,27 @@ export const ColorPickerContextProvider = (props: ColorPickerContextProviderProp
       hex.value = current.hex?.toUpperCase();
     }
     if (current.valid !== prev?.valid) {
+      console.log(`Nitzan - new valid`, current.valid);
       isValid.value = current.valid;
     }
   });
 
+  const setColor = useWorkletCallback((hsla: HSLA) => {
+    color.value = hsla;
+  });
+
   const providerValue = useMemo(() => {
     return {
       value: color,
       hex,
       isValid,
+      setColor,
       updateAlpha,
       updateHue,
       updateLightness,
       updateSaturation,
       reset
     };
-  }, [color, reset, updateAlpha, updateHue, updateLightness, updateSaturation, hex, isValid]);
+  }, [color, reset, updateAlpha, updateHue, updateLightness, updateSaturation, hex, isValid, setColor]);
   return <ColorPickerContext.Provider value={providerValue}>{children}</ColorPickerContext.Provider>;
 };

From 3cb3f37ddf61162232502535580fec356ad9b208 Mon Sep 17 00:00:00 2001
From: Nitzan Yizhar <nitzany@wix.com>
Date: Mon, 19 Feb 2024 17:18:42 +0200
Subject: [PATCH 13/20] Added slider to use workletHandlers

---
 src/incubator/Slider/index.tsx | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/incubator/Slider/index.tsx b/src/incubator/Slider/index.tsx
index 562dab4bca..85a8db941e 100644
--- a/src/incubator/Slider/index.tsx
+++ b/src/incubator/Slider/index.tsx
@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import React, {ReactElement, useImperativeHandle, useCallback, useMemo, useEffect} from 'react';
+import React, {ReactElement, useContext, useImperativeHandle, useCallback, useMemo, useEffect} from 'react';
 import {StyleSheet, AccessibilityRole, StyleProp, ViewStyle, GestureResponderEvent, LayoutChangeEvent, ViewProps, AccessibilityProps} from 'react-native';
 import {useSharedValue, useAnimatedStyle, runOnJS, useAnimatedReaction, withTiming} from 'react-native-reanimated';
 import {forwardRef, ForwardRefInjectedProps, Constants} from '../../commons/new';
@@ -139,6 +139,8 @@ export interface SliderProps extends AccessibilityProps {
    * Whether to use the new Slider implementation using Reanimated
    */
   migrate?: boolean;
+
+  useWorkletHandlers?: boolean;
 }
 
 type Props = SliderProps & ForwardRefInjectedProps<SliderRef>;
@@ -188,9 +190,11 @@ const Slider = React.memo((props: Props) => {
     useGap = true,
     accessible = true,
     testID,
-    enableThumbShadow = true
+    enableThumbShadow = true,
+    useWorkletHandlers
   } = themeProps;
 
+
   const accessibilityProps = useMemo(() => {
     if (accessible) {
       return {
@@ -284,8 +288,16 @@ const Slider = React.memo((props: Props) => {
           minimumValue,
           maximumValue,
           stepXValue.value);
+        if (useWorkletHandlers) {
+          onRangeChange?.({min: value, max: maxValue});
+          return;
+        }
         runOnJS(onRangeChangeThrottled)(value, maxValue);
       } else if (prevOffset) { // don't invoke onChange when setting the slider
+        if (useWorkletHandlers) {
+          onValueChange?.(value);
+          return;
+        }
         runOnJS(onValueChangeThrottled)(value);
       }
     }
@@ -301,6 +313,10 @@ const Slider = React.memo((props: Props) => {
       minimumValue,
       maximumValue,
       stepXValue.value);
+    if (useWorkletHandlers) {
+      onRangeChange?.({min: minValue, max: maxValue});
+      return;
+    }
     runOnJS(onRangeChangeThrottled)(minValue, maxValue);
   });
 

From b627147170b86f07a4f94702e5aff0615c813e5c Mon Sep 17 00:00:00 2001
From: Nitzan Yizhar <nitzany@wix.com>
Date: Mon, 19 Feb 2024 17:19:07 +0200
Subject: [PATCH 14/20] changes to animated gradient

---
 src/components/gradient/AnimatedGradient.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/gradient/AnimatedGradient.tsx b/src/components/gradient/AnimatedGradient.tsx
index e0b92dfc1d..3dfbcafae6 100644
--- a/src/components/gradient/AnimatedGradient.tsx
+++ b/src/components/gradient/AnimatedGradient.tsx
@@ -50,14 +50,14 @@ const AnimatedGradientStep = (props: GradientStepProps) => {
   return <Animated.View key={i} style={[animatedStepStyle, styles.row]}/>;
 };
 
-export interface GradientProps {
-  color?: SharedValue<tinycolor.ColorFormats.HSLA>;
+export interface AnimatedGradientProps {
+  color?: Readonly<SharedValue<tinycolor.ColorFormats.HSLA>>;
   type?: GradientTypes | `${GradientTypes}`;
   numberOfSteps: number;
   style?: StyleProp<ViewStyle>;
 }
 
-const Gradient = (props: GradientProps) => {
+const AnimatedGradient = (props: AnimatedGradientProps) => {
   const {color, type, numberOfSteps, style} = props;
   const rows = Array(numberOfSteps);
   for (let index = 0; index < numberOfSteps; index++) {
@@ -73,9 +73,9 @@ const Gradient = (props: GradientProps) => {
   return <View style={containerStyle}>{rows}</View>;
 };
 
-Gradient.types = GradientTypes;
+AnimatedGradient.types = GradientTypes;
 
-export default Gradient;
+export default AnimatedGradient;
 
 const styles = StyleSheet.create({
   row: {

From 23e020e3314f0830ad441a0f3439472d2a1c14a0 Mon Sep 17 00:00:00 2001
From: Nitzan Yizhar <nitzany@wix.com>
Date: Mon, 19 Feb 2024 17:19:34 +0200
Subject: [PATCH 15/20] gradient slider to render condtionaly

---
 src/components/slider/GradientSlider.tsx | 110 ++++++++++++-----------
 1 file changed, 60 insertions(+), 50 deletions(-)

diff --git a/src/components/slider/GradientSlider.tsx b/src/components/slider/GradientSlider.tsx
index 0c4d4983fb..ff975c0def 100644
--- a/src/components/slider/GradientSlider.tsx
+++ b/src/components/slider/GradientSlider.tsx
@@ -5,15 +5,14 @@ import {ComponentStatics} from '../../typings/common';
 import {Colors} from '../../style';
 import {Slider as NewSlider} from '../../incubator';
 import Gradient from '../gradient';
+import AnimatedGradient from '../gradient/AnimatedGradient';
 import {GradientSliderProps, GradientSliderTypes, HSLA} from './types';
 import Slider from './index';
-import {SliderContextProps} from './context/SliderContext';
-import asSliderGroupChild from './context/asSliderGroupChild';
-import {ColorPickerContext} from '../colorPicker/ColorPickerContext';
+import {ColorPickerContext} from '../colorPicker/context/ColorPickerContext';
+import {isSharedValue, useDerivedValue} from 'react-native-reanimated';
+import tinycolor from 'tinycolor2';
 
-type GradientSliderComponentProps<T> = {
-  sliderContext: SliderContextProps;
-} & GradientSliderProps<T>;
+type GradientSliderComponentProps<T> = GradientSliderProps<T>;
 
 type Props<T> = GradientSliderComponentProps<T> & ForwardRefInjectedProps;
 
@@ -27,7 +26,6 @@ const GradientSlider = <T extends string | HSLA = string>(props: Props<T>) => {
     type = GradientSliderTypes.DEFAULT,
     gradientSteps = 120,
     color: propsColors = Colors.$backgroundPrimaryHeavy,
-    sliderContext,
     onValueChange: _onValueChange,
     migrate,
     containerStyle,
@@ -42,44 +40,65 @@ const GradientSlider = <T extends string | HSLA = string>(props: Props<T>) => {
   }, [propsColors]);
   const [color, setColor] = useState(initialColor);
 
-  const colorPickerContext = useContext(ColorPickerContext);
-
-  console.log(`Nitzan - colorPickerContext.value`, colorPickerContext.value.value.h);
-
-
+  let colorPickerContext = useContext(ColorPickerContext);
+  //TODO: Remove after migration is done.
+  if (!migrate) {
+    colorPickerContext = null;
+  }
+  
   useEffect(() => {
     setColor(initialColor);
   }, [initialColor]);
 
-  const getColor = useCallback(() => {
-    return color || sliderContext.value;
-  }, [color, sliderContext.value]);
-
+  const animatedHueColor = useDerivedValue(() => {
+    if (colorPickerContext) {
+      return {
+        h: colorPickerContext.value.value.h,
+        s: 1,
+        l: 0.5,
+        a: 1
+      };
+    }
+    return {};
+  });
   const hueColor = useMemo(() => {
-    const color = getColor();
     return {
       h: color.h,
       s: 1,
       l: 0.5,
       a: 1
     };
-  }, [getColor]);
+  }, [color]);
 
   const renderDefaultGradient = useCallback(() => {
-    return <Gradient color={getColor()} numberOfSteps={gradientSteps}/>;
-  }, [getColor, gradientSteps]);
+    if (colorPickerContext) {
+      const {value} = colorPickerContext;
+      return <AnimatedGradient color={value} numberOfSteps={gradientSteps}/>;
+    }
+    return <Gradient color={color} numberOfSteps={gradientSteps}/>;
+  }, [gradientSteps, colorPickerContext, color]);
 
   const renderHueGradient = useCallback(() => {
     return <Gradient type={Gradient.types.HUE} numberOfSteps={gradientSteps}/>;
   }, [gradientSteps]);
 
   const renderLightnessGradient = useCallback(() => {
+    if (colorPickerContext && isSharedValue<tinycolor.ColorFormats.HSLA>(animatedHueColor)) {
+      return (
+        <AnimatedGradient type={Gradient.types.LIGHTNESS} color={animatedHueColor} numberOfSteps={gradientSteps}/>
+      );
+    }
     return <Gradient type={Gradient.types.LIGHTNESS} color={hueColor} numberOfSteps={gradientSteps}/>;
-  }, [hueColor, gradientSteps]);
+  }, [hueColor, gradientSteps, animatedHueColor, colorPickerContext]);
 
   const renderSaturationGradient = useCallback(() => {
+    if (colorPickerContext && isSharedValue<tinycolor.ColorFormats.HSLA>(animatedHueColor)) {
+      return (
+        <AnimatedGradient type={Gradient.types.SATURATION} color={animatedHueColor} numberOfSteps={gradientSteps}/>
+      );
+    }
     return <Gradient type={Gradient.types.SATURATION} color={hueColor} numberOfSteps={gradientSteps}/>;
-  }, [hueColor, gradientSteps]);
+  }, [hueColor, gradientSteps, animatedHueColor, colorPickerContext]);
 
   const onValueChange = useCallback((value: string, alpha: number) => {
     // alpha returns for type.DEFAULT
@@ -88,67 +107,59 @@ const GradientSlider = <T extends string | HSLA = string>(props: Props<T>) => {
   [_onValueChange]);
 
   const updateColor = useCallback((color: HSLA) => {
-    if (!_.isEmpty(sliderContext)) {
-      sliderContext.setValue?.(color);
-    } else {
-      setColor(color);
-      const hex = Colors.getHexString(color);
-      onValueChange(hex, color.a);
-    }
+    setColor(color);
+    const hex = Colors.getHexString(color);
+    onValueChange(hex, color.a);
   },
-  [sliderContext, onValueChange]);
+  [onValueChange]);
 
   const reset = useCallback(() => {
     updateColor(initialColor);
   }, [initialColor, updateColor]);
 
   const updateAlpha = useCallback((a: number) => {
-    const color = getColor();
     updateColor({...color, a});
   },
-  [getColor, updateColor]);
+  [updateColor, color]);
 
   const updateHue = useCallback((h: number) => {
-    const color = getColor();
     updateColor({...color, h});
   },
-  [getColor, updateColor]);
+  [color, updateColor]);
 
   const updateLightness = useCallback((l: number) => {
-    const color = getColor();
     updateColor({...color, l});
   },
-  [getColor, updateColor]);
+  [color, updateColor]);
 
   const updateSaturation = useCallback((s: number) => {
-    const color = getColor();
     updateColor({...color, s});
   },
-  [getColor, updateColor]);
+  [color, updateColor]);
 
   let step = 0.01;
   let maximumValue = 1;
-  let value = color.a;
+  let value = colorPickerContext ? colorPickerContext.value.value.a : color.a;
   let renderTrack = renderDefaultGradient;
-  let sliderOnValueChange = updateAlpha;
+  let sliderOnValueChange = colorPickerContext ? colorPickerContext.updateAlpha : updateAlpha;
 
   switch (type) {
     case GradientSliderTypes.HUE:
       step = 1;
       maximumValue = 359;
-      value = initialColor.h;
+      value = colorPickerContext ? colorPickerContext.value.value.h : initialColor.h;
       renderTrack = renderHueGradient;
-      sliderOnValueChange = updateHue;
+      sliderOnValueChange = colorPickerContext ? colorPickerContext.updateHue : updateHue;
       break;
     case GradientSliderTypes.LIGHTNESS:
-      value = initialColor.l;
+      value = colorPickerContext ? colorPickerContext.value.value.l : initialColor.l;
       renderTrack = renderLightnessGradient;
-      sliderOnValueChange = updateLightness;
+      sliderOnValueChange = colorPickerContext ? colorPickerContext.updateLightness : updateLightness;
       break;
     case GradientSliderTypes.SATURATION:
-      value = initialColor.s;
+      value = colorPickerContext ? colorPickerContext.value.value.s : initialColor.s;
       renderTrack = renderSaturationGradient;
-      sliderOnValueChange = updateSaturation;
+      sliderOnValueChange = colorPickerContext ? colorPickerContext.updateSaturation : updateSaturation;
       break;
     default:
       break;
@@ -159,7 +170,7 @@ const GradientSlider = <T extends string | HSLA = string>(props: Props<T>) => {
     <SliderComponent
       {...others}
       ref={forwardedRef}
-      onReset={reset}
+      onReset={colorPickerContext ? colorPickerContext.reset : reset}
       renderTrack={renderTrack}
       step={step}
       maximumValue={maximumValue}
@@ -170,6 +181,7 @@ const GradientSlider = <T extends string | HSLA = string>(props: Props<T>) => {
       disabled={disabled}
       accessible={accessible}
       useRange={false}
+      useWorkletHandlers={!!colorPickerContext}
     />
   );
 };
@@ -177,6 +189,4 @@ const GradientSlider = <T extends string | HSLA = string>(props: Props<T>) => {
 GradientSlider.displayName = 'GradientSlider';
 GradientSlider.types = GradientSliderTypes;
 // @ts-expect-error
-export default asBaseComponent<GradientSliderProps, ComponentStatics<typeof GradientSlider>>(
-  // @ts-expect-error
-  forwardRef(asSliderGroupChild(forwardRef(GradientSlider))));
+export default asBaseComponent<GradientSliderProps, ComponentStatics<typeof GradientSlider>>(forwardRef(GradientSlider));

From c9ac08bf72b6344ae693940449d60dd3ed81d06c Mon Sep 17 00:00:00 2001
From: Nitzan Yizhar <nitzany@wix.com>
Date: Mon, 19 Feb 2024 17:20:00 +0200
Subject: [PATCH 16/20] reverted change to gradient component

---
 src/components/gradient/index.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/gradient/index.tsx b/src/components/gradient/index.tsx
index 09af4f4d04..7cb308d2c4 100644
--- a/src/components/gradient/index.tsx
+++ b/src/components/gradient/index.tsx
@@ -5,7 +5,6 @@ import {StyleSheet, StyleProp, ViewStyle} from 'react-native';
 import Constants from '../../commons/Constants';
 import {Colors} from '../../style';
 import View from '../view';
-import { SharedValue } from 'react-native-reanimated';
 
 export enum GradientTypes {
   HUE = 'hue',
@@ -14,7 +13,7 @@ export enum GradientTypes {
 }
 
 export interface GradientProps {
-  color?: string | tinycolor.ColorFormats.HSLA | SharedValue<tinycolor.ColorFormats.HSL>;
+  color?: string | tinycolor.ColorFormats.HSLA;
   type?: GradientTypes | `${GradientTypes}`;
   numberOfSteps: number;
   style?: StyleProp<ViewStyle>;

From 535fa0907260c9fa5ade6fe959a47447d13b73a7 Mon Sep 17 00:00:00 2001
From: Nitzan Yizhar <nitzany@wix.com>
Date: Tue, 20 Feb 2024 10:26:48 +0200
Subject: [PATCH 17/20] Removed dialog states

---
 src/components/colorPicker/ColorPickerDialog.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/colorPicker/ColorPickerDialog.tsx b/src/components/colorPicker/ColorPickerDialog.tsx
index 0d390ad2fd..7152beb494 100644
--- a/src/components/colorPicker/ColorPickerDialog.tsx
+++ b/src/components/colorPicker/ColorPickerDialog.tsx
@@ -70,9 +70,6 @@ const ColorPickerDialog = (props: ColorPickerDialogProps) => {
   } = props;
 
   const [keyboardHeight, setKeyboardHeight] = useState(KEYBOARD_HEIGHT);
-  // const [color, setColor] = useState(Colors.getHSL(initialColor));
-  // const [text, setText] = useState(getColorValue(initialColor));
-
   const color = useSharedValue<tinycolor.ColorFormats.HSLA>(tinycolor(initialColor).toHsl());
 
   const changeHeight = (height: number) => {

From 20c50f557845b2d4dbb2966df4208bafe22b0def Mon Sep 17 00:00:00 2001
From: Nitzan Yizhar <nitzany@wix.com>
Date: Tue, 20 Feb 2024 10:27:39 +0200
Subject: [PATCH 18/20] Added conditional reactive textinput

---
 .../colorPicker/ColorPickerPreview.tsx        | 146 +++++++++---------
 1 file changed, 75 insertions(+), 71 deletions(-)

diff --git a/src/components/colorPicker/ColorPickerPreview.tsx b/src/components/colorPicker/ColorPickerPreview.tsx
index c8e848201a..82324d0fdc 100644
--- a/src/components/colorPicker/ColorPickerPreview.tsx
+++ b/src/components/colorPicker/ColorPickerPreview.tsx
@@ -1,14 +1,14 @@
-import React, {useContext, useState, useRef} from 'react';
-import {StyleSheet, TextInput, PixelRatio, I18nManager} from 'react-native';
+import React, {useContext, useState, useRef, useEffect} from 'react';
+import {StyleSheet, TextInput, PixelRatio, I18nManager, TextInputProps} from 'react-native';
 
 import {Colors, Typography} from '../../style';
 import {ColorPickerDialogProps} from './ColorPickerDialog';
-import {BORDER_RADIUS} from './ColorPickerPresenter';
+import {BORDER_RADIUS, isValidHex} from './ColorPickerPresenter';
 import {ColorPickerContext} from './context/ColorPickerContext';
 import View from '../view';
 import TouchableOpacity from '../touchableOpacity';
 import {Constants} from '../../commons/new';
-import Animated, {useAnimatedStyle, useAnimatedProps, useAnimatedRef, useDerivedValue} from 'react-native-reanimated';
+import Animated, {useAnimatedStyle, useAnimatedProps, useDerivedValue} from 'react-native-reanimated';
 import tinycolor from 'tinycolor2';
 
 type PreviewProps = Pick<ColorPickerDialogProps, 'accessibilityLabels' | 'previewInputStyle' | 'testID'> & {
@@ -26,13 +26,13 @@ const Preview = (props: PreviewProps) => {
   const {grey10, white} = Colors;
   const fontScale = PixelRatio.getFontScale();
   const [isFocused, setIsFocused] = useState(false);
-  const [hex, setHex] = useState<string | undefined>(colorPickerContext?.hex.value);
+  const [hex, setHex] = useState<string>(colorPickerContext?.hex.value || '#');
 
   const previewBackgroundColor = useAnimatedStyle(() => {
     return {
       backgroundColor: colorPickerContext?.hex.value || '#ffffff'
     };
-  });
+  }, [colorPickerContext]);
 
   const textColor = useDerivedValue(() => {
     const l = colorPickerContext?.value.value.l;
@@ -40,10 +40,9 @@ const Preview = (props: PreviewProps) => {
   });
 
   const textStyle = useAnimatedStyle(() => {
-    const value = colorPickerContext?.hex.value;
     return {
       color: textColor.value,
-      width: value ? value.length * 16.5 * fontScale : undefined
+      width: 10 * 16.5 * fontScale
     };
   });
 
@@ -52,7 +51,6 @@ const Preview = (props: PreviewProps) => {
       backgroundColor: textColor.value
     };
   });
-  const textInput = useRef<TextInput>();
 
   const animatedProps = useAnimatedProps(() => {
     return {
@@ -63,10 +61,7 @@ const Preview = (props: PreviewProps) => {
 
   const _onFocus = () => {
     setIsFocused(true);
-    setHex(colorPickerContext?.hex.value);
-    // onFocus();
-    console.log(`Nitzan - textInput.current?.focus()`, textInput.current?.focus);
-    textInput.current?.focus();
+    setHex(colorPickerContext?.hex.value || '#');
   };
   const _onChangeText = (value: string) => {
     if (isFocused) {
@@ -74,63 +69,74 @@ const Preview = (props: PreviewProps) => {
     }
   };
 
-  const _onBlur = () => {
-    console.log(`Nitzan - bbb`);
-    if (colorPickerContext?.value) {
+  const onBlur = () => {
+    if (!isValidHex(hex)) {
+      return;
+    }
+    if (colorPickerContext) {
       colorPickerContext.setColor(tinycolor(hex).toHsl());
     }
     setIsFocused(false);
-    setHex(undefined);
+    setHex('#');
   };
 
-  const TextInputRenderFunction = () => {
-    if (!isFocused) {
-      return (
-        <AnimatedTextInput
-          // // @ts-expect-error
-          // ref={textInput}
-          value={colorPickerContext?.hex.value}
-          maxLength={7}
-          numberOfLines={1}
-          // onChangeText={_onChangeText}
-          style={[styles.input, textStyle, Constants.isAndroid && {padding: 0}, previewInputStyle]}
-          underlineColorAndroid="transparent"
-          autoCorrect={false}
-          autoComplete={'off'}
-          autoCapitalize={'characters'}
-          // keyboardType={'numbers-and-punctuation'} // doesn't work with `autoCapitalize`
-          returnKeyType={'done'}
-          enablesReturnKeyAutomatically
-          accessibilityLabel={accessibilityLabels?.input}
-          testID={`${testID}.dialog.textInput`}
-          editable={false}
-          {...{animatedProps}}
-        />
-      );
-    } else {
-      return (
-        <AnimatedTextInput
-          // @ts-expect-error
-          ref={textInput}
-          value={hex}
-          maxLength={7}
-          numberOfLines={1}
-          onChangeText={_onChangeText}
-          style={[styles.input, textStyle, Constants.isAndroid && {padding: 0}, previewInputStyle]}
-          underlineColorAndroid="transparent"
-          autoCorrect={false}
-          autoComplete={'off'}
-          autoCapitalize={'characters'}
-          // keyboardType={'numbers-and-punctuation'} // doesn't work with `autoCapitalize`
-          returnKeyType={'done'}
-          enablesReturnKeyAutomatically
-          accessibilityLabel={accessibilityLabels?.input}
-          testID={`${testID}.dialog.textInput`}
-          onBlur={_onBlur}
-        />
-      );
-    }
-  };
+  // const TextInputRenderFunction = (props: {focusedProps: Partial<TextInputProps>; notFocusedProps: Partial<TextInputProps>}) => {
+  //   const {focusedProps, notFocusedProps} = props;
+  //   if (!isFocused) {
+  //     return (
+  //       <TouchableOpacity
+  //         center
+  //         bg-red10
+  //         onPress={() => {
+  //           _onFocus();
+  //         }}
+  //         activeOpacity={1}
+  //         accessible={false}
+  //       >
+  //         <AnimatedTextInput
+  //           value={colorPickerContext?.hex.value}
+  //           maxLength={7}
+  //           numberOfLines={1}
+  //           style={[styles.input, textStyle, Constants.isAndroid && {padding: 0}, previewInputStyle]}
+  //           underlineColorAndroid="transparent"
+  //           autoCorrect={false}
+  //           autoComplete={'off'}
+  //           autoCapitalize={'characters'}
+  //           // keyboardType={'numbers-and-punctuation'} // doesn't work with `autoCapitalize`
+  //           returnKeyType={'done'}
+  //           enablesReturnKeyAutomatically
+  //           accessibilityLabel={accessibilityLabels?.input}
+  //           testID={`${testID}.dialog.textInput`}
+  //           editable={false}
+  //           // {...{animatedProps}}
+  //           {...notFocusedProps}
+  //         />
+  //       </TouchableOpacity>
+  //     );
+  //   } else {
+  //     return (
+  //       <AnimatedTextInput
+  //         ref={textInput}
+  //         value={hex}
+  //         maxLength={7}
+  //         numberOfLines={1}
+  //         onChangeText={_onChangeText}
+  //         style={[styles.input, textStyle, Constants.isAndroid && {padding: 0}, previewInputStyle]}
+  //         underlineColorAndroid="transparent"
+  //         autoCorrect={false}
+  //         autoComplete={'off'}
+  //         autoCapitalize={'characters'}
+  //         // keyboardType={'numbers-and-punctuation'} // doesn't work with `autoCapitalize`
+  //         returnKeyType={'done'}
+  //         enablesReturnKeyAutomatically
+  //         accessibilityLabel={accessibilityLabels?.input}
+  //         testID={`${testID}.dialog.textInput`}
+  //         onBlur={onBlur}
+  //         {...focusedProps}
+  //       />
+  //     );
+  //   }
+  // };
 
   console.log(`Nitzan - isFocused`, isFocused);
   return (
@@ -138,8 +144,8 @@ const Preview = (props: PreviewProps) => {
       <View style={styles.inputContainer}>
         {!isFocused ? (
           <TouchableOpacity
-            center
             bg-red10
+            center
             onPress={() => {
               _onFocus();
             }}
@@ -147,8 +153,6 @@ const Preview = (props: PreviewProps) => {
             accessible={false}
           >
             <AnimatedTextInput
-              // @ts-expect-error
-              // ref={textInput}
               value={colorPickerContext?.hex.value}
               maxLength={7}
               numberOfLines={1}
@@ -170,8 +174,6 @@ const Preview = (props: PreviewProps) => {
           </TouchableOpacity>
         ) : (
           <AnimatedTextInput
-            // @ts-expect-error
-            ref={textInput}
             value={hex}
             maxLength={7}
             numberOfLines={1}
@@ -186,7 +188,9 @@ const Preview = (props: PreviewProps) => {
             enablesReturnKeyAutomatically
             accessibilityLabel={accessibilityLabels?.input}
             testID={`${testID}.dialog.textInput`}
-            onBlur={_onBlur}
+            onBlur={onBlur}
+            onFocus={onFocus}
+            autoFocus
           />
         )}
       </View>

From bffda7df91a62432c97ee1a42c9f0794e49bb5ed Mon Sep 17 00:00:00 2001
From: Nitzan Yizhar <nitzany@wix.com>
Date: Tue, 20 Feb 2024 10:28:27 +0200
Subject: [PATCH 19/20] Added stateful color to the color context so it coudl
 change the initial value of the sliders

---
 .../context/ColorPickerContext.tsx            | 21 +++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/components/colorPicker/context/ColorPickerContext.tsx b/src/components/colorPicker/context/ColorPickerContext.tsx
index 37dc8a648f..70e2275cd2 100644
--- a/src/components/colorPicker/context/ColorPickerContext.tsx
+++ b/src/components/colorPicker/context/ColorPickerContext.tsx
@@ -1,4 +1,4 @@
-import React, {PropsWithChildren, createContext, useCallback, useMemo} from 'react';
+import React, {PropsWithChildren, createContext, useCallback, useMemo, useState} from 'react';
 import {SharedValue, runOnJS, useAnimatedReaction, useSharedValue, useWorkletCallback} from 'react-native-reanimated';
 import type {ColorFormats} from 'tinycolor2';
 import {getValidColorString, hslToHex} from '../ColorPickerPresenter';
@@ -8,6 +8,7 @@ export type SharedColorContextType = {
   value: SharedValue<HSLA>;
   hex: SharedValue<string | undefined>;
   isValid: SharedValue<boolean>;
+  statefulColor: ColorFormats.HSLA;
   setColor: (hsla: HSLA) => void;
   updateAlpha: (a: number) => void;
   updateHue: (h: number) => void;
@@ -15,7 +16,7 @@ export type SharedColorContextType = {
   updateLightness: (l: number) => void;
   reset: () => void;
 };
- 
+
 export const ColorPickerContext = createContext<SharedColorContextType | null>(null);
 
 interface ColorPickerContextProviderProps<T> extends PropsWithChildren {
@@ -26,7 +27,7 @@ const DEFAULT_VALUE = {h: 0, s: 0, l: 0, a: 0};
 
 export const ColorPickerContextProvider = (props: ColorPickerContextProviderProps<SharedValue<HSLA>>) => {
   const {color, children} = props;
-  // const color = useSharedValue<HSLA>(initialValue ?? DEFAULT_VALUE);
+  const [statefulColor, setStatefulColor] = useState(color.value);
 
   const reset = useCallback(() => {
     color.value = DEFAULT_VALUE;
@@ -40,6 +41,7 @@ export const ColorPickerContextProvider = (props: ColorPickerContextProviderProp
 
   const updateHue = useWorkletCallback((h: number) => {
     'worklet';
+    console.log(`Nitzan - h`, h);
     color.value = {...color.value, h};
   },
   [color]);
@@ -59,20 +61,26 @@ export const ColorPickerContextProvider = (props: ColorPickerContextProviderProp
 
   useAnimatedReaction(() => {
     const {h, s, l} = color.value;
+    console.log(`Nitzan - changed`, h);
+    console.log(`Nitzan - hslToHex({h, s: s * 100, l: l * 100})`, hslToHex({h, s: s * 100, l: l * 100}));
     return getValidColorString(hslToHex({h, s: s * 100, l: l * 100}));
   },
   (current, prev) => {
+    console.log(`Nitzan - current.hex, prev?.hex`, current.hex, prev?.hex);
     if (current.hex !== prev?.hex) {
-      hex.value = current.hex?.toUpperCase();
+      if (current.valid) {
+        console.log(`Nitzan - hex changing`, current.hex);
+        hex.value = current.hex?.toUpperCase();
+      }
     }
     if (current.valid !== prev?.valid) {
-      console.log(`Nitzan - new valid`, current.valid);
       isValid.value = current.valid;
     }
   });
 
   const setColor = useWorkletCallback((hsla: HSLA) => {
     color.value = hsla;
+    runOnJS(setStatefulColor)(hsla);
   });
 
   const providerValue = useMemo(() => {
@@ -80,6 +88,7 @@ export const ColorPickerContextProvider = (props: ColorPickerContextProviderProp
       value: color,
       hex,
       isValid,
+      statefulColor,
       setColor,
       updateAlpha,
       updateHue,
@@ -87,6 +96,6 @@ export const ColorPickerContextProvider = (props: ColorPickerContextProviderProp
       updateSaturation,
       reset
     };
-  }, [color, reset, updateAlpha, updateHue, updateLightness, updateSaturation, hex, isValid, setColor]);
+  }, [color, reset, updateAlpha, updateHue, updateLightness, updateSaturation, hex, isValid, setColor, statefulColor]);
   return <ColorPickerContext.Provider value={providerValue}>{children}</ColorPickerContext.Provider>;
 };

From b5c0f1f366509713c6a1a748ce805e0b74827667 Mon Sep 17 00:00:00 2001
From: Nitzan Yizhar <nitzany@wix.com>
Date: Mon, 11 Mar 2024 12:13:42 +0200
Subject: [PATCH 20/20] Added key to the slider so thumbs will reset place

---
 demo/src/screens/PlaygroundScreen.tsx         | 19 +++----------------
 .../colorPicker/ColorPickerDialogSliders.tsx  |  7 ++++---
 .../colorPicker/ColorPickerPreview.tsx        |  2 +-
 .../context/ColorPickerContext.tsx            |  4 ----
 src/components/slider/GradientSlider.tsx      |  1 +
 src/index.ts                                  |  3 ---
 6 files changed, 9 insertions(+), 27 deletions(-)

diff --git a/demo/src/screens/PlaygroundScreen.tsx b/demo/src/screens/PlaygroundScreen.tsx
index a0f7f8baa1..9b00628acc 100644
--- a/demo/src/screens/PlaygroundScreen.tsx
+++ b/demo/src/screens/PlaygroundScreen.tsx
@@ -1,24 +1,11 @@
 import React, {Component, useState} from 'react';
-import {View, Gradient, Button, MyColorPicker, GradientTypes} from 'react-native-ui-lib';
-import Animated, {useSharedValue} from 'react-native-reanimated';
-import MyGradient from './Gradient';
+import {View, ColorPicker, Gradient, Button, GradientTypes} from 'react-native-ui-lib';
 
 export default () => {
-  const color = useSharedValue<tinycolor.ColorFormats.HSLA>({h: 300, s: 1, l: 0.5, a: 1});
+  const [colors, setColors] = useState(['#ddaaaa', '#badddd']);
   return (
     <View flex bg-grey80 padding-20 gap-80>
-      <View height={50} gap-50>
-        <MyGradient color={color} numberOfSteps={100} type={GradientTypes.SATURATION}/>
-      </View>
-      <View height={50} gap-50>
-        <Gradient numberOfSteps={100} color={color.value} type={GradientTypes.SATURATION}/>
-      </View>
-      <Button
-        label="Change color"
-        onPress={() => {
-          color.value = {h: Math.floor(Math.random() * 350), s: 1, l: 0.5, a: 1};
-        }}
-      />
+      <ColorPicker colors={colors} initialColor={colors[0]} onSubmit={color => setColors(prev => [...prev, color])}/>
     </View>
   );
 };
diff --git a/src/components/colorPicker/ColorPickerDialogSliders.tsx b/src/components/colorPicker/ColorPickerDialogSliders.tsx
index a6c378637e..ca47332e6d 100644
--- a/src/components/colorPicker/ColorPickerDialogSliders.tsx
+++ b/src/components/colorPicker/ColorPickerDialogSliders.tsx
@@ -14,12 +14,13 @@ const Sliders = (props: SlidersProps) => {
   const {keyboardHeight, migrate} = props;
   const colorPickerContext = useContext(ColorPickerContext);
   const colorValue =
-    !colorPickerContext || colorPickerContext.value.value.a === 0
+    !colorPickerContext || colorPickerContext.statefulColor.a === 0
       ? Colors.getHSL(Colors.$backgroundInverted)
-      : colorPickerContext?.value.value;
-
+      : colorPickerContext.statefulColor;
+  console.log(`Nitzan - sliders colorValue`, colorValue);
   return (
     <ColorSliderGroup<HSLColor>
+      key={Colors.getHexString(colorValue)}
       initialColor={colorValue}
       containerStyle={[styles.sliderGroup, {height: keyboardHeight}]}
       sliderContainerStyle={styles.slider}
diff --git a/src/components/colorPicker/ColorPickerPreview.tsx b/src/components/colorPicker/ColorPickerPreview.tsx
index 82324d0fdc..d15804b712 100644
--- a/src/components/colorPicker/ColorPickerPreview.tsx
+++ b/src/components/colorPicker/ColorPickerPreview.tsx
@@ -144,7 +144,7 @@ const Preview = (props: PreviewProps) => {
       <View style={styles.inputContainer}>
         {!isFocused ? (
           <TouchableOpacity
-            bg-red10
+            // bg-red10
             center
             onPress={() => {
               _onFocus();
diff --git a/src/components/colorPicker/context/ColorPickerContext.tsx b/src/components/colorPicker/context/ColorPickerContext.tsx
index 70e2275cd2..92c0bf5798 100644
--- a/src/components/colorPicker/context/ColorPickerContext.tsx
+++ b/src/components/colorPicker/context/ColorPickerContext.tsx
@@ -61,15 +61,11 @@ export const ColorPickerContextProvider = (props: ColorPickerContextProviderProp
 
   useAnimatedReaction(() => {
     const {h, s, l} = color.value;
-    console.log(`Nitzan - changed`, h);
-    console.log(`Nitzan - hslToHex({h, s: s * 100, l: l * 100})`, hslToHex({h, s: s * 100, l: l * 100}));
     return getValidColorString(hslToHex({h, s: s * 100, l: l * 100}));
   },
   (current, prev) => {
-    console.log(`Nitzan - current.hex, prev?.hex`, current.hex, prev?.hex);
     if (current.hex !== prev?.hex) {
       if (current.valid) {
-        console.log(`Nitzan - hex changing`, current.hex);
         hex.value = current.hex?.toUpperCase();
       }
     }
diff --git a/src/components/slider/GradientSlider.tsx b/src/components/slider/GradientSlider.tsx
index ff975c0def..12cbec3241 100644
--- a/src/components/slider/GradientSlider.tsx
+++ b/src/components/slider/GradientSlider.tsx
@@ -47,6 +47,7 @@ const GradientSlider = <T extends string | HSLA = string>(props: Props<T>) => {
   }
   
   useEffect(() => {
+    console.log(`Nitzan - dfgsdfgjsfgjh`, )
     setColor(initialColor);
   }, [initialColor]);
 
diff --git a/src/index.ts b/src/index.ts
index 370f49412a..61cde7ab42 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -189,9 +189,6 @@ export {
   WheelPickerItemProps,
   WheelPickerAlign
 } from './components/WheelPicker';
-
-export {default as MyColorPicker} from './components/colorPicker/ColorPickerContext';
-
 /* ===== TestKit ===== */
 // export {default as TextTestKit} from './components/text/Text.driver';
 // export {default as ImageTestKit} from './components/image/Image.driver';