Switch back to CRA

ui/v2.5/.babelrc

@@ -1,18 +0,0 @@
-{
-  "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/config/jest.json

@@ -1,30 +0,0 @@
-{
-  "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

@@ -1,22 +0,0 @@
-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

@@ -1,70 +0,0 @@
-// 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

@@ -1,44 +0,0 @@
-// 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
-  ],
-  output: {
-    filename: 'static/js/bundle.js',
-    chunkFilename: 'static/js/[name].chunk.js',
-  },
-  optimization: {
-      // Automatically split vendor and commons
-      // https://twitter.com/wSokra/status/969633336732905474
-      // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
-      splitChunks: {
-        chunks: 'all',
-        name: false,
-      },
-      // Keep the runtime chunk separated to enable long term caching
-      // https://twitter.com/wSokra/status/969679223278505985
-      // https://github.com/facebook/create-react-app/issues/5358
-      runtimeChunk: {
-        name: entrypoint => `runtime-${entrypoint.name}`,
-      },
-  },
-  devServer: {
-    compress: true,
-    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

@@ -1,94 +0,0 @@
-// production config
-const merge = require('webpack-merge');
-const {resolve} = require('path');
-const TerserPlugin = require('terser-webpack-plugin');
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
-const safePostCssParser = require('postcss-safe-parser');
-
-const commonConfig = require('./webpack.common');
-
-module.exports = merge(commonConfig, {
-  mode: 'production',
-  entry: './src/index.tsx',
-  output: {
-    filename: 'static/js/[name].[contenthash:8].js',
-    chunkFilename: 'static/js/[name].[contenthash:8].chunk.js',
-    path: resolve(__dirname, '../build'),
-    publicPath: '/',
-  },
-  optimization: {
-      minimize: true,
-      minimizer: [
-        // This is only used in production mode
-        new TerserPlugin({
-          terserOptions: {
-            parse: {
-              // We want terser to parse ecma 8 code. However, we don't want it
-              // to apply any minification steps that turns valid ecma 5 code
-              // into invalid ecma 5 code. This is why the 'compress' and 'output'
-              // sections only apply transformations that are ecma 5 safe
-              // https://github.com/facebook/create-react-app/pull/4234
-              ecma: 8,
-            },
-            compress: {
-              ecma: 5,
-              warnings: false,
-              // Disabled because of an issue with Uglify breaking seemingly valid code:
-              // https://github.com/facebook/create-react-app/issues/2376
-              // Pending further investigation:
-              // https://github.com/mishoo/UglifyJS2/issues/2011
-              comparisons: false,
-              // Disabled because of an issue with Terser breaking valid code:
-              // https://github.com/facebook/create-react-app/issues/5250
-              // Pending further investigation:
-              // https://github.com/terser-js/terser/issues/120
-              inline: 2,
-            },
-            mangle: {
-              safari10: true,
-            },
-            // Added for profiling in devtools
-            keep_classnames: true,
-            keep_fnames: true,
-            output: {
-              ecma: 5,
-              comments: false,
-              // Turned on because emoji and regex is not minified properly using default
-              // https://github.com/facebook/create-react-app/issues/2488
-              ascii_only: true,
-            },
-          },
-          sourceMap: true,
-        }),
-        // This is only used in production mode
-        new OptimizeCSSAssetsPlugin({
-          cssProcessorOptions: {
-            parser: safePostCssParser,
-            map: {
-                // `inline: false` forces the sourcemap to be output into a
-                // separate file
-                inline: false,
-                // `annotation: true` appends the sourceMappingURL to the end of
-                // the css file, helping the browser find the sourcemap
-                annotation: true,
-              }
-          },
-        }),
-      ],
-      // Automatically split vendor and commons
-      // https://twitter.com/wSokra/status/969633336732905474
-      // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
-      splitChunks: {
-        chunks: 'all',
-        name: false,
-      },
-      // Keep the runtime chunk separated to enable long term caching
-      // https://twitter.com/wSokra/status/969679223278505985
-      // https://github.com/facebook/create-react-app/issues/5358
-      runtimeChunk: {
-        name: entrypoint => `runtime-${entrypoint.name}`,
-      },
-  },
-  devtool: 'source-map',
-  plugins: [],
-});

ui/v2.5/package.json

@@ -4,11 +4,10 @@
   "private": true,
   "sideEffects": false,
   "scripts": {
-    "start": "yarn run start-dev",
+    "start": "react-scripts start",
-    "start-dev": "webpack-dev-server --config=config/webpack.dev.js",
+    "build": "react-scripts build",
-    "build": "yarn run clean-dist && webpack -p --config=config/webpack.prod.js",
+    "test": "react-scripts test",
-    "clean-dist": "rimraf build/*",
+    "eject": "react-scripts eject",
-    "test": "jest",
     "lint": "yarn lint:css && yarn lint:js",
     "lint:js": "eslint --cache src/**/*.{ts,tsx}",
     "lint:css": "stylelint 'src/**/*.scss'",
@@ -44,9 +43,7 @@
     "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",
@@ -59,9 +56,6 @@
     "video.js": "^7.6.0"
   },
   "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",
@@ -82,10 +76,6 @@
     "@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",
@@ -93,35 +83,12 @@
     "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",
     "postcss-safe-parser": "^4.0.1",
     "prettier": "1.19.1",
-    "react-hot-loader": "^4.12.19",
+    "react-scripts": "^3.3.1",
-    "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.3.2",
+    "typescript": "^3.7.5"
-    "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

@@ -79,6 +79,7 @@ export const MainNavbar: React.FC = () => {
         {menuItems.map(i => (
           <LinkContainer
             activeClassName="active"
+            exact
             to={i.href}
             key={i.href}
           >

ui/v2.5/src/components/Wall/WallPanel.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from "react";
 import * as GQL from "src/core/generated-graphql";
 import { WallItem } from "./WallItem";
-import "./Wall.scss";
 
 interface IWallPanelProps {
   scenes?: GQL.SlimSceneDataFragment[];

ui/v2.5/src/components/scenes/ScenePlayer/ScenePlayerScrubber.tsx

@@ -11,7 +11,6 @@ import { Button } from "react-bootstrap";
 import axios from "axios";
 import * as GQL from "src/core/generated-graphql";
 import { TextUtils } from "src/utils";
-import "./ScenePlayerScrubber.scss";
 
 interface IScenePlayerScrubberProps {
   scene: GQL.SceneDataFragment;

ui/v2.5/src/index.scss

@@ -1,7 +1,15 @@
 @import "styles/theme";
 @import "styles/range";
 @import "styles/scrollbars";
-@import "./components/**/*.scss";
+@import "src/components/Tags/styles.scss";
+@import "src/components/performers/styles.scss";
+@import "src/components/list/styles.scss";
+@import "src/components/Settings/styles.scss";
+@import "src/components/Studios/styles.scss";
+@import "src/components/Shared/styles.scss";
+@import "src/components/Wall/Wall.scss";
+@import "src/components/scenes/ScenePlayer/ScenePlayerScrubber.scss";
+@import "src/components/scenes/styles.scss";
 
 body {
   -webkit-font-smoothing: antialiased;
@@ -485,22 +493,6 @@ code {
   }
 }
 
-@media (max-width: 576px) {
-  .nav-tabs {
-    border: none;
-    margin: auto;
-
-    .nav-link {
-      border: none;
-      padding: 8px;
-
-      &.active {
-        border-bottom: 2px solid;
-      }
-    }
-  }
-}
-
 .error-message {
   white-space: "pre-wrap";
 }

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

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

ui/v2.5/tsconfig.json

@@ -19,10 +19,9 @@
     "downlevelIteration": true,
     "experimentalDecorators": true,
     "baseUrl": ".",
-    "paths": {
+    "sourceMap": true,
-      "src/*": ["./src/*"]
+    "allowJs": true,
-    },
+    "isolatedModules": true
-    "sourceMap": true
   },
   "include": [
     "src/**/*"