Merge pull request #8 from MailOnline/feat/various

Feat/various

Author: streamich

.travis.yml

@@ -0,0 +1,23 @@
+language: node_js
+os:
+  - linux
+cache:
+  yarn: true
+  directories:
+    - ~/.npm
+notifications:
+  email: false
+node_js:
+  - '9'
+  - '8'
+script:
+  - npm run test
+  - npm run build
+matrix:
+  allow_failures: []
+  fast_finish: true
+after_success:
+  - npm run semantic-release
+branches:
+  except:
+    - /^v\d+\.\d+\.\d+$/

README.md

@@ -1,3 +1,5 @@
+![libreact logo](./docs/libreact.png)
+
 # libreact
 
 [![][npm-badge]][npm-url] [![][travis-badge]][travis-url]
@@ -39,13 +41,15 @@ const MyComponent = mock();
      - [`<NetworkSensor>`](./docs/NetworkSensor.md) and [`withNetwork()`](./docs/NetworkSensor.md#withnetwork)
      - [`<LightSensor>`](./docs/LightSensor.md)
      - [`<LocationSensor>`](./docs/LocationSensor.md)
+     - [`<OrientationSensor>`](./docs/OrientationSensor.md) and [`withOrientation()`](./docs/OrientationSensor.md#withorientation)
      - [`<ScrollSensor>`](./docs/ScrollSensor.md)
      - [`<SizeSensor>`](./docs/SizeSensor.md)
-     - `<ViewportSensor>`
+     - [`<ViewportSensor>`](./docs/ViewportSensor.md), `<ViewportScrollSensor>`, and `<ViewportObserverSensor>`
      - [`<WidthSensor>`](./docs/WidthSensor.md)
      - [`<WindowScrollSensor>`](./docs/WindowScrollSensor.md)
      - [`<WindowSizeSensor>`](./docs/WindowSizeSensor.md)
   - Generators
+     - [`<Alert>`](./docs/Alert.md)
      - [`<Audio>`](./docs/Audio.md)
      - [`<LocalStorage>`](./docs/LocalStorage.md)
      - `<Redirect>`

docs/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.

docs/LocalStorage.md

@@ -24,7 +24,7 @@ import {LocalStorage} from 'libreact/lib/LocalStorage';
   - `onMount` - optional, callback that receives stored data on component mount. Useful to persist and
   re-hydrate form data, for example.
 
-# Example
+## Example
 
 In the below example form inputs are stored in `localStorage` and re-hydrated when user
 comes back and form renders for the first time.

docs/OrientationSensor.md

@@ -0,0 +1,45 @@
+# `<OrientationSensor>`
+
+Tracks screen orientation using [`orientationchange` event](https://developer.mozilla.org/en-US/docs/Web/Events/orientationchange).
+
+## Usage
+
+```jsx
+import {OrientationSensor} from 'libreact/lib/OrientationSensor';
+
+<OrientationSensor>(state) =>
+  <pre>{JSON.stringify(state, null, 4)}</pre>
+</OrientationSensor>
+```
+
+## Props
+
+None.
+
+## State
+
+Has signature
+
+```ts
+interface IOrientationSensorState {
+  angle: number;
+  type: string;
+}
+```
+
+, where
+
+  - `angle` - screen rotation angle in degrees.
+  - `type` - is one of `portrait-primary`, `portrait-secondary`, `landscape-primary`, or `landscape-secondary`.
+
+
+## `withOrientation()`
+
+HOC that injects `orientation` object into your component.
+
+
+```js
+import {withOrientation} from 'libreact/lib/OrientationSensor';
+
+const MyCompWithOrientation = withOrientation(MyComp);
+```

docs/Prompt.md

@@ -0,0 +1,36 @@
+# `<Prompt>`
+
+Uses [`Window.prompt()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt) to get user input.
+
+## Usage
+
+Use it as a standalone compnent that returns result in `onResult` handler
+
+```jsx
+import {Prompt} from 'libreact/lib/Prompt';
+
+<Prompt
+  show
+  message='Hello world'
+  default='hello back'
+  onResult={console.log}
+/>
+```
+
+Or use it as a FaCC
+
+```jsx
+<Prompt
+  show
+  message='Hello world'
+  default='hello back'
+  onResult={console.log}
+>{(result) => <div>{result}</div>}</Prompt>
+```
+
+## Props
+
+  - `show` - boolean, optional, whether to show the prompt modal.
+  - `message` - string, optional, string message to display to the user.
+  - `default` - string, optional, default text to pre-fill the user's response input.
+  - `onResult` - function, optional, function that receives prompt result string as a single argument.

docs/ViewportSensor.md

@@ -0,0 +1,52 @@
+# `<ViewportSensor>`
+
+Tracks if `children` are in viewport. Can be used as FaCC or a regular component.
+
+Under-the-hood it uses `<ViewportObserverSensor>`, which in turn uses [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) API
+to detect if your component is in viewport.
+
+If `IntersectionObserver` API is not available it falls back and lazily downloads `<ViewportScrollSensor>`,
+which uses document's scroll event to track if your component is in viewport.
+
+## Usage
+
+```jsx
+import {ViewportSensor} from 'libreact/lib/ViewportSensor';
+
+<ViewportSensor threshold={1} onChange={console.log}>{(state) =>
+  <pre>{JSON.stringify(state, null, 4)}</pre>
+}</ViewportSensor>
+```
+
+## Props
+
+Sensor's props have the following signature
+
+```ts
+interface IViewportSensorProps {
+  threshold?: number;
+  onChange?: (state: IViewportObserverSensorState) => void;
+}
+```
+
+, where
+
+  - `threshold` - optional, number, percentage how much does your component have to intersect with viewport
+  to be considered visible. Defaults to `0`.
+  - `onChange` - optional, callback called when sensor changes its state, receives the state of the sensor as
+  a single argument.
+
+## State
+
+Sensor's state has the following signature
+
+```ts
+interface IViewportSensorState {
+  visible: boolean;
+}
+```
+
+## `<ViewportScrollSensor>`
+
+The `<ViewportScrollSensor>` has an additional prop `throttle`, which is a number in milliseconds specifying
+how much to throttle document's `scroll` event.

docs/getDisplayName.md

@@ -0,0 +1,11 @@
+# `getDisplayName()`
+
+Returns display name of a React component.
+
+```jsx
+import getDisplayName from 'libreact/lib/util/getDisplayName';
+
+const name = getDisplayName(MyComponent);
+```
+
+Accepts a single argument, which can be a stateful or stateless React component, or element. Returns a string.

docs/libreact.png

@@ -1,6 +1,6 @@
 {
   "name": "libreact",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "React standard library",
   "main": "lib/index.js",
   "keywords": [
@@ -55,7 +55,8 @@
     "ts-loader": "3.2.0",
     "ts-node": "4.1.0",
     "typescript": "2.6.2",
-    "webpack": "3.10.0"
+    "webpack": "3.10.0",
+    "semantic-release": "^12.2.4"
   },
   "config": {
     "commitizen": {
@@ -72,7 +73,8 @@
     "test:watch": "jest --watch",
     "storybook": "start-storybook -p 6007",
     "build-storybook": "build-storybook",
-    "start": "npm run storybook"
+    "start": "npm run storybook",
+    "semantic-release": "semantic-release"
   },
   "jest": {
     "moduleFileExtensions": [