Eject create-react-app

ui/v2.5/.babelrc

@@ -0,0 +1,18 @@
+{
+  "presets": [
+    ["@babel/preset-env", {
+        "modules": false,
+        "targets": {
+          "browsers": ["last 2 firefox versions", "last 2 chrome versions"]
+        }
+    }]
+  ],
+  "plugins": [
+    "react-hot-loader/babel"
+  ],
+  "env": {
+    "production": {
+      "presets": ["minify"]
+    },
+  }
+}

ui/v2.5/.stylelintrc

@@ -0,0 +1,96 @@
+{
+  "plugins": [
+    "stylelint-order"
+  ],
+  "rules": {
+    "at-rule-empty-line-before": [ "always", {
+      except: ["after-same-name", "first-nested" ],
+      ignore: ["after-comment"],
+    } ],
+    "at-rule-no-vendor-prefix": true,
+    "selector-no-vendor-prefix": true,
+    "block-closing-brace-newline-after": "always",
+    "block-closing-brace-newline-before": "always-multi-line",
+    "block-closing-brace-space-before": "always-single-line",
+    "block-no-empty": true,
+    "block-opening-brace-newline-after": "always-multi-line",
+    "block-opening-brace-space-after": "always-single-line",
+    "block-opening-brace-space-before": "always",
+    "color-hex-case": "lower",
+    "color-hex-length": "short",
+    "color-no-invalid-hex": true,
+    "comment-empty-line-before": [ "always", {
+      except: ["first-nested"],
+      ignore: ["stylelint-commands"],
+    } ],
+    "comment-whitespace-inside": "always",
+    "declaration-bang-space-after": "never",
+    "declaration-bang-space-before": "always",
+    "declaration-block-no-shorthand-property-overrides": true,
+    "declaration-block-semicolon-newline-after": "always-multi-line",
+    "declaration-block-semicolon-space-after": "always-single-line",
+    "declaration-block-semicolon-space-before": "never",
+    "declaration-block-single-line-max-declarations": 1,
+    "declaration-block-trailing-semicolon": "always",
+    "declaration-colon-newline-after": "always-multi-line",
+    "declaration-colon-space-after": "always-single-line",
+    "declaration-colon-space-before": "never",
+    "declaration-no-important": true,
+    "font-family-name-quotes": "always-where-recommended",
+    "function-calc-no-unspaced-operator": true,
+    "function-comma-newline-after": "always-multi-line",
+    "function-comma-space-after": "always-single-line",
+    "function-comma-space-before": "never",
+    "function-linear-gradient-no-nonstandard-direction": true,
+    "function-parentheses-newline-inside": "always-multi-line",
+    "function-parentheses-space-inside": "never-single-line",
+    "function-url-quotes": "always",
+    "function-whitespace-after": "always",
+    "indentation": 4,
+    "length-zero-no-unit": true,
+    "max-empty-lines": 1,
+    "max-nesting-depth": 3,
+    "max-line-length": 100,
+    "media-feature-colon-space-after": "always",
+    "media-feature-colon-space-before": "never",
+    "media-feature-range-operator-space-after": "always",
+    "media-feature-range-operator-space-before": "always",
+    "media-query-list-comma-newline-after": "always-multi-line",
+    "media-query-list-comma-space-after": "always-single-line",
+    "media-query-list-comma-space-before": "never",
+    "media-feature-parentheses-space-inside": "never",
+    "no-descending-specificity": null,
+    "no-invalid-double-slash-comments": true,
+    "no-missing-end-of-source-newline": true,
+    "number-leading-zero": "never",
+    "number-max-precision": 2,
+    "number-no-trailing-zeros": true,
+    "order/order": [
+      "custom-properties",
+      "declarations"
+    ],
+    "order/properties-alphabetical-order": true,
+    "rule-empty-line-before": ["always-multi-line", {
+      except: ["after-single-line-comment", "first-nested" ],
+      ignore: ["after-comment"],
+    }],
+    "selector-max-id": 0,
+    "selector-max-type": 1,
+    "selector-class-pattern": "^(\\.*[A-Z]*[a-z]+)+(-[a-z]+)*$",
+    "selector-combinator-space-after": "always",
+    "selector-combinator-space-before": "always",
+    "selector-list-comma-newline-after": "always",
+    "selector-list-comma-space-before": "never",
+    "selector-max-universal": 0,
+    "selector-type-case": "lower",
+    "selector-pseudo-element-colon-notation": "double",
+    "string-no-newline": true,
+    "string-quotes": "double",
+    "time-min-milliseconds": 100,
+    "unit-blacklist": ["em"],
+    "value-list-comma-newline-after": "always-multi-line",
+    "value-list-comma-space-after": "always-single-line",
+    "value-list-comma-space-before": "never",
+    "value-no-vendor-prefix": true
+  },
+}

ui/v2.5/config/jest.json

@@ -0,0 +1,30 @@
+{
+  "rootDir": "..",
+  "coverageDirectory": "<rootDir>/tests/__coverage__/",
+  "setupFiles": [
+    "<rootDir>/tests/__mocks__/shim.js"
+  ],
+  "roots": [
+    "<rootDir>/src/",
+    "<rootDir>/tests/"
+  ],
+  "moduleNameMapper": {
+    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/tests/__mocks__/fileMock.js",
+    "\\.(css|scss|less)$": "<rootDir>/tests/__mocks__/styleMock.js"
+  },
+  "moduleFileExtensions": ["ts", "tsx", "js", "jsx"],
+  "transform": {
+    "^.+\\.(ts|tsx)$": "<rootDir>/configs/jest.preprocessor.js"
+  },
+  "transformIgnorePatterns": [
+    "/node_modules/"
+  ],
+  "testRegex": "/tests/.*\\.(ts|tsx)$",
+  "moduleDirectories": [
+    "node_modules"
+  ],
+  "globals": {
+    "DEVELOPMENT": false,
+    "FAKE_SERVER": false
+  }
+}

ui/v2.5/config/jest.preprocessor.js

@@ -0,0 +1,22 @@
+const tsc       = require('typescript');
+const tsConfig  = require('./../tsconfig.json');
+
+module.exports = {
+    process(src, path) {
+        const isTs             = path.endsWith('.ts');
+        const isTsx            = path.endsWith('.tsx');
+        const isTypescriptFile = (isTs || isTsx);
+
+        if ( isTypescriptFile ) {
+            return tsc.transpileModule(
+                src,
+                {
+                    compilerOptions: tsConfig.compilerOptions,
+                    fileName:        path
+                }
+            ).outputText;
+        }
+
+        return src;
+    },
+};

ui/v2.5/config/webpack.common.js

@@ -0,0 +1,70 @@
+// shared config (dev and prod)
+const path = require('path');
+const ForkTsCheckerNotifierWebpackPlugin = require('fork-ts-checker-notifier-webpack-plugin');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const Dotenv = require('dotenv-webpack');
+
+module.exports = {
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js', '.jsx'],
+    alias: {
+        src: path.resolve('src/')
+    }
+  },
+  context: process.cwd(),
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        use: ['babel-loader', 'source-map-loader'],
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.tsx?$/,
+        exclude: /node_modules/,
+        use: [
+          {
+              loader: 'babel-loader',
+          },
+          {
+            loader: 'ts-loader',
+            options: { transpileOnly: true }
+          }
+        ]
+      },
+      {
+        test: /\.css$/,
+        use: ['style-loader', { loader: 'css-loader', options: { importLoaders: 1 } }],
+      },
+      {
+        test: /\.(scss|sass)$/,
+        loaders: [
+          'style-loader',
+          { loader: 'css-loader', options: { importLoaders: 1 } },
+          'sass-loader',
+          'import-glob-loader'
+        ],
+      },
+      {
+        test: /\.(graphql|gql)$/,
+        exclude: /node_modules/,
+        loader: 'graphql-tag/loader',
+      }
+    ],
+  },
+  output: {
+      publicPath: '/'
+  },
+  plugins: [
+    new ForkTsCheckerWebpackPlugin({
+      eslint: true
+    }),
+    new ForkTsCheckerNotifierWebpackPlugin({ title: 'TypeScript', excludeWarnings: false }),
+    new HtmlWebpackPlugin({template: "./src/index.html.ejs"}),
+    new Dotenv()
+  ],
+  performance: {
+    hints: false,
+  },
+};

ui/v2.5/config/webpack.dev.js

@@ -0,0 +1,24 @@
+// development config
+require('dotenv').config();
+const merge = require('webpack-merge');
+const commonConfig = require('./webpack.common');
+
+module.exports = merge(commonConfig, {
+  mode: 'development',
+  entry: [
+    './src/index.tsx' // the entry point of our app
+  ],
+  devServer: {
+    host: '0.0.0.0',
+    hot: true, // enable HMR on the server host: '0.0.0.0',
+    port: process.env.PORT,
+    historyApiFallback: true,
+    stats: {
+        assets: true,
+        builtAt: true,
+        modules: false,
+        children: false
+    }
+  },
+  devtool: 'eval-source-map',
+});

ui/v2.5/config/webpack.prod.js

@@ -0,0 +1,17 @@
+// production config
+const merge = require('webpack-merge');
+const {resolve} = require('path');
+
+const commonConfig = require('./webpack.common');
+
+module.exports = merge(commonConfig, {
+  mode: 'production',
+  entry: './src/index.tsx',
+  output: {
+    filename: 'static/js/bundle.[hash].min.js',
+    path: resolve(__dirname, '../build'),
+    publicPath: '/',
+  },
+  devtool: 'source-map',
+  plugins: [],
+});

ui/v2.5/package.json

@@ -2,6 +2,24 @@
   "name": "stash",
   "version": "0.1.0",
   "private": true,
+  "scripts": {
+    "start": "yarn run start-dev",
+    "start-dev": "webpack-dev-server --config=config/webpack.dev.js",
+    "build": "yarn run clean-dist && webpack -p --config=config/webpack.prod.js",
+    "clean-dist": "rimraf build/*",
+    "test": "jest",
+    "lint": "yarn lint:css && yarn lint:js",
+    "lint:js": "eslint --cache src/**/*.{ts,tsx}",
+    "lint:css": "stylelint 'src/**/*.scss'",
+    "format": "prettier \"src/**/*.{js,jsx,ts,tsx}\"",
+    "gqlgen": "gql-gen --config codegen.yml"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ],
   "dependencies": {
     "@apollo/react-hooks": "^3.1.3",
     "@fortawesome/fontawesome-svg-core": "^1.2.26",
@@ -22,12 +40,12 @@
     "graphql-tag": "^2.10.1",
     "localforage": "1.7.3",
     "lodash": "^4.17.15",
-    "node-sass": "4.13.1",
-    "normalize.css": "^8.0.1",
     "query-string": "6.10.1",
     "react": "~16.12.0",
     "react-apollo": "^3.1.3",
+    "react-app-polyfill": "^1.0.5",
     "react-bootstrap": "^1.0.0-beta.16",
+    "react-dev-utils": "^10.0.0",
     "react-dom": "16.12.0",
     "react-hotkeys": "^2.0.0",
     "react-images": "0.5.19",
@@ -35,28 +53,14 @@
     "react-photo-gallery": "^8.0.0",
     "react-router-bootstrap": "^0.25.0",
     "react-router-dom": "^5.1.2",
-    "react-scripts": "3.3.0",
     "react-select": "^3.0.8",
     "subscriptions-transport-ws": "^0.9.16",
     "video.js": "^7.6.0"
   },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "lint": "eslint --cache src/**/*.{ts,tsx}",
-    "lint:fix": "eslint --fix src/**/*.{ts,tsx}",
-    "format": "prettier \"src/**/*.{js,jsx,ts,tsx}\"",
-    "gqlgen": "gql-gen --config codegen.yml"
-  },
-  "browserslist": [
-    ">0.2%",
-    "not dead",
-    "not ie <= 11",
-    "not op_mini all"
-  ],
   "devDependencies": {
+    "@babel/core": "7.7.4",
+    "@babel/preset-env": "^7.7.1",
+    "@babel/preset-react": "^7.7.0",
     "@graphql-codegen/add": "^1.11.2",
     "@graphql-codegen/cli": "^1.11.2",
     "@graphql-codegen/time": "^1.11.2",
@@ -77,11 +81,45 @@
     "@types/video.js": "^7.2.11",
     "@typescript-eslint/eslint-plugin": "^2.16.0",
     "@typescript-eslint/parser": "^2.16.0",
+    "babel-loader": "8.0.6",
+    "css-loader": "3.2.0",
+    "dotenv": "8.2.0",
+    "dotenv-webpack": "^1.7.0",
     "eslint": "^6.7.2",
     "eslint-config-airbnb-typescript": "^6.3.1",
     "eslint-config-prettier": "^6.9.0",
+    "eslint-plugin-import": "^2.20.0",
     "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-react": "^7.18.0",
+    "eslint-plugin-react-hooks": "^1.7.0",
+    "file-loader": "4.3.0",
+    "fork-ts-checker-notifier-webpack-plugin": "^1.0.3",
+    "fork-ts-checker-webpack-plugin": "^1.0.0",
+    "fs-extra": "^8.1.0",
+    "html-webpack-plugin": "4.0.0-beta.5",
+    "import-glob-loader": "^1.1.0",
+    "jest": "25.1.0",
+    "jest-environment-jsdom-fourteen": "0.1.0",
+    "jest-resolve": "24.9.0",
+    "jest-watch-typeahead": "0.4.2",
+    "mini-css-extract-plugin": "0.8.0",
+    "node-sass": "4.13.1",
+    "optimize-css-assets-webpack-plugin": "5.0.3",
     "prettier": "1.19.1",
-    "typescript": "~3.7.4"
+    "react-hot-loader": "^4.12.19",
+    "sass-loader": "8.0.0",
+    "semver": "6.3.0",
+    "style-loader": "1.0.0",
+    "stylelint": "^13.0.0",
+    "stylelint-order": "^4.0.0",
+    "terser-webpack-plugin": "2.2.1",
+    "ts-loader": "^6.2.1",
+    "typescript": "~3.7.4",
+    "webpack": "4.41.2",
+    "webpack-cli": "^3.3.10",
+    "webpack-dev-server": "3.9.0",
+    "webpack-manifest-plugin": "2.2.0",
+    "webpack-merge": "^4.2.2",
+    "workbox-webpack-plugin": "4.3.1"
   }
 }

ui/v2.5/src/components/MainNavbar.tsx

@@ -65,7 +65,7 @@ export const MainNavbar: React.FC = () => {
 
   return (
     <Navbar fixed="top" variant="dark" bg="dark">
-      <Navbar.Brand href="#home">
+      <Navbar.Brand as="div">
         <Link to="/">
           <Button variant="secondary">Stash</Button>
         </Link>

ui/v2.5/src/components/Settings/SettingsAboutPanel.tsx

@@ -40,7 +40,7 @@ export const SettingsAboutPanel: React.FC = () => {
   }
 
   function renderLatestVersion() {
-    if (!data || !data.version || !data.version.version) { return; } //if there is no "version" latest version check is obviously not supported
+    if (!data || !data.version || !data.version.version) { return; } // if there is no "version" latest version check is obviously not supported
     return (
       <Table>
         <tbody>

ui/v2.5/src/components/Shared/LoadingIndicator.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import { Spinner } from 'react-bootstrap';
 
-interface LoadingProps {
+interface ILoadingProps {
     message: string;
 }
 
 const CLASSNAME = 'LoadingIndicator';
 const CLASSNAME_MESSAGE = `${CLASSNAME}-message`;
 
-const LoadingIndicator: React.FC<LoadingProps> = ({ message }) => (
+const LoadingIndicator: React.FC<ILoadingProps> = ({ message }) => (
     <div className={CLASSNAME}>
         <Spinner animation="border" role="status">
             <span className="sr-only">Loading...</span>

ui/v2.5/src/components/list/AddFilter.tsx

@@ -1,7 +1,7 @@
 import _ from "lodash";
 import React, { useEffect, useRef, useState } from "react";
 import { Button, Form, Modal, OverlayTrigger, Tooltip } from "react-bootstrap";
-import { Icon, FilterSelect } from "src/components/Shared";
+import { Icon, FilterSelect, DurationInput } from "src/components/Shared";
 import { CriterionModifier } from "src/core/generated-graphql";
 import {
   Criterion,
@@ -14,7 +14,6 @@ import { StudiosCriterion } from "src/models/list-filter/criteria/studios";
 import { TagsCriterion } from "src/models/list-filter/criteria/tags";
 import { makeCriteria } from "src/models/list-filter/criteria/utils";
 import { ListFilterModel } from "src/models/list-filter/filter";
-import { DurationInput } from "src/components/Shared";
 
 interface IAddFilterProps {
   onAddCriterion: (criterion: Criterion, oldId?: string) => void;

ui/v2.5/src/hooks/ListHook.tsx

@@ -94,7 +94,7 @@ const useList = <QueryResult extends IQueryResult, QueryData extends IDataItem>(
     }
 
     // make a copy of the filter and call the hook
-    let newFilter = _.cloneDeep(filter);
+    const newFilter = _.cloneDeep(filter);
     return options.filterHook(newFilter);
   }
 

ui/v2.5/src/index.html.ejs

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+    <head>
+        <meta charset="UTF-8"/>
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+        <title>Stash</title>
+    </head>
+    <body>
+		<div id="root" className="Stash"></div>
+    </body>
+</html>

ui/v2.5/src/models/list-filter/criteria/criterion.ts

@@ -1,8 +1,8 @@
 /* eslint-disable consistent-return */
 
 import { CriterionModifier } from "src/core/generated-graphql";
-import { ILabeledId, ILabeledValue } from "../types";
 import { DurationUtils } from 'src/utils';
+import { ILabeledId, ILabeledValue } from "../types";
 
 export type CriterionType =
   | "none"
@@ -278,12 +278,7 @@ export class DurationCriterion extends Criterion<number, number> {
 
     this.type = type;
     this.options = options;
-
-    if (!!parameterName) {
-      this.parameterName = parameterName;
-    } else {
-      this.parameterName = type;
-    }
+    this.parameterName = parameterName ?? type;
   }
 
   public getLabelValue() {

ui/v2.5/src/react-app-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="react-scripts" />

ui/v2.5/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "ES2020",
     "lib": [
       "dom",
       "dom.iterable",
@@ -17,10 +17,14 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "preserve",
+    "jsx": "react",
     "downlevelIteration": true,
     "experimentalDecorators": true,
-    "baseUrl": "."
+    "baseUrl": ".",
+    "paths": {
+      "src/*": ["./src/*"]
+    },
+    "sourceMap": true
   },
   "include": [
     "src/**/*"