@cdx-ui/primitives 0.1.6 → 0.2.0

package/src/color-slider/ColorSliderRoot.tsx

@@ -0,0 +1,222 @@
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Platform, View } from 'react-native';
+import { useControllableState } from '@cdx-ui/utils';
+import { parseColor, type Color } from '../color';
+import { useOptionalColorPickerContext } from '../color-picker';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { ColorSliderProvider } from './context';
+import type {
+  ColorSliderConfiguration,
+  ColorSliderContextValue,
+  ColorSliderLayout,
+  ColorSliderSize,
+  IColorSliderProps,
+} from './types';
+import {
+  clampColorSliderValue,
+  formatColorSliderValue,
+  getColorSliderChannelValue,
+  getColorSliderGradientColors,
+  getColorSliderRange,
+  withColorSliderChannel,
+} from './utils';
+
+function createDefaultColor(): Color {
+  const color = parseColor('#FF0000');
+  if (!color) {
+    throw new Error('ColorSlider default color could not be parsed');
+  }
+  return color;
+}
+
+const DEFAULT_COLOR = createDefaultColor();
+const EMPTY_SIZE: ColorSliderSize = { width: 0, height: 0 };
+
+export type ColorSliderRootProps = IColorSliderProps & {
+  readonly asChild?: boolean;
+};
+
+export const ColorSliderRoot = forwardRef<View, ColorSliderRootProps>(
+  (
+    {
+      asChild,
+      value: valueProp,
+      defaultValue,
+      onValueChange,
+      onValueChangeComplete,
+      colorSpace,
+      channel,
+      orientation = 'horizontal',
+      step = 1,
+      pageStep = 10,
+      isDisabled = false,
+      accessibilityLabel,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const picker = useOptionalColorPickerContext();
+    const usesPickerContext =
+      picker !== null && valueProp === undefined && defaultValue === undefined;
+    const [localValue, setLocalValue] = useControllableState<Color>({
+      prop: valueProp,
+      defaultProp: defaultValue ?? DEFAULT_COLOR,
+      onChange: onValueChange,
+    });
+    const value = (usesPickerContext ? picker.value : localValue) ?? DEFAULT_COLOR;
+    const [layout, setLayoutState] = useState<ColorSliderLayout | null>(null);
+    const [thumbSize, setThumbSizeState] = useState<ColorSliderSize>(EMPTY_SIZE);
+    const [isDragging, setIsDragging] = useState(false);
+    const configuration = useMemo<ColorSliderConfiguration>(
+      () => ({ colorSpace, channel }) as ColorSliderConfiguration,
+      [channel, colorSpace],
+    );
+    const { min, max } = getColorSliderRange(configuration);
+    const resolvedChannelValue = getColorSliderChannelValue(value, configuration);
+    const [isHueAtEnd, setIsHueAtEnd] = useState(false);
+    const channelValue =
+      configuration.channel === 'hue' && resolvedChannelValue === min && isHueAtEnd
+        ? max
+        : resolvedChannelValue;
+    const valueRef = useRef(value);
+    valueRef.current = value;
+
+    useEffect(() => {
+      if (configuration.channel !== 'hue' || resolvedChannelValue !== min) {
+        setIsHueAtEnd(false);
+      }
+    }, [configuration.channel, min, resolvedChannelValue]);
+
+    const commitValue = useCallback(
+      (next: Color, complete = false) => {
+        valueRef.current = next;
+        if (usesPickerContext) {
+          onValueChange?.(next);
+          picker.onValueChange(next);
+        } else {
+          setLocalValue(next);
+        }
+        if (complete) {
+          onValueChangeComplete?.(next);
+        }
+      },
+      [onValueChange, onValueChangeComplete, picker, setLocalValue, usesPickerContext],
+    );
+
+    const setChannelValue = useCallback(
+      (nextValue: number, complete = false) => {
+        if (isDisabled) {
+          return;
+        }
+        const clamped = clampColorSliderValue(nextValue, min, max);
+        const snapped = step > 0 ? min + Math.round((clamped - min) / step) * step : clamped;
+        const committedValue = clampColorSliderValue(snapped, min, max);
+        const nextColor = withColorSliderChannel(valueRef.current, configuration, committedValue);
+        setIsHueAtEnd(configuration.channel === 'hue' && committedValue === max);
+        commitValue(nextColor, complete);
+      },
+      [commitValue, configuration, isDisabled, max, min, step],
+    );
+
+    const setValueFromRatio = useCallback(
+      (ratio: number, complete = false) => {
+        const clampedRatio = clampColorSliderValue(ratio, 0, 1);
+        setChannelValue(min + clampedRatio * (max - min), complete);
+      },
+      [max, min, setChannelValue],
+    );
+
+    const setLayout = useCallback((next: ColorSliderLayout) => {
+      setLayoutState((previous) =>
+        previous !== null &&
+        previous.width === next.width &&
+        previous.height === next.height &&
+        previous.x === next.x &&
+        previous.y === next.y
+          ? previous
+          : next,
+      );
+    }, []);
+
+    const setThumbSize = useCallback((next: ColorSliderSize) => {
+      setThumbSizeState((previous) =>
+        previous.width === next.width && previous.height === next.height ? previous : next,
+      );
+    }, []);
+
+    const contextValue = useMemo<ColorSliderContextValue>(
+      () => ({
+        ...configuration,
+        value,
+        channelValue,
+        valueLabel: formatColorSliderValue(channelValue, configuration),
+        min,
+        max,
+        step,
+        pageStep,
+        percent: max <= min ? 0 : ((channelValue - min) / (max - min)) * 100,
+        orientation,
+        isDisabled,
+        isDragging,
+        accessibilityLabel,
+        layout,
+        thumbSize,
+        gradientColors: getColorSliderGradientColors(value, configuration),
+        setLayout,
+        setThumbSize,
+        setIsDragging,
+        setChannelValue,
+        setValueFromRatio,
+      }),
+      [
+        accessibilityLabel,
+        channelValue,
+        configuration,
+        isDisabled,
+        isDragging,
+        layout,
+        max,
+        min,
+        orientation,
+        pageStep,
+        setChannelValue,
+        setLayout,
+        setThumbSize,
+        setValueFromRatio,
+        step,
+        thumbSize,
+        value,
+      ],
+    );
+
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <ColorSliderProvider value={contextValue}>
+        <Comp
+          ref={ref}
+          {...props}
+          role={Platform.OS === 'web' ? 'group' : undefined}
+          aria-label={props['aria-label'] ?? accessibilityLabel}
+          accessibilityLabel={accessibilityLabel}
+          accessibilityState={{ disabled: isDisabled }}
+          {...mergeDataAttributes(
+            props,
+            dataAttributes({
+              disabled: isDisabled,
+              colorSpace,
+              channel,
+              orientation,
+            }),
+          )}
+        >
+          {children}
+        </Comp>
+      </ColorSliderProvider>
+    );
+  },
+);
+
+ColorSliderRoot.displayName = 'ColorSliderRoot';

package/src/color-slider/ColorSliderThumb.tsx

@@ -0,0 +1,294 @@
+import { forwardRef, useCallback, useMemo, useRef, type ComponentRef } from 'react';
+import {
+  PanResponder,
+  Platform,
+  Pressable,
+  View,
+  type AccessibilityActionEvent,
+  type GestureResponderEvent,
+  type LayoutChangeEvent,
+  type PressableProps,
+  type ViewStyle,
+} from 'react-native';
+import { composeEventHandlers } from '@cdx-ui/utils';
+import { useFocus, useFocusRing } from '@react-native-aria/focus';
+import { useHover } from '@react-native-aria/interactions';
+import { Slot } from '../slot';
+import { getPointerCoords, useWebSliderDrag } from '../slider/useSliderPointer';
+import { clamp, getThumbTravel, percentToThumbOffset } from '../slider/utils';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { useColorSliderContext } from './context';
+import type { ColorSliderKeyboardEvent, IColorSliderThumbProps } from './types';
+
+export interface ColorSliderThumbProps extends IColorSliderThumbProps {}
+
+export const ColorSliderThumb = forwardRef<ComponentRef<typeof Pressable>, ColorSliderThumbProps>(
+  (
+    {
+      asChild,
+      style,
+      accessibilityLabel: accessibilityLabelProp,
+      onLayout,
+      onFocus,
+      onBlur,
+      onHoverIn,
+      onHoverOut,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const {
+      channel,
+      channelValue,
+      valueLabel,
+      min,
+      max,
+      step,
+      pageStep,
+      percent,
+      orientation,
+      isDisabled,
+      isDragging,
+      layout,
+      thumbSize,
+      accessibilityLabel: rootAccessibilityLabel,
+      setThumbSize,
+      setIsDragging,
+      setChannelValue,
+      setValueFromRatio,
+    } = useColorSliderContext();
+    const { focusProps, isFocused } = useFocus();
+    const { focusProps: focusRingProps, isFocusVisible } = useFocusRing() as {
+      focusProps: typeof focusProps;
+      isFocusVisible: boolean;
+    };
+    const { hoverProps, isHovered } = useHover();
+
+    const percentRef = useRef(percent);
+    percentRef.current = percent;
+    const dragStartRatioRef = useRef(0);
+    const lastRatioRef = useRef(percent / 100);
+    const orientationRef = useRef(orientation);
+    orientationRef.current = orientation;
+    const layoutRef = useRef(layout);
+    layoutRef.current = layout;
+    const thumbSizeRef = useRef(thumbSize);
+    thumbSizeRef.current = thumbSize;
+    const isDisabledRef = useRef(isDisabled);
+    isDisabledRef.current = isDisabled;
+    const setIsDraggingRef = useRef(setIsDragging);
+    setIsDraggingRef.current = setIsDragging;
+    const setValueFromRatioRef = useRef(setValueFromRatio);
+    setValueFromRatioRef.current = setValueFromRatio;
+    const thumbAxisSize = orientation === 'horizontal' ? thumbSize.width : thumbSize.height;
+
+    const { startDrag } = useWebSliderDrag({
+      isDisabled,
+      setIsDragging,
+      setValueFromRatio,
+      trackLayout: layout,
+      orientation,
+      thumbSize: thumbAxisSize,
+    });
+
+    const panResponder = useMemo(
+      () =>
+        PanResponder.create({
+          onStartShouldSetPanResponder: () => !isDisabledRef.current,
+          onMoveShouldSetPanResponder: () => !isDisabledRef.current,
+          onPanResponderTerminationRequest: () => false,
+          onShouldBlockNativeResponder: () => true,
+          onPanResponderGrant: () => {
+            if (isDisabledRef.current) {
+              return;
+            }
+            setIsDraggingRef.current(true);
+            dragStartRatioRef.current = percentRef.current / 100;
+            lastRatioRef.current = dragStartRatioRef.current;
+          },
+          onPanResponderMove: (_event, gestureState) => {
+            const currentLayout = layoutRef.current;
+            if (!currentLayout) {
+              return;
+            }
+            const isHorizontal = orientationRef.current === 'horizontal';
+            const trackSize = isHorizontal ? currentLayout.width : currentLayout.height;
+            const currentThumbSize = isHorizontal
+              ? thumbSizeRef.current.width
+              : thumbSizeRef.current.height;
+            const travel = getThumbTravel(trackSize, currentThumbSize);
+            if (travel <= 0) {
+              return;
+            }
+            const delta = isHorizontal ? gestureState.dx : -gestureState.dy;
+            const nextRatio = clamp(dragStartRatioRef.current + delta / travel, 0, 1);
+            lastRatioRef.current = nextRatio;
+            setValueFromRatioRef.current(nextRatio);
+          },
+          onPanResponderRelease: () => {
+            setIsDraggingRef.current(false);
+            setValueFromRatioRef.current(lastRatioRef.current, true);
+          },
+          onPanResponderTerminate: () => {
+            setIsDraggingRef.current(false);
+            setValueFromRatioRef.current(lastRatioRef.current, true);
+          },
+        }),
+      [],
+    );
+
+    const positionStyle = useMemo<ViewStyle>(() => {
+      const trackWidth = layout?.width ?? 0;
+      const trackHeight = layout?.height ?? 0;
+
+      if (orientation === 'vertical') {
+        return {
+          position: 'absolute',
+          left: '50%',
+          bottom: percentToThumbOffset(percent, trackHeight, thumbSize.height),
+          marginLeft: -thumbSize.width / 2,
+        };
+      }
+      return {
+        position: 'absolute',
+        top: '50%',
+        left: percentToThumbOffset(percent, trackWidth, thumbSize.width),
+        transform: [{ translateY: -thumbSize.height / 2 }],
+      };
+    }, [layout, orientation, percent, thumbSize.height, thumbSize.width]);
+
+    const handleKeyDown = useCallback(
+      (event: ColorSliderKeyboardEvent) => {
+        if (isDisabled) {
+          return;
+        }
+        const key = event.nativeEvent?.key ?? event.key;
+        const shiftKey = event.nativeEvent?.shiftKey ?? event.shiftKey;
+        const increment = shiftKey ? pageStep : step;
+        let next = channelValue;
+        let handled = true;
+
+        if (key === 'ArrowUp' || key === 'ArrowRight') {
+          next += increment;
+        } else if (key === 'ArrowDown' || key === 'ArrowLeft') {
+          next -= increment;
+        } else if (key === 'PageUp') {
+          next += pageStep;
+        } else if (key === 'PageDown') {
+          next -= pageStep;
+        } else if (key === 'Home') {
+          next = min;
+        } else if (key === 'End') {
+          next = max;
+        } else {
+          handled = false;
+        }
+
+        if (handled) {
+          event.preventDefault?.();
+          setChannelValue(next, true);
+        }
+      },
+      [channelValue, isDisabled, max, min, pageStep, setChannelValue, step],
+    );
+
+    const handleAccessibilityAction = useCallback(
+      (event: AccessibilityActionEvent) => {
+        if (event.nativeEvent.actionName === 'increment') {
+          setChannelValue(channelValue + step, true);
+        } else if (event.nativeEvent.actionName === 'decrement') {
+          setChannelValue(channelValue - step, true);
+        }
+      },
+      [channelValue, setChannelValue, step],
+    );
+
+    const handleLayout = useCallback(
+      (event: LayoutChangeEvent) => {
+        const { width, height } = event.nativeEvent.layout;
+        setThumbSize({ width, height });
+        onLayout?.(event);
+      },
+      [onLayout, setThumbSize],
+    );
+
+    const isWeb = Platform.OS === 'web';
+    const Comp = asChild ? Slot : isWeb ? Pressable : View;
+    const accessibilityLabel = accessibilityLabelProp ?? rootAccessibilityLabel ?? channel;
+    const handlePointerDown = useCallback(
+      (event: GestureResponderEvent) => {
+        if (Platform.OS !== 'web' || isDisabled) {
+          return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        const { x, y } = getPointerCoords(event.nativeEvent);
+        startDrag(x, y, percentRef.current / 100);
+      },
+      [isDisabled, startDrag],
+    );
+    const pointerProps =
+      Platform.OS === 'web'
+        ? ({
+            onPointerDown: handlePointerDown as unknown as PressableProps['onPointerDown'],
+            disabled: isDisabled,
+          } as PressableProps)
+        : panResponder.panHandlers;
+    const webAccessibilityProps = isWeb
+      ? ({
+          onKeyDown: handleKeyDown,
+          tabIndex: isDisabled ? -1 : 0,
+          role: 'slider',
+          'aria-valuemin': min,
+          'aria-valuemax': max,
+          'aria-valuenow': channelValue,
+          'aria-valuetext': valueLabel,
+          'aria-orientation': orientation,
+          'aria-disabled': isDisabled,
+        } as PressableProps)
+      : ({} as PressableProps);
+
+    return (
+      <Comp
+        ref={ref}
+        {...(props as PressableProps)}
+        {...pointerProps}
+        {...webAccessibilityProps}
+        onLayout={handleLayout}
+        onFocus={composeEventHandlers(
+          composeEventHandlers(onFocus as (...args: unknown[]) => unknown, focusProps.onFocus),
+          focusRingProps.onFocus,
+        )}
+        onBlur={composeEventHandlers(
+          composeEventHandlers(onBlur as (...args: unknown[]) => unknown, focusProps.onBlur),
+          focusRingProps.onBlur,
+        )}
+        onHoverIn={composeEventHandlers(onHoverIn, hoverProps.onHoverIn)}
+        onHoverOut={composeEventHandlers(onHoverOut, hoverProps.onHoverOut)}
+        accessibilityRole="adjustable"
+        accessibilityLabel={accessibilityLabel}
+        accessibilityValue={{ min, max, now: Math.round(channelValue), text: valueLabel }}
+        accessibilityState={{ disabled: isDisabled }}
+        accessibilityActions={[{ name: 'increment' }, { name: 'decrement' }]}
+        onAccessibilityAction={handleAccessibilityAction}
+        style={[positionStyle, style]}
+        {...mergeDataAttributes(
+          props,
+          dataAttributes({
+            slot: 'color-slider-thumb',
+            disabled: isDisabled,
+            hover: isHovered,
+            focus: isFocused,
+            focusVisible: isFocusVisible,
+            dragging: isDragging,
+          }),
+        )}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+ColorSliderThumb.displayName = 'ColorSliderThumb';

package/src/color-slider/context.tsx

@@ -0,0 +1,5 @@
+import { createContext } from '@cdx-ui/utils';
+import type { ColorSliderContextValue } from './types';
+
+export const [ColorSliderProvider, useColorSliderContext] =
+  createContext<ColorSliderContextValue>('ColorSliderContext');

package/src/color-slider/index.ts

@@ -0,0 +1,16 @@
+export { ColorSliderRoot, type ColorSliderRootProps } from './ColorSliderRoot';
+export { ColorSliderRail, type ColorSliderRailProps } from './ColorSliderRail';
+export { ColorSliderThumb, type ColorSliderThumbProps } from './ColorSliderThumb';
+export { useColorSliderContext } from './context';
+export type {
+  ColorSliderCommonProps,
+  ColorSliderConfiguration,
+  ColorSliderContextValue,
+  ColorSliderKeyboardEvent,
+  ColorSliderLayout,
+  ColorSliderOrientation,
+  ColorSliderSize,
+  IColorSliderProps,
+  IColorSliderRailProps,
+  IColorSliderThumbProps,
+} from './types';

package/src/color-slider/types.ts

@@ -0,0 +1,94 @@
+import type { ReactNode } from 'react';
+import type { PressableProps, ViewProps } from 'react-native';
+import type { Color } from '../color';
+
+export type ColorSliderOrientation = 'horizontal' | 'vertical';
+
+export type ColorSliderConfiguration =
+  | {
+      readonly colorSpace: 'rgb';
+      readonly channel: 'red' | 'green' | 'blue';
+    }
+  | {
+      readonly colorSpace: 'hsl';
+      readonly channel: 'hue' | 'saturation' | 'lightness';
+    }
+  | {
+      readonly colorSpace: 'hsb';
+      readonly channel: 'hue' | 'saturation' | 'brightness';
+    };
+
+export interface ColorSliderCommonProps extends Omit<ViewProps, 'children'> {
+  /** Current controlled color. */
+  readonly value?: Color;
+  /** Initial color for uncontrolled usage. */
+  readonly defaultValue?: Color;
+  /** Called while the selected channel changes. */
+  readonly onValueChange?: (value: Color) => void;
+  /** Called when a pointer, keyboard, or screen reader interaction completes. */
+  readonly onValueChangeComplete?: (value: Color) => void;
+  /** Slider axis. @default `'horizontal'` */
+  readonly orientation?: ColorSliderOrientation;
+  /** Channel increment. Defaults to the channel's natural increment. */
+  readonly step?: number;
+  /** Shift-arrow and page-key increment. @default `10` */
+  readonly pageStep?: number;
+  /** Disables pointer, keyboard, and screen reader interaction. @default `false` */
+  readonly isDisabled?: boolean;
+  readonly children?: ReactNode;
+}
+
+export type IColorSliderProps = ColorSliderCommonProps & ColorSliderConfiguration;
+
+export interface IColorSliderRailProps extends ViewProps {
+  readonly asChild?: boolean;
+  readonly children?: ReactNode;
+}
+
+export interface IColorSliderThumbProps extends PressableProps {
+  readonly asChild?: boolean;
+  readonly children?: ReactNode;
+}
+
+export interface ColorSliderSize {
+  readonly width: number;
+  readonly height: number;
+}
+
+export interface ColorSliderLayout extends ColorSliderSize {
+  readonly x: number;
+  readonly y: number;
+}
+
+export type ColorSliderContextValue = ColorSliderConfiguration & {
+  readonly value: Color;
+  readonly channelValue: number;
+  readonly valueLabel: string;
+  readonly min: number;
+  readonly max: number;
+  readonly step: number;
+  readonly pageStep: number;
+  readonly percent: number;
+  readonly orientation: ColorSliderOrientation;
+  readonly isDisabled: boolean;
+  readonly isDragging: boolean;
+  readonly accessibilityLabel?: string;
+  readonly layout: ColorSliderLayout | null;
+  readonly thumbSize: ColorSliderSize;
+  readonly gradientColors: readonly string[];
+  readonly setLayout: (layout: ColorSliderLayout) => void;
+  readonly setThumbSize: (size: ColorSliderSize) => void;
+  readonly setIsDragging: (dragging: boolean) => void;
+  readonly setChannelValue: (value: number, complete?: boolean) => void;
+  readonly setValueFromRatio: (ratio: number, complete?: boolean) => void;
+};
+
+export interface ColorSliderKeyboardEvent {
+  readonly nativeEvent?: {
+    readonly key?: string;
+    readonly shiftKey?: boolean;
+  };
+  readonly key?: string;
+  readonly shiftKey?: boolean;
+  preventDefault?: () => void;
+}