Tidy up typings a bit

now.json

@@ -5,15 +5,16 @@
     "node": "9.x.x"
   },
   "files": [
+    ".babelrc",
     ".storybook",
+    "rollup.config.js",
+    "scripts",
     "src",
     "stories",
+    "svgs",
     "tests",
-    ".babelrc",
     "tsconfig.base.json",
     "tsconfig.json",
-    "rollup.config.js",
-    "scripts",
-    "svgs"
+    "typings"
   ]
 }

package.json

@@ -14,17 +14,17 @@
   "scripts": {
     "storybook": "start-storybook -p 6006 -s ./dist",
     "build:icons": "node ./scripts/generateIcon.js",
-    "build-storybook": "npm run build && rimraf storybook-static && build-storybook -s ./dist",
-    "build": "rimraf dist && tsc -p tsconfig.base.json && rollup -c && rimraf compiled && npm run build:icons && npm run copy:fonts",
-    "build:watch": "chokidar 'src/**/*.ts' 'src/**/*.tsx' -c 'npm run build'",
-    "test:cover": "npm run test && codecov",
+    "build-storybook": "yarn build && rimraf storybook-static && build-storybook -s ./dist",
+    "build": "rimraf dist && tsc -p tsconfig.base.json && rollup -c && rimraf compiled && yarn build:icons && yarn copy:fonts",
+    "build:watch": "chokidar 'src/**/*.ts' 'src/**/*.tsx' -c 'yarn build'",
+    "test:cover": "yarn test && codecov",
     "test": "jest",
-    "prepublishOnly": "npm run test && npm run build",
+    "prepublishOnly": "yarn test && yarn build",
     "test:watch": "npm test -- --watchAll",
     "format": "pretty-quick",
-    "now-build": "npm run build-storybook",
+    "now-build": "yarn build-storybook",
     "now-start": "cd storybook-static && serve",
-    "deploy": "npm run now-build && cd storybook-static && now",
+    "deploy": "yarn now-build && cd storybook-static && now",
     "copy:fonts": "copy './dist/fonts/*.ttf' ./native/icons"
   },
   "lint-staged": {
@@ -34,8 +34,6 @@
     ]
   },
   "dependencies": {
-    "@types/react": "^16.4.18",
-    "@types/rheostat": "^2.1.3",
     "date-fns": "^1.29.0",
     "emotion": "^9.2.12",
     "is-in-browser": "^1.1.3",
@@ -51,7 +49,7 @@
     "utility-types": "^2.1.0"
   },
   "devDependencies": {
-    "@dump247/storybook-state": "^1.5.0",
+    "@dump247/storybook-state": "^1.5.1",
     "@storybook/addon-a11y": "^v4.0.0-alpha.12",
     "@storybook/addon-actions": "^v4.0.0-alpha.12",
     "@storybook/addon-backgrounds": "^v4.0.0-alpha.12",
@@ -66,10 +64,17 @@
     "@storybook/addons": "^v4.0.0-alpha.12",
     "@storybook/react": "^v4.0.0-alpha.12",
     "@types/enzyme": "^3.1.14",
+    "@types/enzyme-adapter-react-16": "^1.0.3",
     "@types/jest": "^23.3.5",
+    "@types/react": "^16.4.18",
     "@types/react-dom": "^16.0.9",
     "@types/react-test-renderer": "^16.0.3",
+    "@types/rheostat": "^2.1.3",
     "@types/sinon": "^5.0.5",
+    "@types/storybook__addon-a11y": "^3.3.1",
+    "@types/storybook__addon-actions": "^3.4.1",
+    "@types/storybook__addon-centered": "^3.3.1",
+    "@types/storybook__addon-knobs": "^3.4.1",
     "@types/storybook__react": "^3.0.9",
     "awesome-typescript-loader": "^5.2.1",
     "babel-core": "^6.26.3",
@@ -87,6 +92,7 @@
     "commitizen": "^3.0.2",
     "copy": "^0.3.2",
     "cz-conventional-changelog": "^2.1.0",
+    "emotion-theming": "^9.2.9",
     "enzyme": "^3.7.0",
     "enzyme-adapter-react-16": "^1.6.0",
     "enzyme-to-json": "^3.3.4",
@@ -99,9 +105,11 @@
     "jest-emotion": "^9.2.11",
     "just-entries": "^1.1.0",
     "lint-staged": "^7.3.0",
+    "lodash.throttle": "^4.1.1",
     "moment": "^2.22.2",
     "prettier": "^1.14.3",
     "pretty-quick": "^1.8.0",
+    "react-emotion": "^9.2.12",
     "react-native-vector-icons": "^6.0.2",
     "react-test-renderer": "^16.5.2",
     "rimraf": "^2.6.2",
@@ -118,7 +126,7 @@
     "sinon": "^7.0.0",
     "svgo": "^1.1.1",
     "ts-jest": "^23.10.4",
-    "typescript": "3.1.3",
+    "typescript": "3.1.4",
     "webfonts-generator": "^0.4.0",
     "webpack": "^4.21.0"
   },

src/components/Button.tsx

@@ -27,7 +27,7 @@ const Button: React.SFC<ButtonProps> = ({
 
   const filled = size !== "x-small";
   const _className = cx(
-    getButtonStyle(size, type, showShadow, filled),
+    getButtonStyle(size, type, !!showShadow, filled),
     className
   );
 

src/components/Calendar.tsx

@@ -1,7 +1,13 @@
 import * as React from "react";
-import RCalendar from "react-calendar/dist/entry.nostyle";
+import RCalendar, {
+  CalendarTileProperties
+} from "react-calendar/dist/entry.nostyle";
 import { css, cx } from "emotion";
-import { CalendarProps, CalendarState } from "./typings/Calendar";
+import {
+  CalendarProps,
+  CalendarState,
+  CalendarValue
+} from "./typings/Calendar";
 import {
   buttonsWrapper,
   dateStyle,
@@ -23,17 +29,20 @@ class Calendar extends React.PureComponent<CalendarProps, CalendarState> {
     value: this.props.selected
   };
 
-  private onChange = value => {
+  private onChange = (value: CalendarValue) => {
     const { range, onChange } = this.props;
     this.setState(
       {
         value
       },
-      () => (range ? value.length === 2 && onChange(value) : onChange(value))
+      () =>
+        range && Array.isArray(value)
+          ? value.length === 2 && onChange(value)
+          : onChange(value)
     );
   };
 
-  private getTileContent = ({ date }) => {
+  private getTileContent = ({ date }: CalendarTileProperties) => {
     const dot = this.props.tileDots.find(
       datum => !!datum.timeStamp && isSameDay(date, datum.timeStamp)
     );
@@ -52,7 +61,7 @@ class Calendar extends React.PureComponent<CalendarProps, CalendarState> {
     ) : null;
   };
 
-  private getDisabledDays = ({ date }) => {
+  private getDisabledDays = ({ date }: CalendarTileProperties) => {
     const { disabledDays } = this.props;
     return (
       (disabledDays &&

src/components/CheckboxGroup.tsx

@@ -6,7 +6,10 @@ import { getSelectedCheckboxes } from "./utils/getSelectedCheckboxes";
 export default class RadioGroup extends React.PureComponent<
   CheckboxGroupProps
 > {
-  private handleChange = ({ value }, event: React.MouseEvent) => {
+  private handleChange = (
+    { value }: { value: React.ReactText },
+    event: React.MouseEvent
+  ) => {
     const { onChange, selected } = this.props;
     onChange(getSelectedCheckboxes(value, selected), event);
   };

src/components/Controls.tsx

@@ -48,7 +48,7 @@ class Controls extends React.PureComponent<ControlsProps> {
     labelExtractor: item => item.label || item.name
   };
 
-  constructor(props) {
+  constructor(props: ControlsProps) {
     super(props);
 
     console.warn(

src/components/DateInput.tsx

@@ -28,8 +28,8 @@ class DateInput extends React.PureComponent<DateInputProps> {
         labelComponent={({ toggleDropdown }) => (
           <Input
             onChange={this.onChange}
-            type="date"
-            value={(value && format(value, "YYYY-MM-DD")) || ""}
+            type="text"
+            value={(value && format(value, "DD/MM/YYYY")) || ""}
             placeholder={this.props.placeholder}
             fixLabelAtTop
             inputProps={{
@@ -44,7 +44,7 @@ class DateInput extends React.PureComponent<DateInputProps> {
             hideShadow
             className={dateClass}
             selected={value ? new Date(value) : undefined}
-            onChange={date => {
+            onChange={(date: Date) => {
               this.onChange(date);
               toggle();
             }}

src/components/OptionGroupCheckBox.tsx

@@ -6,14 +6,14 @@ import { OptionGroupCheckBoxProps } from "./typings/OptionGroupCheckBox";
 import * as styles from "../components/styles/OptionGroupCheckBox.styles";
 
 const OptionGroupCheckBox: React.SFC<OptionGroupCheckBoxProps> = props => {
-  let { onApply, onClear, selected, onChange, ...rest } = props;
+  let { onApply, onClear, selected = [], onChange, ...rest } = props;
   return (
     <div className={styles.optionGroupCheckBoxWrap}>
       <OptionGroup
         {...rest}
         isSelected={value => !!selected && selected.indexOf(value) >= 0}
-        handleChange={({ value }) => {
-          onChange(getSelectedCheckboxes(value, selected), props);
+        handleChange={({ value }, event) => {
+          onChange(getSelectedCheckboxes(value, selected), { props, event });
         }}
         multiSelect
       />

src/components/OptionGroupRadio.tsx

@@ -10,8 +10,11 @@ const OptionGroupRadio: React.SFC<OptionGroupRadio> = props => {
       isSelected={value => {
         return selected === value;
       }}
-      handleChange={({ value, checked }) => {
-        onChange(checked ? value : undefined, props);
+      handleChange={({ value, checked }, event) => {
+        onChange(checked ? value : undefined, {
+          props,
+          event: event
+        });
       }}
     />
   );

src/components/PhoneNumberInput.tsx

@@ -14,7 +14,7 @@ import { colors } from "../theme";
 export default class PhoneNumberInput extends React.Component<
   PhoneNumberInputProps
 > {
-  onCountrySelect = countryCode => {
+  onCountrySelect = (countryCode: string | number) => {
     this.props.onChange({
       countryCode,
       phone: this.props.phone
@@ -57,7 +57,7 @@ export default class PhoneNumberInput extends React.Component<
         <Select
           placeholder=""
           onChange={this.onCountrySelect}
-          value={countryCode}
+          value={countryCode + ""}
           selected={countryCode}
           {...selectProps}
           className={cx(selectStyle, selectProps && selectProps.className)}

src/components/RadioGroup.tsx

@@ -3,7 +3,13 @@ import { RadioProps } from "./typings/Radio";
 import { RadioGroupProps } from "./typings/RadioGroup";
 
 export default class RadioGroup extends React.PureComponent<RadioGroupProps> {
-  private handleChange = ({ value, checked }, event: React.MouseEvent) => {
+  private handleChange = (
+    {
+      value,
+      checked
+    }: { value: RadioGroupProps["selected"]; checked: boolean },
+    event: React.MouseEvent
+  ) => {
     const { toggle, selected, onChange } = this.props;
     if (!toggle && value === selected) return;
     onChange(checked ? value : undefined, event);