TS Strict Color Stately (#6499)

* TS Strict Color Stately

Author: snowystinger

packages/@react-stately/color/src/Color.ts

@@ -120,9 +120,9 @@ abstract class Color implements IColor {
 
   getColorSpaceAxes(xyChannels: {xChannel?: ColorChannel, yChannel?: ColorChannel}): ColorAxes {
     let {xChannel, yChannel} = xyChannels;
-    let xCh = xChannel || this.getColorChannels().find(c => c !== yChannel);
-    let yCh = yChannel || this.getColorChannels().find(c => c !== xCh);
-    let zCh = this.getColorChannels().find(c => c !== xCh && c !== yCh);
+    let xCh = xChannel || this.getColorChannels().find(c => c !== yChannel)!;
+    let yCh = yChannel || this.getColorChannels().find(c => c !== xCh)!;
+    let zCh = this.getColorChannels().find(c => c !== xCh && c !== yCh)!;
 
     return {xChannel: xCh, yChannel: yCh, zChannel: zCh};
   }
@@ -245,7 +245,7 @@ class RGBColor extends Color {
   }
 
   static parse(value: string) {
-    let colors = [];
+    let colors: Array<number | undefined> = [];
     // matching #rgb, #rgba, #rrggbb, #rrggbbaa
     if (/^#[\da-f]+$/i.test(value) && [4, 5, 7, 9].includes(value.length)) {
       const values = (value.length < 6 ? value.replace(/[^#]/gi, '$&$&') : value).slice(1).split('');
@@ -259,7 +259,12 @@ class RGBColor extends Color {
     const match = value.match(/^rgba?\((.*)\)$/);
     if (match?.[1]) {
       colors = match[1].split(',').map(value => Number(value.trim()));
-      colors = colors.map((num, i) => clamp(num, 0, i < 3 ? 255 : 1));
+      colors = colors.map((num, i) => {
+        return clamp(num ?? 0, 0, i < 3 ? 255 : 1);
+      });
+    }
+    if (colors[0] === undefined || colors[1] === undefined || colors[2] === undefined) {
+      return undefined;
     }
 
     return colors.length < 3 ? undefined : new RGBColor(colors[0], colors[1], colors[2], colors[3] ?? 1);
@@ -371,6 +376,7 @@ class RGBColor extends Color {
           hue = (blue - red) / chroma + 2;
           break;
         case blue:
+        default:
           hue = (red - green) / chroma + 4;
           break;
       }
@@ -443,7 +449,7 @@ class HSBColor extends Color {
   }
 
   static parse(value: string): HSBColor | void {
-    let m: RegExpMatchArray | void;
+    let m: RegExpMatchArray | null;
     if ((m = value.match(HSB_REGEX))) {
       const [h, s, b, a] = (m[1] ?? m[2]).split(',').map(n => Number(n.trim().replace('%', '')));
       return new HSBColor(normalizeHue(h), clamp(s, 0, 100), clamp(b, 0, 100), clamp(a ?? 1, 0, 1));
@@ -582,7 +588,7 @@ class HSLColor extends Color {
   }
 
   static parse(value: string): HSLColor | void {
-    let m: RegExpMatchArray | void;
+    let m: RegExpMatchArray | null;
     if ((m = value.match(HSL_REGEX))) {
       const [h, s, l, a] = (m[1] ?? m[2]).split(',').map(n => Number(n.trim().replace('%', '')));
       return new HSLColor(normalizeHue(h), clamp(s, 0, 100), clamp(l, 0, 100), clamp(a ?? 1, 0, 1));

packages/@react-stately/color/src/useColorAreaState.ts

@@ -85,8 +85,15 @@ export function useColorAreaState(props: ColorAreaProps): ColorAreaState {
   if (!value && !defaultValue) {
     defaultValue = DEFAULT_COLOR;
   }
+  if (value) {
+    value = normalizeColor(value);
+  }
+  if (defaultValue) {
+    defaultValue = normalizeColor(defaultValue);
+  }
 
-  let [colorValue, setColorState] = useControlledState(value && normalizeColor(value), defaultValue && normalizeColor(defaultValue), onChange);
+  // safe to cast value and defaultValue to Color, one of them will always be defined because if neither are, we assign a default
+  let [colorValue, setColorState] = useControlledState<Color>(value as Color, defaultValue as Color, onChange);
   let color = useMemo(() => colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [colorValue, colorSpace]);
   let valueRef = useRef(color);
   let setColor = (color: Color) => {
@@ -141,7 +148,7 @@ export function useColorAreaState(props: ColorAreaProps): ColorAreaState {
     setColorFromPoint(x: number, y: number) {
       let newXValue = minValueX + clamp(x, 0, 1) * (maxValueX - minValueX);
       let newYValue = minValueY + (1 - clamp(y, 0, 1)) * (maxValueY - minValueY);
-      let newColor:Color;
+      let newColor: Color | undefined;
       if (newXValue !== xValue) {
         // Round new value to multiple of step, clamp value between min and max
         newXValue = snapValueToStep(newXValue, minValueX, maxValueX, stepX);
@@ -161,16 +168,16 @@ export function useColorAreaState(props: ColorAreaProps): ColorAreaState {
       let y = 1 - (yValue - minValueY) / (maxValueY - minValueY);
       return {x, y};
     },
-    incrementX(stepSize) {
+    incrementX(stepSize = 1) {
       setXValue(xValue + stepSize > maxValueX ? maxValueX : snapValueToStep(xValue + stepSize, minValueX, maxValueX, stepX));
     },
-    incrementY(stepSize) {
+    incrementY(stepSize = 1) {
       setYValue(yValue + stepSize > maxValueY ? maxValueY : snapValueToStep(yValue + stepSize, minValueY, maxValueY, stepY));
     },
-    decrementX(stepSize) {
+    decrementX(stepSize = 1) {
       setXValue(snapValueToStep(xValue - stepSize, minValueX, maxValueX, stepX));
     },
-    decrementY(stepSize) {
+    decrementY(stepSize = 1) {
       setYValue(snapValueToStep(yValue - stepSize, minValueY, maxValueY, stepY));
     },
     setDragging(isDragging) {

packages/@react-stately/color/src/useColorFieldState.ts

@@ -27,7 +27,7 @@ export interface ColorFieldState extends FormValidationState {
    * The currently parsed color value, or null if the field is empty.
    * Updated based on the `inputValue` as the user types.
    */
-  readonly colorValue: Color,
+  readonly colorValue: Color | null,
   /** Sets the current text value of the input. */
   setInputValue(value: string): void,
   /**
@@ -72,15 +72,15 @@ export function useColorFieldState(
 
   let initialValue = useColor(value);
   let initialDefaultValue = useColor(defaultValue);
-  let [colorValue, setColorValue] = useControlledState<Color>(initialValue, initialDefaultValue, onChange);
+  let [colorValue, setColorValue] = useControlledState<Color | null>(initialValue!, initialDefaultValue!, onChange);
   let [inputValue, setInputValue] = useState(() => (value || defaultValue) && colorValue ? colorValue.toString('hex') : '');
 
   let validation = useFormValidationState({
     ...props,
     value: colorValue
   });
 
-  let safelySetColorValue = (newColor: Color) => {
+  let safelySetColorValue = (newColor: Color | null) => {
     if (!colorValue || !newColor) {
       setColorValue(newColor);
       return;
@@ -111,7 +111,11 @@ export function useColorFieldState(
     // Set to empty state if input value is empty
     if (!inputValue.length) {
       safelySetColorValue(null);
-      setInputValue(value === undefined ? '' : colorValue.toString('hex'));
+      if (value === undefined || colorValue === null) {
+        setInputValue('');
+      } else {
+        setInputValue(colorValue.toString('hex'));
+      }
       return;
     }
 

packages/@react-stately/color/src/useColorSliderState.ts

@@ -43,12 +43,20 @@ export function useColorSliderState(props: ColorSliderStateOptions): ColorSlider
     throw new Error('useColorSliderState requires a value or defaultValue');
   }
 
-  let [colorValue, setColor] = useControlledState(value && normalizeColor(value), defaultValue && normalizeColor(defaultValue), onChange);
+  if (value) {
+    value = normalizeColor(value);
+  }
+  if (defaultValue) {
+    defaultValue = normalizeColor(defaultValue);
+  }
+  // safe to cast value and defaultValue to Color, one of them will always be defined because if neither are, we throw an error
+  let [colorValue, setColor] = useControlledState<Color>(value as Color, defaultValue as Color, onChange);
   let color = useMemo(() => colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [colorValue, colorSpace]);
   let sliderState = useSliderState({
     ...color.getChannelRange(channel),
     ...otherProps,
-    // Unused except in getThumbValueLabel, which is overridden below. null to appease TypeScript.
+    // Unused except in getThumbValueLabel, which is overridden below. null to localize the TypeScript error for ignoring.
+    // @ts-ignore
     numberFormatter: null,
     value: color.getChannelValue(channel),
     onChange(v) {

packages/@react-stately/color/src/useColorWheelState.ts

@@ -96,13 +96,20 @@ function cartesianToAngle(x: number, y: number, radius: number): number {
  * Color wheels allow users to adjust the hue of an HSL or HSB color value on a circular track.
  */
 export function useColorWheelState(props: ColorWheelProps): ColorWheelState {
-  let {defaultValue, onChange, onChangeEnd} = props;
+  let {value: propsValue, defaultValue, onChange, onChangeEnd} = props;
 
-  if (!props.value && !defaultValue) {
+  if (!propsValue && !defaultValue) {
     defaultValue = DEFAULT_COLOR;
   }
+  if (propsValue) {
+    propsValue = normalizeColor(propsValue);
+  }
+  if (defaultValue) {
+    defaultValue = normalizeColor(defaultValue);
+  }
 
-  let [stateValue, setValueState] = useControlledState(normalizeColor(props.value), normalizeColor(defaultValue), onChange);
+  // safe to cast value and defaultValue to Color, one of them will always be defined because if neither are, we assign a default
+  let [stateValue, setValueState] = useControlledState<Color>(propsValue as Color, defaultValue as Color, onChange);
   let value = useMemo(() => {
     let colorSpace = stateValue.getColorSpace();
     return colorSpace === 'hsl' || colorSpace === 'hsb' ? stateValue : stateValue.toFormat('hsl');

packages/@react-stately/color/test/Color.test.tsx

@@ -202,11 +202,11 @@ describe('Color', function () {
 
 
     let rgb = fc.tuple(fc.integer({min: 0, max: 255}), fc.integer({min: 0, max: 255}), fc.integer({min: 0, max: 255}))
-      .map(([r, g, b]) => (['rgb', `rgb(${r}, ${g}, ${b})`, [r, g, b]]));
+      .map(([r, g, b]) => (['rgb' as ColorFormat, `rgb(${r}, ${g}, ${b})`, [r, g, b]]));
     let hsl = fc.tuple(fc.integer({min: 0, max: 360}), fc.integer({min: 0, max: 100}), fc.integer({min: 0, max: 100}))
-      .map(([h, s, l]) => (['hsl', `hsl(${h}, ${s}%, ${l}%)`, [h, s, l]]));
+      .map(([h, s, l]) => (['hsl' as ColorFormat, `hsl(${h}, ${s}%, ${l}%)`, [h, s, l]]));
     let hsb = fc.tuple(fc.integer({min: 0, max: 360}), fc.integer({min: 0, max: 100}), fc.integer({min: 0, max: 100}))
-      .map(([h, s, b]) => (['hsb', `hsb(${h}, ${s}%, ${b}%)`, [h, s, b]]));
+      .map(([h, s, b]) => (['hsb' as ColorFormat, `hsb(${h}, ${s}%, ${b}%)`, [h, s, b]]));
     let options = fc.record({
       colorSpace: fc.oneof(fc.constant('rgb'), fc.constant('hsl'), fc.constant('hsb')),
       color: fc.oneof(rgb, hsl, hsb)
@@ -232,6 +232,7 @@ describe('Color', function () {
     };
 
     it('can perform round trips', () => {
+      // @ts-ignore
       fc.assert(fc.property(options, ({colorSpace, color}: {colorSpace: ColorFormat, color: [string, string, number[]]}) => {
         let testColor = parseColor(color[1]);
         let convertedColor = testColor.toString(colorSpace);

tsconfig.json

@@ -106,6 +106,7 @@
           "./packages/@react-spectrum/well",
           "./packages/@react-stately/calendar",
           "./packages/@react-stately/checkbox",
+          "./packages/@react-stately/color",
           "./packages/@react-stately/numberfield",
           "./packages/@react-stately/overlays",
           "./packages/@react-stately/pagination",