Synchronize with Franz 5.6.0 (#1033)

Co-authored-by: FranzBot <i18n@meetfranz.com>
Co-authored-by: vantezzen <hello@vantezzen.io>
Co-authored-by: Makazzz <makazzzpro@live.ca>
Co-authored-by: Stefan Malzner <stefan@adlk.io>
Co-authored-by: Amine Mouafik <amine@mouafik.fr>

6 files changed, 236 insertions, 54 deletions

diff --git a/packages/forms/package.json b/packages/forms/package.json
index 18b6d2244..f61b787ac 100644
--- a/packages/forms/package.json
+++ b/packages/forms/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@meetfranz/forms",
-  "version": "1.1.0",
-  "description": "React form components for Ferdi",
+  "version": "1.2.1",
+  "description": "React form components for Franz",
   "main": "lib/index.js",
   "scripts": {
     "dev": "tsc -w",
@@ -35,5 +35,5 @@
     "react-dom": "16.7.0",
     "react-jss": "^8.6.1"
   },
-  "gitHead": "e1e46986d902adc4c19ee009016290f9733a7d61"
+  "gitHead": "00db2bddccb8bb8ad7d29b8d032876c798b8bbf3"
 }
diff --git a/packages/forms/src/index.ts b/packages/forms/src/index.ts
index ea47fe25e..45a9ed8e3 100644
--- a/packages/forms/src/index.ts
+++ b/packages/forms/src/index.ts
@@ -1,4 +1,5 @@
 export { Input } from './input';
+export { Textarea } from './textarea';
 export { Toggle } from './toggle';
 export { Button } from './button';
 export { Select } from './select';
diff --git a/packages/forms/src/textarea/index.tsx b/packages/forms/src/textarea/index.tsx
new file mode 100644
index 000000000..cd691a507
--- /dev/null
+++ b/packages/forms/src/textarea/index.tsx
@@ -0,0 +1,128 @@
+import { mdiEye, mdiEyeOff } from '@mdi/js';
+import Icon from '@mdi/react';
+import classnames from 'classnames';
+import React, { Component, createRef } from 'react';
+import injectSheet from 'react-jss';
+
+import { IFormField, IWithStyle } from '../typings/generic';
+
+import { Error } from '../error';
+import { Label } from '../label';
+import { Wrapper } from '../wrapper';
+
+import styles from './styles';
+
+interface IData {
+  [index: string]: string;
+}
+
+interface IProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement>, IFormField, IWithStyle {
+  focus?: boolean;
+  data: IData;
+  textareaClassName?: string;
+}
+
+class TextareaComponent extends Component<IProps> {
+  static defaultProps = {
+    focus: false,
+    onChange: () => {},
+    onBlur: () => {},
+    onFocus: () => {},
+    showLabel: true,
+    disabled: false,
+    rows: 5,
+  };
+
+  private textareaRef = createRef<HTMLTextAreaElement>();
+
+  componentDidMount() {
+    const { data } = this.props;
+
+    if (this.textareaRef && this.textareaRef.current && data) {
+      Object.keys(data).map(key => this.textareaRef.current!.dataset[key] = data[key]);
+    }
+  }
+
+  onChange(e: React.ChangeEvent<HTMLTextAreaElement>) {
+    const {
+      onChange,
+    } = this.props;
+
+    if (onChange) {
+      onChange(e);
+    }
+  }
+
+  render() {
+    const {
+      classes,
+      className,
+      disabled,
+      error,
+      focus,
+      id,
+      textareaClassName,
+      label,
+      showLabel,
+      value,
+      name,
+      placeholder,
+      spellCheck,
+      onBlur,
+      onFocus,
+      minLength,
+      maxLength,
+      required,
+      rows,
+      noMargin,
+    } = this.props;
+
+    return (
+      <Wrapper
+        className={className}
+        identifier="franz-textarea"
+        noMargin={noMargin}
+      >
+        <Label
+          title={label}
+          showLabel={showLabel}
+          htmlFor={id}
+          className={classes.label}
+          isRequired={required}
+        >
+          <div
+            className={classnames({
+              [`${textareaClassName}`]: textareaClassName,
+              [`${classes.wrapper}`]: true,
+              [`${classes.disabled}`]: disabled,
+              [`${classes.hasError}`]: error,
+            })}>
+            <textarea
+              autoFocus={focus}
+              id={id}
+              name={name}
+              placeholder={placeholder}
+              spellCheck={spellCheck}
+              className={classes.textarea}
+              ref={this.textareaRef}
+              onChange={this.onChange.bind(this)}
+              onFocus={onFocus}
+              onBlur={onBlur}
+              disabled={disabled}
+              minLength={minLength}
+              maxLength={maxLength}
+              rows={rows}
+            >
+              {value}
+            </textarea>
+          </div>
+        </Label>
+        {error && (
+          <Error message={error} />
+        )}
+      </Wrapper>
+    );
+  }
+}
+
+export const Textarea = injectSheet(styles)(TextareaComponent);
diff --git a/packages/forms/src/textarea/styles.ts b/packages/forms/src/textarea/styles.ts
new file mode 100644
index 000000000..c1cbd76a5
--- /dev/null
+++ b/packages/forms/src/textarea/styles.ts
@@ -0,0 +1,53 @@
+import { Theme } from '@meetfranz/theme';
+import CSS from 'csstype';
+
+export default (theme: Theme) => ({
+  label: {
+    '& > div': {
+      marginTop: 5,
+    },
+  },
+  disabled: {
+    opacity: theme.inputDisabledOpacity,
+  },
+  formModifier: {
+    background: 'none',
+    border: 0,
+    borderLeft: theme.inputBorder,
+    padding: '4px 20px 0',
+    outline: 'none',
+
+    '&:active': {
+      opacity: 0.5,
+    },
+
+    '& svg': {
+      fill: theme.inputModifierColor,
+    },
+  },
+  textarea: {
+    background: 'none',
+    border: 0,
+    fontSize: theme.uiFontSize,
+    outline: 'none',
+    padding: 8,
+    width: '100%',
+    color: theme.inputColor,
+
+    '&::placeholder': {
+      color: theme.inputPlaceholderColor,
+    },
+  },
+  wrapper: {
+    background: theme.inputBackground,
+    border: theme.inputBorder,
+    borderRadius: theme.borderRadiusSmall,
+    boxSizing: 'border-box' as CSS.BoxSizingProperty,
+    display: 'flex',
+    order: 1,
+    width: '100%',
+  },
+  hasError: {
+    borderColor: theme.brandDanger,
+  },
+});
diff --git a/packages/ui/package-lock.json b/packages/ui/package-lock.json
index 8fa68a29b..64020c004 100644
--- a/packages/ui/package-lock.json
+++ b/packages/ui/package-lock.json
@@ -1,63 +1,20 @@
 {
   "name": "@meetfranz/ui",
-  "version": "0.0.0",
+  "version": "1.0.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
-    "@mdi/js": {
-      "version": "3.3.92",
-      "resolved": "https://registry.npmjs.org/@mdi/js/-/js-3.3.92.tgz",
-      "integrity": "sha512-l+12IwTycHlijWMiRWBAssm0RSgkQiwMthIy/EcBAdSqtnsHnFjHq+aI2MBZ8/AYX0QBxNUv4+EN0SXZgNkWDg=="
-    },
     "@mdi/react": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@mdi/react/-/react-1.1.0.tgz",
       "integrity": "sha512-c0+avMYEZ6i7Pg1ULLFs+p7k8bDPiie9rrgGYs8VWQhw2tUUYz7r0lIPVzD3bzMghWfyhfkArj88K5Of0WTMNw=="
     },
     "@meetfranz/theme": {
-      "version": "file:../theme",
+      "version": "1.0.14",
+      "resolved": "https://registry.npmjs.org/@meetfranz/theme/-/theme-1.0.14.tgz",
+      "integrity": "sha512-iWP+3ifiNum98sHKiNdUJK+R0p4Z7TT8OenA1N2BnSC6CFob+dLhzAK+o5lxcyEcKZKYDwd7JKRZj93wqpBPpg==",
       "requires": {
         "color": "^3.1.0"
-      },
-      "dependencies": {
-        "color": {
-          "version": "3.1.0",
-          "bundled": true,
-          "requires": {
-            "color-convert": "^1.9.1",
-            "color-string": "^1.5.2"
-          }
-        },
-        "color-convert": {
-          "version": "1.9.3",
-          "bundled": true,
-          "requires": {
-            "color-name": "1.1.3"
-          }
-        },
-        "color-name": {
-          "version": "1.1.3",
-          "bundled": true
-        },
-        "color-string": {
-          "version": "1.5.3",
-          "bundled": true,
-          "requires": {
-            "color-name": "^1.0.0",
-            "simple-swizzle": "^0.2.2"
-          }
-        },
-        "is-arrayish": {
-          "version": "0.3.2",
-          "bundled": true
-        },
-        "simple-swizzle": {
-          "version": "0.2.2",
-          "bundled": true,
-          "requires": {
-            "is-arrayish": "^0.3.1"
-          }
-        }
       }
     },
     "asap": {
@@ -65,6 +22,37 @@
       "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
       "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
     },
+    "color": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/color/-/color-3.1.2.tgz",
+      "integrity": "sha512-vXTJhHebByxZn3lDvDJYw4lR5+uB3vuoHsuYA5AKuxRVn5wzzIfQKGLBmgdVRHKTJYeK5rvJcHnrd0Li49CFpg==",
+      "requires": {
+        "color-convert": "^1.9.1",
+        "color-string": "^1.5.2"
+      }
+    },
+    "color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "requires": {
+        "color-name": "1.1.3"
+      }
+    },
+    "color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
+    },
+    "color-string": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.3.tgz",
+      "integrity": "sha512-dC2C5qeWoYkxki5UAXapdjqO672AM4vZuPGRQfO8b5HKuKGBbKWpITyDYN7TOFKvRW7kOgAn3746clDBMDJyQw==",
+      "requires": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
     "core-js": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
@@ -110,6 +98,11 @@
         "safer-buffer": ">= 2.1.2 < 3"
       }
     },
+    "is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
+    },
     "is-stream": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
@@ -188,6 +181,14 @@
       "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
       "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU="
     },
+    "simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
+      "requires": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
     "spin.js": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/spin.js/-/spin.js-2.3.2.tgz",
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 214437093..fefe06f4c 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@meetfranz/ui",
-  "version": "1.0.0",
-  "description": "React UI components for Ferdi",
+  "version": "1.1.0",
+  "description": "React UI components for Franz",
   "main": "lib/index.js",
   "scripts": {
     "dev": "tsc -w",
@@ -23,7 +23,6 @@
   "author": "Stefan Malzner <stefan@adlk.io>",
   "license": "Apache-2.0",
   "dependencies": {
-    "@mdi/js": "^3.3.92",
     "@mdi/react": "^1.1.0",
     "@meetfranz/theme": "^1.0.14",
     "react-loader": "^2.4.5"
@@ -34,5 +33,5 @@
     "react-dom": "16.7.0",
     "react-jss": "^8.6.1"
   },
-  "gitHead": "e1e46986d902adc4c19ee009016290f9733a7d61"
+  "gitHead": "254da30f801169fac376bda1439b46cabbb491ad"
 }