feat: add @withTheme decorator

Author: streamich

README.md

@@ -68,7 +68,7 @@ const MyComponent = mock();
      - `FocusSensor`, `withFocus()`, and `@withFocus`
   - [Context](./docs/en/Context.md)
      - [`<Provider>`](./docs/en/Provider.md#provider), [`<Consumer>`](./docs/en/Provider.md#consumer), [`withContext()`](./docs/en/Provider.md#withcontext-hoc), and [`@withContext`](./docs/en/Provider.md#withcontext-decorator)
-     - [`<Theme>`](./docs/en/theme.md#theme), [`<Themed>`](./docs/en/theme.md#themed), [`withTheme()`](./docs/en/theme.md#withtheme), and `@withTheme`
+     - [`<Theme>`](./docs/en/theme.md#theme), [`<Themed>`](./docs/en/theme.md#themed), [`withTheme()`](./docs/en/theme.md#withtheme-hoc), and [`@withTheme`](./docs/en/theme.md#withtheme-decorator)
      - `<CssVars>`
      - [`<Router>`](./docs/en/routing.md#router), [`<Route>`](./docs/en/routing.md#route), [`withRoute()`](./docs/en/routing.md#withroute), `@withRoute`, `go()`, and `<Go>`
      - [`<Translations>`](./docs/en/translate.md#translations), [`<Translate>`](./docs/en/translate.md#translate-or-t), [`<T>`](./docs/en/translate.md#translate-or-t), [`withT()`](./docs/en/translate.md#witht-hoc), and [`@withT`](./docs/en/translate.md#witht-decorator)

docs/en/README.md

@@ -37,7 +37,7 @@
      - `FocusSensor`, `withFocus()`, and `@withFocus`
   - [Context](./Context.md)
      - [`<Provider>`](./Provider.md#provider), [`<Consumer>`](./Provider.md#consumer), [`withContext()`](./Provider.md#withcontext-hoc), and [`@withContext`](./Provider.md#withcontext-decorator)
-     - [`<Theme>`](./theme.md#theme), [`<Themed>`](./theme.md#themed), [`withTheme()`](./theme.md#withtheme), and `@withTheme`
+     - [`<Theme>`](./theme.md#theme), [`<Themed>`](./theme.md#themed), [`withTheme()`](./theme.md#withtheme-hoc), and [`@withTheme`](./theme.md#withtheme-decorator)
      - `<CssVars>`
      - [`<Router>`](./routing.md#router), [`<Route>`](./routing.md#route), [`withRoute()`](./routing.md#withroute), `@withRoute`, `go()`, and `<Go>`
      - [`<Translations>`](./translate.md#translations), [`<Translate>`](./translate.md#translate-or-t), [`<T>`](./translate.md#translate-or-t), [`withT()`](./translate.md#witht-hoc), and [`@withT`](./translate.md#witht-decorator)

docs/en/theme.md

@@ -37,18 +37,19 @@ FaCC theme consumer, re-renders on theme update.
   - `name` - optional, theme name.
 
 
-## `withTheme()`
+## `withTheme()` HOC
 
-HOC theme consumer that ensures your component is enhanced with `theme` property.
+Theme enhancer that ensures your component is injected with `theme` property.
 
 ```ts
-withTheme: (Comp: React.Component, name?: string) => React.Component;
+withTheme: (Comp: React.Component, propName?: string, props?: object) => React.Component;
 ```
 
 , where
 
   - `Comp` - your React component.
-  - `name` - optional, theme name.
+  - `propName` - optional, string, injected prop name.
+  - `props` - optional, object, props to provided to [`<Themed>`](#themed).
 
 Returns a *themed* component that will have a prop named `theme` containing
 theme object.
@@ -69,3 +70,20 @@ const theme = {
   <BlockThemed />
 </Theme>
 ```
+
+
+## `@withTheme` decorator
+
+React component class decorator that injects `theme` into props. You can optionally,
+specify injected prop name and theme name.
+
+Usage
+
+```js
+@withTheme
+@withTheme('')
+@withTheme('specialTheme', {name: 'specialTheme'})
+class Button extends Component {
+
+}
+``

src/shim/__story__/createRef.story.tsx

@@ -13,7 +13,7 @@ class Example extends Component<any, any> {
   };
 
   render () {
-    return <div ref={this.divRef} onClick={this.onClick}>foobar</div>;
+    return <div ref={this.divRef} onClick={this.onClick}>{'See <div> ref in console.'}</div>;
   }
 }
 

src/theme/story.tsx renamed to src/theme/__story__/story.tsx

@@ -1,8 +1,8 @@
-import {createElement as h} from 'react';
+import {createElement as h, Component} from 'react';
 import {storiesOf} from '@storybook/react';
 import {action} from '@storybook/addon-actions';
 import {linkTo} from '@storybook/addon-links';
-import {Theme, Themed, withTheme} from '.';
+import {Theme, Themed, withTheme} from '..';
 
 const theme = {
   color: 'white',
@@ -14,6 +14,19 @@ const Block = ({theme: {color, background}}) =>
 
 const BlockThemed = withTheme(Block);
 
+@withTheme
+class Decorator1 extends Component<any, any> {
+  render () {
+    const {color, background} = this.props.theme;
+
+    return (
+      <div style={{color, background}}>
+        Background: {background}, color: {color}
+      </div>
+    );
+  }
+}
+
 storiesOf('Context/theme', module)
   .add('FaCC', () =>
     <Theme value={theme}>
@@ -26,4 +39,9 @@ storiesOf('Context/theme', module)
     <Theme value={theme}>
       <BlockThemed />
     </Theme>
-  );
+  )
+  .add('Decorator 1', () =>
+    <Theme value={theme}>
+      <Decorator1 />
+    </Theme>
+  )

src/theme/index.ts

@@ -1,5 +1,6 @@
 import {Provider, Consumer, withContext} from '../context';
 import {h, THoc} from '../util';
+import faccToHocc from '../util/faccToHoc';
 
 export interface IThemeProps {
   name?: string;
@@ -22,4 +23,4 @@ export const Themed: React.StatelessComponent<IThemedProps> = (props) => {
   return h(Consumer, {name}, children);
 };
 
-export const withTheme: THoc<any, any> = (Comp, name = 'theme') => withContext(Comp, name, {name});
+export const withTheme = faccToHocc(Themed, 'theme');