Merge pull request #55 from jonyw4/ToTypescript

Update project to typescript

.eslintrc.yml

@@ -0,0 +1,30 @@
+parser: '@typescript-eslint/parser'
+env:
+  browser: true
+  node: true
+  es6: true
+  'jest/globals': true
+parserOptions:
+  ecmaVersion: 2020
+  sourceType: "module"
+  ecmaFeatures:
+    jsx: true
+settings:
+  react:
+    version: "detect"
+extends:
+  - 'eslint:recommended'
+  - 'plugin:@typescript-eslint/recommended'
+  - 'prettier/@typescript-eslint'
+  - 'plugin:prettier/recommended'
+  - 'plugin:jest/recommended'
+  - 'plugin:react/recommended'
+  - 'plugin:react-hooks/recommended'
+plugins:
+  - '@typescript-eslint'
+  - 'prettier'
+  - 'jest'
+  - 'react'
+  - 'react-hooks'
+rules:
+  "react/no-children-prop": "off"

.github/workflows/main.yml

@@ -18,7 +18,7 @@ jobs:
     - name: Lint
       run: yarn lint
     - name: Test
-      run: yarn test
+      run: yarn test:ci
     - name: Build
       run: yarn build
     - name: Deploy Package

.gitignore

@@ -1,5 +1,5 @@
 node_modules
-dist
+lib
 coverage
 .rpt2_cache
 .rts2_cache_cjs

.prettierrc.json

@@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "trailingComma": "none",
+  "printWidth": 80,
+  "singleQuote": true,
+  "tabWidth": 2
+}

README.md

@@ -22,6 +22,10 @@ Use the official Lokesh's [color-thief](https://github.com/lokesh/color-thief/).
 npm i -S color-thief-react
 ```
 
+```
+yarn add color-thief-react
+```
+
 ## Basic Usage
 ```jsx
 import Color from 'color-thief-react';
@@ -42,7 +46,7 @@ Return the predominant color of the image. You can use a React component or hook
 
 `src`: **Required**. Link of the image
 
-`format`: Format of the response. Can be 'rgbToString' or 'rgbToArray' or 'hex'
+`format`: Format of the response. Can be `rgbString`, `hex` or `rgbArray`. Default is `rgbString`
 
 `crossOrigin`: Tag cross-origin for image
 
@@ -54,7 +58,7 @@ import { useColor } from 'color-thief-react'
 
 const { data, loading, error } = useColor(src, format, { crossOrigin, quality})
 
-<div style={{ color: data.vibrant }}>
+<div style={{ color: data }}>
   Text with the predominant color
 </div>
 ```
@@ -77,7 +81,7 @@ Return a palette of colors based on the predominance of colors on the image. You
 
 `colorCount`: Count of colors of the palette. Default is 2
 
-`format`: Format of the response. Can be `rgbToString` or `rgbToArray` or `hex`. Default is `rgbToString`
+`format`: Format of the response. Can be `rgbString`, `hex` or `rgbArray`. Default is `rgbString`
 
 `crossOrigin`: Tag cross-origin for image
 

jest.config.js

@@ -1,7 +1,14 @@
 module.exports = {
+  coverageDirectory: 'coverage',
+  moduleFileExtensions: ['js', 'json', 'ts', 'tsx'],
+  preset: 'ts-jest',
+  rootDir: __dirname,
+  transform: {
+    '^.+\\.(t|j)s$': 'ts-jest'
+  },
   testPathIgnorePatterns: [
     '<rootDir>/node_modules/',
-    '<rootDir>/__tests__/.eslintrc.js',
+    '<rootDir>/__tests__/.eslintrc.js'
   ],
-  testEnvironmentOptions: { resources: 'usable' },
+  testEnvironmentOptions: { resources: 'usable' }
 };

package.json

@@ -2,50 +2,46 @@
   "name": "color-thief-react",
   "version": "1.0.2",
   "description": "A React component with hooks for Color Thief. Grab color palette from an image with javascript",
-  "main": "dist",
+  "main": "lib/index.js",
   "author": "Jonathan Célio",
   "license": "ISC",
   "scripts": {
-    "lint": "eslint 'src/*'",
-    "test:unit": "jest --collectCoverage",
-    "test": "jest --collectCoverage | codecov",
-    "build": "babel src -d dist"
-  },
-  "jest": {
-    "transform": {
-      "^.+\\.jsx?$": "babel-jest"
-    }
+    "build": "tsc --project tsconfig.build.json",
+    "lint": "eslint '*/**/*.{js,ts,tsx}' --quiet --fix",
+    "test": "jest --collectCoverage",
+    "test:ci": "jest --collectCoverage && codecov"
   },
   "dependencies": {
-    "colorthief": "^2.3.0",
-    "prop-types": "^15.7.2",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0"
-
+    "colorthief": "2.3.0",
+    "prop-types": "15.7.2",
+    "react": "16.12.0",
+    "react-dom": "16.12.0",
+    "use-current-effect": "2.1.0"
   },
   "devDependencies": {
-    "codecov": "3.7.2",
-    "husky": "4.2.5",
-    "semantic-release": "17.1.1",
-    "@babel/cli": "7.10.5",
-    "@babel/core": "7.10.5",
-    "@babel/preset-env": "7.10.4",
-    "@babel/preset-react": "7.10.4",
     "@commitlint/cli": "9.1.1",
     "@commitlint/config-conventional": "9.1.1",
     "@testing-library/react": "10.4.7",
-    "babel-eslint": "10.1.0",
-    "babel-jest": "26.1.0",
+    "@types/jest": "26.0.10",
+    "@types/react": "16.9.46",
+    "@types/react-dom": "16.9.8",
+    "@typescript-eslint/eslint-plugin": "3.9.0",
+    "@typescript-eslint/parser": "3.9.0",
     "canvas": "2.6.1",
+    "codecov": "3.7.2",
     "coveralls": "3.1.0",
     "eslint": "7.5.0",
-    "eslint-config-airbnb": "18.2.0",
-    "eslint-plugin-import": "2.22.0",
-    "eslint-plugin-jest": "23.19.0",
-    "eslint-plugin-jsx-a11y": "6.3.1",
-    "eslint-plugin-react": "7.20.4",
+    "eslint-config-prettier": "6.11.0",
+    "eslint-plugin-jest": "23.20.0",
+    "eslint-plugin-prettier": "3.1.4",
+    "eslint-plugin-react": "7.20.6",
     "eslint-plugin-react-hooks": "4.0.8",
-    "jest": "26.1.0"
+    "husky": "4.2.5",
+    "jest": "26.1.0",
+    "prettier": "2.0.5",
+    "semantic-release": "17.1.1",
+    "ts-jest": "26.2.0",
+    "typescript": "3.9.7"
   },
   "keywords": [
     "color-thief-react",
@@ -57,17 +53,13 @@
   ],
   "husky": {
     "hooks": {
+      "pre-commit": "yarn run lint",
       "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
     }
   },
   "release": {
     "branches": [
-      "+([0-9])?(.{+([0-9]),x}).x",
-      "master",
-      {
-        "name": "beta",
-        "prerelease": true
-      }
+      "master"
     ]
   },
   "commitlint": {