fix: names of mapped props for shorthand factories (#591)

* introduce fix and type checks

* remove invalid test for RadioGroup

* adjust typings

* address problems of RadioGroup tests

* update changelog

Author: kuzhelov

CHANGELOG.md

@@ -40,6 +40,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix `Popup` not closing on outside click @kuzhelov ([#598](https://github.com/stardust-ui/react/pull/598))
 - Fix multiple React's warnings about keys in docs @layershifter ([#602](https://github.com/stardust-ui/react/pull/602))
 - Fix incorrect handling of `isFromKeyboard` in `Menu` @layershifter ([#596](https://github.com/stardust-ui/react/pull/596))
+- Fix property names used in shorthand factories @kuzhelov ([#591](https://github.com/stardust-ui/react/pull/591))
 
 ### Features
 - `Ref` components uses `forwardRef` API by default @layershifter ([#491](https://github.com/stardust-ui/react/pull/491))

src/components/Image/Image.tsx

@@ -22,6 +22,9 @@ export interface ImageProps extends UIComponentProps {
 
   /** An image can take up the width of its container. */
   fluid?: boolean
+
+  /** Image source URL. */
+  src?: string
 }
 
 /**

src/components/ItemLayout/ItemLayout.tsx

@@ -208,7 +208,7 @@ class ItemLayout extends UIComponent<Extendable<ItemLayoutProps>, any> {
   }
 }
 
-ItemLayout.create = createShorthandFactory(ItemLayout, 'main')
+ItemLayout.create = createShorthandFactory(ItemLayout, 'content')
 
 export default ItemLayout
 

src/components/List/ListItem.tsx

@@ -129,6 +129,6 @@ class ListItem extends UIComponent<Extendable<ListItemProps>, ListItemState> {
   }
 }
 
-ListItem.create = createShorthandFactory(ListItem, 'main')
+ListItem.create = createShorthandFactory(ListItem, 'content')
 
 export default ListItem

src/lib/factories.tsx

@@ -4,6 +4,7 @@ import * as React from 'react'
 import {
   ShorthandValue,
   Props,
+  PropsOf,
   ShorthandRenderCallback,
   ShorthandRenderFunction,
   ShorthandRenderer,
@@ -74,18 +75,20 @@ export function createShorthand(
 // ============================================================
 // Factory Creators
 // ============================================================
-
 /**
  * @param {React.ReactType} Component A ReactClass or string
  * @param {string} mappedProp A function that maps a primitive value to the Component props
  * @returns {function} A shorthand factory function waiting for `val` and `defaultProps`.
  */
-export function createShorthandFactory(Component: React.ReactType, mappedProp?: string) {
+export function createShorthandFactory<T extends React.ReactType>(
+  Component: T,
+  mappedProp?: keyof PropsOf<T>,
+) {
   if (typeof Component !== 'function' && typeof Component !== 'string') {
     throw new Error('createShorthandFactory() Component must be a string or function.')
   }
 
-  return (val, options) => createShorthand(Component, mappedProp, val, options)
+  return (val, options) => createShorthand(Component, mappedProp as string, val, options)
 }
 
 // ============================================================

test/specs/commonTests/implementsCollectionShorthandProp.tsx

@@ -1,31 +1,42 @@
 import * as React from 'react'
 import { mountWithProvider as mount } from 'test/utils'
 import * as _ from 'lodash'
+import { PropsOf } from 'types/utils'
 
-export type CollectionShorthandTestOptions = {
-  mapsValueToProp?: string
-  skipArrayOfStrings?: boolean
+export type CollectionShorthandTestOptions<TProps = any> = {
+  mapsValueToProp: keyof (TProps & React.HTMLProps<HTMLElement>) | false
 }
 
 export const DefaultCollectionShorthandTestOptions: CollectionShorthandTestOptions = {
   mapsValueToProp: 'content',
-  skipArrayOfStrings: false,
 }
 
-export default Component => {
+export type CollectionShorthandPropTestsRunner<TComponent> = <
+  TShorthandComponent extends React.ComponentType
+>(
+  shorthandProp: keyof PropsOf<TComponent>,
+  ShorthandComponent: TShorthandComponent,
+  options?: CollectionShorthandTestOptions<PropsOf<TShorthandComponent>>,
+) => any
+
+export type CollectionShorthandPropTestsFactory = <TComponent extends React.ComponentType>(
+  Component: TComponent,
+) => CollectionShorthandPropTestsRunner<TComponent>
+
+export default ((Component: React.ComponentType) => {
   return function implementsCollectionShorthandProp(
     shorthandPropertyName: string,
     ShorthandComponent: React.ComponentType,
     options: CollectionShorthandTestOptions = DefaultCollectionShorthandTestOptions,
   ) {
-    const { mapsValueToProp } = options
+    const mapsValueToProp = options.mapsValueToProp as string
 
     describe(`shorthand property for '${ShorthandComponent.displayName}'`, () => {
       test(`is defined`, () => {
         expect(Component.propTypes[shorthandPropertyName]).toBeTruthy()
       })
 
-      if (!options.skipArrayOfStrings) {
+      if (options.mapsValueToProp) {
         test(`array of string values is spread as ${
           ShorthandComponent.displayName
         }s' ${mapsValueToProp}`, () => {
@@ -73,4 +84,4 @@ export default Component => {
       })
     })
   }
-}
+}) as CollectionShorthandPropTestsFactory

test/specs/commonTests/implementsShorthandProp.tsx

@@ -1,23 +1,35 @@
 import * as React from 'react'
 import { ReactWrapper } from 'enzyme'
 import { mountWithProvider } from 'test/utils'
-import { Props } from '../../../types/utils'
+import { Props, PropsOf } from '../../../types/utils'
 
-export type ShorthandTestOptions = {
-  mapsValueToProp?: string
+export type ShorthandTestOptions<TProps = any> = {
+  mapsValueToProp: keyof (TProps & React.HTMLProps<HTMLElement>) | false
 }
 
 export const DefaultShorthandTestOptions: ShorthandTestOptions = {
   mapsValueToProp: 'content',
 }
 
-export default Component => {
+export type ShorthandPropTestsRunner<TComponent> = <
+  TShorthandComponent extends React.ComponentType
+>(
+  shorthandProp: keyof PropsOf<TComponent>,
+  ShorthandComponent: TShorthandComponent,
+  options?: ShorthandTestOptions<PropsOf<TShorthandComponent>>,
+) => any
+
+export type ShorthandPropTestsFactory = <TComponent extends React.ComponentType>(
+  Component: TComponent,
+) => ShorthandPropTestsRunner<TComponent>
+
+export default ((Component: React.ComponentType) => {
   return function implementsShorthandProp(
     shorthandProp: string,
     ShorthandComponent: React.ComponentType,
     options: ShorthandTestOptions = DefaultShorthandTestOptions,
   ) {
-    const { mapsValueToProp } = options
+    const mapsValueToProp = options.mapsValueToProp as string
     const { displayName } = ShorthandComponent
 
     const checkPropsMatch = (props: Props, matchedProps: Props) =>
@@ -46,13 +58,15 @@ export default Component => {
         expect(Component.propTypes[shorthandProp]).toBeTruthy()
       })
 
-      test(`string value is handled as ${displayName}'s ${mapsValueToProp}`, () => {
-        expectShorthandPropsAreHandled('shorthand prop value')
-      })
+      if (options.mapsValueToProp) {
+        test(`string value is handled as ${displayName}'s ${mapsValueToProp}`, () => {
+          expectShorthandPropsAreHandled('shorthand prop value')
+        })
+      }
 
       test(`object value is spread as ${displayName}'s props`, () => {
         expectShorthandPropsAreHandled({ foo: 'foo value', bar: 'bar value' })
       })
     })
   }
-}
+}) as ShorthandPropTestsFactory

test/specs/components/List/List-test.ts

@@ -9,5 +9,5 @@ const listImplementsCollectionShorthandProp = implementsCollectionShorthandProp(
 describe('List', () => {
   isConformant(List)
   handlesAccessibility(List, { defaultRootRole: 'list' })
-  listImplementsCollectionShorthandProp('items', ListItem, { mapsValueToProp: 'main' })
+  listImplementsCollectionShorthandProp('items', ListItem, { mapsValueToProp: 'content' })
 })

test/specs/components/RadioGroup/RadioGroup-test.tsx

@@ -55,8 +55,7 @@ describe('RadioGroup', () => {
 
   describe('implementsCollectionShorthandProp', () => {
     radioGroupImplementsCollectionShorthandProp('items', RadioGroupItem, {
-      mapsValueToProp: 'content',
-      skipArrayOfStrings: true,
+      mapsValueToProp: false,
     })
   })
 

test/specs/lib/factories-test.tsx

@@ -153,7 +153,7 @@ describe('factories', () => {
     })
 
     test('does not throw if passed a function Component', () => {
-      const goodUsage = () => createShorthandFactory(() => <div />, '')
+      const goodUsage = () => createShorthandFactory(() => <div />, 'children')
 
       expect(goodUsage).not.toThrowError()
     })

types/utils.d.ts

@@ -26,6 +26,17 @@ export type Props = ObjectOf<any>
 export type ReactChildren = React.ReactNodeArray | React.ReactNode
 export type ComponentEventHandler<TProps> = (event: React.SyntheticEvent, data: TProps) => void
 
+type ChildrenProps = { children: any }
+export type PropsOf<T> = T extends React.ComponentClass<Extendable<infer TProps>>
+  ? (ChildrenProps & TProps)
+  : T extends React.ComponentClass<infer TProps>
+  ? (ChildrenProps & TProps)
+  : T extends React.StatelessComponent<Extendable<infer TProps>>
+  ? (ChildrenProps & TProps)
+  : T extends React.StatelessComponent<infer TProps>
+  ? (ChildrenProps & TProps)
+  : any
+
 // ========================================================
 // Shorthand Factories
 // ========================================================