fix: typescript

Author: wwayne

.eslintignore

@@ -2,4 +2,5 @@ dist/
 demo/dist
 webpack/
 jest.config.js
-.eslintrc.js
+.eslintrc.js
+tailwind.config.js

.eslintrc.js

@@ -1,6 +1,10 @@
 module.exports = {
   root: true,
   parser: '@typescript-eslint/parser',
+  "parserOptions": {
+    "ecmaVersion": 2018,
+    "sourceType": "module"
+  },
   plugins: [
     '@typescript-eslint',
   ],
@@ -9,4 +13,21 @@ module.exports = {
     "plugin:react/recommended",
     'plugin:@typescript-eslint/recommended',
   ],
+  settings: {
+    react: {
+      "version": "detect"
+    }
+  },
+  rules: {
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/no-explicit-any": "off"
+  },
+  "overrides": [
+    {
+      "files": ["*.js", "*.ts"],
+      "rules": {
+        "@typescript-eslint/explicit-module-boundary-types": "warn"
+      }
+    }
+  ]
 };

Makefile

@@ -13,7 +13,7 @@ dev:
 .PHONY: lint lint-fix dev
 
 # Test
-test:
+test: lint-fix
 	@echo "Running test..."
 	@npx jest
 .PHONY: test

demo/src/App/AvatarEditor/SectionWrapper/index.tsx

@@ -2,7 +2,12 @@ import React from 'react'
 
 import './index.scss'
 
-export default function (props) {
+export default function sectionWrapper(props: {
+  className?: string,
+  children: JSX.Element,
+  switchConfig: () => void,
+  tip: string
+}): HTMLElement {
   const { className = "", children, switchConfig, tip } = props
   return (
     <div

demo/src/App/AvatarList/index.tsx

@@ -2,6 +2,9 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { nanoid } from 'nanoid'
 
+import type { AvatarFullConfig } from 'react-nice-avatar/types'
+import type { AvatarListItem } from './types'
+
 import ReactNiceAvatar, { genConfig } from 'react-nice-avatar/index'
 
 import "./index.scss"
@@ -11,7 +14,7 @@ export default class AvatarList extends Component {
     selectConfig: PropTypes.func.isRequired
   }
 
-  constructor (props) {
+  constructor (props: { selectConfig: (item: AvatarFullConfig) => void }) {
     super(props)
     this.displayCount = 10
     this.state = {
@@ -26,10 +29,10 @@ export default class AvatarList extends Component {
     this.fetchListWidth()
   }
 
-  genConfigList (count: number) {
+  genConfigList (count: number): AvatarListItem {
     return new Array(count)
       .fill(null)
-      .map((_, idx) => ({
+      .map(() => ({
         ...genConfig({ isGradient: Boolean(Math.round(Math.random())) }),
         id: 'n_' + nanoid()
       }))

demo/src/App/AvatarList/interface.ts

@@ -0,0 +1,5 @@
+import type { AvatarFullConfig } from 'react-nice-avatar/types'
+
+export interface AvatarListItem extends AvatarFullConfig {
+  id: string
+}

demo/src/App/Footer/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-export default function () {
+export default function footer(): HTMLElement {
   return (
     <footer className="flex items-center justify-center text-gray-400 text-sm pb-5">
       <a

demo/src/App/index.tsx

@@ -1,11 +1,8 @@
 import React, { Component } from "react";
-import classnames from "classnames";
 import { hot } from "react-hot-loader";
 import domtoimage from "dom-to-image";
 import { saveAs } from "file-saver";
 
-import { AvatarFullConfig } from '../../../src/types'
-
 import ReactNiceAvatar, { genConfig } from "react-nice-avatar/index";
 
 import AvatarEditor from './AvatarEditor/index'
@@ -14,7 +11,7 @@ import Footer from './Footer/index'
 
 require('./index.scss')
 
-class App extends Component<{}, {}> {
+class App extends Component {
   constructor(props) {
     super(props)
     this.state = {

package.json

@@ -32,8 +32,8 @@
     "@types/jest": "^26.0.24",
     "@types/react": "^17.0.14",
     "@types/react-dom": "^17.0.9",
-    "@typescript-eslint/eslint-plugin": "^4.29.3",
-    "@typescript-eslint/parser": "^4.29.3",
+    "@typescript-eslint/eslint-plugin": "^4.31.2",
+    "@typescript-eslint/parser": "^4.31.2",
     "autoprefixer": "^10.3.1",
     "babel-loader": "^8.2.2",
     "classnames": "^2.3.1",

src/ear/big.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-export default function (props: { color: string }) {
+export default function earBig(props: { color: string }): SVGElement {
   const { color } = props;
   return (
     <svg