Setup

.eslintrc.json

@@ -1,30 +1,14 @@
 {
-  "extends": [
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "plugin:@typescript-eslint/recommended",
-    "prettier/@typescript-eslint",
-    "plugin:prettier/recommended"
-  ],
-  "plugins": ["react", "@typescript-eslint", "prettier"],
-  "env": {
-    "browser": true,
-    "jasmine": true,
-    "jest": true
-  },
-  "rules": {
-    "linebreak-style": 0,
-		"no-unused-vars": [ "warn", { "vars": "all", "args": "all", "ignoreRestSiblings": false } ],
-		"react/jsx-filename-extension": [ 0, { "extensions": [ ".js", ".jsx" ] } ],
-		"no-console": 1,
-		"prettier/prettier": 0,
-		"no-func-assign": 0
-  },
-  "settings": {
-    "react": {
-      "pragma": "React",
-      "version": "detect"
-    }
-  },
-  "parser": "@typescript-eslint/parser"
-}
+	"parser": "@typescript-eslint/parser",
+	"parserOptions": {
+		"jsx": true,
+		"useJSXTextNode": true
+	},
+	"extends": [ "plugin:@typescript-eslint/recommended", "prettier", "prettier/@typescript-eslint" ],
+	"plugins": [ "@typescript-eslint" ],
+	"rules": {
+		"@typescript-eslint/explicit-function-return-type": "off",
+		"react-hooks/rules-of-hooks": "error",
+		"react-hooks/exhaustive-deps": "warn"
+	}
+}

.gitignore

@@ -43,6 +43,7 @@ typings/
 
 # Optional npm cache directory
 .npm
+.vs
 
 # Optional eslint cache
 .eslintcache

package.json

@@ -5,69 +5,53 @@
 	"author": "kakuevn <n.kakuev@gmail.com>",
 	"license": "MIT",
 	"scripts": {
-		"dev": "rollup -c --watch",
-    "build": "rollup -c",
-    "lint:fix": "eslint './src/**/*.{ts,tsx}'",
+		"dev": "webpack --colors --progress --watch",
+		"build": "webpack --colors --progress -p",
+		"eslint": "eslint './src/**/*.{ts,tsx}'",
+		"eslint:fix": "eslint src --fix",
 		"start": "npm-run-all --parallel dev test:watch",
 		"test": "jest",
-		"test:watch": "jest --watch",
-		"storybook": "start-storybook -p 6006",
-		"build-storybook": "build-storybook"
+		"test:watch": "jest --watch"
 	},
 	"jest": {
 		"testURL": "http://localhost/",
 		"moduleDirectories": [
 			"node_modules",
-			"bower_components",
 			"shared"
 		],
 		"transformIgnorePatterns": [
 			"/node_modules/(?!(our-react-components-.*?\\.js$))"
 		],
 		"moduleNameMapper": {
 			"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js"
+		},
+		"transform": {
+			"^.+\\.(js|jsx)$": "babel-jest"
 		}
 	},
 	"dependencies": {
-		"react": "^16.5.0",
-		"react-dom": "^16.5.0",
-		"styled-components": "^3.4.9"
+		"@types/react": "^16.8.14",
+		"@types/react-dom": "^16.8.4",
+		"react": "^16.8.6",
+		"react-dom": "^16.8.6",
+		"webpack": "^4.30.0"
 	},
 	"devDependencies": {
-		"@babel/cli": "^7.0.0",
-		"@babel/core": "^7.0.0",
-		"@babel/plugin-transform-modules-commonjs": "^7.1.0",
-		"@babel/preset-env": "^7.0.0",
-		"@babel/preset-react": "^7.0.0",
-		"@storybook/addon-actions": "^3.4.11",
-		"@storybook/addon-links": "^3.4.11",
-		"@storybook/addons": "^3.4.11",
-		"@storybook/react": "^3.4.11",
-		"@types/react": "^16.8.13",
-		"@types/react-dom": "^16.8.4",
-		"@typescript-eslint/eslint-plugin": "^1.6.0",
-		"@typescript-eslint/parser": "^1.6.0",
-		"babel-cli": "^6.26.0",
-		"babel-core": "^6.26.3",
-		"babel-eslint": "^10.0.1",
-		"babel-runtime": "^6.26.0",
-		"enzyme": "^3.3.0",
-		"eslint": "^4.17.0",
-		"eslint-config-prettier": "^4.1.0",
-		"eslint-config-react": "^1.1.7",
-		"eslint-friendly-formatter": "^4.0.1",
-		"eslint-plugin-jsx-a11y": "^6.0.3",
-		"eslint-plugin-prettier": "^2.6.0",
-		"eslint-plugin-react": "^7.7.0",
-		"jest": "^23.6.0",
-		"npm-run-all": "^4.1.2",
-		"prettier": "^1.10.2",
-		"rollup-plugin-eslint": "^5.0.0",
-		"rollup-plugin-node-resolve": "^3.4.0",
-		"rollup-plugin-replace": "^2.1.0",
-		"rollup-plugin-typescript2": "^0.20.1",
-		"rollup-watch": "^4.3.1",
-		"sinon": "^4.2.2",
-		"typescript": "^3.4.3"
+		"@typescript-eslint/eslint-plugin": "^1.7.0",
+		"@typescript-eslint/parser": "^1.7.0",
+		"awesome-typescript-loader": "^5.2.1",
+		"babel-jest": "^24.7.1",
+		"eslint": "^5.16.0",
+		"eslint-config-prettier": "^4.2.0",
+		"eslint-formatter-friendly": "^6.0.0",
+		"eslint-loader": "^2.1.2",
+		"eslint-plugin-react-hooks": "^1.6.0",
+		"file-loader": "^3.0.1",
+		"npm-run-all": "^4.1.5",
+		"prettier": "^1.17.0",
+		"source-map-loader": "^0.2.4",
+		"typescript": "^3.4.5",
+		"uglifyjs-webpack-plugin": "^2.1.2",
+		"webpack-cli": "^3.3.1"
 	}
 }

tsconfig.json

@@ -1,20 +1,13 @@
 {
-  "compileOnSave": true,
-  "allowSyntheticDefaultImports": true,
   "compilerOptions": {
-    "target": "esnext",
-    "moduleResolution": "node",
-    "outDir": "dist",
-    "declaration": true,
-    "jsx": "react",
-    "module": "es2015",
-    "strict": true
+    "outDir": "./dist/",
+    "sourceMap": true,
+    "noImplicitAny": true,
+    "module": "commonjs",
+    "target": "es6",
+    "jsx": "react"
   },
   "include": [
-    "src/**/*"
-  ],
-  "exclude": [
-    "node_modules",
-    "**/*.spec.ts"
+    "./src/**/*"
   ]
 }

webpack.config.js

@@ -0,0 +1,80 @@
+const path = require('path');
+const webpack = require('webpack');
+const lintFormatter = require('eslint-formatter-friendly');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+
+module.exports = {
+	entry: './src/index.tsx',
+	output: {
+		filename: 'index.js',
+		path: path.resolve(__dirname, 'dist'),
+		publicPath: '/dist',
+		library: '',
+		libraryTarget: 'commonjs2'
+	},
+
+	devtool: 'source-map',
+
+	stats: 'errors-only',
+
+	node: {
+		fs: 'empty'
+	},
+
+	resolve: {
+		modules: [ path.resolve(__dirname, './src'), 'node_modules' ],
+		extensions: [ '.ts', '.tsx', '.js', '.json' ]
+	},
+
+	module: {
+		rules: [
+			{
+				enforce: 'pre',
+				test: /\.tsx?$/,
+				loader: 'eslint-loader',
+				exclude: /node_modules/,
+				options: {
+					configFile: './.eslintrc.json',
+					formatter: lintFormatter,
+					failOnWarning: false,
+					failOnError: false
+				}
+			},
+			{
+				test: /\.(eot|svg|ttf|woff|woff2)$/,
+				loader: 'file-loader?name=app/fonts/[name].[ext]'
+			},
+			{
+				test: /\.(png|jpg|gif)$/,
+				use: [
+					{
+						loader: 'file-loader',
+						options: {}
+					}
+				]
+			},
+			{ test: /\.tsx?$/, loader: 'awesome-typescript-loader' },
+			{ enforce: 'pre', test: /\.js$/, loader: 'source-map-loader' }
+		]
+	},
+	plugins: [ new webpack.HotModuleReplacementPlugin(), new webpack.NamedModulesPlugin(), new UglifyJsPlugin() ],
+
+	externals: {
+		react: {
+			commonjs: 'react',
+			commonjs2: 'react',
+			amd: 'React',
+			root: 'React'
+		},
+		'react-dom': {
+			commonjs: 'react-dom',
+			commonjs2: 'react-dom',
+			amd: 'ReactDOM',
+			root: 'ReactDOM'
+		},
+		'styled-components': {
+			commonjs: 'styled-components',
+			commonjs2: 'styled-components'
+		}
+	}
+};