Feat / Restructure and a11y

.commitlintrc.js

@@ -15,6 +15,7 @@ module.exports = {
         'user',
         'watchhistory',
         'favorites',
+        'profiles',
         'analytics',
         'pwa',
         'seo',
@@ -29,6 +30,7 @@ module.exports = {
         'epg',
         'tests',
         'i18n',
+        'a11y',
       ],
     ],
   },

.depcheckrc.yaml

@@ -1,30 +1,16 @@
 ignores: [
-    # These are dependencies for vite and vite plugins that depcheck doesn't recognize as being used
-    'postcss-scss',
-    'stylelint-order',
-    'stylelint-config-recommended-scss',
-    'stylelint-declaration-strict-value',
-    'stylelint-scss',
-    '@vitest/coverage-v8',
     # This is used by commitlint in .commitlintrc.js
     '@commitlint/config-conventional',
-    # These are vite aliases / tsconfig paths that point to specific local directories
-    # Note the \ is necessary to escape the # or the ignore doesn't work
-    '\#src',
-    '\#test',
-    '\#types',
-    '\#components',
-    '\#utils',
-    'src', # This is used in src/styles, which recognizes absolute paths from the repo root
-    'allure-commandline', # To support e2e-reports
-    '@codeceptjs/allure-legacy',
-    'faker',
-    'i18next-parser', # For extracting i18next translation keys
-    'npm-run-all', # To run linting checks
-    'virtual:pwa-register', # Service Worker code is injected at build time
-    'vite-plugin-pwa/client', # Used to generate pwa framework
-    'reflect-metadata', # Used for ioc resolution
-    '@babel/plugin-proposal-decorators', # Used to build with decorators for ioc resolution
-    'babel-plugin-transform-typescript-metadata', # Used to build with decorators for ioc resolution
-    '@babel/core', # Required peer dependency for babel plugins above
+
+    # @todo: remove dep from main package, once i18next is moved to specific packages
+    'ts-node',
+
+    # Workspace packages
+    'eslint-config-jwp',
+    '@typescript-eslint/parser', # Required by eslint-config-jwp
+    '@typescript-eslint/eslint-plugin', # Required by eslint-config-jwp
+    'eslint-plugin-import', # Required by eslint-config-jwp
+
+    'depcheck',
+    'ts-node'
   ]

.eslintignore

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

.eslintrc.js

@@ -1,129 +1,3 @@
-const restrictedGlobals = require('confusing-browser-globals');
-
 module.exports = {
-  parser: '@typescript-eslint/parser',
-
-  plugins: [
-    // Enable Typescript linting
-    '@typescript-eslint',
-
-    // Enable linting imports
-    'import',
-  ],
-
-  extends: [
-    // Use default ESLint rules
-    'eslint:recommended',
-
-    // Use recommended TS rules
-    'plugin:@typescript-eslint/recommended',
-
-    // Use recommended React rules
-    'plugin:react/recommended',
-
-    'plugin:import/errors',
-    'plugin:import/warnings',
-    'plugin:import/typescript',
-  ],
-
-  env: {
-    // Browser conf
-    browser: true,
-    es6: true,
-  },
-
-  rules: {
-    // Prevent development/debugging statements
-    'no-console': ['error', { allow: ['warn', 'error', 'info', 'debug'] }],
-    'no-alert': 'error',
-    'no-debugger': 'error',
-
-    // Prevent usage of confusing globals
-    'no-restricted-globals': ['error'].concat(restrictedGlobals),
-
-    // Assignments in function returns is confusing and could lead to unwanted side-effects
-    'no-return-assign': ['error', 'always'],
-
-    curly: ['error', 'multi-line'],
-
-    // Strict import ordering
-    'import/order': [
-      'warn',
-      {
-        groups: ['builtin', 'external', 'parent', 'sibling', 'index'],
-        pathGroups: [
-          // Sort absolute root imports before parent imports
-          {
-            pattern: '/**',
-            group: 'parent',
-            position: 'before',
-          },
-        ],
-        'newlines-between': 'always',
-      },
-    ],
-    // Not needed in React 17
-    'react/react-in-jsx-scope': 'off',
-    'import/no-named-as-default-member': 'off',
-  },
-  overrides: [
-    {
-      files: ['*.js'],
-      env: {
-        // We may still use CJS in .js files (eg. local scripts)
-        commonjs: true,
-      },
-      rules: {
-        // `require` is still allowed/recommended in JS
-        '@typescript-eslint/no-var-requires': 'off',
-      },
-    },
-    {
-      files: ['*.ts', '*.tsx'],
-      rules: {
-        // TypeScript 4.0 adds 'any' or 'unknown' type annotation on catch clause variables.
-        // We need to make sure error is of the type we are expecting
-        '@typescript-eslint/no-implicit-any-catch': 'error',
-
-        // These are handled by TS
-        '@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',
-      },
-    },
-    {
-      files: ['*.jsx', '*.tsx', 'src/hooks/*.ts'],
-      plugins: [
-        // Enable linting React code
-        'react',
-        'react-hooks',
-      ],
-      rules: {
-        // Help with Hooks syntax
-        'react-hooks/rules-of-hooks': 'error',
-        'react-hooks/exhaustive-deps': 'error',
-
-        // Handled by Typescript
-        'react/prop-types': 'off',
-
-        // This rule causes too many false positives, eg. with default exports or child render function
-        'react/display-name': 'off',
-      },
-    },
-  ],
-
-  settings: {
-    react: {
-      pragma: 'React',
-      version: '17',
-    },
-  },
-  parserOptions: {
-    ecmaFeatures: {
-      jsx: true,
-    },
-  },
+  extends: ['jwp/typescript'],
 };

.github/workflows/release-build-tag-release.yml

@@ -24,6 +24,7 @@ jobs:
           echo "current-version=${version}" >> "$GITHUB_OUTPUT"
 
       - name: Build App
+        working-directory: ./platforms/web
         run: |
           yarn build
           cd build
@@ -51,7 +52,7 @@ jobs:
         if: ${{ steps.package-version.outputs.current-version }}
         with:
           commit: 'release'
-          artifacts: 'build/ott-web-app-build-*.tar.gz, build/ott-web-app-build-*.zip'
+          artifacts: 'web/build/ott-web-app-build-*.tar.gz, web/build/ott-web-app-build-*.zip'
           tag: v${{ steps.package-version.outputs.current-version }}
           bodyFile: '.github/RELEASE_BODY_TEMPLATE.md'
           token: ${{ secrets.github_token }}

.github/workflows/test-unit-snapshot.yml

@@ -19,7 +19,7 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
-      - name: yarn install, build, and test
+      - name: yarn install and test
         run: |
           yarn
           yarn test

.github/workflows/release-deploy-prod-demo.yml → .github/workflows/web-release-deploy-prod-demo.yml

@@ -1,10 +1,14 @@
-name: Release - Deploy Prod Demo Site
+name: Web - Release - Deploy Prod Demo Site
 
 on:
   push:
     branches: ['release']
   workflow_dispatch:
 
+defaults:
+  run:
+    working-directory: ./platforms/web
+
 jobs:
   deploy_live_website:
     runs-on: ubuntu-latest
@@ -20,3 +24,4 @@ jobs:
           repoToken: '${{ secrets.GITHUB_TOKEN }}'
           firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT }}'
           channelId: live
+          entryPoint: './platforms/web'

.github/workflows/test-e2e.yml → .github/workflows/web-test-e2e.yml

@@ -1,4 +1,4 @@
-name: Test - End to End
+name: Web - Test - End to End
 
 on:
   pull_request:
@@ -8,6 +8,10 @@ on:
     - cron: '30 3 * * 1-5'
   workflow_dispatch:
 
+defaults:
+  run:
+    working-directory: ./platforms/web
+
 jobs:
   test-e2e:
     runs-on: ubuntu-latest
@@ -40,5 +44,5 @@ jobs:
         uses: actions/upload-artifact@v3
         with:
           name: allure-report-${{ matrix.config }}
-          path: ./test-e2e/output/${{ matrix.config }}
+          path: ./platforms/web/test-e2e/output/${{ matrix.config }}
           retention-days: 7

.github/workflows/test-preview-and-lighthouse.yml → .github/workflows/web-test-preview-and-lighthouse.yml

@@ -1,8 +1,12 @@
-name: Test - Deploy Preview and Lighthouse Test
+name: Web - Test - Deploy Preview and Lighthouse Test
 
 on:
   pull_request:
 
+defaults:
+  run:
+    working-directory: ./platforms/web
+
 jobs:
   build_and_preview:
     name: Build and preview
@@ -18,6 +22,7 @@ jobs:
       - uses: FirebaseExtended/action-hosting-deploy@v0
         id: firebase_hosting_preview
         with:
+          entryPoint: './platforms/web'
           repoToken: '${{ secrets.GITHUB_TOKEN }}'
           firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT }}'
           expires: 30d

.gitignore

@@ -1,26 +1,11 @@
 # project, build, and deployment
 node_modules
-build
-.snowpack
-coverage
-output
-public/locales/**/*_old.json
 yarn-error.log
-.firebase
-firebase-debug.log
-.stylelintcache
-.lighthouseci
 
 # os or editor
 .idea
 .DS_Store
 .vscode/
 
-# ignore local files
-*.local
-
-# Exclude ini files because they have customer specific data
-ini/*.ini
-
 # Ignore working area for i18n checks
 .temp-translations

.syncpackrc.json

@@ -0,0 +1,39 @@
+{
+  "$schema": "https://unpkg.com/[email protected]/dist/schema.json",
+  "semverGroups": [
+    {
+      "dependencies": ["codeceptjs", "codeceptjs**", "react-router", "react-router-dom"],
+      "packages": ["**"],
+      "isIgnored": true
+    },
+    {
+      "range": "^",
+      "dependencies": ["**"],
+      "packages": ["**"],
+      "dependencyTypes": ["prod", "dev", "peer", "resolutions"]
+    }
+  ],
+  "versionGroups": [
+    {
+      "label": "Ensure semver ranges for locally developed packages satisfy the local version",
+      "dependencies": ["@jwp/**", "**-config-jwp"],
+      "dependencyTypes": ["peer"],
+      "packages": ["**"],
+      "pinVersion": "*"
+    },
+    {
+      "label": "Ensure local packages are installed as peerDependency",
+      "dependencies": ["@jwp/**", "**-config-jwp"],
+      "dependencyTypes": ["dev", "prod"],
+      "packages": ["**"],
+      "isBanned": true
+    },
+    {
+      "dependencies": ["@types/**"],
+      "dependencyTypes": ["!dev"],
+      "packages": ["**"],
+      "isBanned": true,
+      "label": "@types packages should only be under devDependencies"
+    }
+  ]
+}

README.md

@@ -37,6 +37,7 @@ The JW OTT Webapp is an open-source, dynamically generated video website built a
 - [Frameworks, SDKs and Libraries](./docs/frameworks.md)
 - [Backend Services](./docs/backend-services.md)
 - [Developer Guidelines](./docs/developer-guidelines.md)
+- [Workspaces](./docs/workspaces.md)
 
 ## Supported Features
 

configs/eslint-config-jwp/.depcheckrc.yaml

@@ -0,0 +1,8 @@
+ignores: [
+  # Dynamically loaded in the eslint config
+  '@typescript-eslint/eslint-plugin',
+  '@typescript-eslint/parser',
+  'eslint-plugin-import',
+  'eslint-plugin-react',
+  'eslint-plugin-react-hooks'
+]

configs/eslint-config-jwp/lint-staged.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  '*.js': ['eslint --fix', 'prettier --write'],
+};

configs/eslint-config-jwp/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "eslint-config-jwp",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "lint:ts": "exit 0",
+    "test": "exit 0"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^5.17.0",
+    "@typescript-eslint/parser": "^5.17.0",
+    "confusing-browser-globals": "^1.0.10",
+    "eslint-plugin-import": "^2.23.4",
+    "eslint-plugin-react": "^7.24.0",
+    "eslint-plugin-react-hooks": "^4.2.0"
+  }
+}