Moved useColorPicker to services (#3067)

* Moved useColorPicker from src-docs/src/views/color_picker/utils.js -> src/services

* Updated CHANGELOG.md

* Updated useColorStop to useColorStopState
added initialColorStops param

* Updated useColorStops -> useColorStopState
Added initialColorStops as param

* Update src/services/color_picker/color_picker.ts

Co-Authored-By: Greg Thompson <thompsongl@users.noreply.github.com>

* Update CHANGELOG.md

Co-Authored-By: Greg Thompson <thompsongl@users.noreply.github.com>

* Renamed useColorStopState to useColorStopsState

* updated useColorStopsState

* update CL

Co-authored-by: Greg Thompson <thompsongl@users.noreply.github.com>
Co-authored-by: Greg Thompson <thompson.glowe@gmail.com>

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Added `delimiter` prop to `EuiComboBox` ([#3104](https://github.com/elastic/eui/pull/3104))
+- Added `useColorPickerState` and `useColorStopsState` utilities ([#3067](https://github.com/elastic/eui/pull/3067))
 
 ## [`22.0.0`](https://github.com/elastic/eui/tree/v22.0.0)
 

src-docs/src/views/color_picker/alpha.js

@@ -1,11 +1,11 @@
 import React from 'react';
 
 import { EuiColorPicker, EuiFormRow } from '../../../../src/components';
-import { useColorPicker } from './utils';
+import { useColorPickerState } from '../../../../src/services';
 
 export const Alpha = () => {
-  const [color, setColor, errors] = useColorPicker('#D36086');
-  const [color2, setColor2, errors2] = useColorPicker('211, 96, 134');
+  const [color, setColor, errors] = useColorPickerState('#D36086');
+  const [color2, setColor2, errors2] = useColorPickerState('211, 96, 134');
 
   const customSwatches = [
     '#54B399',

src-docs/src/views/color_picker/color_picker.js

@@ -1,10 +1,10 @@
 import React from 'react';
 
 import { EuiColorPicker, EuiFormRow } from '../../../../src/components';
-import { useColorPicker } from './utils';
+import { useColorPickerState } from '../../../../src/services';
 
 export const ColorPicker = () => {
-  const [color, setColor, errors] = useColorPicker('#D36086');
+  const [color, setColor, errors] = useColorPickerState('#D36086');
   return (
     <EuiFormRow label="Pick a color" isInvalid={!!errors} error={errors}>
       <EuiColorPicker onChange={setColor} color={color} isInvalid={!!errors} />

src-docs/src/views/color_picker/color_stops.js

@@ -2,10 +2,10 @@ import React, { useState } from 'react';
 
 import { EuiColorStops, EuiFormRow } from '../../../../src/components';
 
-import { useColorStop } from './utils';
+import { useColorStopsState } from '../../../../src/services';
 
 export const ColorStops = () => {
-  const [colorStops, setColorStops, addColor] = useColorStop(true);
+  const [colorStops, setColorStops, addColor] = useColorStopsState(true);
 
   const [extendedColorStops, setExtendedColorStops] = useState([
     {

src-docs/src/views/color_picker/containers.js

@@ -14,11 +14,14 @@ import {
   EuiSpacer,
 } from '../../../../src/components';
 
-import { useColorPicker, useColorStop } from './utils';
+import {
+  useColorPickerState,
+  useColorStopsState,
+} from '../../../../src/services';
 
 export default () => {
-  const [color, setColor] = useColorPicker('#FFF');
-  const [colorStops, setColorStops] = useColorStop();
+  const [color, setColor] = useColorPickerState('#FFF');
+  const [colorStops, setColorStops] = useColorStopsState();
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 

src-docs/src/views/color_picker/custom_button.js

@@ -8,10 +8,10 @@ import {
   EuiSpacer,
 } from '../../../../src/components';
 
-import { useColorPicker } from './utils';
+import { useColorPickerState } from '../../../../src/services';
 
 export const CustomButton = () => {
-  const [color, setColor, errors] = useColorPicker('');
+  const [color, setColor, errors] = useColorPickerState('');
   const [selectedColor, setSelectedColor] = useState(color);
   const handleColorChange = (text, { hex, isValid }) => {
     setColor(text, { hex, isValid });

src-docs/src/views/color_picker/custom_swatches.js

@@ -7,11 +7,14 @@ import {
   EuiSpacer,
 } from '../../../../src/components';
 
-import { useColorPicker, useColorStop } from './utils';
+import {
+  useColorPickerState,
+  useColorStopsState,
+} from '../../../../src/services';
 
 export const CustomSwatches = () => {
-  const [color, setColor, errors] = useColorPicker();
-  const [colorStops, setColorStops] = useColorStop();
+  const [color, setColor, errors] = useColorPickerState();
+  const [colorStops, setColorStops] = useColorStopsState();
 
   const customSwatches = ['#333', '#666', '#999', '#CCC'];
 

src-docs/src/views/color_picker/formats.js

@@ -1,12 +1,12 @@
 import React from 'react';
 
 import { EuiColorPicker, EuiFormRow } from '../../../../src/components';
-import { useColorPicker } from './utils';
+import { useColorPickerState } from '../../../../src/services';
 
 export const Formats = () => {
-  const [color, setColor, errors] = useColorPicker('#D36086');
-  const [color2, setColor2, errors2] = useColorPicker('#D36086');
-  const [color3, setColor3, errors3] = useColorPicker('211, 96, 134');
+  const [color, setColor, errors] = useColorPickerState('#D36086');
+  const [color2, setColor2, errors2] = useColorPickerState('#D36086');
+  const [color3, setColor3, errors3] = useColorPickerState('211, 96, 134');
   return (
     <>
       <EuiFormRow label="Auto format" isInvalid={!!errors} error={errors}>

src-docs/src/views/color_picker/inline.js

@@ -1,10 +1,10 @@
 import React from 'react';
 
 import { EuiColorPicker } from '../../../../src/components';
-import { useColorPicker } from './utils';
+import { useColorPickerState } from '../../../../src/services';
 
 export const Inline = () => {
-  const [color, setColor, errors] = useColorPicker('#D36086');
+  const [color, setColor, errors] = useColorPickerState('#D36086');
   return (
     <EuiColorPicker
       onChange={setColor}

src-docs/src/views/color_picker/kitchen_sink.js

@@ -7,11 +7,14 @@ import {
 } from '../../../../src/components';
 import { DisplayToggles } from '../form_controls/display_toggles';
 
-import { useColorPicker, useColorStop } from './utils';
+import {
+  useColorPickerState,
+  useColorStopsState,
+} from '../../../../src/services';
 
 export const KitchenSink = () => {
-  const [color, setColor] = useColorPicker('#D36086');
-  const [colorStops, setColorStops, addStop] = useColorStop(true);
+  const [color, setColor] = useColorPickerState('#D36086');
+  const [colorStops, setColorStops, addStop] = useColorStopsState(true);
 
   return (
     <React.Fragment>

src-docs/src/views/color_picker/modes.js

@@ -7,11 +7,14 @@ import {
   EuiSpacer,
 } from '../../../../src/components';
 
-import { useColorPicker, useColorStop } from './utils';
+import {
+  useColorPickerState,
+  useColorStopsState,
+} from '../../../../src/services';
 
 export const Modes = () => {
-  const [color, setColor, errors] = useColorPicker('#D36086');
-  const [colorStops, setColorStops] = useColorStop();
+  const [color, setColor, errors] = useColorPickerState('#D36086');
+  const [colorStops, setColorStops] = useColorStopsState();
 
   return (
     <React.Fragment>

src-docs/src/views/color_picker/utils.js → src/services/color_picker/color_picker.ts

@@ -1,12 +1,17 @@
 import { useMemo, useState } from 'react';
 
+interface colorStopsType {
+  stop: number;
+  color: string;
+}
+
 const generateRandomColor = () =>
   // https://www.paulirish.com/2009/random-hex-color-code-snippets/
   `#${Math.floor(Math.random() * 16777215).toString(16)}`;
 
-export const useColorStop = (useRandomColor = false) => {
-  const [addColor, setAddColor] = useState(generateRandomColor());
-  const [colorStops, setColorStops] = useState([
+export const useColorStopsState = (
+  useRandomColor: boolean = false,
+  initialColorStops: colorStopsType[] = [
     {
       stop: 20,
       color: '#54B399',
@@ -19,9 +24,12 @@ export const useColorStop = (useRandomColor = false) => {
       stop: 65,
       color: '#9170B8',
     },
-  ]);
+  ]
+) => {
+  const [addColor, setAddColor] = useState(generateRandomColor());
+  const [colorStops, setColorStops] = useState(initialColorStops);
 
-  const updateColorStops = colorStops => {
+  const updateColorStops = (colorStops: colorStopsType[]) => {
     setColorStops(colorStops);
     if (useRandomColor) {
       setAddColor(generateRandomColor());
@@ -30,10 +38,10 @@ export const useColorStop = (useRandomColor = false) => {
   return [colorStops, updateColorStops, addColor];
 };
 
-export const useColorPicker = (initialColor = '') => {
+export const useColorPickerState = (initialColor = '') => {
   const [color, setColorValue] = useState(initialColor);
   const [isValid, setIsValid] = useState(true);
-  const setColor = (text, { isValid }) => {
+  const setColor = (text: string, { isValid }: { isValid: boolean }) => {
     setColorValue(text);
     setIsValid(isValid);
   };

src/services/color_picker/index.ts

@@ -0,0 +1 @@
+export { useColorPickerState, useColorStopsState } from './color_picker';

src/services/index.ts

@@ -45,6 +45,8 @@ export {
   HSV,
 } from './color';
 
+export { useColorPickerState, useColorStopsState } from './color_picker';
+
 export { copyToClipboard } from './copy_to_clipboard';
 
 export {