init commit

.env

@@ -0,0 +1,2 @@
+SKIP_PREFLIGHT_CHECK=true
+NODE_PATH=src

.gitignore

@@ -0,0 +1,8 @@
+node_modules
+build
+npm-debug.log
+lib
+es
+yarn-error.log
+storybook-static
+__diff_output__

.prettierignore

@@ -0,0 +1,5 @@
+build
+es
+lib
+node_modules
+package.json

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "trailingComma": "none",
+  "singleQuote": true
+}

.storybook/addons.js

@@ -0,0 +1 @@
+import '@storybook/addon-options/register';

.storybook/config.js

@@ -0,0 +1,17 @@
+import { configure, addDecorator } from '@storybook/react';
+import { withOptions } from '@storybook/addon-options';
+
+addDecorator(
+  withOptions({
+    name: 'react-range',
+    url: 'https://github.com/tajo/react-range',
+    showAddonPanel: false,
+    showSearchBox: false
+  })
+);
+
+function loadStories() {
+  require('./example.stories.js');
+}
+
+configure(loadStories, module);

.storybook/example.stories.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import Basic from '../examples/Basic';
+
+storiesOf('Range', module).add('Basic', () => <Basic />);

.storybook/preview-head.html

@@ -0,0 +1 @@
+<meta name="viewport" content="width=device-width, initial-scale=1" />

.storybook/webpack.config.js

@@ -0,0 +1,33 @@
+const path = require('path');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+
+module.exports = (_baseCnig, _env, config) => ({
+  ...config,
+  devtool: false,
+  module: {
+    rules: [
+      ...config.module.rules,
+      {
+        test: /\.tsx?$/,
+        include: [
+          path.resolve(__dirname, '../src'),
+          path.resolve(__dirname, '../examples')
+        ],
+        use: [
+          {
+            loader: require.resolve('awesome-typescript-loader')
+          }
+        ]
+      }
+    ],
+    exprContextCritical: false
+  },
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js']
+  },
+  plugins: [...config.plugins, new ForkTsCheckerWebpackPlugin()],
+  node: {
+    fs: 'empty',
+    module: 'empty'
+  }
+});

.travis.yml

@@ -0,0 +1,8 @@
+language: node_js
+os:
+  - osx
+node_js:
+  - 'lts/*'
+script:
+  - yarn build
+  - yarn test -- --runInBand

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2019-present, Vojtech Miksu
+
+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.

README.md

@@ -0,0 +1,65 @@
+# react-range
+
+[![npm version](https://img.shields.io/npm/v/react-range.svg?style=flat-square)](https://www.npmjs.com/package/react-range)
+[![npm downloads](https://img.shields.io/npm/dm/react-range.svg?style=flat-square)](https://www.npmjs.com/package/react-range)
+[![Build Status](https://travis-ci.org/tajo/react-range.svg?branch=master)](https://travis-ci.org/tajo/react-range)
+
+[See all the other examples](https://react-range.netlify.com) and [their source code](https://github.com/tajo/react-range/tree/master/examples)!
+
+## Installation
+
+```
+yarn add react react-dom react-range
+```
+
+## End to end testing
+
+**This library is tightly coupled to many DOM APIs**. It would be very hard to write unit tests that would not involve a lot of mocking. Or we could re-architect the library to better abstract all DOM interfaces but that would mean more code and bigger footprint.
+
+Instead of that, `react-range` is thoroughly tested by end to end tests powered by [puppeteer](https://github.com/GoogleChrome/puppeteer). It tests all user interactions:
+
+All tests are automatically ran in Travis CI with headless chromium. This way, the public API is well tested, including pixel-perfect positioning. Also, the tests are pretty fast, reliable and very descriptive.
+
+Do you want to run them in the `dev` mode (slows down operations, opens the browser)?
+
+```bash
+yarn storybook #start the storybook server
+yarn test:e2e:dev #run the e2e tests
+```
+
+`CI` mode (storybook started on the background, quick, headless)
+
+```bash
+yarn test:e2e
+```
+
+## Browser support
+
+- **Chrome** (latest, mac, windows, iOS, Android)
+- **Firefox** (latest, mac, windows)
+- **Safari** (latest, mac, iOS)
+- **Edge** (latest, windows)
+- **MSIE 11** (windows)
+
+## Contributing
+
+This is how you can spin up the dev environment:
+
+```
+git clone https://github.com/tajo/react-range
+cd react-range
+yarn
+yarn storybook
+```
+
+## Shoutouts 🙏
+
+Big big shoutout to [Tom MacWright](https://macwright.org/) for donating the `react-range` npm handle! ❤️
+
+<img src="https://raw.githubusercontent.com/tajo/react-range/master/assets/browserstack-logo.png?raw=true" height="80" title="BrowserStack Logo" alt="BrowserStack Logo" />
+
+Big thanks to [BrowserStack](https://www.browserstack.com) for letting the maintainers use their service to debug browser issues.
+
+## Author
+
+Vojtech Miksu 2019, [miksu.cz](https://miksu.cz), [@vmiksu](https://twitter.com/vmiksu)

e2e/utils.ts

@@ -0,0 +1,150 @@
+import * as puppeteer from 'puppeteer';
+
+export enum Examples {
+  BASIC,
+  HEIGHTS,
+  SCROLLING_CONTAINER,
+  SCROLLING_WINDOW
+}
+
+export const getTestUrl = (example: Examples): string => {
+  const PORT = process.env.E2E === 'dev' ? 9010 : 9011;
+  switch (example) {
+    case Examples.BASIC:
+      return `http://localhost:${PORT}/iframe.html?selectedKind=List&selectedStory=Basic`;
+    case Examples.HEIGHTS:
+      return `http://localhost:${PORT}/iframe.html?selectedKind=List&selectedStory=Varying%20heights`;
+    case Examples.SCROLLING_CONTAINER:
+      return `http://localhost:${PORT}/iframe.html?selectedKind=List&selectedStory=Scrolling%20container`;
+    case Examples.SCROLLING_WINDOW:
+      return `http://localhost:${PORT}/iframe.html?selectedKind=List&selectedStory=Scrolling%20window`;
+  }
+};
+
+export const makeDnd = async (
+  mouse: puppeteer.Mouse,
+  from: number,
+  to: number,
+  positions: number[][]
+) => {
+  await mouse.move(positions[from - 1][0], positions[from - 1][1]);
+  await mouse.down();
+  await mouse.move(positions[to - 1][0], positions[to - 1][1]);
+  await mouse.up();
+  // make sure that originally dragged item is visible (rendered)
+  // in a new place
+  await page.waitForSelector(`#root li:nth-child(${from})`, {
+    visible: true
+  });
+};
+
+export const trackMouse = async (page: puppeteer.Page) => {
+  await page.evaluate(showCursor);
+};
+
+export const untrackMouse = async (page: puppeteer.Page) => {
+  await page.evaluate(hideCursor);
+  await page.waitForSelector('.mouse-helper', { hidden: true });
+};
+
+export const addFontStyles = async (page: puppeteer.Page) => {
+  await page.evaluate(fontStyles);
+};
+
+// This injects a box into the page that moves with the mouse;
+// Useful for debugging
+const showCursor = () => {
+  const box = document.createElement('div');
+  box.classList.add('mouse-helper');
+  const styleElement = document.createElement('style');
+  styleElement.innerHTML = `
+  .mouse-helper {
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 20px;
+    height: 20px;
+    background: rgba(0,0,0,.4);
+    border: 1px solid white;
+    border-radius: 10px;
+    margin-left: -10px;
+    margin-top: -10px;
+    transition: background .2s, border-radius .2s, border-color .2s;
+    z-index: 5000;
+  }
+  .mouse-helper.button-1 {
+    transition: none;
+    background: rgba(0,0,0,0.9);
+  }
+  .mouse-helper.button-2 {
+    transition: none;
+    border-color: rgba(0,0,255,0.9);
+  }
+  .mouse-helper.button-3 {
+    transition: none;
+    border-radius: 4px;
+  }
+  .mouse-helper.button-4 {
+    transition: none;
+    border-color: rgba(255,0,0,0.9);
+  }
+  .mouse-helper.button-5 {
+    transition: none;
+    border-color: rgba(0,255,0,0.9);
+  }
+  `;
+
+  const onMouseMove = (event: MouseEvent) => {
+    box.style.left = event.pageX + 'px';
+    box.style.top = event.pageY + 'px';
+    updateButtons(event.buttons);
+  };
+
+  const onMouseDown = (event: MouseEvent) => {
+    updateButtons(event.buttons);
+    box.classList.add('button-' + event.which);
+  };
+
+  const onMouseUp = (event: MouseEvent) => {
+    updateButtons(event.buttons);
+    box.classList.remove('button-' + event.which);
+  };
+
+  document.head.appendChild(styleElement);
+  document.body.appendChild(box);
+  document.addEventListener('mousemove', onMouseMove, true);
+  document.addEventListener('mousedown', onMouseDown, true);
+  document.addEventListener('mouseup', onMouseUp, true);
+  function updateButtons(buttons: any) {
+    for (let i = 0; i < 5; i++)
+      // @ts-ignore
+      box.classList.toggle('button-' + i, buttons & (1 << i));
+  }
+};
+
+// make the cursor invisble, good for visual snaps
+const hideCursor = () => {
+  const styleElement = document.createElement('style');
+  styleElement.innerHTML = `
+  .mouse-helper {
+    display: none;
+  }
+  `;
+  document.head.appendChild(styleElement);
+};
+
+// This injects a box into the page that moves with the mouse;
+// Useful for debugging
+const fontStyles = () => {
+  const styleElement = document.createElement('style');
+  styleElement.innerHTML = `
+  li {
+    font-weight: normal;
+    font-style: normal;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+  }
+  `;
+  document.head.appendChild(styleElement);
+};

examples/Basic.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { Range } from '../src/index';
+
+class Basic extends React.Component {
+  render() {
+    return <Range />;
+  }
+}
+
+export default Basic;

flowtypes/Range.flow.js

@@ -0,0 +1,2 @@
+declare interface IRangeProps {}
+declare module.exports: typeof Range;

image-reporter.js

@@ -0,0 +1,32 @@
+const fs = require('fs');
+const imgur = require('imgur');
+const clientId = 'ef1b6c91b9b66b8';
+
+class ImageReporter {
+  constructor(globalConfig, options) {
+    this._globalConfig = globalConfig;
+    this._options = options;
+  }
+  onTestResult(test, testResult, aggregateResults) {
+    if (
+      testResult.numFailingTests &&
+      testResult.failureMessage.match(/different from snapshot/)
+    ) {
+      const files = fs.readdirSync(
+        './e2e/__image_snapshots__/__diff_output__/'
+      );
+      files.forEach(value => {
+        imgur
+          .uploadFile(`./e2e/__image_snapshots__/__diff_output__/${value}`)
+          .then(function(json) {
+            console.log(`diff ${value} uploaded to ${json.data.link}`);
+          })
+          .catch(function(err) {
+            console.error(err.message);
+          });
+      });
+    }
+  }
+}
+
+module.exports = ImageReporter;

jest-puppeteer.config.js

@@ -0,0 +1,8 @@
+const IS_DEV = process.env.E2E === 'dev';
+
+module.exports = {
+  launch: {
+    headless: !IS_DEV,
+    slowMo: IS_DEV ? 200 : 0
+  }
+};