switch to webpack

ninjasort · Oct 29, 2022 · 74f11a4 · 74f11a4
1 parent b0b0487
commit 74f11a4
Show file tree

Hide file tree

Showing 11 changed files with 7,341 additions and 209 deletions.
diff --git a/.babelrc b/.babelrc
diff --git a/gulpfile.js b/gulpfile.js
diff --git a/package.json b/package.json
@@ -5,39 +5,33 @@
   "main": "./dist/react-star-rating.min.js",
   "scripts": {
     "start": "npm run watch",
-    "watch": "gulp watch",
-    "build": "gulp dist",
+    "dev": "webpack serve",
+    "build": "webpack",
     "test": "karma start",
-    "prepublish": "npm run build"
+    "prepublish": ""
   },
-  "author": "Cameron J Roe <[email protected]> (http://cameronjroe.com/)",
   "repository": "cameronroe/react-star-rating",
   "license": "MIT",
   "dependencies": {
-    "classnames": "^2.3.2"
+    "classnames": "^2.3.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "babel-eslint": "^4.1.4",
-    "babel-preset-es2015": "^6.0.15",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-0": "^6.24.1",
-    "babelify": "^10.0.0",
-    "browserify": "^17.0.0",
+    "@babel/core": "^7.19.6",
+    "@babel/preset-env": "^7.19.4",
+    "@babel/preset-react": "^7.18.6",
+    "autoprefixer": "^10.4.13",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "^9.0.0",
     "chai": "^4.3.6",
-    "gulp": "^4.0.2",
-    "gulp-babel": "^8.0.0",
-    "gulp-concat": "^2.6.1",
-    "gulp-eslint": "^6.0.0",
-    "gulp-jshint": "^2.1.0",
-    "gulp-karma": "0.0.5",
-    "gulp-minify-css": "^1.2.1",
-    "gulp-rename": "^2.0.0",
-    "gulp-replace": "^1.1.3",
-    "gulp-sass": "^5.1.0",
-    "gulp-uglify": "^3.0.2",
-    "gulp-webserver": "^0.9.1",
-    "isparta": "^4.1.1",
-    "istanbul-instrumenter-loader": "^3.0.1",
+    "cross-env": "^7.0.3",
+    "css-loader": "^6.7.1",
+    "eslint": "^8.26.0",
+    "eslint-webpack-plugin": "^3.2.0",
+    "html-webpack-plugin": "^5.5.0",
+    "isparta": "^3.0.4",
+    "istanbul-instrumenter-loader": "^2.0.0",
     "jshint-stylish": "^2.2.1",
     "karma": "^6.4.1",
     "karma-babel-preprocessor": "^8.0.2",
@@ -50,12 +44,18 @@
     "mocha": "^10.1.0",
     "node-bourbon": "^4.2.8",
     "node-sass": "^7.0.3",
-    "react": "^18.2.0",
+    "postcss": "^8.4.18",
+    "postcss-loader": "^7.0.1",
     "react-addons-test-utils": "^15.6.2",
-    "react-dom": "^18.2.0",
+    "sass": "^1.55.0",
+    "sass-loader": "^13.1.0",
     "sinon": "^14.0.1",
+    "style-loader": "^3.3.1",
     "through2": "^4.0.2",
     "vinyl-source-stream": "^2.0.0",
-    "webpack": "^5.74.0"
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.11.1",
+    "webpack-shell-plugin-next": "^2.2.2"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: [
+    require('autoprefixer')
+  ]
+}
diff --git a/src/StarRating.js b/src/StarRating.js
@@ -1,6 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import cx from 'classnames';
+import { utils } from './utils';
+import './sass/react-star-rating.scss';
 
 function isFloat(n) {
   return n === Number(n) && n % 1 !== 0;
@@ -14,7 +16,6 @@ function isFloat(n) {
 
 /**
  * @fileoverview react-star-rating
- * @author @cameronjroe
  * <StarRating
  *   name={string} - name for form input (required)
  *   caption={string} - caption for rating (optional)
@@ -28,16 +29,16 @@ function isFloat(n) {
  */
 class StarRating extends React.Component {
 
-  static propTypes = {
-    name: React.PropTypes.string.isRequired,
-    caption: React.PropTypes.string,
-    totalStars: React.PropTypes.number.isRequired,
-    rating: React.PropTypes.number,
-    onRatingClick: React.PropTypes.func,
-    disabled: React.PropTypes.bool,
-    editing: React.PropTypes.bool,
-    size: React.PropTypes.number
-  }
+  // static propTypes = {
+  //   name: React.PropTypes.string.isRequired,
+  //   caption: React.PropTypes.string,
+  //   totalStars: React.PropTypes.number.isRequired,
+  //   rating: React.PropTypes.number,
+  //   onRatingClick: React.PropTypes.func,
+  //   disabled: React.PropTypes.bool,
+  //   editing: React.PropTypes.bool,
+  //   size: React.PropTypes.number
+  // }
 
   static defaultProps = {
     step: 1,
@@ -65,7 +66,7 @@ class StarRating extends React.Component {
   componentWillMount() {
     this.min = 0;
     this.max = this.props.totalStars || 5;
-    
+
     if (this.props.rating) {
       this.state.editing = this.props.editing || false;
     }
@@ -94,15 +95,6 @@ class StarRating extends React.Component {
     return stars;
   }
 
-  /**
-   * Gets the mouse position
-   * @param  {event} e
-   * @return {number} delta
-   */
-  getPosition(e) {
-    return e.clientX - this.root.getBoundingClientRect().left;
-  }
-
   getWidthFromValue(val) {
     var min = this.min,
         max = this.max;
@@ -115,28 +107,8 @@ class StarRating extends React.Component {
     return (val - min) * 100 / (max - min);
   }
 
-  applyPrecision(val, precision) {
-    return parseFloat(val.toFixed(precision));
-  }
-
-  getDecimalPlaces(num) {
-    var match = ('' + num).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
-    return !match ? 0 : Math.max(0, (match[1] ? match[1].length : 0) - (match[2] ? +match[2] : 0));
-  }
-
-  getValueFromPosition(pos) {
-    var precision = this.getDecimalPlaces(this.props.step);
-    var maxWidth = this.ratingContainer.offsetWidth;
-    var diff = this.max - this.min;
-    var factor = (diff * pos) / (maxWidth * this.props.step);
-    factor = Math.ceil(factor);
-    var val = this.applyPrecision(parseFloat(this.min + factor * this.props.step), precision);
-    val = Math.max(Math.min(val, this.max), this.min);
-    return val;
-  }
-
   calculate(pos) {
-    var val = this.getValueFromPosition(pos),
+    var val = utils.getValueFromPosition(pos, this.props.step, this.ratingContainer, this.min, this.max),
         width = this.getWidthFromValue(val);
 
     width += '%';
@@ -148,7 +120,8 @@ class StarRating extends React.Component {
   }
 
   getRatingEvent(e) {
-    var pos = this.getPosition(e);
+    var root = this.root;
+    var pos = utils.getPosition(e, root);
     return this.calculate(pos);
   }
 
@@ -175,11 +148,11 @@ class StarRating extends React.Component {
     };
 
     return (
-      <svg className="rsr__star" 
-        style={styles} 
-        viewBox={`0 0 ${stars.length} 50`} 
-        preserveAspectRatio="xMinYMin meet" 
-        version="1.1" 
+      <svg className="rsr__star"
+        style={styles}
+        viewBox={`0 0 ${stars.length} 50`}
+        preserveAspectRatio="xMinYMin meet"
+        version="1.1"
         xmlns="http://www.w3.org/2000/svg">
         {/*
           React Doesn't support `mask` attributes yet
@@ -275,12 +248,6 @@ class StarRating extends React.Component {
     });
   }
 
-  treatName(title) {
-    if (typeof title === 'string') {
-      return title.toLowerCase().split(' ').join('_');
-    }
-  }
-
   getClasses() {
     return cx({
       'rsr-root': true,
@@ -297,21 +264,11 @@ class StarRating extends React.Component {
     }
   }
 
-  setAttrs() {
-    var attrs = {};
-    if (this.state.editing) {
-      attrs['onMouseMove'] = this.handleMouseMove.bind(this);
-      attrs['onMouseLeave'] = this.handleMouseLeave.bind(this);
-      attrs['onClick'] = this.handleClick.bind(this);
-    }
-    return attrs;
-  }
-
   render() {
 
     var classes = this.getClasses();
     var caption = this.getCaption();
-    var attrs = this.setAttrs();
+    var attrs = utils.setAttrs(this.state.editing, this);
 
     return (
       <span className="rsr-container">
@@ -324,8 +281,8 @@ class StarRating extends React.Component {
             <input type="hidden"
               name={this.props.name}
               value={this.state.currentRatingVal}
-              style={{display: 'none !important'}} 
-              min={this.min} 
+              style={{display: 'none !important'}}
+              min={this.min}
               max={this.max}
               readOnly />
           </div>

diff --git a/src/docs.html b/src/docs.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name=viewport content="width=device-width, initial-scale=1">
+  <title><%= htmlWebpackPlugin.options.title %></title>
+  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
+  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
+  <link href='http://fonts.googleapis.com/css?family=Philosopher:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
+</head>
+<body>
+  <a href="https://github.com/cameronjroe/react-star-rating"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/52760788cde945287fbb584134c4cbc2bc36f904/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png"></a>
+
+  <div class="inject"></div>
+
+</body>
+</html>