feat(utils): add wrapper for the createComponent function (#503)

* -introduced createStardustComponent method

* -renamed export

* -addressed comments

* -addressed comments

* -exported types, refactored typings

* -exported types from function file

* -updated params for the render method inside the CreateStardustComponentConfig
-updated changelog

* -addressed comments: lodash , themes imports

* -changed displayName to be required

Author: mnajdova

CHANGELOG.md

@@ -17,6 +17,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+### Features
+- Add `renderComponent` function in the public API @mnajdova ([#503](https://github.com/stardust-ui/react/pull/503))
+
 ### Fixes
 - Fix the behaviour of `AutoControlledComponent` when `undefined` is passed as a prop value @layershifter ([#499](https://github.com/stardust-ui/react/pull/499))
 

src/index.ts

@@ -125,3 +125,8 @@ export { default as dialogBehavior } from './lib/accessibility/Behaviors/Dialog/
 // Utilities
 //
 export { default as mergeThemes } from './lib/mergeThemes'
+export { createComponent } from './lib'
+export {
+  RenderStardustResultConfig,
+  CreateStardustComponentConfig,
+} from './lib/createStardustComponent'

src/lib/createStardustComponent.tsx

@@ -0,0 +1,29 @@
+import createComponentInternal from './createComponent'
+import * as React from 'react'
+import * as _ from 'lodash'
+import { ComponentSlotClasses } from '../themes/types'
+
+export interface RenderStardustResultConfig {
+  classes: ComponentSlotClasses
+  rtl: boolean
+}
+
+export interface CreateStardustComponentConfig<P> {
+  displayName: string
+  render: (props: P & { stardust: RenderStardustResultConfig }) => React.ReactNode
+}
+
+const createComponent = <P extends {} = {}, S extends {} = {}>({
+  displayName,
+  render,
+}: CreateStardustComponentConfig<P>): React.SFC<P> => {
+  return createComponentInternal<P, S>({
+    displayName,
+    render: (config, props) => {
+      const filteredConfig = _.pick(config, ['classes', 'rtl'])
+      return render(Object.assign({ stardust: filteredConfig }, props))
+    },
+  })
+}
+
+export default createComponent

src/lib/index.ts

@@ -33,3 +33,4 @@ export { default as leven } from './leven'
 export { pxToRem, setHTMLFontSize } from './fontSizeUtility'
 export { customPropTypes }
 export { default as createAnimationStyles } from './createAnimationStyles'
+export { default as createComponent } from './createStardustComponent'