cleanup

18 files changed, 99 insertions, 132 deletions

diff --git a/packages/forms/package-lock.json b/packages/forms/package-lock.json
index 834db8d33..b5b24c239 100644
--- a/packages/forms/package-lock.json
+++ b/packages/forms/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@meetfranz/forms",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/packages/forms/package.json b/packages/forms/package.json
index af5c46a54..a9151e245 100644
--- a/packages/forms/package.json
+++ b/packages/forms/package.json
@@ -1,11 +1,11 @@
 {
   "name": "@meetfranz/forms",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "React form components for Franz",
   "main": "lib/index.js",
   "scripts": {
-    "dev": "NODE_ENV=development ../../node_modules/.bin/webpack -w",
-    "prepare": "../../node_modules/.bin/webpack"
+    "dev": "tsc -w",
+    "prepare": "tsc"
   },
   "publishConfig": {
     "access": "public"
@@ -31,9 +31,6 @@
   },
   "peerDependencies": {
     "classnames": "^2.2.6",
-    "lodash": "^4.17.11",
-    "mobx": "^5.8.0",
-    "mobx-react": "^5.4.3",
     "react": "^16.7.0",
     "react-dom": "16.7.0",
     "react-jss": "^8.6.1"
diff --git a/packages/forms/src/button/index.tsx b/packages/forms/src/button/index.tsx
index b7cca7fa4..90eda21e7 100644
--- a/packages/forms/src/button/index.tsx
+++ b/packages/forms/src/button/index.tsx
@@ -3,7 +3,6 @@ import Icon from '@mdi/react';
 import { Theme } from '@meetfranz/theme';
 import classnames from 'classnames';
 import CSS from 'csstype';
-import { observer } from 'mobx-react';
 import React, { Component } from 'react';
 import injectStyle from 'react-jss';
 import Loader from 'react-loader';
@@ -37,7 +36,7 @@ const styles = (theme: Theme) => ({
     border: 'none',
     display: 'inline-flex',
     position: 'relative' as CSS.PositionProperty,
-    transition: 'background .5s',
+    transition: 'background .5s, opacity 0.3s',
     textAlign: 'center' as CSS.TextAlignProperty,
     outline: 'none',
     alignItems: 'center',
@@ -45,6 +44,14 @@ const styles = (theme: Theme) => ({
     width: (props: IProps) => (props.stretch ? '100%' : 'auto') as CSS.WidthProperty<string>,
     fontSize: theme.uiFontSize,
     textDecoration: 'none',
+
+    '&:hover': {
+      opacity: 0.8,
+    },
+    '&:active': {
+      opacity: 0.5,
+      transition: 'none',
+    },
   },
   label: {
     margin: '10px 20px',
@@ -126,7 +133,6 @@ const styles = (theme: Theme) => ({
   },
 });
 
-@observer
 class ButtonComponent extends Component<IProps> {
   public static defaultProps = {
     type: 'button',
@@ -237,6 +243,7 @@ class ButtonComponent extends Component<IProps> {
             [`${className}`]: className,
           })}
           disabled={disabled}
+          data-type="franz-button"
         >
           {content}
         </button>
@@ -253,6 +260,7 @@ class ButtonComponent extends Component<IProps> {
             [`${className}`]: className,
           })}
           rel={target === '_blank' ? 'noopener' : ''}
+          data-type="franz-button"
         >
           {content}
         </a>
diff --git a/packages/forms/src/error/index.tsx b/packages/forms/src/error/index.tsx
index 9d26e086d..a487bb281 100644
--- a/packages/forms/src/error/index.tsx
+++ b/packages/forms/src/error/index.tsx
@@ -1,6 +1,4 @@
-import classnames from 'classnames';
 import { Classes } from 'jss';
-import { observer } from 'mobx-react';
 import React, { Component } from 'react';
 import injectSheet from 'react-jss';
 
@@ -11,7 +9,6 @@ interface IProps {
   message: string;
 }
 
-@observer
 class ErrorComponent extends Component<IProps> {
   render() {
     const {
diff --git a/packages/forms/src/input/index.tsx b/packages/forms/src/input/index.tsx
index cd6da3778..de7e7848e 100644
--- a/packages/forms/src/input/index.tsx
+++ b/packages/forms/src/input/index.tsx
@@ -1,7 +1,6 @@
 import { mdiEye, mdiEyeOff } from '@mdi/js';
 import Icon from '@mdi/react';
 import classnames from 'classnames';
-import { observer } from 'mobx-react';
 import React, { Component, createRef } from 'react';
 import injectSheet from 'react-jss';
 
@@ -33,7 +32,6 @@ interface IState {
   passwordScore: number;
 }
 
-@observer
 class InputComponent extends Component<IProps, IState> {
   public static defaultProps = {
     focus: false,
@@ -114,6 +112,7 @@ class InputComponent extends Component<IProps, IState> {
     return (
       <Wrapper
         className={className}
+        identifier="franz-input"
       >
         <Label
           title={label}
diff --git a/packages/forms/src/label/index.tsx b/packages/forms/src/label/index.tsx
index ee3268b16..36fcfbedf 100644
--- a/packages/forms/src/label/index.tsx
+++ b/packages/forms/src/label/index.tsx
@@ -1,6 +1,5 @@
 import classnames from 'classnames';
 import { Classes } from 'jss';
-import { observer } from 'mobx-react';
 import React, { Component } from 'react';
 import injectSheet from 'react-jss';
 
@@ -12,7 +11,6 @@ interface ILabel extends IFormField, React.LabelHTMLAttributes<HTMLLabelElement>
   classes: Classes;
 }
 
-@observer
 class LabelComponent extends Component<ILabel> {
   static defaultProps = {
     showLabel: true,
diff --git a/packages/forms/src/select/index.tsx b/packages/forms/src/select/index.tsx
index 58bb7317a..4a9e3c56e 100644
--- a/packages/forms/src/select/index.tsx
+++ b/packages/forms/src/select/index.tsx
@@ -2,8 +2,6 @@ import { mdiArrowRightDropCircleOutline, mdiCloseCircle, mdiMagnify } from '@mdi
 import Icon from '@mdi/react';
 import { Theme } from '@meetfranz/theme';
 import classnames from 'classnames';
-import debounce from 'lodash/debounce';
-import { observer } from 'mobx-react';
 import React, { Component, createRef } from 'react';
 import injectStyle from 'react-jss';
 
@@ -86,7 +84,8 @@ const styles = (theme: Theme) => ({
     },
   },
   selected: {
-    fontWeight: 'bold',
+    background: theme.selectOptionItemActive,
+    color: theme.selectOptionItemActiveColor,
   },
   toggle: {
     marginLeft: 'auto',
@@ -133,7 +132,6 @@ const styles = (theme: Theme) => ({
   },
 });
 
-@observer
 class SelectComponent extends Component<IProps> {
   public static defaultProps = {
     onChange: () => {},
@@ -166,7 +164,7 @@ class SelectComponent extends Component<IProps> {
     }
   }
 
-  componentDidUpdate() {
+  componentDidUpdate(prevProps: IProps, prevState: IState) {
     const {
       open,
     } = this.state;
@@ -179,41 +177,6 @@ class SelectComponent extends Component<IProps> {
   }
 
   componentDidMount() {
-    if (this.componentRef && this.componentRef.current) {
-      this.keyListener = this.componentRef.current.addEventListener('keydown', debounce((e) => {
-        const {
-          selected,
-          open,
-          options,
-        } = this.state;
-
-        if (!open) return;
-
-        if (e.keyCode === 38 && selected > 0) {
-          this.setState((state: IState) => ({
-            selected: state.selected - 1,
-          }));
-        } else if (e.keyCode === 40 && selected < Object.keys(options!).length - 1) {
-          this.setState((state: IState) => ({
-            selected: state.selected + 1,
-          }));
-        } else if (e.keyCode === 13) {
-          this.select(Object.keys(options!)[selected]);
-        }
-
-        if (this.activeOptionRef && this.activeOptionRef.current && this.scrollContainerRef && this.scrollContainerRef.current) {
-          const containerTopOffset = this.scrollContainerRef.current.offsetTop;
-          const optionTopOffset = this.activeOptionRef.current.offsetTop;
-
-          const topOffset = optionTopOffset - containerTopOffset;
-
-          this.scrollContainerRef.current.scrollTop = topOffset - 35;
-        }
-      },                                                                                10, {
-        leading: true,
-      }));
-    }
-
     if (this.inputRef && this.inputRef.current) {
       const {
         data,
@@ -223,10 +186,14 @@ class SelectComponent extends Component<IProps> {
         Object.keys(data).map(key => this.inputRef.current!.dataset[key] = data[key]);
       }
     }
+
+    window.addEventListener('keydown', this.arrowKeysHandler.bind(this), false);
   }
 
   componentWillMount() {
-    const { value } = this.props;
+    const {
+      value,
+    } = this.props;
 
     if (this.componentRef && this.componentRef.current) {
       this.componentRef.current.removeEventListener('keydown', this.keyListener);
@@ -241,6 +208,10 @@ class SelectComponent extends Component<IProps> {
     this.setFilter();
   }
 
+  componentWillUnmount() {
+    window.removeEventListener('keydown', this.arrowKeysHandler.bind(this));
+  }
+
   setFilter(needle: string = '') {
     const { options } = this.props;
 
@@ -277,6 +248,49 @@ class SelectComponent extends Component<IProps> {
     }
   }
 
+  arrowKeysHandler(e: KeyboardEvent) {
+    const {
+      selected,
+      open,
+      options,
+    } = this.state;
+
+    if (!open) return;
+
+    if (e.keyCode === 38 || e.keyCode === 40) {
+      e.preventDefault();
+    }
+
+    if (this.componentRef && this.componentRef.current) {
+      if (e.keyCode === 38 && selected > 0) {
+        this.setState((state: IState) => ({
+          selected: state.selected - 1,
+        }));
+      } else if (e.keyCode === 40 && selected < Object.keys(options!).length - 1) {
+        this.setState((state: IState) => ({
+          selected: state.selected + 1,
+        }));
+      } else if (e.keyCode === 13) {
+        this.select(Object.keys(options!)[selected]);
+      }
+
+      if (this.activeOptionRef && this.activeOptionRef.current && this.scrollContainerRef && this.scrollContainerRef.current) {
+        const containerTopOffset = this.scrollContainerRef.current.offsetTop;
+        const optionTopOffset = this.activeOptionRef.current.offsetTop;
+
+        const topOffset = optionTopOffset - containerTopOffset;
+
+        this.scrollContainerRef.current.scrollTop = topOffset - 35;
+      }
+    }
+
+    switch (e.keyCode){
+      case 37: case 39: case 38:  case 40: // Arrow keys
+      case 32:  break; // Space
+      default: break; // do not block other keys
+    }
+  }
+
   render() {
     const {
       actionText,
@@ -314,6 +328,7 @@ class SelectComponent extends Component<IProps> {
     return (
       <Wrapper
         className={className}
+        identifier="franz-select"
       >
         <Label
           title={label}
@@ -366,7 +381,7 @@ class SelectComponent extends Component<IProps> {
                   <button
                     type="button"
                     className={classes.clearNeedle}
-                    onClick={() => this.setState({ needle: '', selected: -1 })}
+                    onClick={() => this.setFilter()}
                   >
                     <Icon
                       path={mdiCloseCircle}
diff --git a/packages/forms/src/toggle/index.tsx b/packages/forms/src/toggle/index.tsx
index 4f446ab1a..6487f1d07 100644
--- a/packages/forms/src/toggle/index.tsx
+++ b/packages/forms/src/toggle/index.tsx
@@ -1,7 +1,6 @@
 import { Theme } from '@meetfranz/theme';
 import classnames from 'classnames';
 import CSS from 'csstype';
-import { observer } from 'mobx-react';
 import React, { Component, createRef } from 'react';
 import injectStyle from 'react-jss';
 
@@ -55,7 +54,6 @@ const styles = (theme: Theme) => ({
   },
 });
 
-@observer
 class ToggleComponent extends Component<IProps> {
   public static defaultProps = {
     onChange: () => {},
@@ -81,6 +79,7 @@ class ToggleComponent extends Component<IProps> {
     return (
       <Wrapper
         className={className}
+        identifier="franz-toggle"
       >
         <Label
           title={label}
diff --git a/packages/forms/src/wrapper/index.tsx b/packages/forms/src/wrapper/index.tsx
index 87e2c6513..d9c61381d 100644
--- a/packages/forms/src/wrapper/index.tsx
+++ b/packages/forms/src/wrapper/index.tsx
@@ -1,5 +1,4 @@
 import classnames from 'classnames';
-import { observer } from 'mobx-react';
 import React, { Component } from 'react';
 import injectStyle from 'react-jss';
 import { IWithStyle } from '../typings/generic';
@@ -9,22 +8,26 @@ import styles from './styles';
 interface IProps extends IWithStyle {
   children: React.ReactNode;
   className?: string;
+  identifier: string;
 }
 
-@observer
 class WrapperComponent extends Component<IProps> {
   render() {
     const {
       children,
       classes,
       className,
+      identifier,
     } = this.props;
 
     return (
-      <div className={classnames({
-        [`${classes.container}`]: true,
-        [`${className}`]: className,
-      })}>
+      <div
+        className={classnames({
+          [`${classes.container}`]: true,
+          [`${className}`]: className,
+        })}
+        data-type={identifier}
+      >
         {children}
       </div>
     );
diff --git a/packages/forms/webpack.config.js b/packages/forms/webpack.config.js
deleted file mode 100644
index cc3370359..000000000
--- a/packages/forms/webpack.config.js
+++ /dev/null
@@ -1,19 +0,0 @@
-const path = require('path');
-const baseConfig = require('../../webpack.config.base')(__dirname);
-
-module.exports = Object.assign({}, baseConfig, {
-  output: {
-    filename: 'index.js',
-    path: path.join(__dirname, 'lib'),
-    libraryTarget: 'commonjs2',
-  },
-  externals: {
-    react: 'react',
-    reactDom: 'react-dom',
-    classnames: 'classnames',
-    lodash: 'lodash',
-    mobx: 'mobx',
-    mobxReact: 'mobx-react',
-    reactJss: 'react-jss',
-  },
-});
diff --git a/packages/theme/package.json b/packages/theme/package.json
index c31271aab..83d58b56d 100644
--- a/packages/theme/package.json
+++ b/packages/theme/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@meetfranz/theme",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Theme configuration for Franz",
   "author": "Stefan Malzner <stefan@adlk.io>",
   "homepage": "https://github.com/meetfranz/franz",
@@ -14,8 +14,8 @@
     "url": "git+https://github.com/meetfranz/franz.git"
   },
   "scripts": {
-    "dev": "NODE_ENV=development ../../node_modules/.bin/webpack -w",
-    "prepare": "../../node_modules/.bin/webpack",
+    "dev": "tsc -w",
+    "prepare": "tsc",
     "preprepare": "npm run test",
     "test": "npx mocha"
   },
diff --git a/packages/theme/webpack.config.js b/packages/theme/webpack.config.js
deleted file mode 100644
index 8ad7ee3b6..000000000
--- a/packages/theme/webpack.config.js
+++ /dev/null
@@ -1,10 +0,0 @@
-const path = require('path');
-const baseConfig = require('../../webpack.config.base')(__dirname);
-
-module.exports = Object.assign({}, baseConfig, {
-  output: {
-    filename: 'index.js',
-    path: path.join(__dirname, 'lib'),
-    libraryTarget: 'commonjs2',
-  },
-});
diff --git a/packages/ui/package.json b/packages/ui/package.json
index cd7252850..387f8de50 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,11 +1,11 @@
 {
   "name": "@meetfranz/ui",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "description": "React UI components for Franz",
   "main": "lib/index.js",
   "scripts": {
-    "dev": "NODE_ENV=development ../../node_modules/.bin/webpack -w",
-    "prepare": "../../node_modules/.bin/webpack"
+    "dev": "tsc -w",
+    "prepare": "tsc"
   },
   "publishConfig": {
     "access": "public"
@@ -30,9 +30,6 @@
   },
   "peerDependencies": {
     "classnames": "^2.2.6",
-    "lodash": "^4.17.11",
-    "mobx": "^5.8.0",
-    "mobx-react": "^5.4.3",
     "react": "^16.7.0",
     "react-dom": "16.7.0",
     "react-jss": "^8.6.1"
diff --git a/packages/ui/src/badge/index.tsx b/packages/ui/src/badge/index.tsx
index 241e778e7..fc52ecc73 100644
--- a/packages/ui/src/badge/index.tsx
+++ b/packages/ui/src/badge/index.tsx
@@ -65,6 +65,7 @@ class BadgeComponent extends Component<IProps> {
           [classes[type]]: true,
           [`${className}`]: className,
         })}
+        data-type="franz-badge"
       >
         {children}
       </div>
diff --git a/packages/ui/src/headline/index.tsx b/packages/ui/src/headline/index.tsx
index 3458a40ad..7eabfcf80 100644
--- a/packages/ui/src/headline/index.tsx
+++ b/packages/ui/src/headline/index.tsx
@@ -3,7 +3,6 @@ import classnames from 'classnames';
 import React, { Component } from 'react';
 import injectStyle from 'react-jss';
 
-import { uiFontSize } from '@meetfranz/theme/lib/themes/default';
 import { IWithStyle, Omit } from '../typings/generic';
 
 interface IProps extends IWithStyle {
@@ -55,6 +54,7 @@ class HeadlineComponent extends Component<IProps> {
           [classes[level ? `h${level}` : 'h1']]: true,
           [`${className}`]: className,
         }),
+        'data-type': 'franz-headline',
       },
       children,
     );
diff --git a/packages/ui/src/infobox/index.tsx b/packages/ui/src/infobox/index.tsx
index bf985ea9c..53ed16341 100644
--- a/packages/ui/src/infobox/index.tsx
+++ b/packages/ui/src/infobox/index.tsx
@@ -1,9 +1,7 @@
 import { Theme } from '@meetfranz/theme';
 import classnames from 'classnames';
-import { observer } from 'mobx-react';
 import React, { Component } from 'react';
 import injectStyle from 'react-jss';
-// import Loader from 'react-loader';
 
 import { Icon } from '../';
 import { IWithStyle } from '../typings/generic';
@@ -95,7 +93,6 @@ const styles = (theme: Theme) => ({
   ...buttonStyles(theme),
 });
 
-@observer
 class InfoboxComponent extends Component<IProps, IState> {
   public static defaultProps = {
     type: 'primary',
@@ -160,6 +157,7 @@ class InfoboxComponent extends Component<IProps, IState> {
             [classes[`${type}`]]: type,
             [classes.dismissing]: isDismissing,
           })}
+          data-type="franz-infobox"
         >
           {icon && (
             <Icon icon={icon} className={classes.icon} />
diff --git a/packages/ui/src/loader/index.tsx b/packages/ui/src/loader/index.tsx
index 799caf195..de5ba5237 100644
--- a/packages/ui/src/loader/index.tsx
+++ b/packages/ui/src/loader/index.tsx
@@ -26,10 +26,13 @@ class LoaderComponent extends Component<IProps> {
     } = this.props;
 
     return (
-      <div className={classnames({
-        [classes.container]: true,
-        [`${className}`]: className,
-      })}>
+      <div
+        className={classnames({
+          [classes.container]: true,
+          [`${className}`]: className,
+        })}
+        data-type="franz-loader"
+      >
         <ReactLoader
           loaded={false}
           width={4}
diff --git a/packages/ui/webpack.config.js b/packages/ui/webpack.config.js
deleted file mode 100644
index cc3370359..000000000
--- a/packages/ui/webpack.config.js
+++ /dev/null
@@ -1,19 +0,0 @@
-const path = require('path');
-const baseConfig = require('../../webpack.config.base')(__dirname);
-
-module.exports = Object.assign({}, baseConfig, {
-  output: {
-    filename: 'index.js',
-    path: path.join(__dirname, 'lib'),
-    libraryTarget: 'commonjs2',
-  },
-  externals: {
-    react: 'react',
-    reactDom: 'react-dom',
-    classnames: 'classnames',
-    lodash: 'lodash',
-    mobx: 'mobx',
-    mobxReact: 'mobx-react',
-    reactJss: 'react-jss',
-  },
-});