switch to eslint & prettier

Author: vaibhavhrt

.editorconfig

@@ -0,0 +1,22 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: ['eslint:recommended', 'plugin:react/recommended', 'react-app'],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 12,
+    sourceType: 'module',
+  },
+  plugins: ['react', 'react-hooks', 'prettier'],
+  settings: { react: { version: '^15.0.0 || ^16.0.0' } },
+  rules: {
+    quotes: ['error', 'single'],
+    semi: ['error', 'always'],
+    'comma-dangle': ['error', 'always-multiline'],
+  },
+};

.eslintrc.js

@@ -0,0 +1,6 @@
+{
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "singleQuote": true,
+  "trailingComma": "all"
+}

.prettierrc

@@ -7,6 +7,7 @@ All notable changes to the "react-github-buttons" project will be documented in
 - Update Dependencies
 - Drop node 8
 - remove tslint
+- switch to eslint & prettier
 
 ## [0.4.0] 2019-6-15
 ### Added

CHANGELOG.md

@@ -32,10 +32,10 @@
     "test:watch": "react-scripts-ts test --env=jsdom",
     "build": "rollup -c",
     "start": "rollup -c -w",
-    "prepare": "npm run build",
+    "prepare": "yarn build",
     "predeploy": "cd example && npm install && npm run build",
     "deploy": "gh-pages -d example/build",
-    "lint": "tslint **/src/**.{ts,tsx} --exclude **/node_modules/**"
+    "lint": "eslint src"
   },
   "dependencies": {},
   "peerDependencies": {
@@ -50,10 +50,19 @@
     "@types/prop-types": "^15.7.1",
     "@types/react": "^16.3.13",
     "@types/react-dom": "^16.0.5",
+    "@typescript-eslint/eslint-plugin": "^4.3.0",
+    "@typescript-eslint/parser": "^4.3.0",
     "babel-core": "^6.26.3",
     "babel-runtime": "^6.26.0",
     "cross-env": "^7.0.2",
     "eslint": "^7.10.0",
+    "eslint-config-react-app": "^5.2.1",
+    "eslint-plugin-flowtype": "^5.2.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.3.1",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-react": "^7.21.3",
+    "eslint-plugin-react-hooks": "^4.1.2",
     "gh-pages": "^3.1.0",
     "react-scripts-ts": "^3.1.0",
     "rollup": "^2.28.2",

package.json

@@ -1,23 +1,23 @@
-import { Fork, Sponsor, Star, UsedBy, Watch } from "../index";
+import { Fork, Sponsor, Star, UsedBy, Watch } from '../index';
 
-describe(">>> Exports required components", () => {
-  it("+++ Fork is truthy", () => {
+describe('>>> Exports required components', () => {
+  it('+++ Fork is truthy', () => {
     expect(Fork).toBeTruthy();
   });
 
-  it("+++ Sponsor is truthy", () => {
+  it('+++ Sponsor is truthy', () => {
     expect(Sponsor).toBeTruthy();
   });
 
-  it("+++ Star is truthy", () => {
+  it('+++ Star is truthy', () => {
     expect(Star).toBeTruthy();
   });
 
-  it("+++ UsedBy is truthy", () => {
+  it('+++ UsedBy is truthy', () => {
     expect(UsedBy).toBeTruthy();
   });
 
-  it("+++ Watch is truthy", () => {
+  it('+++ Watch is truthy', () => {
     expect(Watch).toBeTruthy();
   });
 });

src/__tests__/index.test.ts

@@ -1,10 +1,10 @@
 /**
  * @function Fork
  */
-import * as PropTypes from "prop-types";
-import * as React from "react";
+import * as PropTypes from 'prop-types';
+import * as React from 'react';
 
-import GithubButton from "./lib/githubButton";
+import GithubButton from './lib/githubButton';
 
 export interface IPropTypes {
   owner: string;
@@ -30,14 +30,16 @@ export default class Fork extends React.Component<IPropTypes, IState> {
 
   componentDidMount() {
     const { owner, repo } = this.props;
-    fetch(`https://api.github.com/repos/${owner}/${repo}`).then((res) => res.json()).then((res) => {
-      this.setState({ forks_count: res.forks_count });
-    });
+    fetch(`https://api.github.com/repos/${owner}/${repo}`)
+      .then((res) => res.json())
+      .then((res) => {
+        this.setState({ forks_count: res.forks_count });
+      });
   }
 
   render() {
     // const { owner, repo } = this.props;
     const { forks_count } = this.state;
-    return <GithubButton variant="fork" count={forks_count} { ...this.props } />;
+    return <GithubButton variant="fork" count={forks_count} {...this.props} />;
   }
 }

src/fork.tsx

@@ -1,7 +1,9 @@
-import Fork from "./fork";
-import Sponsor from "./sponsor";
-import Star from "./star";
-import UsedBy from "./usedBy";
-import Watch from "./watch";
+import Fork from './fork';
+import Sponsor from './sponsor';
+import Star from './star';
+import UsedBy from './usedBy';
+import Watch from './watch';
 
-export { Fork, Sponsor, Star, UsedBy, Watch };
+export {
+  Fork, Sponsor, Star, UsedBy, Watch,
+};

src/index.ts

@@ -1,14 +1,14 @@
 /**
  * @function GithubButton
  */
-import * as PropTypes from "prop-types";
-import * as React from "react";
+import * as PropTypes from 'prop-types';
+import * as React from 'react';
 
-import classes from "../styles.css";
+import classes from '../styles.css';
 
-import ForkIcon from "./icons/forkIcon";
-import StarIcon from "./icons/starIcon";
-import WatchIcon from "./icons/watchIcon";
+import ForkIcon from './icons/forkIcon';
+import StarIcon from './icons/starIcon';
+import WatchIcon from './icons/watchIcon';
 import UsedByIcon from './icons/usedByIcon';
 import SponsorIcon from './icons/sponsorIcon';
 
@@ -28,38 +28,38 @@ function getDataForVariant(
   let btnTitle: string;
   let label: string;
   let countUrl: string;
-  if (variant === "star") {
-    title = "Star";
+  if (variant === 'star') {
+    title = 'Star';
     btnTitle = `Star ${owner}/${repo}`;
     label = `${count} users starred this repository`;
     countUrl = `https://github.com/${owner}/${repo}/stargazers`;
     return { title, btnTitle, label, countUrl, Icon: StarIcon };
-  } else if (variant === "fork") {
-    title = "Fork";
+  } else if (variant === 'fork') {
+    title = 'Fork';
     btnTitle = `Fork your own copy of ${owner}/${repo} to your account`;
     label = `${count} users forked this repository`;
     countUrl = `https://github.com/${owner}/${repo}/network/members`;
     return { title, btnTitle, label, countUrl, Icon: ForkIcon };
-  } else if (variant === "watch") {
-    title = "Watch";
-    btnTitle = "";
+  } else if (variant === 'watch') {
+    title = 'Watch';
+    btnTitle = '';
     label = `${count} users are watching this repository`;
     countUrl = `https://github.com/${owner}/${repo}/watchers`;
     return { title, btnTitle, label, countUrl, Icon: WatchIcon };
-  } else if (variant === "usedby") {
-    title = "Used by";
-    btnTitle = "";
+  } else if (variant === 'usedby') {
+    title = 'Used by';
+    btnTitle = '';
     label = `${count} repositories depend on this package`;
     countUrl = `https://github.com/${owner}/${repo}/network/dependents`;
     return { title, btnTitle, label, countUrl, Icon: UsedByIcon };
-  } else if (variant === "sponsor") {
-    title = "Sponsor";
+  } else if (variant === 'sponsor') {
+    title = 'Sponsor';
     btnTitle = `Sponsor ${owner}/${repo}`;
-    label = "";
-    countUrl = "";
+    label = '';
+    countUrl = '';
     return { title, btnTitle, label, countUrl, Icon: SponsorIcon };
   }
-  throw new Error("Invalid Variant, supply one of [star, fork, watch, usedby, sponsor]");
+  throw new Error('Invalid Variant, supply one of [star, fork, watch, usedby, sponsor]');
 }
 
 export interface IPropTypes {
@@ -74,7 +74,7 @@ export default function GithubButton(props: IPropTypes) {
   const { owner, repo, variant, count, showCount } = props;
   const { title, btnTitle, label, countUrl, Icon } = getDataForVariant(variant, count, owner, repo);
 
-  const inlineStyle = showCount ? {} : { borderRadius: ".25em" };
+  const inlineStyle = showCount ? {} : { borderRadius: '.25em' };
 
   return (
     <div className={classes.root}>
@@ -99,7 +99,7 @@ GithubButton.propTypes = {
   count: PropTypes.number,
   owner: PropTypes.string.isRequired,
   repo: PropTypes.string.isRequired,
-  variant: PropTypes.oneOf(["star", "fork", "watch", "usedby", "sponsor"]),
+  variant: PropTypes.oneOf(['star', 'fork', 'watch', 'usedby', 'sponsor']),
   showCount: PropTypes.bool,
 };
 

src/lib/githubButton.tsx

@@ -1,5 +1,5 @@
-import * as React from "react";
-import classes from "../../styles.css";
+import * as React from 'react';
+import classes from '../../styles.css';
 
 export default function ForkIcon() {
   return (