Build fixes and cleanup

.idea/codeStyleSettings.xml

@@ -3,6 +3,18 @@
   <component name="ProjectCodeStyleSettingsManager">
     <option name="PER_PROJECT_SETTINGS">
       <value>
+        <option name="OTHER_INDENT_OPTIONS">
+          <value>
+            <option name="INDENT_SIZE" value="2" />
+            <option name="CONTINUATION_INDENT_SIZE" value="8" />
+            <option name="TAB_SIZE" value="2" />
+            <option name="USE_TAB_CHARACTER" value="false" />
+            <option name="SMART_TABS" value="false" />
+            <option name="LABEL_INDENT_SIZE" value="0" />
+            <option name="LABEL_INDENT_ABSOLUTE" value="false" />
+            <option name="USE_RELATIVE_INDENTS" value="false" />
+          </value>
+        </option>
         <option name="LINE_SEPARATOR" value="&#13;&#10;" />
         <option name="RIGHT_MARGIN" value="190" />
         <option name="HTML_ATTRIBUTE_WRAP" value="0" />
@@ -28,9 +40,19 @@
         </XML>
         <codeStyleSettings language="CSS">
           <indentOptions>
+            <option name="INDENT_SIZE" value="2" />
+            <option name="CONTINUATION_INDENT_SIZE" value="2" />
+            <option name="TAB_SIZE" value="2" />
             <option name="SMART_TABS" value="true" />
           </indentOptions>
         </codeStyleSettings>
+        <codeStyleSettings language="HTML">
+          <indentOptions>
+            <option name="INDENT_SIZE" value="2" />
+            <option name="CONTINUATION_INDENT_SIZE" value="2" />
+            <option name="TAB_SIZE" value="2" />
+          </indentOptions>
+        </codeStyleSettings>
         <codeStyleSettings language="JavaScript">
           <option name="LINE_COMMENT_AT_FIRST_COLUMN" value="true" />
           <option name="KEEP_LINE_BREAKS" value="false" />
@@ -51,6 +73,11 @@
           <option name="DOWHILE_BRACE_FORCE" value="3" />
           <option name="WHILE_BRACE_FORCE" value="3" />
           <option name="FOR_BRACE_FORCE" value="3" />
+          <indentOptions>
+            <option name="INDENT_SIZE" value="2" />
+            <option name="CONTINUATION_INDENT_SIZE" value="2" />
+            <option name="TAB_SIZE" value="2" />
+          </indentOptions>
         </codeStyleSettings>
       </value>
     </option>

.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="ERROR" enabled_by_default="true" />
+  </profile>
+</component>

.idea/inspectionProfiles/profiles_settings.xml

@@ -0,0 +1,7 @@
+<component name="InspectionProjectProfileManager">
+  <settings>
+    <option name="PROJECT_PROFILE" value="Project Default" />
+    <option name="USE_PROJECT_PROFILE" value="true" />
+    <version value="1.0" />
+  </settings>
+</component>

.idea/misc.xml

@@ -1,5 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
+  <component name="JavaScriptSettings">
+    <option name="languageLevel" value="JSX" />
+  </component>
   <component name="ProjectLevelVcsManager" settingsEditedManually="false">
     <OptionsSetting value="true" id="Add" />
     <OptionsSetting value="true" id="Remove" />
@@ -10,5 +13,4 @@
     <ConfirmationsSetting value="0" id="Add" />
     <ConfirmationsSetting value="0" id="Remove" />
   </component>
-  <component name="ProjectRootManager" version="2" />
 </project>

.idea/watcherTasks.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectTasksOptions" suppressed-tasks="Babel;Traceur compiler" />
+</project>

.idea/webResources.xml

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="WebResourcesPaths">
+    <contentEntries>
+      <entry url="file://$PROJECT_DIR$">
+        <entryData>
+          <resourceRoots>
+            <path value="file://$PROJECT_DIR$/frontend/src" />
+          </resourceRoots>
+        </entryData>
+      </entry>
+    </contentEntries>
+  </component>
+</project>

build.ps1

@@ -1 +0,0 @@
-Write-Warning "DEPRECATED -- Please use build.sh instead."

build.sh

@@ -91,12 +91,16 @@ Build()
 RunGulp()
 {
     echo "##teamcity[progressStart 'npm install']"
-    npm-cache install npm || CheckExitCode npm install
+    npm-cache install npm || CheckExitCode npm install --no-optional --no-bin-links
     echo "##teamcity[progressFinish 'npm install']"
 
     echo "##teamcity[progressStart 'Running gulp']"
     CheckExitCode npm run build
     echo "##teamcity[progressFinish 'Running gulp']"
+
+    echo "##teamcity[progressStart 'Running gulp (phantom)']"
+    CheckExitCode npm run build -- --phantom --production
+    echo "##teamcity[progressFinish 'Running gulp (phantom)']"
 }
 
 CreateMdbs()

frontend/gulp/webpack.js

@@ -0,0 +1,159 @@
+const _ = require('lodash');
+const gulp = require('gulp');
+const simpleVars = require('postcss-simple-vars');
+const nested = require('postcss-nested');
+const autoprefixer = require('autoprefixer');
+const webpackStream = require('webpack-stream');
+const livereload = require('gulp-livereload');
+const path = require('path');
+const webpack = require('webpack');
+const errorHandler = require('./helpers/errorHandler');
+const reload = require('require-nocache')(module);
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+
+const uiFolder = 'UI';
+const root = path.join(__dirname, '..', 'src');
+const isProduction = process.argv.indexOf('--production') > -1;
+
+console.log('ROOT:', root);
+console.log('isProduction:', isProduction);
+
+const cssVariables = [
+  '../src/Styles/Variables/colors',
+  '../src/Styles/Variables/dimensions',
+  '../src/Styles/Variables/fonts',
+  '../src/Styles/Variables/animations'
+].map(require.resolve);
+
+const config = {
+  devtool: '#source-map',
+  stats: {
+    children: false
+  },
+  watchOptions: {
+    ignored: /node_modules/
+  },
+  entry: {
+    preload: 'preload.js',
+    vendor: 'vendor.js',
+    index: 'index.js'
+  },
+  resolve: {
+    root: [
+      root,
+      path.join(root, 'Shims'),
+      path.join(root, 'JsLibraries')
+    ]
+  },
+  output: {
+    filename: path.join('_output', uiFolder, '[name].js'),
+    sourceMapFilename: path.join('_output', uiFolder, '[file].map')
+  },
+  plugins: [
+    new ExtractTextPlugin(path.join('_output', uiFolder, 'Content', 'styles.css'), { allChunks: true }),
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor'
+    }),
+    new webpack.DefinePlugin({
+      __DEV__: !isProduction,
+      'process.env': {
+        NODE_ENV: isProduction ? JSON.stringify('production') : JSON.stringify('development')
+      }
+    })
+  ],
+  resolveLoader: {
+    modulesDirectories: [
+      'node_modules',
+      'gulp/webpack/'
+    ]
+  },
+  eslint: {
+    formatter: function(results) {
+      return JSON.stringify(results);
+    }
+  },
+  module: {
+    loaders: [
+      {
+        test: /\.js?$/,
+        exclude: /(node_modules|JsLibraries)/,
+        loader: 'babel',
+        query: {
+          plugins: ['transform-class-properties'],
+          presets: ['es2015', 'decorators-legacy', 'react', 'stage-2'],
+          env: {
+            development: {
+              plugins: ['transform-react-jsx-source']
+            }
+          }
+        }
+      },
+
+      // CSS Modules
+      {
+        test: /\.css$/,
+        exclude: /(node_modules|globals.css)/,
+        loader: ExtractTextPlugin.extract('style', 'css-loader?modules&importLoaders=1&sourceMap&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader')
+      },
+
+      // Global styles
+      {
+        test: /\.css$/,
+        include: /(node_modules|globals.css)/,
+        loader: 'style!css-loader'
+      },
+
+      // Fonts
+      {
+        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+        loader: 'url?limit=10240&mimetype=application/font-woff&emitFile=false&name=Content/Fonts/[name].[ext]'
+      },
+      {
+        test: /\.(ttf|eot|eot?#iefix|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+        loader: 'file-loader?emitFile=false&name=Content/Fonts/[name].[ext]'
+      }
+    ]
+  },
+  postcss: function(wpack) {
+    cssVariables.forEach(wpack.addDependency);
+
+    return [
+      simpleVars({
+        variables: function() {
+          return cssVariables.reduce(function(obj, vars) {
+            return _.extend(obj, reload(vars));
+          }, {});
+        }
+      }),
+      nested(),
+      autoprefixer({
+        browsers: [
+          'Chrome >= 30',
+          'Firefox >= 30',
+          'Safari >= 6',
+          'Edge >= 12',
+          'Explorer >= 10',
+          'iOS >= 7',
+          'Android >= 4.4'
+        ]
+      })
+    ];
+  }
+};
+
+gulp.task('webpack', () => {
+  return gulp.src('index.js')
+    .pipe(webpackStream(config))
+    .pipe(gulp.dest(''));
+});
+
+gulp.task('webpackWatch', () => {
+  config.watch = true;
+  return gulp.src('')
+    .pipe(webpackStream(config))
+    .on('error', errorHandler)
+    .pipe(gulp.dest(''))
+    .on('error', errorHandler)
+    .pipe(livereload())
+    .on('error', errorHandler);
+});

gulp/clean.js

@@ -3,6 +3,6 @@ var del = require('del');
 
 var paths = require('./paths');
 
-gulp.task('clean', function(cb) {
-    del([paths.dest.root], cb);
+gulp.task('clean', function() {
+    return del([paths.dest.root]);
 });

gulp/gulpFile.js

@@ -1,7 +1,6 @@
 require('./watch.js');
 require('./build.js');
 require('./clean.js');
-require('./jshint.js');
 require('./handlebars.js');
 require('./copy.js');
 require('./less.js');

gulp/jshint.js

@@ -1,15 +0,0 @@
-var gulp = require('gulp');
-var jshint = require('gulp-jshint');
-var stylish = require('jshint-stylish');
-var cache = require('gulp-cached');
-var paths = require('./paths.js');
-
-gulp.task('jshint', function() {
-    return gulp.src([
-        paths.src.scripts,
-        paths.src.exclude.libs
-    ])
-        .pipe(cache('jshint'))
-        .pipe(jshint())
-        .pipe(jshint.reporter(stylish));
-});

gulp/less.js

@@ -3,7 +3,7 @@ var gulp = require('gulp');
 var less = require('gulp-less');
 var postcss = require('gulp-postcss');
 var sourcemaps = require('gulp-sourcemaps');
-var autoprefixer = require('autoprefixer-core');
+var autoprefixer = require('autoprefixer');
 var livereload = require('gulp-livereload');
 var cleancss = require('gulp-clean-css');
 var print = require('gulp-print');

gulp/stripBom.js

@@ -2,20 +2,26 @@ var gulp = require('gulp');
 var paths = require('./paths.js');
 var stripbom = require('gulp-stripbom');
 
-var stripBom = function (dest) {
-    gulp.src([paths.src.scripts, paths.src.exclude.libs])
-        .pipe(stripbom({ showLog: false }))
-        .pipe(gulp.dest(dest));
+var stripBom = function(dest) {
+  gulp.src([paths.src.scripts, paths.src.exclude.libs])
+    .pipe(stripbom({
+      showLog: false
+    }))
+    .pipe(gulp.dest(dest));
 
-    gulp.src(paths.src.less)
-        .pipe(stripbom({ showLog: false }))
-        .pipe(gulp.dest(dest));
+  gulp.src(paths.src.less)
+    .pipe(stripbom({
+      showLog: false
+    }))
+    .pipe(gulp.dest(dest));
 
-    gulp.src(paths.src.templates)
-        .pipe(stripbom({ showLog: false }))
-        .pipe(gulp.dest(dest));
+  gulp.src(paths.src.templates)
+    .pipe(stripbom({
+      showLog: false
+    }))
+    .pipe(gulp.dest(dest));
 };
 
-gulp.task('stripBom', function () {
-    stripBom(paths.src.root);
+gulp.task('stripBom', function() {
+  stripBom(paths.src.root);
 });

gulp/watch.js

@@ -3,18 +3,17 @@ var livereload = require('gulp-livereload');
 
 var paths = require('./paths.js');
 
-require('./jshint.js');
 require('./handlebars.js');
 require('./less.js');
 require('./copy.js');
 require('./webpack.js');
 
-gulp.task('watch', ['jshint', 'handlebars', 'less', 'copyHtml', 'copyContent', 'copyJs'], function () {
+gulp.task('watch', ['handlebars', 'less', 'copyHtml', 'copyContent', 'copyJs'], function () {
   livereload.listen();
   gulp.start('webpackWatch');
-  gulp.watch([paths.src.scripts, paths.src.exclude.libs], ['jshint', 'copyJs']);
+  gulp.watch([paths.src.scripts, paths.src.exclude.libs], ['copyJs']);
   gulp.watch(paths.src.templates, ['handlebars']);
   gulp.watch([paths.src.less, paths.src.exclude.libs], ['less']);
   gulp.watch([paths.src.html], ['copyHtml']);
   gulp.watch([paths.src.content + '**/*.*', '!**/*.less'], ['copyContent']);
-});
+});

gulpFile.js

@@ -1 +1,7 @@
-require('./gulp/gulpFile.js');
+var phantom = require('./frontend/gulp/helpers/phantom');
+
+if (phantom) {
+    require('./frontend/gulp/gulpFile.js');
+} else {
+    require('./gulp/gulpFile.js');
+}

package.json

@@ -2,7 +2,6 @@
   "name": "Sonarr",
   "version": "2.0.0",
   "description": "Sonarr",
-  "main": "main.js",
   "scripts": {
     "build": "gulp build",
     "start": "gulp watch"
@@ -11,37 +10,87 @@
     "type": "git",
     "url": "git://github.com/Sonarr/Sonarr.git"
   },
-  "author": "",
+  "author": "Team Sonarr",
   "license": "GPL-3.0",
-  "gitHead": "9ff7aa1bf7fe38c4c5bdb92f56c8ad556916ed67",
   "readmeFilename": "readme.md",
   "dependencies": {
-    "autoprefixer-core": "5.2.1",
-    "del": "1.2.0",
-    "gulp": "3.9.0",
+    "autoprefixer": "6.3.6",
+    "babel-core": "6.9.0",
+    "babel-eslint": "7.1.0",
+    "babel-loader": "6.2.4",
+    "babel-plugin-transform-class-properties": "6.16.0",
+    "babel-preset-decorators-legacy": "1.0.0",
+    "babel-preset-es2015": "6.9.0",
+    "babel-preset-react": "6.22.0",
+    "babel-preset-stage-2": "6.5.0",
+    "classnames": "2.2.5",
+    "css-loader": "0.23.1",
+    "del": "2.2.0",
+    "element-class": "0.2.2",
+    "esformatter": "0.9.3",
+    "eslint": "2.10.2",
+    "eslint-loader": "1.3.0",
+    "eslint-plugin-filenames": "1.0.0",
+    "eslint-plugin-react": "5.2.2",
+    "extract-text-webpack-plugin": "1.0.1",
+    "file-loader": "0.9.0",
+    "filesize": "3.5.4",
+    "gulp": "3.9.1",
     "gulp-cached": "1.1.0",
     "gulp-clean-css": "^3.0.4",
     "gulp-concat": "2.6.0",
     "gulp-declare": "0.3.0",
     "gulp-handlebars": "3.0.1",
-    "gulp-jshint": "1.11.2",
     "gulp-less": "3.0.3",
-    "gulp-livereload": "3.8.0",
-    "gulp-postcss": "6.0.0",
-    "gulp-print": "1.1.0",
-    "gulp-replace": "0.5.3",
-    "gulp-run": "1.6.8",
-    "gulp-sourcemaps": "1.5.2",
+    "gulp-livereload": "3.8.1",
+    "gulp-postcss": "6.1.1",
+    "gulp-print": "2.0.1",
+    "gulp-sourcemaps": "1.6.0",
     "gulp-stripbom": "1.0.4",
-    "gulp-webpack": "1.5.0",
-    "gulp-wrap": "0.11.0",
+    "gulp-util": "3.0.7",
+    "gulp-watch": "4.3.5",
+    "gulp-wrap": "0.13.0",
     "handlebars": "3.0.3",
-    "jshint-loader": "0.8.3",
-    "jshint-stylish": "2.0.1",
-    "run-sequence": "1.1.1",
-    "streamqueue": "1.1.0",
-    "tar.gz": "0.1.1",
-    "webpack": "1.12.0",
-    "webpack-stream": "2.1.0"
+    "lodash": "4.17.4",
+    "moment": "2.17.1",
+    "normalize.css": "5.0.0",
+    "postcss-loader": "0.9.1",
+    "postcss-nested": "1.0.0",
+    "postcss-simple-vars": "3.0.0",
+    "react": "15.4.2",
+    "react-addons-shallow-compare": "15.4.2",
+    "react-autosuggest": "8.0.0",
+    "react-dnd": "2.1.4",
+    "react-dnd-html5-backend": "2.1.2",
+    "react-document-title": "2.0.2",
+    "react-dom": "15.4.2",
+    "react-google-recaptcha": "0.5.4",
+    "react-lazyload": "2.2.0",
+    "react-measure": "1.4.5",
+    "react-portal": "3.0.0",
+    "react-redux": "5.0.2",
+    "react-router": "3.0.2",
+    "react-router-redux": "4.0.7",
+    "react-slider": "0.7.0",
+    "react-tabs": "0.8.2",
+    "react-tag-autocomplete": "5.1.0",
+    "react-tether": "0.5.5",
+    "react-virtualized": "8.11.3",
+    "redux": "3.6.0",
+    "redux-actions": "1.2.0",
+    "redux-batched-actions": "0.1.5",
+    "redux-localstorage": "0.4.1",
+    "redux-raven-middleware": "1.2.0",
+    "redux-thunk": "2.2.0",
+    "require-nocache": "1.0.0",
+    "reselect": "2.5.4",
+    "run-sequence": "1.2.0",
+    "streamqueue": "1.1.1",
+    "style-loader": "0.13.1",
+    "stylelint": "7.3.1",
+    "tar.gz": "1.0.3",
+    "url-loader": "0.5.7",
+    "webpack": "1.13.1",
+    "webpack-stream": "2.1.1"
   }
 }

webpack.config.js

@@ -1,5 +1,4 @@
 var path = require('path');
-var stylish = require('jshint-stylish');
 var webpack = require('webpack');
 
 var uglifyJsPlugin = new webpack.optimize.UglifyJsPlugin();