react-clock - npm Package Compare versions

Comparing version 1.0.5 to 2.0.0

package.json

 {
   "name": "react-clock",
-  "version": "1.0.5",
-  "description": "A React component to display the current time.",
-  "main": "index.js",
+  "version": "2.0.0",
+  "description": "A component to display clock for your React application.",
+  "main": "build/entry.js",
+  "es6": "src/entry.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "npm run build-js && npm run build-styles && npm run copy-styles",
+    "build-js": "babel src -d build --ignore **/__tests__",
+    "build-styles": "lessc ./src/Clock.less ./src/Clock.css",
+    "copy-styles": "node ./copy-styles.js",
+    "prepublishOnly": "npm run build",
+    "test": "npm run test-eslint && npm run test-jest",
+    "test-eslint": "eslint ./src",
+    "test-jest": "jest",
+    "test-jest-coverage": "jest --coverage"
   },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/ryanburgess/react-clock.git"
+  "jest": {
+    "collectCoverageFrom": [
+      "**/src/**.{js,jsx}",
+      "!**/src/entry.js"
+    ]
   },
   "keywords": [
-    "react",
-    "react-component",
-    "component",
-    "components",
-    "javascript",
     "clock",
+    "digital clock",
+    "analog clock",
     "time",
-    "es6"
+    "react"
   ],
-  "author": "Ryan Burgess @burgessdryan",
+  "author": {
+    "name": "Wojciech Maj",
+    "email": "[e-mail]"
+  },
   "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/ryanburgess/react-clock/issues"
+  "dependencies": {
+    "merge-class-names": "^1.1.1",
+    "prop-types": "^15.6.0",
+    "react": "^16.1.0",
+    "react-dom": "^16.1.0"
   },
-  "homepage": "https://github.com/ryanburgess/react-clock",
   "devDependencies": {
-    "babel-eslint": "^5.0.0-beta4",
-    "babelify": "^6.3.0",
-    "browserify": "^11.2.0",
-    "eslint-plugin-babel": "^3.0.0",
-    "eslint-plugin-react": "^3.11.3",
-    "gulp": "^3.8.11",
-    "gulp-babel": "^5.2.1",
-    "gulp-eslint": "^1.1.1",
-    "gulp-rename": "^1.2.2",
-    "vinyl-source-stream": "^1.1.0"
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.0",
+    "babel-eslint": "^8.0.2",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
+    "babel-plugin-transform-object-assign": "^6.22.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-2": "^6.24.1",
+    "enzyme": "^3.1.1",
+    "enzyme-adapter-react-16": "^1.0.4",
+    "eslint": "^4.10.0",
+    "eslint-config-airbnb": "^16.1.0",
+    "eslint-plugin-class-property": "^1.0.6",
+    "eslint-plugin-import": "^2.8.0",
+    "eslint-plugin-jsx-a11y": "^6.0.2",
+    "eslint-plugin-react": "^7.4.0",
+    "jest": "^21.2.1",
+    "less": "^2.7.3",
+    "react-test-renderer": "^16.1.0"
   },
-  "dependencies": {
-    "react": "^0.14.3",
-    "react-dom": "^0.14.3"
+  "files": [
+    "LICENSE",
+    "README.md",
+    "build/",
+    "src/"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/wojtekmaj/react-clock.git"
   }
 }

README.md

@@ -1,19 +0,109 @@
-# React Clock [![npm version](https://badge.fury.io/js/react-clock.svg)](http://badge.fury.io/js/react-clock) [![Dependency Status](https://david-dm.org/ryanburgess/react-clock.svg)](https://david-dm.org/ryanburgess/react-clock)
-A React clock component to display the current time.
+![downloads](https://img.shields.io/npm/dt/react-clock.svg) ![build](https://img.shields.io/travis/wojtekmaj/react-clock.svg) ![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)
 
-[DEMO](http://htmlpreview.github.io/?https://github.com/ryanburgess/react-clock/master/index.html)
+# React-Clock
 
-## Getting Started
+A component to display clock for your React application.
 
-Install
+## 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 />`.
 
+## Demo
+
+Minimal demo page is included in sample directory.
+
+[Online demo](http://projekty.wojtekmaj.pl/react-clock/) is also available!
+
+## Installation
+
+Add React-Clock to your project by executing `npm install react-clock` or `yarn add react-clock`.
+
+### Usage
+
+Here's an example of basic usage:
+
+```js
+import React, { Component } from 'react';
+import Clock from 'react-clock';
+
+class MyApp extends Component {
+  state = {
+    date: new Date(),
+  }
+
+  componentDidMount() {
+    setInterval(
+      () => this.setState({ date: new Date() }),
+      1000
+    );
+  }
+
+  render() {
+    return (
+      <div>
+        <p>Current time:</p>
+        <Clock
+          value={this.state.date}
+        />
+      </div>
+    );
+  }
+}
 ```
-npm install react-clock
-```
 
-## Usage
+### Custom styling
 
-```
-var Clock = require('react-clock');
-<Clock />
-```
+If you don't want to use default React-Clock styling to build upon it, you can import React-Clock by using `import Clock from 'react-clock/build/entry.nostyle';` instead.
+
+## User guide
+
+### Clock
+
+Displays a complete clock.
+
+#### Props
+
+|Prop name|Description|Example values|
+|----|----|----|
+|className|Defines class name(s) that will be added along with "react-clock" to the main React-Clock `<time>` element.|<ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul>|
+|hourHandLength|Defines the length of an hour hand, in %. Defaults to `50`.|`80`|
+|hourHandOppositeLength|Defines the length of the part of an hour hand on the opposite side the hand is pointing to, in %.|???|
+|hourHandWidth|Defines the width of an hour hand, in pixels. Defaults to `4`.|`3`|
+|hourMarksLength|Defines the length of hour marks, in %. Defaults to `10`.|`8`|
+|hourMarksWidth|Defines the width of hour marks, in pixels. Defaults to `3`.|`2`|
+|minuteHandLength|Defines the length of a minute hand, in %. Defaults to `70`.|`80`|
+|minuteHandOppositeLength|Defines the length of the part of a minute hand on the opposite side the hand is pointing to, in %. Defaults to `0`.|`20`|
+|minuteHandWidth|Defines the width of a minute hand, in pixels. Defaults to `2`.|`3`|
+|minuteMarksLength|Defines the length of minute marks, in %. Defaults to `6`.|`8`|
+|minuteMarksWidth|Defines the width of a minute hand, in pixels. Defaults to `1`.|`2`|
+|renderHourMarks|Defines whether hour marks shall be rendered. Defaults to `true`.|`false`|
+|renderMinuteHand|Defines whether minute hand shall be rendered. Defaults to `true`.|`false`|
+|renderMinuteMarks|Defines whether minute marks shall be rendered. Defaults to `true`.|`false`|
+|renderSecondHand|Defines whether second hand shall be rendered. Defaults to `true`.|`false`|
+|secondHandLength|Defines the length of a second hand, in %. Defaults to `90`.|`80`|
+|secondHandOppositeLength|Defines the length of the part of a second hand on the opposite side the hand is pointing to, in %. Defaults to `0`.|`20`|
+|secondHandWidth|Defines the width of a second hand, in pixels. Defaults to `1`.|`2`|
+|size|Defines the size of the clock, in pixels. Defaults to `150`.|`250`|
+|value|Defines the value of the clock. Must be provided.|Date: `new Date()`|
+
+## License
+
+The MIT License.
+
+## Author
+
+<table>
+  <tr>
+    <td>
+      <img src="https://github.com/wojtekmaj.png?s=100" width="100">
+    </td>
+    <td>
+      Wojciech Maj<br />
+      <a href="mailto:[e-mail]">[e-mail]</a><br />
+      <a href="http://wojtekmaj.pl">http://wojtekmaj.pl</a>
+    </td>
+  </tr>
+</table>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Improved metrics

Number of package files

16

increased by33.33%

Number of lines in readme file

110

increased by450%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

28080

decreased by-95.84%

Dependency count

4

increased by100%

Dev dependency count

20

increased by100%

Lines of code

642

decreased by-96.23%

Number of low maintenance alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

2

increased byInfinity%

Dependency changes

• + Addedmerge-class-names@^1.1.1

• + Addedprop-types@^15.6.0

• + Addedmerge-class-names@1.4.2(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact@16.14.0(transitive)

• + Addedreact-dom@16.14.0(transitive)

• + Addedreact-is@16.13.1(transitive)

• + Addedscheduler@0.19.1(transitive)

• - Removedacorn@5.7.4(transitive)

• - Removedamdefine@1.0.1(transitive)

• - Removedasap@2.0.6(transitive)

• - Removedast-types@0.9.6(transitive)

• - Removedbalanced-match@1.0.2(transitive)

• - Removedbase62@1.2.8(transitive)

• - Removedbrace-expansion@1.1.11(transitive)

• - Removedcommander@2.20.3(transitive)

• - Removedcommoner@0.10.8(transitive)

• - Removedconcat-map@0.0.1(transitive)

• - Removedcore-js@1.2.7(transitive)

• - Removeddefined@1.0.1(transitive)

• - Removeddetective@4.7.1(transitive)

• - Removedenvify@3.4.1(transitive)

• - Removedesprima@3.1.3(transitive)

• - Removedesprima-fb@15001.1.0-dev-harmony-fb(transitive)

• - Removedfbjs@0.6.1(transitive)

• - Removedglob@5.0.15(transitive)

• - Removedgraceful-fs@4.2.11(transitive)

• - Removediconv-lite@0.4.24(transitive)

• - Removedinflight@1.0.6(transitive)

• - Removedinherits@2.0.4(transitive)

• - Removedjstransform@11.0.3(transitive)

• - Removedminimatch@3.1.2(transitive)

• - Removedminimist@1.2.8(transitive)

• - Removedmkdirp@0.5.6(transitive)

• - Removedobject-assign@2.1.1(transitive)

• - Removedonce@1.4.0(transitive)

• - Removedpath-is-absolute@1.0.1(transitive)

• - Removedprivate@0.1.8(transitive)

• - Removedpromise@7.3.1(transitive)

• - Removedq@1.5.1(transitive)

• - Removedreact@0.14.10(transitive)

• - Removedreact-dom@0.14.10(transitive)

• - Removedrecast@0.11.23(transitive)

• - Removedsafer-buffer@2.1.2(transitive)

• - Removedsource-map@0.4.40.5.7(transitive)

• - Removedthrough@2.3.8(transitive)

• - Removedua-parser-js@0.7.39(transitive)

• - Removedwhatwg-fetch@0.9.0(transitive)

• - Removedwrappy@1.0.2(transitive)

• Updatedreact@^16.1.0

• Updatedreact-dom@^16.1.0