From 8dc55b97a1937aa0dabc7ddf113cf58ca02c2286 Mon Sep 17 00:00:00 2001 From: George Lima Date: Thu, 7 Feb 2019 13:31:59 -0300 Subject: [PATCH] type(styled): add theme as default prop in interpolations --- .flowconfig | 3 +- app/components/button.js | 24 +- app/components/confirm-dialog.js | 4 +- app/components/dropdown.js | 8 +- app/components/error-modal.js | 2 +- app/components/header.js | 24 +- app/components/layout.js | 10 +- app/components/loading-screen.js | 2 +- app/components/select.js | 10 +- app/components/sidebar.js | 8 +- app/components/status-pill.js | 4 +- app/components/transaction-daily.js | 10 +- app/components/transaction-details.js | 8 +- app/components/transaction-item.js | 4 +- app/components/wallet-address.js | 8 +- app/components/wallet-summary.js | 12 +- app/views/console.js | 6 +- app/views/receive.js | 10 +- app/views/send.js | 22 +- app/views/settings.js | 10 +- flow-custom-typedefs/styled-components.js | 422 ++++++++++++++++++++++ flow-custom-typedefs/theme.js | 9 +- public/flow-coverage-badge.svg | 2 +- 23 files changed, 523 insertions(+), 99 deletions(-) create mode 100644 flow-custom-typedefs/styled-components.js diff --git a/.flowconfig b/.flowconfig index 945b564..e739860 100644 --- a/.flowconfig +++ b/.flowconfig @@ -1,6 +1,7 @@ [ignore] .*/node_modules/polished/.* ./__tests__/**.js +./flow-typed/npm/styled-components_v4.x.x.js [include] @@ -13,4 +14,4 @@ flow-custom-typedefs [options] esproposal.optional_chaining=enable -[strict] \ No newline at end of file +[strict] diff --git a/app/components/button.js b/app/components/button.js index 18eb795..6900f13 100644 --- a/app/components/button.js +++ b/app/components/button.js @@ -9,19 +9,19 @@ const DefaultButton = styled.button` display: flex; justify-content: center; padding: 10px 30px; - font-family: ${(props: PropsWithTheme<>) => props.theme.fontFamily}; - font-weight: ${(props: PropsWithTheme<>) => String(props.theme.fontWeight.bold)}; - font-size: ${(props: PropsWithTheme<>) => `${props.theme.fontSize.regular}em`}; + font-family: ${props => props.theme.fontFamily}; + font-weight: ${props => String(props.theme.fontWeight.bold)}; + font-size: ${props => `${props.theme.fontSize.regular}em`}; cursor: pointer; outline: none; min-width: 100px; border-radius: 100px; - transition: background-color 0.1s ${(props: PropsWithTheme<>) => props.theme.transitionEase}; + transition: background-color 0.1s ${props => props.theme.transitionEase}; `; const Primary = styled(DefaultButton)` - background-color: ${(props: PropsWithTheme<>) => props.theme.colors.primary}; - color: ${(props: PropsWithTheme<>) => props.theme.colors.secondary}; + background-color: ${props => props.theme.colors.primary}; + color: ${props => props.theme.colors.secondary}; border: none; &:hover { @@ -29,7 +29,7 @@ const Primary = styled(DefaultButton)` } &:disabled { - background-color: ${(props: PropsWithTheme<>) => props.theme.colors.buttonBorderColor}; + background-color: ${props => props.theme.colors.buttonBorderColor}; cursor: not-allowed; opacity: 0.8; } @@ -37,20 +37,20 @@ const Primary = styled(DefaultButton)` const Secondary = styled(DefaultButton)` background-color: transparent; - color: ${(props: PropsWithTheme<>) => props.theme.colors.secondary}; - border: 2px solid ${(props: PropsWithTheme<>) => props.theme.colors.buttonBorderColor}; + color: ${props => props.theme.colors.secondary}; + border: 2px solid ${props => props.theme.colors.buttonBorderColor}; &:hover { - border-color: ${(props: PropsWithTheme<>) => props.theme.colors.primary}; + border-color: ${props => props.theme.colors.primary}; } &:disabled { background-color: Transparent; cursor: not-allowed; - color: ${(props: PropsWithTheme<>) => props.theme.colors.buttonBorderColor}; + color: ${props => props.theme.colors.buttonBorderColor}; &:hover { - border-color: ${(props: PropsWithTheme<>) => props.theme.colors.buttonBorderColor}; + border-color: ${props => props.theme.colors.buttonBorderColor}; } } `; diff --git a/app/components/confirm-dialog.js b/app/components/confirm-dialog.js index a982465..cea0baa 100644 --- a/app/components/confirm-dialog.js +++ b/app/components/confirm-dialog.js @@ -12,8 +12,8 @@ import CloseIcon from '../assets/images/close_icon.svg'; const Wrapper = styled.div` display: flex; - width: ${(props: PropsWithTheme<{ width: number }>) => `${props.width}px`}; - background-color: ${(props: PropsWithTheme<>) => props.theme.colors.background}; + width: ${(props: PropsWithTheme<{ width: number }>) => `${String(props.width)}px`}; + background-color: ${props => props.theme.colors.background}; flex-direction: column; align-items: center; border-radius: 6px; diff --git a/app/components/dropdown.js b/app/components/dropdown.js index c541aa0..2621cd4 100644 --- a/app/components/dropdown.js +++ b/app/components/dropdown.js @@ -14,10 +14,10 @@ import { truncateAddress } from '../utils/truncate-address'; /* eslint-disable max-len */ const MenuWrapper = styled.div` - background-image: ${(props: PropsWithTheme<>) => `linear-gradient(to right, ${darken(0.05, props.theme.colors.activeItem)}, ${ + background-image: ${props => `linear-gradient(to right, ${darken(0.05, props.theme.colors.activeItem)}, ${ props.theme.colors.activeItem })`}; - border-radius: ${(props: PropsWithTheme<>) => props.theme.boxBorderRadius}; + border-radius: ${props => props.theme.boxBorderRadius}; margin-left: -10px; max-width: 400px; overflow: hidden; @@ -28,7 +28,7 @@ const MenuItem = styled.button` background-color: transparent; border: none; border-bottom-style: solid; - border-bottom-color: ${(props: PropsWithTheme<>) => props.theme.colors.text}; + border-bottom-color: ${props => props.theme.colors.text}; border-bottom-width: 1px; padding: 15px; cursor: pointer; @@ -68,7 +68,7 @@ const Option = styled(TextComponent)` const PopoverWithStyle = styled(Popover)` & > .Popover-tip { - fill: ${(props: PropsWithTheme<>) => props.theme.colors.activeItem}; + fill: ${props => props.theme.colors.activeItem}; } `; diff --git a/app/components/error-modal.js b/app/components/error-modal.js index c6b35a0..a6a1678 100644 --- a/app/components/error-modal.js +++ b/app/components/error-modal.js @@ -23,7 +23,7 @@ const ModalWrapper = styled.div` const ChildrenWrapper = styled.div` width: 350px; - background-color: ${(props: PropsWithTheme<>) => props.theme.colors.background}; + background-color: ${props => props.theme.colors.background}; display: flex; flex-direction: column; align-items: center; diff --git a/app/components/header.js b/app/components/header.js index aecc4a7..6c67477 100644 --- a/app/components/header.js +++ b/app/components/header.js @@ -12,34 +12,34 @@ import { StatusPill } from './status-pill'; import { withSyncStatus } from '../../services/sync-status'; const Wrapper = styled.div` - height: ${(props: PropsWithTheme<>) => props.theme.headerHeight}; + height: ${props => props.theme.headerHeight}; width: 100vw; display: flex; flex-direction: row; - background-color: ${(props: PropsWithTheme<>) => props.theme.colors.background}; + background-color: ${props => props.theme.colors.background}; `; const LogoWrapper = styled.div` - height: ${(props: PropsWithTheme<>) => props.theme.headerHeight}; - width: ${(props: PropsWithTheme<>) => props.theme.sidebarWidth}; + height: ${props => props.theme.headerHeight}; + width: ${props => props.theme.sidebarWidth}; background-image: linear-gradient( to right, - ${(props: PropsWithTheme<>) => props.theme.colors.sidebarLogoGradientBegin}, - ${(props: PropsWithTheme<>) => props.theme.colors.sidebarLogoGradientEnd} + ${props => props.theme.colors.sidebarLogoGradientBegin}, + ${props => props.theme.colors.sidebarLogoGradientEnd} ); margin-bottom: 20px; `; const TitleWrapper = styled.div` - width: ${(props: PropsWithTheme<>) => `calc(100% - ${props.theme.sidebarWidth})`}; - height: ${(props: PropsWithTheme<>) => props.theme.headerHeight}; + width: ${props => `calc(100% - ${props.theme.sidebarWidth})`}; + height: ${props => props.theme.headerHeight}; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; padding-top: 10px; - padding-left: ${(props: PropsWithTheme<>) => props.theme.layoutPaddingLeft}; - padding-right: ${(props: PropsWithTheme<>) => props.theme.layoutPaddingRight}; + padding-left: ${props => props.theme.layoutPaddingLeft}; + padding-right: ${props => props.theme.layoutPaddingRight}; `; const TitleRow = styled(RowComponent)` @@ -49,12 +49,12 @@ const TitleRow = styled(RowComponent)` `; const Title = styled(TextComponent)` - font-size: ${(props: PropsWithTheme<>) => `${props.theme.fontSize.large}em`}; + font-size: ${props => `${props.theme.fontSize.large}em`}; margin-top: 10px; margin-bottom: 10px; text-transform: capitalize; letter-spacing: 0.25px; - font-weight: ${(props: PropsWithTheme<>) => String(props.theme.fontWeight.bold)}; + font-weight: ${props => String(props.theme.fontWeight.bold)}; `; type Props = { diff --git a/app/components/layout.js b/app/components/layout.js index d53487b..39cf658 100644 --- a/app/components/layout.js +++ b/app/components/layout.js @@ -8,11 +8,11 @@ import { ErrorModalComponent } from './error-modal'; const Layout = styled.div` display: flex; flex-direction: column; - width: ${(props: PropsWithTheme<>) => `calc(100% - ${props.theme.sidebarWidth})`}; - height: ${(props: PropsWithTheme<>) => `calc(100vh - ${props.theme.headerHeight})`}; - background-color: ${(props: PropsWithTheme<>) => props.theme.colors.background}; - padding-left: ${(props: PropsWithTheme<>) => props.theme.layoutPaddingLeft}; - padding-right: ${(props: PropsWithTheme<>) => props.theme.layoutPaddingRight}; + width: ${props => `calc(100% - ${props.theme.sidebarWidth})`}; + height: ${props => `calc(100vh - ${props.theme.headerHeight})`}; + background-color: ${props => props.theme.colors.background}; + padding-left: ${props => props.theme.layoutPaddingLeft}; + padding-right: ${props => props.theme.layoutPaddingRight}; overflow: auto; `; diff --git a/app/components/loading-screen.js b/app/components/loading-screen.js index 007ac16..dc551ce 100644 --- a/app/components/loading-screen.js +++ b/app/components/loading-screen.js @@ -20,7 +20,7 @@ const Wrapper = styled.div` flex-direction: column; align-items: center; justify-content: center; - background-color: ${(props: PropsWithTheme<>) => props.theme.colors.cardBackgroundColor}; + background-color: ${props => props.theme.colors.cardBackgroundColor}; `; const CircleWrapper = styled.div` diff --git a/app/components/select.js b/app/components/select.js index 57b7c4d..38a7836 100644 --- a/app/components/select.js +++ b/app/components/select.js @@ -31,7 +31,9 @@ const SelectWrapper = styled.div` position: relative; ${(props: SelectWrapperProps) => (props.isOpen - ? `border-${props.placement}-left-radius: 0; border-${props.placement}-right-radius: 0;` + ? `border-${String(props.placement)}-left-radius: 0; border-${String( + props.placement, + )}-right-radius: 0;` : '')} `; /* eslint-enable max-len */ @@ -52,7 +54,7 @@ const SelectMenuButtonWrapper = styled.div` width: 50px; height: 100%; padding: 13px; - border-left: ${(props: PropsWithTheme<>) => `1px solid ${props.theme.colors.background}`}; + border-left: ${props => `1px solid ${props.theme.colors.background}`}; `; /* eslint-disable max-len */ @@ -75,7 +77,7 @@ const OptionsWrapper = styled.div` flex-direction: column; position: absolute; width: 100%; - ${(props: PropsWithTheme<{ placement: string, optionsAmount: number }>) => `${props.placement}: ${`-${props.optionsAmount * 40}px`}`}; + ${(props: PropsWithTheme<{ placement: string, optionsAmount: number }>) => `${String(props.placement)}: ${`-${String((props.optionsAmount || 0) * 40)}px`}`}; overflow-y: auto; `; @@ -91,7 +93,7 @@ const Option = styled.button` border-bottom: 1px solid #4e4b4b; &:hover { - background-color: ${(props: PropsWithTheme<>) => props.theme.colors.background}; + background-color: ${props => props.theme.colors.background}; } &:last-child { diff --git a/app/components/sidebar.js b/app/components/sidebar.js index db2b44c..10f29cf 100644 --- a/app/components/sidebar.js +++ b/app/components/sidebar.js @@ -9,10 +9,10 @@ import { MENU_OPTIONS } from '../constants/sidebar'; const Wrapper = styled.div` display: flex; flex-direction: column; - width: ${(props: PropsWithTheme<>) => props.theme.sidebarWidth}; - height: ${(props: PropsWithTheme<>) => `calc(100vh - ${props.theme.headerHeight})`}; - font-family: ${(props: PropsWithTheme<>) => props.theme.fontFamily}; - background-color: ${(props: PropsWithTheme<>) => props.theme.colors.sidebarBg}; + width: ${props => props.theme.sidebarWidth}; + height: ${props => `calc(100vh - ${props.theme.headerHeight})`}; + font-family: ${props => props.theme.fontFamily}; + background-color: ${props => props.theme.colors.sidebarBg}; padding-top: 15px; position: relative; `; diff --git a/app/components/status-pill.js b/app/components/status-pill.js index 528a7ce..e888a61 100644 --- a/app/components/status-pill.js +++ b/app/components/status-pill.js @@ -40,8 +40,8 @@ const Icon = styled.img` `; const StatusPillLabel = styled(TextComponent)` - color: ${(props: PropsWithTheme<>) => props.theme.colors.statusPillLabel}; - font-weight: ${(props: PropsWithTheme<>) => String(props.theme.fontWeight.bold)}; + color: ${props => props.theme.colors.statusPillLabel}; + font-weight: ${props => String(props.theme.fontWeight.bold)}; text-transform: uppercase; font-size: 10px; padding-top: 1px; diff --git a/app/components/transaction-daily.js b/app/components/transaction-daily.js index 57ac3f4..1433134 100644 --- a/app/components/transaction-daily.js +++ b/app/components/transaction-daily.js @@ -12,9 +12,9 @@ const Wrapper = styled.div` `; const TransactionsWrapper = styled.div` - border-radius: ${(props: PropsWithTheme<>) => props.theme.boxBorderRadius}; + border-radius: ${props => props.theme.boxBorderRadius}; overflow: hidden; - background-color: ${(props: PropsWithTheme<>) => props.theme.colors.cardBackgroundColor}; + background-color: ${props => props.theme.colors.cardBackgroundColor}; padding: 0; margin: 0; box-sizing: border-box; @@ -23,9 +23,9 @@ const TransactionsWrapper = styled.div` const Day = styled(TextComponent)` text-transform: uppercase; - color: ${(props: PropsWithTheme<>) => props.theme.colors.transactionsDate}; - font-size: ${(props: PropsWithTheme<>) => `${props.theme.fontSize.regular * 0.9}em`}; - font-weight: ${(props: PropsWithTheme<>) => String(props.theme.fontWeight.bold)}; + color: ${props => props.theme.colors.transactionsDate}; + font-size: ${props => `${props.theme.fontSize.regular * 0.9}em`}; + font-weight: ${props => String(props.theme.fontWeight.bold)}; margin-bottom: 5px; `; diff --git a/app/components/transaction-details.js b/app/components/transaction-details.js index 8a47b49..9f6fad9 100644 --- a/app/components/transaction-details.js +++ b/app/components/transaction-details.js @@ -23,7 +23,7 @@ import { openExternal } from '../utils/open-external'; const Wrapper = styled.div` width: 460px; - background-color: ${(props: PropsWithTheme<>) => props.theme.colors.background}; + background-color: ${props => props.theme.colors.background}; display: flex; flex-direction: column; align-items: center; @@ -91,8 +91,8 @@ const Divider = styled.div` `; const Label = styled(TextComponent)` - font-weight: ${(props: PropsWithTheme<>) => String(props.theme.fontWeight.bold)}; - color: ${(props: PropsWithTheme<>) => props.theme.colors.transactionsDetailsLabel}; + font-weight: ${props => String(props.theme.fontWeight.bold)}; + color: ${props => props.theme.colors.transactionsDetailsLabel}; margin-bottom: 5px; letter-spacing: 0.25px; `; @@ -106,7 +106,7 @@ const Ellipsis = styled(TextComponent)` const TransactionId = styled.button` width: 100%; - color: ${(props: PropsWithTheme<>) => props.theme.colors.text}; + color: ${props => props.theme.colors.text}; padding: 0; background: none; border: none; diff --git a/app/components/transaction-item.js b/app/components/transaction-item.js index df36389..8f946f4 100644 --- a/app/components/transaction-item.js +++ b/app/components/transaction-item.js @@ -19,7 +19,7 @@ import { formatNumber } from '../utils/format-number'; import { truncateAddress } from '../utils/truncate-address'; const Wrapper = styled(RowComponent)` - background-color: ${(props: PropsWithTheme<>) => props.theme.colors.cardBackgroundColor}; + background-color: ${props => props.theme.colors.cardBackgroundColor}; padding: 15px 17px; cursor: pointer; @@ -49,7 +49,7 @@ const TransactionAddress = styled(TextComponent)` `; const TransactionTime = styled(TextComponent)` - color: ${(props: PropsWithTheme<>) => props.theme.colors.inactiveItem}; + color: ${props => props.theme.colors.inactiveItem}; `; const TransactionColumn = styled(ColumnComponent)` diff --git a/app/components/wallet-address.js b/app/components/wallet-address.js index 2d9f4d7..5e23ae2 100644 --- a/app/components/wallet-address.js +++ b/app/components/wallet-address.js @@ -21,14 +21,14 @@ const AddressWrapper = styled.div` `; const Input = styled.input` - border-radius: ${(props: PropsWithTheme<>) => props.theme.boxBorderRadius}; + border-radius: ${props => props.theme.boxBorderRadius}; border: none; - background-color: ${(props: PropsWithTheme<>) => props.theme.colors.inputBackground}; - color: ${(props: PropsWithTheme<>) => props.theme.colors.text}; + background-color: ${props => props.theme.colors.inputBackground}; + color: ${props => props.theme.colors.text}; padding: 15px; width: 100%; outline: none; - font-family: ${(props: PropsWithTheme<>) => props.theme.fontFamily}; + font-family: ${props => props.theme.fontFamily}; ::placeholder { opacity: 0.5; diff --git a/app/components/wallet-summary.js b/app/components/wallet-summary.js index 43f31df..199bbac 100644 --- a/app/components/wallet-summary.js +++ b/app/components/wallet-summary.js @@ -13,17 +13,17 @@ import theme from '../theme'; const Wrapper = styled.div` display: flex; flex-direction: column; - background-color: ${(props: PropsWithTheme<>) => props.theme.colors.cardBackgroundColor}; - border-radius: ${(props: PropsWithTheme<>) => props.theme.boxBorderRadius}; + background-color: ${props => props.theme.colors.cardBackgroundColor}; + border-radius: ${props => props.theme.boxBorderRadius}; padding: 37px 45px; min-height: 250px; position: relative; - margin-top: ${(props: PropsWithTheme<>) => props.theme.layoutContentPaddingTop}; + margin-top: ${props => props.theme.layoutContentPaddingTop}; `; const AllAddresses = styled(TextComponent)` margin-bottom: 2.5px; - font-size: ${(props: PropsWithTheme<>) => `${props.theme.fontSize.small}em`}; + font-size: ${props => `${props.theme.fontSize.small}em`}; `; const ValueBox = styled.div` @@ -39,11 +39,11 @@ const Label = styled(TextComponent)` const USDValue = styled(TextComponent)` opacity: 0.5; - font-weight: ${(props: PropsWithTheme<>) => String(props.theme.fontWeight.light)}; + font-weight: ${props => String(props.theme.fontWeight.light)}; `; const ShieldedValue = styled(Label)` - color: ${(props: PropsWithTheme<>) => props.theme.colors.activeItem}; + color: ${props => props.theme.colors.activeItem}; `; type Props = { diff --git a/app/views/console.js b/app/views/console.js index f0da367..11e60a5 100644 --- a/app/views/console.js +++ b/app/views/console.js @@ -12,9 +12,9 @@ import ConsoleSymbol from '../assets/images/console_zcash.png'; const Wrapper = styled.div` max-height: 100%; overflow-y: auto; - background-color: ${(props: PropsWithTheme<>) => props.theme.colors.cardBackgroundColor}; - margin-top: ${(props: PropsWithTheme<>) => props.theme.layoutContentPaddingTop}; - border-radius: ${(props: PropsWithTheme<>) => props.theme.boxBorderRadius}; + background-color: ${props => props.theme.colors.cardBackgroundColor}; + margin-top: ${props => props.theme.layoutContentPaddingTop}; + border-radius: ${props => props.theme.boxBorderRadius}; padding: 38px 33.5px; `; diff --git a/app/views/receive.js b/app/views/receive.js index 175cb23..3f98ab1 100644 --- a/app/views/receive.js +++ b/app/views/receive.js @@ -20,9 +20,9 @@ const Row = styled(RowComponent)` const Label = styled(InputLabelComponent)` text-transform: uppercase; - color: ${(props: PropsWithTheme<>) => props.theme.colors.transactionsDate}; - font-size: ${(props: PropsWithTheme<>) => `${props.theme.fontSize.regular * 0.9}em`}; - font-weight: ${(props: PropsWithTheme<>) => String(props.theme.fontWeight.bold)}; + color: ${props => props.theme.colors.transactionsDate}; + font-size: ${props => `${props.theme.fontSize.regular * 0.9}em`}; + font-weight: ${props => String(props.theme.fontWeight.bold)}; margin-bottom: 5px; `; @@ -31,7 +31,7 @@ const ActionButton = styled.button` border: none; cursor: pointer; width: 100%; - color: ${(props: PropsWithTheme<>) => props.theme.colors.text}; + color: ${props => props.theme.colors.text}; outline: none; display: flex; align-items: center; @@ -46,7 +46,7 @@ const ActionButton = styled.button` const ActionIcon = styled.img` width: 25px; height: 25px; - border: 1px solid ${(props: PropsWithTheme<>) => props.theme.colors.text}; + border: 1px solid ${props => props.theme.colors.text}; border-radius: 100%; margin-right: 11.5px; padding: 5px; diff --git a/app/views/send.js b/app/views/send.js index 8310691..f5c3299 100644 --- a/app/views/send.js +++ b/app/views/send.js @@ -49,7 +49,7 @@ const Loader = styled.img` `; const FormWrapper = styled.div` - margin-top: ${(props: PropsWithTheme<>) => props.theme.layoutContentPaddingTop}; + margin-top: ${props => props.theme.layoutContentPaddingTop}; width: 71%; `; @@ -69,7 +69,7 @@ const AmountWrapper = styled.div` &:before { content: 'ZEC'; - font-family: ${(props: PropsWithTheme<>) => props.theme.fontFamily}; + font-family: ${props => props.theme.fontFamily}; position: absolute; margin-top: 15px; margin-left: 15px; @@ -90,7 +90,7 @@ const ShowFeeButton = styled.button` border: none; cursor: pointer; width: 100%; - color: ${(props: PropsWithTheme<>) => props.theme.colors.text}; + color: ${props => props.theme.colors.text}; outline: none; display: flex; align-items: center; @@ -105,7 +105,7 @@ const ShowFeeButton = styled.button` const SeeMoreIcon = styled.img` width: 25px; height: 25px; - border: 1px solid ${(props: PropsWithTheme<>) => props.theme.colors.text}; + border: 1px solid ${props => props.theme.colors.text}; border-radius: 100%; margin-right: 11.5px; `; @@ -119,8 +119,8 @@ const FeeWrapper = styled.div` const InfoCard = styled.div` width: 100%; - background-color: ${(props: PropsWithTheme<>) => props.theme.colors.cardBackgroundColor}; - border-radius: ${(props: PropsWithTheme<>) => props.theme.boxBorderRadius}; + background-color: ${props => props.theme.colors.cardBackgroundColor}; + border-radius: ${props => props.theme.boxBorderRadius}; `; const InfoContent = styled.div` @@ -171,15 +171,15 @@ const ItemLabel = styled(TextComponent)` `; const SendZECValue = styled(TextComponent)` - color: ${(props: PropsWithTheme<>) => props.theme.colors.transactionSent}; - font-size: ${(props: PropsWithTheme<>) => `${props.theme.fontSize.large}em`}; - font-weight: ${(props: PropsWithTheme<>) => String(props.theme.fontWeight.bold)}; + color: ${props => props.theme.colors.transactionSent}; + font-size: ${props => `${props.theme.fontSize.large}em`}; + font-weight: ${props => String(props.theme.fontWeight.bold)}; `; const SendUSDValue = styled(TextComponent)` opacity: 0.5; - font-weight: ${(props: PropsWithTheme<>) => String(props.theme.fontWeight.light)}; - font-size: ${(props: PropsWithTheme<>) => `${props.theme.fontSize.medium}em`}; + font-weight: ${props => String(props.theme.fontWeight.light)}; + font-size: ${props => `${props.theme.fontSize.medium}em`}; `; const Icon = styled.img` diff --git a/app/views/settings.js b/app/views/settings.js index 0774911..d977e83 100644 --- a/app/views/settings.js +++ b/app/views/settings.js @@ -23,7 +23,7 @@ import rpc from '../../services/api'; const HOME_DIR = electron.remote.app.getPath('home'); const Wrapper = styled.div` - margin-top: ${(props: PropsWithTheme<>) => props.theme.layoutContentPaddingTop}; + margin-top: ${props => props.theme.layoutContentPaddingTop}; `; const ModalContent = styled.div` @@ -43,7 +43,7 @@ const Btn = styled(Button)` const ClipboardButton = styled(Clipboard)` width: 50px; - border-radius: ${(props: PropsWithTheme<>) => props.theme.boxBorderRadius}; + border-radius: ${props => props.theme.boxBorderRadius}; height: 45px; margin-left: 5px; `; @@ -56,9 +56,9 @@ const SettingsWrapper = styled.div` const SettingsTitle = styled(TextComponent)` text-transform: uppercase; - color: ${(props: PropsWithTheme<>) => props.theme.colors.transactionsDate}; - font-size: ${(props: PropsWithTheme<>) => `${props.theme.fontSize.regular * 0.9}em`}; - font-weight: ${(props: PropsWithTheme<>) => String(props.theme.fontWeight.bold)}; + color: ${props => props.theme.colors.transactionsDate}; + font-size: ${props => `${props.theme.fontSize.regular * 0.9}em`}; + font-weight: ${props => String(props.theme.fontWeight.bold)}; margin-bottom: 5px; `; diff --git a/flow-custom-typedefs/styled-components.js b/flow-custom-typedefs/styled-components.js new file mode 100644 index 0000000..6e977b9 --- /dev/null +++ b/flow-custom-typedefs/styled-components.js @@ -0,0 +1,422 @@ +// flow-typed signature: 8ae4cfa383fc58443d8d65b5301bf1c1 +// flow-typed version: 1a7d5ca288/styled-components_v4.x.x/flow_>=v0.75.x + +// @flow + +declare module 'styled-components' { + declare export type Interpolation = + | ((executionContext: PropsWithTheme) => string) + | CSSRules + | KeyFrames + | string + | number; + + declare export type CSSRules = Interpolation[]; + + // This is not exported on purpose, since it's an implementation detail + declare type TaggedTemplateLiteral = ( + strings: string[], + ...interpolations: Interpolation[] + ) => R; + + declare export type CSSConstructor = TaggedTemplateLiteral; + declare export type KeyFramesConstructor = TaggedTemplateLiteral; + declare export type CreateGlobalStyleConstructor = TaggedTemplateLiteral>; + + declare interface Tag { + styleTag: HTMLStyleElement | null; + getIds(): string[]; + hasNameForId(id: string, name: string): boolean; + insertMarker(id: string): T; + insertRules(id: string, cssRules: string[], name: ?string): void; + removeRules(id: string): void; + css(): string; + toHTML(additionalAttrs: ?string): string; + toElement(): React$Element<*>; + clone(): Tag; + sealed: boolean; + } + + // The `any`/weak types in here all come from `styled-components` directly, since those definitions were just copied over + declare export class StyleSheet { + static get master(): StyleSheet; + static get instance(): StyleSheet; + static reset(forceServer?: boolean): void; + + id: number; + forceServer: boolean; + target: ?HTMLElement; + tagMap: { [string]: Tag }; // eslint-disable-line flowtype/no-weak-types + deferred: { [string]: string[] | void }; + rehydratedNames: { [string]: boolean }; + ignoreRehydratedNames: { [string]: boolean }; + tags: Tag[]; // eslint-disable-line flowtype/no-weak-types + importRuleTag: Tag; // eslint-disable-line flowtype/no-weak-types + capacity: number; + clones: StyleSheet[]; + + constructor(?HTMLElement): this; + rehydrate(): this; + clone(): StyleSheet; + sealAllTags(): void; + makeTag(tag: ?Tag): Tag; // eslint-disable-line flowtype/no-weak-types + getImportRuleTag(): Tag; // eslint-disable-line flowtype/no-weak-types + getTagForId(id: string): Tag; // eslint-disable-line flowtype/no-weak-types + hasId(id: string): boolean; + hasNameForId(id: string, name: string): boolean; + deferredInject(id: string, cssRules: string[]): void; + inject(id: string, cssRules: string[], name?: string): void; + remove(id: string): void; + toHtml(): string; + toReactElements(): React$ElementType[]; + } + + declare export class KeyFrames { + id: string; + name: string; + rules: string[]; + + constructor(name: string, rules: string[]): this; + inject(StyleSheet): void; + toString(): string; + getName(): string; + } + + // I think any is appropriate here? + // eslint-disable-next-line flowtype/no-weak-types + declare export type Theme = { +[string]: any }; + + declare export var css: CSSConstructor; + declare export var keyframes: KeyFramesConstructor; + declare export var createGlobalStyle: CreateGlobalStyleConstructor; + declare export var ThemeProvider: React$ComponentType<{ + children?: ?React$Node, + theme: Theme | (Theme => Theme), + }>; + + // This is a bit hard to read. Not sure how to make it more readable. I think adding line-breaks makes it worse. + declare type InjectedProps = { theme: Theme | void }; + declare export function withTheme>( + WrappedComponent: Component, + ): React$ComponentType<$Diff>, InjectedProps>>; + + // @HACK This is a cheat to hide that the underlying type is "just a string" + // once we know of a better way, we should be able to update this accordingly. + // I don't think there _is_ a good way, currently. + // @NOTE Also not too sure about the naming of this... + declare export type StyledElementType = T; + declare export type StyledComponentType = { + [[call]]: TaggedTemplateLiteral, + +attrs: ( + attributes: A | ((props: React$ElementConfig) => A), + ) => TaggedTemplateLiteral, A>>>, + }; + + declare type StyledComponentList = { + a: StyledComponentType>, + abbr: StyledComponentType>, + address: StyledComponentType>, + area: StyledComponentType>, + article: StyledComponentType>, + aside: StyledComponentType>, + audio: StyledComponentType>, + b: StyledComponentType>, + base: StyledComponentType>, + bdi: StyledComponentType>, + bdo: StyledComponentType>, + big: StyledComponentType>, + blockquote: StyledComponentType>, + body: StyledComponentType>, + br: StyledComponentType>, + button: StyledComponentType>, + canvas: StyledComponentType>, + caption: StyledComponentType>, + cite: StyledComponentType>, + code: StyledComponentType>, + col: StyledComponentType>, + colgroup: StyledComponentType>, + data: StyledComponentType>, + datalist: StyledComponentType>, + dd: StyledComponentType>, + del: StyledComponentType>, + details: StyledComponentType>, + dfn: StyledComponentType>, + dialog: StyledComponentType>, + div: StyledComponentType>, + dl: StyledComponentType>, + dt: StyledComponentType>, + em: StyledComponentType>, + embed: StyledComponentType>, + fieldset: StyledComponentType>, + figcaption: StyledComponentType>, + figure: StyledComponentType>, + footer: StyledComponentType>, + form: StyledComponentType>, + h1: StyledComponentType>, + h2: StyledComponentType>, + h3: StyledComponentType>, + h4: StyledComponentType>, + h5: StyledComponentType>, + h6: StyledComponentType>, + head: StyledComponentType>, + header: StyledComponentType>, + hgroup: StyledComponentType>, + hr: StyledComponentType>, + html: StyledComponentType>, + i: StyledComponentType>, + iframe: StyledComponentType>, + img: StyledComponentType>, + input: StyledComponentType>, + ins: StyledComponentType>, + kbd: StyledComponentType>, + keygen: StyledComponentType>, + label: StyledComponentType>, + legend: StyledComponentType>, + li: StyledComponentType>, + link: StyledComponentType>, + main: StyledComponentType>, + map: StyledComponentType>, + mark: StyledComponentType>, + menu: StyledComponentType>, + menuitem: StyledComponentType>, + meta: StyledComponentType>, + meter: StyledComponentType>, + nav: StyledComponentType>, + noscript: StyledComponentType>, + object: StyledComponentType>, + ol: StyledComponentType>, + optgroup: StyledComponentType>, + option: StyledComponentType>, + output: StyledComponentType>, + p: StyledComponentType>, + param: StyledComponentType>, + picture: StyledComponentType>, + pre: StyledComponentType>, + progress: StyledComponentType>, + q: StyledComponentType>, + rp: StyledComponentType>, + rt: StyledComponentType>, + ruby: StyledComponentType>, + s: StyledComponentType>, + samp: StyledComponentType>, + script: StyledComponentType>, + section: StyledComponentType>, + select: StyledComponentType>, + small: StyledComponentType>, + source: StyledComponentType>, + span: StyledComponentType>, + strong: StyledComponentType>, + style: StyledComponentType>, + sub: StyledComponentType>, + summary: StyledComponentType>, + sup: StyledComponentType>, + table: StyledComponentType>, + tbody: StyledComponentType>, + td: StyledComponentType>, + textarea: StyledComponentType>, + tfoot: StyledComponentType>, + th: StyledComponentType>, + thead: StyledComponentType>, + time: StyledComponentType>, + title: StyledComponentType>, + tr: StyledComponentType>, + track: StyledComponentType>, + u: StyledComponentType>, + ul: StyledComponentType>, + var: StyledComponentType>, + video: StyledComponentType>, + wbr: StyledComponentType>, + + // SVG + circle: StyledComponentType>, + clipPath: StyledComponentType>, + defs: StyledComponentType>, + ellipse: StyledComponentType>, + g: StyledComponentType>, + image: StyledComponentType>, + line: StyledComponentType>, + linearGradient: StyledComponentType>, + mask: StyledComponentType>, + path: StyledComponentType>, + pattern: StyledComponentType>, + polygon: StyledComponentType>, + polyline: StyledComponentType>, + radialGradient: StyledComponentType>, + rect: StyledComponentType>, + stop: StyledComponentType>, + svg: StyledComponentType>, + text: StyledComponentType>, + tspan: StyledComponentType>, + }; + + declare export default StyledComponentList & { + [[call]]: (S) => $ElementType, + [[call]]: >(C) => StyledComponentType, + }; +} + +declare module 'styled-components/native' { + declare export type Interpolation = + | ((executionContext: P) => string) + | CSSRules + | KeyFrames + | string + | number; + + declare export type CSSRules = Interpolation[]; + + // This is not exported on purpose, since it's an implementation detail + declare type TaggedTemplateLiteral = ( + strings: string[], + ...interpolations: Interpolation[] + ) => R; + + declare export type CSSConstructor = TaggedTemplateLiteral; + declare export type KeyFramesConstructor = TaggedTemplateLiteral; + declare export type CreateGlobalStyleConstructor = TaggedTemplateLiteral>; + + declare interface Tag { + styleTag: HTMLStyleElement | null; + getIds(): string[]; + hasNameForId(id: string, name: string): boolean; + insertMarker(id: string): T; + insertRules(id: string, cssRules: string[], name: ?string): void; + removeRules(id: string): void; + css(): string; + toHTML(additionalAttrs: ?string): string; + toElement(): React$Element<*>; + clone(): Tag; + sealed: boolean; + } + + // The `any`/weak types in here all come from `styled-components` directly, since those definitions were just copied over + declare export class StyleSheet { + static get master(): StyleSheet; + static get instance(): StyleSheet; + static reset(forceServer?: boolean): void; + + id: number; + forceServer: boolean; + target: ?HTMLElement; + tagMap: { [string]: Tag }; // eslint-disable-line flowtype/no-weak-types + deferred: { [string]: string[] | void }; + rehydratedNames: { [string]: boolean }; + ignoreRehydratedNames: { [string]: boolean }; + tags: Tag[]; // eslint-disable-line flowtype/no-weak-types + importRuleTag: Tag; // eslint-disable-line flowtype/no-weak-types + capacity: number; + clones: StyleSheet[]; + + constructor(?HTMLElement): this; + rehydrate(): this; + clone(): StyleSheet; + sealAllTags(): void; + makeTag(tag: ?Tag): Tag; // eslint-disable-line flowtype/no-weak-types + getImportRuleTag(): Tag; // eslint-disable-line flowtype/no-weak-types + getTagForId(id: string): Tag; // eslint-disable-line flowtype/no-weak-types + hasId(id: string): boolean; + hasNameForId(id: string, name: string): boolean; + deferredInject(id: string, cssRules: string[]): void; + inject(id: string, cssRules: string[], name?: string): void; + remove(id: string): void; + toHtml(): string; + toReactElements(): React$ElementType[]; + } + + declare export class KeyFrames { + id: string; + name: string; + rules: string[]; + + constructor(name: string, rules: string[]): this; + inject(StyleSheet): void; + toString(): string; + getName(): string; + } + + // I think any is appropriate here? + // eslint-disable-next-line flowtype/no-weak-types + declare export type Theme = { +[string]: any }; + + declare export var css: CSSConstructor; + declare export var keyframes: KeyFramesConstructor; + declare export var createGlobalStyle: CreateGlobalStyleConstructor; + declare export var ThemeProvider: React$ComponentType<{ + children?: ?React$Node, + theme: Theme | (Theme => Theme), + }>; + + // This is a bit hard to read. Not sure how to make it more readable. I think adding line-breaks makes it worse. + declare type InjectedProps = { theme: Theme | void }; + declare export function withTheme>( + WrappedComponent: Component, + ): React$ComponentType<$Diff>, InjectedProps>>; + + // @HACK This is a cheat to hide that the underlying type is "just a string" + // once we know of a better way, we should be able to update this accordingly. + // I don't think there _is_ a good way, currently. + // @NOTE Also not too sure about the naming of this... + declare export type StyledElementType = T; + declare export type StyledComponentType = { + [[call]]: TaggedTemplateLiteral, + +attrs: ( + attributes: A, + ) => TaggedTemplateLiteral, A>>>, + }; + + declare type StyledComponentList = { + ActivityIndicator: StyledComponentType>, + ActivityIndicatorIOS: StyledComponentType>, + ART: StyledComponentType>, + Button: StyledComponentType>, + DatePickerIOS: StyledComponentType>, + DrawerLayoutAndroid: StyledComponentType>, + Image: StyledComponentType>, + ImageBackground: StyledComponentType>, + ImageEditor: StyledComponentType>, + ImageStore: StyledComponentType>, + KeyboardAvoidingView: StyledComponentType>, + ListView: StyledComponentType>, + MapView: StyledComponentType>, + Modal: StyledComponentType>, + NavigatorIOS: StyledComponentType>, + Picker: StyledComponentType>, + PickerIOS: StyledComponentType>, + ProgressBarAndroid: StyledComponentType>, + ProgressViewIOS: StyledComponentType>, + ScrollView: StyledComponentType>, + SegmentedControlIOS: StyledComponentType>, + Slider: StyledComponentType>, + SliderIOS: StyledComponentType>, + SnapshotViewIOS: StyledComponentType>, + Switch: StyledComponentType>, + RecyclerViewBackedScrollView: StyledComponentType>, + RefreshControl: StyledComponentType>, + SafeAreaView: StyledComponentType>, + StatusBar: StyledComponentType>, + SwipeableListView: StyledComponentType>, + SwitchAndroid: StyledComponentType>, + SwitchIOS: StyledComponentType>, + TabBarIOS: StyledComponentType>, + Text: StyledComponentType>, + TextInput: StyledComponentType>, + ToastAndroid: StyledComponentType>, + ToolbarAndroid: StyledComponentType>, + Touchable: StyledComponentType>, + TouchableHighlight: StyledComponentType>, + TouchableNativeFeedback: StyledComponentType>, + TouchableOpacity: StyledComponentType>, + TouchableWithoutFeedback: StyledComponentType>, + View: StyledComponentType>, + ViewPagerAndroid: StyledComponentType>, + WebView: StyledComponentType>, + FlatList: StyledComponentType>, + SectionList: StyledComponentType>, + VirtualizedList: StyledComponentType>, + }; + + declare export default StyledComponentList & { + [[call]]: (S) => $ElementType, + [[call]]: >(C) => StyledComponentType, + }; +} diff --git a/flow-custom-typedefs/theme.js b/flow-custom-typedefs/theme.js index 54d7457..94bc9b0 100644 --- a/flow-custom-typedefs/theme.js +++ b/flow-custom-typedefs/theme.js @@ -55,8 +55,7 @@ type AppTheme = { }; // =( -declare type PropsWithTheme = - | Object - | ({ - theme: AppTheme, - } & (T | Object)); +declare type PropsWithTheme = { + ...T, + theme: AppTheme, +}; diff --git a/public/flow-coverage-badge.svg b/public/flow-coverage-badge.svg index c477cc6..cb8221e 100644 --- a/public/flow-coverage-badge.svg +++ b/public/flow-coverage-badge.svg @@ -1 +1 @@ -flow-coverageflow-coverage94%94% \ No newline at end of file +flow-coverageflow-coverage90%90% \ No newline at end of file