From dc0e5d7cd690bc37e0f6176ae676f4ce3e810430 Mon Sep 17 00:00:00 2001 From: AP Date: Thu, 7 May 2020 19:08:56 +0200 Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20linting?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintrc.js | 3 +- .../buttons/colorButton/ColorButton.tsx | 8 +++--- .../buttons/multiButton/MultiButton.tsx | 8 +++--- src/components/checkbox/Checkbox.tsx | 5 ++-- src/components/generic/CardGeneric.tsx | 12 ++++---- src/components/generic/Styled.tsx | 28 ++++++++----------- src/layouts/header/Header.styled.ts | 13 ++++----- src/layouts/navigation/Navigation.tsx | 26 ++++++++--------- .../navigation/sideSettings/SideSettings.tsx | 9 +++--- src/views/chat/ChatBubble.tsx | 3 +- 10 files changed, 54 insertions(+), 61 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index dfca7f7e..ff3c783a 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -20,7 +20,7 @@ module.exports = { linkComponents: ['Hyperlink', { name: 'Link', linkAttribute: 'to' }], }, extends: [ - "eslint:recommended", + 'eslint:recommended', 'plugin:@typescript-eslint/eslint-recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react/recommended', @@ -33,6 +33,7 @@ module.exports = { 'plugin:prettier/recommended', ], rules: { + '@typescript-eslint/explicit-function-return-type': 'off', 'import/no-unresolved': 'off', camelcase: 'off', '@typescript-eslint/camelcase': 'off', diff --git a/src/components/buttons/colorButton/ColorButton.tsx b/src/components/buttons/colorButton/ColorButton.tsx index aa023336..5be4c035 100644 --- a/src/components/buttons/colorButton/ColorButton.tsx +++ b/src/components/buttons/colorButton/ColorButton.tsx @@ -23,7 +23,7 @@ interface GeneralProps { mobileMargin?: string; } -const GeneralButton = styled.button` +const GeneralButton = styled.button` display: flex; justify-content: center; align-items: center; @@ -36,7 +36,7 @@ const GeneralButton = styled.button` font-size: 14px; box-sizing: border-box; margin: ${({ withMargin }) => (withMargin ? withMargin : '0')}; - width: ${({ fullWidth, buttonWidth }: GeneralProps) => + width: ${({ fullWidth, buttonWidth }) => fullWidth ? '100%' : buttonWidth ? buttonWidth : 'auto'}; @media (${mediaWidths.mobile}) { @@ -73,13 +73,13 @@ interface BorderProps { withBorder?: boolean; } -const BorderButton = styled(GeneralButton)` +const BorderButton = styled(GeneralButton)` ${({ selected }) => selected && 'cursor: default'}; ${({ selected }) => selected && 'font-weight: 800'}; background-color: ${colorButtonBackground}; color: ${textColor}; border: 1px solid - ${({ borderColor, selected, withBorder }: BorderProps) => + ${({ borderColor, selected, withBorder }) => withBorder ? borderColor ? borderColor diff --git a/src/components/buttons/multiButton/MultiButton.tsx b/src/components/buttons/multiButton/MultiButton.tsx index d33a2666..affdccf6 100644 --- a/src/components/buttons/multiButton/MultiButton.tsx +++ b/src/components/buttons/multiButton/MultiButton.tsx @@ -11,7 +11,7 @@ interface StyledSingleProps { buttonColor?: string; } -const StyledSingleButton = styled.button` +const StyledSingleButton = styled.button` border-radius: 4px; cursor: pointer; outline: none; @@ -22,7 +22,7 @@ const StyledSingleButton = styled.button` color: ${multiSelectColor}; flex-grow: 1; - ${({ selected, buttonColor }: StyledSingleProps) => + ${({ selected, buttonColor }) => selected ? css` color: white; @@ -61,7 +61,7 @@ interface MultiBackProps { margin?: string; } -const MultiBackground = styled.div` +const MultiBackground = styled.div` display: flex; justify-content: center; align-items: center; @@ -70,7 +70,7 @@ const MultiBackground = styled.div` background: ${multiButtonColor}; flex-wrap: wrap; - ${({ margin }: MultiBackProps) => margin && `margin: ${margin}`} + ${({ margin }) => margin && `margin: ${margin}`} `; interface MultiButtonProps { diff --git a/src/components/checkbox/Checkbox.tsx b/src/components/checkbox/Checkbox.tsx index 73f5589f..3b31f78b 100644 --- a/src/components/checkbox/Checkbox.tsx +++ b/src/components/checkbox/Checkbox.tsx @@ -21,7 +21,7 @@ const FixedWidth = styled.div` margin-right: 8px; `; -const StyledCheckbox = styled.div` +const StyledCheckbox = styled.div<{ checked: boolean }>` height: 16px; width: 16px; margin: 0; @@ -33,8 +33,7 @@ const StyledCheckbox = styled.div` box-sizing: border-box; border-radius: 50%; - ${({ checked }: { checked: boolean }) => - checked && `background-color: ${themeColors.blue2}`} + ${({ checked }) => checked && `background-color: ${themeColors.blue2}`} `; type CheckboxProps = { diff --git a/src/components/generic/CardGeneric.tsx b/src/components/generic/CardGeneric.tsx index 857bd57d..a8cb6ab0 100644 --- a/src/components/generic/CardGeneric.tsx +++ b/src/components/generic/CardGeneric.tsx @@ -18,16 +18,16 @@ interface ProgressBar { order?: number; } -export const ProgressBar = styled.div` +export const ProgressBar = styled.div` height: 10px; background-image: linear-gradient( to bottom, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.05) ); - background-color: ${({ order }: ProgressBar) => + background-color: ${({ order }) => order === 2 ? progressFirst : progressSecond}; - width: ${({ percent }: ProgressBar) => `${percent}%`}; + width: ${({ percent }) => `${percent}%`}; `; export const NodeTitle = styled.div` @@ -83,13 +83,13 @@ export interface CardProps { cardPadding?: string; } -export const Card = styled.div` - padding: ${({ cardPadding }: CardProps) => cardPadding ?? '16px'}; +export const Card = styled.div` + padding: ${({ cardPadding }) => cardPadding ?? '16px'}; background: ${cardColor}; box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.1); border-radius: 4px; border: 1px solid ${cardBorderColor}; - margin-bottom: ${({ bottom }: CardProps) => (bottom ? bottom : '25px')}; + margin-bottom: ${({ bottom }) => (bottom ? bottom : '25px')}; width: 100%; `; diff --git a/src/components/generic/Styled.tsx b/src/components/generic/Styled.tsx index 2a3fe816..576241ba 100644 --- a/src/components/generic/Styled.tsx +++ b/src/components/generic/Styled.tsx @@ -59,10 +59,9 @@ interface SeparationProps { lineColor?: string | ThemeSet; } -export const Separation = styled.div` - height: ${({ height }: SeparationProps) => (height ? height : '1')}px; - background-color: ${({ lineColor }: SeparationProps) => - lineColor ?? separationColor}; +export const Separation = styled.div` + height: ${({ height }) => (height ? height : '1')}px; + background-color: ${({ lineColor }) => lineColor ?? separationColor}; width: 100%; margin: 16px 0; `; @@ -73,13 +72,12 @@ interface SubCardProps { withMargin?: string; } -export const SubCard = styled.div` +export const SubCard = styled.div` margin: ${({ withMargin }) => (withMargin ? withMargin : '0 0 10px 0')}; padding: ${({ padding }) => (padding ? padding : '16px')}; background: ${subCardColor}; border: 1px solid ${cardBorderColor}; - border-left: ${({ color }: SubCardProps) => - color ? `2px solid ${color}` : ''}; + border-left: ${({ color }) => (color ? `2px solid ${color}` : '')}; &:hover { box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.1); @@ -148,15 +146,14 @@ export const ColumnLine = styled.div` } `; -export const SimpleButton = styled.button` +export const SimpleButton = styled.button<{ enabled?: boolean }>` cursor: pointer; outline: none; padding: 5px; margin: 5px; text-decoration: none; background-color: transparent; - color: ${({ enabled = true }: { enabled?: boolean }) => - enabled ? textColor : unSelectedNavButton}; + color: ${({ enabled = true }) => (enabled ? textColor : unSelectedNavButton)}; border: 1px solid ${buttonBorderColor}; display: flex; align-items: center; @@ -175,20 +172,19 @@ interface DarkProps { withMargin?: string; } -export const DarkSubTitle = styled.div` - font-size: ${({ fontSize }: DarkProps) => (fontSize ? fontSize : '14px')}; +export const DarkSubTitle = styled.div` + font-size: ${({ fontSize }) => (fontSize ? fontSize : '14px')}; color: ${unSelectedNavButton}; - margin: ${({ withMargin }: DarkProps) => (withMargin ? withMargin : '0')}; + margin: ${({ withMargin }) => (withMargin ? withMargin : '0')}; `; interface ColorProps { color: string; selected?: boolean; } -export const ColorButton = styled(SimpleButton)` +export const ColorButton = styled(SimpleButton)` color: ${({ selected }) => (selected ? textColor : chartLinkColor)}; - border: ${({ selected, color }: ColorProps) => - selected ? `1px solid ${color}` : ''}; + border: ${({ selected, color }) => (selected ? `1px solid ${color}` : '')}; &:hover { border: 1px solid ${({ color }: ColorProps) => color}; diff --git a/src/layouts/header/Header.styled.ts b/src/layouts/header/Header.styled.ts index 7fa25c87..0553c38a 100644 --- a/src/layouts/header/Header.styled.ts +++ b/src/layouts/header/Header.styled.ts @@ -11,14 +11,14 @@ export const IconPadding = styled.div` margin-bottom: -4px; `; -export const HeaderTitle = styled.div` +export const HeaderTitle = styled.div<{ withPadding: boolean }>` color: ${headerTextColor}; font-weight: 800; display: flex; align-items: center; justify-content: center; - ${({ withPadding }: { withPadding: boolean }) => + ${({ withPadding }) => withPadding && css` @media (${mediaWidths.mobile}) { @@ -35,19 +35,18 @@ export const IconWrapper = styled.div` height: 24px; `; -export const LinkWrapper = styled.div` +export const LinkWrapper = styled.div<{ last?: boolean }>` color: ${headerTextColor}; - margin: ${({ last }: { last?: boolean }) => - last ? '0 16px 0 4px' : '0 4px'}; + margin: ${({ last }) => (last ? '0 16px 0 4px' : '0 4px')}; :hover { color: ${themeColors.blue2}; } `; -export const HeaderLine = styled(SingleLine)` +export const HeaderLine = styled(SingleLine)<{ loggedIn: boolean }>` @media (${mediaWidths.mobile}) { - ${({ loggedIn }: { loggedIn: boolean }) => + ${({ loggedIn }) => !loggedIn && css` width: 100%; diff --git a/src/layouts/navigation/Navigation.tsx b/src/layouts/navigation/Navigation.tsx index 7f7ca910..c4c747fe 100644 --- a/src/layouts/navigation/Navigation.tsx +++ b/src/layouts/navigation/Navigation.tsx @@ -29,9 +29,9 @@ import { useRouter } from 'next/router'; import { Link } from '../../components/link/Link'; import { useStatusState } from '../../context/StatusContext'; -const NavigationStyle = styled.div` +const NavigationStyle = styled.div<{ isOpen: boolean }>` grid-area: nav; - width: ${({ isOpen }: { isOpen: boolean }) => (isOpen ? '200px' : '60px')}; + width: ${({ isOpen }) => (isOpen ? '200px' : '60px')}; @media (${mediaWidths.mobile}) { display: none; @@ -51,9 +51,9 @@ const LinkView = styled.div` padding: 8px 0; `; -const ButtonSection = styled.div` +const ButtonSection = styled.div<{ isOpen: boolean }>` width: 100%; - ${({ isOpen }: { isOpen: boolean }) => + ${({ isOpen }) => !isOpen && css` margin: 8px 0; @@ -70,18 +70,17 @@ interface NavProps { isOpen?: boolean; } -const NavButton = styled.div` +const NavButton = styled.div` padding: 4px; border-radius: 4px; - background: ${({ selected }: NavProps) => selected && navBackgroundColor}; + background: ${({ selected }) => selected && navBackgroundColor}; display: flex; align-items: center; - ${({ isOpen }: NavProps) => !isOpen && 'justify-content: center'}; + ${({ isOpen }) => !isOpen && 'justify-content: center'}; width: 100%; text-decoration: none; margin: 4px 0; - color: ${({ selected }: NavProps) => - selected ? navTextColor : unSelectedNavButton}; + color: ${({ selected }) => (selected ? navTextColor : unSelectedNavButton)}; &:hover { color: ${navTextColor}; @@ -99,7 +98,7 @@ const BurgerRow = styled.div` padding: 16px; `; -const BurgerNav = styled.a` +const BurgerNav = styled.a` display: flex; flex-direction: column; align-items: center; @@ -107,10 +106,9 @@ const BurgerNav = styled.a` padding: 16px 16px 8px; border-radius: 4px; text-decoration: none; - background: ${({ selected }: NavProps) => selected && subCardColor}; - ${({ isOpen }: NavProps) => !isOpen && 'justify-content: center'}; - color: ${({ selected }: NavProps) => - selected ? navTextColor : unSelectedNavButton}; + background: ${({ selected }) => selected && subCardColor}; + ${({ isOpen }) => !isOpen && 'justify-content: center'}; + color: ${({ selected }) => (selected ? navTextColor : unSelectedNavButton)}; `; const HOME = '/home'; diff --git a/src/layouts/navigation/sideSettings/SideSettings.tsx b/src/layouts/navigation/sideSettings/SideSettings.tsx index cf2b0422..c3c6f6df 100644 --- a/src/layouts/navigation/sideSettings/SideSettings.tsx +++ b/src/layouts/navigation/sideSettings/SideSettings.tsx @@ -10,7 +10,7 @@ import { unSelectedNavButton, } from '../../../styles/Themes'; -const SelectedIcon = styled.div` +const SelectedIcon = styled.div<{ selected: boolean }>` display: flex; justify-content: center; align-items: center; @@ -27,8 +27,7 @@ const SelectedIcon = styled.div` color: ${inverseTextColor}; } } - background-color: ${({ selected }: { selected: boolean }) => - selected ? progressBackground : ''}; + background-color: ${({ selected }) => (selected ? progressBackground : '')}; `; const Symbol = styled.div` @@ -36,12 +35,12 @@ const Symbol = styled.div` font-weight: 700; `; -const IconRow = styled.div` +const IconRow = styled.div<{ center?: boolean }>` margin: 5px 0; display: flex; justify-content: center; align-items: center; - ${({ center }: { center?: boolean }) => center && 'width: 100%'} + ${({ center }) => center && 'width: 100%'} `; const BurgerPadding = styled(SingleLine)` diff --git a/src/views/chat/ChatBubble.tsx b/src/views/chat/ChatBubble.tsx index ce0dbdc3..979c757f 100644 --- a/src/views/chat/ChatBubble.tsx +++ b/src/views/chat/ChatBubble.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import { MessageType } from './Chat.types'; +import { ThemeSet } from 'styled-theming'; import { ChatStyledMessage, ChatBubbleMessage, @@ -91,7 +92,7 @@ export const ChatBubble = ({ message }: ChatBubbleProps) => { tokens, } = message; - let color = chatBubbleColor; + let color: ThemeSet | string = chatBubbleColor; let textMessage = chatMessage; let dotColor = ''; let showButton = false;