ColorPicker: TypeScript refactor (#49214)

* Rename tests/index

* fix existing typos

* Type unit test utils

* Ensure `saturation` is not null

* Consolidate type data into `types.ts`

* Initial updates to stories

* Remove obselete `import`

* Unit tests: add explicit check and throw error if `saturation` is `null`

* Remove outdated `WordPressComponentProps` usage

* Type `onChange` as `Never` for `LegacyProps`

* Restore default `value` in unit test constructor

* Improve unit test to check for null/undefined `pageX` and `pageY` values

* Provide expected `string` value for `color` in all unit tests

* Hide legacy props from Storybook docs

* Add JSDoc descriptions to component prop types

* Simplify `FakeMouseEvent` constructor

* update CHANGELOG

* Update docs to reflect onChange accepting a hex or hex8

* Show props in Storybook only for new version of the component

---------

Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>

packages/components/CHANGELOG.md

@@ -6,6 +6,7 @@
 
 -   `Animate`: Convert to TypeScript ([#49243](https://github.com/WordPress/gutenberg/pull/49243)).
 -   `CustomGradientPicker`: Convert to TypeScript ([#48929](https://github.com/WordPress/gutenberg/pull/48929)).
+-   `ColorPicker`: Convert to TypeScript ([#49214](https://github.com/WordPress/gutenberg/pull/49214)).
 -   `GradientPicker`: Convert to TypeScript ([#48316](https://github.com/WordPress/gutenberg/pull/48316)).
 
 ### Enhancements

packages/components/src/color-picker/README.md

@@ -31,13 +31,13 @@ The current color value to display in the picker. Must be a hex or hex8 string.
 
 ### `onChange`: `(hex8Color: string) => void`
 
-Fired when the color changes. Always passes a hex8 color string.
+Fired when the color changes. Always passes a hex or hex8 color string.
 
 - Required: No
 
 ### `enableAlpha`: `boolean`
 
-Defaults to `false`. When `true` the color picker will display the alpha channel both in the bottom inputs as well as in the color picker itself.
+When `true` the color picker will display the alpha channel both in the bottom inputs as well as in the color picker itself.
 
 - Required: No
 - Default: `false`

packages/components/src/color-picker/color-input.tsx

@@ -1,21 +1,10 @@
-/**
- * External dependencies
- */
-import type { Colord } from 'colord';
-
 /**
  * Internal dependencies
  */
 import { RgbInput } from './rgb-input';
 import { HslInput } from './hsl-input';
 import { HexInput } from './hex-input';
-
-interface ColorInputProps {
-	colorType: 'hsl' | 'hex' | 'rgb';
-	color: Colord;
-	onChange: ( nextColor: Colord ) => void;
-	enableAlpha: boolean;
-}
+import type { ColorInputProps } from './types';
 
 export const ColorInput = ( {
 	colorType,

packages/components/src/color-picker/component.tsx

@@ -15,11 +15,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import {
-	useContextSystem,
-	contextConnect,
-	WordPressComponentProps,
-} from '../ui/context';
+import { useContextSystem, contextConnect } from '../ui/context';
 import {
 	ColorfulWrapper,
 	SelectControl,
@@ -32,26 +28,18 @@ import { ColorInput } from './color-input';
 import { Picker } from './picker';
 import { useControlledValue } from '../utils/hooks';
 
-import type { ColorType } from './types';
+import type { ColorPickerProps, ColorType } from './types';
 
 extend( [ namesPlugin ] );
 
-export interface ColorPickerProps {
-	enableAlpha?: boolean;
-	color?: string;
-	onChange?: ( color: string ) => void;
-	defaultValue?: string;
-	copyFormat?: ColorType;
-}
-
 const options = [
 	{ label: 'RGB', value: 'rgb' as const },
 	{ label: 'HSL', value: 'hsl' as const },
 	{ label: 'Hex', value: 'hex' as const },
 ];
 
-const ColorPicker = (
-	props: WordPressComponentProps< ColorPickerProps, 'div', false >,
+const UnconnectedColorPicker = (
+	props: ColorPickerProps,
 	forwardedRef: ForwardedRef< any >
 ) => {
 	const {
@@ -124,6 +112,9 @@ const ColorPicker = (
 	);
 };
 
-const ConnectedColorPicker = contextConnect( ColorPicker, 'ColorPicker' );
+export const ColorPicker = contextConnect(
+	UnconnectedColorPicker,
+	'ColorPicker'
+);
 
-export default ConnectedColorPicker;
+export default ColorPicker;

packages/components/src/color-picker/hex-input.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { colord, Colord } from 'colord';
+import { colord } from 'colord';
 
 /**
  * WordPress dependencies
@@ -17,12 +17,7 @@ import { Spacer } from '../spacer';
 import { space } from '../ui/utils/space';
 import { COLORS } from '../utils/colors-values';
 import type { StateReducer } from '../input-control/reducer/state';
-
-interface HexInputProps {
-	color: Colord;
-	onChange: ( nextColor: Colord ) => void;
-	enableAlpha: boolean;
-}
+import type { HexInputProps } from './types';
 
 export const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {
 	const handleChange = ( nextValue: string | undefined ) => {

packages/components/src/color-picker/hsl-input.tsx

@@ -1,18 +1,13 @@
 /**
  * External dependencies
  */
-import { colord, Colord } from 'colord';
+import { colord } from 'colord';
 
 /**
  * Internal dependencies
  */
 import { InputWithSlider } from './input-with-slider';
-
-interface HslInputProps {
-	color: Colord;
-	onChange: ( nextColor: Colord ) => void;
-	enableAlpha: boolean;
-}
+import type { HslInputProps } from './types';
 
 export const HslInput = ( { color, onChange, enableAlpha }: HslInputProps ) => {
 	const { h, s, l, a } = color.toHsl();

packages/components/src/color-picker/input-with-slider.tsx

@@ -7,15 +7,7 @@ import { Spacer } from '../spacer';
 import { space } from '../ui/utils/space';
 import { RangeControl, NumberControlWrapper } from './styles';
 import { COLORS } from '../utils/colors-values';
-
-interface InputWithSliderProps {
-	min: number;
-	max: number;
-	value: number;
-	label: string;
-	abbreviation: string;
-	onChange: ( value: number ) => void;
-}
+import type { InputWithSliderProps } from './types';
 
 export const InputWithSlider = ( {
 	min,

packages/components/src/color-picker/legacy-adapter.tsx

@@ -2,10 +2,9 @@
  * Internal dependencies
  */
 import ColorPicker from './component';
+import type { LegacyAdapterProps } from './types';
 import { useDeprecatedProps } from './use-deprecated-props';
 
-type LegacyAdapterProps = Parameters< typeof useDeprecatedProps >[ 0 ];
-
 export const LegacyAdapter = ( props: LegacyAdapterProps ) => {
 	return <ColorPicker { ...useDeprecatedProps( props ) } />;
 };

packages/components/src/color-picker/picker.tsx

@@ -2,17 +2,16 @@
  * External dependencies
  */
 import { RgbStringColorPicker, RgbaStringColorPicker } from 'react-colorful';
-import { colord, Colord } from 'colord';
+import { colord } from 'colord';
 
 /**
  * WordPress dependencies
  */
 import { useMemo } from '@wordpress/element';
-interface PickerProps {
-	color: Colord;
-	enableAlpha: boolean;
-	onChange: ( nextColor: Colord ) => void;
-}
+/**
+ * Internal dependencies
+ */
+import type { PickerProps } from './types';
 
 export const Picker = ( { color, enableAlpha, onChange }: PickerProps ) => {
 	const Component = enableAlpha

packages/components/src/color-picker/rgb-input.tsx

@@ -1,18 +1,13 @@
 /**
  * External dependencies
  */
-import { colord, Colord } from 'colord';
+import { colord } from 'colord';
 
 /**
  * Internal dependencies
  */
 import { InputWithSlider } from './input-with-slider';
-
-interface RgbInputProps {
-	color: Colord;
-	onChange: ( nextColor: Colord ) => void;
-	enableAlpha: boolean;
-}
+import type { RgbInputProps } from './types';
 
 export const RgbInput = ( { color, onChange, enableAlpha }: RgbInputProps ) => {
 	const { r, g, b, a } = color.toRgb();

packages/components/src/color-picker/stories/index.tsx

@@ -0,0 +1,51 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { ColorPicker } from '../component';
+
+const meta: ComponentMeta< typeof ColorPicker > = {
+	component: ColorPicker,
+	title: 'Components/ColorPicker',
+	argTypes: {
+		as: { control: { type: null } },
+		color: { control: { type: null } },
+	},
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: {
+			expanded: true,
+		},
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof ColorPicker > = ( {
+	onChange,
+	...props
+} ) => {
+	const [ color, setColor ] = useState< string | undefined >();
+
+	return (
+		<ColorPicker
+			{ ...props }
+			color={ color }
+			onChange={ ( ...changeArgs ) => {
+				onChange?.( ...changeArgs );
+				setColor( ...changeArgs );
+			} }
+		/>
+	);
+};
+
+export const Default = Template.bind( {} );