Add some component

core/src/main/kotlin/materialui/components/MaterialElementBuilder.kt

@@ -48,7 +48,7 @@ abstract class MaterialElementBuilder<T: Tag, Props: StandardProps>(
 
     var Tag.classes: Any? by materialProps
     var Tag.className: String? by materialProps
-    var Tag.component: String? by materialProps
+    var Tag.component: Any? by materialProps
 
     init {
         attrs.classes(classMap)

core/src/main/kotlin/materialui/components/StandardProps.kt

@@ -1,5 +1,7 @@
 package materialui.components
 
+import kotlinx.css.StyledElement
+import materialui.reacttransiton.RTransitionGroupProps
 import react.dom.DOMProps
 import kotlin.reflect.KProperty
 
@@ -10,16 +12,42 @@ external interface StandardProps : DOMProps {
 
 operator fun StandardProps.get(key: String): Any? = asDynamic()[key]
 
+inline operator fun <reified E: Enum<E>> StandardProps.get(key: String): E?{
+    val value = asDynamic()[key]
+    return when (value) {
+        null -> null
+        undefined -> null
+        else -> enumValueOf<E>(value.toString())
+    }
+}
+
+inline operator fun <reified E: Enum<E>> StandardProps.set(key: String,value: E?) {
+    asDynamic()[key] = when (value) {
+            null -> undefined
+            else -> value.toString()
+        }
+}
+
 operator fun StandardProps.getValue(thisRef: Any?, property: KProperty<*>): dynamic
         = asDynamic()[property.name]
 
 operator fun StandardProps.setValue(thisRef: Any?, property: KProperty<*>, value: dynamic) {
     asDynamic()[property.name] = value
 }
 
-inline operator fun <reified T: Enum<T>> StandardProps.getValue(thisRef: Any?, property: KProperty<*>): T?
-        = (asDynamic()[property.name] as String?)?.let { name -> enumValues<T>().find { it.toString() == name } }
+//issue:problem with type argument <T: Enum<T>?> its not bounds enumValueOf<T>
+inline operator fun <reified T: Enum<T>> StandardProps.getValue(thisRef: Any?, property: KProperty<*>): T?{
+    val value = asDynamic()[property.name]
+    return when (value) {
+        null -> null
+        undefined -> null
+        else -> enumValueOf<T>(value.toString())
+    }
+}
 
 inline operator fun <reified T: Enum<T>> StandardProps.setValue(thisRef: Any?, property: KProperty<*>, value: T?) {
-    asDynamic()[property.name] = value?.toString()
+    asDynamic()[property.name] = when (value) {
+            null -> undefined
+            else -> value.toString()
+        }
 }

core/src/main/kotlin/materialui/components/dialog/DialogElementBuilder.kt

@@ -15,10 +15,7 @@ import materialui.components.paper.PaperProps
 import materialui.components.paper.paper
 import materialui.components.setValue
 import materialui.reacttransiton.RTransitionProps
-import react.Component
-import react.RBuilder
-import react.RClass
-import react.RProps
+import react.*
 import kotlin.reflect.KClass
 
 class DialogElementBuilder internal constructor(
@@ -37,10 +34,13 @@ class DialogElementBuilder internal constructor(
     var Tag.TransitionProps: RProps? by materialProps
 
     fun <P: RProps, C: Component<P, *>> Tag.paperComponent(kClass: KClass<C>) {
-        @Suppress("UNCHECKED_CAST_TO_EXTERNAL_INTERFACE")
-        @Suppress("UNCHECKED_CAST")
-        materialProps.PaperComponent = kClass.js as RClass<P>
+        materialProps.PaperComponent = kClass.rClass
     }
+
+    fun <P: PaperProps> Tag.paperComponent(component: FunctionalComponent<P>) {
+        materialProps.PaperComponent = component
+    }
+
     fun Tag.paperComponent(tagName: String) { materialProps.PaperComponent = tagName }
     fun Tag.paperProps(block: PaperElementBuilder<DIV, PaperProps>.() -> Unit) {
         PaperProps = RBuilder().paper(block = block).props

core/src/main/kotlin/materialui/components/textfield/TextFieldElementBuilder.kt

@@ -5,6 +5,7 @@ import kotlinx.css.Color
 import kotlinx.html.*
 import kotlinx.html.stream.createHTML
 import materialui.components.formcontrol.FormControlElementBuilder
+import materialui.components.get
 import materialui.components.getValue
 import materialui.components.input.InputElementBuilder
 import materialui.components.input.InputProps
@@ -13,7 +14,9 @@ import materialui.components.inputlabel.InputLabelElementBuilder
 import materialui.components.inputlabel.inputLabel
 import materialui.components.select.SelectElementBuilder
 import materialui.components.select.select
+import materialui.components.set
 import materialui.components.setValue
+import materialui.components.textfield.enums.TextFieldSize
 import react.*
 import kotlin.js.Date
 
@@ -45,6 +48,9 @@ class TextFieldElementBuilder<T: Tag> internal constructor(
     var Tag.rowsMax: Any? by materialProps
     var Tag.select: Boolean? by materialProps
     var Tag.SelectProps: RProps? by materialProps
+    var Tag.size: TextFieldSize? // issue: Enum? problem with <reified T: Enum<T>> StandardProps.getValue()
+        get() = materialProps.get<TextFieldSize>("size")
+        set(value) { materialProps.set("size",value) }
     var Tag.type: InputType? by materialProps
     var Tag.value: Any? by materialProps
 

core/src/main/kotlin/materialui/components/textfield/enums/TextFieldSize.kt

@@ -0,0 +1,6 @@
+package materialui.components.textfield.enums
+
+@Suppress("EnumEntryName")
+enum class TextFieldSize{
+    small,medium
+}

core/src/main/kotlin/materialui/components/textfield/textField.kt

@@ -30,6 +30,7 @@ external interface TextFieldProps : FormControlProps {
     var rowsMax: Any?
     var select: Boolean?
     var SelectProps: SelectProps?
+    var size: String?
     var type: String?
     var value: Any?
 }

core/src/main/kotlin/materialui/imports.kt

@@ -112,6 +112,8 @@ import materialui.components.toolbar.ToolbarProps
 import materialui.components.tooltip.TooltipProps
 import materialui.components.typography.TypographyProps
 import materialui.components.zoom.ZoomProps
+import materialui.styles.GenerateClassNameOptions
+import materialui.styles.JssOptions
 import materialui.styles.breakpoint.Breakpoints
 import materialui.styles.breakpoint.options.BreakpointsOptions
 import materialui.styles.mixins.Mixins
@@ -120,6 +122,8 @@ import materialui.styles.muitheme.MuiTheme
 import materialui.styles.muitheme.options.MuiThemeOptions
 import materialui.styles.palette.Palette
 import materialui.styles.palette.options.PaletteOptions
+import materialui.styles.stylesprovider.GenerateId
+import materialui.styles.stylesprovider.StylesProviderProps
 import materialui.styles.typography.Typography
 import react.RClass
 import react.RComponent
@@ -237,6 +241,8 @@ internal external val Typography: RClass<TypographyProps>
 internal external val Zoom: RClass<ZoomProps>
 
 internal external val ThemeProvider: RComponent<RProps, RState>
+internal external val StylesProvider: RComponent<StylesProviderProps, RState>
+
 
 @JsName("createBreakpoints")
 internal external fun rawCreateBreakpoints(breakpoints: BreakpointsOptions): Breakpoints
@@ -251,6 +257,9 @@ internal external fun rawMakeStyles(styles: dynamic, option: dynamic): MakeStyle
 @JsName("withStyles")
 internal external fun rawWithStyles(styles: dynamic, option: dynamic): WithStyles
 
+external fun jssPreset(): JssOptions
+external fun createGenerateClassName(option: GenerateClassNameOptions): GenerateId
+
 external fun createMixins(breakpoints: Breakpoints, spacing: dynamic, mixins: MixinsOptions): Mixins
 external fun useTheme(): MuiTheme
 

core/src/main/kotlin/materialui/styles/JssPreset.kt

@@ -0,0 +1,5 @@
+package materialui.styles
+
+external interface JssOptions {
+    var plugins: Array<dynamic>
+}

core/src/main/kotlin/materialui/styles/StylesBuilder.kt

@@ -17,15 +17,29 @@ class StylesBuilder<P: RProps> internal constructor(
         css["@global"] = CSSBuilder().apply(block).toDynamic
     }
 
-    operator fun String.invoke(block: CSSBuilder.(P) -> Unit): String {
-        css[this] = { props: P -> CSSBuilder().apply { block(props) }.toDynamic }
+    operator fun String.invoke(block: CSSBuilder.() ->Unit): String {
+        css[this] = CSSBuilder().apply(block).toDynamic
         return this
     }
 
     operator fun String.invoke(builder: CSSBuilder): String {
         css[this] = builder.toDynamic
         return this
     }
+
+    fun String.staticStyle(block: CSSBuilder.() ->Unit): String {
+        css[this] = CSSBuilder().apply(block).toDynamic
+        return this
+    }
+
+    fun String.dynamicStyle(block: CSSBuilder.(P) ->Unit): String {
+        css[this] = { props: P -> CSSBuilder().apply { block(props) }.toDynamic }
+        return this
+    }
+
+    fun CSSBuilder.flip(enable: Boolean) {
+        declarations["flip"] = enable
+    }
 }
 
 internal val CSSBuilder.toDynamic: Any
@@ -35,8 +49,9 @@ internal val CSSBuilder.toDynamic: Any
         }
 
         declarations.forEach { (key, value) ->
-            this[key.hyphenize()] = when (value) {
-                is CSSBuilder -> value.toDynamic
+            this[key.hyphenize()] = when {
+                key == "flip" -> value //keep boolean value parse in jss
+                value is CSSBuilder -> value.toDynamic
                 else -> value.toString()
             }
         }

core/src/main/kotlin/materialui/styles/createGenerateClassName.kt

@@ -0,0 +1,23 @@
+package materialui.styles
+
+import kotlinext.js.jsObject
+import materialui.createGenerateClassName
+import materialui.styles.stylesprovider.GenerateId
+
+external interface GenerateClassNameOptions {
+    var disableGlobal: Boolean?
+    var productionPrefix: String?
+    var seed: String?
+}
+
+fun createGenerateClassName(
+    disableGlobal: Boolean? = null,
+    productionPrefix: String? = null,
+    seed: String? = null
+): GenerateId{
+    return createGenerateClassName(jsObject{
+        disableGlobal?.let {this.disableGlobal = it }
+        productionPrefix?.let { this.productionPrefix = it }
+        seed?. let { this.seed = it }
+    })
+}

core/src/main/kotlin/materialui/styles/muitheme/options/MuiThemeOptions.kt

@@ -1,5 +1,6 @@
 package materialui.styles.muitheme.options
 
+import kotlinext.js.Object
 import kotlinext.js.jsObject
 import kotlinx.css.Direction
 import kotlinx.css.properties.BoxShadows
@@ -19,9 +20,10 @@ external interface MuiThemeOptions {
     var palette: PaletteOptions?
     var typography: TypographyOptions?
     var shape: ShapeOptions?
-    var spacing: dynamic?
+    var spacing: dynamic
     var transitions: TransitionsOptions?
     var zIndex: ZIndexOptions?
+    var overrides: Object?
 }
 
 var MuiThemeOptions.direction: Direction? by DirectionDelegate
@@ -42,3 +44,4 @@ fun MuiThemeOptions.typography(block: TypographyOptions.() -> Unit) { typography
 fun MuiThemeOptions.shape(block: ShapeOptions.() -> Unit) { shape = (shape ?: jsObject { }).apply(block) }
 fun MuiThemeOptions.transitions(block: TransitionsOptions.() -> Unit) { transitions = (transitions ?: jsObject { }).apply(block) }
 fun MuiThemeOptions.zIndex(block: ZIndexOptions.() -> Unit) { zIndex = (zIndex ?: jsObject { }).apply(block) }
+fun MuiThemeOptions.overrides(block: dynamic.() -> Unit) { overrides = (overrides ?: jsObject {  }).apply(block) }

core/src/main/kotlin/materialui/styles/stylesprovider/StyleProviderBuilder.kt

@@ -0,0 +1,16 @@
+package materialui.styles.stylesprovider
+
+import kotlinext.js.jsObject
+import materialui.styles.muitheme.MuiTheme
+import react.*
+
+class StyleProviderBuilder internal constructor(
+    val type: RComponent<StylesProviderProps, RState>,
+    private val props: StylesProviderProps = jsObject { }
+) : RBuilder() {
+    fun attrs(handler: StylesProviderProps.() -> Unit) {
+        props.handler()
+    }
+
+    fun create() = createElement(type, props, *childList.toTypedArray())
+}

core/src/main/kotlin/materialui/styles/stylesprovider/StylesProvider.kt

@@ -0,0 +1,25 @@
+package materialui.styles.stylesprovider
+
+import kotlinext.js.Object
+import materialui.StylesProvider
+import materialui.ThemeProvider
+import materialui.styles.muitheme.MuiTheme
+import materialui.styles.themeprovider.ThemeProviderBuilder
+import react.RBuilder
+import react.RProps
+
+typealias GenerateId = Object
+typealias Jss = Object
+
+external interface StylesProviderProps: RProps{
+    var disableGeneration: Boolean?
+    var generateClassName: GenerateId?
+    var injectFirst: Boolean?
+    var jss: Jss
+    var sheetsCache: dynamic
+    var sheetsManager: dynamic
+    var sheetsRegistry: dynamic
+}
+
+fun RBuilder.styleProvider(block: StyleProviderBuilder.() -> Unit) =
+    child(StyleProviderBuilder(StylesProvider).apply(block).create())

core/src/main/kotlin/materialui/styles/themeprovider/ThemeProviderBuilder.kt

@@ -18,14 +18,4 @@ class ThemeProviderBuilder internal constructor(
     }
 
     fun create() = createElement(type, props, *childList.toTypedArray())
-
-    var RProps.disableStylesGeneration: Boolean
-        get() = @Suppress("UnsafeCastFromDynamic") props.asDynamic()["disableStylesGeneration"]
-        set(value) { props.asDynamic()["disableStylesGeneration"] = value }
-    var RProps.sheetsCache: Any
-        get() = @Suppress("UnsafeCastFromDynamic") props.asDynamic()["sheetsCache"]
-        set(value) { props.asDynamic()["sheetsCache"] = value }
-    var RProps.sheetsManager: Any
-        get() = @Suppress("UnsafeCastFromDynamic") props.asDynamic()["sheetsManager"]
-        set(value) { props.asDynamic()["sheetsManager"] = value }
 }