chore(types): make Props param in ShorthandValue and ShorthandCollect…

…ion required (#1605) * chore(types): make Props param in ShorthandValue and ShorthandCollection required * fix issues * fix types * fix types * fix imports * replace ShorthandValue[] * fix type * fix usage of `ShorthandValue[]` * fix type * type `reactions` in examples * fix `message` type * update to use ShorthandCollection<ListItemProps> * fix types in DropdownItem * remove cruft content * add a comment * fix type * fix last review comment * add changelog entry * fix types in `ChatMessage` * fix CH entry
microsoft · Jul 15, 2019 · 2a33a21 · 2a33a21
1 parent 308fa1d
commit 2a33a21
Show file tree

Hide file tree

Showing 73 changed files with 363 additions and 296 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -21,6 +21,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 -  Add `trapFocus` and `autoFocus` props to `Popup` and remove `popupFocusTrapBehavior` and `popupAutoFocusBehavior` @sophieH29 ([#1565](https://github.com/stardust-ui/react/pull/1565))
 - `defaultBehavior` was removed @layershifter ([#1600](https://github.com/stardust-ui/react/pull/1600))
 - `ReactElement`s are now handled in the same way as string in all shorthands @layershifter ([#1600](https://github.com/stardust-ui/react/pull/1600))
+- `Props` param is required in `ShorthandValue` and `ShorthandCollection` @layershifter ([#1605](https://github.com/stardust-ui/react/pull/1605))
 
 ### Features
 - Split action handlers with "OR" condition in accessibility behaviors @sophieH29 ([#1622](https://github.com/stardust-ui/react/pull/1622))

diff --git a/docs/src/components/ColorSchemes.tsx b/docs/src/components/ColorSchemes.tsx
@@ -5,16 +5,17 @@ import {
   ComponentSlotStylesInput,
   ThemePrepared,
   Grid,
-  ShorthandValue,
   Header,
+  HeaderProps,
+  ShorthandCollection,
 } from '@stardust-ui/react'
 
 import ColorBox from './ColorBox'
 
 type ColorVariantsProps = {
   name?: string
   themes?: ThemePrepared[]
-  headers?: ShorthandValue[]
+  headers?: ShorthandCollection<HeaderProps>
 }
 
 export const colorVariantsStyles: ComponentSlotStylesInput<ColorVariantsProps> = {

diff --git a/docs/src/components/ComponentBestPractices.tsx b/docs/src/components/ComponentBestPractices.tsx
@@ -1,16 +1,25 @@
 import * as React from 'react'
-import _ from 'lodash'
-import { Box, Flex, Header, Icon, List, Segment, ShorthandValue } from '@stardust-ui/react'
+import * as _ from 'lodash'
+import {
+  Box,
+  Flex,
+  Header,
+  Icon,
+  List,
+  ListItemProps,
+  Segment,
+  ShorthandCollection,
+} from '@stardust-ui/react'
 import { Extendable } from 'src/types'
 
 export type ComponentBestPracticesProps = Extendable<{
-  doList?: ShorthandValue<{}>[]
-  dontList?: ShorthandValue<{}>[]
+  doList?: ShorthandCollection<ListItemProps>
+  dontList?: ShorthandCollection<ListItemProps>
 }>
 
 const ComponentBestPractices: React.FC<ComponentBestPracticesProps> = ({ doList, dontList }) => {
-  const updatedDoList: ShorthandValue<{}>[] = []
-  const updatedDontList: ShorthandValue<{}>[] = []
+  const updatedDoList: ShorthandCollection<ListItemProps> = []
+  const updatedDontList: ShorthandCollection<ListItemProps> = []
 
   if (_.size(doList) > 0) {
     _.map(doList, element => {

diff --git a/docs/src/components/Sidebar/Sidebar.tsx b/docs/src/components/Sidebar/Sidebar.tsx
@@ -151,7 +151,7 @@ class Sidebar extends React.Component<any, any> {
     }
   }
 
-  getTreeItems(): ShorthandValue[] {
+  getTreeItems(): TreeProps['items'] {
     return [
       {
         key: 'concepts',

diff --git a/docs/src/examples/components/Chat/Content/ChatExampleActions.shorthand.tsx b/docs/src/examples/components/Chat/Content/ChatExampleActions.shorthand.tsx
@@ -1,4 +1,4 @@
-import { Avatar, Chat } from '@stardust-ui/react'
+import { Avatar, Chat, ChatItemProps, ShorthandCollection } from '@stardust-ui/react'
 import * as React from 'react'
 
 const actionMenu = {
@@ -9,7 +9,7 @@ const actionMenu = {
   ],
 }
 
-const items = [
+const items: ShorthandCollection<ChatItemProps> = [
   {
     attached: 'top',
     contentPosition: 'end',

diff --git a/docs/src/examples/components/Chat/Content/ChatExampleReactionGroup.shorthand.tsx b/docs/src/examples/components/Chat/Content/ChatExampleReactionGroup.shorthand.tsx
@@ -1,12 +1,12 @@
-import { Avatar, Chat } from '@stardust-ui/react'
+import { Avatar, Chat, ChatItemProps, ReactionProps, ShorthandCollection } from '@stardust-ui/react'
 import * as React from 'react'
 
-const reactions = [
+const reactions: ShorthandCollection<ReactionProps> = [
   { key: 'up', icon: 'thumbs up', content: '1K' },
   { key: 'down', icon: 'thumbs down', content: 5 },
 ]
 
-const items = [
+const items: ShorthandCollection<ChatItemProps> = [
   {
     attached: 'top',
     contentPosition: 'end',

diff --git a/docs/src/examples/components/Chat/Content/ChatExampleReactionGroupMeReacting.shorthand.tsx b/docs/src/examples/components/Chat/Content/ChatExampleReactionGroupMeReacting.shorthand.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react'
-import { Avatar, Chat } from '@stardust-ui/react'
+import { Avatar, Chat, ChatItemProps, ReactionProps, ShorthandCollection } from '@stardust-ui/react'
 
-const reactions = [
+const reactions: ShorthandCollection<ReactionProps> = [
   { icon: 'thumbs up', content: '1K', key: 'likes', variables: { meReacting: true }, as: 'button' },
   { icon: 'thumbs down', content: 2, key: 'dislikes', as: 'button' },
 ]
 
-const items = [
+const items: ShorthandCollection<ChatItemProps> = [
   {
     attached: 'top',
     contentPosition: 'end',

diff --git a/docs/src/examples/components/Chat/Rtl/ChatExample.rtl.tsx b/docs/src/examples/components/Chat/Rtl/ChatExample.rtl.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
-import { Avatar, Chat } from '@stardust-ui/react'
+import { Avatar, Chat, ChatItemProps, ShorthandCollection } from '@stardust-ui/react'
 
-const items = [
+const items: ShorthandCollection<ChatItemProps> = [
   {
     message: (
       <Chat.Message

diff --git a/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx b/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react'
-import { Avatar, Chat, Divider } from '@stardust-ui/react'
+import { Avatar, Chat, ChatItemProps, Divider, ShorthandCollection } from '@stardust-ui/react'
 
 const janeAvatar = {
   image: 'public/images/avatar/small/ade.jpg',
   status: { color: 'green', icon: 'check' },
 }
 
-const items = [
+const items: ShorthandCollection<ChatItemProps> = [
   {
     message: (
       <Chat.Message content="Hello" author="John Doe" timestamp="Yesterday, 10:15 PM" mine />

diff --git a/docs/src/examples/components/Chat/Types/ChatExampleContentPosition.shorthand.tsx b/docs/src/examples/components/Chat/Types/ChatExampleContentPosition.shorthand.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Avatar, Chat } from '@stardust-ui/react'
+import { Avatar, Chat, ChatItemProps, ShorthandCollection } from '@stardust-ui/react'
 
 const [janeAvatar, johnAvatar] = [
   'public/images/avatar/small/ade.jpg',
@@ -9,7 +9,7 @@ const [janeAvatar, johnAvatar] = [
   status: { color: 'green', icon: 'check' },
 }))
 
-const items = [
+const items: ShorthandCollection<ChatItemProps> = [
   {
     contentPosition: 'start',
     gutter: <Avatar {...johnAvatar} />,

diff --git a/docs/src/examples/components/Chat/Types/ChatMessageExampleBadge.shorthand.tsx b/docs/src/examples/components/Chat/Types/ChatMessageExampleBadge.shorthand.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react'
-import { Avatar, Chat } from '@stardust-ui/react'
+import { Avatar, Chat, ChatItemProps, ShorthandCollection } from '@stardust-ui/react'
 
 const janeAvatar = {
   image: 'public/images/avatar/small/ade.jpg',
   status: { color: 'green', icon: 'check' },
 }
 
-const items = [
+const items: ShorthandCollection<ChatItemProps> = [
   {
     message: (
       <Chat.Message

diff --git a/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx b/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx
@@ -1,12 +1,19 @@
 import * as React from 'react'
-import { Avatar, Chat, Provider } from '@stardust-ui/react'
+import {
+  Avatar,
+  AvatarProps,
+  Chat,
+  Provider,
+  ReactionProps,
+  ShorthandCollection,
+} from '@stardust-ui/react'
 
-const reactions = [
+const reactions: ShorthandCollection<ReactionProps> = [
   { key: 'up', icon: 'thumbs up', content: '1K' },
   { key: 'down', icon: 'thumbs down', content: 5 },
 ]
 
-const janeAvatar = {
+const janeAvatar: AvatarProps = {
   image: 'public/images/avatar/small/ade.jpg',
   status: { color: 'green', icon: 'check' },
 }

diff --git a/docs/src/examples/components/Menu/Usages/MenuExampleToolbar.shorthand.tsx b/docs/src/examples/components/Menu/Usages/MenuExampleToolbar.shorthand.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
-import { Menu, menuAsToolbarBehavior } from '@stardust-ui/react'
+import { Menu, menuAsToolbarBehavior, MenuItemProps, ShorthandCollection } from '@stardust-ui/react'
 
-const items = [
+const items: ShorthandCollection<MenuItemProps> = [
   {
     key: 'format',
     icon: {
@@ -115,18 +115,14 @@ const items = [
   },
 ]
 
-class MenuExampleToolbarShorthand extends React.Component {
-  render() {
-    return (
-      <Menu
-        defaultActiveIndex={0}
-        items={items}
-        iconOnly
-        accessibility={menuAsToolbarBehavior}
-        aria-label="Compose Editor"
-      />
-    )
-  }
-}
+const MenuExampleToolbarShorthand = () => (
+  <Menu
+    defaultActiveIndex={0}
+    items={items}
+    iconOnly
+    accessibility={menuAsToolbarBehavior}
+    aria-label="Compose Editor"
+  />
+)
 
 export default MenuExampleToolbarShorthand
diff --git a/docs/src/prototypes/MenuButton/MenuButton.tsx b/docs/src/prototypes/MenuButton/MenuButton.tsx
@@ -132,7 +132,7 @@ class MenuButton extends React.Component<MenuButtonProps, MenuButtonState> {
   }
 
   handleMenuItemOverrides = (menuItemAccessibilityAttributes: AccessibilityAttributes) =>
-    _.map(_.get(this.props.menu, 'items'), (item: ShorthandValue) =>
+    _.map(_.get(this.props.menu, 'items'), (item: ShorthandValue<MenuItemProps>) =>
       typeof item === 'object'
         ? {
             ...item,

diff --git a/docs/src/prototypes/chatMessages/ChatMessageWithPopover/ChatWithPopover.tsx b/docs/src/prototypes/chatMessages/ChatMessageWithPopover/ChatWithPopover.tsx
@@ -1,10 +1,17 @@
-import { Chat, Provider, Avatar, ChatMessageProps } from '@stardust-ui/react'
+import {
+  Chat,
+  Provider,
+  Avatar,
+  ChatMessageProps,
+  ShorthandCollection,
+  ReactionProps,
+} from '@stardust-ui/react'
 import * as React from 'react'
 import Popover from './Popover'
 import ReactionPopup from './ReactionPopup'
 import { Ref } from '@stardust-ui/react-component-ref'
 
-const reactions = [
+const reactions: ShorthandCollection<ReactionProps> = [
   {
     icon: 'thumbs up',
     content: '1K',

diff --git a/docs/src/prototypes/chatMessages/ImportantAndMentionMessages/index.tsx b/docs/src/prototypes/chatMessages/ImportantAndMentionMessages/index.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react'
-import { Avatar, Chat } from '@stardust-ui/react'
+import { Avatar, Chat, ChatItemProps, ShorthandCollection } from '@stardust-ui/react'
 
 const janeAvatar = {
   image: 'public/images/avatar/small/ade.jpg',
   status: { color: 'green', icon: 'check' },
 }
 
-const items = [
+const items: ShorthandCollection<ChatItemProps> = [
   {
     message: (
       <Chat.Message

diff --git a/docs/src/prototypes/chatPane/composeMessage.tsx b/docs/src/prototypes/chatPane/composeMessage.tsx
@@ -6,6 +6,8 @@ import {
   Provider,
   menuAsToolbarBehavior,
   MenuItemProps,
+  ShorthandCollection,
+  IconXSpacing,
 } from '@stardust-ui/react'
 
 import { Props } from 'src/types'
@@ -72,8 +74,8 @@ const getInputWrapperStyles = ({ attached }: ComposeMessageProps): React.CSSProp
   }
 }
 
-const getMenuItems = (): MenuItemProps[] => {
-  const items: MenuItemProps[] = [
+const getMenuItems = (): ShorthandCollection<MenuItemProps> => {
+  const items: ShorthandCollection<MenuItemProps> = [
     'compose',
     'attach',
     'smile',
@@ -86,7 +88,7 @@ const getMenuItems = (): MenuItemProps[] => {
     key: `${index}-${name}`,
     icon: {
       name,
-      xSpacing: 'both',
+      xSpacing: 'both' as IconXSpacing,
       variables: siteVars => ({ color: siteVars.colors.grey[500] }),
     },
     'aria-label': `${name} tool`,

diff --git a/docs/src/prototypes/chatPane/services/messageFactoryMock.tsx b/docs/src/prototypes/chatPane/services/messageFactoryMock.tsx
@@ -75,7 +75,7 @@ function generateChatMsgProps(message: MessageData, fromUser: UserData): ChatIte
   }
 }
 
-function createMessageContent(message: MessageData): ShorthandValue {
+function createMessageContent(message: MessageData): ShorthandValue<ChatMessageProps> {
   const messageId = `content-${message.id}`
   return {
     id: message.withAttachment ? undefined : messageId,