Convert the ColorPalette component to TypeScript

packages/components/CHANGELOG.md

@@ -22,6 +22,7 @@
 -   `Sandbox`: updated to satisfy `react/exhaustive-deps` eslint rule ([#44378](https://github.com/WordPress/gutenberg/pull/44378))
 -   `FontSizePicker`: Convert to TypeScript ([#44449](https://github.com/WordPress/gutenberg/pull/44449)).
 -   `FontSizePicker`: Replace SCSS with Emotion + components ([#44483](https://github.com/WordPress/gutenberg/pull/44483)).
+-   `ColorPalette`: Convert to TypeScript ([#44632](https://github.com/WordPress/gutenberg/pull/44632)).
 
 ## 21.1.0 (2022-09-21)
 

packages/components/src/border-control/border-control-dropdown/component.tsx

@@ -198,6 +198,7 @@ const BorderControlDropdown = (
 							/>
 						</HStack>
 					) : undefined }
+					{ /* @ts-ignore colors prop: Type 'Colors | undefined' is not assignable to type 'Color[] | MultipleColors' */ }
 					<ColorPalette
 						className={ popoverContentClassName }
 						value={ color }

packages/components/src/color-palette/index.js → packages/components/src/color-palette/index.tsx

@@ -1,4 +1,3 @@
-// @ts-nocheck
 /**
  * External dependencies
  */
@@ -23,6 +22,14 @@ import { Flex, FlexItem } from '../flex';
 import { Truncate } from '../truncate';
 import { ColorHeading } from './styles';
 import DropdownContentWrapper from '../dropdown/dropdown-content-wrapper';
+import type {
+	Color,
+	MultipleColors,
+	ColorPaletteProps,
+	CustomColorPickerDropdownProps,
+	MultiplePalettesProps,
+	SinglePaletteProps,
+} from './types';
 
 extend( [ namesPlugin, a11yPlugin ] );
 
@@ -33,13 +40,14 @@ function SinglePalette( {
 	onChange,
 	value,
 	actions,
-} ) {
+}: SinglePaletteProps ) {
 	const colorOptions = useMemo( () => {
 		return colors.map( ( { color, name }, index ) => {
 			const colordColor = colord( color );
 			const isSelected = value === color;
 
 			return (
+				// @ts-ignore Required className prop.
 				<CircularOptionPicker.Option
 					key={ `${ color }-${ index }` }
 					isSelected={ isSelected }
@@ -75,6 +83,7 @@ function SinglePalette( {
 		} );
 	}, [ colors, value, onChange, clearColor ] );
 	return (
+		// @ts-ignore Required children prop.
 		<CircularOptionPicker
 			className={ className }
 			options={ colorOptions }
@@ -90,7 +99,7 @@ function MultiplePalettes( {
 	onChange,
 	value,
 	actions,
-} ) {
+}: MultiplePalettesProps ) {
 	return (
 		<VStack spacing={ 3 } className={ className }>
 			{ colors.map( ( { name, colors: colorPalette }, index ) => {
@@ -117,7 +126,7 @@ export function CustomColorPickerDropdown( {
 	isRenderedInSidebar,
 	popoverProps: receivedPopoverProps,
 	...props
-} ) {
+}: CustomColorPickerDropdownProps ) {
 	const popoverProps = useMemo(
 		() => ( {
 			shift: true,
@@ -148,9 +157,9 @@ export function CustomColorPickerDropdown( {
 }
 
 export const extractColorNameFromCurrentValue = (
-	currentValue,
-	colors = [],
-	showMultiplePalettes = false
+	currentValue?: string,
+	colors: Color[] | MultipleColors = [],
+	showMultiplePalettes: boolean = false
 ) => {
 	if ( ! currentValue ) {
 		return '';
@@ -162,7 +171,9 @@ export const extractColorNameFromCurrentValue = (
 		: colord( currentValue ).toHex();
 
 	// Normalize format of `colors` to simplify the following loop
-	const colorPalettes = showMultiplePalettes ? colors : [ { colors } ];
+	const colorPalettes = showMultiplePalettes
+		? ( colors as MultipleColors )
+		: [ { colors: colors as Color[] } ];
 	for ( const { colors: paletteColors } of colorPalettes ) {
 		for ( const { name: colorName, color: colorValue } of paletteColors ) {
 			const normalizedColorValue = currentValueIsCssVariable
@@ -179,7 +190,7 @@ export const extractColorNameFromCurrentValue = (
 	return __( 'Custom' );
 };
 
-export const showTransparentBackground = ( currentValue ) => {
+export const showTransparentBackground = ( currentValue?: string ) => {
 	if ( typeof currentValue === 'undefined' ) {
 		return true;
 	}
@@ -196,10 +207,10 @@ export default function ColorPalette( {
 	value,
 	__experimentalHasMultipleOrigins = false,
 	__experimentalIsRenderedInSidebar = false,
-} ) {
+}: ColorPaletteProps ) {
 	const clearColor = useCallback( () => onChange( undefined ), [ onChange ] );
 	const showMultiplePalettes =
-		__experimentalHasMultipleOrigins && colors?.length;
+		__experimentalHasMultipleOrigins && !! colors?.length;
 	const Component = showMultiplePalettes ? MultiplePalettes : SinglePalette;
 
 	const renderCustomColorPicker = () => (
@@ -212,7 +223,7 @@ export default function ColorPalette( {
 		</DropdownContentWrapper>
 	);
 
-	const colordColor = colord( value );
+	const colordColor = colord( value ?? '' );
 
 	const valueWithoutLeadingHash = value?.startsWith( '#' )
 		? value.substring( 1 )
@@ -287,11 +298,13 @@ export default function ColorPalette( {
 			<Component
 				clearable={ clearable }
 				clearColor={ clearColor }
+				// @ts-ignore Component can be MultiplePalettes or SinglePalette, which have different colors prop types.
 				colors={ colors }
 				onChange={ onChange }
 				value={ value }
 				actions={
 					!! clearable && (
+						// @ts-ignore Required className property.
 						<CircularOptionPicker.ButtonAction
 							onClick={ clearColor }
 						>

packages/components/src/color-palette/stories/index.js → packages/components/src/color-palette/stories/index.tsx

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
 /**
  * WordPress dependencies
  */
@@ -6,11 +11,12 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import ColorPalette from '../';
+import ColorPalette from '..';
 import Popover from '../../popover';
 import { Provider as SlotFillProvider } from '../../slot-fill';
+import type { Color, MultipleColors, ColorPaletteProps } from '../types';
 
-const meta = {
+const meta: ComponentMeta< typeof ColorPalette > = {
 	title: 'Components/ColorPalette',
 	component: ColorPalette,
 	argTypes: {
@@ -42,14 +48,16 @@ const meta = {
 };
 export default meta;
 
-const Template = ( args ) => {
+const Template: ComponentStory< typeof ColorPalette > = ( args ) => {
 	const firstColor =
-		args.colors[ 0 ].color || args.colors[ 0 ].colors[ 0 ].color;
-	const [ color, setColor ] = useState( firstColor );
+		( args.colors as Color[] )[ 0 ].color ||
+		( args.colors as MultipleColors )[ 0 ].colors[ 0 ].color;
+	const [ color, setColor ] = useState< string | undefined >( firstColor );
 
 	return (
 		<SlotFillProvider>
 			<ColorPalette { ...args } value={ color } onChange={ setColor } />
+			{ /* @ts-ignore Property 'Slot' does not exist on type. */ }
 			<Popover.Slot />
 		</SlotFillProvider>
 	);
@@ -92,10 +100,11 @@ MultipleOrigins.args = {
 	],
 };
 
-export const CSSVariables = ( args ) => {
+export const CSSVariables = ( args: ColorPaletteProps ) => {
 	return (
 		<div
 			style={ {
+				// @ts-ignore
 				'--red': '#f00',
 				'--yellow': '#ff0',
 				'--blue': '#00f',

packages/components/src/color-palette/types.ts

@@ -0,0 +1,83 @@
+/**
+ * External dependencies
+ */
+import type { MouseEventHandler, ReactElement } from 'react';
+
+type OnColorChange = ( newColor?: string ) => void;
+
+export type Color = {
+	name: string;
+	color: string;
+};
+
+export type MultipleColors = {
+	name: string;
+	colors: Color[];
+}[];
+
+type PaletteProps = {
+	className?: string;
+	clearColor: () => void;
+	onChange: OnColorChange;
+	value?: string;
+	actions: ( ReactElement | null ) | ( false | ReactElement );
+};
+
+export type SinglePaletteProps = PaletteProps & {
+	colors: Color[];
+};
+
+export type MultiplePalettesProps = PaletteProps & {
+	colors: MultipleColors;
+};
+
+export type CustomColorPickerDropdownProps = {
+	isRenderedInSidebar: boolean;
+	renderContent: () => JSX.Element;
+	popoverProps?: string[];
+	renderToggle: ( props: {
+		isOpen: boolean;
+		onToggle: MouseEventHandler< HTMLButtonElement >;
+	} ) => JSX.Element;
+};
+
+export type ColorPaletteProps = {
+	/**
+	 * Whether the palette should have a clearing button.
+	 */
+	clearable?: boolean;
+	/**
+	 * Classes to be applied to the container.
+	 */
+	className?: string;
+	/**
+	 * Array with the colors to be shown.
+	 */
+	colors: MultipleColors | Color[];
+	/**
+	 * Whether to allow custom color or not.
+	 */
+	disableCustomColors?: boolean;
+	/**
+	 * Whether the color picker should display the alpha channel
+	 * both in the bottom inputs as well as in the color picker itself.
+	 */
+	enableAlpha?: boolean;
+	/**
+	 * Callback called when a color is selected.
+	 */
+	onChange: OnColorChange;
+	/**
+	 * Currently active value.
+	 */
+	value?: string;
+	/**
+	 * Whether the colors prop is an array of color palettes,
+	 * rather than an array of color objects.
+	 */
+	__experimentalHasMultipleOrigins?: boolean;
+	/**
+	 * Whether this is rendered in the sidebar.
+	 */
+	__experimentalIsRenderedInSidebar?: boolean;
+};