chore: upgrade types

package.json

@@ -50,15 +50,15 @@
     "@reach/observe-rect": "^1.0.3",
     "clean-tag": "^2.0.2",
     "html-tags": "^2.0.0",
-    "immutable": "^3.7.4",
+    "immutable": "3.7.4",
     "moment": "^2.24.0",
     "polished": "^2.3.3",
     "prop-types": "^15.6.2",
     "ramda": "^0.26.1",
-    "rc-calendar": "^9.7.11",
+    "rc-calendar": "9.7.11",
     "rc-editor-mention": "1.1.7",
-    "rc-time-picker": "^3.4.0",
-    "react-dropzone": "^7.0.1",
+    "rc-time-picker": "3.4.0",
+    "react-dropzone": "7.0.1",
     "react-html-attributes": "^1.4.3",
     "react-intl-tel-input": "^6.1.0",
     "react-select": "^2.3.0",
@@ -84,10 +84,10 @@
     "@babel/preset-typescript": "^7.1.0",
     "@types/jest": "^23.3.13",
     "@types/ramda": "^0.25.47",
-    "@types/react": "16.7.13",
+    "@types/react": "16.7.20",
     "@types/react-dom": "^16.0.11",
     "@types/react-select": "^2.0.11",
-    "@types/styled-components": "4.0.3",
+    "@types/styled-components": "4.1.6",
     "@types/styled-system": "^3.1.3",
     "babel-core": "^7.0.0-0",
     "babel-eslint": "^10.0.1",
@@ -120,8 +120,8 @@
     "lint-staged": "^8.1.0",
     "prettier": "^1.16.1",
     "prettier-package-json": "^2.0.1",
-    "react": "^16.8.0-alpha.0",
-    "react-dom": "^16.8.0-alpha.0",
+    "react": "^16.8.0-alpha.1",
+    "react-dom": "^16.8.0-alpha.1",
     "react-icons": "^3.3.0",
     "react-testing-library": "^5.4.4",
     "rollup": "^1.1.2",
@@ -136,7 +136,7 @@
     "tslint": "^5.12.1",
     "tslint-config-prettier": "^1.17.0",
     "tslint-plugin-prettier": "^2.0.1",
-    "typescript": "3.1.6",
+    "typescript": "3.2.4",
     "typescript-eslint-parser": "22.0.0"
   },
   "husky": {

src/Alert/Alert.tsx

@@ -13,8 +13,10 @@ interface IAlertProps {
   onClosed?: () => void;
 }
 
+const defaultType: string = 'info';
+
 const Alert: FunctionComponent<IAlertProps> = ({
-  type = 'info',
+  type = defaultType as Types,
   closable = false,
   ...props
 }) => {

src/Alert/BaseAlert.tsx

@@ -1,10 +1,10 @@
 import React, { FunctionComponent, ReactNode } from 'react';
+import styled from 'styled-components';
 import { MdClose } from 'react-icons/md';
 import { SpaceProps, space } from 'styled-system';
 import { omit } from 'ramda';
 import { rgba } from 'polished';
 
-import styled from 'utils/styled-components';
 import tag from 'utils/CleanTag';
 
 import Box from '../Grid/Box';
@@ -16,7 +16,7 @@ export type IAlertTypes = SpaceProps & {
   type: Types;
 };
 
-const StyledAlert = styled<IAlertTypes, 'div'>(tag.div)`
+const StyledAlert = styled(tag.div)<IAlertTypes>`
   display: flex;
   align-items: center;
   margin-bottom: ${p => p.theme.space[3]};

src/Backdrop/Backdrop.tsx

@@ -1,8 +1,7 @@
 import React, { FunctionComponent } from 'react';
+import styled from 'styled-components';
 import { Transition, animated, config } from 'react-spring';
 
-import styled from 'utils/styled-components';
-
 const StyledBackdrop = styled.div`
   position: fixed;
   z-index: -1;

src/Button/Button.tsx

@@ -1,7 +1,7 @@
 import React, { FunctionComponent, MouseEvent, useRef } from 'react';
+import styled, { css, keyframes } from 'styled-components';
 import { SpaceProps, space as styledSpace } from 'styled-system';
 
-import styled, { css, keyframes } from 'utils/styled-components';
 import tag from 'utils/CleanTag';
 
 import Icon, { IconType, IconWrapper } from '../Icon';
@@ -219,7 +219,7 @@ type StyledButtonProps = IGetTypesStylesInterface &
   IRoundedInterface &
   SpaceProps;
 
-export const StyledButton = styled<StyledButtonProps, 'button'>(tag.button)`
+export const StyledButton = styled(tag.button)<StyledButtonProps>`
   display: inline-flex;
   position: relative;
   align-items: center;
@@ -275,7 +275,7 @@ export type ButtonProps = SpaceProps & {
   outlined?: boolean;
   loading?: boolean;
   disabled?: boolean;
-  icon?: string | IconType;
+  icon?: IconType;
   size?: ButtonSize;
   onClick?: (event: MouseEvent) => void;
 };

src/Button/Ripple.tsx

@@ -1,6 +1,6 @@
-import React, { MouseEvent, PureComponent } from 'react';
+import React, { PureComponent } from 'react';
+import styled, { css, keyframes } from 'styled-components';
 
-import styled, { css, keyframes } from 'utils/styled-components';
 import tag from 'utils/CleanTag';
 
 const rippleAnimation = keyframes`
@@ -10,7 +10,7 @@ const rippleAnimation = keyframes`
   }
 `;
 
-const StyledRipple = styled<{ rippling: boolean }, 'div'>(tag.div)`
+const StyledRipple = styled(tag.div)<{ rippling: boolean }>`
   position: absolute;
   border-radius: 50%;
   opacity: 1;
@@ -57,10 +57,7 @@ class Ripple extends PureComponent {
     });
   };
 
-  startRipple = (
-    { clientX, clientY }: MouseEvent,
-    buttonRef: HTMLButtonElement
-  ) => {
+  startRipple = ({ clientX, clientY }: any, buttonRef: HTMLButtonElement) => {
     const rippling = () => {
       this.rippling({ clientX, clientY }, buttonRef);
     };

src/Card/Card.tsx

@@ -1,4 +1,5 @@
 import React, { FunctionComponent } from 'react';
+import styled, { css } from 'styled-components';
 import {
   BorderColorProps,
   BorderRadiusProps,
@@ -14,7 +15,6 @@ import {
   width,
 } from 'styled-system';
 
-import styled, { css } from 'utils/styled-components';
 import tag from 'utils/CleanTag';
 
 import CardBlock from './CardBlock';
@@ -31,7 +31,7 @@ export type CardProps = SpaceProps &
     onClick?: (event: MouseEvent) => void;
   };
 
-const CardWrapper = styled<CardProps, any>(tag.div)`
+const CardWrapper = styled(tag.div)<CardProps>`
   display: flex;
   flex-direction: column;
   border: ${p => p.theme.borders.base};

src/Card/CardBlock.tsx

@@ -1,12 +1,12 @@
 import React, { FunctionComponent } from 'react';
+import styled from 'styled-components';
 import { HeightProps, SpaceProps, height, space } from 'styled-system';
 
-import styled from 'utils/styled-components';
 import tag from 'utils/CleanTag';
 
 export type BlockProps = SpaceProps & HeightProps;
 
-const StyledBlock = styled<BlockProps, 'div'>(tag.div)`
+const StyledBlock = styled(tag.div)<BlockProps>`
   position: relative;
   border-bottom: ${p => p.theme.borders.base};
   border-color: ${p => p.theme.colors.gray300};

src/Card/CardImage.tsx

@@ -1,12 +1,12 @@
 import React, { FunctionComponent } from 'react';
+import styled from 'styled-components';
 import { SpaceProps, space } from 'styled-system';
 
-import styled from 'utils/styled-components';
 import tag from 'utils/CleanTag';
 
 export type ImageProps = SpaceProps;
 
-export const StyledImage = styled<ImageProps, 'div'>(tag.div)`
+export const StyledImage = styled(tag.div)<ImageProps>`
   overflow: hidden;
 
   img {

src/Checkbox/Checkbox.tsx

@@ -1,6 +1,6 @@
 import React, { ChangeEvent, FunctionComponent, useContext } from 'react';
+import styled, { css } from 'styled-components';
 
-import styled, { css } from 'utils/styled-components';
 import tag from 'utils/CleanTag';
 
 import Space from '../Grid/Space';
@@ -74,7 +74,7 @@ interface IRadioLabelBaseProps {
   disabled: boolean;
 }
 
-const CheckboxLabelBase = styled<IRadioLabelBaseProps, 'label'>(tag.label)`
+const CheckboxLabelBase = styled(tag.label)<IRadioLabelBaseProps>`
   display: inline-flex;
   align-items: center;
   font-size: ${p => p.theme.fontSizes.base};

src/Checkbox/CheckboxGroup.tsx

@@ -1,12 +1,12 @@
 import React, { FunctionComponent, useState } from 'react';
+import styled from 'styled-components';
 
-import styled from 'utils/styled-components';
 import tag from 'utils/CleanTag';
 
 import Checkbox from './Checkbox';
 import CheckboxContext, { Direction } from './CheckboxContext';
 
-const CheckboxGroupFlex = styled<{ direction: Direction }, 'div'>(tag.div)`
+const CheckboxGroupFlex = styled(tag.div)<{ direction: Direction }>`
   display: ${p => (p.direction === 'horizontal' ? 'flex' : 'inline-flex')};
   flex-direction: ${p => (p.direction === 'horizontal' ? 'row' : 'column')};
 `;
@@ -44,7 +44,7 @@ const CheckboxGroup: FunctionComponent<ICheckboxGroupProps> = ({
   defaultValue,
   options = null,
   onChange,
-  direction = 'horizontal',
+  direction = 'horizontal' as Direction,
   children,
   ...otherProps
 }) => {

src/DatePicker/styles/Calendar.ts

@@ -1,5 +1,5 @@
 // stylelint-disable
-import { css } from 'utils/styled-components';
+import { css } from 'styled-components';
 
 import theme from '../../theme';
 

src/DatePicker/styles/DecadePanel.ts

@@ -1,4 +1,5 @@
-import { css } from 'utils/styled-components';
+// stylelint-disable
+import { css } from 'styled-components';
 
 import theme from '../../theme';
 

src/DatePicker/styles/MonthPanel.ts

@@ -1,4 +1,5 @@
-import { css } from 'utils/styled-components';
+// stylelint-disable
+import { css } from 'styled-components';
 
 import theme from '../../theme';
 

src/DatePicker/styles/Picker.ts

@@ -1,4 +1,4 @@
-import { css } from 'utils/styled-components';
+import { css } from 'styled-components';
 
 import { prefixClass } from './prefix';
 

src/DatePicker/styles/TimePanel.ts

@@ -1,4 +1,5 @@
-import { css } from 'utils/styled-components';
+// stylelint-disable
+import { css } from 'styled-components';
 
 import theme from '../../theme';
 

src/DatePicker/styles/YearPanel.ts

@@ -1,5 +1,5 @@
 // stylelint-disable
-import { css } from 'utils/styled-components';
+import { css } from 'styled-components';
 
 import theme from '../../theme';
 

src/DatePicker/styles/common/Calendar.ts

@@ -1,5 +1,5 @@
 // stylelint-disable
-import { css } from 'utils/styled-components';
+import { css } from 'styled-components';
 
 import theme from '../../../theme';
 import { prefixClass, timePickerClass } from '../prefix';

src/DatePicker/styles/common/Picker.ts

@@ -1,9 +1,10 @@
-import { css } from 'utils/styled-components';
+// stylelint-disable
+import { css } from 'styled-components';
 
 import { prefixClass } from '../prefix';
 
 export default css`
-  ${prefixClass /* sc-custom */}-picker {
+  ${prefixClass}-picker {
     position: absolute;
     z-index: 1000;
     top: -9999px;

src/DatePicker/styles/common/index.ts

@@ -1,5 +1,5 @@
 // stylelint-disable
-import { css } from 'utils/styled-components';
+import { css } from 'styled-components';
 
 import { prefixClass } from '../prefix';
 

src/DatePicker/styles/index.ts

@@ -1,4 +1,4 @@
-import { css } from 'utils/styled-components';
+import { css } from 'styled-components';
 
 import Calendar from './Calendar';
 import Common from './common';

src/DatePicker/styles/timepicker/index.ts

@@ -1,5 +1,5 @@
 // stylelint-disable
-import { css } from 'utils/styled-components';
+import { css } from 'styled-components';
 
 import theme from '../../../theme';
 import { timePickerClass } from '../prefix';

src/Divider/Divider.tsx

@@ -28,7 +28,7 @@ const StyledInnerText = styled(tag.span)`
   padding: 0 ${p => p.theme.space[3]};
 `;
 
-const StyledDivider = styled<IStyledDividerProps>(tag.div)`
+const StyledDivider = styled(tag.div)<IStyledDividerProps>`
   background-color: ${p => p.theme.colors.gray300};
 
   ${p => {

src/Drawer/Drawer.tsx

@@ -1,8 +1,8 @@
 import React, { FunctionComponent, ReactNode, useEffect } from 'react';
+import styled, { css } from 'styled-components';
 import { Transition, animated, config } from 'react-spring';
 
 import Portal from 'utils/Portal';
-import styled, { css } from 'utils/styled-components';
 import tag from 'utils/CleanTag';
 import useKeydown, { ESC_KEY_CODE } from 'utils/useKeydown';
 
@@ -16,7 +16,7 @@ interface IDrawerWrapperProps {
   placement: Placement;
 }
 
-const DrawerWrapper = styled<IDrawerWrapperProps, 'div'>(tag.div)`
+const DrawerWrapper = styled(tag.div)<IDrawerWrapperProps>`
   display: flex;
   position: absolute;
   z-index: 10000;
@@ -95,7 +95,7 @@ const Drawer: FunctionComponent<IDrawerProps> = ({
   visible,
   title,
   footer,
-  placement = 'right',
+  placement = 'right' as Placement,
   width = 400,
   height = 300,
   closable = true,
@@ -114,16 +114,13 @@ const Drawer: FunctionComponent<IDrawerProps> = ({
     onKeydown: onClose,
   });
 
-  useEffect(
-    () => {
-      document.body.style.overflow = visible ? 'hidden' : '';
+  useEffect(() => {
+    document.body.style.overflow = visible ? 'hidden' : '';
 
-      return () => {
-        document.body.style.overflow = '';
-      };
-    },
-    [visible]
-  );
+    return () => {
+      document.body.style.overflow = '';
+    };
+  }, [visible]);
 
   return (
     <Portal appendFor="drawer">