react-clock - npm Package Compare versions

Comparing version 3.0.0 to 3.1.0

dist/esm/Clock.js

@@ -6,6 +6,8 @@ import React from 'react';
 import Hand from './Hand';
-import Mark from './Mark';
+import MinuteMark from './MinuteMark';
+import HourMark from './HourMark';
 import { isHandLength, isOppositeHandLength, isHandWidth, isMarkLength, isMarkWidth } from './shared/propTypes';
 export default function Clock(_ref) {
   var className = _ref.className,
+      formatHour = _ref.formatHour,
       _ref$hourHandLength = _ref.hourHandLength,
@@ -20,2 +22,3 @@ hourHandLength = _ref$hourHandLength === void 0 ? 50 : _ref$hourHandLength,
       hourMarksWidth = _ref$hourMarksWidth === void 0 ? 3 : _ref$hourMarksWidth,
+      locale = _ref.locale,
       _ref$minuteHandLength = _ref.minuteHandLength,
@@ -59,3 +62,3 @@ minuteHandLength = _ref$minuteHandLength === void 0 ? 70 : _ref$minuteHandLength,
       if (!isHourMark) {
-        minuteMarks.push( /*#__PURE__*/React.createElement(Mark, {
+        minuteMarks.push( /*#__PURE__*/React.createElement(MinuteMark, {
           key: "minute_".concat(i),
@@ -81,6 +84,8 @@ angle: i * 6,
     for (var i = 1; i <= 12; i += 1) {
-      hourMarks.push( /*#__PURE__*/React.createElement(Mark, {
+      hourMarks.push( /*#__PURE__*/React.createElement(HourMark, {
         key: "hour_".concat(i),
         angle: i * 30,
+        formatHour: formatHour,
         length: hourMarksLength,
+        locale: locale,
         name: "hour",
@@ -153,2 +158,3 @@ number: renderNumbers ? i : null,
   className: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  formatHour: PropTypes.func,
   hourHandLength: isHandLength,
@@ -159,2 +165,3 @@ hourHandOppositeLength: isOppositeHandLength,
   hourMarksWidth: isMarkWidth,
+  locale: PropTypes.string,
   minuteHandLength: isHandLength,
@@ -161,0 +168,0 @@ minuteHandOppositeLength: isOppositeHandLength,

dist/esm/Mark.js

@@ -37,4 +37,4 @@ import React from 'react';
   name: PropTypes.string.isRequired,
-  number: PropTypes.number,
+  number: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   width: isMarkWidth
 };

dist/esm/shared/propTypes.js

@@ -1,2 +0,2 @@
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
@@ -3,0 +3,0 @@ import { isDefined } from './utils';

dist/esm/shared/utils.js

@@ -1,3 +0,1 @@
-/* eslint-disable import/prefer-default-export */
-
 /**
@@ -8,4 +6,4 @@ * Checks whether a variable is defined.
  */
-export var isDefined = function isDefined(variable) {
+export function isDefined(variable) {
   return typeof variable !== 'undefined';
-};
+}

dist/umd/Clock.js

@@ -18,4 +18,6 @@ "use strict";
 
-var _Mark = _interopRequireDefault(require("./Mark"));
+var _MinuteMark = _interopRequireDefault(require("./MinuteMark"));
 
+var _HourMark = _interopRequireDefault(require("./HourMark"));
+
 var _propTypes2 = require("./shared/propTypes");
@@ -27,2 +29,3 @@
   var className = _ref.className,
+      formatHour = _ref.formatHour,
       _ref$hourHandLength = _ref.hourHandLength,
@@ -37,2 +40,3 @@ hourHandLength = _ref$hourHandLength === void 0 ? 50 : _ref$hourHandLength,
       hourMarksWidth = _ref$hourMarksWidth === void 0 ? 3 : _ref$hourMarksWidth,
+      locale = _ref.locale,
       _ref$minuteHandLength = _ref.minuteHandLength,
@@ -76,3 +80,3 @@ minuteHandLength = _ref$minuteHandLength === void 0 ? 70 : _ref$minuteHandLength,
       if (!isHourMark) {
-        minuteMarks.push( /*#__PURE__*/_react["default"].createElement(_Mark["default"], {
+        minuteMarks.push( /*#__PURE__*/_react["default"].createElement(_MinuteMark["default"], {
           key: "minute_".concat(i),
@@ -98,6 +102,8 @@ angle: i * 6,
     for (var i = 1; i <= 12; i += 1) {
-      hourMarks.push( /*#__PURE__*/_react["default"].createElement(_Mark["default"], {
+      hourMarks.push( /*#__PURE__*/_react["default"].createElement(_HourMark["default"], {
         key: "hour_".concat(i),
         angle: i * 30,
+        formatHour: formatHour,
         length: hourMarksLength,
+        locale: locale,
         name: "hour",
@@ -171,2 +177,3 @@ number: renderNumbers ? i : null,
   className: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].arrayOf(_propTypes["default"].string)]),
+  formatHour: _propTypes["default"].func,
   hourHandLength: _propTypes2.isHandLength,
@@ -177,2 +184,3 @@ hourHandOppositeLength: _propTypes2.isOppositeHandLength,
   hourMarksWidth: _propTypes2.isMarkWidth,
+  locale: _propTypes["default"].string,
   minuteHandLength: _propTypes2.isHandLength,
@@ -179,0 +187,0 @@ minuteHandOppositeLength: _propTypes2.isOppositeHandLength,

dist/umd/Mark.js

@@ -50,4 +50,4 @@ "use strict";
   name: _propTypes["default"].string.isRequired,
-  number: _propTypes["default"].number,
+  number: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
   width: _propTypes2.isMarkWidth
 };

dist/umd/shared/propTypes.js

@@ -6,7 +6,7 @@ "use strict";
 });
-exports.isMarkWidth = exports.isMarkLength = exports.isHandWidth = exports.isOppositeHandLength = exports.isHandLength = void 0;
+exports.isOppositeHandLength = exports.isMarkWidth = exports.isMarkLength = exports.isHandWidth = exports.isHandLength = void 0;
 
 var _utils = require("./utils");
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
@@ -13,0 +13,0 @@ var isNumberBetween = function isNumberBetween(min, max) {

dist/umd/shared/utils.js

@@ -6,6 +6,4 @@ "use strict";
 });
-exports.isDefined = void 0;
+exports.isDefined = isDefined;
 
-/* eslint-disable import/prefer-default-export */
-
 /**
@@ -16,6 +14,4 @@ * Checks whether a variable is defined.
  */
-var isDefined = function isDefined(variable) {
+function isDefined(variable) {
   return typeof variable !== 'undefined';
-};
-
-exports.isDefined = isDefined;
+}

package.json

 {
   "name": "react-clock",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "An analog clock for your React app.",
@@ -9,3 +9,4 @@ "main": "dist/umd/index.js",
   "sideEffects": [
-    "*.css"
+    "*.css",
+    "*.less"
   ],
@@ -15,4 +16,4 @@ "scripts": {
     "build-js-all": "yarn build-js-esm && yarn build-js-umd",
-    "build-js-esm": "cross-env BABEL_ENV=production-esm babel src -d dist/esm --ignore **/*.spec.js,**/*.spec.jsx",
-    "build-js-umd": "cross-env BABEL_ENV=production-umd babel src -d dist/umd --ignore **/*.spec.js,**/*.spec.jsx",
+    "build-js-esm": "BABEL_ENV=production-esm babel src -d dist/esm --ignore \"**/*.spec.js,**/*.spec.jsx\"",
+    "build-js-umd": "BABEL_ENV=production-umd babel src -d dist/umd --ignore \"**/*.spec.js,**/*.spec.jsx\"",
     "build-styles": "lessc ./dist/Clock.less ./dist/Clock.css",
@@ -22,16 +23,6 @@ "clean": "rimraf dist",
     "jest": "jest",
-    "jest-coverage": "jest --coverage",
     "lint": "eslint sample/ src/ test/ --ext .jsx,.js",
-    "prepublishOnly": "yarn clean && yarn build",
+    "prepack": "yarn clean && yarn build",
     "test": "yarn lint && yarn jest"
   },
-  "jest": {
-    "setupFiles": [
-      "<rootDir>/jest.setup.js"
-    ],
-    "collectCoverageFrom": [
-      "**/src/**.{js,jsx}",
-      "!**/src/index.js"
-    ]
-  },
   "keywords": [
@@ -57,2 +48,3 @@ "clock",
     "@wojtekmaj/date-utils": "^1.0.0",
+    "get-user-locale": "^1.4.0",
     "merge-class-names": "^1.1.1",
@@ -62,33 +54,29 @@ "prop-types": "^15.6.0"
   "devDependencies": {
-    "@babel/cli": "^7.8.0",
-    "@babel/core": "^7.9.0",
-    "@babel/plugin-proposal-class-properties": "^7.8.0",
-    "@babel/preset-env": "^7.9.0",
-    "@babel/preset-react": "^7.9.0",
-    "babel-eslint": "^10.0.0",
-    "cross-env": "^7.0.0",
+    "@babel/cli": "^7.15.0",
+    "@babel/core": "^7.15.0",
+    "@babel/preset-env": "^7.15.0",
+    "@babel/preset-react": "^7.14.0",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.0",
     "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.14.0",
-    "eslint": "~7.2.0",
-    "eslint-config-airbnb": "^18.2.0",
-    "eslint-plugin-import": "^2.21.2",
-    "eslint-plugin-jsx-a11y": "^6.3.0",
-    "eslint-plugin-react": "^7.20.0",
-    "eslint-plugin-react-hooks": "^4.0.0",
-    "jest": "^26.0.0",
-    "less": "^3.8.1",
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0",
-    "react-test-renderer": "^16.7.0",
+    "eslint": "^8.5.0",
+    "eslint-config-wojtekmaj": "^0.6.5",
+    "husky": "^7.0.0",
+    "jest": "^27.0.0",
+    "less": "^4.0.0",
+    "prettier": "^2.5.0",
+    "pretty-quick": "^3.1.0",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
     "rimraf": "^3.0.0"
   },
   "peerDependencies": {
-    "react": ">=15.5",
-    "react-dom": ">=15.5"
+    "react": "^15.5.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^15.5.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
   },
+  "resolutions": {
+    "semver@7.0.0": "^7.0.0"
+  },
   "files": [
-    "LICENSE",
-    "README.md",
-    "dist/",
-    "src/"
+    "dist",
+    "src"
   ],
@@ -99,3 +87,4 @@ "repository": {
   },
-  "funding": "https://github.com/wojtekmaj/react-clock?sponsor=1"
-}
+  "funding": "https://github.com/wojtekmaj/react-clock?sponsor=1",
+  "packageManager": "yarn@3.1.0"
+}

README.md

@@ -1,4 +0,2 @@
-[![npm](https://img.shields.io/npm/v/react-clock.svg)](https://www.npmjs.com/package/react-clock) ![downloads](https://img.shields.io/npm/dt/react-clock.svg) [![build](https://travis-ci.com/wojtekmaj/react-clock.svg?branch=master)](https://travis-ci.com/wojtekmaj/react-clock) ![dependencies](https://img.shields.io/david/wojtekmaj/react-clock.svg
-) ![dev dependencies](https://img.shields.io/david/dev/wojtekmaj/react-clock.svg
-) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)
+[![npm](https://img.shields.io/npm/v/react-clock.svg)](https://www.npmjs.com/package/react-clock) ![downloads](https://img.shields.io/npm/dt/react-clock.svg) [![CI](https://github.com/wojtekmaj/react-clock/workflows/CI/badge.svg)](https://github.com/wojtekmaj/react-clock/actions) ![dependencies](https://img.shields.io/david/wojtekmaj/react-clock.svg) ![dev dependencies](https://img.shields.io/david/dev/wojtekmaj/react-clock.svg) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)
 
@@ -10,6 +8,7 @@ # React-Clock
 ## tl;dr
-* Install by executing `npm install react-clock` or `yarn add react-clock`.
-* Import by adding `import Clock from 'react-clock'`.
-* Use by adding `<Clock />`.
 
+- Install by executing `npm install react-clock` or `yarn add react-clock`.
+- Import by adding `import Clock from 'react-clock'`.
+- Use by adding `<Clock />`.
+
 ## Demo
@@ -37,10 +36,7 @@
   useEffect(() => {
-    const interval = setInterval(
-      () => setValue(new Date()),
-      1000
-    );
+    const interval = setInterval(() => setValue(new Date()), 1000);
 
     return () => {
       clearInterval(interval);
-    }
+    };
   }, []);
@@ -53,3 +49,3 @@
     </div>
-  )
+  );
 }
@@ -74,25 +70,27 @@ ```
 
-|Prop name|Description|Default value|Example values|
-|----|----|----|----|
-|className|Class name(s) that will be added along with `"react-clock"` to the main React-Clock `<time>` element.|n/a|<ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul>|
-|hourHandLength|Hour hand length, in %.|`50`|`80`|
-|hourHandOppositeLength|The length of the part of an hour hand on the opposite side the hand is pointing to, in %.|`10`|`20`|
-|hourHandWidth|Hour hand width, in pixels.|`4`|`3`|
-|hourMarksLength|Hour marks length, in %.|`10`|`8`|
-|hourMarksWidth|Hour marks width, in pixels.|`3`|`2`|
-|minuteHandLength|Minute hand length, in %.|`70`|`80`|
-|minuteHandOppositeLength|The length of the part of a minute hand on the opposite side the hand is pointing to, in %.|`10`|`20`|
-|minuteHandWidth|Minute hand width, in pixels.|`2`|`3`|
-|minuteMarksLength|Minute marks length, in %.|`6`|`8`|
-|minuteMarksWidth|Minute marks width, in pixels.|`1`|`2`|
-|renderHourMarks|Whether hour marks shall be rendered.|`true`|`false`|
-|renderMinuteHand|Whether minute hand shall be rendered.|`true`|`false`|
-|renderMinuteMarks|Whether minute marks shall be rendered.|`true`|`false`|
-|renderNumbers|Whether numbers shall be rendered.|`false`|`true`|
-|renderSecondHand|Whether second hand shall be rendered.|`true`|`false`|
-|secondHandLength|Second hand length, in %.|`90`|`80`|
-|secondHandOppositeLength|The length of the part of a second hand on the opposite side the hand is pointing to, in %.|`10`|`20`|
-|secondHandWidth|Second hand width, in pixels.|`1`|`2`|
-|size|Clock size, in pixels.|`150`|`250`|
-|value|Clock value. Must be provided.|n/a|Date: `new Date()`|
+| Prop name                | Description                                                                                                               | Default value           | Example values                                                                                      |
+| ------------------------ | ------------------------------------------------------------------------------------------------------------------------- | ----------------------- | --------------------------------------------------------------------------------------------------- |
+| className                | Class name(s) that will be added along with `"react-clock"` to the main React-Clock `<time>` element.                     | n/a                     | <ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul> |
+| formatHour               | Function called to override default formatting of hour marks. Can be used to use your own formatting function.            | (default formatter)     | `(locale, hour) => formatHour(hour, 'HH')`                                                          |
+| hourHandLength           | Hour hand length, in %.                                                                                                   | `50`                    | `80`                                                                                                |
+| hourHandOppositeLength   | The length of the part of an hour hand on the opposite side the hand is pointing to, in %.                                | `10`                    | `20`                                                                                                |
+| hourHandWidth            | Hour hand width, in pixels.                                                                                               | `4`                     | `3`                                                                                                 |
+| hourMarksLength          | Hour marks length, in %.                                                                                                  | `10`                    | `8`                                                                                                 |
+| hourMarksWidth           | Hour marks width, in pixels.                                                                                              | `3`                     | `2`                                                                                                 |
+| locale                   | Locale that should be used by the clock. Can be any [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag). | User's browser settings | `"hu-HU"`                                                                                           |
+| minuteHandLength         | Minute hand length, in %.                                                                                                 | `70`                    | `80`                                                                                                |
+| minuteHandOppositeLength | The length of the part of a minute hand on the opposite side the hand is pointing to, in %.                               | `10`                    | `20`                                                                                                |
+| minuteHandWidth          | Minute hand width, in pixels.                                                                                             | `2`                     | `3`                                                                                                 |
+| minuteMarksLength        | Minute marks length, in %.                                                                                                | `6`                     | `8`                                                                                                 |
+| minuteMarksWidth         | Minute marks width, in pixels.                                                                                            | `1`                     | `2`                                                                                                 |
+| renderHourMarks          | Whether hour marks shall be rendered.                                                                                     | `true`                  | `false`                                                                                             |
+| renderMinuteHand         | Whether minute hand shall be rendered.                                                                                    | `true`                  | `false`                                                                                             |
+| renderMinuteMarks        | Whether minute marks shall be rendered.                                                                                   | `true`                  | `false`                                                                                             |
+| renderNumbers            | Whether numbers shall be rendered.                                                                                        | `false`                 | `true`                                                                                              |
+| renderSecondHand         | Whether second hand shall be rendered.                                                                                    | `true`                  | `false`                                                                                             |
+| secondHandLength         | Second hand length, in %.                                                                                                 | `90`                    | `80`                                                                                                |
+| secondHandOppositeLength | The length of the part of a second hand on the opposite side the hand is pointing to, in %.                               | `10`                    | `20`                                                                                                |
+| secondHandWidth          | Second hand width, in pixels.                                                                                             | `1`                     | `2`                                                                                                 |
+| size                     | Clock size, in pixels.                                                                                                    | `150`                   | `250`                                                                                               |
+| value                    | Clock value. Must be provided.                                                                                            | n/a                     | Date: `new Date()`                                                                                  |
 
@@ -113,5 +111,5 @@ ## License
       <a href="mailto:[e-mail]">[e-mail]</a><br />
-      <a href="http://wojtekmaj.pl">http://wojtekmaj.pl</a>
+      <a href="https://wojtekmaj.pl">https://wojtekmaj.pl</a>
     </td>
   </tr>
 </table>

src/Clock.jsx

@@ -7,3 +7,4 @@ import React from 'react';
 import Hand from './Hand';
-import Mark from './Mark';
+import MinuteMark from './MinuteMark';
+import HourMark from './HourMark';
 
@@ -20,2 +21,3 @@ import {
   className,
+  formatHour,
   hourHandLength = 50,
@@ -26,2 +28,3 @@ hourHandOppositeLength,
   hourMarksWidth = 3,
+  locale,
   minuteHandLength = 70,
@@ -54,3 +57,3 @@ minuteHandOppositeLength,
         minuteMarks.push(
-          <Mark
+          <MinuteMark
             key={`minute_${i}`}
@@ -76,6 +79,8 @@ angle={i * 6}
       hourMarks.push(
-        <Mark
+        <HourMark
           key={`hour_${i}`}
           angle={i * 30}
+          formatHour={formatHour}
           length={hourMarksLength}
+          locale={locale}
           name="hour"
@@ -100,7 +105,5 @@ number={renderNumbers ? i : null}
   function renderHourHandFn() {
-    const angle = value ? (
-      (getHours(value) * 30)
-      + (getMinutes(value) / 2)
-      + (getSeconds(value) / 600)
-    ) : 0;
+    const angle = value
+      ? getHours(value) * 30 + getMinutes(value) / 2 + getSeconds(value) / 600
+      : 0;
 
@@ -123,7 +126,5 @@ return (
 
-    const angle = value ? (
-      (getHours(value) * 360)
-      + (getMinutes(value) * 6)
-      + (getSeconds(value) / 10)
-    ) : 0;
+    const angle = value
+      ? getHours(value) * 360 + getMinutes(value) * 6 + getSeconds(value) / 10
+      : 0;
 
@@ -146,6 +147,3 @@ return (
 
-    const angle = value ? (
-      (getMinutes(value) * 360)
-      + (getSeconds(value) * 6)
-    ) : 0;
+    const angle = value ? getMinutes(value) * 360 + getSeconds(value) * 6 : 0;
 
@@ -181,6 +179,4 @@ return (
 Clock.propTypes = {
-  className: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.arrayOf(PropTypes.string),
-  ]),
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  formatHour: PropTypes.func,
   hourHandLength: isHandLength,
@@ -191,2 +187,3 @@ hourHandOppositeLength: isOppositeHandLength,
   hourMarksWidth: isMarkWidth,
+  locale: PropTypes.string,
   minuteHandLength: isHandLength,
@@ -206,6 +203,3 @@ minuteHandOppositeLength: isOppositeHandLength,
   size: PropTypes.number,
-  value: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.instanceOf(Date),
-  ]),
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
 };

src/Clock.spec.jsx

@@ -6,10 +6,6 @@ import React from 'react';
 
-/* eslint-disable comma-dangle */
-
 describe('Clock', () => {
   describe('<time> element', () => {
     it('is rendered properly', () => {
-      const component = shallow(
-        <Clock />
-      );
+      const component = shallow(<Clock />);
 
@@ -22,5 +18,3 @@ const time = component.find('time');
     it('has 150px size by default', () => {
-      const component = shallow(
-        <Clock />
-      );
+      const component = shallow(<Clock />);
 
@@ -36,5 +30,3 @@ const time = component.find('time');
 
-      const component = shallow(
-        <Clock size={size} />
-      );
+      const component = shallow(<Clock size={size} />);
 
@@ -50,5 +42,3 @@ const time = component.find('time');
 
-      const component = shallow(
-        <Clock value={date} />
-      );
+      const component = shallow(<Clock value={date} />);
 
@@ -63,5 +53,3 @@ const time = component.find('time');
 
-      const component = shallow(
-        <Clock value={date} />
-      );
+      const component = shallow(<Clock value={date} />);
 
@@ -76,5 +64,3 @@ const time = component.find('time');
     it('is rendered properly', () => {
-      const component = shallow(
-        <Clock />
-      );
+      const component = shallow(<Clock />);
 
@@ -87,11 +73,7 @@ const face = component.find('.react-clock__face');
     it('has hour and minute marks by default', () => {
-      const component = mount(
-        <Clock />
-      );
+      const component = shallow(<Clock />);
 
-      const marks = component.find('.react-clock__mark');
-      const hourMarks = component.find('.react-clock__hour-mark');
-      const minuteMarks = component.find('.react-clock__minute-mark');
+      const hourMarks = component.find('HourMark');
+      const minuteMarks = component.find('MinuteMark');
 
-      expect(marks).toHaveLength(60);
       expect(hourMarks).toHaveLength(12);
@@ -102,36 +84,36 @@ expect(minuteMarks).toHaveLength(60 - 12);
     it('does not have hour numbers rendered by default', () => {
-      const component = mount(
-        <Clock />
-      );
+      const component = shallow(<Clock />);
 
-      const hourMarkNumbers = component.find('.react-clock__mark__number');
+      const hourMarks = component.find('HourMark');
 
-      expect(hourMarkNumbers).toHaveLength(0);
+      expect(hourMarks.at(0).prop('number')).toBeFalsy();
     });
 
     it('has hour numbers given renderNumbers flag', () => {
-      const component = mount(
-        <Clock renderNumbers />
-      );
+      const component = shallow(<Clock renderNumbers />);
 
-      const hourMarks = component.find('.react-clock__hour-mark');
+      const hourMarks = component.find('HourMark');
 
       hourMarks.forEach((hourMark, index) => {
-        const hourMarkNumber = hourMark.find('.react-clock__mark__number');
+        const hourMarkNumber = hourMark.prop('number');
 
-        expect(hourMarkNumber).toHaveLength(1);
-        expect(hourMarkNumber.text()).toBe(`${index + 1}`);
+        expect(hourMarkNumber).toBe(index + 1);
       });
     });
 
+    it('passes formatHour to HourMark components', () => {
+      const formatHour = () => 'H';
+      const component = shallow(<Clock formatHour={formatHour} renderNumbers />);
+
+      const hourMarks = component.find('HourMark');
+
+      expect(hourMarks.at(0).prop('formatHour')).toBe(formatHour);
+    });
+
     it('has only minute marks when renderHourMarks is false', () => {
-      const component = mount(
-        <Clock renderHourMarks={false} />
-      );
+      const component = shallow(<Clock renderHourMarks={false} />);
 
-      const marks = component.find('.react-clock__mark');
-      const hourMarks = component.find('.react-clock__hour-mark');
-      const minuteMarks = component.find('.react-clock__minute-mark');
+      const hourMarks = component.find('HourMark');
+      const minuteMarks = component.find('MinuteMark');
 
-      expect(marks).toHaveLength(60);
       expect(hourMarks).toHaveLength(0);
@@ -142,11 +124,7 @@ expect(minuteMarks).toHaveLength(60);
     it('has only hour marks when renderMinuteMarks is false', () => {
-      const component = mount(
-        <Clock renderMinuteMarks={false} />
-      );
+      const component = shallow(<Clock renderMinuteMarks={false} />);
 
-      const marks = component.find('.react-clock__mark');
-      const hourMarks = component.find('.react-clock__hour-mark');
-      const minuteMarks = component.find('.react-clock__minute-mark');
+      const hourMarks = component.find('HourMark');
+      const minuteMarks = component.find('MinuteMark');
 
-      expect(marks).toHaveLength(12);
       expect(hourMarks).toHaveLength(12);
@@ -157,12 +135,9 @@ expect(minuteMarks).toHaveLength(0);
     it('has no marks when renderHourMarks and renderMinuteMarks are false', () => {
-      const component = mount(
-        <Clock
-          renderHourMarks={false}
-          renderMinuteMarks={false}
-        />
-      );
+      const component = shallow(<Clock renderHourMarks={false} renderMinuteMarks={false} />);
 
-      const marks = component.find('.react-clock__mark');
+      const hourMarks = component.find('HourMark');
+      const minuteMarks = component.find('MinuteMark');
 
-      expect(marks).toHaveLength(0);
+      expect(hourMarks).toHaveLength(0);
+      expect(minuteMarks).toHaveLength(0);
     });
@@ -178,10 +153,8 @@ });
 
-  const getDeg = transform => parseFloat(transform.match(/rotate\(([0-9.]*)deg\)/)[1]);
-  const getAngle = hand => getDeg(hand.prop('style').transform) % 360;
+  const getDeg = (transform) => parseFloat(transform.match(/rotate\(([0-9.]*)deg\)/)[1]);
+  const getAngle = (hand) => getDeg(hand.prop('style').transform) % 360;
 
   describe('hour hand', () => {
     it('is rendered properly', () => {
-      const component = mount(
-        <Clock />
-      );
+      const component = mount(<Clock />);
 
@@ -198,9 +171,7 @@ const face = component.find('.react-clock__hour-hand');
 
-      const component = mount(
-        <Clock value={date} />
-      );
+      const component = mount(<Clock value={date} />);
 
       const hand = component.find('.react-clock__hour-hand');
 
-      expect(getAngle(hand)).toBeCloseTo((hour * hourAngle) + (minute * hourMinuteAngle));
+      expect(getAngle(hand)).toBeCloseTo(hour * hourAngle + minute * hourMinuteAngle);
     });
@@ -211,5 +182,3 @@ });
     it('is rendered properly', () => {
-      const component = mount(
-        <Clock />
-      );
+      const component = mount(<Clock />);
 
@@ -222,5 +191,3 @@ const face = component.find('.react-clock__minute-hand');
     it('is not rendered when renderMinuteHand is false', () => {
-      const component = mount(
-        <Clock renderMinuteHand={false} />
-      );
+      const component = mount(<Clock renderMinuteHand={false} />);
 
@@ -238,9 +205,7 @@ const face = component.find('.react-clock__minute-hand');
 
-      const component = mount(
-        <Clock value={date} />
-      );
+      const component = mount(<Clock value={date} />);
 
       const hand = component.find('.react-clock__minute-hand');
 
-      expect(getAngle(hand)).toBeCloseTo((minute * minuteAngle) + (second * minuteSecondAngle));
+      expect(getAngle(hand)).toBeCloseTo(minute * minuteAngle + second * minuteSecondAngle);
     });
@@ -251,5 +216,3 @@ });
     it('is rendered properly', () => {
-      const component = mount(
-        <Clock />
-      );
+      const component = mount(<Clock />);
 
@@ -262,5 +225,3 @@ const face = component.find('.react-clock__second-hand');
     it('is not rendered when renderSecondHand is false', () => {
-      const component = mount(
-        <Clock renderSecondHand={false} />
-      );
+      const component = mount(<Clock renderSecondHand={false} />);
 
@@ -278,5 +239,3 @@ const face = component.find('.react-clock__second-hand');
 
-      const component = mount(
-        <Clock value={date} />
-      );
+      const component = mount(<Clock value={date} />);
 
@@ -283,0 +242,0 @@ const hand = component.find('.react-clock__second-hand');

src/Hand.jsx

@@ -6,9 +6,3 @@ import React from 'react';
 
-export default function Hand({
-  angle = 0,
-  name,
-  length = 100,
-  oppositeLength = 10,
-  width = 1,
-}) {
+export default function Hand({ angle = 0, name, length = 100, oppositeLength = 10, width = 1 }) {
   return (
@@ -25,4 +19,4 @@ <div
           width: `${width}px`,
-          top: `${50 - (length / 2)}%`,
-          bottom: `${50 - (oppositeLength / 2)}%`,
+          top: `${50 - length / 2}%`,
+          bottom: `${50 - oppositeLength / 2}%`,
         }}
@@ -29,0 +23,0 @@ />

src/Hand.spec.jsx

@@ -6,9 +6,5 @@ import React from 'react';
 
-/* eslint-disable comma-dangle */
-
 describe('Hand', () => {
   it('renders a hand with given name', () => {
-    const component = shallow(
-      <Hand name="minute" />
-    );
+    const component = shallow(<Hand name="minute" />);
 
@@ -23,5 +19,3 @@ const hand = component.find('.react-clock__hand');
   it('renders hand angled at 0° by default', () => {
-    const component = shallow(
-      <Hand name="minute" />
-    );
+    const component = shallow(<Hand name="minute" />);
 
@@ -34,5 +28,3 @@ const hand = component.find('.react-clock__hand');
   it('renders properly angled hand given angle prop', () => {
-    const component = shallow(
-      <Hand angle={15} name="minute" />
-    );
+    const component = shallow(<Hand angle={15} name="minute" />);
 
@@ -45,5 +37,3 @@ const hand = component.find('.react-clock__hand');
   it('renders hand with 100% length by default', () => {
-    const component = shallow(
-      <Hand name="minute" />
-    );
+    const component = shallow(<Hand name="minute" />);
 
@@ -56,5 +46,3 @@ const handBody = component.find('.react-clock__hand__body');
   it('renders hand with proper length given length prop', () => {
-    const component = shallow(
-      <Hand length={50} name="minute" />
-    );
+    const component = shallow(<Hand length={50} name="minute" />);
 
@@ -67,5 +55,3 @@ const handBody = component.find('.react-clock__hand__body');
   it('renders hand with 10% oppositeLength by default', () => {
-    const component = shallow(
-      <Hand name="minute" />
-    );
+    const component = shallow(<Hand name="minute" />);
 
@@ -78,5 +64,3 @@ const handBody = component.find('.react-clock__hand__body');
   it('renders hand with proper oppositeLength given oppositeLength prop', () => {
-    const component = shallow(
-      <Hand name="minute" oppositeLength={50} />
-    );
+    const component = shallow(<Hand name="minute" oppositeLength={50} />);
 
@@ -89,5 +73,3 @@ const handBody = component.find('.react-clock__hand__body');
   it('renders hand with 1px width by default', () => {
-    const component = shallow(
-      <Hand name="minute" />
-    );
+    const component = shallow(<Hand name="minute" />);
 
@@ -100,5 +82,3 @@ const handBody = component.find('.react-clock__hand__body');
   it('renders hand with proper width given length prop', () => {
-    const component = shallow(
-      <Hand name="minute" width={5} />
-    );
+    const component = shallow(<Hand name="minute" width={5} />);
 
@@ -105,0 +85,0 @@ const handBody = component.find('.react-clock__hand__body');

src/Mark.jsx

@@ -6,9 +6,3 @@ import React from 'react';
 
-export default function Mark({
-  angle = 0,
-  length = 10,
-  name,
-  width = 1,
-  number,
-}) {
+export default function Mark({ angle = 0, length = 10, name, width = 1, number }) {
   return (
@@ -26,3 +20,3 @@ <div
           top: 0,
-          bottom: `${100 - (length / 2)}%`,
+          bottom: `${100 - length / 2}%`,
         }}
@@ -49,4 +43,4 @@ />
   name: PropTypes.string.isRequired,
-  number: PropTypes.number,
+  number: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   width: isMarkWidth,
 };

src/Mark.spec.jsx

@@ -6,9 +6,5 @@ import React from 'react';
 
-/* eslint-disable comma-dangle */
-
 describe('Mark', () => {
   it('renders a hand with given name', () => {
-    const component = shallow(
-      <Mark name="minute" />
-    );
+    const component = shallow(<Mark name="minute" />);
 
@@ -23,5 +19,3 @@ const mark = component.find('.react-clock__mark');
   it('renders mark angled at 0° by default', () => {
-    const component = shallow(
-      <Mark name="minute" />
-    );
+    const component = shallow(<Mark name="minute" />);
 
@@ -34,5 +28,3 @@ const mark = component.find('.react-clock__mark');
   it('renders properly angled mark given angle prop', () => {
-    const component = shallow(
-      <Mark angle={15} name="minute" />
-    );
+    const component = shallow(<Mark angle={15} name="minute" />);
 
@@ -45,5 +37,3 @@ const mark = component.find('.react-clock__mark');
   it('renders mark with 10% length by default', () => {
-    const component = shallow(
-      <Mark name="minute" />
-    );
+    const component = shallow(<Mark name="minute" />);
 
@@ -56,5 +46,3 @@ const markBody = component.find('.react-clock__mark__body');
   it('renders mark with proper length given length prop', () => {
-    const component = shallow(
-      <Mark length={50} name="minute" />
-    );
+    const component = shallow(<Mark length={50} name="minute" />);
 
@@ -67,5 +55,3 @@ const markBody = component.find('.react-clock__mark__body');
   it('renders mark with 1px width by default', () => {
-    const component = shallow(
-      <Mark name="minute" />
-    );
+    const component = shallow(<Mark name="minute" />);
 
@@ -78,5 +64,3 @@ const markBody = component.find('.react-clock__mark__body');
   it('renders mark with proper length given length prop', () => {
-    const component = shallow(
-      <Mark name="minute" width={5} />
-    );
+    const component = shallow(<Mark name="minute" width={5} />);
 
@@ -89,5 +73,3 @@ const markBody = component.find('.react-clock__mark__body');
   it('renders number given number prop', () => {
-    const component = shallow(
-      <Mark name="minute" number={1} />
-    );
+    const component = shallow(<Mark name="minute" number={1} />);
 
@@ -100,5 +82,3 @@ const markNumber = component.find('.react-clock__mark__number');
   it('renders number angled at 0° by default', () => {
-    const component = shallow(
-      <Mark name="minute" number={1} />
-    );
+    const component = shallow(<Mark name="minute" number={1} />);
 
@@ -111,5 +91,3 @@ const markNumber = component.find('.react-clock__mark__number');
   it('renders properly angled mark given angle prop', () => {
-    const component = shallow(
-      <Mark angle={15} name="minute" number={1} />
-    );
+    const component = shallow(<Mark angle={15} name="minute" number={1} />);
 
@@ -116,0 +94,0 @@ const markNumber = component.find('.react-clock__mark__number');

src/shared/propTypes.js

@@ -8,7 +8,11 @@ import { isDefined } from './utils';
     if (typeof value !== 'number') {
-      return new Error(`Invalid prop \`${propName}\` of type \`${typeof value}\` supplied to \`${componentName}\`, expected \`number\`.`);
+      return new Error(
+        `Invalid prop \`${propName}\` of type \`${typeof value}\` supplied to \`${componentName}\`, expected \`number\`.`,
+      );
     }
 
     if (value < min || value > max) {
-      return new Error(`Invalid prop \`${propName}\` of type \`${typeof value}\` supplied to \`${componentName}\`, length must be between ${min} and ${max}.`);
+      return new Error(
+        `Invalid prop \`${propName}\` of type \`${typeof value}\` supplied to \`${componentName}\`, length must be between ${min} and ${max}.`,
+      );
     }
@@ -30,7 +34,11 @@ }
     if (typeof width !== 'number') {
-      return new Error(`Invalid prop \`${propName}\` of type \`${typeof width}\` supplied to \`${componentName}\`, expected \`number\`.`);
+      return new Error(
+        `Invalid prop \`${propName}\` of type \`${typeof width}\` supplied to \`${componentName}\`, expected \`number\`.`,
+      );
     }
 
     if (width < 0) {
-      return new Error(`Invalid prop \`${propName}\` of type \`${typeof width}\` supplied to \`${componentName}\`, width must be greater or equal to 0.`);
+      return new Error(
+        `Invalid prop \`${propName}\` of type \`${typeof width}\` supplied to \`${componentName}\`, width must be greater or equal to 0.`,
+      );
     }
@@ -37,0 +45,0 @@ }

src/shared/utils.js

@@ -1,3 +0,1 @@
-/* eslint-disable import/prefer-default-export */
-
 /**
@@ -8,2 +6,4 @@ * Checks whether a variable is defined.
  */
-export const isDefined = variable => typeof variable !== 'undefined';
+export function isDefined(variable) {
+  return typeof variable !== 'undefined';
+}

No alert changes

Improved metrics

Total package byte prevSize

66996

21.9%

Dev dependency count

16

-23.81%

Number of package files

38

40.74%

Lines of code

1331

4.47%

Worsened metrics

Dependency count

6

20%

Number of lines in readme file

111

-1.77%

Dependency changes

• + Added

  get-user-locale@^1.4.0

• + Added

  get-user-locale@1.5.1
  (transitive)

• + Added

  lodash.memoize@4.1.2
  (transitive)

• + Added

  react@18.3.1
  (transitive)

• + Added

  react-dom@18.3.1
  (transitive)

• + Added

  scheduler@0.23.2
  (transitive)

• - Removed

  react@19.1.0
  (transitive)

• - Removed

  react-dom@19.1.0
  (transitive)

• - Removed

  scheduler@0.26.0
  (transitive)