fix(lodash): add types and fix errors

bmdalex · bmdalex · commit 3bf1f17dbde9 · 2018-11-08T18:41:48.000+01:00
diff --git a/build/gulp/plugins/gulp-example-menu.ts b/build/gulp/plugins/gulp-example-menu.ts
@@ -5,6 +5,7 @@ import * as through2 from 'through2'
 import * as Vinyl from 'vinyl'
 
 import { parseDocSection } from './util'
+import { ObjectOf } from 'types/utils'
 
 const SECTION_ORDER = {
   Types: 1,
@@ -22,7 +23,13 @@ const getSectionOrder = sectionName =>
 const pluginName = 'gulp-example-menu'
 
 export default () => {
-  const exampleFilesByDisplayName = {}
+  const exampleFilesByDisplayName: ObjectOf<
+    ObjectOf<{
+      sectionName: string
+      examples: ObjectOf<any>
+      order: number
+    }>
+  > = {}
 
   function bufferContents(file, enc, cb) {
     if (file.isNull()) {
diff --git a/build/gulp/plugins/util/parseDocSection.ts b/build/gulp/plugins/util/parseDocSection.ts
@@ -25,7 +25,7 @@ type Example = {
 const parseDocSection = buffer => {
   const ast = parseBuffer(buffer)
   const examples: Example[] = []
-  let sectionName
+  let sectionName: string
 
   traverse(ast, {
     JSXOpeningElement: path => {
diff --git a/docs/src/components/ComponentDoc/ComponentProp/ComponentPropExtra.tsx b/docs/src/components/ComponentDoc/ComponentProp/ComponentPropExtra.tsx
@@ -1,5 +1,12 @@
 import PropTypes from 'prop-types'
 import * as React from 'react'
+import { Extendable } from 'types/utils'
+
+export interface ComponentPropExtraProps {
+  children?: JSX.Element[]
+  title?: React.ReactNode
+  inline?: boolean
+}
 
 const descriptionStyle = {
   color: '#666',
@@ -16,7 +23,12 @@ const contentInlineStyle = {
   display: 'inline',
 }
 
-const ComponentPropExtra: any = ({ children, inline, title, ...rest }) => (
+const ComponentPropExtra = ({
+  children,
+  inline,
+  title,
+  ...rest
+}: Extendable<ComponentPropExtraProps>) => (
   <div {...rest} style={descriptionStyle}>
     <strong>{title}</strong>
     <div style={inline ? contentInlineStyle : contentBlockStyle}>{children}</div>
diff --git a/docs/src/components/ComponentDoc/ComponentProp/ComponentPropFunctionSignature.tsx b/docs/src/components/ComponentDoc/ComponentProp/ComponentPropFunctionSignature.tsx
@@ -3,7 +3,16 @@ import PropTypes from 'prop-types'
 import * as React from 'react'
 
 import { neverUpdate } from 'docs/src/hoc'
-import ComponentPropExtra from './ComponentPropExtra'
+import ComponentPropExtra, { ComponentPropExtraProps } from './ComponentPropExtra'
+
+interface ComponentPropFunctionSignature extends ComponentPropExtraProps {
+  name?: string
+  tags?: {
+    name?: string
+    description?: string
+    title?: string
+  }[]
+}
 
 const descriptionStyle = {
   flex: '5 5 0',
@@ -22,7 +31,7 @@ const rowStyle: any = {
 
 const getTagType = tag => (tag.type.type === 'AllLiteral' ? 'any' : tag.type.name)
 
-const ComponentPropFunctionSignature: any = ({ name, tags }) => {
+const ComponentPropFunctionSignature = ({ name, tags }: ComponentPropFunctionSignature) => {
   const params = _.filter(tags, { title: 'param' })
   const returns = _.find(tags, { title: 'returns' })
 
diff --git a/docs/src/components/Sidebar/Sidebar.tsx b/docs/src/components/Sidebar/Sidebar.tsx
@@ -13,13 +13,14 @@ import { themes } from '@stardust-ui/react'
 import { ThemeContext } from '../../context/theme-context'
 import { constants } from 'src/lib'
 
+type ComponentMenuItem = { displayName: string; type: string }
+
 const pkg = require('../../../../package.json')
-const componentMenu = require('docs/src/componentMenu')
-const behaviorMenu = require('docs/src/behaviorMenu')
+const componentMenu: ComponentMenuItem[] = require('docs/src/componentMenu')
+const behaviorMenu: ComponentMenuItem[] = require('docs/src/behaviorMenu')
 
 const selectedItemLabelStyle: any = { color: '#35bdb2', float: 'right' }
 const selectedItemLabel = <span style={selectedItemLabelStyle}>Press Enter</span>
-type ComponentMenuItem = { displayName: string; type: string }
 
 class Sidebar extends React.Component<any, any> {
   static propTypes = {
@@ -51,7 +52,7 @@ class Sidebar extends React.Component<any, any> {
     this._searchInput = (findDOMNode(this) as any).querySelector('.ui.input input')
   }
 
-  handleDocumentKeyDown = e => {
+  private handleDocumentKeyDown = e => {
     const code = keyboardKey.getCode(e)
     const isAZ = code >= 65 && code <= 90
     const hasModifier = e.altKey || e.ctrlKey || e.metaKey
@@ -60,20 +61,20 @@ class Sidebar extends React.Component<any, any> {
     if (!hasModifier && isAZ && bodyHasFocus) this._searchInput.focus()
   }
 
-  handleItemClick = () => {
+  private handleItemClick = () => {
     const { query } = this.state
 
     if (query) this.setState({ query: '' })
     if (document.activeElement === this._searchInput) this._searchInput.blur()
   }
 
-  handleSearchChange = e =>
+  private handleSearchChange = e =>
     this.setState({
       selectedItemIndex: 0,
       query: e.target.value,
     })
 
-  handleSearchKeyDown = e => {
+  private handleSearchKeyDown = e => {
     const { history } = this.props
     const { selectedItemIndex } = this.state
     const code = keyboardKey.getCode(e)
@@ -101,9 +102,9 @@ class Sidebar extends React.Component<any, any> {
     }
   }
 
-  menuItemsByType = _.map(nextType => {
+  private menuItemsByType = _.map(nextType => {
     const items = _.flow(
-      _.filter(({ type }) => type === nextType),
+      _.filter<ComponentMenuItem>(({ type }) => type === nextType),
       _.map(info => (
         <Menu.Item
           key={info.displayName}
@@ -124,7 +125,7 @@ class Sidebar extends React.Component<any, any> {
     )
   }, constants.typeOrder)
 
-  renderSearchItems = () => {
+  private renderSearchItems = () => {
     const { selectedItemIndex, query } = this.state
     if (!query) return undefined
 
diff --git a/docs/src/examples/components/Text/Types/TextSizesExample.shorthand.tsx b/docs/src/examples/components/Text/Types/TextSizesExample.shorthand.tsx
@@ -7,7 +7,7 @@ const TextSizesExampleShorthand = () => (
     render={({ siteVariables }) => {
       return _.map(siteVariables.fontSizes, (value, key) => (
         <div key={key}>
-          <Text size={key} content={`This is size="${key}" size font.`} />
+          <Text size={key as any} content={`This is size="${key}" size font.`} />
         </div>
       ))
     }}
diff --git a/docs/src/examples/components/Text/Types/TextSizesExample.tsx b/docs/src/examples/components/Text/Types/TextSizesExample.tsx
@@ -7,7 +7,7 @@ const TextSizesExample = () => (
     render={({ siteVariables }) => {
       return _.map(siteVariables.fontSizes, (value, key) => (
         <div key={key}>
-          <Text size={key}>This is size="{key}" size font.</Text>
+          <Text size={key as any}>This is size="{key}" size font.</Text>
         </div>
       ))
     }}
diff --git a/docs/src/prototypes/chatPane/services/dataMock.ts b/docs/src/prototypes/chatPane/services/dataMock.ts
@@ -58,7 +58,7 @@ class ChatMock {
       const timestamp = getTimestamp(date)
 
       const message: MessageData = {
-        id,
+        id: String(id),
         from,
         mine,
         date,
@@ -69,7 +69,7 @@ class ChatMock {
       }
 
       return message
-    }).sort((a, b) => a.date - b.date)
+    }).sort((a, b) => a.date.getMilliseconds() - b.date.getMilliseconds())
 
     this.chat = {
       id: random.uuid(),
diff --git a/docs/src/prototypes/chatPane/services/dateUtils.ts b/docs/src/prototypes/chatPane/services/dateUtils.ts
@@ -1,5 +1,5 @@
 import * as _ from 'lodash'
-import moment from 'moment'
+import * as moment from 'moment'
 import { date } from 'faker'
 
 const getNowDate = (): Date => new Date()
diff --git a/docs/src/prototypes/chatPane/services/messageFactoryMock.ts b/docs/src/prototypes/chatPane/services/messageFactoryMock.ts
@@ -13,6 +13,7 @@ export enum ChatItemTypes {
 interface ChatItem {
   itemType: ChatItemTypes
 }
+
 interface ChatMessage extends ChatMessageProps, ChatItem {
   tabIndex: number
 }
@@ -75,7 +76,7 @@ export function generateChatProps(chat: ChatData): ChatItemContentProps[] {
   chatProps.push(generateChatMsgProps(lastMsg, members.get(lastMsg.from)))
 
   // Last read divider
-  const myLastMsgIndex: number = _.findLastIndex(chatProps, item => item.mine)
+  const myLastMsgIndex = _.findLastIndex(chatProps, item => (item as ChatMessage).mine)
   if (myLastMsgIndex < chatProps.length - 1) {
     chatProps.splice(
       myLastMsgIndex + 1,
diff --git a/docs/src/utils/evalTypeScript.ts b/docs/src/utils/evalTypeScript.ts
@@ -18,15 +18,15 @@ export const convertImportStatementToExpression = (node: ts.ImportDeclaration) =
     // import * as React from 'react' => const React = REACT
     [
       ts.isNamespaceImport,
-      namedBindings => {
+      (namedBindings: ts.NamespaceImport) => {
         return `\nconst ${namedBindings.name.escapedText} = ${MODULE};\n`
       },
     ],
 
     // import { Component1, Component2 } from "module"; => const {Component1, Component2} = MODULE;
     [
       ts.isNamedImports,
-      namedBindings => {
+      (namedBindings: ts.NamedImports) => {
         const imports = namedBindings.elements.map(item => item.name.escapedText)
         return `const {${imports.join()}} = ${MODULE};\n`
       },
diff --git a/package.json b/package.json
@@ -101,6 +101,7 @@
     "@types/faker": "^4.1.3",
     "@types/gulp-load-plugins": "^0.0.31",
     "@types/jest": "^23.1.0",
+    "@types/lodash": "^4.14.118",
     "@types/node": "^10.3.2",
     "@types/react": "^16.3.17",
     "@types/react-custom-scrollbars": "^4.0.5",
diff --git a/src/components/Popup/Popup.tsx b/src/components/Popup/Popup.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { createPortal } from 'react-dom'
 import * as PropTypes from 'prop-types'
-import _ from 'lodash'
+import * as _ from 'lodash'
 import { Popper, PopperChildrenProps } from 'react-popper'
 
 import {
diff --git a/src/lib/customPropTypes.tsx b/src/lib/customPropTypes.tsx
@@ -1,6 +1,9 @@
 import * as _ from 'lodash/fp'
 import * as PropTypes from 'prop-types'
 import leven from './leven'
+import { ObjectOf } from '../../types/utils'
+
+type SuggestProps = { score: number; suggestion: string }
 
 const typeOf = x => Object.prototype.toString.call(x)
 
@@ -28,15 +31,15 @@ export const domNode = (props, propName) => {
  * Useful for very large lists of options (e.g. Icon name, Flag name, etc.)
  * @param {string[]} suggestions An array of allowed values.
  */
-export const suggest = suggestions => {
+export const suggest = (suggestions: string[]) => {
   if (!Array.isArray(suggestions)) {
     throw new Error('Invalid argument supplied to suggest, expected an instance of array.')
   }
 
-  const findBestSuggestions = _.memoize(str => {
+  const findBestSuggestions = _.memoize((str: string) => {
     const propValueWords = str.split(' ')
 
-    return _.flow(
+    return _.flow<string[], SuggestProps[], SuggestProps[], SuggestProps[]>(
       _.map(suggestion => {
         const suggestionWords = suggestion.split(' ')
 
@@ -54,7 +57,7 @@ export const suggest = suggestions => {
 
         return { suggestion, score: propValueScore + suggestionScore }
       }),
-      _.sortBy(['score', 'suggestion']),
+      _.sortBy<SuggestProps>(['score', 'suggestion']),
       _.take(3),
     )(suggestions)
   })
@@ -109,7 +112,7 @@ export const suggest = suggestions => {
  * Disallow other props from being defined with this prop.
  * @param {string[]} disallowedProps An array of props that cannot be used with this prop.
  */
-export const disallow = disallowedProps => (props, propName, componentName) => {
+export const disallow = (disallowedProps: string[]) => (props, propName, componentName) => {
   if (!Array.isArray(disallowedProps)) {
     throw new Error(
       [
@@ -148,7 +151,7 @@ export const disallow = disallowedProps => (props, propName, componentName) => {
  * Ensure a prop adherers to multiple prop type validators.
  * @param {function[]} validators An array of propType functions.
  */
-export const every = validators => (props, propName, componentName, ...rest) => {
+export const every = (validators: Function[]) => (props, propName, componentName, ...rest) => {
   if (!Array.isArray(validators)) {
     throw new Error(
       [
@@ -178,7 +181,7 @@ export const every = validators => (props, propName, componentName, ...rest) =>
  * Ensure a prop adherers to at least one of the given prop type validators.
  * @param {function[]} validators An array of propType functions.
  */
-export const some = validators => (props, propName, componentName, ...rest) => {
+export const some = (validators: Function[]) => (props, propName, componentName, ...rest) => {
   if (!Array.isArray(validators)) {
     throw new Error(
       [
@@ -189,20 +192,20 @@ export const some = validators => (props, propName, componentName, ...rest) => {
   }
 
   const errors = _.compact(
-    _.map(validators, validator => {
+    _.map(validator => {
       if (!_.isFunction(validator)) {
         throw new Error(
           `some() argument "validators" should contain functions, found: ${typeOf(validator)}.`,
         )
       }
       return validator(props, propName, componentName, ...rest)
-    }),
+    }, validators),
   )
 
   // fail only if all validators failed
   if (errors.length === validators.length) {
     const error = new Error('One of these validators must pass:')
-    error.message += `\n${_.map(errors, (err, i) => `[${i + 1}]: ${err.message}`).join('\n')}`
+    error.message += `\n${_.map(err => `- ${err.message}`, errors).join('\n')}`
     return error
   }
 
@@ -214,7 +217,12 @@ export const some = validators => (props, propName, componentName, ...rest) => {
  * @param {object} propsShape An object describing the prop shape.
  * @param {function} validator A propType function.
  */
-export const givenProps = (propsShape, validator) => (props, propName, componentName, ...rest) => {
+export const givenProps = (propsShape: object, validator: Function) => (
+  props,
+  propName,
+  componentName,
+  ...rest
+) => {
   if (!_.isPlainObject(propsShape)) {
     throw new Error(
       [
@@ -268,7 +276,7 @@ export const givenProps = (propsShape, validator) => (props, propName, component
  * Define prop dependencies by requiring other props.
  * @param {string[]} requiredProps An array of required prop names.
  */
-export const demand = requiredProps => (props, propName, componentName) => {
+export const demand = (requiredProps: string[]) => (props, propName, componentName) => {
   if (!Array.isArray(requiredProps)) {
     throw new Error(
       [
@@ -297,7 +305,11 @@ export const demand = requiredProps => (props, propName, componentName) => {
  * Ensure an multiple prop contains a string with only possible values.
  * @param {string[]} possible An array of possible values to prop.
  */
-export const multipleProp = possible => (props, propName, componentName) => {
+export const multipleProp = (possible: string[]) => (
+  props: ObjectOf<string | false>,
+  propName: string,
+  componentName: string,
+) => {
   if (!Array.isArray(possible)) {
     throw new Error(
       [
@@ -365,7 +377,12 @@ export const collectionShorthand = every([disallow(['children']), PropTypes.arra
  * @param {string} help A help message to display with the deprecation warning.
  * @param {function} [validator] A propType function.
  */
-export const deprecate = (help, validator) => (props, propName, componentName, ...args) => {
+export const deprecate = (help: string, validator: Function) => (
+  props,
+  propName,
+  componentName,
+  ...args
+) => {
   if (typeof help !== 'string') {
     throw new Error(
       [
diff --git a/src/lib/eventStack/EventTarget.tsx b/src/lib/eventStack/EventTarget.tsx
diff --git a/src/lib/mergeThemes.ts b/src/lib/mergeThemes.ts
diff --git a/test/specs/components/Popup/Popup-test.tsx b/test/specs/components/Popup/Popup-test.tsx
diff --git a/yarn.lock b/yarn.lock
