fix(docs): createComponent typings and documentation

CHANGELOG.md

@@ -17,6 +17,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+### Fixes
+- Fix `createComponent()` typings and documentation examples @Bugaa92 ([#954](https://github.com/stardust-ui/react/pull/954))
+
 ### Documentation
 - Fix the sidebar missing items for docsite @alinais ([#971](https://github.com/stardust-ui/react/pull/971))
 

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

@@ -12,7 +12,7 @@ const centered: ICSSInJSStyle = {
   textAlign: 'center',
 }
 
-const LabelledButton: React.SFC<LabelledButtonProps> = createComponent<LabelledButtonProps>({
+const LabelledButton = createComponent<LabelledButtonProps>({
   displayName: 'LabelledButton',
   render: ({ stardust, ...props }) => {
     const { iconName, label, active, onClick } = props

docs/src/views/IntegrateCustomComponents.tsx

@@ -21,7 +21,7 @@ interface StyledButtonProps {
   children?: ReactChildren
 }
 
-const StyledButton: React.SFC<StyledButtonProps> = createComponent<StyledButtonProps>({
+const StyledButton = createComponent<StyledButtonProps>({
   displayName: 'StyledButton',
   render({ stardust, children }) {
     const { classes } = stardust
@@ -48,7 +48,7 @@ export default () => (
 
         const StyledButton = createComponent({
           displayName: 'StyledButton',
-          render: ({stardust, className, children}) => {
+          render: ({ stardust, children }) => {
             const { classes } = stardust
             return <button className={classes.root}>{children}</button>
           }
@@ -75,7 +75,7 @@ export default () => (
             },
             componentStyles: {
               StyledButton: {
-                root: ({ props, variables, theme: { siteVariables } }) => ({
+                root: ({ variables, theme: { siteVariables } }) => ({
                   backgroundColor: siteVariables.colors.primary[500],
                   color: variables.color,
                 }),
@@ -257,14 +257,14 @@ export default () => (
     </p>
     <ExampleSnippet
       value={`
-        import { buttonBehavior } from '@stardust-ui/react'
+        import { createComponent, buttonBehavior } from '@stardust-ui/react'
 
         const StyledButton = createComponent({
           displayName: 'StyledButton',
           defaultProps: {
             accessibility: buttonBehavior
           },
-          render: ({stardust, className, children}) => {
+          render: ({ stardust, children }) => {
             const { classes, accessibility } = stardust
             return <button {...accessibility.attributes.root} className={classes.root}>{children}</button>
           }

packages/react/src/lib/createComponent.tsx

@@ -5,6 +5,7 @@ import renderComponent, { RenderResultConfig } from './renderComponent'
 import { AccessibilityActionHandlers } from './accessibility/types'
 import { FocusZone } from './accessibility/FocusZone'
 import { createShorthandFactory } from './factories'
+import { ObjectOf } from '../types'
 
 export interface CreateComponentConfig<P> {
   displayName: string
@@ -22,7 +23,7 @@ export type CreateComponentReturnType<P> = React.FunctionComponent<P> & {
   create: Function
 }
 
-const createComponent = <P extends {} = {}, S extends {} = {}>({
+const createComponent = <P extends ObjectOf<any> = any>({
   displayName = 'StardustComponent',
   className = 'ui-stardust-component',
   shorthandPropName = 'children',

packages/react/src/lib/createStardustComponent.tsx

@@ -1,8 +1,10 @@
 import createComponentInternal from './createComponent'
 import * as React from 'react'
 import * as _ from 'lodash'
+
 import { ComponentSlotClasses, ComponentSlotStylesPrepared } from '../themes/types'
 import { AccessibilityBehavior, AccessibilityActionHandlers } from './accessibility/types'
+import { ObjectOf } from '../types'
 
 export interface RenderStardustResultConfig {
   accessibility: AccessibilityBehavior
@@ -18,13 +20,13 @@ export interface CreateStardustComponentConfig<P> {
   actionHandlers?: AccessibilityActionHandlers
 }
 
-const createComponent = <P extends {} = {}, S extends {} = {}>({
+const createComponent = <P extends ObjectOf<any> = any>({
   displayName,
   render,
   defaultProps,
   actionHandlers,
-}: CreateStardustComponentConfig<P>): React.SFC<P> => {
-  return createComponentInternal<P, S>({
+}: CreateStardustComponentConfig<P>): React.FC<P> => {
+  return createComponentInternal<P>({
     displayName,
     render: (config, props) => {
       const filteredConfig = _.pick(config, ['accessibility', 'classes', 'rtl', 'styles'])