Build a React Color Picker Component with TypeScript

This challenge will guide you to create a reusable and interactive color picker component in React using TypeScript. A color picker is a fundamental UI element for applications that involve customization, design, or visual editing, allowing users to select colors easily.

Problem Description

You are tasked with developing a functional color picker component that allows users to select a color from a predefined palette or by inputting a hex code. The component should be implemented in React with TypeScript for type safety and maintainability.

Key Requirements:

1. Predefined Color Palette: Display a selection of predefined color swatches that the user can click to select a color.
2. Hex Code Input: Allow the user to input a hexadecimal color code (e.g., "#FF5733") in a text input field.
3. Color Selection: When a color swatch is clicked or a valid hex code is entered, the component should visually update to reflect the selected color.
4. Selected Color Display: Clearly indicate the currently selected color, both visually (e.g., a border or background) and by displaying its hex code.
5. onChange Prop: The component should accept an onChange prop, a function that is called whenever the selected color changes. This function will receive the newly selected hex color as its argument.
6. TypeScript Integration: All components, props, and state should be typed using TypeScript.

Expected Behavior:

• Upon initial render, a default or the first color in the palette should be selected.
• Clicking on any color swatch should update the selected color and trigger the onChange callback.
• Typing a valid hex code (starting with "#" and followed by 6 hexadecimal characters) into the input field and pressing Enter (or blurring the input) should update the selected color and trigger the onChange callback.
• If an invalid hex code is entered, the input should ideally revert to the previous valid hex code, and no onChange event should be fired.
• The component should visually highlight the currently active color swatch.

Edge Cases to Consider:

• Handling empty or invalid hex code input.
• Case sensitivity of hex codes (though typically hex codes are case-insensitive, ensure your validation handles both).
• Initial state management for the selected color.

Examples

Example 1: Initial Render and Palette Selection

Let's assume a simple palette of Red, Green, and Blue.

Input:
{
  colors: ["#FF0000", "#00FF00", "#0000FF"],
  initialColor: "#FF0000",
  onChange: (newColor: string) => console.log("Color changed to:", newColor)
}

Component Rendered State:
- Display shows a palette with three color swatches: Red, Green, Blue.
- Red swatch is visually highlighted as selected.
- Below the swatches, it displays "Selected Color: #FF0000".
- An input field shows "#FF0000".

User Action: Clicks the Green swatch.

Output (Triggered `onChange`):
console.log("Color changed to:", "#00FF00")

Component Updated State:
- Green swatch is now highlighted.
- "Selected Color: #00FF00" is displayed.
- Input field shows "#00FF00".

Example 2: Hex Code Input and Validation

Continuing from Example 1, with Green selected.

Input (Component State):
- Selected Color: #00FF00
- Input Field: "#00FF00"

User Action:
1. User types "ff5733" into the input field.
2. User presses Enter or blurs the input.

Output (Triggered `onChange`):
console.log("Color changed to:", "#FF5733")

Component Updated State:
- A new swatch (if supported) or just the selected color display updates.
- "Selected Color: #FF5733" is displayed.
- Input field shows "#FF5733".

Example 3: Invalid Hex Code Input

Continuing from Example 2, with #FF5733 selected.

Input (Component State):
- Selected Color: #FF5733
- Input Field: "#FF5733"

User Action:
1. User types "invalidcolor" into the input field.
2. User presses Enter or blurs the input.

Output (Triggered `onChange`):
No `onChange` callback is fired.

Component Updated State:
- The selected color remains #FF5733.
- The input field reverts to displaying "#FF5733".
- "Selected Color: #FF5733" is displayed.

Constraints

• The component should be a functional React component.
• Use TypeScript for all type definitions.
• The predefined color palette should be passed as a prop (an array of strings representing hex codes).
• An initialColor prop can be provided to set the starting color. If not provided, the first color in the palette should be used.
• The hex code input should strictly accept valid hex codes (e.g., "#RRGGBB").
• Consider basic accessibility for color contrast and keyboard navigation if time permits.

Notes

• You'll need to manage the component's internal state to keep track of the currently selected color and the value in the hex code input.
• Regular expressions can be very useful for validating hex color codes.
• Think about how you will visually represent the selected color swatch to distinguish it from others.
• Ensure your onChange handler is called with the correct type (string representing the hex code).