chore: add docs build script

Author: streamich

.gitignore

@@ -9,3 +9,4 @@ yarn.lock
 /modules/
 /.vscode/
 .DS_Store
+/dist_docs/

.npmignore

@@ -13,3 +13,4 @@ yarn.lock
 /test/
 /.vscode/
 .DS_Store
+/dist_docs/

package.json

@@ -65,26 +65,30 @@
     "typescript": "2.6.2",
     "webpack": "3.10.0",
     "semantic-release": "^12.2.4",
-    "gitbook-cli": "2.3.2"
+    "gitbook-cli": "2.3.2",
+    "glob": "^7.1.2",
+    "mkdirp": "0.5.1"
   },
   "config": {
     "commitizen": {
       "path": "./node_modules/mol-conventional-changelog"
     }
   },
   "scripts": {
-    "clean": "rimraf lib modules",
+    "clean": "rimraf lib modules && npm run docs:clean",
     "build": "npm run clean && gulp build-ts && gulp build-modules",
     "start": "npm run storybook",
-    "test": "npm run test:server && npm run test:client",
     "semantic-release": "semantic-release",
+    "test": "npm run test:server && npm run test:client",
     "test:server": "mocha -r ts-node/register src/**/*.test-server.ts*",
     "test:client": "jest",
     "test:client:coverage": "jest --coverage",
     "test:watch": "jest --watch",
     "test:story": "start-storybook -p 6007",
     "test:story:build": "build-storybook",
-    "docs:watch": "gitbook serve ./docs"
+    "docs:watch": "gitbook serve ./docs",
+    "docs:clean": "rimraf dist_docs",
+    "docs:build": "node ./scripts/build_docs.js"
   },
   "jest": {
     "moduleFileExtensions": [

scripts/build_docs.js

@@ -0,0 +1,40 @@
+const glob = require('glob');
+const {join, sep, relative} = require('path');
+const {copyFileSync} = require('fs');
+const mkdirp = require('mkdirp');
+
+const ROOT = join(__dirname, '..');
+const SRC = join(ROOT, 'src');
+const DOCS = join(ROOT, 'docs');
+const DOCS_BUILD = join(ROOT, 'dist_docs');
+
+const copy = (src, dest) => {
+  const targetDir = join(dest, '..');
+
+  mkdirp.sync(targetDir);
+  copyFileSync(src, dest);
+};
+
+const copyInlineDocsFile = (srcFile) => {
+  const steps = srcFile.split(sep);
+  const indexDocs = steps.lastIndexOf('__docs__');
+  const name = steps[indexDocs - 1];
+  const lang = steps[indexDocs + 1];
+  const relSteps = steps.slice(indexDocs + 2);
+  const targetFile = join(DOCS_BUILD, lang, ...relSteps);
+
+  copy(srcFile, targetFile);
+};
+
+const copyToBuildFolder = (srcFile) => {
+  const relPath = relative(DOCS, srcFile);
+  const targetFile = join(DOCS_BUILD, relPath);
+
+  copy(srcFile, targetFile);
+};
+
+const inlineDocFiles = glob.sync(`${SRC}/**/__docs__/**/*.md`);
+const docFiles = glob.sync(`${DOCS}/**/**/*`);
+
+inlineDocFiles.forEach(copyInlineDocsFile);
+docFiles.forEach(copyToBuildFolder);

src/Alert/__docs__/en/Alert.md

@@ -0,0 +1,16 @@
+# `<Alert>`
+
+Uses [`Window.alert()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/alert) to display message ot a user.
+
+## Usage
+
+```jsx
+import {Alert} from 'libreact/lib/Alert';
+
+<Alert show text='Hello world' />
+```
+
+## Props
+
+  - `show` - boolean, optional, whether to show the alert.
+  - `text` - string, require, string message to display to the user.

src/Audio/__docs__/en/Audio.md

@@ -0,0 +1,111 @@
+# `<Audio>`
+
+FaCC that creates an `<audio>` element to play audio tracks, re-renders on audio state changes.
+
+## Usage
+
+```jsx
+import {Audio} from 'libreact/lib/Audio';
+
+<Audio autoPlay src='https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3'>{(control, state) => {
+  JSON.stringify(state, null, 4)
+}}</Audio>
+```
+
+
+## Props
+
+In addition to props below also accepts all [React's media events](https://reactjs.org/docs/events.html#media-events).
+
+```tsx
+interface IAudioProps {
+  src: string;
+  autoPlay?: boolean;
+  loop?: boolean;
+  muted?: boolean;
+  preload?: 'none' | 'metadata' | 'auto';
+  volume?: number;
+  noJs?: React.ReactElement<any>;
+}
+```
+
+  - `src` - required, string, audio source file URL.
+  - `autoPlay` - optional, boolean, whether to autoplay audio, defaults to `false`.
+  - `loop` - optional, boolean, whether to repeat the track when it ends, defaults to `false`.
+  - `muted` - optional, boolean, whether to mute the audio, defaults to `false`.
+  - `preload` - optional, string, `<audio>` element preload attribute.
+  - `volume` - optional, number, audio volume in `[0..1]` range, defaults to `1`.
+  - `noJs` - optional, React element(s) to render insided the `<audio>` tag.
+  - `onMount` - optional, callback, called when component mounts, receives `IAudio` as the first argument.
+  - `onUnmount` - optional, callback, called when component un-mounts, receives `IAudio` as the first argument.
+
+
+## Arguments
+
+The `children` function receives two arguments, `audio` instance as *controller* and `state`.
+
+```jsx
+<Audio autoPlay src={src}>{(audio, state) =>
+
+}</Audio>
+```
+
+First argument is the `<Audio>` component instance with the following public signature.
+
+```ts
+interface IAudio {
+  el: HTMLAudioElement;
+  play();
+  pause();
+  seek(time: number);
+  volume(value: number);
+  mute();
+  unmute();
+}
+```
+
+, where
+
+  - `el` - `<audio>` element DOM node.
+
+The second argument is the state of the `<Audio>` component with the following signature.
+
+```ts
+interface IAudioState {
+  time?: number;
+  duration?: number;
+  isPlaying?: boolean;
+  muted?: boolean;
+  volume?: number;
+}
+```
+
+, where
+
+  - `time` - current time in seconds.
+  - `duration` - total audio track duration in seconds.
+  - `isPlaying` - whether the audio track is currently playing.
+  - `muted` - whether `muted` attribute is set on the audio element.
+  - `volume` - current volume in range `[0..1]`.
+
+
+## Example
+
+Play a sample audio track with control buttons.
+
+```jsx
+<Audio src='https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3'>
+  {({play, pause, seek, volume, mute, unmute}, state) =>
+    <div>
+      <button onClick={play}>Play</button>
+      <button onClick={pause}>Pause</button>
+      <button onClick={() => seek(state.time - 5)}>Seek -</button>
+      <button onClick={() => seek(state.time + 5)}>Seek +</button>
+      <button onClick={() => volume(state.volume - 0.05)}>Volume -</button>
+      <button onClick={() => volume(state.volume + 0.05)}>Volume +</button>
+      <button onClick={mute}>Mute</button>
+      <button onClick={unmute}>Unmute</button>
+    </div>
+  }
+</Audio>
+```