refactor: rename types to match DefinitelyTyped

hello-pangea · Sep 27, 2022 · f362474 · f362474
1 parent 5de2b4d
commit f362474
Show file tree

Hide file tree

Showing 19 changed files with 70 additions and 64 deletions.
diff --git a/src/components/block/Block.tsx b/src/components/block/Block.tsx
@@ -2,7 +2,7 @@ import merge from "lodash/merge";
 import React from "react";
 import { useColor, withColorProvider } from "../../context/useColor";
 import * as color from "../../helpers/color";
-import { Hex } from "../../types/colors";
+import { HexColor } from "../../types/colors";
 import { Checkboard, EditableInput } from "../common";
 import BlockSwatches from "./BlockSwatches";
 
@@ -35,7 +35,7 @@ export const Block = ({
   const { hex } = currentColors;
 
   const transparent = hex === "transparent";
-  const handleChange = (hexCode: Hex, e: React.MouseEvent) => {
+  const handleChange = (hexCode: HexColor, e: React.MouseEvent) => {
     color.isValidHex(hexCode) &&
       changeColor(
         {

diff --git a/src/components/block/BlockSwatches.tsx b/src/components/block/BlockSwatches.tsx
@@ -1,10 +1,10 @@
 import React from "react";
-import { Hex } from "../../types/colors";
+import { HexColor } from "../../types/colors";
 import { Swatch } from "../common";
 
 type Props = {
   colors: string[];
-  onClick: (hexCode: Hex, e: React.MouseEvent) => void;
+  onClick: (hexCode: HexColor, e: React.MouseEvent) => void;
 };
 
 export const BlockSwatches = ({ colors, onClick }: Props) => {

diff --git a/src/components/circle/Circle.tsx b/src/components/circle/Circle.tsx
@@ -1,7 +1,7 @@
 import merge from "lodash/merge";
 import React from "react";
 import { useColor, withColorProvider } from "../../context/useColor";
-import { Hex } from "../../types/colors";
+import { HexColor } from "../../types/colors";
 import CircleSwatch from "./CircleSwatch";
 
 type Props = {
@@ -59,7 +59,7 @@ export function Circle({
     passedStyles
   );
 
-  const handleChange = (hexCode: Hex, e: React.MouseEvent) =>
+  const handleChange = (hexCode: HexColor, e: React.MouseEvent) =>
     changeColor({ hex: hexCode, source: "hex" }, e);
 
   return (

diff --git a/src/components/circle/CircleSwatch.tsx b/src/components/circle/CircleSwatch.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Hex } from "../../types/colors";
+import { HexColor } from "../../types/colors";
 import { Swatch } from "../common";
 import { withHover } from "../common/withHover";
 
@@ -10,7 +10,7 @@ type Props = {
   color: string;
   active?: boolean;
   hover?: boolean;
-  onClick: (hexCode: Hex, e: React.MouseEvent) => void;
+  onClick: (hexCode: HexColor, e: React.MouseEvent) => void;
 };
 
 export const CircleSwatch = ({

diff --git a/src/components/common/ColorWrap.tsx b/src/components/common/ColorWrap.tsx
@@ -3,11 +3,11 @@ import ColorProvider, {
   useColor,
   withColorProvider,
 } from "../../context/useColor";
-import { Color, ColorObject } from "../../types/colors";
+import { Color, ColorResult } from "../../types/colors";
 
 type Props = {
-  onSwatchHover?: (color: ColorObject, event: React.MouseEvent) => void;
-  onChangeComplete?: (color: ColorObject) => void;
+  onSwatchHover?: (color: ColorResult, event: React.MouseEvent) => void;
+  onChangeComplete?: (color: ColorResult) => void;
   color?: Color;
   defaultColor?: Color;
 };

diff --git a/src/components/compact/CompactFields.tsx b/src/components/compact/CompactFields.tsx
@@ -1,10 +1,10 @@
 import React from "react";
-import { Hex, Rgb } from "../../types/colors";
+import { HexColor, RgbColor } from "../../types/colors";
 import { EditableInput } from "../common";
 
 type Props = {
-  hex: Hex;
-  rgb: Rgb;
+  hex: HexColor;
+  rgb: RgbColor;
   onChange: any;
 };
 

diff --git a/src/components/github/Github.tsx b/src/components/github/Github.tsx
@@ -1,7 +1,7 @@
 import merge from "lodash/merge";
 import React from "react";
 import { useColor, withColorProvider } from "../../context/useColor";
-import { Hex } from "../../types/colors";
+import { HexColor } from "../../types/colors";
 import GithubSwatch from "./GithubSwatch";
 
 type Props = {
@@ -102,7 +102,7 @@ export function Github({
     passedStyles
   );
 
-  const handleChange = (hex: Hex, e: React.MouseEvent) =>
+  const handleChange = (hex: HexColor, e: React.MouseEvent) =>
     changeColor({ hex, source: "hex" }, e);
 
   return (

diff --git a/src/components/google/GoogleFields.tsx b/src/components/google/GoogleFields.tsx
@@ -1,13 +1,19 @@
 import React from "react";
 import * as color from "../../helpers/color";
-import { ChangeColor, Hex, Hsl, Hsv, Rgb } from "../../types/colors";
+import {
+  ChangeColor,
+  HexColor,
+  HslColor,
+  HsvColor,
+  RgbColor,
+} from "../../types/colors";
 import { EditableInput } from "../common";
 
 type Props = {
-  rgb: Rgb;
-  hsl: Hsl;
-  hex: Hex;
-  hsv: Hsv;
+  rgb: RgbColor;
+  hsl: HslColor;
+  hex: HexColor;
+  hsv: HsvColor;
   onChange: (color: ChangeColor, event: React.MouseEvent) => void;
 };
 

diff --git a/src/components/google/GooglePointer.tsx b/src/components/google/GooglePointer.tsx
@@ -1,8 +1,8 @@
 import React from "react";
-import { Hsl } from "../../types/colors";
+import { HslColor } from "../../types/colors";
 
 type Props = {
-  hsl?: Hsl;
+  hsl?: HslColor;
 };
 
 export default function GooglePointer({

diff --git a/src/components/google/GooglePointerCircle.tsx b/src/components/google/GooglePointerCircle.tsx
@@ -1,8 +1,8 @@
 import React from "react";
-import { Hsl } from "../../types/colors";
+import { HslColor } from "../../types/colors";
 
 type Props = {
-  hsl?: Hsl;
+  hsl?: HslColor;
 };
 
 export default function GooglePointerCircle({

diff --git a/src/components/photoshop/PhotoshopFields.tsx b/src/components/photoshop/PhotoshopFields.tsx
@@ -1,13 +1,13 @@
 import React from "react";
 import * as color from "../../helpers/color";
-import { Hex, Hsv, Rgb } from "../../types/colors";
+import { HexColor, HsvColor, RgbColor } from "../../types/colors";
 
 import { EditableInput } from "../common";
 
 type Props = {
-  rgb: Rgb;
-  hsv: Hsv;
-  hex: Hex;
+  rgb: RgbColor;
+  hsv: HsvColor;
+  hex: HexColor;
   onChange: any;
 };
 

diff --git a/src/components/photoshop/PhotoshopPointerCircle.tsx b/src/components/photoshop/PhotoshopPointerCircle.tsx
@@ -1,8 +1,8 @@
 import React from "react";
-import { Hsl } from "../../types/colors";
+import { HslColor } from "../../types/colors";
 
 type Props = {
-  hsl: Hsl;
+  hsl: HslColor;
 };
 
 export default function PhotoshopPointerCircle({ hsl }: Props) {

diff --git a/src/components/photoshop/PhotoshopPreviews.tsx b/src/components/photoshop/PhotoshopPreviews.tsx
@@ -1,8 +1,8 @@
 import React from "react";
-import { Rgb } from "../../types/colors";
+import { RgbColor } from "../../types/colors";
 
 type Props = {
-  rgb: Rgb;
+  rgb: RgbColor;
   currentColor: string;
 };
 

diff --git a/src/components/sketch/SketchFields.tsx b/src/components/sketch/SketchFields.tsx
@@ -2,15 +2,15 @@
 
 import React from "react";
 import * as color from "../../helpers/color";
-import { ChangeColor, Hex, Hsl, Rgb } from "../../types/colors";
+import { ChangeColor, HexColor, HslColor, RgbColor } from "../../types/colors";
 
 import { EditableInput } from "../common";
 
 type Props = {
   onChange?: (color: ChangeColor, event: React.MouseEvent) => void;
-  rgb: Rgb;
-  hsl: Hsl;
-  hex: Hex;
+  rgb: RgbColor;
+  hsl: HslColor;
+  hex: HexColor;
   disableAlpha?: boolean;
 };
 

diff --git a/src/components/slider/SliderSwatch.tsx b/src/components/slider/SliderSwatch.tsx
@@ -1,8 +1,8 @@
 import React from "react";
-import { Hsl } from "../../types/colors";
+import { HslColor } from "../../types/colors";
 
 type Props = {
-  hsl: Hsl;
+  hsl: HslColor;
   onClick: any;
   offset: number;
   active?: boolean;

diff --git a/src/components/slider/SliderSwatches.tsx b/src/components/slider/SliderSwatches.tsx
@@ -1,10 +1,10 @@
 import React from "react";
-import { Hsl } from "../../types/colors";
+import { HslColor } from "../../types/colors";
 import SliderSwatch from "./SliderSwatch";
 
 type Props = {
   onClick: any;
-  hsl: Hsl;
+  hsl: HslColor;
 };
 
 export default function SliderSwatches({ onClick, hsl }: Props) {

diff --git a/src/components/swatches/SwatchesGroup.tsx b/src/components/swatches/SwatchesGroup.tsx
@@ -1,10 +1,10 @@
 import React from "react";
-import { Color, Hex } from "../../types/colors";
+import { Color, HexColor } from "../../types/colors";
 import SwatchesColor from "./SwatchesColor";
 
 type Props = {
   onClick: (color: Color, event: React.MouseEvent) => void;
-  active: Hex;
+  active: HexColor;
   group: string[];
 };
 

diff --git a/src/context/useColor.tsx b/src/context/useColor.tsx
@@ -10,10 +10,10 @@ import React, {
   useState,
 } from "react";
 import * as color from "../helpers/color";
-import { ChangeColor, Color, ColorObject } from "../types/colors";
+import { ChangeColor, Color, ColorResult } from "../types/colors";
 
 export interface ColorContextType {
-  colors: ColorObject;
+  colors: ColorResult;
   changeColor: (color: ChangeColor, event?: React.MouseEvent) => void;
   onSwatchHover?: (color: ChangeColor, event: React.MouseEvent) => void;
 }
@@ -26,15 +26,15 @@ type Props = {
   children: React.ReactNode;
 
   /** Debounced version of `onChange`. Called after 100ms of no change */
-  onChangeComplete?: (color: ColorObject) => void;
+  onChangeComplete?: (color: ColorResult) => void;
 
-  onSwatchHover?: (color: ColorObject, event: React.MouseEvent) => void;
+  onSwatchHover?: (color: ColorResult, event: React.MouseEvent) => void;
 
   /**
    * Called _every_ time the color changes, ex. when dragging to select a color.
    * Use `onChangeComplete` for a debounced value (only called once picking a color is complete)
    */
-  onChange?: (color: ColorObject, event?: React.MouseEvent) => void;
+  onChange?: (color: ColorResult, event?: React.MouseEvent) => void;
 
   /** Allows you to control the color yourself */
   color?: Color;
@@ -56,7 +56,7 @@ export default function ColorProvider({
     a: 1,
   },
 }: Props) {
-  const [colors, setColors] = useState<ColorObject>({
+  const [colors, setColors] = useState<ColorResult>({
     ...color.toState(passedColor ?? defaultColor, 0),
   });
   const passedColorRef = useRef(passedColor);

diff --git a/src/types/colors.ts b/src/types/colors.ts
@@ -1,39 +1,39 @@
-export type Hex = string;
+export type HexColor = string;
 
-export type Hsl = {
+export type HslColor = {
   h: number;
   l: number;
   s: number;
   a?: number;
 };
 
-export type Hsv = {
+export type HsvColor = {
   h: number;
   s: number;
   v: number;
   a?: number;
 };
 
-export type Rgb = {
+export type RgbColor = {
   r: number;
   g: number;
   b: number;
   a?: number;
 };
 
-export type Color = Hex | Hsl | Hsv | Rgb;
+export type Color = HexColor | HslColor | HsvColor | RgbColor;
 
-export type ColorObject = {
-  hex: Hex;
-  hsl: Hsl;
-  hsv: Hsv;
-  rgb: Rgb;
+export type ColorResult = {
+  hex: HexColor;
+  hsl: HslColor;
+  hsv: HsvColor;
+  rgb: RgbColor;
   oldHue: number;
 };
 
 export type ChangeColor =
-  | Hsl
-  | Hsv
-  | (Rgb & { source?: string })
-  | { hex: Hex; source: string }
-  | Hex;
+  | HslColor
+  | HsvColor
+  | (RgbColor & { source?: string })
+  | { hex: HexColor; source: string }
+  | HexColor;