Convert to TypeScript (#122)

Author: wojtekmaj

.babelrc

@@ -1,16 +1,3 @@
 {
-  "presets": ["@babel/env", "@babel/react"],
-  "env": {
-    "production-esm": {
-      "presets": [
-        [
-          "@babel/env",
-          {
-            "modules": false
-          }
-        ],
-        "@babel/react"
-      ]
-    }
-  }
+  "presets": ["@babel/typescript", "@babel/env", "@babel/react"]
 }

.eslintrc.json

@@ -1,9 +1,16 @@
 {
-  "extends": "wojtekmaj/react-no-automatic-runtime",
+  "extends": [
+    "wojtekmaj/react-no-automatic-runtime",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"],
   "overrides": [
     {
       "files": ["sample/**", "test/**"],
       "rules": {
+        "@typescript-eslint/no-var-requires": "off",
         "import/no-unresolved": "off"
       }
     }

package.json

@@ -4,23 +4,25 @@
   "description": "An analog clock for your React app.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
-  "source": "src/index.js",
+  "source": "src/index.ts",
+  "types": "dist/cjs/index.d.ts",
   "sideEffects": [
     "*.css"
   ],
   "scripts": {
     "build": "yarn build-js && yarn copy-styles",
     "build-js": "yarn build-js-esm && yarn build-js-cjs",
-    "build-js-esm": "BABEL_ENV=production-esm babel src -d dist/esm --ignore \"**/*.spec.js,**/*.spec.jsx\"",
-    "build-js-cjs": "BABEL_ENV=production-cjs babel src -d dist/cjs --ignore \"**/*.spec.js,**/*.spec.jsx\"",
+    "build-js-esm": "tsc --project tsconfig.build.json --outDir dist/esm --module esnext",
+    "build-js-cjs": "tsc --project tsconfig.build.json --outDir dist/cjs --module commonjs",
     "clean": "rimraf dist",
     "copy-styles": "node ./copy-styles.mjs",
     "jest": "jest",
-    "lint": "eslint . --ext .js,.jsx",
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
     "postinstall": "husky install",
     "prepack": "yarn clean && yarn build",
     "prettier": "prettier --check . --cache",
-    "test": "yarn lint && yarn prettier && yarn jest"
+    "test": "yarn lint && yarn tsc && yarn prettier && yarn jest",
+    "tsc": "tsc --noEmit"
   },
   "keywords": [
     "clock",
@@ -41,18 +43,22 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@wojtekmaj/date-utils": "^1.0.0",
+    "@types/react": "*",
+    "@wojtekmaj/date-utils": "^1.1.2",
     "clsx": "^1.2.1",
     "get-user-locale": "^2.0.0",
     "prop-types": "^15.6.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.15.0",
     "@babel/core": "^7.15.0",
     "@babel/preset-env": "^7.15.0",
     "@babel/preset-react": "^7.14.0",
+    "@babel/preset-typescript": "^7.18.6",
     "@testing-library/jest-dom": "^5.15.0",
     "@testing-library/react": "^13.4.0",
+    "@types/jest": "^29.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.41.0",
+    "@typescript-eslint/parser": "^5.44.0",
     "eslint": "^8.26.0",
     "eslint-config-wojtekmaj": "^0.7.1",
     "husky": "^8.0.0",
@@ -62,7 +68,8 @@
     "pretty-quick": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rimraf": "^3.0.0"
+    "rimraf": "^3.0.0",
+    "typescript": "^4.9.4"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",

src/Clock.spec.jsx renamed to src/Clock.spec.tsx

@@ -86,7 +86,7 @@ describe('Clock', () => {
       const hourMarks = container.querySelectorAll('.react-clock__hour-mark');
 
       hourMarks.forEach((hourMark, index) => {
-        expect(hourMark).toHaveTextContent(index + 1);
+        expect(hourMark).toHaveTextContent(`${index + 1}`);
       });
     });
 
@@ -137,8 +137,25 @@ describe('Clock', () => {
   const minuteSecondAngle = minuteAngle / 60;
   const secondAngle = fullCircle / 60;
 
-  const getDeg = (transform) => parseFloat(transform.match(/rotate\(([0-9.]*)deg\)/)[1]);
-  const getAngle = (hand) => getDeg(window.getComputedStyle(hand).transform) % 360;
+  function getDeg(transform: string) {
+    const match = transform.match(/rotate\(([0-9.]*)deg\)/);
+
+    if (!match) {
+      throw new Error('Could not parse transform');
+    }
+
+    const deg = match[1];
+
+    if (!deg) {
+      throw new Error('Could not parse transform');
+    }
+
+    return parseFloat(deg);
+  }
+
+  function getAngle(hand: HTMLElement) {
+    return getDeg(window.getComputedStyle(hand).transform) % 360;
+  }
 
   describe('hour hand', () => {
     it('is rendered properly', () => {
@@ -156,7 +173,7 @@ describe('Clock', () => {
 
       const { container } = render(<Clock value={date} />);
 
-      const hand = container.querySelector('.react-clock__hour-hand');
+      const hand = container.querySelector('.react-clock__hour-hand') as HTMLDivElement;
 
       expect(getAngle(hand)).toBeCloseTo(hour * hourAngle + minute * hourMinuteAngle);
     });
@@ -187,7 +204,7 @@ describe('Clock', () => {
 
       const { container } = render(<Clock value={date} />);
 
-      const hand = container.querySelector('.react-clock__minute-hand');
+      const hand = container.querySelector('.react-clock__minute-hand') as HTMLDivElement;
 
       expect(getAngle(hand)).toBeCloseTo(minute * minuteAngle + second * minuteSecondAngle);
     });
@@ -218,7 +235,7 @@ describe('Clock', () => {
 
       const { container } = render(<Clock value={date} />);
 
-      const hand = container.querySelector('.react-clock__second-hand');
+      const hand = container.querySelector('.react-clock__second-hand') as HTMLDivElement;
 
       expect(getAngle(hand)).toBeCloseTo(second * secondAngle);
     });

src/Clock.jsx renamed to src/Clock.tsx

@@ -7,6 +7,8 @@ import Hand from './Hand';
 import MinuteMark from './MinuteMark';
 import HourMark from './HourMark';
 
+import type { formatHour as defaultFormatHour } from './shared/hourFormatter';
+
 import {
   isHandLength,
   isOppositeHandLength,
@@ -15,6 +17,40 @@ import {
   isMarkWidth,
 } from './shared/propTypes';
 
+import type {
+  HandLength,
+  HandWidth,
+  MarkLength,
+  MarkWidth,
+  OppositeHandLength,
+} from './shared/types';
+
+type ClockProps = {
+  className?: string;
+  formatHour?: typeof defaultFormatHour;
+  hourHandLength?: HandLength;
+  hourHandOppositeLength?: OppositeHandLength;
+  hourHandWidth?: HandWidth;
+  hourMarksLength?: MarkLength;
+  hourMarksWidth?: MarkWidth;
+  locale?: string;
+  minuteHandLength?: HandLength;
+  minuteHandOppositeLength?: OppositeHandLength;
+  minuteHandWidth?: HandWidth;
+  minuteMarksLength?: MarkLength;
+  minuteMarksWidth?: MarkWidth;
+  renderHourMarks?: boolean;
+  renderMinuteHand?: boolean;
+  renderMinuteMarks?: boolean;
+  renderNumbers?: boolean;
+  renderSecondHand?: boolean;
+  secondHandLength?: HandLength;
+  secondHandOppositeLength?: OppositeHandLength;
+  secondHandWidth?: HandWidth;
+  size?: React.CSSProperties['width'];
+  value?: string | Date;
+};
+
 export default function Clock({
   className,
   formatHour,
@@ -39,7 +75,7 @@ export default function Clock({
   secondHandWidth = 1,
   size = 150,
   value,
-}) {
+}: ClockProps) {
   function renderMinuteMarksFn() {
     if (!renderMinuteMarks) {
       return null;
@@ -79,7 +115,7 @@ export default function Clock({
           length={hourMarksLength}
           locale={locale}
           name="hour"
-          number={renderNumbers ? i : null}
+          number={renderNumbers ? i : undefined}
           width={hourMarksWidth}
         />,
       );

src/Hand.spec.jsx renamed to src/Hand.spec.tsx

@@ -1,9 +1,25 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { isHandLength } from './shared/propTypes';
+import { isHandLength, isHandWidth } from './shared/propTypes';
 
-export default function Hand({ angle = 0, name, length = 100, oppositeLength = 10, width = 1 }) {
+import type { HandLength, HandWidth, OppositeHandLength } from './shared/types';
+
+type HandProps = {
+  angle?: number;
+  length?: HandLength;
+  name: string;
+  oppositeLength?: OppositeHandLength;
+  width?: HandWidth;
+};
+
+export default function Hand({
+  angle = 0,
+  name,
+  length = 100,
+  oppositeLength = 10,
+  width = 1,
+}: HandProps) {
   return (
     <div
       className={`react-clock__hand react-clock__${name}-hand`}
@@ -28,5 +44,5 @@ Hand.propTypes = {
   length: isHandLength,
   name: PropTypes.string.isRequired,
   oppositeLength: isHandLength,
-  width: PropTypes.number,
+  width: isHandWidth,
 };

src/Hand.jsx renamed to src/Hand.tsx

@@ -5,17 +5,23 @@ import Mark from './Mark';
 
 import { formatHour as defaultFormatHour } from './shared/hourFormatter';
 
+type HourMarkProps = React.ComponentProps<typeof Mark> & {
+  formatHour?: typeof defaultFormatHour;
+  locale?: string;
+  number?: number;
+};
+
 export default function HourMark({
   formatHour = defaultFormatHour,
   locale,
   number,
   ...otherProps
-}) {
+}: HourMarkProps) {
   return <Mark number={number && formatHour(locale, number)} {...otherProps} />;
 }
 
 HourMark.propTypes = {
   formatHour: PropTypes.func,
   locale: PropTypes.string,
-  number: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  number: PropTypes.number,
 };