microsoft · bmdalex · Nov 15, 2018 · Nov 6, 2018 · Nov 12, 2018 · Nov 13, 2018
@@ -32,6 +32,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Added Dark and Contrast theme variables for `Header` @bcalvery ([#427](https://github.com/stardust-ui/react/pull/427))
 - Fix Teams Icons styles to match spec @codepretty ([#441](https://github.com/stardust-ui/react/pull/441))
 - Fix styles as functions in shorthands are not applied @mnajdova ([#470](https://github.com/stardust-ui/react/pull/470))
+- Add `lodash` typings and fix compilation errors @Bugaa92 ([#438](https://github.com/stardust-ui/react/pull/438))
 
 ### Features
 - Make `Grid` keyboard navigable by implementing `gridBehavior` @sophieH29 ([#398](https://github.com/stardust-ui/react/pull/398))

@@ -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()) {

@@ -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 => {

@@ -1,5 +1,11 @@
-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,17 +22,16 @@ 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>
   </div>
 )
 
-ComponentPropExtra.propTypes = {
-  children: PropTypes.node,
-  inline: PropTypes.bool,
-  title: PropTypes.node,
-}
-
 export default ComponentPropExtra
@@ -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 ComponentPropFunctionProps 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 ? (tag.type.type === 'AllLiteral' ? 'any' : tag.type.name) : '')
 
-const ComponentPropFunctionSignature: any = ({ name, tags }) => {
+const ComponentPropFunctionSignature: React.SFC<ComponentPropFunctionProps> = ({ name, tags }) => {
   const params = _.filter(tags, { title: 'param' })
   const returns = _.find(tags, { title: 'returns' })
 

@@ -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
 

@@ -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>
       ))
     }}

@@ -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>
       ))
     }}

@@ -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.getTime() - b.date.getTime())
 
     this.chat = {
       id: random.uuid(),

@@ -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()

@@ -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,

@@ -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`
       },

@@ -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",

@@ -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 {