Improvements

.eslintignore

@@ -1,3 +1,4 @@
 node_modules
 dist
 build
+playground

.eslintrc

@@ -1,29 +1,22 @@
 {
-  "extends": ["airbnb-base", "prettier"],
+  "extends": ["airbnb", "prettier", "prettier/react"],
   "parser": "babel-eslint",
   "parserOptions": {
     "ecmaVersion": 2018,
     "sourceType": "module"
   },
   "env": {
-    "browser": true,
-    "node": true,
-    "es6": true,
-    "jest": true
+    "browser": true
   },
   "plugins": ["react"],
   "rules": {
-    "no-unused-vars": [
-      "error",
+    "curly": "error",
+    "no-plusplus": "off",
+    "react/jsx-filename-extension": [
+      1,
       {
-        "vars": "local",
-        "args": "none"
+        "extensions": [".js", ".jsx"]
       }
-    ],
-    "no-plusplus": "off",
-    "no-underscore-dangle": "off",
-    "react/jsx-uses-react": "error",
-    "react/jsx-uses-vars": "error",
-    "import/no-unresolved": "off"
+    ]
   }
 }

.prettierignore

@@ -1,3 +1,4 @@
 node_modules
 dist
 build
+playground

.prettierrc

@@ -4,7 +4,5 @@
   "useTabs": false,
   "semi": true,
   "singleQuote": true,
-  "trailingComma": "all",
-  "bracketSpacing": false,
-  "jsxBracketSameLine": false
+  "trailingComma": "all"
 }

README.md

@@ -34,7 +34,7 @@ import '@afconsult/apollo/dist/css/apollo.css';
 2. Import required apollo components:
 
 ```jsx
-import {Button, Form, FormGroup, Input, Label} from '@afconsult/apollo';
+import { Button, Form, FormGroup, Input, Label } from '@afconsult/apollo';
 ```
 
 3. Use the components:

package.json

@@ -2,7 +2,7 @@
   "name": "@afconsult/apollo",
   "version": "1.3.4",
   "description": "Design system for ÅF Web Apps",
-  "main": "index.js",
+  "main": "dist/js/apollo.js",
   "repository": "https://github.com/afconsult/apollo",
   "author": "afconsult",
   "license": "MIT",
@@ -15,31 +15,29 @@
     "component library"
   ],
   "files": [
-    "dist/",
-    "index.js",
     "LICENSE",
-    "README.md"
+    "README.md",
+    "dist",
+    "src"
   ],
   "scripts": {
     "start": "webpack-dev-server --open --config ./webpack/test.config.js",
-    "build:dev": "webpack --config ./webpack/dev.config.js",
-    "build:prod": "webpack --config ./webpack/prod.config.js",
-    "build": "npm-run-all build:prod build:dev",
+    "build": "webpack --config ./webpack/prod.config.js",
     "lint": "prettier --write \"**/*.{html,js,jsx,json,md,yaml}\" && eslint --fix \"**/*.{js,jsx}\"",
     "lint:ci": "prettier --check \"**/*.{html,js,jsx,json,md,yaml}\" && eslint \"**/*.{js,jsx}\"",
     "test": "jest",
     "test:ci": "yarn run test --runInBand",
-    "check:ci": "npm-run-all lint:ci test:ci",
-    "check": "npm-run-all lint test",
+    "check": "yarn lint && yarn test",
+    "check:ci": "yarn lint:ci && yarn test:ci",
     "commit": "git-cz",
     "precommit": "lint-staged",
     "publish": "cross-var yarn publish --new-version $npm_package_version",
     "release": "release-it --config ./.release-it.json -n"
   },
   "dependencies": {
-    "classnames": "^2.2.5",
+    "classnames": "2.2.6",
     "normalize.css": "^8.0.0",
-    "react-lottie": "^1.2.3"
+    "react-lottie": "1.2.3"
   },
   "peerDependencies": {
     "react": ">=16.8",
@@ -65,24 +63,22 @@
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
     "enzyme-to-json": "^3.3.0",
-    "eslint": "^5.15.3",
-    "eslint-config-airbnb": "^17.1.0",
-    "eslint-config-airbnb-base": "^13.1.0",
-    "eslint-config-prettier": "^4.1.0",
-    "eslint-plugin-import": "^2.16.0",
-    "eslint-plugin-jest": "^22.4.1",
-    "eslint-plugin-jsx-a11y": "^6.2.1",
-    "eslint-plugin-prettier": "^3.0.1",
-    "eslint-plugin-react": "^7.12.4",
+    "eslint": "5.15.3",
+    "eslint-config-airbnb": "17.1.0",
+    "eslint-config-prettier": "4.1.0",
+    "eslint-plugin-import": "2.16.0",
+    "eslint-plugin-jest": "22.4.1",
+    "eslint-plugin-jsx-a11y": "6.2.1",
+    "eslint-plugin-prettier": "3.0.1",
+    "eslint-plugin-react": "7.12.4",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.0.6",
-    "husky": "^1.3.1",
+    "husky": "1.3.1",
     "jest": "^23.6.0",
     "jest-css-modules-transform": "^1.0.3",
     "jest-enzyme": "^4.0.2",
-    "lint-staged": "^8.1.5",
-    "npm-run-all": "^4.1.5",
+    "lint-staged": "8.1.5",
     "optimize-css-assets-webpack-plugin": "^3.2.0",
     "path": "^0.12.7",
     "postcss": "^6.0.16",

playground/Playground.jsx

@@ -18,18 +18,18 @@ import {
   TagExample,
 } from './examples';
 
-import {Alert, Container} from '../src';
+import { Alert, Container } from '../src';
 
 class Playground extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {open: true};
+    this.state = { open: true };
     this.handleToggle = this.handleToggle.bind(this);
   }
 
   handleToggle(e) {
     console.log('before', this.state);
-    this.setState({open: false}, () => {
+    this.setState({ open: false }, () => {
       console.log('after', this.state);
     });
   }

playground/examples/AvatarExample.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import {Avatar, Container} from '../../src';
+import { Avatar, Container } from '../../src';
 
 const AvatarExample = () => (
-  <Container style={{marginBottom: '50px', marginTop: '50px'}}>
+  <Container style={{ marginBottom: '50px', marginTop: '50px' }}>
     <h1>Avatar</h1>
     <div>
       <h4>X-Small</h4>

playground/examples/BadgeExample.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import {Badge, Container} from '../../src';
+import { Badge, Container } from '../../src';
 
 const BadgeExample = () => (
-  <Container style={{marginBottom: '50px', marginTop: '50px'}}>
+  <Container style={{ marginBottom: '50px', marginTop: '50px' }}>
     <h1>Badge</h1>
     <div>
       <Badge color="primary">PROJECT</Badge>

playground/examples/BreadcrumbsExample.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import {Breadcrumb, Breadcrumbs, Container} from '../../src';
+import { Breadcrumb, Breadcrumbs, Container } from '../../src';
 
 const BreadcrumbsExample = () => (
-  <Container style={{marginBottom: '50px', marginTop: '50px'}}>
+  <Container style={{ marginBottom: '50px', marginTop: '50px' }}>
     <h1>Breadcrumbs</h1>
     <Breadcrumbs>
       <Breadcrumb>Home</Breadcrumb>

playground/examples/ButtonExample.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import {Button, ButtonGroup, Container} from '../../src';
+import { Button, ButtonGroup, Container } from '../../src';
 
 const ButtonExample = () => (
-  <Container style={{marginBottom: '50px', marginTop: '50px'}}>
+  <Container style={{ marginBottom: '50px', marginTop: '50px' }}>
     <h1>Button</h1>
     <ButtonGroup>
       <Button color="primary">primary</Button>

playground/examples/CardExample.jsx

@@ -11,9 +11,9 @@ import {
 } from '../../src';
 
 const CardExample = () => (
-  <Container style={{marginBottom: '50px', marginTop: '50px'}}>
+  <Container style={{ marginBottom: '50px', marginTop: '50px' }}>
     <h1>Cards</h1>
-    <CardGroup style={{height: '394px', width: '75%'}}>
+    <CardGroup style={{ height: '394px', width: '75%' }}>
       <Card dark>
         <CardImage src="http://via.placeholder.com/256x180" />
         <CardBody>
@@ -53,7 +53,7 @@ const CardExample = () => (
       </Card>
     </CardGroup>
     <br />
-    <CardGroup segmented style={{height: '394', width: '75%'}}>
+    <CardGroup segmented style={{ height: '394', width: '75%' }}>
       <Card>
         <CardImage src="http://via.placeholder.com/256x180" />
         <CardBody>

playground/examples/DropdownExample.jsx

@@ -13,17 +13,17 @@ class DropdownExample extends React.Component {
   constructor(props) {
     super(props);
     this.handleToggle = this.handleToggle.bind(this);
-    this.state = {open: false};
+    this.state = { open: false };
   }
 
   handleToggle() {
     const isOpen = !this.state.open;
-    this.setState({open: isOpen});
+    this.setState({ open: isOpen });
   }
 
   render() {
     return (
-      <Container style={{marginBottom: '50px', marginTop: '50px'}}>
+      <Container style={{ marginBottom: '50px', marginTop: '50px' }}>
         <h1>Dropdown</h1>
         <Dropdown onToggle={this.handleToggle} open={this.state.open}>
           <DropdownToggle>Dropdown</DropdownToggle>

playground/examples/FollowExample.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import {Container, Follow, UncontrolledFollow} from '../../src';
+import { Container, Follow, UncontrolledFollow } from '../../src';
 
 class FollowExample extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {active: false};
+    this.state = { active: false };
     this.handleToggle = this.handleToggle.bind(this);
   }
 
@@ -15,10 +15,10 @@ class FollowExample extends React.Component {
   }
 
   render() {
-    const {active} = this.state;
+    const { active } = this.state;
 
     return (
-      <Container style={{marginBottom: '50px', marginTop: '50px'}}>
+      <Container style={{ marginBottom: '50px', marginTop: '50px' }}>
         <h1>Follow</h1>
         <div>
           <Follow

playground/examples/FormExample.jsx

@@ -15,7 +15,7 @@ import {
 } from '../../src';
 
 const FormExample = () => (
-  <Container style={{marginBottom: '50px', marginTop: '50px'}}>
+  <Container style={{ marginBottom: '50px', marginTop: '50px' }}>
     <h1>Form</h1>
     <Form inline>
       <h3>Input</h3>

playground/examples/IconExample.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Container, Icon} from '../../src';
+import { Container, Icon } from '../../src';
 
 const IconExample = () => (
   <Container>

playground/examples/JumbotronExample.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import {Container, Badge, Jumbotron} from '../../src';
+import { Container, Badge, Jumbotron } from '../../src';
 
 const JumbotronExample = () => (
-  <Container style={{marginBottom: '50px', marginTop: '50px'}}>
+  <Container style={{ marginBottom: '50px', marginTop: '50px' }}>
     <h1>Jumbotron</h1>
     <Jumbotron>
       <Badge>PROJECT</Badge>

playground/examples/MentionExample.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import {Container, Mention} from '../../src';
+import { Container, Mention } from '../../src';
 
 const MentionExample = () => (
-  <Container style={{marginBottom: '50px', marginTop: '50px'}}>
+  <Container style={{ marginBottom: '50px', marginTop: '50px' }}>
     <h1>Mention</h1>
     <div>
       <Mention>Stockholm, Sweden</Mention>

playground/examples/ModalExample.jsx

@@ -11,17 +11,17 @@ import {
 class ModalExample extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {open: false};
+    this.state = { open: false };
     this.handleToggle = this.handleToggle.bind(this);
   }
 
   handleToggle() {
-    this.setState({open: !this.state.open});
+    this.setState({ open: !this.state.open });
   }
 
   render() {
     return (
-      <Container style={{marginBottom: '50px', marginTop: '50px'}}>
+      <Container style={{ marginBottom: '50px', marginTop: '50px' }}>
         <h1>Modal</h1>
         <Button onClick={this.handleToggle}>Open Modal</Button>
 

playground/examples/NavbarExample.jsx

@@ -19,17 +19,17 @@ import {
 class NavbarExample extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {open: false};
+    this.state = { open: false };
     this.handleToggle = this.handleToggle.bind(this);
   }
 
   handleToggle(e) {
-    this.setState({open: !this.state.open});
+    this.setState({ open: !this.state.open });
   }
 
   render() {
     return (
-      <div style={{margin: '25px 0'}}>
+      <div style={{ margin: '25px 0' }}>
         <h1>Navbar</h1>
         <h3>Dark</h3>
         <Navbar dark expand="medium">

playground/examples/NavsExample.jsx

@@ -13,12 +13,12 @@ import {
 class NavbarExample extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {collapsed: false};
+    this.state = { collapsed: false };
   }
 
   render() {
     return (
-      <Container style={{marginBottom: '50px', marginTop: '50px'}}>
+      <Container style={{ marginBottom: '50px', marginTop: '50px' }}>
         <h1>Navs</h1>
         <h3>Horizontal</h3>
         <h4>Left-aligned</h4>
@@ -117,7 +117,9 @@ class NavbarExample extends React.Component {
             <NavLink
               active={!this.state.collapsed}
               onClick={() => {
-                this.setState(prevState => ({collapsed: !prevState.collapsed}));
+                this.setState(prevState => ({
+                  collapsed: !prevState.collapsed,
+                }));
               }}
             >
               Toggle