chore(dx): improve DX

.npmignore

@@ -9,7 +9,7 @@
 .travis.yml
 
 # Logs
-npm-debug.log*
+*.log*
 
 # Non transpiled source code
 /src
@@ -20,7 +20,7 @@ npm-debug.log*
 /coverage
 
 # GitHub
-ISSUE_TEMPLATE.md
+/.github
 
 # OSX
 .DS_Store

.travis.yml

@@ -4,7 +4,8 @@ node_js:
   - '7'
   - '8'
 script:
-  - npm run lint
-  - npm run test
-#after_success:
-#  - npm run coveralls
+  - yarn run lint
+  - yarn run fmt:check
+  - yarn run test:cover
+after_success:
+  - yarn run coverage

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaik/ext-time",
-  "version": "2.0.0-alpha.10",
+  "version": "2.0.0-alpha.11",
   "description": "Mozaik time widgets",
   "repository": {
     "type": "git",
@@ -41,7 +41,7 @@
   },
   "devDependencies": {
     "@mozaik/babel-preset": "^1.0.0-alpha.6",
-    "@mozaik/ui": "^2.0.0-alpha.7",
+    "@mozaik/ui": "^2.0.0-alpha.11",
     "babel-cli": "^6.24.1",
     "babel-eslint": "^7.2.3",
     "babel-jest": "^20.0.3",
@@ -50,26 +50,73 @@
     "enzyme": "^2.9.1",
     "eslint": "^4.2.0",
     "eslint-plugin-react": "^7.1.0",
+    "husky": "^0.14.3",
     "jest": "^20.0.4",
+    "lint-staged": "^4.0.2",
     "nyc": "8.1.0",
     "prettier": "^1.5.3",
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
-    "react-test-renderer": "^15.6.1"
+    "react-test-renderer": "^15.6.1",
+    "validate-commit-msg": "^2.14.0"
   },
   "peerDependencies": {
-    "@mozaik/ui": "^2.0.0-alpha.1",
+    "@mozaik/ui": "^2.0.0-alpha.11",
     "react": "^15.6.1"
   },
   "scripts": {
     "lint": "eslint ./src/** ./test/**",
-    "test": "jest",
-    "coveralls": "nyc report --reporter=text-lcov | coveralls",
-    "cover-report": "nyc report --reporter=lcov && open coverage/lcov-report/index.html",
+    "lint:fix": "eslint --fix ./src/** ./test/**",
+    "test": "jest --verbose",
+    "coverage": "cat ./coverage/lcov.info | coveralls",
+    "test:cover": "jest --verbose --coverage",
     "build:commonjs": "cross-env BABEL_ENV=commonjs babel src --out-dir lib",
     "build:es": "cross-env BABEL_ENV=es babel src --out-dir es",
     "build": "npm run build:commonjs && npm run build:es",
-    "format": "prettier --tab-width=4 --bracket-spacing --no-semi --trailing-comma es5 --single-quote --write 'src/**/*.js' 'test/**/*.js'",
-    "prepublish": "npm run format && npm run lint && npm run build"
+    "fmt": "prettier --print-width=100 --tab-width=4 --bracket-spacing --no-semi --trailing-comma es5 --single-quote --color --write \"{src,test}/**/*.js\"",
+    "fmt:check": "prettier --print-width=100 --tab-width=4 --bracket-spacing --no-semi --trailing-comma es5 --single-quote --list-different \"{src,test}/**/*.js\"",
+    "prepublishOnly": "npm run lint && npm test && npm run build",
+    "version": "echo ${npm_package_version}",
+    "precommit": "lint-staged",
+    "commitmsg": "validate-commit-msg"
+  },
+  "lint-staged": {
+    "*.js": [
+      "lint:fix",
+      "fmt",
+      "git add",
+      "jest --bail --findRelatedTests"
+    ]
+  },
+  "config": {
+    "validate-commit-msg": {
+      "types": [
+        "feat",
+        "fix",
+        "docs",
+        "style",
+        "refactor",
+        "perf",
+        "test",
+        "build",
+        "ci",
+        "chore",
+        "revert"
+      ],
+      "scope": {
+        "required": true,
+        "allowed": [
+          "*"
+        ],
+        "validate": false,
+        "multiple": false
+      },
+      "warnOnFail": false,
+      "maxSubjectLength": 80,
+      "subjectPattern": ".+",
+      "subjectPatternErrorMsg": "subject does not match subject pattern!",
+      "helpMessage": "",
+      "autoFix": false
+    }
   }
 }

src/components/Clock.js

@@ -49,9 +49,7 @@ export const HoursHand = Hand.extend`
     background-color: ${props => props.colors.hoursHand};
 `
 
-export const MinutesHand = Hand.extend`
-    background-color: ${props => props.colors.minutesHand};
-`
+export const MinutesHand = Hand.extend`background-color: ${props => props.colors.minutesHand};`
 
 export const SecondsHand = Hand.extend`
     height: 1px;
@@ -92,14 +90,8 @@ const getCurrentTimeParts = timezoneName => {
     }
 }
 
-const secondsScale = d3.scale
-    .linear()
-    .domain([0, 59 + 999 / 1000])
-    .range([-90, 270])
-const minutesScale = d3.scale
-    .linear()
-    .domain([0, 59 + 59 / 60])
-    .range([-90, 270])
+const secondsScale = d3.scale.linear().domain([0, 59 + 999 / 1000]).range([-90, 270])
+const minutesScale = d3.scale.linear().domain([0, 59 + 59 / 60]).range([-90, 270])
 const hoursScale = d3.scale.linear().domain([0, 11 + 59 / 60]).range([-90, 270])
 
 const sunFormats = ['HH:mm', 'H:mm', 'H:m']

src/components/digital_clock/DigitalChar.js

@@ -67,28 +67,13 @@ export default class DigitalChar extends PureComponent {
                 <PartCenterLeft {...shapeProps} isActive={shape.centerLeft} />
                 <PartCenterRight {...shapeProps} isActive={shape.centerRight} />
                 <PartCenterTop {...shapeProps} isActive={shape.centerTop} />
-                <PartCenterBottom
-                    {...shapeProps}
-                    isActive={shape.centerBottom}
-                />
+                <PartCenterBottom {...shapeProps} isActive={shape.centerBottom} />
 
                 {/* Oblique parts */}
-                <PartObliqueTopLeft
-                    {...shapeProps}
-                    isActive={shape.obliqueTopLeft}
-                />
-                <PartObliqueTopRight
-                    {...shapeProps}
-                    isActive={shape.obliqueTopRight}
-                />
-                <PartObliqueBottomRight
-                    {...shapeProps}
-                    isActive={shape.obliqueBottomRight}
-                />
-                <PartObliqueBottomLeft
-                    {...shapeProps}
-                    isActive={shape.obliqueBottomLeft}
-                />
+                <PartObliqueTopLeft {...shapeProps} isActive={shape.obliqueTopLeft} />
+                <PartObliqueTopRight {...shapeProps} isActive={shape.obliqueTopRight} />
+                <PartObliqueBottomRight {...shapeProps} isActive={shape.obliqueBottomRight} />
+                <PartObliqueBottomLeft {...shapeProps} isActive={shape.obliqueBottomLeft} />
             </g>
         )
     }

src/components/digital_clock/DigitalClock.js

@@ -85,11 +85,7 @@ export default class DigitalClock extends Component {
                         {({ measureRef }) =>
                             <div ref={measureRef} style={innerContainerStyle}>
                                 {shouldRenderDate &&
-                                    <DigitalClockDate
-                                        date={date}
-                                        width={width}
-                                        color={color}
-                                    />}
+                                    <DigitalClockDate date={date} width={width} color={color} />}
                                 {shouldRender &&
                                     <DigitalClockTime
                                         date={date}

src/components/digital_clock/DigitalClockDate.js

@@ -41,10 +41,7 @@ export default class DigitalClockDate extends Component {
                     height: dateHeight,
                 }}
             >
-                <svg
-                    width={dateCharWidth * 4 + dateSpacing * 3}
-                    height={dateHeight}
-                >
+                <svg width={dateCharWidth * 4 + dateSpacing * 3} height={dateHeight}>
                     <DigitalWord
                         word={date.format('YYYY')}
                         charWidth={dateCharWidth}
@@ -54,10 +51,7 @@ export default class DigitalClockDate extends Component {
                         color={color}
                     />
                 </svg>
-                <svg
-                    width={dateCharWidth * 2 + dateSpacing}
-                    height={dateHeight}
-                >
+                <svg width={dateCharWidth * 2 + dateSpacing} height={dateHeight}>
                     <DigitalWord
                         word={date.format('MM')}
                         charWidth={dateCharWidth}
@@ -67,10 +61,7 @@ export default class DigitalClockDate extends Component {
                         color={color}
                     />
                 </svg>
-                <svg
-                    width={dateCharWidth * 6 + dateSpacing * 5}
-                    height={dateHeight}
-                >
+                <svg width={dateCharWidth * 6 + dateSpacing * 5} height={dateHeight}>
                     <DigitalWord
                         word={date.format('DD')}
                         charWidth={dateCharWidth}

src/components/digital_clock/DigitalWord.js

@@ -20,16 +20,7 @@ export default class DigitalWord extends PureComponent {
     }
 
     render() {
-        const {
-            word,
-            charWidth,
-            charHeight,
-            stroke,
-            color,
-            spacing,
-            x,
-            y,
-        } = this.props
+        const { word, charWidth, charHeight, stroke, color, spacing, x, y } = this.props
 
         return (
             <g transform={`translate(${x}, ${y})`}>

src/components/digital_clock/parts/PartBottomLeft.js

@@ -4,8 +4,8 @@ import HorizontalPart from './HorizontalPart'
 
 const PartBottomLeft = props =>
     <HorizontalPart
-        transform={`translate(${props.stroke / 2 +
-            props.spacing / 2}, ${props.height - props.stroke})`}
+        transform={`translate(${props.stroke / 2 + props.spacing / 2}, ${props.height -
+            props.stroke})`}
         {...props}
     />
 

src/components/digital_clock/parts/PartBottomRight.js

@@ -4,8 +4,8 @@ import HorizontalPart from './HorizontalPart'
 
 const PartBottomRight = props =>
     <HorizontalPart
-        transform={`translate(${props.width / 2 +
-            props.spacing / 2}, ${props.height - props.stroke})`}
+        transform={`translate(${props.width / 2 + props.spacing / 2}, ${props.height -
+            props.stroke})`}
         {...props}
     />
 

src/components/digital_clock/parts/PartCenterBottom.js

@@ -4,8 +4,8 @@ import VerticalPart from './VerticalPart'
 
 const PartCenterBottom = props =>
     <VerticalPart
-        transform={`translate(${props.width / 2 -
-            props.stroke / 2}, ${props.height / 2 + props.spacing / 2})`}
+        transform={`translate(${props.width / 2 - props.stroke / 2}, ${props.height / 2 +
+            props.spacing / 2})`}
         {...props}
     />
 

src/components/digital_clock/parts/PartCenterLeft.js

@@ -4,8 +4,8 @@ import HorizontalPart from './HorizontalPart'
 
 const PartCenterLeft = props =>
     <HorizontalPart
-        transform={`translate(${props.stroke / 2 +
-            props.spacing / 2}, ${props.height / 2 - props.stroke / 2})`}
+        transform={`translate(${props.stroke / 2 + props.spacing / 2}, ${props.height / 2 -
+            props.stroke / 2})`}
         {...props}
     />
 

src/components/digital_clock/parts/PartCenterRight.js

@@ -4,8 +4,8 @@ import HorizontalPart from './HorizontalPart'
 
 const PartCenterRight = props =>
     <HorizontalPart
-        transform={`translate(${props.width / 2 +
-            props.spacing / 2}, ${props.height / 2 - props.stroke / 2})`}
+        transform={`translate(${props.width / 2 + props.spacing / 2}, ${props.height / 2 -
+            props.stroke / 2})`}
         {...props}
     />
 

src/components/digital_clock/parts/PartCenterTop.js

@@ -4,8 +4,8 @@ import VerticalPart from './VerticalPart'
 
 const PartCenterTop = props =>
     <VerticalPart
-        transform={`translate(${props.width / 2 -
-            props.stroke / 2}, ${props.stroke / 2 + props.spacing / 2})`}
+        transform={`translate(${props.width / 2 - props.stroke / 2}, ${props.stroke / 2 +
+            props.spacing / 2})`}
         {...props}
     />
 

src/components/digital_clock/parts/PartLeftBottom.js

@@ -3,10 +3,7 @@ import { partPropTypes } from './Part'
 import VerticalPart from './VerticalPart'
 
 const PartLeftBottom = props =>
-    <VerticalPart
-        transform={`translate(0, ${props.height / 2 + props.spacing / 2})`}
-        {...props}
-    />
+    <VerticalPart transform={`translate(0, ${props.height / 2 + props.spacing / 2})`} {...props} />
 
 PartLeftBottom.propTypes = partPropTypes
 

src/components/digital_clock/parts/PartLeftTop.js

@@ -3,10 +3,7 @@ import { partPropTypes } from './Part'
 import VerticalPart from './VerticalPart'
 
 const PartLeftTop = props =>
-    <VerticalPart
-        transform={`translate(0, ${props.stroke / 2 + props.spacing / 2})`}
-        {...props}
-    />
+    <VerticalPart transform={`translate(0, ${props.stroke / 2 + props.spacing / 2})`} {...props} />
 
 PartLeftTop.propTypes = partPropTypes
 

src/components/digital_clock/parts/PartObliqueTopLeft.js

@@ -5,8 +5,8 @@ import ObliquePart from './ObliquePart'
 const PartObliqueTopLeft = props =>
     <ObliquePart
         {...props}
-        transform={`translate(${props.stroke +
-            props.spacing / 2}, ${props.stroke + props.spacing / 2})`}
+        transform={`translate(${props.stroke + props.spacing / 2}, ${props.stroke +
+            props.spacing / 2})`}
     />
 
 PartObliqueTopLeft.propTypes = partPropTypes

src/components/digital_clock/parts/PartObliqueTopRight.js

@@ -5,9 +5,7 @@ import ObliquePart from './ObliquePart'
 const PartObliqueTopRight = props =>
     <ObliquePart
         {...props}
-        transform={`translate(${props.width -
-            props.stroke -
-            props.spacing / 2}, ${props.stroke +
+        transform={`translate(${props.width - props.stroke - props.spacing / 2}, ${props.stroke +
             props.spacing / 2}) scale(-1, 1)`}
     />
 

src/components/digital_clock/parts/PartRightBottom.js

@@ -4,8 +4,7 @@ import VerticalPart from './VerticalPart'
 
 const PartRightBottom = props =>
     <VerticalPart
-        transform={`translate(${props.width - props.stroke}, ${props.height /
-            2 +
+        transform={`translate(${props.width - props.stroke}, ${props.height / 2 +
             props.spacing / 2})`}
         {...props}
     />

src/components/digital_clock/parts/PartRightTop.js

@@ -4,8 +4,7 @@ import VerticalPart from './VerticalPart'
 
 const PartRightTop = props =>
     <VerticalPart
-        transform={`translate(${props.width - props.stroke}, ${props.stroke /
-            2 +
+        transform={`translate(${props.width - props.stroke}, ${props.stroke / 2 +
             props.spacing / 2})`}
         {...props}
     />