From 5b7af0aa3d71c9c61fc7e3984f582df11d4256fb Mon Sep 17 00:00:00 2001 From: Malte W Date: Fri, 7 Aug 2015 13:52:16 +0200 Subject: [PATCH] clean up --- LICENSE.md | 2 +- README.md | 17 +------- examples/simple/components/App.js | 10 ++--- examples/simple/index.html | 15 ++++--- examples/simple/index.js | 5 +-- examples/simple/package.json | 17 ++++---- examples/simple/server.js | 19 ++++----- examples/simple/webpack.config.js | 64 +++++++++++++++--------------- package.json | 30 ++++++++------ src/{Scroller.js => Scrollbars.js} | 9 ++--- src/index.js | 4 +- src/utils/addStylesheet.js | 4 +- test/index.spec.js | 9 ++--- webpack.config.js | 54 ++++++++++++------------- 14 files changed, 122 insertions(+), 137 deletions(-) rename src/{Scroller.js => Scrollbars.js} (98%) diff --git a/LICENSE.md b/LICENSE.md index db5ddc04..6339b26c 100644 --- a/LICENSE.md +++ b/LICENSE.md @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2015 library-boilerplate-author +Copyright (c) 2015 react-custom-scrollbars Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index d95becf4..45db5c50 100644 --- a/README.md +++ b/README.md @@ -1,17 +1,2 @@ -library-boilerplate +react-custom-scrollbars ========================= - -An opinionated setup I plan to use for my libraries. - -It has CommonJS and UMD builds via Babel and Webpack, ESLint, and Mocha. -It also has React-friendly examples folder with library code mapped to the sources. - -If you use this, make sure to grep for “library-boilerplate” and replace every occurrence. -See `package.json` in the root and the example folder for the list of the available commands. - -Note that this is an *opinionated* boilerplate. You might want to: - -* Set `stage` to `2` in `.babelrc` so you don’t depend on language features that might be gone tomorrow; -* Remove `loose: ["all"]` from `.babelrc` so the behavior is spec-compliant. - -You have been warned. diff --git a/examples/simple/components/App.js b/examples/simple/components/App.js index 1e5d99c4..a0fc365d 100644 --- a/examples/simple/components/App.js +++ b/examples/simple/components/App.js @@ -1,12 +1,12 @@ import React, { Component } from 'react'; -import { Scroller } from 'react-scroller'; +import { Scrollbars } from 'react-custom-scrollbars'; export default class App extends Component { render() { return (
- +

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

@@ -21,10 +21,10 @@ export default class App extends Component {

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

- +
- +

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

@@ -39,7 +39,7 @@ export default class App extends Component {

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

- +
); diff --git a/examples/simple/index.html b/examples/simple/index.html index 71e917d1..56a09ded 100644 --- a/examples/simple/index.html +++ b/examples/simple/index.html @@ -1,10 +1,9 @@ - - library-boilerplate-example-title - - -
-
- - + + react-custom-scrollbars simple example + + +
+ + diff --git a/examples/simple/index.js b/examples/simple/index.js index 6428bc07..9b96842d 100644 --- a/examples/simple/index.js +++ b/examples/simple/index.js @@ -2,7 +2,4 @@ import React from 'react'; import { render } from 'react-dom'; import App from './components/App'; -render( - , - document.getElementById('root') -); +render(, document.getElementById('root')); diff --git a/examples/simple/package.json b/examples/simple/package.json index c0aa2f48..14d7b8aa 100644 --- a/examples/simple/package.json +++ b/examples/simple/package.json @@ -1,23 +1,26 @@ { - "name": "library-boilerplate-example", - "version": "1.0.0", - "description": "library-boilerplate-example-description", + "name": "react-custom-scrollbars-example", + "version": "0.1.0", + "description": "Simple example", "main": "server.js", "scripts": { "start": "node server.js" }, "repository": { "type": "git", - "url": "https://github.com/library-boilerplate-author/library-boilerplate.git" + "url": "https://github.com/malte-wessel/react-custom-scrollbars.git" }, "keywords": [ - "library-boilerplate-keywords" + "scroll", + "scroller", + "scrollbars", + "react" ], "license": "MIT", "bugs": { - "url": "https://github.com/library-boilerplate-author/library-boilerplate/issues" + "url": "https://github.com/malte-wessel/react-custom-scrollbars/issues" }, - "homepage": "https://github.com/library-boilerplate-author/library-boilerplate", + "homepage": "https://github.com/malte-wessel/react-custom-scrollbars", "dependencies": {}, "devDependencies": { "babel-core": "^5.6.18", diff --git a/examples/simple/server.js b/examples/simple/server.js index ff92aa06..deb09a82 100644 --- a/examples/simple/server.js +++ b/examples/simple/server.js @@ -3,16 +3,13 @@ var WebpackDevServer = require('webpack-dev-server'); var config = require('./webpack.config'); new WebpackDevServer(webpack(config), { - publicPath: config.output.publicPath, - hot: true, - historyApiFallback: true, - stats: { - colors: true - } + publicPath: config.output.publicPath, + hot: true, + historyApiFallback: true, + stats: { + colors: true + } }).listen(3000, 'localhost', function (err) { - if (err) { - console.log(err); - } - - console.log('Listening at localhost:3000'); + if (err) console.log(err); + console.log('Listening at localhost:3000'); }); diff --git a/examples/simple/webpack.config.js b/examples/simple/webpack.config.js index d7797ade..c4f927e3 100644 --- a/examples/simple/webpack.config.js +++ b/examples/simple/webpack.config.js @@ -2,37 +2,37 @@ var path = require('path'); var webpack = require('webpack'); module.exports = { - devtool: 'eval', - entry: [ - 'webpack-dev-server/client?http://localhost:3000', - 'webpack/hot/only-dev-server', - './index' - ], - output: { - path: path.join(__dirname, 'dist'), - filename: 'bundle.js', - publicPath: '/static/' - }, - plugins: [ - new webpack.HotModuleReplacementPlugin(), - new webpack.NoErrorsPlugin() - ], - resolve: { - alias: { - 'react-scroller': path.join(__dirname, '..', '..', 'src') + devtool: 'eval', + entry: [ + 'webpack-dev-server/client?http://localhost:3000', + 'webpack/hot/only-dev-server', + './index' + ], + output: { + path: path.join(__dirname, 'dist'), + filename: 'bundle.js', + publicPath: '/static/' }, - extensions: ['', '.js'] - }, - module: { - loaders: [{ - test: /\.js$/, - loaders: ['react-hot', 'babel'], - exclude: /node_modules/, - include: __dirname - }, { - test: /\.js$/, - loaders: ['babel'], - include: path.join(__dirname, '..', '..', 'src') - }] - } + plugins: [ + new webpack.HotModuleReplacementPlugin(), + new webpack.NoErrorsPlugin() + ], + resolve: { + alias: { + 'react-custom-scrollbars': path.join(__dirname, '..', '..', 'src') + }, + extensions: ['', '.js'] + }, + module: { + loaders: [{ + test: /\.js$/, + loaders: ['react-hot', 'babel'], + exclude: /node_modules/, + include: __dirname + }, { + test: /\.js$/, + loaders: ['babel'], + include: path.join(__dirname, '..', '..', 'src') + }] + } }; diff --git a/package.json b/package.json index 27db02ac..7a07ee40 100644 --- a/package.json +++ b/package.json @@ -1,12 +1,12 @@ { - "name": "library-boilerplate", - "version": "1.0.0", - "description": "library-boilerplate-description", + "name": "react-custom-scrollbars", + "version": "0.1.0", + "description": "React scrollbars component", "main": "lib/index.js", "scripts": { "clean": "rimraf lib dist", "build": "babel src --out-dir lib", - "build:umd": "webpack src/index.js dist/library-boilerplate.js && NODE_ENV=production webpack src/index.js dist/library-boilerplate.min.js", + "build:umd": "webpack src/index.js dist/react-custom-scrollbars.js && NODE_ENV=production webpack src/index.js dist/react-custom-scrollbars.min.js", "lint": "eslint src test examples", "test": "NODE_ENV=test mocha --compilers js:babel/register --recursive", "test:watch": "NODE_ENV=test mocha --compilers js:babel/register --recursive --watch", @@ -15,17 +15,21 @@ }, "repository": { "type": "git", - "url": "https://github.com/library-boilerplate-author/library-boilerplate.git" + "url": "https://github.com/malte-wessel/react-custom-scrollbars.git" }, "keywords": [ - "library-boilerplate-keywords" + "scroll", + "scroller", + "scrollbars", + "react", + "custom" ], - "author": "library-boilerplate-author", + "author": "Malte Wessel", "license": "MIT", "bugs": { - "url": "https://github.com/library-boilerplate-author/library-boilerplate/issues" + "url": "https://github.com/malte-wessel/react-custom-scrollbars/issues" }, - "homepage": "https://github.com/library-boilerplate-author/library-boilerplate", + "homepage": "https://github.com/malte-wessel/react-custom-scrollbars", "devDependencies": { "babel": "^5.5.8", "babel-core": "^5.6.18", @@ -43,7 +47,9 @@ "webpack": "^1.9.6", "webpack-dev-server": "^1.8.2" }, - "dependencies": { - "invariant": "^2.0.0" - } + "peerDependencies": { + "react": "^0.14.0-beta3", + "react-dom": "^0.14.0-beta3" + }, + "dependencies": {} } diff --git a/src/Scroller.js b/src/Scrollbars.js similarity index 98% rename from src/Scroller.js rename to src/Scrollbars.js index 05c0c35e..5f45d270 100644 --- a/src/Scroller.js +++ b/src/Scrollbars.js @@ -1,4 +1,4 @@ -import React, { isValidElement, Component, PropTypes, cloneElement } from 'react'; +import React, { Component, PropTypes, cloneElement } from 'react'; import { findDOMNode } from 'react-dom'; import addClass from './utils/addClass'; import removeClass from './utils/removeClass'; @@ -9,8 +9,8 @@ import returnFalse from './utils/returnFalse'; let SCROLLBAR_WIDTH = false; const classnames = { - testScrollbar: 'react-scroller-test-scrollbar', - disableSelection: 'react-scroller-disable-selection' + testScrollbar: 'react-custom-scrollbars-test-scrollbar', + disableSelection: 'react-custom-scrollbars-disable-selection' }; const stylesheet = [ @@ -80,7 +80,7 @@ function getDefaultView({ style, ...props }) { return
; } -export default class Scroller extends Component { +export default class Scrollbars extends Component { static propTypes = { scrollbarHorizontal: PropTypes.func, @@ -380,5 +380,4 @@ export default class Scroller extends Component {
); } - } diff --git a/src/index.js b/src/index.js index aefa18d6..7d0d75eb 100644 --- a/src/index.js +++ b/src/index.js @@ -1,2 +1,2 @@ -import Scroller from './Scroller'; -export { Scroller }; +import Scrollbars from './Scrollbars'; +export { Scrollbars }; diff --git a/src/utils/addStylesheet.js b/src/utils/addStylesheet.js index 3124a7c3..a5324069 100644 --- a/src/utils/addStylesheet.js +++ b/src/utils/addStylesheet.js @@ -1,8 +1,8 @@ export default function addStyleSheet(styles) { - if (document.getElementById('react-scroller-styles')) return; + if (document.getElementById('react-custom-scrollbars-styles')) return; const style = document.createElement('style'); style.type = 'text/css'; - style.id = 'react-scroller-styles'; + style.id = 'react-custom-scrollbars-styles'; style.innerHTML = styles; document.body.appendChild(style); } diff --git a/test/index.spec.js b/test/index.spec.js index 4d7d1572..c019eda3 100644 --- a/test/index.spec.js +++ b/test/index.spec.js @@ -1,8 +1,7 @@ import expect from 'expect'; -import { add } from '../src'; -describe('add', () => { - it('should add 2 and 2', () => { - expect(add(2, 2)).toBe(4); - }); +describe('Scrollbars', () => { + it('works', () => { + expect(true).toBe(true); + }); }); diff --git a/webpack.config.js b/webpack.config.js index 78348b16..f38b2a91 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -3,37 +3,37 @@ var webpack = require('webpack'); var plugins = [ - new webpack.optimize.OccurenceOrderPlugin(), - new webpack.DefinePlugin({ - 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) - }) + new webpack.optimize.OccurenceOrderPlugin(), + new webpack.DefinePlugin({ + 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) + }) ]; if (process.env.NODE_ENV === 'production') { - plugins.push( - new webpack.optimize.UglifyJsPlugin({ - compressor: { - screw_ie8: true, - warnings: false - } - }) - ); + plugins.push( + new webpack.optimize.UglifyJsPlugin({ + compressor: { + screw_ie8: true, + warnings: false + } + }) + ); } module.exports = { - module: { - loaders: [{ - test: /\.js$/, - loaders: ['babel-loader'], - exclude: /node_modules/ - }] - }, - output: { - library: 'library-boilerplate', - libraryTarget: 'umd' - }, - plugins: plugins, - resolve: { - extensions: ['', '.js'] - } + module: { + loaders: [{ + test: /\.js$/, + loaders: ['babel-loader'], + exclude: /node_modules/ + }] + }, + output: { + library: 'react-custom-scrollbars', + libraryTarget: 'umd' + }, + plugins: plugins, + resolve: { + extensions: ['', '.js'] + } };