Refactor: Convert into TypeScript

.eslintrc

@@ -1,17 +1,23 @@
 {
   "env": {
     "browser": true,
-    "es6": true
+    "es6": true,
+    "jest": true,
+    "node": true
   },
   "parserOptions": {
     "sourceType": "module"
   },
   "plugins": ["prettier", "react"],
   "extends": [
     "eslint:recommended",
-    "plugin:prettier/recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
     "plugin:react/recommended",
-    "plugin:react-hooks/recommended"
+    "plugin:react-hooks/recommended",
+    "plugin:prettier/recommended",
+    "prettier/@typescript-eslint",
+    "prettier/react"
   ],
   "rules": {
     "prettier/prettier": "error",
@@ -21,5 +27,15 @@
     "react": {
       "version": "detect"
     }
-  }
+  },
+  "overrides": [
+    {
+      "files": [
+        "*.js"
+      ],
+      "rules": {
+        "@typescript-eslint/no-var-requires": [0]
+      }
+    }
+  ]
 }

build-packages.js

@@ -26,7 +26,7 @@ fs.readdir(entryDirPath, async (e, files) => {
 
     // Run microbundle
     const { stdout } = await exec(
-      `${bundlerPath} --entry ${filePath} --output ${outputDirPath}/index.js  --name react-colorful-${name} --css-modules true --jsx React.createElement`
+      `${bundlerPath} --entry ${filePath} --output ${outputDirPath}/index.js --name react-colorful-${name} --css-modules true --jsx React.createElement --tsconfig tsconfig.build.json`
     );
     console.log(stdout);
 
@@ -35,10 +35,11 @@ fs.readdir(entryDirPath, async (e, files) => {
       var manifestCode = JSON.stringify({
         name: `react-colorful-${name}`,
         private: true,
+        source: filePath,
         main: "index.js",
         module: "index.module.js",
         esmodule: "index.esmodule.js",
-        types: "../types/index.d.ts"
+        types: "index.d.ts",
       });
 
       await writeFile(manifestPath, manifestCode, "utf8");

package.json

@@ -2,14 +2,14 @@
   "name": "react-colorful",
   "version": "2.2.1",
   "description": "A tiny color picker component for modern React apps",
-  "source": "src/index.js",
+  "source": "src/index.ts",
   "main": "dist/index.js",
   "module": "dist/index.module.js",
   "esmodule": "dist/index.esmodule.js",
   "umd:main": "dist/index.umd.js",
-  "types": "types/index.d.ts",
+  "types": "dist/index.d.ts",
   "scripts": {
-    "lint": "eslint src/**/*.js demo/src/**/*.js",
+    "lint": "eslint src/**/*.{ts,tsx} demo/src/**/*.js",
     "size": "npm run build && size-limit",
     "test": "jest tests",
     "build": "node ./build-packages.js",
@@ -51,7 +51,8 @@
   "jest": {
     "verbose": true,
     "transform": {
-      "\\.js$": "jest-esm-jsx-transform"
+      "\\.js$": "jest-esm-jsx-transform",
+      "^.+\\.tsx?$": "ts-jest"
     },
     "moduleNameMapper": {
       "\\.css$": "identity-obj-proxy"
@@ -95,7 +96,10 @@
   "devDependencies": {
     "@size-limit/preset-small-lib": "^4.5.6",
     "@testing-library/react": "^10.4.8",
+    "@types/jest": "^26.0.10",
     "@types/react": "^16.9.46",
+    "@typescript-eslint/eslint-plugin": "^3.9.1",
+    "@typescript-eslint/parser": "^3.9.1",
     "del": "^5.1.0",
     "del-cli": "^3.0.1",
     "eslint": "^7.5.0",
@@ -114,6 +118,8 @@
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
     "size-limit": "^4.5.5",
+    "ts-jest": "^26.2.0",
+    "typescript": "^3.9.7",
     "use-throttled-effect": "0.0.7"
   },
   "dependencies": {}

src/components/ColorPicker.js → src/components/ColorPicker.tsx

@@ -1,14 +1,29 @@
 import React, { useState, useEffect, useCallback, useRef } from "react";
+
 import Hue from "./Hue";
 import Saturation from "./Saturation";
-import formatClassName from "../utils/formatClassName";
-import equalColorObjects from "../utils/equalColorObjects";
+
 import styles from "../styles.css";
+import { ColorModel, AnyColor, HSV } from "../types";
+import { equalColorObjects } from "../utils/compare";
+import formatClassName from "../utils/formatClassName";
+
+interface Props {
+  className: string;
+  colorModel: ColorModel<AnyColor>;
+  color: AnyColor;
+  onChange: (newColor: AnyColor) => void;
+}
 
-const ColorPicker = ({ className, colorModel, color = colorModel.defaultColor, onChange }) => {
+const ColorPicker: React.FC<Props> = ({
+  className,
+  colorModel,
+  color = colorModel.defaultColor,
+  onChange,
+}: Props) => {
   // No matter which color model is used (HEX, RGB or HSL),
   // all internal calculations are based on HSV model
-  const [hsv, updateHsv] = useState(() => colorModel.toHsv(color));
+  const [hsv, updateHsv] = useState<HSV>(() => colorModel.toHsv(color));
 
   // By using this ref we're able to prevent extra updates
   // and the effects recursion during the color conversion

src/components/HexInput.js → src/components/HexInput.tsx

@@ -1,10 +1,16 @@
 import React, { useState, useEffect, useCallback } from "react";
-import validHex from "../utils/validHex";
+
+import { validHex } from "../utils/validate";
 
 // Escapes all non-hexadecimal characters including "#"
-const escape = (hex) => hex.replace(/([^0-9A-F]+)/gi, "");
+const escape = (hex: string) => hex.replace(/([^0-9A-F]+)/gi, "");
+
+interface Props {
+  color: string;
+  onChange: (newColor: string) => void;
+}
 
-const HexInput = (props) => {
+const HexInput = (props: Props) => {
   const { color, onChange } = props;
   const [value, setValue] = useState(escape(color));
 

src/components/Hue.js → src/components/Hue.tsx

@@ -1,10 +1,17 @@
 import React, { useCallback } from "react";
+
 import Interactive from "./Interactive";
-import formatClassName from "../utils/formatClassName";
-import hsvToHslString from "../utils/hsvToHslString";
+
 import styles from "../styles.css";
+import { hsvToHslString } from "../utils/convert";
+import formatClassName from "../utils/formatClassName";
+
+interface Props {
+  hue: number;
+  onChange: (newColor: any) => void;
+}
 
-const Hue = ({ hue, onChange }) => {
+const Hue = ({ hue, onChange }: Props) => {
   const handleMove = useCallback(
     (interaction) => {
       // Hue measured in degrees of the color circle ranging from 0 to 360

src/components/Interactive.js → src/components/Interactive.tsx

@@ -1,16 +1,29 @@
 import React, { useState, useLayoutEffect, useRef, useCallback } from "react";
+
 import styles from "../styles.css";
 
 // Limit number within [0, 1] bounds.
 // Use ternary operator instead of `Math.min(Math.max(0, number), 1)` to save few bytes
-const limit = (number) => (number > 1 ? 1 : number < 0 ? 0 : number);
+const limit = (number: number) => (number > 1 ? 1 : number < 0 ? 0 : number);
+
+interface Interaction {
+  left: number;
+  top: number;
+}
 
-const Interactive = ({ onMove, children }) => {
-  const container = useRef();
+interface Props {
+  onMove: (interaction: Interaction) => void;
+  children: React.ReactNode;
+}
+
+const Interactive = ({ onMove, children }: Props) => {
+  const container = useRef<HTMLDivElement>(null);
   const [isDragging, setDragging] = useState(false);
 
   const getRelativePosition = useCallback((event) => {
-    const rect = container.current.getBoundingClientRect();
+    // This should be okay. This is only called onMove, and for it to be moved it must actually exist.
+    // I won't suppress the ESLint warning though, as it should probably be something to be aware of.
+    const rect = container.current!.getBoundingClientRect();
     const pointer = typeof event.pageX === "number" ? event : event.touches[0];
 
     return {
@@ -51,7 +64,9 @@ const Interactive = ({ onMove, children }) => {
 
   useLayoutEffect(() => {
     toggleDocumentEvents(isDragging);
-    return () => isDragging && toggleDocumentEvents(false);
+    return () => {
+      isDragging && toggleDocumentEvents(false);
+    };
   }, [isDragging, toggleDocumentEvents]);
 
   return (

src/components/Saturation.js → src/components/Saturation.tsx

@@ -1,10 +1,18 @@
 import React, { useCallback } from "react";
+
 import Interactive from "./Interactive";
-import formatClassName from "../utils/formatClassName";
+
 import styles from "../styles.css";
-import hsvToHslString from "../utils/hsvToHslString";
+import { HSV } from "../types";
+import { hsvToHslString } from "../utils/convert";
+import formatClassName from "../utils/formatClassName";
+
+interface Props {
+  hsv: HSV;
+  onChange: (newColor: any) => void;
+}
 
-const Saturation = ({ hsv, onChange }) => {
+const Saturation = ({ hsv, onChange }: Props) => {
   const handleMove = useCallback(
     (interaction) => {
       // Saturation and brightness always fit into [0, 100] range

src/hocs/withColorModel.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+import { ColorModel, ColorPickerBaseProps } from "../types";
+
+const withColorModel = (
+  Component: React.FC<any>,
+  colorModel: ColorModel<any>
+): React.NamedExoticComponent<any> => {
+  const ColorPicker = (props: ColorPickerBaseProps) => {
+    return <Component {...props} colorModel={colorModel} />;
+  };
+
+  return React.memo(ColorPicker);
+};
+
+export default withColorModel;

src/packages/hex.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+import ColorPicker from "../components/ColorPicker";
+import withColorModel from "../hocs/withColorModel";
+import { ColorModel, ColorPickerBaseProps } from "../types";
+import { equalHex } from "../utils/compare";
+import { hexToHsv, hsvToHex } from "../utils/convert";
+
+interface Props extends ColorPickerBaseProps<string> {
+  color: string;
+}
+
+const colorModel: ColorModel<string> = {
+  defaultColor: "000",
+  toHsv: hexToHsv,
+  fromHsv: hsvToHex,
+  equal: equalHex,
+};
+
+const HexColorPicker: React.FC<Partial<Props>> = withColorModel(ColorPicker, colorModel);
+
+export default HexColorPicker;

src/packages/hsl.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+import ColorPicker from "../components/ColorPicker";
+import withColorModel from "../hocs/withColorModel";
+import { ColorModel, ColorPickerBaseProps, HSL } from "../types";
+import { equalColorObjects } from "../utils/compare";
+import { hslToHsv, hsvToHsl } from "../utils/convert";
+
+interface Props extends ColorPickerBaseProps<HSL> {
+  color: HSL;
+}
+
+const colorModel: ColorModel<HSL> = {
+  defaultColor: { h: 0, s: 0, l: 0 },
+  toHsv: hslToHsv,
+  fromHsv: hsvToHsl,
+  equal: equalColorObjects,
+};
+
+const HslColorPicker: React.FC<Partial<Props>> = withColorModel(ColorPicker, colorModel);
+
+export default HslColorPicker;

src/packages/hslString.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+import ColorPicker from "../components/ColorPicker";
+import withColorModel from "../hocs/withColorModel";
+import { ColorModel, ColorPickerBaseProps } from "../types";
+import { equalColorObjects } from "../utils/compare";
+import { hslStringToHsv, hsvToHslString } from "../utils/convert";
+
+interface Props extends ColorPickerBaseProps<string> {
+  color: string;
+}
+
+const colorModel: ColorModel<string> = {
+  defaultColor: "hsl(0, 0%, 0%)",
+  toHsv: hslStringToHsv,
+  fromHsv: hsvToHslString,
+  equal: equalColorObjects,
+};
+
+const HslStringColorPicker: React.FC<Partial<Props>> = withColorModel(ColorPicker, colorModel);
+
+export default HslStringColorPicker;