Merge pull request #1 from MailOnline/feat/mock

Feat/mock

Author: streamich

.gitignore

@@ -0,0 +1,10 @@
+.idea
+/node_modules/
+/.idea/
+/.nyc_output/
+/coverage/
+package-lock.json
+yarn.lock
+/lib/
+/.vscode/
+.DS_Store

.npmignore

@@ -0,0 +1,15 @@
+.idea
+/node_modules/
+/.idea/
+/.nyc_output/
+/coverage/
+package-lock.json
+yarn.lock
+*.test.ts
+*.spec.ts
+*.test.js
+*.spec.js
+/typings/
+/test/
+/.vscode/
+.DS_Store

.npmrc

@@ -0,0 +1,8 @@
+@mol-fe:registry="http://sinopia.devhsk.mol.dmgt.net:4873/"
+@mol-ads:registry="http://sinopia.devhsk.mol.dmgt.net:4873/"
+unsafe-perm=true
+init-author-name="MailOnline"
+init-author-email="fe@mailonline.co.uk"
+init-author-url="http://www.dailymail.co.uk"
+init-license="UNLICENSED"
+init-version="0.0.0"

.nvmrc

@@ -0,0 +1 @@
+8

.storybook/ShowDocs.ts

@@ -0,0 +1,90 @@
+import {createElement as h} from 'react';
+
+const ShowDocs = ({name}) => {
+  return h('div', {},
+    h('div', {
+      style: {
+        padding: '0 20px'
+      },
+      dangerouslySetInnerHTML: {
+        __html: require(`../docs/${name}.md`)
+      }
+    }),
+    h('style', {
+      dangerouslySetInnerHTML: {
+        __html: `
+@import url(http://fonts.googleapis.com/css?family=Merriweather:300italic,300);
+
+html {
+  font-size: 18px;
+  max-width: 800px;
+}
+
+body {
+  color: #444;
+  font-family: 'Merriweather', Georgia, serif;
+  margin: 0;
+  max-width: 800px;
+}
+
+/* === A bit of a gross hack so we can have bleeding divs/blockquotes. */
+
+div {
+  width: 100%;
+}
+
+div img {
+  width: 100%;
+}
+
+blockquote p {
+  font-size: 1.5rem;
+  font-style: italic;
+  margin: 1rem auto 1rem;
+  max-width: 48rem;
+}
+
+li {
+  margin-left: 2rem;
+}
+
+/* Counteract the specificity of the gross *:not() chain. */
+h1 {
+  padding: 1m 0 !important;
+}
+/*  === End gross hack */
+
+p {
+  color: #555;
+  height: auto;
+  line-height: 1.45;
+}
+
+pre, code {
+  font-family: Menlo, Monaco, "Courier New", monospace
+}
+
+pre {
+  background-color: #fafafa;
+  font-size: .8rem;
+  overflow-x: scroll;
+  padding: 1.125em;
+}
+
+a,
+a:visited {
+  color: #3498db;
+}
+
+a:hover,
+a:focus,
+a:active {
+  color: #2980b9;
+}
+        `
+      }
+    })
+  );
+};
+
+export default ShowDocs;

.storybook/addons.js

@@ -0,0 +1,2 @@
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';

.storybook/config.js

@@ -0,0 +1,9 @@
+import {configure} from '@storybook/react';
+
+const req = require.context('../src/', true, /.*(stories|story)\.(js|jsx|ts|tsx)?$/);
+
+const loadStories = () => {
+  req.keys().forEach((filename) => req(filename));
+};
+
+configure(loadStories, module);

.storybook/webpack.config.js

@@ -0,0 +1,22 @@
+const path = require('path');
+
+const SRC_PATH = path.join(__dirname, '../src');
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        loader: 'ts-loader',
+        include: [
+          SRC_PATH,
+        ]
+      }
+    ]
+  },
+
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js', '.jsx'],
+    enforceExtension: false
+  }
+};

README.md

@@ -1,3 +1,66 @@
 # mol-fe-react
 
-React.js utility belt.
+React utility belt.
+
+  - Collection of React goodies
+  - Isomorphic - all components work in browser and Node
+  - [See demos and docs](https://mailonline.github.io/mol-fe-react/)
+
+## Installation
+
+```shell
+npm install mol-fe-react --save
+```
+
+## Usage
+
+Import each utility individually to decrease your bundle size
+
+```js
+import {mock} from 'mol-fe-react/lib/mock';
+
+const MyComponent = mock();
+```
+
+## Reference
+
+  - Dummies
+     - [`mock()`](./docs/mock.md)
+     - [`loadable()`](./docs/loadable.md)
+     - [`lazy()`](./docs/lazy.md)
+     - [`delayed()`](./docs/delayed.md)
+     - [`invert()`](./docs/invert.md)
+  - Sensors
+     - [`<SizeSensor>`](./docs/SizeSensor.md)
+     - [`<WidthSensor>`](./docs/WidthSensor.md)
+     - [`<ScrollSensor>`](./docs/ScrollSensor.md)
+     - [`<MediaSensor>`](./docs/MediaSensor.md)
+     - [`<WindowSizeSensor>`](./docs/WindowSizeSensor.md)
+     - [`<WindowScrollSensor>`](./docs/WindowScrollSensor.md)
+     - [`<NetworkSensor>`](./docs/NetworkSensor.md) and [`withNetwork()`](./docs/NetworkSensor.md#withnetwork)
+     - [`<BatterySensor>`](./docs/BatterySensor.md)
+     - [`<LightSensor>`](./docs/LightSensor.md)
+     - [`<MediaDeviceSensor>`](./docs/MediaDeviceSensor.md)
+  - Generators
+     - [`<Speak>`](./docs/Speak.md)
+     - [`<Vibrate>`](./docs/Vibrate.md)
+     - [`<LocalStorage>`](./docs/LocalStorage.md)
+     - [`<Audio>`](./docs/Audio.md)
+  - Context
+     - [`<Provider>`](./docs/context.md#provider), [`<Consumer>`](./docs/context.md#consumer), and [`withContext()`](./docs/context.md#withcontext)
+     - [`<Theme>`](./docs/theme.md#theme), [`<Themed>`](./docs/theme.md#themed), and [`withTheme()`](./docs/theme.md#withtheme)
+     - `<CssVars>`
+  - CSS resets
+     - [`<CssResetEricMeyer>`](./docs/reset/CssResetEricMeyer.md)
+     - [`<CssResetEricMeyerCondensed>`](./docs/reset/CssResetEricMeyerCondensed.md)
+     - [`<CssResetMinimalistic>`](./docs/reset/CssResetMinimalistic.md)
+     - [`<CssResetMinimalistic2>`](./docs/reset/CssResetMinimalistic2.md)
+     - [`<CssResetMinimalistic3>`](./docs/reset/CssResetMinimalistic3.md)
+     - [`<CssResetPoorMan>`](./docs/reset/CssResetPoorMan.md)
+     - [`<CssResetShaunInman>`](./docs/reset/CssResetShaunInman.md)
+     - [`<CssResetSiolon>`](./docs/reset/CssResetSiolon.md)
+     - [`<CssResetTantek>`](./docs/reset/CssResetTantek.md)
+     - [`<CssResetUniversal>`](./docs/reset/CssResetUniversal.md)
+     - [`<CssResetYahoo>`](./docs/reset/CssResetYahoo.md)
+  - Other
+     - [`<Resolve>`](./docs/Resolve.md)

docs/Audio.md

@@ -0,0 +1,56 @@
+# `<Audio>`
+
+FaCC that creates an `<audio>` element to play audio tracks, re-renders on audio state changes.
+
+## Usage
+
+```jsx
+import {Audio} from 'mol-fe-react/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
+export 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.
+
+## Example
+
+Play a sample audio track with control buttons.
+
+```jsx
+<Audio src='https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3'>{(audio, state) =>
+  <div>
+    <button onClick={audio.play}>Play</button>
+    <button onClick={audio.pause}>Pause</button>
+    <button onClick={() => audio.seek(state.time - 5)}>Seek -</button>
+    <button onClick={() => audio.seek(state.time + 5)}>Seek +</button>
+    <button onClick={() => audio.volume(state.volume - 0.05)}>Volume -</button>
+    <button onClick={() => audio.volume(state.volume + 0.05)}>Volume +</button>
+    <button onClick={audio.mute}>Mute</button>
+    <button onClick={audio.unmute}>Unmute</button>
+  </div>
+}</Audio>
+```