update: input color picker

Author: Mutex0x40

src/index.ts

@@ -7,15 +7,41 @@ export * from './shared'
 
 // Re-export inputs with types
 export {
-	AngleInput, BlurInput, BorderRadiusInput,
-	BorderRadiusMultiInput, FontSizeInput, HeightInput, LetterSpacingInput, LineHeightInput, OpacityInput, ScaleInput, SpacingInput, WidthInput, ZIndexInput
+	AngleInput,
+	BlurInput,
+	BorderRadiusInput,
+	BorderRadiusMultiInput,
+	FontSizeInput,
+	HeightInput,
+	LetterSpacingInput,
+	LineHeightInput,
+	OpacityInput,
+	ScaleInput,
+	SpacingInput,
+	WidthInput,
+	ZIndexInput,
 } from './inputs'
 
 export type {
-	AngleInputProps, BaseInputProps,
-	BaseInputPropsWithoutUnit, BlurInputProps, BorderRadiusInputProps,
-	BorderRadiusMultiInputProps, CommonInputProps, FontSizeInputProps, HeightInputProps, LetterSpacingInputProps, LineHeightInputProps, OpacityInputProps, Orientation,
-	Progression, ScaleInputProps, SpacingInputProps, Unit, WidthInputProps, ZIndexInputProps
+	AngleInputProps,
+	BaseInputProps,
+	BaseInputPropsWithoutUnit,
+	BlurInputProps,
+	BorderRadiusInputProps,
+	BorderRadiusMultiInputProps,
+	CommonInputProps,
+	FontSizeInputProps,
+	HeightInputProps,
+	LetterSpacingInputProps,
+	LineHeightInputProps,
+	OpacityInputProps,
+	Orientation,
+	Progression,
+	ScaleInputProps,
+	SpacingInputProps,
+	Unit,
+	WidthInputProps,
+	ZIndexInputProps,
 } from './inputs'
 
 // Default export for backward compatibility

src/input-color-picker/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './use-color-picker-state'
+export * from './use-draggable'

src/input-color-picker/hooks/use-color-picker-state.ts

@@ -0,0 +1,158 @@
+import { useEffect, useState } from 'react'
+import { filterHexInput, hexToRgb, parseColor, rgbToHex } from '../utils/color-utils'
+
+interface UseColorPickerStateProps {
+	value: string
+	onChange?: (color: string) => void
+	onOpacityChange?: (opacity: number) => void
+}
+
+export const useColorPickerState = ({
+	value,
+	onChange,
+	onOpacityChange,
+}: UseColorPickerStateProps) => {
+	const { hex, opacity } = parseColor(value)
+	const [color, setColor] = useState(value)
+	const [inputValue, setInputValue] = useState(hex)
+	const [livePreviewColor, setLivePreviewColor] = useState(value)
+	const [colorType, setColorType] = useState<'color' | 'gradient'>('color')
+	const [opacityValue, setOpacityValue] = useState(isNaN(opacity) ? 100 : opacity)
+
+	useEffect(() => {
+		const { hex: newHex, opacity: newOpacity } = parseColor(value)
+		setInputValue(newHex)
+		setColor(value)
+		setLivePreviewColor(value)
+		setOpacityValue(isNaN(newOpacity) ? 100 : newOpacity)
+	}, [value])
+
+	const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		const finalValue = filterHexInput(e.target.value)
+		setInputValue(finalValue)
+
+		if (finalValue.length === 3 || finalValue.length === 6) {
+			const newHex = `#${finalValue}`
+			const rgb = hexToRgb(newHex)
+			if (rgb) {
+				const newRgbaColor = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${
+					opacityValue / 100
+				})`
+				setLivePreviewColor(newRgbaColor)
+			}
+		}
+	}
+
+	const handleInputFocus = () => {
+		if (inputValue.startsWith('#')) {
+			setInputValue(inputValue.substring(1))
+		}
+	}
+
+	const handleHexChange = () => {
+		if (hex === 'Mixed') return
+
+		let newHex = inputValue.trim()
+		if (!newHex.startsWith('#')) {
+			newHex = `#${newHex}`
+		}
+
+		const rgb = hexToRgb(newHex)
+
+		if (rgb) {
+			const newRgbaColor = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${
+				opacityValue / 100
+			})`
+			onChange?.(newRgbaColor)
+			setInputValue(newHex.toUpperCase())
+		} else {
+			const { hex: originalHex } = parseColor(value)
+			setInputValue(originalHex)
+			setLivePreviewColor(value)
+		}
+	}
+
+	const handleOpacityChange = (newOpacity: number) => {
+		// Проверка на валидность значения
+		const validOpacity = isNaN(newOpacity) ? 100 : newOpacity
+		onOpacityChange?.(validOpacity)
+		setOpacityValue(validOpacity)
+
+		if (color.includes('gradient')) {
+			return
+		}
+
+		const rgbMatch = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/)
+		if (rgbMatch) {
+			const r = rgbMatch[1]
+			const g = rgbMatch[2]
+			const b = rgbMatch[3]
+			const newRgbaColor = `rgba(${r}, ${g}, ${b}, ${validOpacity / 100})`
+			setColor(newRgbaColor)
+			onChange?.(newRgbaColor)
+		} else {
+			const rgb = hexToRgb(color)
+			if (rgb) {
+				const newRgbaColor = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${
+					validOpacity / 100
+				})`
+				setColor(newRgbaColor)
+				onChange?.(newRgbaColor)
+			}
+		}
+	}
+
+	const handleColorChange = (newColor: string) => {
+		onChange?.(newColor)
+		setColor(newColor)
+
+		if (newColor.includes('gradient')) {
+			setLivePreviewColor(newColor)
+
+			if (colorType === 'color') {
+				setColorType('gradient')
+			}
+
+			if (newColor.includes('linear-gradient')) {
+				setInputValue('Linear')
+			} else if (newColor.includes('radial-gradient')) {
+				setInputValue('Radial')
+			} else {
+				setInputValue('Gradient')
+			}
+
+			return
+		}
+
+		if (colorType === 'gradient') {
+			setColorType('color')
+			return
+		}
+
+		const rgbaMatch = newColor.match(
+			/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/
+		)
+		if (rgbaMatch) {
+			const alpha = rgbaMatch[4] !== undefined ? parseFloat(rgbaMatch[4]) : 1
+			const newOpacity = Math.round(alpha * 100)
+			setOpacityValue(isNaN(newOpacity) ? 100 : newOpacity)
+		}
+
+		setLivePreviewColor(newColor)
+		setInputValue(rgbToHex(newColor))
+	}
+
+	return {
+		hex,
+		color,
+		inputValue,
+		livePreviewColor,
+		colorType,
+		opacityValue,
+		handleInputChange,
+		handleInputFocus,
+		handleHexChange,
+		handleOpacityChange,
+		handleColorChange,
+	}
+}

src/input-color-picker/hooks/use-draggable.ts

@@ -0,0 +1,56 @@
+import { useRef, useState } from 'react'
+import type { DragStart, Position } from '../types'
+
+export const useDraggable = () => {
+	const [position, setPosition] = useState<Position>({
+		top: window.innerHeight / 2,
+		left: window.innerWidth / 2,
+	})
+	const dragStart = useRef<DragStart | null>(null)
+
+	const handleDragStart = (
+		e: React.MouseEvent,
+		element: HTMLDivElement | null
+	) => {
+		if (!element) return
+
+		dragStart.current = {
+			x: e.clientX,
+			y: e.clientY,
+			top: element.offsetTop,
+			left: element.offsetLeft,
+		}
+
+		const handleMouseMove = (moveEvent: MouseEvent) => {
+			if (!dragStart.current) return
+			const dx = moveEvent.clientX - dragStart.current.x
+			const dy = moveEvent.clientY - dragStart.current.y
+			setPosition({
+				top: dragStart.current.top + dy,
+				left: dragStart.current.left + dx,
+			})
+		}
+
+		const handleMouseUp = () => {
+			dragStart.current = null
+			window.removeEventListener('mousemove', handleMouseMove)
+			window.removeEventListener('mouseup', handleMouseUp)
+		}
+
+		window.addEventListener('mousemove', handleMouseMove)
+		window.addEventListener('mouseup', handleMouseUp)
+	}
+
+	const resetPosition = () => {
+		setPosition({
+			top: window.innerHeight / 2,
+			left: window.innerWidth / 2,
+		})
+	}
+
+	return {
+		position,
+		handleDragStart,
+		resetPosition,
+	}
+}

src/input-color-picker/index.tsx

@@ -1,2 +1,4 @@
 export { InputColorPicker } from './input-color-picker'
-export type { InputColorPickerProps } from './input-color-picker'
+export type { InputColorPickerProps } from './types'
+export * from './utils'
+export * from './hooks'