ReadyColorPicker

The ReadyColorPicker is a versatile React component that provides an intuitive color selection interface for your Shopify app. It combines Shopify Polaris components to create a popover color picker with a text input field for hex color values.

Import

import { ReadyColorPicker } from 'path/to/ReadyColorPicker';

Props

Usage

import { useState } from 'react';
import { ReadyColorPicker } from './ReadyColorPicker';
 
function ColorSelectionPage() {
  const [selectedColor, setSelectedColor] = useState('#FF5733');
 
  return (
    <ReadyColorPicker
      color={selectedColor}
      setColor={setSelectedColor}
      label="Brand Color"
      helpText="Enter a valid hex color code"
    />
  );
}

Functionality

1. Color Display: Shows the currently selected color in a clickable swatch.
2. Color Picker: Clicking on the swatch opens a popover with a visual color picker.
3. Hex Input: Provides a text field for direct input of hex color values.
4. Color Conversion: Handles conversions between different color formats (HEX, RGB, HSB).
5. Visual Feedback: Uses the Shopify Polaris ColorIcon for clear visual indication when white is selected.

Component Structure

• The component uses various Shopify Polaris components: Popover, ColorPicker, TextField, InlineStack, BlockStack, Box, Text, and Icon.
• It manages its own state for the popover visibility and internal color representation.
• The component syncs the internal color state with the parent component through the color and setColor props.

Key Features

1. Controlled Input: The color can be controlled externally through the color prop.
2. Visual Color Picker: Provides an intuitive interface for color selection.
3. Manual Hex Input: Allows users to input hex color codes directly.
4. Color Format Handling: Seamlessly converts between different color formats.
5. Customizable Label: The label for the color picker can be customized.
6. Help Text: Optional help text can be provided for the hex input field.

Customization

The ReadyColorPicker can be customized by adjusting the props or modifying the component's internal structure. Consider the following customization options:

• Change the size or shape of the color swatch.
• Modify the popover position or alignment.
• Add additional color format options (e.g., RGB, HSL).

Notes

• The component uses hex color format (#RRGGBB) for external communication.
• It handles color parsing and formatting internally, providing a clean interface to the parent component.
• The popover closes automatically when the user clicks outside the popover.

Dependencies

This component relies on the following Shopify Polaris components, icons, and utilities:

• Box, ColorPicker, InlineStack, Popover, Text, TextField, BlockStack, Icon
• ColorIcon
• hexToRgb, hsbToRgb, rgbToHex, rgbToHsb

Ensure these are correctly imported in your project.