🔧 🎨 Add ESLint, cleanup code, configure webpack

.eslintrc

@@ -0,0 +1,43 @@
+{
+  "parser": "typescript-eslint-parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true,
+      "spread": true,
+      "experimentalDecorators": true
+    }
+  },
+  "extends": "airbnb",
+  "rules": {
+    "react/jsx-filename-extension": "off",
+    "no-undef": "off",
+    "no-multi-str": "off",
+    "import/extensions": "off",
+    "import/no-unresolved": "off",
+    "import/no-extraneous-dependencies": "off",
+    "react/sort-comp": "off",
+    "no-return-assign": "off",
+    "no-mixed-operators": "off",
+    "import/prefer-default-export": "off",
+    "no-unused-expressions": "off",
+    "prefer-destructuring": "off",
+    "no-plusplus": "off",
+    "react/no-unsecaped-entites": "off",
+    "react/self-closing-comp": "off",
+    "react/void-dom-elements-no-children": "off",
+    "react/jsx-indent": "off",
+    "react/jsx-indent-props": "off",
+    "react/jsx-max-props-per-line": "off",
+    "no-restricted-syntax": "off",
+    "no-param-reassign": "off",
+    "no-underscore-dangle": "off",
+    "linebreak-style": "off",
+    "no-restricted-globals": "off",
+    "react/no-did-mount-set-state": "off",
+    "no-loop-func": "off",
+    "no-unused-vars": "off",
+    "guard-for-in": "off",
+    "no-await-in-loop": "off",
+    "arrow-parens": "off"
+  }
+}

.gitignore

@@ -3,6 +3,6 @@ node_modules
 *.log*
 build
 dist
-package-lock.json
 .vscode
 .vs
+.DS_Store

.npmignore

@@ -1,3 +1,9 @@
 .babelrc
 src
-yarn.lock
+yarn.lock
+.travis.yml
+README.md
+LICENSE
+tsconfig.json
+.gitignore
+.npmignore

package.json

@@ -1,45 +1,40 @@
 {
   "name": "nersent-ui",
-  "version": "3.4.0",
+  "version": "3.5.0",
   "description": "Material design framework for React",
   "repository": "Nersent/nersent-ui",
   "main": "build/index",
-  "types": "build/index.d.ts",
+  "types": "build/build/index.d.ts",
   "scripts": {
     "watch": "webpack-cli --mode development --watch",
-    "build-production":
-      "cross-env NODE_ENV=production webpack-cli --mode production",
-    "lint": "npm run prettier && npm run tslint-fix",
-    "prettier": "prettier --write src/**/*.ts*",
-    "tslint-fix": "tslint --config tslint.json src/**/*.ts* --fix",
-    "tslint": "tslint --config tslint.json src/**/*.ts*",
-    "test": "npm run build-production && npm run tslint"
+    "build-production": "cross-env NODE_ENV=production webpack-cli --mode production",
+    "lint": "eslint --ext .tsx --ext .ts --ext .js src/",
+    "lint-fix": "prettier-eslint --write \"src/**/*.ts*\"",
+    "test": "npm run build-production && npm run lint"
   },
   "publishConfig": {
     "access": "public"
   },
   "author": "Nersent",
   "license": "MIT",
   "devDependencies": {
-    "@types/react": "16.3.3",
-    "@types/node": "9.6.2",
-    "@types/react-dom": "16.0.4",
+    "@types/node": "9.6.5",
+    "@types/react": "16.3.10",
     "cross-env": "5.1.4",
-    "dts-bundle": "0.7.3",
-    "dts-bundle-webpack": "1.0.0",
-    "prettier": "1.11.1",
-    "rimraf": "2.6.2",
-    "ts-loader": "4.0.1",
-    "tslint": "5.9.1",
-    "tslint-config-prettier": "1.10.0",
-    "tslint-react": "3.5.1",
-    "typescript": "2.7.2",
+    "prettier": "1.12.0",
+    "prettier-eslint": "8.8.1",
+    "prettier-eslint-cli": "4.7.1",
+    "eslint": "4.19.1",
+    "eslint-config-airbnb": "16.1.0",
+    "eslint-plugin-import": "2.11.0",
+    "eslint-plugin-jsx-a11y": "6.0.3",
+    "eslint-plugin-react": "7.7.0",
+    "ts-loader": "4.2.0",
+    "typescript": "2.8.1",
     "uglifyjs-webpack-plugin": "1.2.4",
     "url-loader": "1.0.1",
+    "typescript-eslint-parser": "14.0.0",
     "webpack": "4.5.0",
-    "webpack-cli": "2.0.14",
-    "react": "16.3.0",
-    "react-dom": "16.3.1",
-    "styled-components": "3.2.4"
+    "webpack-cli": "2.0.14"
   }
 }

src/components/Button/index.tsx

@@ -1,25 +1,24 @@
-import * as React from "react";
-import { SyntheticEvent } from "react";
+import * as React from 'react';
 
 // Utils
-import { getForegroundColor } from "../../utils/colors";
-import { getEvents } from "../../utils/events";
-import { getRippleEvents } from "../../utils/ripple";
+import { getForegroundColor } from '../../utils/colors';
+import { getEvents } from '../../utils/events';
+import { getRippleEvents } from '../../utils/ripple';
 
 // Defaults
-import colors from "../../defaults/colors";
+import colors from '../../defaults/colors';
 
 // Enums
-import Theme from "../../enums/theme";
+import Theme from '../../enums/theme';
 
 // Components
-import Clear from "../Clear";
-import Ripples from "../Ripples";
+import Clear from '../Clear';
+import Ripples from '../Ripples';
 
 // Styles
-import { OverShade, StyledButton, Text } from "./styles";
+import { OverShade, StyledButton, Text } from './styles';
 
-export type ButtonEvent = (e?: SyntheticEvent<HTMLDivElement>) => void;
+export type ButtonEvent = (e?: React.SyntheticEvent<HTMLDivElement>) => void;
 
 export interface IProps {
   className?: string;
@@ -49,30 +48,30 @@ export default class Button extends React.Component<IProps, IState> {
   public static defaultProps = {
     raised: false,
     disabled: false,
-    color: colors.blue["500"],
+    color: colors.blue['500'],
     theme: Theme.Light,
     dialog: false,
     customRippleBehavior: false,
     ripple: true,
-    inline: false
+    inline: false,
   };
 
   public state: IState = {
-    foreground: "black"
+    foreground: 'black',
   };
 
   private ripples: Ripples;
 
   public componentDidMount() {
     this.setState({
-      foreground: getForegroundColor(this.props.color)
+      foreground: getForegroundColor(this.props.color),
     });
   }
 
   public componentWillReceiveProps(nextProps) {
     if (this.props.color !== nextProps.color) {
       this.setState({
-        foreground: getForegroundColor(nextProps.color)
+        foreground: getForegroundColor(nextProps.color),
       });
     }
   }
@@ -87,21 +86,21 @@ export default class Button extends React.Component<IProps, IState> {
       children,
       dialog,
       inline,
-      color
+      color,
     } = this.props;
 
     const { foreground } = this.state;
 
     const rippleColor = raised ? foreground : color;
-    const overShadeColor = (raised || theme === Theme.Light) ? "#000" : "#fff";
+    const overShadeColor = raised || theme === Theme.Light ? '#000' : '#fff';
 
     const events = {
       ...getEvents(this.props),
-      ...getRippleEvents(this.props, () => this.ripples)
+      ...getRippleEvents(this.props, () => this.ripples),
     };
 
     return (
-      <>
+      <React.Fragment>
         <StyledButton
           className={className}
           style={style}
@@ -121,14 +120,11 @@ export default class Button extends React.Component<IProps, IState> {
           >
             {children}
           </Text>
-          <OverShade
-            className="over-shade"
-            color={overShadeColor}
-          />
+          <OverShade className="over-shade" color={overShadeColor} />
           <Ripples ref={r => (this.ripples = r)} color={rippleColor} />
         </StyledButton>
         {!inline && <Clear />}
-      </>
+      </React.Fragment>
     );
   }
 }

src/components/Button/styles.ts

@@ -1,48 +1,60 @@
-import * as React from "react";
-import styled, { StyledComponentClass } from "styled-components";
+import * as React from 'react';
 
 // Utils
-import { getComponentBackground, getComponentForeground } from "../../utils/component-color";
+import { getComponentBackground, getComponentForeground } from '../../utils/component-color';
 
 // Defaults
-import buttons from "../../defaults/buttons";
-import transparency from "../../defaults/transparency";
+import buttons from '../../defaults/buttons';
+import transparency from '../../defaults/transparency';
 
 // Enumms
-import Align from "../../enums/align";
-import Theme from "../../enums/theme";
+import Align from '../../enums/align';
+import Theme from '../../enums/theme';
 
 // Mixins
-import positioning from "../../mixins/positioning";
-import shadows from "../../mixins/shadows";
-import typography from "../../mixins/typography";
-import userSelection from "../../mixins/user-selection";
+import positioning from '../../mixins/positioning';
+import shadows from '../../mixins/shadows';
+import typography from '../../mixins/typography';
+import userSelection from '../../mixins/user-selection';
+
+const styled = require('styled-components').default;
 
 const getBackground = (color: string, disabled: boolean, theme: Theme, raised: boolean) => {
-  if (!raised) { return "transparent"; }
-
+  if (!raised) {
+    return 'transparent';
+  }
+
   return getComponentBackground(color, null, disabled, theme, {
     disabled: {
       light: transparency.light.button.disabled,
-      dark: transparency.dark.button.disabled
+      dark: transparency.dark.button.disabled,
     },
-    toggledOff: null
+    toggledOff: null,
   });
 };
 
-const getForeground = (color: string, disabled: boolean, theme: Theme, raised: boolean, foreground: string) => { 
-  if (raised && !disabled) { return foreground; }
-  else if (!raised && !disabled) { return color; }
+const getForeground = (
+  color: string,
+  disabled: boolean,
+  theme: Theme,
+  raised: boolean,
+  foreground: string,
+) => {
+  if (raised && !disabled) {
+    return foreground;
+  } else if (!raised && !disabled) {
+    return color;
+  }
 
   return getComponentForeground(disabled, theme, {
     disabled: {
       light: transparency.light.text.disabled,
-      dark: transparency.dark.text.disabled
+      dark: transparency.dark.text.disabled,
     },
     enabled: {
       light: 1,
-      dark: 1
-    }
+      dark: 1,
+    },
   });
 };
 
@@ -65,32 +77,24 @@ export const StyledButton = styled.div`
   overflow: hidden;
   transition: 0.3s box-shadow, 0.2s background-color;
 
-  min-width: ${(props: IStyledButtonProps) =>
-    props.dialog ? 0 : buttons.minWidth}px;
-  cursor: ${props =>
-    props.disabled ? "default" : "pointer"};
+  min-width: ${(props: IStyledButtonProps) => (props.dialog ? 0 : buttons.minWidth)}px;
+  cursor: ${props => (props.disabled ? 'default' : 'pointer')};
   background-color: ${props =>
     getBackground(props.color, props.disabled, props.theme, props.raised)};
-  box-shadow: ${props =>
-    props.raised && !props.disabled ? shadows[buttons.elevation] : "none"};
-  pointer-events: ${props =>
-    props.disabled ? "none" : "auto"};
+  box-shadow: ${props => (props.raised && !props.disabled ? shadows[buttons.elevation] : 'none')};
+  pointer-events: ${props => (props.disabled ? 'none' : 'auto')};
   border-radius: ${buttons.cornerRadius}px;
   height: ${buttons.height}px;
-  ${userSelection.noUserSelect()} ${userSelection.noTapHighlight()}
-
-  &:hover {
-    box-shadow: ${props =>
-      props.raised ? shadows[buttons.hoveredElevation] : "none"};
+  ${userSelection.noUserSelect()} ${userSelection.noTapHighlight()} {
+    box-shadow: ${props => (props.raised ? shadows[buttons.hoveredElevation] : 'none')};
 
     & .over-shade {
       opacity: 0.12;
     }
   }
 
   &:active {
-    box-shadow: ${props =>
-      props.raised ? shadows[buttons.pressedElevation] : "none"};
+    box-shadow: ${props => (props.raised ? shadows[buttons.pressedElevation] : 'none')};
   }
 `;