From bbb35cbd1098ca2861d983b391cdabaf615cb5b3 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Tue, 20 Nov 2018 16:21:56 +0100
Subject: [PATCH 1/9] -introduced createStardustComponent method

---
 src/index.ts                        |  1 +
 src/lib/createStardustComponent.tsx | 46 +++++++++++++++++++++++++++++
 src/lib/index.ts                    |  1 +
 3 files changed, 48 insertions(+)
 create mode 100644 src/lib/createStardustComponent.tsx

diff --git a/src/index.ts b/src/index.ts
index 5313e85590..4bf11f33f3 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -125,3 +125,4 @@ export { default as dialogBehavior } from './lib/accessibility/Behaviors/Dialog/
 // Utilities
 //
 export { default as mergeThemes } from './lib/mergeThemes'
+export { createStardustComponent } from './lib'
diff --git a/src/lib/createStardustComponent.tsx b/src/lib/createStardustComponent.tsx
new file mode 100644
index 0000000000..03c84390f1
--- /dev/null
+++ b/src/lib/createStardustComponent.tsx
@@ -0,0 +1,46 @@
+import createComponent from './createComponent'
+import * as React from 'react'
+import * as _ from 'lodash'
+import {
+  ComponentSlotClasses,
+  ThemePrepared,
+  ComponentSlotStylesPrepared,
+  ComponentVariablesObject,
+} from '../themes/types'
+
+export interface RenderStardustResultConfig {
+  classes: ComponentSlotClasses
+  variables: ComponentVariablesObject
+  styles: ComponentSlotStylesPrepared
+  rtl: boolean
+  theme: ThemePrepared
+}
+
+export type RenderStardustComponentCallback<P> = (
+  config: RenderStardustResultConfig,
+  props: P,
+) => any
+
+export interface CreateStardustComponentConfig<P> {
+  displayName?: string
+  render: RenderStardustComponentCallback<P>
+}
+
+const createStardustComponent = <P extends {} = {}, S extends {} = {}>({
+  displayName = 'StardustComponent',
+  render,
+}: CreateStardustComponentConfig<P>): React.SFC<P> => {
+  const StardustComponent: React.SFC<P> = createComponent({
+    displayName,
+    render(config, props) {
+      // TODO add here everything that the client may expect
+      const restrictedConfig = _.pick(config, ['classes', 'variables', 'styles', 'rtl', 'theme'])
+
+      return render(restrictedConfig, props)
+    },
+  })
+  StardustComponent.displayName = displayName
+  return StardustComponent
+}
+
+export default createStardustComponent
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 6312ea683a..dba9d852ce 100644
--- a/src/lib/index.ts
+++ b/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 createStardustComponent } from './createStardustComponent'

From 200b1d1b73afd146a63ec43d625ee454beb370f1 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Tue, 20 Nov 2018 16:29:03 +0100
Subject: [PATCH 2/9] -renamed export

---
 src/index.ts                        | 2 +-
 src/lib/createStardustComponent.tsx | 8 ++++----
 src/lib/index.ts                    | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/index.ts b/src/index.ts
index 4bf11f33f3..ed2c00cd6b 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -125,4 +125,4 @@ export { default as dialogBehavior } from './lib/accessibility/Behaviors/Dialog/
 // Utilities
 //
 export { default as mergeThemes } from './lib/mergeThemes'
-export { createStardustComponent } from './lib'
+export { createComponent } from './lib'
diff --git a/src/lib/createStardustComponent.tsx b/src/lib/createStardustComponent.tsx
index 03c84390f1..61c70a939a 100644
--- a/src/lib/createStardustComponent.tsx
+++ b/src/lib/createStardustComponent.tsx
@@ -1,4 +1,4 @@
-import createComponent from './createComponent'
+import createComponentInternal from './createComponent'
 import * as React from 'react'
 import * as _ from 'lodash'
 import {
@@ -26,11 +26,11 @@ export interface CreateStardustComponentConfig<P> {
   render: RenderStardustComponentCallback<P>
 }
 
-const createStardustComponent = <P extends {} = {}, S extends {} = {}>({
+const createComponent = <P extends {} = {}, S extends {} = {}>({
   displayName = 'StardustComponent',
   render,
 }: CreateStardustComponentConfig<P>): React.SFC<P> => {
-  const StardustComponent: React.SFC<P> = createComponent({
+  const StardustComponent: React.SFC<P> = createComponentInternal({
     displayName,
     render(config, props) {
       // TODO add here everything that the client may expect
@@ -43,4 +43,4 @@ const createStardustComponent = <P extends {} = {}, S extends {} = {}>({
   return StardustComponent
 }
 
-export default createStardustComponent
+export default createComponent
diff --git a/src/lib/index.ts b/src/lib/index.ts
index dba9d852ce..fbe3a41ab0 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -33,4 +33,4 @@ export { default as leven } from './leven'
 export { pxToRem, setHTMLFontSize } from './fontSizeUtility'
 export { customPropTypes }
 export { default as createAnimationStyles } from './createAnimationStyles'
-export { default as createStardustComponent } from './createStardustComponent'
+export { default as createComponent } from './createStardustComponent'

From 25252eef5106896ad677f0e93e2f39e888e8bb2e Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Tue, 20 Nov 2018 17:08:03 +0100
Subject: [PATCH 3/9] -addressed comments

---
 src/lib/createStardustComponent.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/lib/createStardustComponent.tsx b/src/lib/createStardustComponent.tsx
index 61c70a939a..c2a027805a 100644
--- a/src/lib/createStardustComponent.tsx
+++ b/src/lib/createStardustComponent.tsx
@@ -30,17 +30,15 @@ const createComponent = <P extends {} = {}, S extends {} = {}>({
   displayName = 'StardustComponent',
   render,
 }: CreateStardustComponentConfig<P>): React.SFC<P> => {
-  const StardustComponent: React.SFC<P> = createComponentInternal({
+  return createComponentInternal({
     displayName,
     render(config, props) {
       // TODO add here everything that the client may expect
-      const restrictedConfig = _.pick(config, ['classes', 'variables', 'styles', 'rtl', 'theme'])
+      const filteredConfig = _.pick(config, ['classes', 'variables', 'styles', 'rtl', 'theme'])
 
-      return render(restrictedConfig, props)
+      return render(filteredConfig, props)
     },
   })
-  StardustComponent.displayName = displayName
-  return StardustComponent
 }
 
 export default createComponent

From 731ce0f6db7b57a522882bec7f68743ca839b1ba Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Tue, 20 Nov 2018 17:10:45 +0100
Subject: [PATCH 4/9] -addressed comments

---
 src/lib/createStardustComponent.tsx | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/src/lib/createStardustComponent.tsx b/src/lib/createStardustComponent.tsx
index c2a027805a..764beba86b 100644
--- a/src/lib/createStardustComponent.tsx
+++ b/src/lib/createStardustComponent.tsx
@@ -1,19 +1,11 @@
 import createComponentInternal from './createComponent'
 import * as React from 'react'
 import * as _ from 'lodash'
-import {
-  ComponentSlotClasses,
-  ThemePrepared,
-  ComponentSlotStylesPrepared,
-  ComponentVariablesObject,
-} from '../themes/types'
+import { ComponentSlotClasses } from '../themes/types'
 
 export interface RenderStardustResultConfig {
   classes: ComponentSlotClasses
-  variables: ComponentVariablesObject
-  styles: ComponentSlotStylesPrepared
   rtl: boolean
-  theme: ThemePrepared
 }
 
 export type RenderStardustComponentCallback<P> = (
@@ -34,7 +26,7 @@ const createComponent = <P extends {} = {}, S extends {} = {}>({
     displayName,
     render(config, props) {
       // TODO add here everything that the client may expect
-      const filteredConfig = _.pick(config, ['classes', 'variables', 'styles', 'rtl', 'theme'])
+      const filteredConfig = _.pick(config, ['classes', 'rtl'])
 
       return render(filteredConfig, props)
     },

From df3491747a77d3d087252d8d85e1177d903d1bae Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Tue, 20 Nov 2018 17:55:58 +0100
Subject: [PATCH 5/9] -exported types, refactored typings

---
 src/index.ts                        |  1 +
 src/lib/createStardustComponent.tsx | 19 +------------------
 types/utils.d.ts                    | 11 +++++++++++
 3 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/src/index.ts b/src/index.ts
index ed2c00cd6b..221ee935d4 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -126,3 +126,4 @@ export { default as dialogBehavior } from './lib/accessibility/Behaviors/Dialog/
 //
 export { default as mergeThemes } from './lib/mergeThemes'
 export { createComponent } from './lib'
+export { RenderStardustResultConfig, CreateStardustComponentConfig } from '../types/utils'
diff --git a/src/lib/createStardustComponent.tsx b/src/lib/createStardustComponent.tsx
index 764beba86b..ca5d082a7d 100644
--- a/src/lib/createStardustComponent.tsx
+++ b/src/lib/createStardustComponent.tsx
@@ -1,22 +1,7 @@
 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 type RenderStardustComponentCallback<P> = (
-  config: RenderStardustResultConfig,
-  props: P,
-) => any
-
-export interface CreateStardustComponentConfig<P> {
-  displayName?: string
-  render: RenderStardustComponentCallback<P>
-}
+import { CreateStardustComponentConfig } from '../../types/utils'
 
 const createComponent = <P extends {} = {}, S extends {} = {}>({
   displayName = 'StardustComponent',
@@ -25,9 +10,7 @@ const createComponent = <P extends {} = {}, S extends {} = {}>({
   return createComponentInternal({
     displayName,
     render(config, props) {
-      // TODO add here everything that the client may expect
       const filteredConfig = _.pick(config, ['classes', 'rtl'])
-
       return render(filteredConfig, props)
     },
   })
diff --git a/types/utils.d.ts b/types/utils.d.ts
index 7c3dbbff65..87f5620e10 100644
--- a/types/utils.d.ts
+++ b/types/utils.d.ts
@@ -3,6 +3,7 @@
 // ========================================================
 
 import * as React from 'react'
+import { ComponentSlotClasses } from '../src/themes/types'
 
 export type Extendable<T> = T & {
   [key: string]: any
@@ -18,6 +19,16 @@ export type ObjectOf<T> = { [key: string]: T }
 
 export type ObjectOrFunc<TResult, TArg = {}> = ((arg: TArg) => TResult) | TResult
 
+export interface RenderStardustResultConfig {
+  classes: ComponentSlotClasses
+  rtl: boolean
+}
+
+export interface CreateStardustComponentConfig<P> {
+  displayName?: string
+  render: (config: RenderStardustResultConfig, props: P) => React.ReactNode
+}
+
 // ========================================================
 // Props
 // ========================================================

From 73b3286feebf22c01c5075fc0e250a93ad66ef67 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Tue, 20 Nov 2018 18:01:00 +0100
Subject: [PATCH 6/9] -exported types from function file

---
 src/index.ts                        |  5 ++++-
 src/lib/createStardustComponent.tsx | 16 +++++++++++++---
 types/utils.d.ts                    | 11 -----------
 3 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/index.ts b/src/index.ts
index 221ee935d4..ef4b0e8a2f 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -126,4 +126,7 @@ export { default as dialogBehavior } from './lib/accessibility/Behaviors/Dialog/
 //
 export { default as mergeThemes } from './lib/mergeThemes'
 export { createComponent } from './lib'
-export { RenderStardustResultConfig, CreateStardustComponentConfig } from '../types/utils'
+export {
+  RenderStardustResultConfig,
+  CreateStardustComponentConfig,
+} from './lib/createStardustComponent'
diff --git a/src/lib/createStardustComponent.tsx b/src/lib/createStardustComponent.tsx
index ca5d082a7d..8af084faa7 100644
--- a/src/lib/createStardustComponent.tsx
+++ b/src/lib/createStardustComponent.tsx
@@ -1,7 +1,17 @@
 import createComponentInternal from './createComponent'
 import * as React from 'react'
-import * as _ from 'lodash'
-import { CreateStardustComponentConfig } from '../../types/utils'
+import { pick } from 'lodash'
+import { ComponentSlotClasses } from '@stardust-ui/react'
+
+export interface RenderStardustResultConfig {
+  classes: ComponentSlotClasses
+  rtl: boolean
+}
+
+export interface CreateStardustComponentConfig<P> {
+  displayName?: string
+  render: (config: RenderStardustResultConfig, props: P) => React.ReactNode
+}
 
 const createComponent = <P extends {} = {}, S extends {} = {}>({
   displayName = 'StardustComponent',
@@ -10,7 +20,7 @@ const createComponent = <P extends {} = {}, S extends {} = {}>({
   return createComponentInternal({
     displayName,
     render(config, props) {
-      const filteredConfig = _.pick(config, ['classes', 'rtl'])
+      const filteredConfig = pick(config, ['classes', 'rtl'])
       return render(filteredConfig, props)
     },
   })
diff --git a/types/utils.d.ts b/types/utils.d.ts
index 87f5620e10..7c3dbbff65 100644
--- a/types/utils.d.ts
+++ b/types/utils.d.ts
@@ -3,7 +3,6 @@
 // ========================================================
 
 import * as React from 'react'
-import { ComponentSlotClasses } from '../src/themes/types'
 
 export type Extendable<T> = T & {
   [key: string]: any
@@ -19,16 +18,6 @@ export type ObjectOf<T> = { [key: string]: T }
 
 export type ObjectOrFunc<TResult, TArg = {}> = ((arg: TArg) => TResult) | TResult
 
-export interface RenderStardustResultConfig {
-  classes: ComponentSlotClasses
-  rtl: boolean
-}
-
-export interface CreateStardustComponentConfig<P> {
-  displayName?: string
-  render: (config: RenderStardustResultConfig, props: P) => React.ReactNode
-}
-
 // ========================================================
 // Props
 // ========================================================

From 2b78ad5d434535ef0757755446c6c8c10a90b2f1 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Tue, 20 Nov 2018 20:58:45 +0100
Subject: [PATCH 7/9] -updated params for the render method inside the
 CreateStardustComponentConfig -updated changelog

---
 CHANGELOG.md                        | 4 ++++
 src/lib/createStardustComponent.tsx | 8 ++++----
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 616529d2b2..37b9ba756c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,10 @@ 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))
+
+
 <!--------------------------------[ v0.12.0 ]------------------------------- -->
 ## [v0.12.0](https://github.com/stardust-ui/react/tree/v0.12.0) (2018-11-19)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.11.0...v0.12.0)
diff --git a/src/lib/createStardustComponent.tsx b/src/lib/createStardustComponent.tsx
index 8af084faa7..1261944210 100644
--- a/src/lib/createStardustComponent.tsx
+++ b/src/lib/createStardustComponent.tsx
@@ -10,18 +10,18 @@ export interface RenderStardustResultConfig {
 
 export interface CreateStardustComponentConfig<P> {
   displayName?: string
-  render: (config: RenderStardustResultConfig, props: P) => React.ReactNode
+  render: (props: P & { stardust: RenderStardustResultConfig }) => React.ReactNode
 }
 
 const createComponent = <P extends {} = {}, S extends {} = {}>({
   displayName = 'StardustComponent',
   render,
 }: CreateStardustComponentConfig<P>): React.SFC<P> => {
-  return createComponentInternal({
+  return createComponentInternal<P, S>({
     displayName,
-    render(config, props) {
+    render: (config, props) => {
       const filteredConfig = pick(config, ['classes', 'rtl'])
-      return render(filteredConfig, props)
+      return render(Object.assign({ stardust: filteredConfig }, props))
     },
   })
 }

From eb18bf8cee56845478d95b26790586c31f015f85 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Wed, 21 Nov 2018 18:29:49 +0100
Subject: [PATCH 8/9] -addressed comments: lodash , themes imports

---
 src/lib/createStardustComponent.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/lib/createStardustComponent.tsx b/src/lib/createStardustComponent.tsx
index 1261944210..29d5deaf2b 100644
--- a/src/lib/createStardustComponent.tsx
+++ b/src/lib/createStardustComponent.tsx
@@ -1,7 +1,7 @@
 import createComponentInternal from './createComponent'
 import * as React from 'react'
-import { pick } from 'lodash'
-import { ComponentSlotClasses } from '@stardust-ui/react'
+import * as _ from 'lodash'
+import { ComponentSlotClasses } from '../themes/types'
 
 export interface RenderStardustResultConfig {
   classes: ComponentSlotClasses
@@ -20,7 +20,7 @@ const createComponent = <P extends {} = {}, S extends {} = {}>({
   return createComponentInternal<P, S>({
     displayName,
     render: (config, props) => {
-      const filteredConfig = pick(config, ['classes', 'rtl'])
+      const filteredConfig = _.pick(config, ['classes', 'rtl'])
       return render(Object.assign({ stardust: filteredConfig }, props))
     },
   })

From 37ec45a64dfc97f5ad9758ac194ed4df0bc0586b Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Wed, 21 Nov 2018 18:40:55 +0100
Subject: [PATCH 9/9] -changed displayName to be required

---
 src/lib/createStardustComponent.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/createStardustComponent.tsx b/src/lib/createStardustComponent.tsx
index 29d5deaf2b..69313598b8 100644
--- a/src/lib/createStardustComponent.tsx
+++ b/src/lib/createStardustComponent.tsx
@@ -9,12 +9,12 @@ export interface RenderStardustResultConfig {
 }
 
 export interface CreateStardustComponentConfig<P> {
-  displayName?: string
+  displayName: string
   render: (props: P & { stardust: RenderStardustResultConfig }) => React.ReactNode
 }
 
 const createComponent = <P extends {} = {}, S extends {} = {}>({
-  displayName = 'StardustComponent',
+  displayName,
   render,
 }: CreateStardustComponentConfig<P>): React.SFC<P> => {
   return createComponentInternal<P, S>({