move the old theming ideas to another document to have concise read in the readme

Author: nikgraf

README.md

@@ -48,36 +48,7 @@ Provide a simple & handy way to apply a global theme for all the imported compon
 
 While react-themeable is super useful I believe having a way to set a default styling is a crucial feature for a UI library. Most of the time you will use the default theme specific to your product. This avoids adding a lot of theme props through the whole application.
 
-#### Module export
-
-https://github.com/nikgraf/future-react-ui/tree/master/ui-lib
-
-In this version the defaultTheme is exported through a named module export. On line 9, 10, 11 you can see how the default theme is patched with custom classes. (https://github.com/nikgraf/future-react-ui/blob/master/app/index.js#L8) Since this is not so hand it might be useful to have utility function for each library to apply a theme.
-
-#### Static property
-
-https://github.com/nikgraf/future-react-ui/blob/master/ui-lib/StaticProperty/Hint.js
-
-In this version the defaultTheme is attached to the component itself as static property. Compared to the 'Module export' this is a bit more flexible as you can overwrite the whole `theme` object in one go. See line 13-20 for usage. (https://github.com/nikgraf/future-react-ui/blob/master/app/index.js#L13)
-
-#### Theme Component leveraging Context
-
-https://github.com/nikgraf/future-react-ui/blob/master/ui-lib/Context/Hint.js
-
-In this version we leverage context to build a `<Theme />` component that takes a theme as property and passes it down to all child components via React's context. A theme is still a simple JS object as can be seen on line 25-30. (https://github.com/nikgraf/future-react-ui/blob/master/app/index.js#L22). See how it's used here: https://github.com/nikgraf/future-react-ui/blob/master/app/index.js#L56. On one hand this approach is powerful, because you can apply different themes various nesting levels in the render tree.
-
-```
-<Theme theme={baseTheme}>
-  <Theme theme={headerTheme}>
-    <Menu items=['Home', 'About'] />
-  </Theme>
-  <Hint isOpen>Basic open hint without styling.</Hint>
-</Theme>
-```
-
-There is one obvious concern with this approach. There could be name-clashing between libraries that use the same key in the `theme` object. This could be solved by following a namespace convention like prefixing the keys with the npm package name.
-
-#### Factory Pattern
+### Factory Pattern
 
 https://github.com/nikgraf/future-react-ui/tree/master/ui-lib/Factory
 
@@ -97,7 +68,7 @@ export default (Component, theme, defaultProps) => (props) => {
 
 For example these UI
 
-##### Not styled components
+#### Not themed kits & components
 
 - belle-core (unstyled kit)
 - elemental-core (unstyled kit)
@@ -106,7 +77,7 @@ For example these UI
 - react-autocomplete (unstyled component)
 - react-modal (unstyled component)
 
-##### Themed
+#### Themed UI kits
 
 - belle (themed with belle style and based on belle-core)
 - belle-flat (themed with a flat theme and based on belle-core)
@@ -136,6 +107,10 @@ export default (props) => {
 };
 ```
 
+### Factory Pattern
+
+other patterns can be found here: https://github.com/nikgraf/future-react-ui/blob/master/global-theming.md
+
 ## Temporary Conclusion
 
 While the Theme component based idea is pretty powerful the issues make me not like it as a default. For some time I was convinced that Module export or Static property would be one of the winners. Right now I'm pretty convinced the Factory Pattern is the clear winner. It is super flexible and allows people to create their own company UI kits. They can easily provide their own styling as well as set other props as default suited to their needs. Another benefit is that you can easily get started with prototyping by using an already style version (e.g. belle-flat) and replace it later with your custom product style.

global-theming.md

@@ -0,0 +1,28 @@
+#### Module export
+
+https://github.com/nikgraf/future-react-ui/tree/master/ui-lib
+
+In this version the defaultTheme is exported through a named module export. On line 9, 10, 11 you can see how the default theme is patched with custom classes. (https://github.com/nikgraf/future-react-ui/blob/master/app/index.js#L8) Since this is not so hand it might be useful to have utility function for each library to apply a theme.
+
+#### Static property
+
+https://github.com/nikgraf/future-react-ui/blob/master/ui-lib/StaticProperty/Hint.js
+
+In this version the defaultTheme is attached to the component itself as static property. Compared to the 'Module export' this is a bit more flexible as you can overwrite the whole `theme` object in one go. See line 13-20 for usage. (https://github.com/nikgraf/future-react-ui/blob/master/app/index.js#L13)
+
+#### Theme Component leveraging Context
+
+https://github.com/nikgraf/future-react-ui/blob/master/ui-lib/Context/Hint.js
+
+In this version we leverage context to build a `<Theme />` component that takes a theme as property and passes it down to all child components via React's context. A theme is still a simple JS object as can be seen on line 25-30. (https://github.com/nikgraf/future-react-ui/blob/master/app/index.js#L22). On one hand this approach is powerful, because you can apply different themes various nesting levels in the render tree.
+
+```
+<Theme theme={baseTheme}>
+  <Theme theme={headerTheme}>
+    <Menu items=['Home', 'About'] />
+  </Theme>
+  <Hint isOpen>Basic open hint without styling.</Hint>
+</Theme>
+```
+
+There is one obvious concern with this approach. There could be name-clashing between libraries that use the same key in the `theme` object. This could be solved by following a namespace convention like prefixing the keys with the npm package name.