feat(Storybook): revamped storybook examples and added recipes

Author: Rendez

.npmignore

@@ -17,7 +17,7 @@ npm-debug.log
 .tmp
 .eslintignore
 yarn.lock
-stories
+examples
 .storybook
 test
 example

.storybook/addons.js

@@ -1,2 +1,3 @@
 import '@storybook/addon-options/register';
+import 'storybook-readme/register';
 import '@storybook/addon-actions/register';

.storybook/config.js

@@ -1,26 +1,10 @@
 import * as storybook from '@storybook/react';
 import { setOptions } from '@storybook/addon-options';
-import { setDefaults } from '@storybook/addon-info';
 
 setOptions({
   name: 'React Intersection Observer',
   url: 'https://github.com/researchgate/react-intersection-observer',
+  downPanelInRight: true,
 });
 
-setDefaults({
-  source: false,
-  propTables: null,
-  styles: stylesheet => ({
-    ...stylesheet,
-    infoBody: {
-      ...stylesheet.infoBody,
-      background: '#fafafa',
-      color: '#444',
-      boxShadow: 'rgba(0,0,0,.18) 0 0 2px 0, rgba(0,0,0,.12) 0 1px 3px 0',
-      border: 0,
-      marginBottom: 50,
-    },
-  }),
-});
-
-storybook.configure(() => require('../stories/index.js'), module);
+storybook.configure(() => require('../examples/index.js'), module);

.storybook/webpack.config.js

@@ -8,6 +8,10 @@ module.exports = {
         loaders: ['style-loader', 'css-loader'],
         include: path.resolve(__dirname, '../'),
       },
+      {
+        test: /\.md$/,
+        loaders: ['raw-loader'],
+      },
     ],
   },
 };

examples/components/HigherOrderComponent/Component.js

@@ -0,0 +1,4 @@
+import withIntersectionObserver from './WithIntersectionObserver';
+import Target from './Target';
+
+export default withIntersectionObserver(0.99)(Target);

examples/components/HigherOrderComponent/README.md

@@ -0,0 +1,73 @@
+## Higher order component
+
+### withIntersectionObserver.js
+```jsx
+import React, { Component } from 'react';
+import Observer from '@researchgate/react-intersection-observer';
+
+export default threshold => BaseComponent => {
+  const displayName = BaseComponent.displayName || BaseComponent.name || 'Component';
+
+  return class WithIntersectionObserver extends Component {
+    static displayName = `withIntersectionObserver(${displayName})`;
+
+    state = {
+      isIntersecting: false,
+    };
+
+    handleChange = ({ isIntersecting, intersectionRatio }) => {
+      this.setState({ isIntersecting: isIntersecting && intersectionRatio >= threshold });
+    };
+
+    render() {
+      return (
+        <Observer onChange={this.handleChange} threshold={threshold}>
+          <BaseComponent {...this.props} isVisible={this.state.isIntersecting} />
+        </Observer>
+      );
+    }
+  };
+};
+```
+
+### Target.js
+```jsx
+import React, { Component } from 'react';
+
+export default class Target extends Component {
+  render() {
+    return (
+      <div className={`box ${this.props.isVisible ? 'visible' : 'transparent'}`}>
+        {this.props.isVisible ? 'Visible' : 'Culled'}
+      </div>
+    );
+  }
+}
+```
+
+### Component.js
+```jsx
+import withIntersectionObserver from './WithIntersectionObserver';
+import Target from './Target';
+
+export default withIntersectionObserver(0.99)(Target);
+```
+
+### Example.js
+```jsx
+import React from 'react';
+import Component from './Component';
+
+export default () =>
+  <div>
+    <div className="header visible">Higher Order Component - Occlusion Culling</div>
+    <div className="body body--center">
+      <Component />
+      <Component />
+      <Component />
+      <Component />
+      <Component />
+    </div>
+  </div>
+);
+```

examples/components/HigherOrderComponent/Target.js

@@ -0,0 +1,11 @@
+import React, { Component } from 'react';
+
+export default class Target extends Component {
+  render() {
+    return (
+      <div className={`box ${this.props.isVisible ? 'visible' : 'transparent'}`}>
+        {this.props.isVisible ? 'Visible' : 'Culled'}
+      </div>
+    );
+  }
+}

examples/components/HigherOrderComponent/WithIntersectionObserver.js

@@ -0,0 +1,26 @@
+import React, { Component } from 'react';
+import Observer from '../../../src/IntersectionObserver';
+
+export default threshold => BaseComponent => {
+  const displayName = BaseComponent.displayName || BaseComponent.name || 'Component';
+
+  return class WithIntersectionObserver extends Component {
+    static displayName = `withIntersectionObserver(${displayName})`;
+
+    state = {
+      isIntersecting: false,
+    };
+
+    handleChange = ({ isIntersecting, intersectionRatio }) => {
+      this.setState({ isIntersecting: isIntersecting && intersectionRatio >= threshold });
+    };
+
+    render() {
+      return (
+        <Observer onChange={this.handleChange} threshold={threshold}>
+          <BaseComponent {...this.props} isVisible={this.state.isIntersecting} />
+        </Observer>
+      );
+    }
+  };
+};

examples/components/HigherOrderComponent/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import withReadme from 'storybook-readme/with-readme';
+import Readme from './README.md';
+import Component from './Component';
+
+export default withReadme(Readme, () =>
+  <div>
+    <div className="header visible">Higher Order Component - Occlusion Culling</div>
+    <div className="body body--center">
+      <Component />
+      <Component />
+      <Component />
+      <Component />
+      <Component />
+    </div>
+  </div>
+);

examples/components/ImpressionTracking/AdImpression.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import Observer from '../../../src/IntersectionObserver';
+
+const tracked = action('tracked');
+
+export default class AdImpression extends React.Component {
+  state = {
+    tracked: '',
+  };
+
+  handleChange = event => {
+    if (event.isIntersecting && event.intersectionRatio >= 0.5) {
+      this.recordedTimeout = setTimeout(() => {
+        this.setState({ tracked: 'ad--tracked' });
+        tracked(`ad #${this.props.index}`);
+      }, 1000);
+      return;
+    }
+    clearTimeout(this.recordedTimeout);
+  };
+
+  render() {
+    return (
+      <Observer onChange={this.handleChange} threshold={0.5}>
+        <div className={`ad ${this.state.tracked}`} />
+      </Observer>
+    );
+  }
+}