Merge branch 'develop' into e2e/report-generation

.depcheckrc.yaml

@@ -14,4 +14,6 @@ ignores: [
     "\\#types",
     # To support e2e-reports
     'allure-commandline',
+    # To run linting checks
+    'npm-run-all',
   ]

.eslintignore

@@ -0,0 +1,8 @@
+# Modules
+node_modules/
+
+# Test
+coverage/
+
+# Build output
+build/

.eslintrc.js

@@ -29,13 +29,13 @@ module.exports = {
   env: {
     // Browser conf
     browser: true,
-    es6    : true,
+    es6: true,
   },
 
-  rules    : {
+  rules: {
     // Prevent development/debugging statements
-    'no-console' : ['error', { allow: ['warn', 'error', 'info', 'debug'] }],
-    'no-alert'   : 'error',
+    'no-console': ['error', { allow: ['warn', 'error', 'info', 'debug'] }],
+    'no-alert': 'error',
     'no-debugger': 'error',
 
     // Prevent usage of confusing globals
@@ -48,25 +48,25 @@ module.exports = {
     'import/order': [
       'warn',
       {
-        groups            : ['builtin', 'external', 'parent', 'sibling', 'index'],
-        pathGroups        : [
+        groups: ['builtin', 'external', 'parent', 'sibling', 'index'],
+        pathGroups: [
           // Sort absolute root imports before parent imports
           {
-            pattern : '/**',
-            group   : 'parent',
+            pattern: '/**',
+            group: 'parent',
             position: 'before',
           },
         ],
         'newlines-between': 'always',
       },
     ],
     // Not needed in React 17
-    'react/react-in-jsx-scope': 'off'
+    'react/react-in-jsx-scope': 'off',
   },
   overrides: [
     {
       files: ['*.js'],
-      env  : {
+      env: {
         // We may still use CJS in .js files (eg. local scripts)
         commonjs: true,
       },
@@ -83,27 +83,24 @@ module.exports = {
         '@typescript-eslint/no-implicit-any-catch': 'error',
 
         // These are handled by TS
-        '@typescript-eslint/no-explicit-any'               : [
-          'warn',
-          { ignoreRestArgs: true },
-        ],
+        '@typescript-eslint/no-explicit-any': ['warn', { ignoreRestArgs: true }],
         '@typescript-eslint/explicit-module-boundary-types': 'off',
-        '@typescript-eslint/no-inferrable-types'           : 'off',
-        '@typescript-eslint/ban-ts-comment'                : 'off',
-        '@typescript-eslint/no-unused-vars'                : 'off',
-        'import/no-unresolved'                             : 'off',
+        '@typescript-eslint/no-inferrable-types': 'off',
+        '@typescript-eslint/ban-ts-comment': 'off',
+        '@typescript-eslint/no-unused-vars': 'off',
+        'import/no-unresolved': 'off',
       },
     },
     {
-      files  : ['*.jsx', '*.tsx'],
+      files: ['*.jsx', '*.tsx'],
       plugins: [
         // Enable linting React code
         'react',
         'react-hooks',
       ],
-      rules  : {
+      rules: {
         // Help with Hooks syntax
-        'react-hooks/rules-of-hooks' : 'error',
+        'react-hooks/rules-of-hooks': 'error',
         'react-hooks/exhaustive-deps': 'error',
 
         // Handled by Typescript
@@ -115,9 +112,9 @@ module.exports = {
     },
   ],
 
-  settings     : {
+  settings: {
     react: {
-      pragma : 'React',
+      pragma: 'React',
       version: '17',
     },
   },

.github/workflows/bump-version.yml

@@ -4,8 +4,8 @@ name: 'Version Bump'
 on:
   # Triggers the workflow on push or pull request events but only for the "develop" branch
   push:
-    branches: [ "develop" ]
-    
+    branches: ['develop']
+
 jobs:
   bump-version:
     name: 'Bump Version on develop'
@@ -21,3 +21,4 @@ jobs:
         uses: TriPSs/conventional-changelog-action@v3
         with:
           github-token: ${{ secrets.ACTION_TOKEN }}
+          release-count: '0'

.github/workflows/linting.yml

@@ -0,0 +1,24 @@
+name: Linting
+
+on: [pull_request]
+
+jobs:
+  lint:
+    runs-on: macos-latest
+
+    strategy:
+      matrix:
+        node-version: [16.x]
+
+    steps:
+      - uses: actions/checkout@v1
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: yarn install, lint
+        run: |
+          yarn install
+          yarn lint
+        env:
+          CI: true

.stylelintignore

@@ -0,0 +1,8 @@
+# Modules
+node_modules/
+
+# Test
+coverage/
+
+# Build output
+build/

CHANGELOG.md

@@ -1,3 +1,12 @@
+## [2.0.3](https://github.com/jwplayer/ott-web-app/compare/v2.0.2...v2.0.3) (2022-06-21)
+
+
+### Bug Fixes
+
+* **playlist:** smooth transition on hover ([0ab070f](https://github.com/jwplayer/ott-web-app/commit/0ab070ff7a36a2498caf562a3fafc63c6f534e68))
+
+
+
 ## [2.0.2](https://github.com/jwplayer/ott-web-app/compare/v2.0.1...v2.0.2) (2022-06-08)
 
 
@@ -77,6 +86,7 @@
 
 ### Features
 
+* **project:** BREAKING CHANGE adding new app config support ([9a29722](https://github.com/jwplayer/ott-web-app/commit/f8cf652f70b9ff9b42812259e965e1cb90d9c408))
 * **auth:** add backdrop click to login codecept test ([9a29722](https://github.com/jwplayer/ott-web-app/commit/9a29722eddbe8eb513c0094bc780969bccbf0b74))
 * **auth:** add login codecept tests ([1d74a18](https://github.com/jwplayer/ott-web-app/commit/1d74a18ce280c6162cb99102caf6b5fe1a7a413f))
 * **auth:** add register codecept tests ([b4bc475](https://github.com/jwplayer/ott-web-app/commit/b4bc475aafa39059ba31da9cce851266e1500d88))
@@ -91,17 +101,3 @@
 * **watchhistory:** add mobile codecept test and login step ([1467b44](https://github.com/jwplayer/ott-web-app/commit/1467b44d6a67d7fd4cd0db36fefa520cac48a289))
 
 
-
-## [1.1.1](https://github.com/jwplayer/ott-web-app/compare/v1.1.0...v1.1.1) (2021-08-06)
-
-
-### Bug Fixes
-
-* **auth:** fix checkbox color on Firefox ([ee49664](https://github.com/jwplayer/ott-web-app/commit/ee496648fb211372a026db9aea20728d7909ec17))
-* **auth:** fix default option for required dropdown ([fab40d5](https://github.com/jwplayer/ott-web-app/commit/fab40d51c5e1ac2c36a8ad4811f4edb4ac02f85e))
-* **project:** add spacing between search input and user menu icon ([de99481](https://github.com/jwplayer/ott-web-app/commit/de99481e64bb0a5ce1b2df547e14e1b6c43fe915))
-* **project:** fix header logo and search alignment ([5ec7522](https://github.com/jwplayer/ott-web-app/commit/5ec75224e005ea2683b3701598f4a3d1b3360a9b))
-* **project:** set checkbox color to config highlight ([c097da5](https://github.com/jwplayer/ott-web-app/commit/c097da59cd13e33f4b36b29869a41bbd9c522e59))
-
-
-

CONTRIBUTING.md

@@ -96,9 +96,9 @@ While far from comprehensive, following these guidelines will get the easy stuff
 
 1. This project uses vite to build and compile. **Code produced by the build must work across all supported browsers and devices - modern Chrome, FF, Safari, and Edge**
 2. Ensure that your code matches the formatting of the codebase by running ```yarn format```
-3. Ensure that your code follows our styleguide by passing our ESLint rules
+3. Ensure that your code follows our styleguide by passing our ESLint, Stylelint and TypeScript rules
    - You can run lint analysis by running ```yarn lint```
-   - You can fix lint errors by running ```yarn lint --fix```
+   - You can fix lint errors by running ```yarn format```
 4. Ensure that your code passes lighthouse analysis by running ```npx lhci autorun```
 5. Do your best to match our naming conventions and conform to the style of the code around you
 6. If you have a large or messy commit history, please rebase & squash your commit history

docs/developer-guidelines.md

@@ -4,16 +4,16 @@
 - Run the server through `yarn start`
 - Run the tests through `yarn test`
 - Run the e2e tests through `yarn codecept:mobile` and `yarn codecept:desktop`
-- Format the code through `yarn format`
-- Lint through `yarn lint`
-- Lint and fix through `yarn lint --fix`
+- Format the code through `yarn format` (or automatically do it via git hooks)
+- Lint through `yarn lint` (eslint, prettier, stylelint and tsc checks)
 - The JW organization requires personal access tokens for all of their repositories. In order to create a branch or pull request you'll need to [Generate a Personal Access Token](https://github.com/settings/tokens) and then [store it in your git config](https://stackoverflow.com/questions/46645843/where-to-store-my-git-personal-access-token/67360592). (For token permissions, `repo` should be sufficient.) 
 
 ## Versioning and Changelog
 
 We use the [TriPSs/conventional-changelog-action](https://github.com/TriPSs/conventional-changelog-action) github [action](https://github.com/jwplayer/ott-web-app/actions/workflows/bump-version.yml) to do an automated version increment for any commit to the develop branch.  The type of version increment will be determined by the commit message(s) in the code being added as follows (see [Convential Commits](https://www.conventionalcommits.org/en/v1.0.0/) for more details):
 * `fix:` - perform a patch bump
 * `feat:` - perform a minor bump
+* `chore:` - no version change
 * commit body contains `BREAKING CHANGE:` - perform a major bump
 * `<type>!:` (i.e. `feat!:`) - perform a major bump
 

docs/features/e2e.md → docs/e2e.md

@@ -12,7 +12,7 @@ We use several libraries for e2e-tests:
 
 ## Folder structure
 
-We store e2e logic in `test-e2e` folder. Tests suites are located in `tests` folder, where each subfolder represents the component / page being tested.
+We store e2e logic in `test-e2e` folder. Tests suites are located in `tests` folder, where each file represents a component / page being tested. If there are several features to test for one page / component, it is recommended to organize them in a subfolder
 
 There are two config files for desktop and mobile testing. By default each test suite works for both mobile and desktop pack. In order to limit test suite as one suitable only for one platform, it is possible to write `(@mobile-only)` in the Scenario description.
 
@@ -53,7 +53,7 @@ To serve allure reports locally `allure-commandline` package should be installed
 
 ## Simple steps to run tests locally for desktop
 
-1. Install Java 8 (for Mac homebrew with `adoptopenjdk8` package can be used package)
+1. Install Java 8 (for Mac homebrew `adoptopenjdk8` package can be used)
 2. `yarn install`
 3. Install `allure-commandline` globally (can help in the future to serve downloaded artifacts)
 4. Run `yarn codecept-serve:desktop` 

i18next-parser.config.js

@@ -14,11 +14,11 @@ module.exports = {
     ts: ['JavascriptLexer'],
     jsx: ['JsxLexer'],
     tsx: ['JsxLexer'],
-    default: ['JavascriptLexer']
+    default: ['JavascriptLexer'],
   },
   lineEnding: 'auto',
   locales: ['en_US', 'nl_NL'],
   namespaceSeparator: ':',
   output: 'src/i18n/locales/$LOCALE/$NAMESPACE.json',
   sort: true,
-}
+};

lint-staged.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  '{**/*,*}.{js,ts,jsx,tsx}': ['eslint --fix', 'prettier --write'],
+  'src/**/*.scss': ['stylelint --fix'],
+  '{**/*,*}.{ts,tsx}': [() => 'tsc --pretty --noEmit'],
+};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jw-ott-webapp",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "main": "index.js",
   "repository": "https://github.com/jwplayer/ott-web-app.git",
   "author": "Robin van Zanten",
@@ -15,18 +15,25 @@
     "test": "TZ=UTC vitest run",
     "test-watch": "TZ=UTC vitest",
     "test-coverage": "TZ=UTC vitest run --coverage",
+    "test-commit": "TZ=UTC vitest run --changed HEAD~1 --coverage",
     "i18next": "i18next src/{components,containers,screens}/**/{**/,/}*.tsx && node ./scripts/i18next/generate.js",
-    "format": "prettier --write \"{**/*,*}.{js,ts,jsx,tsx}\"",
-    "lint": "prettier --check \"{**/*,*}.{js,ts,jsx,tsx}\" && eslint \"{**/*,*}.{js,ts,jsx,tsx}\"",
-    "lint:styles": "stylelint \"src/**/*.scss\"",
+    "format": "run-s -c format:*",
+    "format:eslint": "eslint \"{**/*,*}.{js,ts,jsx,tsx}\" --fix",
+    "format:prettier": "prettier --write \"{**/*,*}.{js,ts,jsx,tsx}\"",
+    "format:stylelint": "stylelint --fix '**/*.{css,scss}'",
+    "lint": "run-s -c lint:*",
+    "lint:eslint": "eslint \"{**/*,*}.{js,ts,jsx,tsx}\"",
+    "lint:prettier": "prettier --check \"{**/*,*}.{js,ts,jsx,tsx}\"",
+    "lint:ts": "tsc --pretty --noEmit -p .",
+    "lint:stylelint": "stylelint '**/*.{css,scss}'",
     "commit-msg": "commitlint --edit $1",
-    "pre-commit": "depcheck && lint-staged && TZ=UTC yarn test --coverage",
     "codecept:mobile": "cd test-e2e && rm -rf \"./output/mobile\" && codeceptjs --config ./codecept.mobile.js run-workers --suites 2 ",
     "codecept:desktop": "cd test-e2e && rm -rf \"./output/desktop\" && codeceptjs --config ./codecept.desktop.js run-workers --suites 2 ",
     "serve-report:mobile": "cd test-e2e && allure serve \"./output/mobile\"",
     "serve-report:desktop": "cd test-e2e && allure serve \"./output/desktop\"",
     "codecept-serve:mobile": "yarn codecept:mobile ; yarn serve-report:mobile",
     "codecept-serve:desktop": "yarn codecept:desktop ; yarn serve-report:desktop",
+    "pre-commit": "depcheck && lint-staged && TZ=UTC yarn test-commit",
     "deploy:github": "node ./scripts/deploy-github.js"
   },
   "dependencies": {
@@ -38,6 +45,7 @@
     "jwt-decode": "^3.1.2",
     "lodash.merge": "^4.6.2",
     "memoize-one": "^5.2.1",
+    "npm-run-all": "^4.1.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
@@ -107,15 +115,6 @@
   "peerDependencies": {
     "react-router": "^5.2.1"
   },
-  "lint-staged": {
-    "{**/*,*}.{js,ts,jsx,tsx}": [
-      "prettier --check",
-      "eslint"
-    ],
-    "src/**/*.scss": [
-      "stylelint"
-    ]
-  },
   "optionalDependencies": {
     "gh-pages": "^3.2.3",
     "lighthouse": "^8.6.0"

postcss.config.js

@@ -1,7 +1,7 @@
 const stylelintConfig = require('./stylelint.config.js');
 
 module.exports = {
-  syntax : 'postcss-scss',
+  syntax: 'postcss-scss',
   plugins: [
     require('postcss-import')({
       plugins: [