feat(project)!: restructure for multiplatforms with workspaces (#435)

* refactor: initialize workspace and separate services, stores and utils * chore: update configurations and set up linting * refactor(project): move web assets to theme package refactor(project): move poster aspect to constants refactor(project): move test fixtures and utils refactor: move hooks to react-hooks package chore: configurations and testing refactor: add mockService helper chore: remove .only from useLiveChannels test refactor: move components, containers and pages to ui-react package refactor: rename @jwplayer org to @jwp chore: fix epg fixtures for testing chore: fix unmet peer dependency warnings chore: fix e2e typings * docs: add i18n package readme chore(i18n): update i18next scripts * refactor: store supported languages in config store * chore: update release workflow * refactor: move web into platforms directory * chore: update web platform directory in workflows * chore: update gitignore * chore: fix epg fixtures * refactor(project): remove vite from common, ui-react and hooks-react (#8) * refactor: replace meta env imports with common env object * refactor(tests): fix broken ui-react unit tests * refactor(project): add scss typings * refactor(project): remove obsolete ts rule * refactor(tests): make sure mode and dev are globally available * refactor(project): minor code upgrade Co-authored-by: Christiaan Scheermeijer <christiaan@videodock.com> --------- Co-authored-by: Christiaan Scheermeijer <christiaan@videodock.com> * feat: remove browser typings from common * refactor(project): remove react from common package (#9) * refactor: replace meta env imports with common env object * refactor(tests): fix broken ui-react unit tests * refactor(project): add scss typings * refactor(project): remove obsolete ts rule * refactor(tests): make sure mode and dev are globally available * refactor(project): remove react and react-router-dom from common * refactor(project): replace react-query with tanstack/query-core in common * refactor(project): add location.search string failsafe * feat(player): show nice error message when media item is geo blocked Co-authored-by: Mike van Veenhuijzen <mike@videodock.com> * refactor(project): move icons to theme folder (#21) * refactor(project): add createURL util to replace all url utils * refactor(project): remove react-router from hooks-react package * refactor: allow custom integration registration via container chore: fix scss module import autocomplete in IDE chore: cleanup chore: rename calculate_intergration_type fix: jwp account service injection chore: fix unit tests refactor: move get integration type check # Conflicts: # packages/common/src/services/integrations/cleeng/CleengSubscriptionService.ts # packages/ui-react/src/containers/AdyenPaymentDetails/AdyenPaymentDetails.tsx # packages/ui-react/src/pages/Home/__snapshots__/Home.test.tsx.snap * refactor(project): split url creation from location based * feat(accessibility): accessibility improvements and quick wins * feat(a11y): correct heading structure * refactor(a11y): modal id and a11y style selector * refactor(home): add home scss file * chore(a11y): add hidden h1 element to payment page * refactor(project): move accessibility import to main scss file * refactor(e2e): update tests after changes to header hierarchy * refactor(project): update styling import * refactor(tests): update account snapshot * feat(a11y): correct heading structure * refactor(a11y): modal id and a11y style selector * feat(a11y): add skiplink to header and update translations * refactor(project): add tabIndex prop and update translations * refactor(project): update import and move styling variable * refactor(project): add hidden h1 element to correct eelements * refactor(a11y): move hidden header element in dom structure * feat(a11y): link underlines, role attribute and page titles * feat(a11y): add an underline to links at all times * feat(a11y): add role attribute to dialogs * feat(a11y): add role attribute to dialogs * chore(a11y): apply aria-labelledby * chore(a11y): useOpaqueId for id * chore(a11y): improve role attribute value for test * chore: fix merge mistake --------- Co-authored-by: Mike van Veenhuijzen <mike@videodock.com> --------- Co-authored-by: Roy Schut <roy@videodock.com> Co-authored-by: Mike van Veenhuijzen <mike@videodock.com> * fix(a11y): alertdialog with aria-modal for alert component * fix(a11y): role=“alertdialog” for alert component with id fix * fix(a11y): add aria-modal to alert component --------- Co-authored-by: Mike van Veenhuijzen <mike@videodock.com> * fix(a11y): apply section to account and payment pages * fix(a11y): add prop arialabeledby to account sections * fix(tests): update useOpaqueId and snapshots * fix(a11y): update paymnents page sections with the correct prop --------- Co-authored-by: Rachid <rachid.ang@sounds.global> # Conflicts: # packages/ui-react/src/components/Payment/Payment.tsx * refactor(a11y): refactor language menu switch for accessibility compliance * fix(a11y): cards optimized for screen readers * fix(a11y): card optimized for screen readers * chore: update snapshots * chore: rewrite unit tests for image with empty alt * fix(e2e): rewrite aria-label with data-label for testing purposes --------- Co-authored-by: Mike van Veenhuijzen <mike@videodock.com> # Conflicts: # packages/ui-react/src/components/Card/Card.tsx # packages/ui-react/src/pages/Home/__snapshots__/Home.test.tsx.snap * feat(i18n): reflect language switching in root html lang tag. Co-authored-by: Rachid <rachid.ang@sounds.global> * feat(a11y): make user menu keyboard accessible * fix: language menu button * fix: slow login and preventable errors * fix: load subscription after restoring SVOD session * fix(auth): set the correct loading state after logging the user in account-controller * fix: refresh entitlements on tvod purchase * chore: fix depcheck errors * fix: infinite loader when buying a subscription * docs(project): update documentation for workspaces * chore: rename web specific workflows * chore: pr feedback * chore: move build packages to configs directory * fix: epg service bindings --------- Co-authored-by: Roy Schut <royschut@gmail.com> Co-authored-by: langemike <mikevv@gmail.com> Co-authored-by: Mike van Veenhuijzen <mike@videodock.com> Co-authored-by: Melissa Hart <48496458+MelissaDTH@users.noreply.github.com> Co-authored-by: Roy Schut <roy@videodock.com> Co-authored-by: Rachid Angelista <80318554+R-Cloud-Designs@users.noreply.github.com> Co-authored-by: Rachid <rachid.ang@sounds.global>
jwplayer · Jan 31, 2024 · 3e3e2b1 · 3e3e2b1
1 parent a95c3a3
commit 3e3e2b1
Show file tree

Hide file tree

Showing 893 changed files with 10,505 additions and 10,586 deletions.
diff --git a/.commitlintrc.js b/.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',
       ],
     ],
   },

diff --git a/.depcheckrc.yaml b/.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'
   ]
diff --git a/.eslintignore b/.eslintignore
@@ -1,8 +1,6 @@
 # Modules
 node_modules/
 
-# Test
-coverage/
-
-# Build output
 build/
+
+coverage/
diff --git a/.eslintrc.js b/.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'],
 };
diff --git a/.github/workflows/release-build-tag-release.yml b/.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 }}
diff --git a/.github/workflows/test-unit-snapshot.yml b/.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

diff --git a/...ub/workflows/release-deploy-prod-demo.yml → ...orkflows/web-release-deploy-prod-demo.yml b/...ub/workflows/release-deploy-prod-demo.yml → ...orkflows/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'
diff --git a/.github/workflows/test-e2e.yml → .github/workflows/web-test-e2e.yml b/.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
diff --git a/...workflows/test-preview-and-lighthouse.yml → ...flows/web-test-preview-and-lighthouse.yml b/...workflows/test-preview-and-lighthouse.yml → ...flows/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

diff --git a/.gitignore b/.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
diff --git a/.syncpackrc.json b/.syncpackrc.json
@@ -0,0 +1,39 @@
+{
+  "$schema": "https://unpkg.com/syncpack@11.2.1/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"
+    }
+  ]
+}
diff --git a/README.md b/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
 

diff --git a/configs/eslint-config-jwp/.depcheckrc.yaml b/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'
+]
diff --git a/configs/eslint-config-jwp/lint-staged.config.js b/configs/eslint-config-jwp/lint-staged.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  '*.js': ['eslint --fix', 'prettier --write'],
+};
diff --git a/configs/eslint-config-jwp/package.json b/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"
+  }
+}