fix: eslint update

coingaming · Jan 21, 2021 · 628564d · 628564d
1 parent 5b323eb
commit 628564d
Show file tree

Hide file tree

Showing 9 changed files with 309 additions and 140 deletions.
diff --git a/.config/eslint/.eslintrc.js b/.config/eslint/.eslintrc.js
@@ -13,7 +13,10 @@ module.exports = {
     'import/no-cycle': 'off',
     'import/export': 'off', // We have both default export as well as named ones for now
     'no-unused-expressions': 'off', // Investigate `jsx;` alternative
+    'no-use-before-define': 'off',
     '@typescript-eslint/no-inferrable-types': 'off',
+    "@typescript-eslint/no-use-before-define": 'off',
+    // Prevents a bug https://stackoverflow.com/questions/63818415/react-was-used-before-it-was-defined/64024916#64024916
   },
   overrides: [
     {

diff --git a/docs/src/components/docs/theme-table.tsx b/docs/src/components/docs/theme-table.tsx
@@ -56,46 +56,47 @@ const ThemePropsTable: React.FC<ThemePropsTableProps> = ({ options }) => (
       </tr>
     </thead>
     <tbody>
-      {options && options.map(option => (
-        <tr key={option.key}>
-          <td>{option.property.toString()}</td>
-          {/* eslint-disable-next-line no-nested-ternary */}
-          {typeof option.value === 'object' && option.key !== 'fontFace' ? (
-            <td colSpan={2}>
-              <Table>
-                <tbody>
-                  {Object.keys(option.value).map(variant => (
-                    <tr key={variant}>
-                      <th>
-                        {option.key}.{variant}
-                      </th>
-                      {/**
+      {options &&
+        options.map(option => (
+          <tr key={option.key}>
+            <td>{option.property.toString()}</td>
+            {/* eslint-disable-next-line no-nested-ternary */}
+            {typeof option.value === 'object' && option.key !== 'fontFace' ? (
+              <td colSpan={2}>
+                <Table>
+                  <tbody>
+                    {Object.keys(option.value).map(variant => (
+                      <tr key={variant}>
+                        <th>
+                          {option.key}.{variant}
+                        </th>
+                        {/**
                       * @TODO Create Index Signature for Themes
                       // @ts-ignore */}
-                      <td>{option.value[variant].toString()}</td>
-                    </tr>
-                  ))}
-                </tbody>
-              </Table>
-            </td>
-          ) : option.key === 'fontFace' ? (
-            <React.Fragment key={option.key}>
-              <td>{option.key}</td>
-              <td>Returns CSS @font-face declaration.</td>
-            </React.Fragment>
-          ) : (
-            <React.Fragment key={option.key}>
-              <td>{option.key}</td>
-              {/**
-               * Here the value is deliberately wrapped in a template
-               * string to sanitize the output and prevent React
-               * complaining about returning an object.
-               */}
-              <td>{option.value.toString()}</td>
-            </React.Fragment>
-          )}
-        </tr>
-      ))}
+                        <td>{option.value[variant].toString()}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </Table>
+              </td>
+            ) : option.key === 'fontFace' ? (
+              <React.Fragment key={option.key}>
+                <td>{option.key}</td>
+                <td>Returns CSS @font-face declaration.</td>
+              </React.Fragment>
+            ) : (
+              <React.Fragment key={option.key}>
+                <td>{option.key}</td>
+                {/**
+                 * Here the value is deliberately wrapped in a template
+                 * string to sanitize the output and prevent React
+                 * complaining about returning an object.
+                 */}
+                <td>{option.value.toString()}</td>
+              </React.Fragment>
+            )}
+          </tr>
+        ))}
     </tbody>
   </Table>
 );

diff --git a/package.json b/package.json
@@ -79,8 +79,8 @@
     "@types/react-dom": "16.9.2",
     "@types/react-test-renderer": "16.9.2",
     "@types/styled-components": "5.1.7",
-    "@typescript-eslint/eslint-plugin": "1.11.0",
-    "@typescript-eslint/parser": "1.11.0",
+    "@typescript-eslint/eslint-plugin": "4.14.0",
+    "@typescript-eslint/parser": "4.14.0",
     "babel-jest": "24.3.1",
     "babel-plugin-styled-components": "1.10.6",
     "babel-plugin-transform-imports": "2.0.0",
@@ -89,7 +89,7 @@
     "commitizen": "4.0.3",
     "concurrently": "4.1.2",
     "cz-conventional-changelog": "3.0.2",
-    "eslint": "6.0.1",
+    "eslint": "7.18.0",
     "eslint-plugin-import": "2.14.0",
     "eslint-plugin-jsx-a11y": "6.1.1",
     "eslint-plugin-prettier": "3.1.0",

diff --git a/packages/components/src/cardBalance/CardBalance.tsx b/packages/components/src/cardBalance/CardBalance.tsx
@@ -4,15 +4,15 @@ import { rem } from '@heathmont/moon-utils';
 
 import Stack from '../stack/Stack';
 
-type Balance = {
+type BalanceType = {
   currency: string;
   value: string;
   unit: string;
   unitTitle?: string;
 };
 
 type CardBalanceProps = {
-  from: Balance;
+  from: BalanceType;
   badge?: JSX.Element;
 };
 
@@ -39,7 +39,7 @@ const Text = styled.p(({ theme: { color } }) => ({
   lineHeight: rem(24),
 }));
 
-const Balance: React.FC<{ from: Balance }> = ({ from }) => {
+const Balance: React.FC<{ from: BalanceType }> = ({ from }) => {
   return (
     <Stack as="section" space={0}>
       <Text>{from.currency}</Text>

diff --git a/packages/components/src/checkboxMultiselect/CheckboxMultiselect.tsx b/packages/components/src/checkboxMultiselect/CheckboxMultiselect.tsx
@@ -6,7 +6,7 @@ import Checkbox from '../checkbox/Checkbox';
 import Inline from '../inline/Inline';
 import Text from '../text/Text';
 
-type Option = {
+type OptionType = {
   label: string | JSX.Element;
   value: any;
   count?: number;
@@ -15,7 +15,7 @@ type Option = {
 
 type CheckboxMultiselectProps = {
   value?: any[];
-  options: Option[];
+  options: OptionType[];
   onChange: (value: any[]) => void;
   maxHeight?: string | number;
 };

diff --git a/packages/components/src/datepicker/private/Month.tsx b/packages/components/src/datepicker/private/Month.tsx
@@ -41,7 +41,7 @@ type MonthProps = {
   hoveredDate?: Date;
 };
 
-interface isInRangePreview {
+interface isInRangePreviewInrerface {
   startDate?: Date;
   hoveredDate?: Date;
   day: Date;
@@ -51,7 +51,7 @@ const isInRangePreview = ({
   startDate,
   hoveredDate,
   day,
-}: isInRangePreview) => {
+}: isInRangePreviewInrerface) => {
   if (!startDate) {
     return false;
   }

diff --git a/packages/components/src/singleItemSelect/SingleItemSelect.tsx b/packages/components/src/singleItemSelect/SingleItemSelect.tsx
@@ -2,14 +2,14 @@ import { rem } from '@heathmont/moon-utils';
 import React from 'react';
 import styled from 'styled-components';
 
-type Option = {
+type OptionType = {
   label: string | JSX.Element;
   value: any;
 };
 
 type SingleItemSelectProps = {
   value?: any;
-  options: Option[];
+  options: OptionType[];
   onChange: (value: any) => void;
   maxHeight?: string | number;
 };

diff --git a/packages/notifications/src/toast/ToastIcon.tsx b/packages/notifications/src/toast/ToastIcon.tsx
@@ -5,7 +5,7 @@ import IconToastError from '../private/icons/IconToastError';
 import IconToastWarning from '../private/icons/IconToastWarning';
 import IconToastSuccess from '../private/icons/IconToastSuccess';
 
-export interface Variants {
+export interface VariantsInterface {
   variant?: 'error' | 'warning' | 'info' | 'success';
 }
 
@@ -16,7 +16,7 @@ const Variants = {
   success: <IconToastSuccess fontSize="1.5rem" />,
 };
 
-const ToastIcon: React.FC<Variants> = ({ variant }) => {
+const ToastIcon: React.FC<VariantsInterface> = ({ variant }) => {
   if (variant && variant in Variants) {
     return Variants[variant];
   }