Add toggle element to @meetfranz/forms

21 files changed, 281 insertions, 38 deletions

diff --git a/package-lock.json b/package-lock.json
index ef9196134..60cd2aeaf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2852,6 +2852,12 @@
       "integrity": "sha512-Z3TNyBL8Vd/M9D9Ms2S3LmFq2sSMzahodD6rCS9V2N44HUMINb75jNkSuwAx7eo2ufqTdfOdtGQpNbieUjPQmw==",
       "dev": true
     },
+    "@types/node": {
+      "version": "10.12.18",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-10.12.18.tgz",
+      "integrity": "sha512-fh+pAqt4xRzPfqA6eh3Z2y6fyZavRIumvjhaCL753+TVkGKGhpPeyrJG2JftD0T9q4GF00KjefsQ+PQNDdWQaQ==",
+      "dev": true
+    },
     "@types/prop-types": {
       "version": "15.5.8",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.5.8.tgz",
@@ -2898,6 +2904,15 @@
         "@types/react": "*"
       }
     },
+    "@types/uuid": {
+      "version": "3.4.4",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-3.4.4.tgz",
+      "integrity": "sha512-tPIgT0GUmdJQNSHxp0X2jnpQfBSTfGxUMc/2CXBU2mnyTFVYVa2ojpoQ74w0U2yn2vw3jnC640+77lkFFpdVDw==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
     "@webassemblyjs/ast": {
       "version": "1.7.11",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.7.11.tgz",
@@ -14156,6 +14171,12 @@
         }
       }
     },
+    "mobx-react-devtools": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/mobx-react-devtools/-/mobx-react-devtools-6.0.3.tgz",
+      "integrity": "sha512-PY+lG6XeWaC0DFnDaVC7ImrHJQu7XVXNy4z4fmqHzWc3p+fJisKmaZNwgToO2vJGBghz98Mx2yXUBLw1Ba2mPQ==",
+      "dev": true
+    },
     "mobx-react-form": {
       "version": "1.35.1",
       "resolved": "https://registry.npmjs.org/mobx-react-form/-/mobx-react-form-1.35.1.tgz",
diff --git a/package.json b/package.json
index 87c1175a4..f9bf78f1d 100644
--- a/package.json
+++ b/package.json
@@ -104,6 +104,7 @@
     "@types/react": "^16.7.18",
     "@types/react-dom": "16.0.11",
     "@types/react-jss": "^8.6.0",
+    "@types/uuid": "3.4.4",
     "babel-eslint": "10.0.1",
     "babel-loader": "^8.0.4",
     "cross-env": "^5.0.5",
@@ -132,6 +133,7 @@
     "install": "0.12.2",
     "kebab-case": "1.0.0",
     "lerna": "^3.8.0",
+    "mobx-react-devtools": "6.0.3",
     "mocha": "5.2.0",
     "node-sass": "4.11.0",
     "npm": "6.5.0",
diff --git a/packages/forms/src/index.ts b/packages/forms/src/index.ts
index 3f24ecaf7..a506de111 100644
--- a/packages/forms/src/index.ts
+++ b/packages/forms/src/index.ts
@@ -1 +1,2 @@
-export { default as Input } from './input';
+export { Input } from './input';
+export { Toggle } from './toggle';
diff --git a/packages/forms/src/input/index.tsx b/packages/forms/src/input/index.tsx
index 0e19e3368..d82ee5fe3 100644
--- a/packages/forms/src/input/index.tsx
+++ b/packages/forms/src/input/index.tsx
@@ -16,14 +16,12 @@ import scorePasswordFunc from './scorePassword';
 
 import styles from './styles';
 
-interface IProps extends IFormField, React.InputHTMLAttributes<HTMLInputElement>, IWithStyle {
-  label: string;
+interface IProps extends React.InputHTMLAttributes<HTMLInputElement>, IFormField, IWithStyle {
   focus?: boolean;
   prefix?: string;
   suffix?: string;
   scorePassword?: boolean;
   showPasswordToggle?: boolean;
-  error?: string;
 }
 
 interface IState {
@@ -32,15 +30,15 @@ interface IState {
 }
 
 @observer
-class Input extends Component<IProps, IState> {
+class InputComponent extends Component<IProps, IState> {
   public static defaultProps = {
-    classes: {},
     focus: false,
     onChange: () => {},
     scorePassword: false,
     showLabel: true,
     showPasswordToggle: false,
     type: 'text',
+    disabled: false,
   };
 
   state = {
@@ -172,4 +170,4 @@ class Input extends Component<IProps, IState> {
   }
 }
 
-export default injectSheet(styles)(Input);
+export const Input = injectSheet(styles)(InputComponent);
diff --git a/packages/forms/src/input/styles.ts b/packages/forms/src/input/styles.ts
index 2cdda12ee..2b34e92c3 100644
--- a/packages/forms/src/input/styles.ts
+++ b/packages/forms/src/input/styles.ts
@@ -1,5 +1,5 @@
+import { Theme } from '@meetfranz/theme';
 import CSS from 'csstype';
-import { Theme } from '../../../theme/lib';
 
 const prefixStyles = (theme: Theme) => ({
   background: theme.inputPrefixBackground,
diff --git a/packages/forms/src/toggle/index.tsx b/packages/forms/src/toggle/index.tsx
new file mode 100644
index 000000000..759694dc8
--- /dev/null
+++ b/packages/forms/src/toggle/index.tsx
@@ -0,0 +1,117 @@
+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';
+
+import { IFormField, IWithStyle, Omit } from '../typings/generic';
+
+import Error from '../error';
+import Label from '../label';
+import Wrapper from '../wrapper';
+
+interface IProps extends React.InputHTMLAttributes<HTMLInputElement>, IFormField, IWithStyle {
+  // field: any;
+}
+
+const styles = (theme: Theme) => ({
+  toggle: {
+    background: theme.toggleBackground,
+    borderRadius: theme.borderRadius,
+    height: theme.toggleHeight,
+    position: 'relative' as CSS.PositionProperty,
+    width: theme.toggleWidth,
+  },
+  button: {
+    background: theme.toggleButton,
+    borderRadius: '100%',
+    boxShadow: '0 1px 4px rgba(0, 0, 0, .3)',
+    width: theme.toggleHeight - 2,
+    height: theme.toggleHeight - 2,
+    left: 1,
+    top: 1,
+    position: 'absolute' as CSS.PositionProperty,
+    transition: 'all .5s',
+  },
+  buttonActive: {
+    background: theme.toggleButtonActive,
+    left: (theme.toggleWidth - theme.toggleHeight) + 1,
+  },
+  input: {
+    visibility: 'hidden' as any,
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+  toggleLabel: {
+    display: 'flex',
+
+    '& > span': {
+      order: 1,
+      marginLeft: 15,
+      marginTop: 2,
+    },
+  },
+});
+
+@observer
+class ToggleComponent extends Component<IProps> {
+  public static defaultProps = {
+    onChange: () => {},
+    showLabel: true,
+    disabled: false,
+    error: '',
+  };
+
+  render() {
+    const {
+      classes,
+      disabled,
+      error,
+      id,
+      label,
+      showLabel,
+      checked,
+      value,
+      onChange,
+    } = this.props;
+
+    console.log('props', this.props);
+
+    return (
+      <Wrapper>
+        <Label
+          title={label}
+          showLabel={showLabel}
+          htmlFor={id}
+          className={classes.toggleLabel}
+        >
+          <div className={classnames({
+            [`${classes.toggle}`]: true,
+            [`${classes.disabled}`]: disabled,
+          })}>
+            <div className={classnames({
+              [`${classes.button}`]: true,
+              [`${classes.buttonActive}`]: checked,
+            })} />
+            <input
+              className={classes.input}
+              id={id || name}
+              type="checkbox"
+              checked={checked}
+              value={value}
+              onChange={onChange}
+              disabled={disabled}
+            />
+          </div>
+        </Label>
+        {error && (
+          <Error message={error} />
+        )}
+      </Wrapper>
+    );
+  }
+}
+
+export const Toggle = injectStyle(styles)(ToggleComponent);
diff --git a/packages/forms/src/typings/generic.ts b/packages/forms/src/typings/generic.ts
index e1e497050..bd3ea364b 100644
--- a/packages/forms/src/typings/generic.ts
+++ b/packages/forms/src/typings/generic.ts
@@ -1,11 +1,14 @@
 import { Classes } from 'jss';
 
 export interface IFormField {
-  title?: string;
   showLabel?: boolean;
-  isError?: boolean;
+  label?: string;
+  error?: string;
 }
 
 export interface IWithStyle {
   classes: Classes;
 }
+
+export type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;
+export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
diff --git a/packages/forms/src/wrapper/index.tsx b/packages/forms/src/wrapper/index.tsx
index c2444b0ea..b3e92da66 100644
--- a/packages/forms/src/wrapper/index.tsx
+++ b/packages/forms/src/wrapper/index.tsx
@@ -1,3 +1,4 @@
+import { observer } from 'mobx-react';
 import React, { Component } from 'react';
 import injectStyle from 'react-jss';
 import { IWithStyle } from '../typings/generic';
@@ -8,6 +9,7 @@ interface IProps extends IWithStyle {
   children: React.ReactNode;
 }
 
+@observer
 class Wrapper extends Component<IProps> {
   render() {
     const {
diff --git a/packages/theme/src/themes/dark/index.ts b/packages/theme/src/themes/dark/index.ts
index 7eac5a3c3..0cc4caa16 100644
--- a/packages/theme/src/themes/dark/index.ts
+++ b/packages/theme/src/themes/dark/index.ts
@@ -24,3 +24,7 @@ export const inputDisabledOpacity = 0.5;
 export const inputScorePasswordBackground = legacyStyles.darkThemeGrayDark;
 export const inputModifierColor = color(legacyStyles.darkThemeGrayLighter).lighten(0.3).hex();
 export const inputPlaceholderColor = color(legacyStyles.darkThemeGrayLighter).darken(0.1).hex();
+
+// Toggle
+export const toggleBackground = legacyStyles.darkThemeGray;
+export const toggleButton = legacyStyles.darkThemeGrayLighter;
diff --git a/packages/theme/src/themes/default/index.ts b/packages/theme/src/themes/default/index.ts
index b22730413..ea218cd8f 100644
--- a/packages/theme/src/themes/default/index.ts
+++ b/packages/theme/src/themes/default/index.ts
@@ -42,3 +42,10 @@ export const inputPrefixColor = legacyStyles.themeGrayLight;
 export const inputPrefixBackground = legacyStyles.themeGrayLighter;
 export const inputDisabledOpacity = 0.5;
 export const inputScorePasswordBackground = legacyStyles.themeGrayLighter;
+
+// Toggle
+export const toggleBackground = legacyStyles.themeGrayLighter;
+export const toggleButton = legacyStyles.themeGrayLight;
+export const toggleButtonActive = brandPrimary;
+export const toggleWidth = 40;
+export const toggleHeight = 14;
diff --git a/src/styles/toggle.scss b/src/styles/toggle.scss
index 0ce0c3379..52675ceed 100644
--- a/src/styles/toggle.scss
+++ b/src/styles/toggle.scss
@@ -41,7 +41,7 @@ $toggle-button-size: 22px;
 
     &.is-active .franz-form__toggle-button {
       background: $theme-brand-primary;
-      left: $toggle-width - $toggle-size - 3;;
+      left: $toggle-width - $toggle-size - 3;
     }
 
     input { display: none; }
diff --git a/tsconfig.settings.json b/tsconfig.settings.json
index 84081fab7..ccd0927ab 100644
--- a/tsconfig.settings.json
+++ b/tsconfig.settings.json
@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "baseUrl": ".",
     "target": "esnext",
     "module": "commonjs",
     "lib": [
@@ -13,6 +14,11 @@
     "allowSyntheticDefaultImports": true,
     "experimentalDecorators": true,
     "composite": true,
-    "esModuleInterop": true
+    "esModuleInterop": true,
+    "typeRoots": ["packages/typings/types", "node_modules/@types"],
+    "paths": {
+      "@types/*": ["packages/typings/types/*.d.ts"],
+      "*": ["packages/typings/types/*.d.ts"]
+    }
   }
 }
diff --git a/tsconfig.storybook.json b/tsconfig.storybook.json
deleted file mode 100644
index 46e0e6cfa..000000000
--- a/tsconfig.storybook.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "extends": "./tsconfig.settings.json",
-  "compilerOptions": {
-    "outDir": ".tstmp",
-    "rootDir": "./"
-  },
-}
diff --git a/typings/react-html-attributes.d.ts b/typings/react-html-attributes.d.ts
deleted file mode 100644
index 6f8f20fe4..000000000
--- a/typings/react-html-attributes.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-declare module 'react-html-attributes';
diff --git a/typings/storybook__addons.d.ts b/typings/storybook__addons.d.ts
deleted file mode 100644
index 14ccd3cf0..000000000
--- a/typings/storybook__addons.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-declare module '@storybook/addons';
diff --git a/uidev/src/app.tsx b/uidev/src/app.tsx
index a1c9ee343..6a5c578f2 100644
--- a/uidev/src/app.tsx
+++ b/uidev/src/app.tsx
@@ -1,20 +1,34 @@
+import CSS from 'csstype';
 import { Classes } from 'jss';
+import { observer } from 'mobx-react';
+import DevTools from 'mobx-react-devtools';
 import React, { Component } from 'react';
-import { render } from 'react-dom';
 import injectSheet from 'react-jss';
-import './stories/input';
+
 import { WithTheme } from './withTheme';
 
+import './stories/input.stories';
+import './stories/toggle.stories';
+
 import { store } from './stores';
 
 const styles = {
+  '@global body': {
+    margin: 0,
+  },
   container: {
     display: 'flex',
     width: '100%',
   },
   menu: {
     width: 300,
-    position: 'fixed' as any,
+    position: 'fixed' as CSS.PositionProperty,
+    listStyleType: 'none',
+  },
+  storyList: {
+    paddingLeft: 18,
+    marginTop: 5,
+    marginBottom: 20,
   },
   stories: {
     width: '100%',
@@ -22,6 +36,7 @@ const styles = {
     paddingLeft: 40,
     paddingRight: 40,
     borderLeft: '1px solid #CFCFCF',
+    background: '#f7f7f7',
   },
   sectionHeadline: {
     fontSize: 30,
@@ -34,24 +49,29 @@ const styles = {
     marginBottom: 40,
     borderBottom: '1px solid #CFCFCF',
   },
+  sectionLink: {
+    fontWeight: 'bold' as CSS.FontWeightProperty,
+    color: '#000',
+    textDecoration: 'none',
+  },
+  storyLink: {
+    color: '#000',
+    textDecoration: 'none',
+  },
 };
 
-const foo = {
-  seas: 'bar',
-};
-
-export const App = injectSheet(styles)(({ classes }: { classes: Classes }) => (
+export const App = injectSheet(styles)(observer(({ classes }: { classes: Classes }) => (
   <div className={classes.container}>
     <ul className={classes.menu}>
       {store.stories.sections.map((section, key) => (
         <li key={key}>
-          <a href={`#section-${key}`}>{
+          <a href={`#section-${key}`} className={classes.sectionLink}>{
             section.name}
           </a>
-          <ul>
+          <ul className={classes.storyList}>
             {section.stories.map((story, storyKey) => (
               <li key={storyKey}>
-                <a href={`#section-${key}-story-${storyKey}`}>
+                <a href={`#section-${key}-story-${storyKey}`} className={classes.storyLink}>
                   {story.name}
                 </a>
               </li>
@@ -78,12 +98,13 @@ export const App = injectSheet(styles)(({ classes }: { classes: Classes }) => (
                 {story.name}
               </h2>
               <WithTheme>
-                {story.component()}
+                <story.component />
               </WithTheme>
             </div>
           ))}
         </div>
       ))}
     </div>
+    <DevTools />
   </div>
-));
+)));
diff --git a/uidev/src/stores/stories.ts b/uidev/src/stores/stories.ts
index 064bf275f..6a98c9fd3 100644
--- a/uidev/src/stores/stories.ts
+++ b/uidev/src/stores/stories.ts
@@ -2,7 +2,7 @@ import { store } from './index';
 
 export type StorySectionName = string;
 export type StoryName = string;
-export type StoryComponent = Function;
+export type StoryComponent = () => JSX.Element;
 
 export interface IStories {
   name: string;
diff --git a/uidev/src/stories/input.tsx b/uidev/src/stories/input.stories.tsx
index dc8f6e997..9862ee479 100644
--- a/uidev/src/stories/input.tsx
+++ b/uidev/src/stories/input.stories.tsx
@@ -3,8 +3,6 @@ import React from 'react';
 import { Input } from '@meetfranz/forms';
 import { storiesOf } from '../stores/stories';
 
-export const stories = () => (<div>input stories</div>);
-
 const defaultProps = {
   label: 'Label',
   id: 'test1',
diff --git a/uidev/src/stories/toggle.stories.tsx b/uidev/src/stories/toggle.stories.tsx
new file mode 100644
index 000000000..091342496
--- /dev/null
+++ b/uidev/src/stories/toggle.stories.tsx
@@ -0,0 +1,70 @@
+import { observable } from 'mobx';
+import { observer } from 'mobx-react';
+import React from 'react';
+import uuid from 'uuid/v4';
+
+import { Toggle } from '@meetfranz/forms';
+import { storiesOf } from '../stores/stories';
+
+interface IStoreArgs {
+  value?: boolean;
+  checked?: boolean;
+  label?: string;
+  id?: string;
+  name?: string;
+  disabled?: boolean;
+  error?: string;
+}
+
+const createStore = (args?: IStoreArgs) => {
+  return observable(Object.assign({
+    id: `element-${uuid()}`,
+    name: 'toggle',
+    label: 'Label',
+    value: true,
+    checked: false,
+    disabled: false,
+    error: '',
+  },                              args));
+};
+
+const WithStoreToggle = observer(({ store }: { store: any }) => (
+  <>
+    <Toggle
+      value={store.value}
+      checked={store.checked}
+      label={store.label}
+      id={store.id}
+      name={store.name}
+      disabled={store.disabled}
+      error={store.error}
+      onChange={() => store.checked = !store.checked}
+    />
+  </>
+));
+
+storiesOf('Toggle')
+  .add('Basic', () => (
+    <WithStoreToggle store={createStore()} />
+  ))
+  .add('Checked', () => (
+    <WithStoreToggle store={createStore({
+      checked: true,
+    })} />
+  ))
+  .add('Disabled', () => (
+    <WithStoreToggle store={createStore({
+      checked: true,
+      disabled: true,
+    })} />
+  ))
+  .add('Long label', () => (
+    <WithStoreToggle store={createStore({
+      label: 'Hello world, this is an insanely long label for this toggle. We need to make sure that it will be displayed correctly.',
+    })} />
+  ))
+  .add('With error', () => (
+    <WithStoreToggle store={createStore({
+      error: 'Something went wrong',
+    })} />
+  ));
diff --git a/uidev/src/withTheme/index.tsx b/uidev/src/withTheme/index.tsx
index 17a1074d3..d7d4be3de 100644
--- a/uidev/src/withTheme/index.tsx
+++ b/uidev/src/withTheme/index.tsx
@@ -24,6 +24,7 @@ const styles = (theme: Theme) => ({
     borderRadius: theme.borderRadiusSmall,
     marginBottom: 20,
     padding: 20,
+    paddingBottom: 5,
     background: theme.colorContentBackground,
   },
 });
diff --git a/uidev/tsconfig.json b/uidev/tsconfig.json
index 23a59e665..fb57639c8 100644
--- a/uidev/tsconfig.json
+++ b/uidev/tsconfig.json
@@ -1,8 +1,9 @@
 {
   "extends": "../tsconfig.settings.json",
   "compilerOptions": {
+    "baseUrl": "..",
     "outDir": "lib",
-    "rootDir": "src"
+    "rootDir": "src",
   },
   "references": [{
     "path": "../packages/theme"