Typescript (#298)

* Basic typescript

* Working typescript setup

* cant use react-components from react-components

* js type

* Do not remove sideEffects flag

* Fix linter errors

* Use shared tsconfig

* bring back typings :/

* lintfix

* Fix prettier command

* Lint all files before comit

* Remove redundant config

* Use autoreply constant

* Move enum

* update ts

* add type override

* Remove redundant type

* Fix imports after moving

* Removeunused import

* Jest ts config

* Use babel-jest to handle typescript in tests

.eslintrc.json

@@ -1,35 +1,43 @@
 {
-  "plugins": [
-    "react",
-    "react-hooks"
-  ],
-  "parserOptions": {
-    "ecmaVersion": 2018,
-    "sourceType": "module",
-    "ecmaFeatures": {
-      "jsx": true
+    "parser": "@typescript-eslint/parser",
+    "plugins": ["react", "react-hooks", "@typescript-eslint"],
+    "parserOptions": {
+        "ecmaVersion": 2018,
+        "sourceType": "module",
+        "ecmaFeatures": {
+            "jsx": true
+        }
+    },
+    "env": {
+        "browser": true,
+        "commonjs": true,
+        "es6": true,
+        "jest": true,
+        "node": true
+    },
+    "settings": {
+        "react": {
+            "version": "detect"
+        },
+        "import/resolver": {
+            "node": {
+                "extensions": [".js", ".ts", ".tsx"]
+            }
+        }
+    },
+    "extends": ["plugin:@typescript-eslint/recommended", "eslint:recommended", "plugin:react/recommended"],
+    "rules": {
+        "@typescript-eslint/explicit-function-return-type": "off",
+        "@typescript-eslint/no-explicit-any": "off",
+        "@typescript-eslint/indent": "off",
+        "react/display-name": "off",
+        "react/prop-types": "warn",
+        "react-hooks/rules-of-hooks": "error",
+        "no-console": [
+            "error",
+            {
+                "allow": ["warn", "error"]
+            }
+        ]
     }
-  },
-  "env": {
-    "browser": true,
-    "commonjs": true,
-    "es6": true,
-    "jest": true,
-    "node": true
-  },
-  "settings": {
-    "react": {
-      "version": "detect"
-    }
-  },
-  "extends": [
-    "eslint:recommended",
-    "plugin:react/recommended"
-  ],
-  "rules": {
-    "react/display-name": "off",
-    "react/prop-types": "warn",
-    "react-hooks/rules-of-hooks": "error",
-    "no-console": ["error", { "allow": ["warn", "error"] }]
-  }
 }

babel.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-    presets: ['@babel/preset-env', '@babel/preset-react'],
+    presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'],
     plugins: [
         '@babel/plugin-proposal-object-rest-spread',
         '@babel/plugin-transform-runtime',

components/autocomplete/useAutocomplete.js

@@ -26,7 +26,7 @@ const useAutocomplete = ({
         changeInputValue(multiple ? '' : label);
 
         const itemToAdd = !item && label ? labelToItem(label) : item;
-        setSelectedItems((selected) => multiple ? [...selected, itemToAdd] : [itemToAdd]);
+        setSelectedItems((selected) => (multiple ? [...selected, itemToAdd] : [itemToAdd]));
     };
 
     const submit = (label) => select(null, label);

components/container/ObserverSections.js

@@ -4,6 +4,7 @@ import 'intersection-observer';
 
 import ObserverSection from './ObserverSection';
 
+/** @type any */
 const ObserverSections = ({ children, setActiveSection }) => {
     React.Children.forEach(children, (child) => {
         if (!child.props.id) throw new Error('All sections to be observed need an id');

components/container/SettingsTitle.js

@@ -4,6 +4,7 @@ import { classnames } from 'react-components';
 
 import { useMainArea } from '../../hooks/useMainArea';
 
+/** @type {any} */
 const SettingsTitle = ({ children }) => {
     const mainAreaRef = useMainArea();
     const [topClass, setClass] = useState('sticky-title--onTop');

components/loader/Loader.js → components/loader/Loader.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import * as React from 'react';
 import { c } from 'ttag';
 import loadingSvg from 'design-system/assets/img/shared/loading-atom.svg';
 import loadingSmallerSvg from 'design-system/assets/img/shared/loading-atom-smaller.svg';
@@ -13,7 +12,11 @@ const IMAGES = {
 const MEDIUM_WIDTH = '80';
 const MEDIUM_HEIGHT = '80';
 
-const Loader = ({ size = 'small' }) => {
+interface Props {
+    size: 'small' | 'medium' | 'big';
+}
+
+const Loader = ({ size = 'small' }: Props) => {
     return (
         <div className="center flex mb2 mt2">
             <img
@@ -27,8 +30,4 @@ const Loader = ({ size = 'small' }) => {
     );
 };
 
-Loader.propTypes = {
-    size: PropTypes.oneOf(['small', 'medium', 'big'])
-};
-
 export default Loader;

components/price/Price.js

@@ -12,11 +12,7 @@ const Price = ({ children: amount = 0, currency = '', className = '', divisor =
     const c = <span className="currency">{CURRENCIES[currency] || currency}</span>;
     const p = value < 0 ? <span className="prefix">-</span> : null;
     const v = <span className="amount">{Math.abs(value)}</span>;
-    const s = suffix ? (
-        <span className="ml0-5 suffix">
-            {suffix}
-        </span>
-    ) : null;
+    const s = suffix ? <span className="ml0-5 suffix">{suffix}</span> : null;
 
     if (currency === 'USD') {
         return (

components/table/TableCellBusy.js

@@ -2,4 +2,4 @@ import React from 'react';
 
 const TableCellBusy = () => <td aria-busy="true" />;
 
-export default TableCellBusy;
+export default TableCellBusy;

components/table/index.js

@@ -4,4 +4,3 @@ export { default as TableHeader } from './TableHeader';
 export { default as TableFooter } from './TableFooter';
 export { default as TableRow } from './TableRow';
 export { default as TableBody } from './TableBody';
-

components/title/SubTitle.js

@@ -7,4 +7,4 @@ SubTitle.propTypes = {
     children: PropTypes.node.isRequired
 };
 
-export default SubTitle;
+export default SubTitle;

components/title/Title.js

@@ -7,4 +7,4 @@ Title.propTypes = {
     children: PropTypes.node.isRequired
 };
 
-export default Title;
+export default Title;

components/toggle/Toggle.js

@@ -17,6 +17,9 @@ const label = (key) => {
     );
 };
 
+/**
+ * @type any
+ */
 const Toggle = ({ id = 'toggle', className = '', checked = false, loading, onChange, disabled, ...rest }) => {
     const handleChange = (event) => {
         if (!disabled && onChange) {

containers/autoReply/AutoReplyForm/AutoReplyForm.js

@@ -13,7 +13,8 @@ import StartDayOfMonthField from './fields/StartDayOfMonthField';
 import EndDayOfMonthField from './fields/EndDayOfMonthField';
 import StartDayOfWeekField from './fields/StartDayOfWeekField';
 import EndDayOfWeekField from './fields/EndDayOfWeekField';
-import { AutoReplyDuration, DAY_MILLISECONDS } from '../utils';
+import { DAY_MILLISECONDS } from '../utils';
+import { AutoReplyDuration } from 'proton-shared/lib/constants';
 
 const AutoReplyForm = ({ model, updateModel }) => {
     if (model.duration === AutoReplyDuration.FIXED) {

containers/autoReply/AutoReplyTemplate.js

@@ -3,14 +3,9 @@ import { c } from 'ttag';
 import PropTypes from 'prop-types';
 import { Button } from 'react-components';
 import moment from 'moment';
-import {
-    getDaysOfMonthOptions,
-    getDurationOptions,
-    AutoReplyDuration,
-    DAY_MILLISECONDS,
-    getTimeZoneOptions
-} from './utils';
+import { getDaysOfMonthOptions, getDurationOptions, DAY_MILLISECONDS, getTimeZoneOptions } from './utils';
 import InfoLine from './InfoLine';
+import { AutoReplyDuration } from 'proton-shared/lib/constants';
 
 const AutoReplyTemplate = ({ autoresponder, onEdit }) => {
     const durationLabel = getDurationOptions().find(({ value }) => value === autoresponder.Repeat).text;

containers/autoReply/AutoReplyToggle.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { updateAutoresponder } from 'proton-shared/lib/api/mailSettings';
+import useToggle from '../../components/toggle/useToggle';
+import useEventManager from '../eventManager/useEventManager';
+import useApiWithoutResult from '../../hooks/useApiWithoutResult';
+import Toggle from '../../components/toggle/Toggle';
+import { AutoResponder } from 'proton-shared/lib/interfaces/AutoResponder';
+
+interface Props {
+    autoresponder: AutoResponder;
+}
+
+const AutoReplyToggle = ({ autoresponder, ...rest }: Props) => {
+    const { state, toggle } = useToggle(!!autoresponder.IsEnabled);
+    const { call } = useEventManager();
+    const { request } = useApiWithoutResult(updateAutoresponder);
+    const [loading, setLoading] = useState(false);
+
+    const handleToggle = async ({ target }: React.ChangeEvent<HTMLInputElement>) => {
+        try {
+            setLoading(true);
+            await request({ ...autoresponder, IsEnabled: target.checked });
+            await call();
+            setLoading(false);
+            toggle();
+        } catch (error) {
+            setLoading(false);
+            throw error;
+        }
+    };
+
+    return <Toggle {...rest} loading={loading} checked={state} onChange={handleToggle} />;
+};
+
+export default AutoReplyToggle;

containers/autoReply/InfoLine.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+interface Props {
+    plain: boolean;
+    label: React.ReactNode;
+    children: React.ReactNode;
+}
+
+const InfoLine = ({ label, children, plain = false }: Props) => (
+    <tr className="mb1 w100 aligntop">
+        <td className="pr1">{label}</td>
+        <td className={`w100 ${plain ? '' : 'bold'}`}>{children}</td>
+    </tr>
+);
+
+export default InfoLine;

containers/autoReply/utils.js → containers/autoReply/utils.ts

@@ -1,16 +1,9 @@
 import moment from 'moment-timezone';
 import { c } from 'ttag';
+import { AutoReplyDuration } from 'proton-shared/lib/constants';
 
 export const DAY_MILLISECONDS = 24 * 60 * 60 * 1000;
 
-export const AutoReplyDuration = {
-    FIXED: 0,
-    DAILY: 1,
-    WEEKLY: 2,
-    MONTHLY: 3,
-    PERMANENT: 4
-};
-
 export const getDurationOptions = () => [
     {
         text: c('Option').t`Fixed duration`,
@@ -85,7 +78,7 @@ export const getDaysOfMonthOptions = () => [
     { text: c('Option').t`31st of the month`, value: 30 }
 ];
 
-export const getRoundedHours = (time) => {
+export const getRoundedHours = (time: moment.MomentInput) => {
     const startOfDay = moment(time).startOf('day');
 
     return moment(moment(time).diff(startOfDay))
@@ -94,7 +87,7 @@ export const getRoundedHours = (time) => {
         .valueOf();
 };
 
-export const startOfDay = (date) =>
+export const startOfDay = (date: moment.MomentInput) =>
     moment(date)
         .startOf('day')
         .valueOf();

containers/general/LanguageSection.js

@@ -18,6 +18,7 @@ import { updateLocale } from 'proton-shared/lib/api/settings';
 import { loadLocale } from 'proton-shared/lib/i18n';
 import { DEFAULT_LOCALE } from 'proton-shared/lib/constants';
 
+/* eslint-disable @typescript-eslint/camelcase */
 const LOCALES = {
     cs_CZ: 'Čeština',
     de_DE: 'Deutsch',
@@ -38,6 +39,7 @@ const LOCALES = {
     zh_CN: '简体中文',
     zh_TW: '繁體中'
 };
+/* eslint-enable @typescript-eslint/camelcase */
 
 function LanguageSection({ locales }) {
     const [{ Locale }] = useUserSettings();