planning

node_modules/react-scroll-sync/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["es2015", "react", "stage-1"],
+  "plugins": ["add-module-exports"]
+}

node_modules/react-scroll-sync/.editorconfig

@@ -0,0 +1,17 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.js]
+quote_type = single
+spaces_around_operators = true
+
+[*.md]
+trim_trailing_whitespace = false

node_modules/react-scroll-sync/.eslintignore

@@ -0,0 +1 @@
+dist/

node_modules/react-scroll-sync/.github/workflows/release.yml

@@ -0,0 +1,23 @@
+
+name: Release
+
+on: [push]
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v1
+      - name: Setup Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12
+      - name: Install dependencies
+        run: npm ci
+      - name: Release
+        uses: codfish/semantic-release-action@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

node_modules/react-scroll-sync/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2016 Andrey Okonetchnikov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

node_modules/react-scroll-sync/README.md

@@ -0,0 +1,73 @@
+# react-scroll-sync
+Synced scroll position across multiple scrollable elements
+
+## Demo
+
+http://react-sync-scroll.netlify.com/
+
+## Documentation & Example
+
+http://react-sync-scroll.netlify.com/
+
+## License
+
+MIT
+
+## Installation
+
+```bash
+npm install --save react-scroll-sync
+```
+## Usage
+
+```jsx
+import React, {Component} from 'react';
+import { ScrollSync, ScrollSyncPane } from 'react-scroll-sync';
+
+export default class MyComponent extends Component {
+    
+    render() {
+      <ScrollSync>
+        <div style={{ display: 'flex', position: 'relative', height: 300 }}>
+          <ScrollSyncPane>
+            <div style={{overflow: 'auto'}}>
+              <section style={{ height: 500 }}>
+                <h1>Left Pane Content</h1>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aperiam doloribus
+                  dolorum
+                  est eum eveniet exercitationem iste labore minus, neque nobis odit officiis omnis
+                  possimus quasi rerum sed soluta veritatis.</p>
+              </section>
+            </div>
+          </ScrollSyncPane>
+
+          <ScrollSyncPane>
+            <div style={{overflow: 'auto'}}>
+              <section style={{ height: 1000 }}>
+                <h1>Middle Pane Content</h1>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aperiam doloribus
+                  dolorum
+                  est eum eveniet exercitationem iste labore minus, neque nobis odit officiis omnis
+                  possimus quasi rerum sed soluta veritatis.</p>
+              </section>
+            </div>
+          </ScrollSyncPane>
+
+          <ScrollSyncPane>
+            <div style={{overflow: 'auto'}}>
+              <section style={{ height: 2000 }}>
+                <h1>Right Pane Content</h1>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aperiam doloribus
+                  dolorum
+                  est eum eveniet exercitationem iste labore minus, neque nobis odit officiis omnis
+                  possimus quasi rerum sed soluta veritatis.</p>
+              </section>
+            </div>
+          </ScrollSyncPane>
+        </div>
+      </ScrollSync>
+
+        );
+    }
+}
+```

node_modules/react-scroll-sync/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "react-scroll-sync",
+  "version": "0.9.0",
+  "description": "Synchronize scroll positions across multiple scrollable containers",
+  "main": "dist/index.js",
+  "scripts": {
+    "clean": "rimraf ./dist",
+    "prebuild": "npm run lint",
+    "build": "NODE_ENV=production npm run clean && webpack",
+    "prepublish": "npm run build",
+    "lint": "eslint .",
+    "lint:fix": "npm run lint -- --fix",
+    "lint:staged": "lint-staged",
+    "styleguide:server": "styleguidist server",
+    "styleguide:build": "styleguidist build"
+  },
+  "lint-staged": {
+    "*.js": [
+      "eslint --fix",
+      "git add"
+    ]
+  },
+  "pre-commit": "lint:staged",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/okonet/react-scroll-sync.git"
+  },
+  "keywords": [],
+  "author": "Andrey Okonetchnikov <andrey@okonet.ru>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/okonet/react-scroll-sync/issues"
+  },
+  "homepage": "https://github.com/okonet/react-scroll-sync#readme",
+  "eslintConfig": {
+    "extends": "okonet",
+    "rules": {
+      "react/forbid-prop-types": 0
+    },
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        "peerDependencies": [
+          "src/*.js"
+        ],
+        "devDependencies": [
+          "**/*.test.js",
+          "**/*.spec.js"
+        ]
+      }
+    ]
+  },
+  "devDependencies": {
+    "babel-loader": "6.2.5",
+    "babel-plugin-add-module-exports": "0.2.1",
+    "babel-preset-es2015": "6.16.0",
+    "babel-preset-react": "6.16.0",
+    "babel-preset-stage-1": "6.16.0",
+    "eslint": "3.7.1",
+    "eslint-config-okonet": "1.1.1",
+    "jest": "16.0.0",
+    "lint-staged": "3.0.3",
+    "npmpub": "3.1.0",
+    "pre-commit": "1.1.3",
+    "prop-types": "15.5.10",
+    "react": "15.3.2",
+    "react-dom": "15.3.2",
+    "react-styleguidist": "5.0.0-beta8",
+    "rimraf": "2.5.4",
+    "webpack": "1.13.2"
+  },
+  "peerDependencies": {
+    "react": "0.14.x || 15.x || 16.x || 17.x",
+    "react-dom": "0.14.x || 15.x || 16.x || 17.x"
+  },
+  "dependencies": {
+    "prop-types": "^15.5.7"
+  }
+}

node_modules/react-scroll-sync/src/ScrollSync.js

@@ -0,0 +1,147 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+/**
+ * ScrollSync provider component
+ *
+ */
+
+export default class ScrollSync extends Component {
+
+  static propTypes = {
+    /**
+     * Callback to be invoked any time synchronization happens
+     *
+     * @param {Element} el The element that has received the scroll event
+     */
+    onSync: PropTypes.func,
+    children: PropTypes.element.isRequired,
+    proportional: PropTypes.bool,
+    vertical: PropTypes.bool,
+    horizontal: PropTypes.bool,
+    enabled: PropTypes.bool
+  };
+
+  static defaultProps = {
+    proportional: true,
+    vertical: true,
+    horizontal: true,
+    enabled: true
+  };
+
+  static childContextTypes = {
+    registerPane: PropTypes.func,
+    unregisterPane: PropTypes.func
+  }
+
+  getChildContext() {
+    return {
+      registerPane: this.registerPane,
+      unregisterPane: this.unregisterPane
+    }
+  }
+
+  panes = {}
+
+  registerPane = (node, groups) => {
+    groups.forEach((group) => {
+      if (!this.panes[group]) {
+        this.panes[group] = []
+      }
+
+      if (!this.findPane(node, group)) {
+        if (this.panes[group].length > 0) {
+          this.syncScrollPosition(this.panes[group][0], node)
+        }
+        this.panes[group].push(node)
+      }
+    })
+    this.addEvents(node, groups)
+  }
+
+  unregisterPane = (node, groups) => {
+    groups.forEach((group) => {
+      if (this.findPane(node, group)) {
+        this.removeEvents(node)
+        this.panes[group].splice(this.panes[group].indexOf(node), 1)
+      }
+    })
+  }
+
+  addEvents = (node, groups) => {
+    /* For some reason element.addEventListener doesnt work with document.body */
+    node.onscroll = this.handlePaneScroll.bind(this, node, groups) // eslint-disable-line
+  }
+
+  removeEvents = (node) => {
+    /* For some reason element.removeEventListener doesnt work with document.body */
+    node.onscroll = null // eslint-disable-line
+  }
+
+  findPane = (node, group) => {
+    if (!this.panes[group]) {
+      return false
+    }
+
+    return this.panes[group].find(pane => pane === node)
+  }
+
+  handlePaneScroll = (node, groups) => {
+    if (!this.props.enabled) {
+      return
+    }
+
+    window.requestAnimationFrame(() => {
+      this.syncScrollPositions(node, groups)
+    })
+  }
+
+  syncScrollPosition(scrolledPane, pane) {
+    const {
+      scrollTop,
+      scrollHeight,
+      clientHeight,
+      scrollLeft,
+      scrollWidth,
+      clientWidth
+    } = scrolledPane
+
+    const scrollTopOffset = scrollHeight - clientHeight
+    const scrollLeftOffset = scrollWidth - clientWidth
+
+    const { proportional, vertical, horizontal } = this.props
+
+    /* Calculate the actual pane height */
+    const paneHeight = pane.scrollHeight - clientHeight
+    const paneWidth = pane.scrollWidth - clientWidth
+    /* Adjust the scrollTop position of it accordingly */
+    if (vertical && scrollTopOffset > 0) {
+      pane.scrollTop = proportional ? (paneHeight * scrollTop) / scrollTopOffset : scrollTop // eslint-disable-line
+    }
+    if (horizontal && scrollLeftOffset > 0) {
+      pane.scrollLeft = proportional ? (paneWidth * scrollLeft) / scrollLeftOffset : scrollLeft // eslint-disable-line
+    }
+  }
+
+  syncScrollPositions = (scrolledPane, groups) => {
+    groups.forEach((group) => {
+      this.panes[group].forEach((pane) => {
+        /* For all panes beside the currently scrolling one */
+        if (scrolledPane !== pane) {
+          /* Remove event listeners from the node that we'll manipulate */
+          this.removeEvents(pane, group)
+          this.syncScrollPosition(scrolledPane, pane)
+          /* Re-attach event listeners after we're done scrolling */
+          window.requestAnimationFrame(() => {
+            this.addEvents(pane, groups)
+          })
+        }
+      })
+    })
+    if (this.props.onSync) this.props.onSync(scrolledPane)
+  }
+
+  render() {
+    return React.Children.only(this.props.children)
+  }
+}

node_modules/react-scroll-sync/src/ScrollSyncPane.js

@@ -0,0 +1,60 @@
+/* eslint react/no-find-dom-node: 0 */
+
+import { Component } from 'react'
+import ReactDOM from 'react-dom'
+import PropTypes from 'prop-types'
+
+/**
+ * ScrollSyncPane Component
+ *
+ * Wrap your content in it to keep its scroll position in sync with other panes
+ *
+ * @example ./example.md
+ */
+
+
+export default class ScrollSyncPane extends Component {
+
+  static propTypes = {
+    children: PropTypes.node.isRequired,
+    attachTo: PropTypes.object,
+    group: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+    enabled: PropTypes.bool
+  }
+
+  static defaultProps = {
+    group: 'default',
+    enabled: true
+  }
+
+  static contextTypes = {
+    registerPane: PropTypes.func,
+    unregisterPane: PropTypes.func
+  }
+
+  componentDidMount() {
+    if (this.props.enabled) {
+      this.node = this.props.attachTo || ReactDOM.findDOMNode(this)
+      this.context.registerPane(this.node, this.toArray(this.props.group))
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.enabled && this.props.group !== prevProps.group) {
+      this.context.unregisterPane(this.node, this.toArray(prevProps.group))
+      this.context.registerPane(this.node, this.toArray(this.props.group))
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.props.enabled) {
+      this.context.unregisterPane(this.node, this.toArray(this.props.group))
+    }
+  }
+
+  toArray = groups => [].concat(groups)
+
+  render() {
+    return this.props.children
+  }
+}

node_modules/react-scroll-sync/src/example.md

@@ -0,0 +1,239 @@
+To use ScrollSync you have to wrap your scrollable content (ensure that you have `overflow: auto`
+ in CSS) in `ScrollSyncPane` and then wrap everything in `ScrollSync`.
+
+If you want to provide a toggle for users to turn the scroll syncing on and off, you can use the `enabled={false}` setting on the `ScrollSync` or `ScrollSyncPane` elements. Note that `<ScrollSync enabled={false}>` disables the scroll syncing for all groups.
+ 
+```
+<ScrollSync>
+  <div style={{ display: 'flex', position: 'relative', height: 300 }}>
+    <ScrollSyncPane>
+      <div style={{overflow: 'auto'}}>
+        <section style={{ height: 500 }}>
+          <h1>Left Pane Content</h1>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aperiam doloribus
+            dolorum
+            est eum eveniet exercitationem iste labore minus, neque nobis odit officiis omnis
+            possimus quasi rerum sed soluta veritatis.</p>
+        </section>
+      </div>
+    </ScrollSyncPane>
+
+    <ScrollSyncPane>
+      <div style={{overflow: 'auto'}}>
+        <section style={{ height: 1000 }}>
+          <h1>Middle Pane Content</h1>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aperiam doloribus
+            dolorum
+            est eum eveniet exercitationem iste labore minus, neque nobis odit officiis omnis
+            possimus quasi rerum sed soluta veritatis.</p>
+        </section>
+      </div>
+    </ScrollSyncPane>
+
+    <ScrollSyncPane>
+      <div style={{overflow: 'auto'}}>
+        <section style={{ height: 2000 }}>
+          <h1>Right Pane Content</h1>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aperiam doloribus
+            dolorum
+            est eum eveniet exercitationem iste labore minus, neque nobis odit officiis omnis
+            possimus quasi rerum sed soluta veritatis.</p>
+        </section>
+      </div>
+    </ScrollSyncPane>
+  </div>
+</ScrollSync>
+```
+
+Sometimes it is useful to attach the `onScroll` event listener to a different node (for example 
+to a `document.body`). Use `attachTo` prop for that.
+
+Additionally sometimes there is need to use few independent scroll groups inside one ScrollSync.
+Provide an arbitrary group name in the `group` prop to ScrollSyncPane components to limit synchronization to panes with that group name. 
+
+```
+<ScrollSync>
+  <div style={{ display: 'flex', position: 'relative', height: 300 }}>
+    <ScrollSyncPane group="one">
+      <div style={{overflow: 'auto'}}>
+        <section style={{ height: 500 }}>
+          <h1>Left Pane Content</h1>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aperiam doloribus
+            dolorum
+            est eum eveniet exercitationem iste labore minus, neque nobis odit officiis omnis
+            possimus quasi rerum sed soluta veritatis.</p>
+        </section>
+      </div>
+    </ScrollSyncPane>
+
+    <ScrollSyncPane group="two">
+      <div style={{overflow: 'auto'}}>
+        <section style={{ height: 1000 }}>
+          <h1>Middle Pane Content</h1>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aperiam doloribus
+            dolorum
+            est eum eveniet exercitationem iste labore minus, neque nobis odit officiis omnis
+            possimus quasi rerum sed soluta veritatis.</p>
+        </section>
+      </div>
+    </ScrollSyncPane>
+
+    <ScrollSyncPane group="one">
+      <div style={{overflow: 'auto'}}>
+        <section style={{ height: 2000 }}>
+          <h1>Right Pane Content</h1>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aperiam doloribus
+            dolorum
+            est eum eveniet exercitationem iste labore minus, neque nobis odit officiis omnis
+            possimus quasi rerum sed soluta veritatis.</p>
+        </section>
+      </div>
+    </ScrollSyncPane>
+    
+    <ScrollSyncPane group="two">
+      <div style={{overflow: 'auto'}}>
+        <section style={{ height: 2000 }}>
+          <h1>Right Pane Content</h1>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aperiam doloribus
+            dolorum
+            est eum eveniet exercitationem iste labore minus, neque nobis odit officiis omnis
+            possimus quasi rerum sed soluta veritatis.</p>
+        </section>
+      </div>
+    </ScrollSyncPane>
+  </div>
+</ScrollSync>
+```
+
+In some situations, it is also useful for a `ScrollSyncPane` to belong to multiple groups. In these cases, provide an array of group names to the `group` prop.
+
+```
+const cellStyle = { minWidth: 200, padding: '.5em 1em', textAlign: 'left', borderLeft: '1px solid white', borderBottom: '1px solid white'};
+
+<ScrollSync>
+  <div style={{ display: 'flex', position: 'relative', height: 300 }}>
+    <table style={{ minWidth: 200, borderCollapse: 'collapse' }}>
+      <thead style={{ display: 'block', minWidth: 200, overflow: 'auto', color: 'white', background: 'grey' }}>
+        <tr>
+        <th style={cellStyle}>Fixed Column Header</th>
+        </tr>
+      </thead>
+      <ScrollSyncPane group="vertical">
+        <tbody style={{ display: 'block', minWidth: 200, height: 200, overflowY: 'auto', background: 'lightblue' }}>
+        <tr>
+          <td style={cellStyle}>Fixed Column, Row 1</td>
+        </tr>
+        <tr>
+          <td style={cellStyle}>Fixed Column, Row 2</td>
+        </tr>
+        <tr>
+          <td style={cellStyle}>Fixed Column, Row 3</td>
+        </tr>
+        <tr>
+          <td style={cellStyle}>Fixed Column, Row 4</td>
+        </tr>
+        <tr>
+          <td style={cellStyle}>Fixed Column, Row 5</td>
+        </tr>
+        <tr>
+          <td style={cellStyle}>Fixed Column, Row 6</td>
+        </tr>
+        <tr>
+          <td style={cellStyle}>Fixed Column, Row 7</td>
+        </tr>
+        <tr>
+          <td style={cellStyle}>Fixed Column, Row 8</td>
+        </tr>
+        <tr>
+          <td style={cellStyle}>Fixed Column, Row 9</td>
+        </tr>
+        <tr>
+          <td style={cellStyle}>Fixed Column, Row 10</td>
+        </tr>
+        <tr>
+          <td style={cellStyle}>Fixed Column, Row 11</td>
+        </tr>
+        <tr>
+          <td style={cellStyle}>Fixed Column, Row 12</td>
+        </tr>
+        </tbody>
+      </ScrollSyncPane>
+    </table>
+    <table style={{ width: 400, borderCollapse: 'collapse' }}>
+      <ScrollSyncPane group="horizontal">
+        <thead style={{ display: 'block', width: 400, overflow: 'auto', color: 'white', background: 'black' }}>
+          <tr>
+          <th style={cellStyle}>Table 2 - Header 1</th>
+          <th style={cellStyle}>Table 2 - Header 2</th>
+          <th style={cellStyle}>Table 2 - Header 3</th>
+          </tr>
+        </thead>
+      </ScrollSyncPane>
+      <ScrollSyncPane group={["horizontal", "vertical"]}>
+        <tbody style={{ display: 'block', width: 400, height: 200, overflow: 'auto', background: 'pink' }}>
+        <tr>
+          <td style={cellStyle}>Cell 1, Row 1</td>
+          <td style={cellStyle}>Cell 2, Row 1</td>
+          <td style={cellStyle}>Cell 3, Row 1</td>
+        </tr>
+        <tr>
+          <td style={cellStyle}>Cell 1, Row 2</td>
+          <td style={cellStyle}>Cell 2, Row 2</td>
+          <td style={cellStyle}>Cell 3, Row 2</td>
+        </tr>
+        <tr>
+          <td style={cellStyle}>Cell 1, Row 3</td>
+          <td style={cellStyle}>Cell 2, Row 3</td>
+          <td style={cellStyle}>Cell 3, Row 3</td>
+        </tr>
+        <tr>
+          <td style={cellStyle}>Cell 1, Row 4</td>
+          <td style={cellStyle}>Cell 2, Row 4</td>
+          <td style={cellStyle}>Cell 3, Row 4</td>
+        </tr>
+        <tr>
+          <td style={cellStyle}>Cell 1, Row 5</td>
+          <td style={cellStyle}>Cell 2, Row 5</td>
+          <td style={cellStyle}>Cell 3, Row 5</td>
+        </tr>
+        <tr>
+          <td style={cellStyle}>Cell 1, Row 6</td>
+          <td style={cellStyle}>Cell 2, Row 6</td>
+          <td style={cellStyle}>Cell 3, Row 6</td>
+        </tr>
+        <tr>
+          <td style={cellStyle}>Cell 1, Row 7</td>
+          <td style={cellStyle}>Cell 2, Row 7</td>
+          <td style={cellStyle}>Cell 3, Row 7</td>
+        </tr>
+        <tr>
+          <td style={cellStyle}>Cell 1, Row 8</td>
+          <td style={cellStyle}>Cell 2, Row 8</td>
+          <td style={cellStyle}>Cell 3, Row 8</td>
+        </tr>
+        <tr>
+          <td style={cellStyle}>Cell 1, Row 9</td>
+          <td style={cellStyle}>Cell 2, Row 9</td>
+          <td style={cellStyle}>Cell 3, Row 9</td>
+        </tr>
+        <tr>
+          <td style={cellStyle}>Cell 1, Row 10</td>
+          <td style={cellStyle}>Cell 2, Row 10</td>
+          <td style={cellStyle}>Cell 3, Row 10</td>
+        </tr>
+        <tr>
+          <td style={cellStyle}>Cell 1, Row 11</td>
+          <td style={cellStyle}>Cell 2, Row 11</td>
+          <td style={cellStyle}>Cell 3, Row 11</td>
+        </tr>
+        <tr>
+          <td style={cellStyle}>Cell 1, Row 12</td>
+          <td style={cellStyle}>Cell 2, Row 12</td>
+          <td style={cellStyle}>Cell 3, Row 12</td>
+        </tr>
+        </tbody>
+      </ScrollSyncPane>
+    </table>
+  </div>
+</ScrollSync>
+```

node_modules/react-scroll-sync/src/index.js

@@ -0,0 +1,2 @@
+export { default as ScrollSync } from './ScrollSync'
+export { default as ScrollSyncPane } from './ScrollSyncPane'

node_modules/react-scroll-sync/styleguide.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  title: 'React SyncScroll Style Guide',
+  components: './src/[A-Z]*.js',
+  showCode: true
+}

node_modules/react-scroll-sync/webpack.config.js

@@ -0,0 +1,29 @@
+/* global __dirname */
+
+const path = require('path')
+
+module.exports = {
+  entry: './src/index.js',
+  devtool: 'source-map',
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'index.js',
+    libraryTarget: 'umd',
+    library: 'ScrollSync'
+  },
+  module: {
+    loaders: [
+      {
+        include: [
+          path.resolve(__dirname, 'src')
+        ],
+        test: /\.js$/,
+        loader: 'babel-loader'
+      }
+    ]
+  },
+  externals: {
+    react: 'react',
+    'react-dom': 'react-dom'
+  }
+}