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

.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.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/brand-edx.org@2.1.2",
-    "@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"
     }
   }
 }

src/components/ActionButton.jsx

@@ -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/AppContainer/index.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/Assessment/Assessment.scss

@@ -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/EditableAssessment/OverallFeedback/index.jsx

@@ -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';

src/components/Assessment/EditableAssessment/__snapshots__/index.test.jsx.snap

@@ -35,14 +35,14 @@ exports[`<EditableAssessment /> render with criteria 1`] = `
     />
     <CriterionContainer
       criterion={
-        Object {
+        {
           "name": "criterion1",
         }
       }
       feedback={
         <CriterionFeedback
           criterion={
-            Object {
+            {
               "name": "criterion1",
             }
           }
@@ -52,7 +52,7 @@ exports[`<EditableAssessment /> render with criteria 1`] = `
       input={
         <RadioCriterion
           criterion={
-            Object {
+            {
               "name": "criterion1",
             }
           }
@@ -63,14 +63,14 @@ exports[`<EditableAssessment /> render with criteria 1`] = `
     />
     <CriterionContainer
       criterion={
-        Object {
+        {
           "name": "criterion2",
         }
       }
       feedback={
         <CriterionFeedback
           criterion={
-            Object {
+            {
               "name": "criterion2",
             }
           }
@@ -80,7 +80,7 @@ exports[`<EditableAssessment /> render with criteria 1`] = `
       input={
         <RadioCriterion
           criterion={
-            Object {
+            {
               "name": "criterion2",
             }
           }
@@ -91,14 +91,14 @@ exports[`<EditableAssessment /> render with criteria 1`] = `
     />
     <CriterionContainer
       criterion={
-        Object {
+        {
           "name": "criterion3",
         }
       }
       feedback={
         <CriterionFeedback
           criterion={
-            Object {
+            {
               "name": "criterion3",
             }
           }
@@ -108,7 +108,7 @@ exports[`<EditableAssessment /> render with criteria 1`] = `
       input={
         <RadioCriterion
           criterion={
-            Object {
+            {
               "name": "criterion3",
             }
           }

src/components/Assessment/EditableAssessment/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Card } from '@edx/paragon';
+import { Card } from '@openedx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { useCriteriaConfig } from 'hooks/assessment';

src/components/Assessment/ReadonlyAssessment/CollapsibleAssessment.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Collapsible } from '@edx/paragon';
+import { Collapsible } from '@openedx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import messages from './messages';
 

src/components/Assessment/ReadonlyAssessment/Feedback.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Collapsible, Icon } from '@edx/paragon';
-import { ExpandMore, ExpandLess } from '@edx/paragon/icons';
+import { Collapsible, Icon } from '@openedx/paragon';
+import { ExpandMore, ExpandLess } from '@openedx/paragon/icons';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import InfoPopover from 'components/InfoPopover';

src/components/Assessment/ReadonlyAssessment/__snapshots__/Feedback.test.jsx.snap

@@ -3,7 +3,7 @@
 exports[`<Feedback /> render without props 1`] = `
 <Fragment>
   <div
-    className="\\"mt-2"
+    className=""mt-2"
   >
     <div
       className="d-flex justify-content-between align-items-center"
@@ -19,7 +19,7 @@ exports[`<Feedback /> render without props 1`] = `
 exports[`<Feedback /> renders the component 1`] = `
 <Fragment>
   <div
-    className="\\"mt-2"
+    className=""mt-2"
   >
     <div
       className="d-flex justify-content-between align-items-center"
@@ -82,7 +82,7 @@ exports[`<Feedback /> renders the component 1`] = `
 exports[`<Feedback /> renders without commentBody 1`] = `
 <Fragment>
   <div
-    className="\\"mt-2"
+    className=""mt-2"
   >
     <div
       className="d-flex justify-content-between align-items-center"
@@ -112,7 +112,7 @@ exports[`<Feedback /> renders without commentBody 1`] = `
 exports[`<Feedback /> renders without criterionDescription 1`] = `
 <Fragment>
   <div
-    className="\\"mt-2"
+    className=""mt-2"
   >
     <div
       className="d-flex justify-content-between align-items-center"
@@ -170,7 +170,7 @@ exports[`<Feedback /> renders without criterionDescription 1`] = `
 exports[`<Feedback /> renders without selectedOption 1`] = `
 <Fragment>
   <div
-    className="\\"mt-2"
+    className=""mt-2"
   >
     <div
       className="d-flex justify-content-between align-items-center"

src/components/Assessment/ReadonlyAssessment/__snapshots__/ReadOnlyAssessment.test.jsx.snap

@@ -5,7 +5,7 @@ exports[`<ReadOnlyAssessment /> render with assessment 1`] = `
   defaultOpen={false}
   stepLabel={null}
   stepScore={
-    Object {
+    {
       "earned": 5,
       "total": 10,
     }
@@ -27,7 +27,7 @@ exports[`<ReadOnlyAssessment /> render with assessments 1`] = `
     defaultOpen={false}
     stepLabel={null}
     stepScore={
-      Object {
+      {
         "earned": 5,
         "total": 10,
       }

src/components/Assessment/ReadonlyAssessment/__snapshots__/index.test.jsx.snap

@@ -3,16 +3,16 @@
 exports[`<ReadOnlyAssessmentContainer /> renders the component 1`] = `
 <ReadOnlyAssessment
   assessment={
-    Object {
+    {
       "abc": "def",
     }
   }
   assessments={
-    Array [
-      Object {
+    [
+      {
         "abc": "def",
       },
-      Object {
+      {
         "ghi": "jkl",
       },
     ]
@@ -21,7 +21,7 @@ exports[`<ReadOnlyAssessmentContainer /> renders the component 1`] = `
   step="Step"
   stepLabel={null}
   stepScore={
-    Object {
+    {
       "earned": 5,
       "total": 10,
     }

src/components/ConfirmDialog/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { ActionRow, AlertModal } from '@edx/paragon';
+import { ActionRow, AlertModal } from '@openedx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
 import ActionButton from 'components/ActionButton';

src/components/CriterionContainer/CriterionContainer.scss

@@ -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";
 
 .criteria-label {

src/components/CriterionContainer/CriterionFeedback.jsx

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

src/components/CriterionContainer/GradedCriterion.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Form, FormControlFeedback } from '@edx/paragon';
+import { Form, FormControlFeedback } from '@openedx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
 import messages from './messages';

src/components/CriterionContainer/RadioCriterion.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Form } from '@edx/paragon';
+import { Form } from '@openedx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import {