Release/5.0.1 beta.1 (#1344)

* Add lerna

* Add theme

* Add forms

* Add misty config to build theme & forms

* reset packages version

* Publish

 - @meetfranz/forms@1.0.0
 - @meetfranz/theme@1.0.0

* Reset package version

* restructure packages

* try ci with lerna

* Fix missing packages in build

* move storybook to root + typescript

TODO: fix modules

* Add lerna instructions

* Merge

* wip

* Make packages work in electron, node and web

* Finalize packages & replace storybook with homegrown `uidev`

* Bring package-lock back in sync

* Publish

 - @meetfranz/forms@1.0.1
 - @meetfranz/theme@1.0.1

* fix webpack issue

* expose legacy styles

* Add toggle element to @meetfranz/forms

* start typings package

* Update package.json

* Add buttons

* Update theme

* add types

* Add mdi icons to buttons

* Publish

 - @meetfranz/forms@1.0.2
 - @meetfranz/theme@1.0.2
 - @meetfranz/typings@0.0.1

* Button, add missing success state

* Update lerna packages

* Try to disable automatic npm ci

* Try to get a working bundle

* Add href and type to button component

* Update packages

* update versions

* cleanup

* Update package versions

[ci skip]

* Update versions

* Add withTheme context to button

* Update & reuse electron-rebuild

* feat(Windows): Add option to quit Franz from Taskbar icon

* Add missing withTheme

* Fix package versions

* Update versions

* Add pageview event

* Simplify analytics calls

* Pin gulp-sass-variables to 1.1.1

* Add onFocus event

* Add modal overlay color

* remove legacy theme files

* remove code

* Add dialog to share franz on social media

* Fix service count

* remove ping

* replace ms time strings with ms module

* remove unused packages

* fix value setter

* new payment flow

* fix module reference

* feat(Spell check): Add en-gb spell check languages (#1306)

* move devmode info

* fix(Windows): Fix losing window when "Keep Franz in background" is enabled

* fix(Service): Fix service zoom (cmd/ctrl+ & cmd/ctrl-)

* fixes appveyor build issue

* feat(App): Update electron to 4.0.7

* ignore intellij idea project files

* Automatic i18n update (i18n.meetfranz.com)

* feat(App): Add security checks for external URLs

* setup react-intl translations managing script

* use same zooming logic for all os

* feat(Linux): Add auto updater for Linux AppImage builds

* Add ctrl+ for zoom in on Windows

* move translation scripts into src/i18n folder

* only manage en-US translations

* manage translations before git pushes

* Fix unused i18n strings

* Bump version to 5.0.1-beta.1

* fix(Service) shortcuts for activating prev/next service fixes #1298

* fix(Service): Fix shortcut for (un)muting notifications & audio

* add missing react-intl files

* correctly update services submenu on language change

* fix(Windows): Fix copy & paste in service context menus

Closes #1316

* fix(Linux): Fix minimized window focusing (#1304) (@skoruppa)

* trigger build

* Check if window is minimized before restoring it

* restore() should be executed only when window is minimized

* fix(Notifications): Fix notifications & notification click when icon is blob

* Fix/service webview unmounting (#1328)

* detach service when underlying webview unmounts

* disable no-param-reassign eslint rule

* Add notification debug events

* Update electron to 4.0.8

Update required in order to fix performance degradation due to memory leak issue https://github.com/electron/electron/pull/16772.

* Automatic i18n update (i18n.meetfranz.com)

* Automatic i18n update (i18n.meetfranz.com)

* 5.0.1-beta.1

1 files changed, 117 insertions, 0 deletions

diff --git a/packages/forms/src/toggle/index.tsx b/packages/forms/src/toggle/index.tsx
new file mode 100644
index 000000000..6487f1d07
--- /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 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 {
+  className?: string;
+}
+
+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: theme.inputDisabledOpacity,
+  },
+  toggleLabel: {
+    display: 'flex',
+
+    '& > span': {
+      order: 1,
+      marginLeft: 15,
+      marginTop: 2,
+    },
+  },
+});
+
+class ToggleComponent extends Component<IProps> {
+  public static defaultProps = {
+    onChange: () => {},
+    showLabel: true,
+    disabled: false,
+    error: '',
+  };
+
+  render() {
+    const {
+      classes,
+      className,
+      disabled,
+      error,
+      id,
+      label,
+      showLabel,
+      checked,
+      value,
+      onChange,
+    } = this.props;
+
+    return (
+      <Wrapper
+        className={className}
+        identifier="franz-toggle"
+      >
+        <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);