chore(types): make Props param in ShorthandValue and ShorthandCollection required

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

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

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

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

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

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

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

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

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} />,

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

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

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

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,

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

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

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

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,