fix(lodash): add types and fix errors (#438)

* fix(lodash): add types and fix errors

* addressed PR comments

* added changelog

* addressed PR comments

Author: Alexandru Buliga

CHANGELOG.md

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

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

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

docs/src/components/ComponentDoc/ComponentProp/ComponentPropExtra.tsx

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

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

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
 

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

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

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

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