add factory pattern

nikgraf · nikgraf · commit 8053c79eedce · 2016-01-31T19:34:51.000-08:00
diff --git a/README.md b/README.md
@@ -77,9 +77,70 @@ In this version we leverage context to build a `<Theme />` component that takes
 
 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
+
+https://github.com/nikgraf/future-react-ui/tree/master/ui-lib/Factory
+
+In this version we assume there is a package which includes a completely unstyled version of the UI kits while there is a second one which takes all the needed components and return themed components buy leveraging a factory function.
+
+```
+/**
+ * Returns a the provided component as themed component.
+ *
+ * Note: defaultProps could be useful for default special behavioural in
+ * different ui libraries.
+ */
+export default (Component, theme, defaultProps) => (props) => {
+  return <Component {...defaultProps} theme={theme} {...props} />;
+};
+```
+
+For example these UI
+
+##### Not styled components
+
+- belle-core (unstyled kit)
+- elemental-core (unstyled kit)
+- react-toolbox-core (unstyled kit)
+- react-select (unstyled component)
+- react-autocomplete (unstyled component)
+- react-modal (unstyled component)
+
+##### Themed
+
+- belle (themed with belle style and based on belle-core)
+- belle-flat (themed with a flat theme and based on belle-core)
+- elemental (themed with the elemental theme and based on elemental-core)
+- react-toolbox (themed with the material theme and based on react-toolbox-core)
+- your-product-ui-lib (themed with your company style and based on belle-core[Toggle, Rating] & react-select & react-modal)
+- your-friends-product-ui-lib (themed with their company style and based on react-select & react-modal & react-autocomplete)
+
+Usage:
+```
+import Hint from 'elemental/Hint';
+
+const customTheme = {
+  questionMark: 'custom-class-for-question-mark-gold',
+  visibleContent: 'custom-class-visible-content',
+};
+
+export default (props) => {
+  return (
+    <div>
+      {/* Globally theme component */}
+      <Hint />
+      {/* Overwriting the theme locally for this case */}
+      <Hint theme={theme}/>
+    </div>
+  );
+};
+```
+
 ## Temporary Conclusion
 
-While the Theme component based idea is pretty powerful it's issues make me not having this as a default way of doing things. I'm not sure if there are some up/downsides between Module export vs Static property, but currently I'm leaning more to the static property implementation. If you have some ideas/feedback please reach out to me and let's discuss. (Github Issues might be best, but Twitter, Email, Skype, Hangout works as well)
+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.
+
+If you have some ideas/feedback please reach out to me and let's discuss. (Github Issues might be best, but Twitter, Email, Skype, Hangout works as well)
 
 ## License
 
diff --git a/app/index.html b/app/index.html
@@ -17,6 +17,9 @@
     .custom-class-for-question-mark-blue {
       color: blue;
     }
+    .custom-class-for-question-mark-gold {
+      color: gold;
+    }
    </style>
 </head>
 <body>
diff --git a/app/index.js b/app/index.js
@@ -22,13 +22,24 @@ Hint2.theme.questionMark = 'custom-class-for-question-mark-red';
 /* Context based theming */
 import Hint3 from 'ui-lib/Context/Hint';
 import Theme from 'ui-lib/Context/Theme';
-const theme = {
+const contextTheme = {
   hint: {
     questionMark: 'custom-class-for-question-mark-blue',
     visibleContent: 'custom-class-visible-content',
   },
 };
 
+/* Factory based theming
+ * also see /ui-lib/Factory/belle/Hint or /ui-lib/Factory/elemental/Hint
+ */
+import Hint4Unstyled from '../ui-lib/Factory/ui-core/Hint';
+import createComponent from '../ui-lib/Factory/react-themeable/createComponent';
+const theme = {
+  questionMark: 'custom-class-for-question-mark-gold',
+  visibleContent: 'custom-class-visible-content',
+};
+const Hint4 = createComponent(Hint, theme);
+
 window.React = React;
 
 const App = () => {
@@ -41,7 +52,6 @@ const App = () => {
 
       <br /><br />
 
-
       <h2>Unstyled (globally patched classNames)</h2>
       <h3>Global theme as module export</h3>
       <Hint>Basic closed hint without styling.</Hint>
@@ -54,11 +64,15 @@ const App = () => {
 
 
       <h3>Global theme as Theme component leveraging context</h3>
-      <Theme theme={theme}>
+      <Theme theme={contextTheme}>
         <Hint3>Basic closed hint without styling.</Hint3>
         <Hint3 isOpen>Basic open hint without styling.</Hint3>
       </Theme>
 
+
+      <h3>Factory to create Components with a provided Theme</h3>
+      <Hint4>Basic closed hint without styling.</Hint4>
+      <Hint4 isOpen>Basic open hint without styling.</Hint4>
     </div>
   );
 };
diff --git a/ui-lib/Factory/belle/Hint.js b/ui-lib/Factory/belle/Hint.js
@@ -0,0 +1,13 @@
+import Hint from '../ui-core/Hint';
+import createComponent from '../react-themeable/createComponent';
+
+// An example of generated hashclasses by either JSS, CSSModules or any other
+// CSS libraries which generates classes.
+const belleTheme = {
+  base: 'belle-hint-WQE73V',
+  questionMark: 'belle-hint-FD7ASD',
+  visibleContent: 'belle-hint-KASD34',
+  hiddenContent: 'belle-hint-456BFD',
+};
+
+export default createComponent(Hint, belleTheme);
diff --git a/ui-lib/Factory/elemental/Hint.js b/ui-lib/Factory/elemental/Hint.js
@@ -0,0 +1,12 @@
+import Hint from '../ui-core/Hint';
+import createComponent from '../react-themeable/createComponent';
+
+// An example of making use of Elemental's global css classes.
+const elementalTheme = {
+  base: 'elemental-hint-wrapper',
+  questionMark: 'elemental-hint-questionmark',
+  visibleContent: 'elemental-hint-content',
+  hiddenContent: 'elemental-hint-hidden-content',
+};
+
+export default createComponent(Hint, elementalTheme);
diff --git a/ui-lib/Factory/react-themeable/createComponent.js b/ui-lib/Factory/react-themeable/createComponent.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+/**
+ * Returns a the provided component as themed component.
+ *
+ * Note: defaultProps could be useful for default special behavioural in
+ * different ui libraries.
+ */
+export default (Component, theme, defaultProps) => (props) => {
+  return <Component {...defaultProps} theme={theme} {...props} />;
+};
diff --git a/ui-lib/Factory/ui-core/Hint.js b/ui-lib/Factory/ui-core/Hint.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+// This file would be an example of an unstyled component which can be used if
+// directly provided with a theme as an alternative to compose your custom UI kit
+// with react-themeable's createComponent.
+export default ({ children, isOpen = false, theme = {} }) => {
+  return (
+    <div className={theme.base}>
+      <div className={theme.questionMark}>?</div>
+      <div className={isOpen ? theme.visibleContent : theme.hiddenContent}>
+        {children}
+      </div>
+    </div>
+  );
+};
