feat: add strict type checks for components' props

CHANGELOG.md

@@ -17,6 +17,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+### BREAKING CHANGES
+- Restrict Typescript checks for component props @kuzhelov ([#1290](https://github.com/stardust-ui/react/pull/1290))
+
 <!--------------------------------[ v0.30.0 ]------------------------------- -->
 ## [v0.30.0](https://github.com/stardust-ui/react/tree/v0.30.0) (2019-05-10)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.29.1...v0.30.0)

build/gulp/tasks/test-projects/cra/App.tsx

@@ -25,7 +25,7 @@ class App extends React.Component {
             <Icon name="umbrella" circular bordered />
           </Animation>
           <Attachment header="Document.docx" />
-          <Avatar src="//placehold.it" />
+          <Avatar image="//placehold.it" />
           <Button content="Click me" />
           <Divider />
           <Header content="This is " />

docs/src/components/ComponentDoc/ComponentControls/ComponentControls.tsx

@@ -68,8 +68,6 @@ const ComponentControls: React.FC<ComponentControlsProps> = props => {
       <Menu
         {...rest}
         fluid
-        icon="labeled"
-        size="tiny"
         pills
         accessibility={toolbarBehavior}
         items={[

docs/src/components/ComponentDoc/ComponentDoc.tsx

@@ -113,7 +113,7 @@ class ComponentDoc extends React.Component<any, any> {
                 <Flex.Item>
                   <Header
                     as="h1"
-                    aria-level="2"
+                    aria-level={2}
                     content={info.displayName}
                     variables={{ color: 'black' }}
                   />

docs/src/components/ComponentDoc/ComponentDocSee.tsx

@@ -16,7 +16,7 @@ const ComponentDocSee: any = ({ displayName }) => {
     <List styles={listStyle}>
       {/* Heads up! Still render empty lists to reserve the whitespace */}
       <List.Item>
-        <Header color="grey" content={items.length > 0 ? 'See:' : ' '} size="tiny" />
+        <Header color="grey" content={items.length > 0 ? 'See:' : ' '} />
       </List.Item>
       {_.map(items, info => (
         <List.Item

docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx

@@ -360,7 +360,7 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
 
     return (
       <Menu
-        size="small"
+        primary
         underlined
         activeIndex={-1}
         styles={codeEditorStyle}
@@ -387,10 +387,7 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
             } as React.CSSProperties
           }
         >
-          <Menu
-            size="small"
-            styles={{ display: 'flex', justifyContent: 'space-between', border: 'none' }}
-          >
+          <Menu styles={{ display: 'flex', justifyContent: 'space-between', border: 'none' }}>
             {this.renderAPIsMenu()}
             {this.renderLanguagesMenu()}
           </Menu>
@@ -408,7 +405,7 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
       <SourceRender.Consumer>
         {({ error }) =>
           error && (
-            <Segment inverted color="red" size="small">
+            <Segment inverted color="red">
               <pre style={{ whiteSpace: 'pre-wrap' }}>{error.toString()}</pre>
             </Segment>
           )

docs/src/components/ComponentDoc/ComponentSidebar/ComponentSidebar.tsx

@@ -14,7 +14,6 @@ const sidebarStyle = {
 type ComponentSidebarProps = {
   activePath: string
   displayName: string
-  examplesRef: HTMLElement
   onItemClick: (e: React.SyntheticEvent, { examplePath: string }) => void
 }
 
@@ -38,7 +37,7 @@ class ComponentSidebar extends React.Component<ComponentSidebarProps, any> {
   }
 
   render() {
-    const { activePath, examplesRef, onItemClick } = this.props
+    const { activePath, onItemClick } = this.props
     const { sections } = this.state
 
     const menuItems = _.map(sections, ({ examples, sectionName, index }) => ({
@@ -56,7 +55,7 @@ class ComponentSidebar extends React.Component<ComponentSidebarProps, any> {
 
     // TODO: use a Sticky component instead of position:fixed, when available
     return (
-      <Segment context={examplesRef} styles={{ padding: 0, position: 'fixed' }}>
+      <Segment styles={{ padding: 0, position: 'fixed' }}>
         <Menu fluid vertical items={menuItems} styles={{ ...sidebarStyle }} />
       </Segment>
     )

docs/src/components/ComponentDoc/ComponentSidebar/ComponentSidebarSection.tsx

@@ -96,14 +96,13 @@ export default class ComponentSidebarSection extends React.PureComponent<any, an
         {...restProps}
         styles={treeStyles}
         active={active}
+        onClick={this.handleTitleClick}
       >
         <span>{content}</span>
-        {hasSubtree && <Icon direction={name ? 'arrow-down' : 'arrow-end'} />}
+        {hasSubtree && <Icon name="arrow-down" />}
       </Component>
     )
 
-    return (
-      <Tree items={items} onTitleClick={this.handleTitleClick} renderItemTitle={titleRenderer} />
-    )
+    return <Tree items={items} renderItemTitle={titleRenderer} />
   }
 }

docs/src/components/DocPage/DocPage.tsx

@@ -11,7 +11,7 @@ interface DocPageProps {
 const DocPage = ({ title, description, children }: DocPageProps) => (
   <DocumentTitle title={`Stardust - ${title}`}>
     <div style={{ padding: '2rem', fontSize: '1.15rem', maxWidth: '80ch' }}>
-      <Header as="h1" aria-level="2" content={title} description={description} textAlign="center" />
+      <Header as="h1" aria-level={2} content={title} description={description} textAlign="center" />
       {children}
     </div>
   </DocumentTitle>

docs/src/components/DocsBehaviorRoot.tsx

@@ -37,7 +37,7 @@ class DocsBehaviorRoot extends React.Component<any, any> {
         <Segment>
           <Header
             as="h1"
-            aria-level="2"
+            aria-level={2}
             content={pageTitle}
             description={`Keyboard and Screenreader options for ${match.params.name} component.`}
           />

docs/src/components/Logo/Logo.tsx

@@ -3,6 +3,4 @@ import { Image } from '@stardust-ui/react'
 
 const Logo: any = props => <Image {...props} src="logo.png" />
 
-Logo.propTypes = Image.propTypes
-
 export default Logo

docs/src/components/Sidebar/Sidebar.tsx

@@ -478,7 +478,7 @@ class Sidebar extends React.Component<any, any> {
           <Logo width="32px" styles={logoStyles} />
           <Text
             role="heading"
-            aria-level="1"
+            aria-level={1}
             color="white"
             content="Stardust UI React &nbsp;"
             styles={logoStyles}

docs/src/examples/components/ItemLayout/Types/ItemLayoutExampleSelection.shorthand.tsx

@@ -1,13 +1,9 @@
-import { useBooleanKnob } from '@stardust-ui/docs-components'
 import { ItemLayout, Image } from '@stardust-ui/react'
 import * as React from 'react'
 
 const ItemLayoutExampleSelectionShorthand = () => {
-  const [selection] = useBooleanKnob({ name: 'selection', initialValue: true })
-
   return (
     <ItemLayout
-      selection={selection}
       media={<Image src="public/images/avatar/small/matt.jpg" avatar />}
       header="Irving Kuhic"
       headerMedia="7:26:56 AM"

docs/src/examples/components/Portal/Types/PortalExample.shorthand.tsx

@@ -42,7 +42,7 @@ class PortalExamplePortal extends React.Component {
         <Divider />
         <div>
           <Flex gap="gap.small" vAlign="center">
-            <Button size="small" onClick={this.clearLog} content="Clear" />
+            <Button onClick={this.clearLog} content="Clear" />
             <span>
               Event Log <Label circular>{logCount}</Label>
             </span>

docs/src/examples/components/Portal/Types/PortalExample.tsx

@@ -39,7 +39,7 @@ class PortalExamplePortal extends React.Component {
         <Divider />
         <div>
           <Flex gap="gap.small" vAlign="center">
-            <Button size="small" onClick={this.clearLog} content="Clear" />
+            <Button onClick={this.clearLog} content="Clear" />
             <span>
               Event Log <Label circular>{logCount}</Label>
             </span>

docs/src/examples/components/Portal/Types/PortalExampleControlled.shorthand.tsx

@@ -28,7 +28,7 @@ class PortalExampleControlled extends React.Component {
           <Divider />
 
           <Flex gap="gap.small" vAlign="center">
-            <Button size="small" onClick={this.clearLog} content="Clear" />
+            <Button onClick={this.clearLog} content="Clear" />
             <span>
               Event Log <Label circular>{logCount}</Label>
             </span>

docs/src/examples/components/Portal/Types/PortalExampleControlled.tsx

@@ -28,7 +28,7 @@ class PortalExampleControlled extends React.Component {
           <Divider />
 
           <Flex gap="gap.small" vAlign="center">
-            <Button size="small" onClick={this.clearLog} content="Clear" />
+            <Button onClick={this.clearLog} content="Clear" />
             <span>
               Event Log <Label circular>{logCount}</Label>
             </span>

docs/src/examples/components/Portal/Types/PortalExampleFocusTrapped.shorthand.tsx

@@ -64,8 +64,8 @@ class PortalExampleFocusTrapped extends React.Component {
                 Portal doesn't close on outside click. See passed focus trap props.
               </p>
               <p tabIndex={0}>To close, simply click the close button</p>
-              <Button size="small" content="Do nothing" />
-              <Button size="small" content="Close popup" onClick={this.closePortal} />
+              <Button content="Do nothing" />
+              <Button content="Close popup" onClick={this.closePortal} />
             </div>
           }
         />

docs/src/examples/components/Portal/Types/PortalExampleFocusTrapped.tsx

@@ -62,8 +62,8 @@ class PortalExamplePortal extends React.Component {
             <Header>This portal traps focus on appearance</Header>
             <p tabIndex={0}>Portal doesn't close on outside click. See passed focus trap props.</p>
             <p tabIndex={0}>To close, simply click the close button</p>
-            <Button size="small" content="Do nothing" />
-            <Button size="small" content="Close popup" onClick={this.closePortal} />
+            <Button content="Do nothing" />
+            <Button content="Close popup" onClick={this.closePortal} />
           </div>
         </Portal>
       </div>

docs/src/prototypes/AsyncShorthand/AsyncShorthand.tsx

@@ -95,8 +95,7 @@ class CustomChatMessage extends React.Component {
                 { key: 'a', icon: 'thumbs up' },
                 { key: 'b', icon: 'user' },
                 { key: 'c', icon: 'ellipsis horizontal' },
-              ]}
-              renderItem={this.renderMenuItem}
+              ].map(item => render => render(item, this.renderMenuItem))}
             />
           </div>
         }

docs/src/prototypes/IconViewer/index.tsx

@@ -62,7 +62,7 @@ class IconViewerExample extends React.Component<any, {}> {
         />
 
         <div style={{ marginTop: '15px' }}>
-          <Menu tabular styles={{ margin: '15px 0' }}>
+          <Menu styles={{ margin: '15px 0' }}>
             {Object.keys(this.iconFilters).map(filterName => (
               <Menu.Item
                 content={filterName}

docs/src/prototypes/chatPane/chatPaneContent.tsx

@@ -63,7 +63,7 @@ class ChatPaneContainer extends React.PureComponent<ChatPaneContainerProps> {
                       {this.getMessagePreviewForScreenReader(props)}
                     </div>
                   )}
-                  <ElementType {...props} text={undefined} {...maybeAttributesForDivider} />
+                  <ElementType {...props} {...maybeAttributesForDivider} />
                 </>
               ),
             }}
@@ -73,7 +73,7 @@ class ChatPaneContainer extends React.PureComponent<ChatPaneContainerProps> {
     )
   }
 
-  private getElementType = (itemType: ChatItemTypes) => {
+  private getElementType = (itemType: ChatItemTypes): React.ElementType => {
     switch (itemType) {
       case ChatItemTypes.message:
         return Chat.Message

docs/src/prototypes/chatPane/composeMessage.tsx

@@ -94,7 +94,7 @@ const getMenuItems = (): MenuItemProps[] => {
     'aria-label': `${name} tool`,
   }))
 
-  items.splice(-1, 0, { key: 'separator', styles: { flex: 1 } })
+  items.splice(-1, 0, { key: 'separator', styles: { flex: 1 } } as any)
 
   return items
 }

docs/src/prototypes/chatPane/services/messageFactoryMock.tsx

@@ -119,7 +119,7 @@ function createMessageContentWithAttachments(content: string, messageId: string)
     />
   )
 
-  const stopPropagationOnKeys = (keys: number[]) => (e: Event) => {
+  const stopPropagationOnKeys = (keys: number[]) => (e: React.KeyboardEvent<any>) => {
     if (keys.indexOf(keyboardKey.getCode(e)) > -1) {
       e.stopPropagation()
     }

docs/src/views/PageNotFound.tsx

@@ -4,15 +4,15 @@ import { Grid, Segment, Header, Icon } from '@stardust-ui/react'
 const PageNotFound = () => (
   <Grid>
     <div>
-      <Header as="h1" icon textAlign="center">
+      <Header as="h1" textAlign="center">
         <Icon name="game" />
         404
         <Header.Description>How about some good old Atari?</Header.Description>
       </Header>
     </div>
 
     <div>
-      <Segment basic>
+      <Segment>
         <embed
           src="http://www.pizn.com/swf/classic-asteroids.swf"
           width="425"
@@ -28,7 +28,7 @@ const PageNotFound = () => (
       </Segment>
     </div>
     <div>
-      <Segment basic>
+      <Segment>
         <embed
           src="http://www.pizn.com/swf/1-space-invaders.swf"
           width="425"

docs/src/views/QuickStart.tsx

@@ -17,7 +17,7 @@ export default () => (
       Stardust components are styled using CSS in JS. This technique requires a style renderer to
       render JavaScript objects to CSS.{' '}
       <a href="https://reactjs.org/docs/context.html" target="_blank" rel="noopener nofollow">
-        React Context <Icon name="external" size="small" link fitted />
+        React Context <Icon name="external" size="small" />
       </a>{' '}
       is used to provide the style renderer and theme to components.
     </p>

packages/docs-components/src/knobs/useSelectKnob.ts

@@ -1,9 +1,9 @@
 import { UseKnobOptions } from './types'
 import useKnob from './useKnob'
 
-const useSelectKnob = (options: UseKnobOptions<string>) =>
-  useKnob<string>({
-    initialValue: '',
+const useSelectKnob = <T extends string>(options: UseKnobOptions<T>) =>
+  useKnob<T>({
+    initialValue: '' as T,
     type: 'select',
     ...options,
   })

packages/react/src/components/Accordion/Accordion.tsx

@@ -18,9 +18,10 @@ import { Accessibility } from '../../lib/accessibility/types'
 
 import {
   ComponentEventHandler,
-  ReactProps,
+  WithAsProp,
   ShorthandValue,
   ShorthandRenderFunction,
+  withSafeTypeForAs,
 } from '../../types'
 
 export interface AccordionSlotClassNames {
@@ -75,13 +76,7 @@ export interface AccordionProps extends UIComponentProps, ChildrenComponentProps
   accessibility?: Accessibility
 }
 
-/**
- * An accordion allows users to toggle the display of sections of content.
- * @accessibility
- * Implements ARIA Accordion design pattern (keyboard navigation not yet supported).
- * Consider using Tree if you intend to wrap Lists in an Accordion.
- */
-class Accordion extends AutoControlledComponent<ReactProps<AccordionProps>, any> {
+class Accordion extends AutoControlledComponent<WithAsProp<AccordionProps>, any> {
   static displayName = 'Accordion'
 
   static className = 'ui-accordion'
@@ -202,4 +197,10 @@ class Accordion extends AutoControlledComponent<ReactProps<AccordionProps>, any>
   }
 }
 
-export default Accordion
+/**
+ * An accordion allows users to toggle the display of sections of content.
+ * @accessibility
+ * Implements ARIA Accordion design pattern (keyboard navigation not yet supported).
+ * Consider using Tree if you intend to wrap Lists in an Accordion.
+ */
+export default withSafeTypeForAs<typeof Accordion, AccordionProps>(Accordion)

packages/react/src/components/Accordion/AccordionContent.tsx

@@ -11,7 +11,7 @@ import {
   commonPropTypes,
   rtlTextContainer,
 } from '../../lib'
-import { ReactProps, ComponentEventHandler } from '../../types'
+import { WithAsProp, ComponentEventHandler, withSafeTypeForAs } from '../../types'
 
 export interface AccordionContentProps
   extends UIComponentProps,
@@ -29,10 +29,7 @@ export interface AccordionContentProps
   onClick?: ComponentEventHandler<AccordionContentProps>
 }
 
-/**
- * A standard AccordionContent.
- */
-class AccordionContent extends UIComponent<ReactProps<AccordionContentProps>, any> {
+class AccordionContent extends UIComponent<WithAsProp<AccordionContentProps>, any> {
   static displayName = 'AccordionContent'
 
   static create: Function
@@ -65,4 +62,7 @@ AccordionContent.create = createShorthandFactory({
   mappedProp: 'content',
 })
 
-export default AccordionContent
+/**
+ * A standard AccordionContent.
+ */
+export default withSafeTypeForAs<typeof AccordionContent, AccordionContentProps>(AccordionContent)