docs: add translation docs

Author: streamich

README.md

@@ -72,7 +72,7 @@ const MyComponent = mock();
      - [`<Theme>`](./docs/theme.md#theme), [`<Themed>`](./docs/theme.md#themed), [`withTheme()`](./docs/theme.md#withtheme), and `@withTheme`
      - `<CssVars>`
      - [`<Router>`](./docs/route.md#router), [`<Route>`](./docs/route.md#route), [`withRoute()`](./docs/route.md#withroute), `@withRoute`, `go()`, and `<Go>`
-     - `<Translations>`, `<Translate>`, `<T>`, `withT()`, and `@withT`
+     - [`<Translations>`](./docs/translate.md#translations), [`<Translate>`](./docs/translate.md#translate), [`<T>`](./docs/translate.md#translate), [`withT()`](./docs/translate.md#witht-hoc), and [`@withT`](./docs/translate.md#witht-decorator)
   - [CSS resets](./docs/CSS-resets.md)
      - [`<CssResetEricMeyer>`](./docs/reset/CssResetEricMeyer.md) and [`<CssResetEricMeyerCondensed>`](./docs/reset/CssResetEricMeyerCondensed.md)
      - [`<CssResetMinimalistic>`](./docs/reset/CssResetMinimalistic.md), [`<CssResetMinimalistic2>`](./docs/reset/CssResetMinimalistic2.md), and [`<CssResetMinimalistic3>`](./docs/reset/CssResetMinimalistic3.md)

docs/translate.md

@@ -0,0 +1,100 @@
+# Translate
+
+Provides translation API using [context](./context.md) interfaces.
+
+
+## `<Translations>`
+
+Translation provider, use it to broadcast your translation map. You can have multiple nested
+translations providers, where child provider will overwrite parent's translations. Also, you
+can have different translation providers at the same time, using the namespace `ns` prop.
+
+### Usage
+
+```jsx
+import {Translations} from 'libreact/lib/translate';
+
+<Translations map={{
+  key: 'value',
+  bye: 'ciao'
+}}>
+  <App />
+</Translations>
+```
+
+### Props
+
+```ts
+interface ITranslationsProps {
+  map: {[key: string]: string | ((T, ...args) => string)};
+  ns?: string;
+}
+```
+
+, where
+
+  - `map` - required, object, a dictionary of translations.
+  - `ns` - optional, string, namespace.
+
+
+## `<Translate>` or `<T>`
+
+Translation consumer render prop component that receives translation function `T`, which has the following signature
+
+```ts
+T: (key: string, ...args) => string;
+```
+
+`<Translate>` component has also a shorthand alias `<T>` component.
+
+### Usage
+
+```jsx
+import {Translations, T} from 'libreact/lib/translate';
+
+<Translations map={{
+  key: 'value',
+  bye: 'ciao'
+}}>
+  <T>{(t) =>
+    <span>Goodbye is ${t('bye')}</span>
+  }</T>
+</Translations>
+```
+
+### Props
+
+```ts
+interface ITranslateProps {
+  ns?: string;
+}
+```
+
+, where
+
+  - `ns` - optional, string, namespace.
+
+
+## `withT()` HOC
+
+`withT` is an enhancer that injects `T` function into your component.
+
+```jsx
+import {withT} from 'libreact/lib/translate';
+
+const MyCompWithT = withT(MyComp);
+```
+
+
+## `@withT` decorator
+
+Component class decorator that injects `T` function into your component.
+
+```jsx
+import {withT} from 'libreact/lib/translate';
+
+@withT
+class MyComp extends Component {
+
+}
+```