feat: create <Translations> and <Translate>

Author: streamich

src/context/index.ts

@@ -1,19 +1,11 @@
 import {createElement as h} from 'react';
 import {Provider, Consumer} from 'freestyler-context';
+import faccToHoc from '../util/faccToHoc';
 
-export const withContext = (Comp: React.ComponentClass<any> | React.StatelessComponent<any>, name?: string) => {
-  return (props) => {
-    const {contextName = name, ...rest} = props;
-
-    return h(Consumer, {name: contextName}, (value) => {
-      rest[contextName] = value;
-
-      return h(Comp, rest);
-    });
-  };
-};
+const withContext = faccToHoc(Consumer, '');
 
 export {
   Provider,
-  Consumer
+  Consumer,
+  withContext
 };

src/route/__tests__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`route <Route> does basic routing 1`] = `"<div><div>/foo</div><!-- react-empty: 3 --></div>"`;

src/route/__tests__/index.test.tsx

@@ -0,0 +1,34 @@
+import {mount} from 'enzyme';
+import {h} from '../../util';
+import {Router, Route} from '..';
+
+describe('route', () => {
+  describe('<Router>', () => {
+    it('is a component', () => {
+      expect(Router).toBeInstanceOf(Function);
+    });
+  });
+
+  describe('<Route>', () => {
+    it('is a component', () => {
+      expect(Route).toBeInstanceOf(Function);
+    });
+
+    it('does basic routing', () => {
+      const wrapper = mount(
+        <Router route='/foo'>
+          <div>
+            <Route match='/foo'>
+              /foo
+            </Route>
+            <Route match='/bar'>
+              /foo
+            </Route>
+          </div>
+        </Router>
+      );
+
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+  });
+});

src/translate/__story__/story.tsx

@@ -0,0 +1,21 @@
+import {createElement as h} from 'react';
+import {storiesOf} from '@storybook/react';
+import {action} from '@storybook/addon-actions';
+import {linkTo} from '@storybook/addon-links';
+import {LocationSensor} from '../../LocationSensor';
+import {Translations, Translate, T, withT} from '..';
+import ShowDocs from '../../../.storybook/ShowDocs'
+
+storiesOf('Context/translate', module)
+  .add('Documentation', () => h(ShowDocs, {name: 'translate'}))
+  .add('Example', () => (
+    <Translations map={{
+      hello: 'world'
+    }}>
+      <div>
+        <T>{(T) =>
+          <span>{T('omg')}: {T('hello')}</span>
+        }</T>
+      </div>
+    </Translations>
+  ));

src/translate/index.ts

@@ -0,0 +1,53 @@
+import {Component} from 'react';
+import {h, ns} from '../util';
+import {Provider, Consumer} from '../context';
+import faccToHoc from '../util/faccToHoc';
+import renderProp from '../util/renderProp';
+
+export interface ITranslationsProps {
+  map: {[key: string]: string | React.StatelessComponent<any>};
+  ns?: string;
+}
+
+export interface ITranslationsState {
+
+}
+
+export class Translations extends Component<ITranslationsProps, ITranslationsState> {
+  render () {
+    return h(Provider, {
+      name: ns(`T/${this.props.ns}`),
+      value: this.props.map
+    }, this.props.children);
+  }
+}
+
+export interface ITranslateProps {
+  ns?: string;
+}
+
+export interface ITranslateState {
+
+}
+
+export class Translate extends Component<ITranslateProps, ITranslateState> {
+  render () {
+    return h(Consumer, {name: ns(`T/${this.props.ns}`)}, (map) => {
+      const T = (key) => {
+        const value = map[key];
+
+        if (typeof value === 'function') {
+          return value(T);
+        }
+
+        return value || key;
+      };
+
+      return renderProp(this.props, T);
+    });
+  }
+}
+
+export const T = Translate;
+
+export const withT = faccToHoc(Translate, 'T');