Fix replace broken selectable box component everywhere (#887)

The Configure Live modal in Pages & Resources page uses a selectable box to select the video conferencing tool. It seems broken as well (not selectable).

It looks like the bug with not working SelectableBox (see e.g. #886) affects pretty much any component that uses it.

Thus, this PR replaces every usage of the paragon component with our working copy from flcc.

plugins/course-apps/live/Settings.jsx

@@ -1,8 +1,9 @@
 import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { camelCase } from 'lodash';
-import { SelectableBox, Icon } from '@openedx/paragon';
+import { Icon } from '@openedx/paragon';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { SelectableBox } from '@edx/frontend-lib-content-components';
 import PropTypes from 'prop-types';
 import * as Yup from 'yup';
 import { useNavigate } from 'react-router-dom';

plugins/course-apps/live/package.json

@@ -4,6 +4,7 @@
     "description": "Live course configuration for courses using it",
     "peerDependencies": {
         "@edx/frontend-app-course-authoring": "*",
+        "@edx/frontend-lib-content-components": "*",
         "@edx/frontend-platform": "*",
         "@openedx/paragon": "*",
         "@reduxjs/toolkit": "*",

src/content-tags-drawer/ContentTagsCollapsible.jsx

@@ -3,14 +3,14 @@ import React from 'react';
 import {
   Badge,
   Collapsible,
-  SelectableBox,
   Button,
   ModalPopup,
   useToggle,
   SearchField,
 } from '@openedx/paragon';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { SelectableBox } from '@edx/frontend-lib-content-components';
 import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
 import { debounce } from 'lodash';
 import messages from './messages';

src/content-tags-drawer/ContentTagsDropDownSelector.jsx

@@ -1,11 +1,11 @@
 // @ts-check
 import React, { useEffect, useState, useCallback } from 'react';
 import {
-  SelectableBox,
   Icon,
   Spinner,
   Button,
 } from '@openedx/paragon';
+import { SelectableBox } from '@edx/frontend-lib-content-components';
 import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
 import { ArrowDropDown, ArrowDropUp } from '@openedx/paragon/icons';
 import PropTypes from 'prop-types';

src/files-and-videos/videos-page/transcript-settings/OrderTranscriptForm.jsx

@@ -6,8 +6,8 @@ import {
   injectIntl,
   intlShape,
 } from '@edx/frontend-platform/i18n';
-import { Button, SelectableBox, Stack } from '@openedx/paragon';
-import { ErrorAlert } from '@edx/frontend-lib-content-components';
+import { Button, Stack } from '@openedx/paragon';
+import { ErrorAlert, SelectableBox } from '@edx/frontend-lib-content-components';
 import Cielo24Form from './Cielo24Form';
 import ThreePlayMediaForm from './ThreePlayMediaForm';
 import { RequestStatus } from '../../../data/constants';