From a1a31bc1fe855b28175b5e12489fa3fe6974d93e Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Wed, 1 Feb 2023 23:26:20 +0900
Subject: [PATCH 01/13] Rename index.tsx

---
 packages/components/src/duotone-picker/{index.js => index.ts} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename packages/components/src/duotone-picker/{index.js => index.ts} (100%)

diff --git a/packages/components/src/duotone-picker/index.js b/packages/components/src/duotone-picker/index.ts
similarity index 100%
rename from packages/components/src/duotone-picker/index.js
rename to packages/components/src/duotone-picker/index.ts

From 66f19f4d2ad608d9ca175345e4d50f4e9e718a0d Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Wed, 1 Feb 2023 23:26:44 +0900
Subject: [PATCH 02/13] Add types for DuotoneSwatch

---
 .../{duotone-swatch.js => duotone-swatch.tsx}         |  2 +-
 .../src/duotone-picker/{utils.js => utils.ts}         | 11 +++++++----
 2 files changed, 8 insertions(+), 5 deletions(-)
 rename packages/components/src/duotone-picker/{duotone-swatch.js => duotone-swatch.tsx} (87%)
 rename packages/components/src/duotone-picker/{utils.js => utils.ts} (89%)

diff --git a/packages/components/src/duotone-picker/duotone-swatch.js b/packages/components/src/duotone-picker/duotone-swatch.tsx
similarity index 87%
rename from packages/components/src/duotone-picker/duotone-swatch.js
rename to packages/components/src/duotone-picker/duotone-swatch.tsx
index d98671affbbd13..5401109c179bbc 100644
--- a/packages/components/src/duotone-picker/duotone-swatch.js
+++ b/packages/components/src/duotone-picker/duotone-swatch.tsx
@@ -10,7 +10,7 @@ import ColorIndicator from '../color-indicator';
 import Icon from '../icon';
 import { getGradientFromCSSColors } from './utils';
 
-function DuotoneSwatch( { values } ) {
+function DuotoneSwatch( { values }: { values: string[] } ) {
 	return values ? (
 		<ColorIndicator
 			colorValue={ getGradientFromCSSColors( values, '135deg' ) }
diff --git a/packages/components/src/duotone-picker/utils.js b/packages/components/src/duotone-picker/utils.ts
similarity index 89%
rename from packages/components/src/duotone-picker/utils.js
rename to packages/components/src/duotone-picker/utils.ts
index f33aff4f965d52..a12da081b5e53f 100644
--- a/packages/components/src/duotone-picker/utils.js
+++ b/packages/components/src/duotone-picker/utils.ts
@@ -46,12 +46,15 @@ export function getDefaultColors( palette ) {
 /**
  * Generate a duotone gradient from a list of colors.
  *
- * @param {string[]} colors CSS color strings.
- * @param {string}   angle  CSS gradient angle.
+ * @param colors CSS color strings.
+ * @param angle  CSS gradient angle.
  *
- * @return {string} CSS gradient string for the duotone swatch.
+ * @return  CSS gradient string for the duotone swatch.
  */
-export function getGradientFromCSSColors( colors = [], angle = '90deg' ) {
+export function getGradientFromCSSColors(
+	colors: string[] = [],
+	angle = '90deg'
+) {
 	const l = 100 / colors.length;
 
 	const stops = colors

From 4ce6ed1a8560755e382d1f6fbd38c8d148c9646d Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Tue, 14 Mar 2023 19:26:08 +0900
Subject: [PATCH 03/13] Add more types

---
 ...-duotone-bar.js => custom-duotone-bar.tsx} | 10 +++-
 .../{duotone-picker.js => duotone-picker.tsx} |  4 +-
 .../src/duotone-picker/duotone-swatch.tsx     |  3 +-
 .../components/src/duotone-picker/types.ts    | 57 +++++++++++++++++++
 .../components/src/duotone-picker/utils.ts    | 32 +++++++----
 packages/components/tsconfig.json             |  1 -
 6 files changed, 93 insertions(+), 14 deletions(-)
 rename packages/components/src/duotone-picker/{custom-duotone-bar.js => custom-duotone-bar.tsx} (71%)
 rename packages/components/src/duotone-picker/{duotone-picker.js => duotone-picker.tsx} (95%)
 create mode 100644 packages/components/src/duotone-picker/types.ts

diff --git a/packages/components/src/duotone-picker/custom-duotone-bar.js b/packages/components/src/duotone-picker/custom-duotone-bar.tsx
similarity index 71%
rename from packages/components/src/duotone-picker/custom-duotone-bar.js
rename to packages/components/src/duotone-picker/custom-duotone-bar.tsx
index 8aef83f8a4bfab..fbfe9f1fb28e05 100644
--- a/packages/components/src/duotone-picker/custom-duotone-bar.js
+++ b/packages/components/src/duotone-picker/custom-duotone-bar.tsx
@@ -11,17 +11,25 @@ import {
 
 const PLACEHOLDER_VALUES = [ '#333', '#CCC' ];
 
-export default function CustomDuotoneBar( { value, onChange } ) {
+export default function CustomDuotoneBar( {
+	value,
+	onChange,
+}: {
+	value?: string[];
+	onChange: ( value?: string[] ) => void;
+} ) {
 	const hasGradient = !! value;
 	const values = hasGradient ? value : PLACEHOLDER_VALUES;
 	const background = getGradientFromCSSColors( values );
 	const controlPoints = getColorStopsFromColors( values );
 	return (
+		// @ts-expect-error Resolve after CustomGradientBar is migrated to TypeScript
 		<CustomGradientBar
 			disableInserter
 			background={ background }
 			hasGradient={ hasGradient }
 			value={ controlPoints }
+			// @ts-expect-error Resolve after CustomGradientBar is migrated to TypeScript
 			onChange={ ( newColorStops ) => {
 				const newValue = getColorsFromColorStops( newColorStops );
 				onChange( newValue );
diff --git a/packages/components/src/duotone-picker/duotone-picker.js b/packages/components/src/duotone-picker/duotone-picker.tsx
similarity index 95%
rename from packages/components/src/duotone-picker/duotone-picker.js
rename to packages/components/src/duotone-picker/duotone-picker.tsx
index 4f9e5ea7b23ce6..9149b752dcf008 100644
--- a/packages/components/src/duotone-picker/duotone-picker.js
+++ b/packages/components/src/duotone-picker/duotone-picker.tsx
@@ -19,6 +19,7 @@ import { VStack } from '../v-stack';
 import CustomDuotoneBar from './custom-duotone-bar';
 import { getDefaultColors, getGradientFromCSSColors } from './utils';
 import { Spacer } from '../spacer';
+import type { DuotonePickerProps } from './types';
 
 function DuotonePicker( {
 	clearable = true,
@@ -29,7 +30,7 @@ function DuotonePicker( {
 	disableCustomDuotone,
 	value,
 	onChange,
-} ) {
+}: DuotonePickerProps ) {
 	const [ defaultDark, defaultLight ] = useMemo(
 		() => getDefaultColors( colorPalette ),
 		[ colorPalette ]
@@ -125,6 +126,7 @@ function DuotonePicker( {
 									newColors.length >= 2
 										? newColors
 										: undefined;
+								// @ts-expect-error TODO: Investigate if this is actually a problem
 								onChange( newValue );
 							} }
 						/>
diff --git a/packages/components/src/duotone-picker/duotone-swatch.tsx b/packages/components/src/duotone-picker/duotone-swatch.tsx
index 5401109c179bbc..1a40bb68f1c51f 100644
--- a/packages/components/src/duotone-picker/duotone-swatch.tsx
+++ b/packages/components/src/duotone-picker/duotone-swatch.tsx
@@ -9,8 +9,9 @@ import { swatch } from '@wordpress/icons';
 import ColorIndicator from '../color-indicator';
 import Icon from '../icon';
 import { getGradientFromCSSColors } from './utils';
+import type { DuotoneSwatchProps } from './types';
 
-function DuotoneSwatch( { values }: { values: string[] } ) {
+function DuotoneSwatch( { values }: DuotoneSwatchProps ) {
 	return values ? (
 		<ColorIndicator
 			colorValue={ getGradientFromCSSColors( values, '135deg' ) }
diff --git a/packages/components/src/duotone-picker/types.ts b/packages/components/src/duotone-picker/types.ts
new file mode 100644
index 00000000000000..08a004eba5afbd
--- /dev/null
+++ b/packages/components/src/duotone-picker/types.ts
@@ -0,0 +1,57 @@
+export type DuotonePickerProps = {
+	/**
+	 * Whether there should be a button to clear the duotone value.
+	 *
+	 * @default true
+	 */
+	clearable?: boolean;
+	/**
+	 * Whether there should be an `unset` option.
+	 *
+	 * @default true
+	 */
+	unsetable?: boolean;
+	/**
+	 * Array of color presets of the form `{ color: '#000000', name: 'Black', slug: 'black' }`.
+	 */
+	colorPalette: Color[];
+	/**
+	 * Array of duotone presets of the form `{ colors: [ '#000000', '#ffffff' ], name: 'Grayscale', slug: 'grayscale' }`.
+	 */
+	duotonePalette: DuotoneColor[];
+	/**
+	 * Whether custom colors should be disabled.
+	 */
+	disableCustomColors?: boolean;
+	/**
+	 * Whether custom duotone values should be disabled.
+	 */
+	disableCustomDuotone?: boolean;
+	/**
+	 * An array of colors for the duotone effect.
+	 */
+	value: string[] | 'unset';
+	/**
+	 * Callback which is called when the duotone colors change.
+	 */
+	onChange: ( value: DuotonePickerProps[ 'value' ] | undefined ) => void;
+};
+
+type Color = {
+	color: string;
+	name: string;
+	slug: string;
+};
+
+type DuotoneColor = {
+	colors: [ string, string ];
+	name: string;
+	slug: string;
+};
+
+export type DuotoneSwatchProps = {
+	/**
+	 * An array of colors to show or `null` to show the placeholder swatch icon.
+	 */
+	values?: [ string, string ] | null;
+};
diff --git a/packages/components/src/duotone-picker/utils.ts b/packages/components/src/duotone-picker/utils.ts
index a12da081b5e53f..06d371902f882b 100644
--- a/packages/components/src/duotone-picker/utils.ts
+++ b/packages/components/src/duotone-picker/utils.ts
@@ -4,6 +4,11 @@
 import { colord, extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 
+/**
+ * Internal dependencies
+ */
+import type { DuotonePickerProps } from './types';
+
 extend( [ namesPlugin ] );
 
 /**
@@ -18,11 +23,13 @@ extend( [ namesPlugin ] );
 /**
  * Calculate the brightest and darkest values from a color palette.
  *
- * @param {Object[]} palette Color palette for the theme.
+ * @param palette Color palette for the theme.
  *
- * @return {string[]} Tuple of the darkest color and brightest color.
+ * @return Tuple of the darkest color and brightest color.
  */
-export function getDefaultColors( palette ) {
+export function getDefaultColors(
+	palette: DuotonePickerProps[ 'colorPalette' ]
+) {
 	// A default dark and light color are required.
 	if ( ! palette || palette.length < 2 ) return [ '#000', '#fff' ];
 
@@ -38,7 +45,10 @@ export function getDefaultColors( palette ) {
 					current.brightness >= max.brightness ? current : max,
 				];
 			},
-			[ { brightness: 1 }, { brightness: 0 } ]
+			[
+				{ brightness: 1, color: '' },
+				{ brightness: 0, color: '' },
+			]
 		)
 		.map( ( { color } ) => color );
 }
@@ -67,11 +77,11 @@ export function getGradientFromCSSColors(
 /**
  * Convert a color array to an array of color stops.
  *
- * @param {string[]} colors CSS colors array
+ * @param colors CSS colors array
  *
- * @return {Object[]} Color stop information.
+ * @return Color stop information.
  */
-export function getColorStopsFromColors( colors ) {
+export function getColorStopsFromColors( colors: string[] ) {
 	return colors.map( ( color, i ) => ( {
 		position: ( i * 100 ) / ( colors.length - 1 ),
 		color,
@@ -81,10 +91,12 @@ export function getColorStopsFromColors( colors ) {
 /**
  * Convert a color stop array to an array colors.
  *
- * @param {Object[]} colorStops Color stop information.
+ * @param colorStops Color stop information.
  *
- * @return {string[]} CSS colors array.
+ * @return CSS colors array.
  */
-export function getColorsFromColorStops( colorStops = [] ) {
+export function getColorsFromColorStops(
+	colorStops: { position: number; color: string }[] = []
+) {
 	return colorStops.map( ( { color } ) => color );
 }
diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json
index aa2434d026ca17..ac8416992ba25a 100644
--- a/packages/components/tsconfig.json
+++ b/packages/components/tsconfig.json
@@ -45,7 +45,6 @@
 		"src/**/stories/**/*.js", // only exclude js files, tsx files should be checked
 		"src/**/test/**/*.js", // only exclude js files, ts{x} files should be checked
 		"src/index.js",
-		"src/duotone-picker",
 		"src/higher-order/with-notices"
 	]
 }

From 6bbbb049f3b715e383c18254dd0ef75486e7171e Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Tue, 14 Mar 2023 19:34:31 +0900
Subject: [PATCH 04/13] Add main JSDoc

---
 .../src/duotone-picker/duotone-picker.tsx     | 33 +++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/packages/components/src/duotone-picker/duotone-picker.tsx b/packages/components/src/duotone-picker/duotone-picker.tsx
index 9149b752dcf008..c9e20b0afa1ed3 100644
--- a/packages/components/src/duotone-picker/duotone-picker.tsx
+++ b/packages/components/src/duotone-picker/duotone-picker.tsx
@@ -21,6 +21,39 @@ import { getDefaultColors, getGradientFromCSSColors } from './utils';
 import { Spacer } from '../spacer';
 import type { DuotonePickerProps } from './types';
 
+/**
+ * ```jsx
+ * import { DuotonePicker, DuotoneSwatch } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const DUOTONE_PALETTE = [
+ * 	{ colors: [ '#8c00b7', '#fcff41' ], name: 'Purple and yellow', slug: 'purple-yellow' },
+ * 	{ colors: [ '#000097', '#ff4747' ], name: 'Blue and red', slug: 'blue-red' },
+ * ];
+ *
+ * const COLOR_PALETTE = [
+ * 	{ color: '#ff4747', name: 'Red', slug: 'red' },
+ * 	{ color: '#fcff41', name: 'Yellow', slug: 'yellow' },
+ * 	{ color: '#000097', name: 'Blue', slug: 'blue' },
+ * 	{ color: '#8c00b7', name: 'Purple', slug: 'purple' },
+ * ];
+ *
+ * const Example = () => {
+ * 	const [ duotone, setDuotone ] = useState( [ '#000000', '#ffffff' ] );
+ * 	return (
+ * 		<>
+ * 			<DuotonePicker
+ * 				duotonePalette={ DUOTONE_PALETTE }
+ * 				colorPalette={ COLOR_PALETTE }
+ * 				value={ duotone }
+ * 				onChange={ setDuotone }
+ * 			/>
+ * 			<DuotoneSwatch values={ duotone } />
+ * 		</>
+ * 	);
+ * };
+ * ```
+ */
 function DuotonePicker( {
 	clearable = true,
 	unsetable = true,

From e20e675021905a31e0b852633900fd3c0e4a95ee Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Tue, 14 Mar 2023 19:40:08 +0900
Subject: [PATCH 05/13] Move ColorListPicker into duotone-picker folder

---
 .../{ => duotone-picker}/color-list-picker/index.tsx   | 10 +++++-----
 .../{ => duotone-picker}/color-list-picker/style.scss  |  0
 .../{ => duotone-picker}/color-list-picker/types.ts    |  0
 .../components/src/duotone-picker/duotone-picker.tsx   |  2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)
 rename packages/components/src/{ => duotone-picker}/color-list-picker/index.tsx (89%)
 rename packages/components/src/{ => duotone-picker}/color-list-picker/style.scss (100%)
 rename packages/components/src/{ => duotone-picker}/color-list-picker/types.ts (100%)

diff --git a/packages/components/src/color-list-picker/index.tsx b/packages/components/src/duotone-picker/color-list-picker/index.tsx
similarity index 89%
rename from packages/components/src/color-list-picker/index.tsx
rename to packages/components/src/duotone-picker/color-list-picker/index.tsx
index 48f56ca9abac6d..8a65382482cdc9 100644
--- a/packages/components/src/color-list-picker/index.tsx
+++ b/packages/components/src/duotone-picker/color-list-picker/index.tsx
@@ -7,11 +7,11 @@ import { swatch } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import Button from '../button';
-import ColorPalette from '../color-palette';
-import ColorIndicator from '../color-indicator';
-import Icon from '../icon';
-import { HStack } from '../h-stack';
+import Button from '../../button';
+import ColorPalette from '../../color-palette';
+import ColorIndicator from '../../color-indicator';
+import Icon from '../../icon';
+import { HStack } from '../../h-stack';
 import type { ColorListPickerProps, ColorOptionProps } from './types';
 
 function ColorOption( {
diff --git a/packages/components/src/color-list-picker/style.scss b/packages/components/src/duotone-picker/color-list-picker/style.scss
similarity index 100%
rename from packages/components/src/color-list-picker/style.scss
rename to packages/components/src/duotone-picker/color-list-picker/style.scss
diff --git a/packages/components/src/color-list-picker/types.ts b/packages/components/src/duotone-picker/color-list-picker/types.ts
similarity index 100%
rename from packages/components/src/color-list-picker/types.ts
rename to packages/components/src/duotone-picker/color-list-picker/types.ts
diff --git a/packages/components/src/duotone-picker/duotone-picker.tsx b/packages/components/src/duotone-picker/duotone-picker.tsx
index c9e20b0afa1ed3..7d854242e59c2a 100644
--- a/packages/components/src/duotone-picker/duotone-picker.tsx
+++ b/packages/components/src/duotone-picker/duotone-picker.tsx
@@ -12,7 +12,7 @@ import { __, sprintf } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import ColorListPicker from '../color-list-picker';
+import ColorListPicker from './color-list-picker';
 import CircularOptionPicker from '../circular-option-picker';
 import { VStack } from '../v-stack';
 

From 5b39e04d47d32cccf629d3a49e03a8ec36e8eefc Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Tue, 14 Mar 2023 19:48:23 +0900
Subject: [PATCH 06/13] Convert stories

---
 .../{duotone-picker.js => duotone-picker.tsx} | 23 ++++++++++++-------
 .../{duotone-swatch.js => duotone-swatch.tsx} | 12 +++++++---
 .../components/src/duotone-picker/types.ts    | 10 +++++---
 3 files changed, 31 insertions(+), 14 deletions(-)
 rename packages/components/src/duotone-picker/stories/{duotone-picker.js => duotone-picker.tsx} (69%)
 rename packages/components/src/duotone-picker/stories/{duotone-swatch.js => duotone-swatch.tsx} (63%)

diff --git a/packages/components/src/duotone-picker/stories/duotone-picker.js b/packages/components/src/duotone-picker/stories/duotone-picker.tsx
similarity index 69%
rename from packages/components/src/duotone-picker/stories/duotone-picker.js
rename to packages/components/src/duotone-picker/stories/duotone-picker.tsx
index 6186dd1b3ad37f..a8a1111720d369 100644
--- a/packages/components/src/duotone-picker/stories/duotone-picker.js
+++ b/packages/components/src/duotone-picker/stories/duotone-picker.tsx
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
 /**
  * WordPress dependencies
  */
@@ -6,23 +11,22 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { DuotonePicker } from '../';
+import { DuotonePicker } from '..';
+import type { DuotonePickerProps } from '../types';
 
-export default {
+const meta: ComponentMeta< typeof DuotonePicker > = {
 	title: 'Components/DuotonePicker',
 	component: DuotonePicker,
 	argTypes: {
-		clearable: { control: { type: 'boolean' } },
-		disableCustomColors: { control: { type: 'boolean' } },
-		disableCustomDuotone: { control: { type: 'boolean' } },
 		onChange: { action: 'onChange' },
-		unsetable: { control: { type: 'boolean' } },
+		value: { control: { type: null } },
 	},
 	parameters: {
 		controls: { expanded: true },
 		docs: { source: { state: 'open' } },
 	},
 };
+export default meta;
 
 const DUOTONE_PALETTE = [
 	{
@@ -44,8 +48,11 @@ const COLOR_PALETTE = [
 	{ color: '#8c00b7', name: 'Purple', slug: 'purple' },
 ];
 
-const Template = ( { onChange, ...args } ) => {
-	const [ value, setValue ] = useState();
+const Template: ComponentStory< typeof DuotonePicker > = ( {
+	onChange,
+	...args
+} ) => {
+	const [ value, setValue ] = useState< DuotonePickerProps[ 'value' ] >();
 
 	return (
 		<DuotonePicker
diff --git a/packages/components/src/duotone-picker/stories/duotone-swatch.js b/packages/components/src/duotone-picker/stories/duotone-swatch.tsx
similarity index 63%
rename from packages/components/src/duotone-picker/stories/duotone-swatch.js
rename to packages/components/src/duotone-picker/stories/duotone-swatch.tsx
index e64b3e3c2c295f..1485bca10e1d8f 100644
--- a/packages/components/src/duotone-picker/stories/duotone-swatch.js
+++ b/packages/components/src/duotone-picker/stories/duotone-swatch.tsx
@@ -1,9 +1,14 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
 /**
  * Internal dependencies
  */
-import { DuotoneSwatch } from '../';
+import { DuotoneSwatch } from '..';
 
-export default {
+const meta: ComponentMeta< typeof DuotoneSwatch > = {
 	title: 'Components/DuotoneSwatch',
 	component: DuotoneSwatch,
 	parameters: {
@@ -11,8 +16,9 @@ export default {
 		docs: { source: { state: 'open' } },
 	},
 };
+export default meta;
 
-const Template = ( args ) => {
+const Template: ComponentStory< typeof DuotoneSwatch > = ( args ) => {
 	return <DuotoneSwatch { ...args } />;
 };
 
diff --git a/packages/components/src/duotone-picker/types.ts b/packages/components/src/duotone-picker/types.ts
index 08a004eba5afbd..3d5927675f542f 100644
--- a/packages/components/src/duotone-picker/types.ts
+++ b/packages/components/src/duotone-picker/types.ts
@@ -21,16 +21,20 @@ export type DuotonePickerProps = {
 	duotonePalette: DuotoneColor[];
 	/**
 	 * Whether custom colors should be disabled.
+	 *
+	 * @default false
 	 */
 	disableCustomColors?: boolean;
 	/**
 	 * Whether custom duotone values should be disabled.
+	 *
+	 * @default false
 	 */
 	disableCustomDuotone?: boolean;
 	/**
 	 * An array of colors for the duotone effect.
 	 */
-	value: string[] | 'unset';
+	value?: string[] | 'unset';
 	/**
 	 * Callback which is called when the duotone colors change.
 	 */
@@ -44,7 +48,7 @@ type Color = {
 };
 
 type DuotoneColor = {
-	colors: [ string, string ];
+	colors: string[];
 	name: string;
 	slug: string;
 };
@@ -53,5 +57,5 @@ export type DuotoneSwatchProps = {
 	/**
 	 * An array of colors to show or `null` to show the placeholder swatch icon.
 	 */
-	values?: [ string, string ] | null;
+	values?: string[] | null;
 };

From d4e8260b669bc28ee9f8edccf77f9ee80e6a4eff Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Tue, 14 Mar 2023 20:58:18 +0900
Subject: [PATCH 07/13] Add changelog

---
 packages/components/CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 4031a4712e3e0d..7875da079426f4 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -22,6 +22,7 @@
 -   `withFocusReturn` HOC: Convert to TypeScript ([#48748](https://github.com/WordPress/gutenberg/pull/48748)).
 -   `navigateRegions` HOC: Convert to TypeScript ([#48632](https://github.com/WordPress/gutenberg/pull/48632)).
 -   `withSpokenMessages`: HOC: Convert to TypeScript ([#48163](https://github.com/WordPress/gutenberg/pull/48163)).
+-   `DuotonePicker`, `DuotoneSwatch`: Convert to TypeScript ([#49060](https://github.com/WordPress/gutenberg/pull/49060)).
 -   `DimensionControl(Experimental)`: Convert to TypeScript ([#47351](https://github.com/WordPress/gutenberg/pull/47351)).
 -   `PaletteEdit`: Convert to TypeScript ([#47764](https://github.com/WordPress/gutenberg/pull/47764)).
 

From 77b648cebc040dceabcece093a6a5e9096b5c888 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Wed, 15 Mar 2023 19:46:51 +0900
Subject: [PATCH 08/13] Fix style imports

---
 packages/components/src/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/style.scss b/packages/components/src/style.scss
index 1cb363cb6d50c2..1c19336552aba4 100644
--- a/packages/components/src/style.scss
+++ b/packages/components/src/style.scss
@@ -11,7 +11,6 @@
 @import "./palette-edit/style.scss";
 @import "./color-indicator/style.scss";
 @import "./combobox-control/style.scss";
-@import "./color-list-picker/style.scss";
 @import "./color-palette/style.scss";
 @import "./custom-gradient-picker/style.scss";
 @import "./custom-select-control/style.scss";
@@ -21,6 +20,7 @@
 @import "./dropdown/style.scss";
 @import "./dropdown-menu/style.scss";
 @import "./duotone-picker/style.scss";
+@import "./duotone-picker/color-list-picker/style.scss";
 @import "./form-toggle/style.scss";
 @import "./form-token-field/style.scss";
 @import "./guide/style.scss";

From 6ee702761b8c9ba5ccf5bfdb3331eeb3011c521b Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Tue, 21 Mar 2023 01:08:00 +0900
Subject: [PATCH 09/13] ColorListPicker: Tweak types

---
 .../components/src/duotone-picker/color-list-picker/index.tsx  | 3 ++-
 .../components/src/duotone-picker/color-list-picker/types.ts   | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/duotone-picker/color-list-picker/index.tsx b/packages/components/src/duotone-picker/color-list-picker/index.tsx
index 8a65382482cdc9..95ed02c639e632 100644
--- a/packages/components/src/duotone-picker/color-list-picker/index.tsx
+++ b/packages/components/src/duotone-picker/color-list-picker/index.tsx
@@ -75,7 +75,8 @@ function ColorListPicker( {
 					disableCustomColors={ disableCustomColors }
 					enableAlpha={ enableAlpha }
 					onChange={ ( newColor ) => {
-						const newColors = value.slice();
+						const newColors: ( string | undefined )[] =
+							value.slice();
 						newColors[ index ] = newColor;
 						onChange( newColors );
 					} }
diff --git a/packages/components/src/duotone-picker/color-list-picker/types.ts b/packages/components/src/duotone-picker/color-list-picker/types.ts
index becfc405b2b955..73c1900235bd0e 100644
--- a/packages/components/src/duotone-picker/color-list-picker/types.ts
+++ b/packages/components/src/duotone-picker/color-list-picker/types.ts
@@ -21,7 +21,7 @@ export type ColorListPickerProps = {
 	/**
 	 * An array containing the currently selected colors.
 	 */
-	value?: Array< string | undefined >;
+	value?: Array< string >;
 	/**
 	 * Controls whether the custom color picker is displayed.
 	 */

From ea8ce4f8e7e6bf8bcc4ce96208ab8e3f03604aa8 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Tue, 21 Mar 2023 01:09:20 +0900
Subject: [PATCH 10/13] Add code comment

---
 packages/components/src/duotone-picker/duotone-picker.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/src/duotone-picker/duotone-picker.tsx b/packages/components/src/duotone-picker/duotone-picker.tsx
index 7d854242e59c2a..23c01f81fdac21 100644
--- a/packages/components/src/duotone-picker/duotone-picker.tsx
+++ b/packages/components/src/duotone-picker/duotone-picker.tsx
@@ -160,6 +160,7 @@ function DuotonePicker( {
 										? newColors
 										: undefined;
 								// @ts-expect-error TODO: Investigate if this is actually a problem
+								// See also https://github.com/WordPress/gutenberg/pull/49060#discussion_r1136951035
 								onChange( newValue );
 							} }
 						/>

From 2c31a5c164230d4cf2d73900a68c8cf505e5b3a2 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Tue, 21 Mar 2023 18:27:16 +0900
Subject: [PATCH 11/13] Improve TODO comment

---
 packages/components/src/duotone-picker/duotone-picker.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/duotone-picker/duotone-picker.tsx b/packages/components/src/duotone-picker/duotone-picker.tsx
index 23c01f81fdac21..2daacb15c9159c 100644
--- a/packages/components/src/duotone-picker/duotone-picker.tsx
+++ b/packages/components/src/duotone-picker/duotone-picker.tsx
@@ -159,7 +159,8 @@ function DuotonePicker( {
 									newColors.length >= 2
 										? newColors
 										: undefined;
-								// @ts-expect-error TODO: Investigate if this is actually a problem
+								// @ts-expect-error TODO: The color arrays for a DuotonePicker should be a tuple of two colors,
+								// but it's currently typed as a string[].
 								// See also https://github.com/WordPress/gutenberg/pull/49060#discussion_r1136951035
 								onChange( newValue );
 							} }

From e3f041c8560d40a0059c4cef902727dc09880499 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Tue, 21 Mar 2023 20:13:42 +0900
Subject: [PATCH 12/13] Fix typo

---
 .../components/src/duotone-picker/color-list-picker/types.ts    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/duotone-picker/color-list-picker/types.ts b/packages/components/src/duotone-picker/color-list-picker/types.ts
index 73c1900235bd0e..5c42e6c9371b62 100644
--- a/packages/components/src/duotone-picker/color-list-picker/types.ts
+++ b/packages/components/src/duotone-picker/color-list-picker/types.ts
@@ -5,7 +5,7 @@ import type { CSSProperties } from 'react';
 
 export type ColorListPickerProps = {
 	/**
-	 * A list of predifened colors. Each color is an object with a `name` and a
+	 * A list of predefined colors. Each color is an object with a `name` and a
 	 * `color` value.
 	 * The `name` is a string used to identify the color in the UI.
 	 * The `color` is a valid CSS color string.

From 814287526e865c7273c24326601d2e116c570557 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Tue, 21 Mar 2023 20:21:41 +0900
Subject: [PATCH 13/13] Move changelog

---
 packages/components/CHANGELOG.md | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 974b92acc89d03..e00986f2bd4715 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -11,6 +11,10 @@
 -   `CustomGradientPicker`: improve initial state UI ([#49146](https://github.com/WordPress/gutenberg/pull/49146)).
 -	`AnglePickerControl`: Style to better fit in narrow contexts and improve RTL layout ([#49046](https://github.com/WordPress/gutenberg/pull/49046)).
 
+### Internal
+
+-   `DuotonePicker`, `DuotoneSwatch`: Convert to TypeScript ([#49060](https://github.com/WordPress/gutenberg/pull/49060)).
+
 ## 23.6.0 (2023-03-15)
 
 ### Enhancements
@@ -36,7 +40,6 @@
 -   `navigateRegions` HOC: Convert to TypeScript ([#48632](https://github.com/WordPress/gutenberg/pull/48632)).
 -   `withSpokenMessages`: HOC: Convert to TypeScript ([#48163](https://github.com/WordPress/gutenberg/pull/48163)).
 -   `withNotices`: HOC: Convert to TypeScript ([#49088](https://github.com/WordPress/gutenberg/pull/49088)).
--   `DuotonePicker`, `DuotoneSwatch`: Convert to TypeScript ([#49060](https://github.com/WordPress/gutenberg/pull/49060)).
 -   `ToolbarButton`: Convert to TypeScript ([#47750](https://github.com/WordPress/gutenberg/pull/47750)).
 -   `DimensionControl(Experimental)`: Convert to TypeScript ([#47351](https://github.com/WordPress/gutenberg/pull/47351)).
 -   `PaletteEdit`: Convert to TypeScript ([#47764](https://github.com/WordPress/gutenberg/pull/47764)).