Merge pull request #257 from openedx/mashal-m/replace-edx/paragon-fro…

…ntend-build

refactor: replace @edx/paragon and @edx/frontend-build

.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');
 
 module.exports = createConfig('eslint', {
   rules: {

jest.config.js

@@ -1,4 +1,4 @@
-const { createConfig } = require('@edx/frontend-build');
+const { createConfig } = require('@openedx/frontend-build');
 
 module.exports = createConfig('jest', {
   // setupFilesAfterEnv is used after the jest environment has been loaded.  In general this is what you want.  

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

@@ -36,15 +36,15 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-component-footer": "12.7.0",
-    "@edx/frontend-component-header": "4.11.0",
-    "@edx/frontend-platform": "6.2.0",
+    "@edx/frontend-component-footer": "13.0.2",
+    "@edx/frontend-component-header": "5.0.2",
+    "@edx/frontend-platform": "7.1.0",
     "@edx/openedx-atlas": "^0.6.0",
-    "@edx/paragon": "21.5.6",
-    "@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",
+    "@openedx/paragon": "^21.11.3",
+    "@fortawesome/fontawesome-svg-core": "6.5.1",
+    "@fortawesome/free-brands-svg-icons": "6.5.1",
+    "@fortawesome/free-regular-svg-icons": "6.5.1",
+    "@fortawesome/free-solid-svg-icons": "6.5.1",
     "@fortawesome/react-fontawesome": "0.2.0",
     "axios": "0.27.2",
     "babel-polyfill": "6.26.0",
@@ -64,7 +64,7 @@
   },
   "devDependencies": {
     "@edx/browserslist-config": "^1.2.0",
-    "@edx/frontend-build": "13.0.14",
+    "@openedx/frontend-build": "13.0.28",
     "@edx/reactifex": "2.2.0",
     "@testing-library/jest-dom": "6.4.2",
     "@testing-library/react": "12.1.5",

patches/@edx+frontend-build+13.0.14.patch → patches/@openedx+frontend-build+13.0.28.patch

@@ -1,56 +1,59 @@
-diff --git a/node_modules/@edx/frontend-build/config/jest.config.js b/node_modules/@edx/frontend-build/config/jest.config.js
-index ae08b70..9440d81 100644
---- a/node_modules/@edx/frontend-build/config/jest.config.js
-+++ b/node_modules/@edx/frontend-build/config/jest.config.js
-@@ -4,11 +4,14 @@ const fs = require('fs');
+diff --git a/node_modules/@openedx/frontend-build/config/jest.config.js b/node_modules/@openedx/frontend-build/config/jest.config.js
+index ac5f730..ddce396 100644
+--- a/node_modules/@openedx/frontend-build/config/jest.config.js
++++ b/node_modules/@openedx/frontend-build/config/jest.config.js
+@@ -3,11 +3,16 @@ const fs = require('fs');
+
  const presets = require('../lib/presets');
 
++// This assigns the envConfigPath filepath based on whether env.config exists, otherwise it uses the fallback filepath.
++
  let envConfigPath = path.resolve(__dirname, './jest/fallback.env.config.js');
 -const appEnvConfigPath = path.resolve(process.cwd(), './env.config.js');
 +const appEnvConfigPathJs = path.resolve(process.cwd(), './env.config.js');
 +const appEnvConfigPathJsx = path.resolve(process.cwd(), './env.config.jsx');
 
 -if (fs.existsSync(appEnvConfigPath)) {
 -  envConfigPath = appEnvConfigPath;
--}
 +if (fs.existsSync(appEnvConfigPathJs)) {
 +  envConfigPath = appEnvConfigPathJs;
 +} else if (fs.existsSync(appEnvConfigPathJsx)) {
 +  envConfigPath = appEnvConfigPathJsx;
-+};
+ }
 
  module.exports = {
-   testURL: 'http://localhost/',
-diff --git a/node_modules/@edx/frontend-build/config/webpack.dev.config.js b/node_modules/@edx/frontend-build/config/webpack.dev.config.js
-index 5ce7716..fe9888e 100644
---- a/node_modules/@edx/frontend-build/config/webpack.dev.config.js
-+++ b/node_modules/@edx/frontend-build/config/webpack.dev.config.js
-@@ -7,6 +7,7 @@ const Dotenv = require('dotenv-webpack');
+diff --git a/node_modules/@openedx/frontend-build/config/webpack.dev.config.js b/node_modules/@openedx/frontend-build/config/webpack.dev.config.js
+index 5ce7716..2fbc646 100644
+--- a/node_modules/@openedx/frontend-build/config/webpack.dev.config.js
++++ b/node_modules/@openedx/frontend-build/config/webpack.dev.config.js
+@@ -6,6 +6,7 @@ const { merge } = require('webpack-merge');
+ const Dotenv = require('dotenv-webpack');
  const dotenv = require('dotenv');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
- const path = require('path');
 +const fs = require('fs');
+ const path = require('path');
  const PostCssAutoprefixerPlugin = require('autoprefixer');
  const PostCssRTLCSS = require('postcss-rtlcss');
- const PostCssCustomMediaCSS = require('postcss-custom-media');
-@@ -17,6 +18,16 @@ const presets = require('../lib/presets');
+@@ -17,6 +18,18 @@ const presets = require('../lib/presets');
  const resolvePrivateEnvConfig = require('../lib/resolvePrivateEnvConfig');
  const getLocalAliases = require('./getLocalAliases');
 
++// Provides the env.config object that is available in local development so that devserver port number
++// can be assigned below. If no env.config exists (JS or JSX), then it provides an empty object.
 +let envConfig = {};
-+const envConfigPathJs = path.resolve(process.cwd(),'./env.config.js');
++const envConfigPathJs = path.resolve(process.cwd(), './env.config.js');
 +const envConfigPathJsx = path.resolve(process.cwd(), './env.config.jsx');
 +
 +if (fs.existsSync(envConfigPathJs)) {
 +  envConfig = require(envConfigPathJs);
 +} else if (fs.existsSync(envConfigPathJsx)) {
 +  envConfig = require(envConfigPathJsx);
-+};
++}
 +
  // Add process env vars. Currently used only for setting the
  // server port and the publicPath
  dotenv.config({
-@@ -174,7 +185,7 @@ module.exports = merge(commonConfig, {
+@@ -174,7 +187,7 @@ module.exports = merge(commonConfig, {
    // reloading.
    devServer: {
      host: '0.0.0.0',
@@ -59,18 +62,18 @@ index 5ce7716..fe9888e 100644
      historyApiFallback: {
        index: path.join(PUBLIC_PATH, 'index.html'),
        disableDotRule: true,
-diff --git a/node_modules/@edx/frontend-build/config/webpack.prod.config.js b/node_modules/@edx/frontend-build/config/webpack.prod.config.js
-index 2879dd9..4cd1e42 100644
---- a/node_modules/@edx/frontend-build/config/webpack.prod.config.js
-+++ b/node_modules/@edx/frontend-build/config/webpack.prod.config.js
-@@ -12,6 +12,7 @@ const NewRelicSourceMapPlugin = require('@edx/new-relic-source-map-webpack-plugi
+diff --git a/node_modules/@openedx/frontend-build/config/webpack.prod.config.js b/node_modules/@openedx/frontend-build/config/webpack.prod.config.js
+index 2879dd9..1ddb07f 100644
+--- a/node_modules/@openedx/frontend-build/config/webpack.prod.config.js
++++ b/node_modules/@openedx/frontend-build/config/webpack.prod.config.js
+@@ -11,6 +11,7 @@ const dotenv = require('dotenv');
+ const NewRelicSourceMapPlugin = require('@edx/new-relic-source-map-webpack-plugin');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
- const path = require('path');
 +const fs = require('fs');
+ const path = require('path');
  const PostCssAutoprefixerPlugin = require('autoprefixer');
  const PostCssRTLCSS = require('postcss-rtlcss');
- const PostCssCustomMediaCSS = require('postcss-custom-media');
 @@ -23,6 +24,25 @@ const HtmlWebpackNewRelicPlugin = require('../lib/plugins/html-webpack-new-relic
  const commonConfig = require('./webpack.common.config');
  const presets = require('../lib/presets');
@@ -90,9 +93,9 @@ index 2879dd9..4cd1e42 100644
 +  const envConfigFilename = envConfigPath.slice(envConfigPath.indexOf('env.config'));
 +  fs.copyFileSync(envConfigPath, envConfigFilename);
 +
-+  let newConfigFilepath = path.resolve(process.cwd(), envConfigFilename);
++  const newConfigFilepath = path.resolve(process.cwd(), envConfigFilename);
 +  envConfig = require(newConfigFilepath);
-+};
++}
 +
  // Add process env vars. Currently used only for setting the PUBLIC_PATH.
  dotenv.config({

src/components/NavigationBar/NavigationBar.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Tabs, Tab } from '@edx/paragon';
+import { Tabs, Tab } from '@openedx/paragon';
 import { getConfig } from '@edx/frontend-platform';
 import { ROUTES } from '../../constants';
 

src/components/ProgramCertificate/ProgramCertificate.jsx

@@ -6,7 +6,7 @@ import {
   injectIntl,
   intlShape,
 } from '@edx/frontend-platform/i18n';
-import { Hyperlink, DropdownButton, Dropdown } from '@edx/paragon';
+import { Hyperlink, DropdownButton, Dropdown } from '@openedx/paragon';
 import messages from './messages';
 
 function ProgramCertificate({

src/components/ProgramCertificateModal/ProgramCertificateModal.jsx

@@ -4,8 +4,8 @@ import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { BrowserView, MobileView, isBrowser } from 'react-device-detect';
 import {
   ActionRow, Button, Row, StandardModal,
-} from '@edx/paragon';
-import { Info, ContentCopy } from '@edx/paragon/icons';
+} from '@openedx/paragon';
+import { Info, ContentCopy } from '@openedx/paragon/icons';
 
 import messages from './messages';
 import appStoreImg from '../../assets/images/appStore.png';

src/components/ProgramCertificatesList/ProgramCertificatesList.jsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from 'react';
 
-import { ChevronLeft, Info } from '@edx/paragon/icons';
+import { ChevronLeft, Info } from '@openedx/paragon/icons';
 import {
   Alert, Hyperlink, Row, useToggle,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { getConfig } from '@edx/frontend-platform/config';

src/components/ProgramRecord/ProgramRecord.jsx

@@ -6,10 +6,10 @@ import { useParams } from 'react-router-dom';
 
 import {
   Info, ArrowBack,
-} from '@edx/paragon/icons';
+} from '@openedx/paragon/icons';
 import {
   Alert, Container, Button, Hyperlink,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { logError } from '@edx/frontend-platform/logging';

src/components/ProgramRecord/ProgramRecordActions.jsx

@@ -4,10 +4,10 @@ import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import PropTypes from 'prop-types';
 import {
   Help, AccountBalance, ContentCopy, Download, SpinnerSimple, Check,
-} from '@edx/paragon/icons';
+} from '@openedx/paragon/icons';
 import {
   Button, StatefulButton, Icon, IconButton, OverlayTrigger, Popover, Tooltip, Toast,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { logError } from '@edx/frontend-platform/logging';

src/components/ProgramRecord/ProgramRecordHeader.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Badge } from '@edx/paragon';
+import { Badge } from '@openedx/paragon';
 
 import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
 import messages from './messages';

src/components/ProgramRecord/ProgramRecordTable.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { DataTable, Badge } from '@edx/paragon';
+import { DataTable, Badge } from '@openedx/paragon';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import messages from './messages';
 

src/components/ProgramRecord/RecordsHelp.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { Hyperlink } from '@edx/paragon';
+import { Hyperlink } from '@openedx/paragon';
 
 function RecordsHelp({ helpUrl }) {
   return (

src/components/ProgramRecordAlert/ProgramRecordAlert.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Alert, Button, Hyperlink } from '@edx/paragon';
-import { Info, CheckCircle } from '@edx/paragon/icons';
+import { Alert, Button, Hyperlink } from '@openedx/paragon';
+import { Info, CheckCircle } from '@openedx/paragon/icons';
 
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { logError } from '@edx/frontend-platform/logging';

src/components/ProgramRecordSendModal/SendLearnerRecordModal.jsx

@@ -4,7 +4,7 @@ import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import PropTypes from 'prop-types';
 import {
   ModalDialog, Form, SelectableBox, ActionRow, Button,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { logError } from '@edx/frontend-platform/logging';

src/components/ProgramRecordsList/ProgramRecordsList.jsx

@@ -1,9 +1,9 @@
 import React, { useEffect } from 'react';
 
-import { ChevronLeft, Info } from '@edx/paragon/icons';
+import { ChevronLeft, Info } from '@openedx/paragon/icons';
 import {
   Alert, Button, Hyperlink,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { getConfig } from '@edx/frontend-platform/config';

src/i18n/index.js

@@ -1,6 +1,6 @@
 import { messages as headerMessages } from '@edx/frontend-component-header';
 import { messages as footerMessages } from '@edx/frontend-component-footer';
-import { messages as paragonMessages } from '@edx/paragon';
+import { messages as paragonMessages } from '@openedx/paragon';
 
 import arMessages from './messages/ar.json';
 import caMessages from './messages/ca.json';

src/index.scss

@@ -1,6 +1,6 @@
 @import "~@edx/brand/paragon/fonts";
 @import "~@edx/brand/paragon/variables";
-@import "~@edx/paragon/scss/core/core";
+@import "~@openedx/paragon/scss/core/core";
 @import "~@edx/brand/paragon/overrides";
 
 @import './components/index.scss';