Merge pull request #3 from sakhnyuk/dev

Documentation website based on Dumi

Author: sakhnyuk

.eslintignore

@@ -1,3 +1,2 @@
 lib
 **/node_modules
-examples/**/server.js

.gitignore

@@ -6,3 +6,8 @@ lib
 coverage
 examples/simple/static
 .idea/
+
+# umi
+.umi
+.umi-production
+.env.local

.npmignore

@@ -5,3 +5,4 @@ test
 examples
 coverage
 .idea
+docs

.nvmrc

@@ -0,0 +1,13 @@
+import { defineConfig } from 'dumi';
+
+export default defineConfig({
+  title: 'rc-scrollbar',
+  mode: 'docs',
+  logo: '/logo.svg',
+  favicon: '/favicon.ico',
+  exportStatic: {},
+  hash: true,
+  resolve: {
+    includes: ['docs'],
+  },
+});

.travis.yml

@@ -32,7 +32,7 @@ This assumes that you’re using [npm](http://npmjs.com/) package manager with a
 
 This is the minimal configuration. [Check out the Documentation for advanced usage](https://github.com/sakhnyuk/rc-scrollbars/tree/master/docs).
 
-```jsx
+```javascript
 import { Scrollbars } from 'rc-scrollbars';
 
 class App extends Component {
@@ -48,7 +48,7 @@ class App extends Component {
 
 The `<Scrollbars>` component is completely customizable. Check out the following code:
 
-```jsx
+```javascript
 import { Scrollbars } from 'rc-scrollbars';
 
 class CustomScrollbars extends Component {

.umirc.ts

@@ -1,9 +1,118 @@
-# Table of Contents
-
-* [Usage](usage.md)
-  * [Auto hide](usage.md#auto-hide)
-  * [Auto height](usage.md#auto-height)
-  * [Working with events](usage.md#events)
-  * [Universal rendering](usage.md#universal-rendering)
-* [Customization](customization.md)
-* [API](API.md)
+---
+title: Getting started
+order: 1
+---
+
+# rc-scrollbars
+rejuvenated project of <a href="https://github.com/malte-wessel/react-custom-scrollbars" target="_blank">react-custom-scrollbars</a>
+
+[![npm](https://img.shields.io/badge/npm-rc--scrollbars-brightgreen.svg?style=flat-square)](https://www.npmjs.com/package/rc-scrollbars)
+[![npm version](https://img.shields.io/npm/v/rc-scrollbars.svg?style=flat-square)](https://www.npmjs.com/package/rc-scrollbars)
+[![npm downloads](https://img.shields.io/npm/dm/rc-scrollbars.svg?style=flat-square)](https://www.npmjs.com/package/rc-scrollbars)
+
+* frictionless native browser scrolling
+* native scrollbars for mobile devices
+* [fully customizable](/customization)
+* [auto hide](/usage#auto-hide)
+* [auto height](/usage#auto-height)
+* [universal](/usage#universal-rendering) (runs on client & server)
+* `requestAnimationFrame` for 60fps
+* no extra stylesheets
+* well tested, 100% code coverage
+
+**[Demos](/demo) · [API](/api)**
+
+## Installation
+```bash
+npm install rc-scrollbars --save
+
+# OR
+
+yarn add rc-scrollbars
+```
+
+This assumes that you’re using [npm](http://npmjs.com/) package manager with a module bundler like [Webpack](http://webpack.github.io) or [Browserify](http://browserify.org/) to consume [CommonJS modules](http://webpack.github.io/docs/commonjs.html).
+
+## Usage
+
+This is the minimal configuration. [Check out the Documentation for advanced usage](https://github.com/sakhnyuk/rc-scrollbars/tree/master/docs).
+
+```javascript
+import { Scrollbars } from 'rc-scrollbars';
+
+class App extends Component {
+  render() {
+    return (
+      <Scrollbars style={{ width: 500, height: 300 }}>
+        <p>Some great content...</p>
+      </Scrollbars>
+    );
+  }
+}
+```
+
+The `<Scrollbars>` component is completely customizable. Check out the following code:
+
+```javascript
+import { Scrollbars } from 'rc-scrollbars';
+
+class CustomScrollbars extends Component {
+  render() {
+    return (
+      <Scrollbars
+        onScroll={this.handleScroll}
+        onScrollFrame={this.handleScrollFrame}
+        onScrollStart={this.handleScrollStart}
+        onScrollStop={this.handleScrollStop}
+        onUpdate={this.handleUpdate}
+        renderView={this.renderView}
+        renderTrackHorizontal={this.renderTrackHorizontal}
+        renderTrackVertical={this.renderTrackVertical}
+        renderThumbHorizontal={this.renderThumbHorizontal}
+        renderThumbVertical={this.renderThumbVertical}
+        autoHide
+        autoHideTimeout={1000}
+        autoHideDuration={200}
+        autoHeight
+        autoHeightMin={0}
+        autoHeightMax={200}
+        thumbMinSize={30}
+        universal={true}
+        {...this.props} />
+    );
+  }
+}
+```
+
+All properties are documented in the [API docs](/API)
+
+## Examples
+
+Run the simple example:
+```bash
+# Make sure that you've installed the dependencies
+yarn install
+# Move to example directory
+cd example/
+yarn install
+yarn start
+```
+
+## Tests (WIP)
+```bash
+# Make sure that you've installed the dependencies
+yarn install
+# Run tests
+yarn test
+```
+
+### Code Coverage (WIP)
+```bash
+# Run code coverage. Results can be found in `./coverage`
+yarn test:cov
+```
+
+
+## License
+
+MIT

README.md

@@ -1,46 +1,51 @@
-import { Component } from "react";
-import { Scrollbars } from "rc-scrollbars";
+import { Component, HTMLAttributes } from 'react';
+import { Scrollbars } from 'rc-scrollbars';
+import { ScrollValues } from 'lib/Scrollbars/types';
+
+type State = {
+  top: number;
+};
 
 export default class ColoredScrollbars extends Component {
-  constructor(props, ...rest) {
-    super(props, ...rest);
+  state: State;
+
+  constructor(props) {
+    super(props);
     this.state = { top: 0 };
     this.handleUpdate = this.handleUpdate.bind(this);
     this.renderView = this.renderView.bind(this);
     this.renderThumb = this.renderThumb.bind(this);
   }
 
-  handleUpdate(values) {
+  handleUpdate = (values: ScrollValues) => {
     const { top } = values;
     this.setState({ top });
-  }
+  };
 
-  renderView({ style, ...props }) {
+  renderView = ({ style, ...props }: HTMLAttributes<HTMLDivElement>) => {
     const { top } = this.state;
     const viewStyle = {
       padding: 15,
-      backgroundColor: `rgb(${Math.round(255 - top * 255)}, ${Math.round(
-        top * 255
-      )}, ${Math.round(255)})`,
-      color: `rgb(${Math.round(255 - top * 255)}, ${Math.round(
-        255 - top * 255
-      )}, ${Math.round(255 - top * 255)})`,
+      backgroundColor: `rgb(${Math.round(255 - top * 255)}, ${Math.round(top * 255)}, ${Math.round(
+        255,
+      )})`,
+      color: `rgb(${Math.round(255 - top * 255)}, ${Math.round(255 - top * 255)}, ${Math.round(
+        255 - top * 255,
+      )})`,
     };
-    return (
-      <div className="box" style={{ ...style, ...viewStyle }} {...props} />
-    );
-  }
+    return <div className="box" style={{ ...style, ...viewStyle }} {...props} />;
+  };
 
-  renderThumb({ style, ...props }) {
+  renderThumb = ({ style, ...props }: HTMLAttributes<HTMLDivElement>) => {
     const { top } = this.state;
     const thumbStyle = {
       backgroundColor: `rgb(${Math.round(255 - top * 255)}, ${Math.round(
-        255 - top * 255
+        255 - top * 255,
       )}, ${Math.round(255 - top * 255)})`,
-      borderRadius: 'inherit'
+      borderRadius: 'inherit',
     };
     return <div style={{ ...style, ...thumbStyle }} {...props} />;
-  }
+  };
 
   render() {
     return (