Moved useColorPicker to services

CHANGELOG.md

@@ -11,8 +11,9 @@
 - Added RGB format support to `EuiColorPicker` and `EuiColorStops` ([#2850](https://github.com/elastic/eui/pull/2850))
 - Added alpha channel (opacity) support to `EuiColorPicker` and `EuiColorStops` ([#2850](https://github.com/elastic/eui/pull/2850))
 - Added `useResizeObserver` hook ([#2991](https://github.com/elastic/eui/pull/2991))
-- Added `showColumnSelector.allowHide` and `showColumnSelector.allowReorder` props to `EuiDataGrid` UI configuration ([#2993](https://github.com/elastic/eui/pull/2993))
+- Added `showColumnSelector.allowHide` and `showColumnSelector.allowReorder` props to `EuiDataGrid` UI configuration ([#2993](https://github.com/elastic/eui/pull/2993)) 
 - Added `EuiMark` component ([#3060](https://github.com/elastic/eui/pull/3060))
+- Moved and renamed `useColorPicker and useColorStops` from src-docs/src/views/color_picker/utils to `useColorPickerState and useColorStops` src/services ([#3067](https://github.com/elastic/eui/pull/3067))
 
 **Bug Fixes**
 

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 { useColorStopState } from '../../../../src/services';
 
 export const ColorStops = () => {
- const [colorStops, setColorStops, addColor] = useColorStop(true);
+ const [colorStops, setColorStops, addColor] = useColorStopState(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,
+ useColorStopState,
+} from '../../../../src/services';
 
 export default () => {
- const [color, setColor] = useColorPicker('#FFF');
- const [colorStops, setColorStops] = useColorStop();
+ const [color, setColor] = useColorPickerState('#FFF');
+ const [colorStops, setColorStops] = useColorStopState();
  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,
+ useColorStopState,
+} from '../../../../src/services';
 
 export const CustomSwatches = () => {
- const [color, setColor, errors] = useColorPicker();
- const [colorStops, setColorStops] = useColorStop();
+ const [color, setColor, errors] = useColorPickerState();
+ const [colorStops, setColorStops] = useColorStopState();
 
  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,
+ useColorStopState,
+} 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] = useColorStopState(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,
+ useColorStopState,
+} 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] = useColorStopState();
 
  return (
  <React.Fragment>

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

@@ -1,12 +1,16 @@
 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 useColorStopState = (
+ initialColorStops: colorStopsType[] = [
  {
  stop: 20,
  color: '#54B399',
@@ -19,9 +23,13 @@ export const useColorStop = (useRandomColor = false) => {
  stop: 65,
  color: '#9170B8',
  },
- ]);
+ ],
+ useRandomColor: boolean = false
+) => {
+ const [addColor, setAddColor] = useState(generateRandomColor());
+ const [colorStops, setColorStops] = useState(initialColorStops);
 
- const updateColorStops = colorStops => {
+ const updateColorStops = (colorStops: any) => {
  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, useColorStopState } from './color_picker';

src/services/index.ts

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