feat: replaced packages @edx/paragon & @edx/frontend-build to use openedx namespace (#193)

* feat: replace edx with openedx namespace for paragon & frontend-build, updated respective packages

* refactor: updated jest config

* feat: babel-plugin-react-intl to babel-plugin-formatjs migration

* feat: major version upgrades for frontend-build & frontend-platform along with respective packages

* fix: downgrade testing-library packages to version compatible with react v17

* fix: updated jest config to resolve errors, updated snapshots

* refactor: updated package-lock to resolve build failures

* fix: updated useAddFile function, Blob type to File to resolve property type errors

Author: BilalQamar95

.eslintrc.js

@@ -1,5 +1,5 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
-const { createConfig } = require('@edx/frontend-build');
+const { createConfig } = require('@openedx/frontend-build');
 
 const config =  createConfig('eslint', {
   rules: {

Makefile

@@ -7,7 +7,7 @@ i18n = ./src/i18n
 transifex_input = $(i18n)/transifex_input.json
 
 # This directory must match .babelrc .
-transifex_temp = ./temp/babel-plugin-react-intl
+transifex_temp = ./temp/babel-plugin-formatjs
 
 precommit:
 	npm run lint

jest.config.js

@@ -1,4 +1,4 @@
-const { createConfig } = require('@edx/frontend-build');
+const { createConfig } = require('@openedx/frontend-build');
 
 const config = createConfig('jest', {
   // setupFilesAfterEnv is used after the jest environment has been loaded.  In general this is what you want.  
@@ -16,12 +16,15 @@ const config = createConfig('jest', {
     'src/data/services/lms/fakeData', // don't check coverage for fake data
   ],
   testTimeout: 120000,
+  moduleNameMapper: {
+    '@edx/frontend-lib-special-exams': '<rootDir>/node_modules/@edx/frontend-lib-special-exams',
+  },
 });
 
 config.moduleDirectories = ['node_modules', 'src'];
 
 // add axios to the list of modules to not transform
-config.transformIgnorePatterns = ['/node_modules/(?!@edx|axios)'];
+config.transformIgnorePatterns = ['/node_modules/(?!@(open)?edx|axios)'];
 config.testPathIgnorePatterns = ['/dist'];
 console.log({ jestTestConfig: config });
 

module.config.js.example

@@ -23,9 +23,9 @@ module.exports = {
     **********************************************************************************************/
 
     // { moduleName: '@edx/brand', dir: '../brand-openedx' }, // replace with your brand checkout
-    // { moduleName: '@edx/paragon/scss/core', dir: '../paragon', dist: 'scss/core' },
-    // { moduleName: '@edx/paragon/icons', dir: '../paragon', dist: 'icons' },
-    // { moduleName: '@edx/paragon', dir: '../paragon', dist: 'dist' },
+    // { moduleName: '@openedx/paragon/scss/core', dir: '../paragon', dist: 'scss/core' },
+    // { moduleName: '@openedx/paragon/icons', dir: '../paragon', dist: 'icons' },
+    // { moduleName: '@openedx/paragon', dir: '../paragon', dist: 'dist' },
     // { moduleName: '@edx/frontend-platform', dir: '../frontend-platform', dist: 'dist' },
   ],
 };

package-lock.json

@@ -11,7 +11,7 @@
   ],
   "scripts": {
     "build": "fedx-scripts webpack",
-    "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
+    "i18n_extract": "fedx-scripts formatjs extract",
     "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
     "lint:fix": "fedx-scripts eslint --fix --ext .js --ext .jsx .",
     "snapshot": "fedx-scripts jest --updateSnapshot",
@@ -35,16 +35,16 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@edx/[email protected]",
-    "@edx/frontend-lib-special-exams": "^2.29.0",
-    "@edx/frontend-platform": "5.6.1",
-    "@edx/paragon": "^21.5.3",
-    "@edx/react-unit-test-utils": "1.7.1",
+    "@edx/frontend-lib-special-exams": "^3.1.0",
+    "@edx/frontend-platform": "8.0.0",
+    "@edx/react-unit-test-utils": "^3.0.0",
     "@edx/tinymce-language-selector": "1.1.0",
     "@fortawesome/fontawesome-svg-core": "1.2.36",
     "@fortawesome/free-brands-svg-icons": "5.15.4",
     "@fortawesome/free-regular-svg-icons": "5.15.4",
     "@fortawesome/free-solid-svg-icons": "5.15.4",
     "@fortawesome/react-fontawesome": "0.2.2",
+    "@openedx/paragon": "^21.13.1",
     "@reduxjs/toolkit": "^1.9.7",
     "@tanstack/react-query": "^4.29.25",
     "@tanstack/react-query-devtools": "^4.35.3",
@@ -75,24 +75,23 @@
   },
   "devDependencies": {
     "@edx/browserslist-config": "^1.1.1",
-    "@edx/frontend-build": "12.9.17",
+    "@openedx/frontend-build": "14.0.3",
     "@edx/reactifex": "^2.1.1",
-    "@testing-library/dom": "^10.0.0",
-    "@testing-library/jest-dom": "6.4.5",
-    "@testing-library/react": "15.0.7",
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/jest-dom": "5.17.0",
+    "@testing-library/react": "12.1.5",
     "@testing-library/user-event": "^14.5.1",
     "glob": "7.2.3",
     "husky": "7.0.4",
-    "jest": "^29.0.0",
-    "ts-jest": "^29.0.0"
+    "jest": "^29.7.0",
+    "ts-jest": "^29.1.4"
   },
   "overrides": {
-    "@edx/react-unit-test-utils": {
-      "@edx/frontend-build": "12.9.17"
-    },
     "@edx/frontend-lib-special-exams": {
-      "@edx/frontend-build": "12.9.17",
-      "@edx/paragon": "^21.5.3"
+      "@openedx/paragon": "21.13.1"
+    },
+    "@edx/frontend-platform": {
+      "@openedx/paragon": "21.13.1"
     }
   }
 }

package.json

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-import { Button, StatefulButton } from '@edx/paragon';
+import { Button, StatefulButton } from '@openedx/paragon';
 
 import { MutationStatus } from 'constants/index';
 

src/components/ActionButton.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { ErrorPage } from '@edx/frontend-platform/react';
-import { Spinner } from '@edx/paragon';
+import { Spinner } from '@openedx/paragon';
 
 import {
   useIsPageDataLoaded,

src/components/AppContainer/index.jsx

@@ -1,5 +1,5 @@
 @import "~@edx/brand/paragon/variables";
-@import "~@edx/paragon/scss/core/core";
+@import "~@openedx/paragon/scss/core/core";
 @import "~@edx/brand/paragon/overrides";
 
 .assessment-card {

src/components/Assessment/Assessment.scss

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Form } from '@edx/paragon';
+import { Form } from '@openedx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { useViewStep } from 'hooks/routing';