@openedx/paragon 22.0.0-alpha.24 → 22.0.0

package/dist/utils/breakpoints.js

@@ -1,4 +1,4 @@
-import breakpointSizes from '../../styles/scss/core/_exports.module.scss';
+import breakpointSizes from '../../scss/core/_exports.module.scss';
 
 const {
   sm, md, lg, xl, xxl,

package/dist/utils/propTypes/utils.js

@@ -22,6 +22,16 @@ export const customPropTypeRequirement = (targetType, conditionFn, filterString)
   }
 );
 
+/**
+ * Checks if all specified properties are defined in the `props` object.
+ *
+ * @param {Object} props - The object in which the properties are checked.
+ * @param {string[]} otherPropNames - An array of strings representing the property names to be checked.
+ * @returns {boolean} `true` if all properties are defined and not equal to `undefined`, `false` otherwise.
+ */
+export const isEveryPropDefined = (props, otherPropNames) => otherPropNames
+  .every(propName => props[propName] !== undefined);
+
 /**
  * Returns a PropType entry with the given propType that is required if otherPropName
  * is truthy.
@@ -34,8 +44,13 @@ export const customPropTypeRequirement = (targetType, conditionFn, filterString)
 export const requiredWhen = (propType, otherPropName) => (
   customPropTypeRequirement(
     propType,
-    (props) => props[otherPropName] === true,
-    `${otherPropName} is truthy`,
+    (props) => {
+      if (Array.isArray(otherPropName)) {
+        return isEveryPropDefined(props, otherPropName);
+      }
+      return props[otherPropName] === true;
+    },
+    `${otherPropName} ${Array.isArray(otherPropName) ? 'are defined' : 'is truthy'}`,
   )
 );
 

package/dist/withDeprecatedProps.js

@@ -1,12 +1,23 @@
-const _excluded = ["children"];
+var _excluded = ["children"];
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 /* eslint no-console: 0 */
 import React from 'react';
-export let DeprTypes = /*#__PURE__*/function (DeprTypes) {
+export var DeprTypes = /*#__PURE__*/function (DeprTypes) {
   DeprTypes["MOVED"] = "MOVED";
   DeprTypes["REMOVED"] = "REMOVED";
   DeprTypes["FORMAT"] = "FORMAT";
@@ -14,68 +25,78 @@ export let DeprTypes = /*#__PURE__*/function (DeprTypes) {
   return DeprTypes;
 }({});
 function withDeprecatedProps(WrappedComponent, componentName, deprecatedProps) {
-  class WithDeprecatedProps extends React.Component {
+  var WithDeprecatedProps = /*#__PURE__*/function (_React$Component) {
+    _inherits(WithDeprecatedProps, _React$Component);
+    var _super = _createSuper(WithDeprecatedProps);
     // eslint-disable-next-line react/static-property-placement
 
-    constructor(props) {
-      super(props);
-      this.transformProps = this.transformProps.bind(this);
+    function WithDeprecatedProps(props) {
+      var _this;
+      _classCallCheck(this, WithDeprecatedProps);
+      _this = _super.call(this, props);
+      _this.transformProps = _this.transformProps.bind(_assertThisInitialized(_this));
+      return _this;
     }
-    warn(message) {
-      if (process.env.NODE_ENV === 'development') {
-        if (console) {
-          console.warn(`[Deprecated] ${message}`);
+    _createClass(WithDeprecatedProps, [{
+      key: "warn",
+      value: function warn(message) {
+        if (process.env.NODE_ENV === 'development') {
+          if (console) {
+            console.warn("[Deprecated] ".concat(message));
+          }
         }
       }
-    }
-    transformProps(acc, propName) {
-      if (deprecatedProps[propName] === undefined) {
-        acc[propName] = this.props[propName];
+    }, {
+      key: "transformProps",
+      value: function transformProps(acc, propName) {
+        if (deprecatedProps[propName] === undefined) {
+          acc[propName] = this.props[propName];
+          return acc;
+        }
+        var _deprecatedProps$prop = deprecatedProps[propName],
+          deprType = _deprecatedProps$prop.deprType,
+          newName = _deprecatedProps$prop.newName,
+          expect = _deprecatedProps$prop.expect,
+          transform = _deprecatedProps$prop.transform,
+          message = _deprecatedProps$prop.message;
+        switch (deprType) {
+          case DeprTypes.MOVED:
+            this.warn("".concat(componentName, ": The prop '").concat(propName, "' has been moved to '").concat(newName, "'."));
+            acc[newName] = this.props[propName];
+            break;
+          case DeprTypes.REMOVED:
+            this.warn("".concat(componentName, ": The prop '").concat(propName, "' has been removed. '").concat(message, "'"));
+            break;
+          case DeprTypes.FORMAT:
+            if (!expect(this.props[propName])) {
+              this.warn("".concat(componentName, ": The prop '").concat(propName, "' expects a new format. ").concat(message));
+              acc[propName] = transform(this.props[propName], this.props);
+            } else {
+              acc[propName] = this.props[propName];
+            }
+            break;
+          case DeprTypes.MOVED_AND_FORMAT:
+            this.warn("".concat(componentName, ": The prop '").concat(propName, "' has been moved to '").concat(newName, "' and expects a new format. ").concat(message));
+            acc[newName] = transform(this.props[propName], this.props);
+            break;
+          default:
+            acc[propName] = this.props[propName];
+            break;
+        }
         return acc;
       }
-      const {
-        deprType,
-        newName,
-        expect,
-        transform,
-        message
-      } = deprecatedProps[propName];
-      switch (deprType) {
-        case DeprTypes.MOVED:
-          this.warn(`${componentName}: The prop '${propName}' has been moved to '${newName}'.`);
-          acc[newName] = this.props[propName];
-          break;
-        case DeprTypes.REMOVED:
-          this.warn(`${componentName}: The prop '${propName}' has been removed. '${message}'`);
-          break;
-        case DeprTypes.FORMAT:
-          if (!expect(this.props[propName])) {
-            this.warn(`${componentName}: The prop '${propName}' expects a new format. ${message}`);
-            acc[propName] = transform(this.props[propName], this.props);
-          } else {
-            acc[propName] = this.props[propName];
-          }
-          break;
-        case DeprTypes.MOVED_AND_FORMAT:
-          this.warn(`${componentName}: The prop '${propName}' has been moved to '${newName}' and expects a new format. ${message}`);
-          acc[newName] = transform(this.props[propName], this.props);
-          break;
-        default:
-          acc[propName] = this.props[propName];
-          break;
+    }, {
+      key: "render",
+      value: function render() {
+        var _Object$keys$reduce = Object.keys(this.props).reduce(this.transformProps, {}),
+          children = _Object$keys$reduce.children,
+          transformedProps = _objectWithoutProperties(_Object$keys$reduce, _excluded);
+        return /*#__PURE__*/React.createElement(WrappedComponent, transformedProps, this.props.children || children);
       }
-      return acc;
-    }
-    render() {
-      const _Object$keys$reduce = Object.keys(this.props).reduce(this.transformProps, {}),
-        {
-          children
-        } = _Object$keys$reduce,
-        transformedProps = _objectWithoutProperties(_Object$keys$reduce, _excluded);
-      return /*#__PURE__*/React.createElement(WrappedComponent, transformedProps, this.props.children || children);
-    }
-  }
-  _defineProperty(WithDeprecatedProps, "displayName", `withDeprecatedProps(${componentName})`);
+    }]);
+    return WithDeprecatedProps;
+  }(React.Component);
+  _defineProperty(WithDeprecatedProps, "displayName", "withDeprecatedProps(".concat(componentName, ")"));
   return WithDeprecatedProps;
 }
 export default withDeprecatedProps;

package/dist/withDeprecatedProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"withDeprecatedProps.js","names":["React","DeprTypes","withDeprecatedProps","WrappedComponent","componentName","deprecatedProps","WithDeprecatedProps","Component","constructor","props","transformProps","bind","warn","message","process","env","NODE_ENV","console","acc","propName","undefined","deprType","newName","expect","transform","MOVED","REMOVED","FORMAT","MOVED_AND_FORMAT","render","_Object$keys$reduce","Object","keys","reduce","children","transformedProps","_objectWithoutProperties","_excluded","createElement","_defineProperty"],"sources":["../src/withDeprecatedProps.tsx"],"sourcesContent":["/* eslint no-console: 0 */\nimport React from 'react';\n\nexport enum DeprTypes {\n  MOVED = 'MOVED',\n  REMOVED = 'REMOVED',\n  FORMAT = 'FORMAT',\n  MOVED_AND_FORMAT = 'MOVED_AND_FORMAT',\n}\n\nexport interface DeprecatedProps extends Record<string, any> {\n  deprType: DeprTypes,\n  newName?: string,\n  expect?: (propValue: any) => boolean,\n  transform?: (propValue: any, allProps: Record<string, any>) => any,\n  message?: string,\n}\n\nfunction withDeprecatedProps<T extends Record<string, any>>(\n  WrappedComponent: React.ComponentType<any>,\n  componentName: string,\n  deprecatedProps: Record<string, DeprecatedProps>,\n) : any {\n  class WithDeprecatedProps extends React.Component<T> {\n    // eslint-disable-next-line react/static-property-placement\n    public static displayName = `withDeprecatedProps(${componentName})`;\n\n    constructor(props: T) {\n      super(props);\n      this.transformProps = this.transformProps.bind(this);\n    }\n\n    warn(message: string) {\n      if (process.env.NODE_ENV === 'development') {\n        if (console) { console.warn(`[Deprecated] ${message}`); }\n      }\n    }\n\n    transformProps(acc: Record<string, any>, propName: string) : Record<string, any> {\n      if (deprecatedProps[propName] === undefined) {\n        acc[propName] = this.props[propName];\n        return acc;\n      }\n\n      const {\n        deprType,\n        newName,\n        expect,\n        transform,\n        message,\n      } = deprecatedProps[propName];\n\n      switch (deprType) {\n        case DeprTypes.MOVED:\n          this.warn(`${componentName}: The prop '${propName}' has been moved to '${newName}'.`);\n          acc[newName!] = this.props[propName];\n          break;\n        case DeprTypes.REMOVED:\n          this.warn(`${componentName}: The prop '${propName}' has been removed. '${message}'`);\n          break;\n        case DeprTypes.FORMAT:\n          if (!expect!(this.props[propName])) {\n            this.warn(`${componentName}: The prop '${propName}' expects a new format. ${message}`);\n            acc[propName] = transform!(this.props[propName], this.props);\n          } else {\n            acc[propName] = this.props[propName];\n          }\n          break;\n        case DeprTypes.MOVED_AND_FORMAT:\n          this.warn(`${componentName}: The prop '${propName}' has been moved to '${newName}' and expects a new format. ${message}`);\n          acc[newName!] = transform!(this.props[propName], this.props);\n          break;\n        default:\n          acc[propName] = this.props[propName];\n          break;\n      }\n\n      return acc;\n    }\n\n    render() {\n      const { children, ...transformedProps } = Object\n        .keys(this.props)\n        .reduce(this.transformProps, {});\n\n      return (\n        <WrappedComponent {...transformedProps as T}>\n          {this.props.children || children}\n        </WrappedComponent>\n      );\n    }\n  }\n\n  return WithDeprecatedProps;\n}\n\nexport default withDeprecatedProps;\n"],"mappings":"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"}
+{"version":3,"file":"withDeprecatedProps.js","names":["React","DeprTypes","withDeprecatedProps","WrappedComponent","componentName","deprecatedProps","WithDeprecatedProps","_React$Component","_inherits","_super","_createSuper","props","_this","_classCallCheck","call","transformProps","bind","_assertThisInitialized","_createClass","key","value","warn","message","process","env","NODE_ENV","console","concat","acc","propName","undefined","_deprecatedProps$prop","deprType","newName","expect","transform","MOVED","REMOVED","FORMAT","MOVED_AND_FORMAT","render","_Object$keys$reduce","Object","keys","reduce","children","transformedProps","_objectWithoutProperties","_excluded","createElement","Component","_defineProperty"],"sources":["../src/withDeprecatedProps.tsx"],"sourcesContent":["/* eslint no-console: 0 */\nimport React from 'react';\n\nexport enum DeprTypes {\n  MOVED = 'MOVED',\n  REMOVED = 'REMOVED',\n  FORMAT = 'FORMAT',\n  MOVED_AND_FORMAT = 'MOVED_AND_FORMAT',\n}\n\nexport interface DeprecatedProps extends Record<string, any> {\n  deprType: DeprTypes,\n  newName?: string,\n  expect?: (propValue: any) => boolean,\n  transform?: (propValue: any, allProps: Record<string, any>) => any,\n  message?: string,\n}\n\nfunction withDeprecatedProps<T extends Record<string, any>>(\n  WrappedComponent: React.ComponentType<any>,\n  componentName: string,\n  deprecatedProps: Record<string, DeprecatedProps>,\n) : any {\n  class WithDeprecatedProps extends React.Component<T> {\n    // eslint-disable-next-line react/static-property-placement\n    public static displayName = `withDeprecatedProps(${componentName})`;\n\n    constructor(props: T) {\n      super(props);\n      this.transformProps = this.transformProps.bind(this);\n    }\n\n    warn(message: string) {\n      if (process.env.NODE_ENV === 'development') {\n        if (console) { console.warn(`[Deprecated] ${message}`); }\n      }\n    }\n\n    transformProps(acc: Record<string, any>, propName: string) : Record<string, any> {\n      if (deprecatedProps[propName] === undefined) {\n        acc[propName] = this.props[propName];\n        return acc;\n      }\n\n      const {\n        deprType,\n        newName,\n        expect,\n        transform,\n        message,\n      } = deprecatedProps[propName];\n\n      switch (deprType) {\n        case DeprTypes.MOVED:\n          this.warn(`${componentName}: The prop '${propName}' has been moved to '${newName}'.`);\n          acc[newName!] = this.props[propName];\n          break;\n        case DeprTypes.REMOVED:\n          this.warn(`${componentName}: The prop '${propName}' has been removed. '${message}'`);\n          break;\n        case DeprTypes.FORMAT:\n          if (!expect!(this.props[propName])) {\n            this.warn(`${componentName}: The prop '${propName}' expects a new format. ${message}`);\n            acc[propName] = transform!(this.props[propName], this.props);\n          } else {\n            acc[propName] = this.props[propName];\n          }\n          break;\n        case DeprTypes.MOVED_AND_FORMAT:\n          this.warn(`${componentName}: The prop '${propName}' has been moved to '${newName}' and expects a new format. ${message}`);\n          acc[newName!] = transform!(this.props[propName], this.props);\n          break;\n        default:\n          acc[propName] = this.props[propName];\n          break;\n      }\n\n      return acc;\n    }\n\n    render() {\n      const { children, ...transformedProps } = Object\n        .keys(this.props)\n        .reduce(this.transformProps, {});\n\n      return (\n        <WrappedComponent {...transformedProps as T}>\n          {this.props.children || children}\n        </WrappedComponent>\n      );\n    }\n  }\n\n  return WithDeprecatedProps;\n}\n\nexport default withDeprecatedProps;\n"],"mappings":"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"}

package/lib/help.js

@@ -1,65 +1,52 @@
 /* eslint-disable no-console */
 const chalk = require('chalk');
 
+const DESCRIPTION_PAD = 20;
+
 /**
- * Finds a command based on the given name in the commands object.
+ * Pads a description string to align with a specified offset string.
  *
- * @param {Array} commandName - The name to find the command.
- * @param {Object} commands - The object containing commands to search in.
- * @returns {Object|null} - The found command or null if the command is not found.
+ * @param {string} description - The description to pad.
+ * @param {string} offsetString - The offset string that the description should align with.
+ * @returns {string} - The padded description.
  */
-const findCommandByName = (commandName, commands) => ((commandName in commands)
-  ? { [commandName]: commands[commandName] } : null);
+function padLeft(description, offsetString) {
+  // Calculate the necessary padding based on the offsetString length
+  const padding = ' '.repeat(Math.max(0, DESCRIPTION_PAD - offsetString.length));
+  return `${padding}${description}`;
+}
 
 /**
  * Displays a help message for available commands, including descriptions, parameters, and options.
  *
  * @param {Object} commands - An object containing information about available commands.
- * @param {Array} commandArgs - An array containing the command name.
  */
-function helpCommand(commands, commandArgs) {
-  const retrievedCommands = commandArgs.length ? findCommandByName(commandArgs, commands) : commands;
-  if (!retrievedCommands) {
-    console.error(chalk.red.bold('Unknown command. Usage: paragon help <command>.'));
-    return;
-  }
-
+function helpCommand(commands) {
   console.log(chalk.yellow.bold('Paragon Help'));
   console.log();
-
-  if (!commandArgs.length) {
-    console.log('Available commands:');
-  }
-
+  console.log('Available commands:');
   console.log();
 
-  Object.entries(retrievedCommands).forEach(([command, { parameters, description, options }]) => {
-    console.log(`  ${chalk.green.underline.bold(command)}`);
+  Object.entries(commands).forEach(([command, { parameters, description, options }]) => {
+    console.log(`  ${chalk.green.bold(command)}`);
     if (description) {
-      console.log(`      ${description}`);
+      console.log(`    ${description}`);
     }
 
     if (parameters && parameters.length > 0) {
-      console.log('');
-      console.log(`      ${chalk.bold.cyan('Parameters: ')}`);
+      console.log(`    ${chalk.cyan('Parameters: ')}`);
       parameters.forEach(parameter => {
-        console.log(`      ${chalk.yellow.bold(parameter.name)} ${chalk.grey(parameter.choices ? `${parameter.choices}, Default: ${parameter.defaultValue || 'None'}` : `Default: ${parameter.defaultValue || 'None'}`)}`);
-        if (parameter.description) {
-          console.log(`          ${parameter.description}`);
-        }
-        console.log('');
+        const requiredStatus = parameter.required ? 'Required' : 'Optional';
+        const formattedDescription = padLeft(parameter.description, parameter.name);
+        console.log(`      ${parameter.name}${formattedDescription} (${requiredStatus}, Default: ${parameter.defaultValue || 'None'})`);
       });
     }
 
     if (options && options.length > 0) {
-      console.log('');
-      console.log(`      ${chalk.bold.cyan('Options: ')}`);
+      console.log(`    ${chalk.cyan('Options: ')}`);
       options.forEach(option => {
-        console.log(`      ${chalk.yellow.bold(option.name)} ${chalk.grey(option.choices ? `${option.choices}, Default: ${option.defaultValue || 'None'}` : `Default: ${option.defaultValue}`)}`);
-        if (option.description) {
-          console.log(`          ${option.description}`);
-        }
-        console.log('');
+        const formattedDescription = padLeft(option.description, option.name);
+        console.log(`      ${option.name}${formattedDescription}`);
       });
     }
 

package/lib/migrate-to-openedx-scope.js

@@ -0,0 +1,62 @@
+const fs = require('fs');
+const path = require('path');
+const chalk = require('chalk');
+
+const isValidFileExtension = (filename) => /(.jsx|.js|.tsx|.ts|.md|.rst|.scss)$/.test(filename.toLowerCase());
+
+/**
+ * Processes the content of a file by replacing occurrences of '@edx/paragon' with '@openedx/paragon'.
+ *
+ * @param {string} filePath - The path to the file to process.
+ */
+function processFileContent(filePath) {
+  const fileName = path.basename(filePath);
+
+  if (!isValidFileExtension(fileName)) {
+    return;
+  }
+
+  const fileContent = fs.readFileSync(filePath, 'utf-8');
+  const updatedContent = fileContent.replace(/@edx\/paragon/g, '@openedx/paragon');
+
+  if (fileContent !== updatedContent) {
+    fs.writeFileSync(filePath, updatedContent, 'utf-8');
+    console.log(`Updated file: ${filePath}`); // eslint-disable-line no-console
+  }
+}
+
+/**
+ * Performs a migration from "@edx/paragon" to "@openedx/paragon" NPM package name.
+ */
+function migrateToOpenEdxScopeCommand() {
+  const projectPath = process.argv[3] || path.resolve(__dirname, '../../../../');
+  const stack = [projectPath];
+
+  while (stack.length > 0) {
+    const currentDir = stack.pop();
+    const files = fs.readdirSync(currentDir);
+
+    files.forEach(file => {
+      const filePath = path.join(currentDir, file);
+      const fileStats = fs.statSync(filePath);
+
+      if (fileStats.isDirectory()) {
+        if (file === 'node_modules') {
+          return;
+        }
+
+        if (file.startsWith('.') && file !== '.' && file !== '..') {
+          return;
+        }
+
+        stack.push(filePath);
+      } else {
+        processFileContent(filePath);
+      }
+    });
+  }
+
+  console.error(`${chalk.green.bold('Paragon migration to Openedx scope completed successfully.')}`); // eslint-disable-line no-console
+}
+
+module.exports = migrateToOpenEdxScopeCommand;

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@openedx/paragon",
-  "version": "22.0.0-alpha.24",
+  "version": "22.0.0",
   "description": "Accessible, responsive UI component library based on Bootstrap.",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "license": "Apache-2.0",
-  "bin": {
-    "paragon": "./bin/paragon-scripts.js"
-  },
   "publishConfig": {
     "access": "public"
   },
+  "bin": {
+    "paragon": "./bin/paragon-scripts.js"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/openedx/paragon.git"
@@ -19,8 +19,7 @@
     "/dist",
     "/icons",
     "/src",
-    "/styles",
-    "/tokens",
+    "/scss",
     "/lib"
   ],
   "sideEffects": false,
@@ -48,35 +47,23 @@
     "build-types": "tsc --emitDeclarationOnly",
     "playroom:start": "npm run playroom:start --workspace=www",
     "playroom:build": "npm run playroom:build --workspace=www",
-    "build-tokens": "./bin/paragon-scripts.js build-tokens --build-dir ./styles/css",
-    "replace-variables-usage-with-css": "./bin/paragon-scripts.js replace-variables -p src -t usage",
-    "replace-variables-definition-with-css": "./bin/paragon-scripts.js replace-variables -p src -t definition"
+    "prepare": "husky install"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.1.1",
+    "@fortawesome/react-fontawesome": "^0.1.18",
     "@popperjs/core": "^2.11.4",
-    "axios": "^0.27.2",
     "bootstrap": "^4.6.2",
     "chalk": "^4.1.2",
     "child_process": "^1.0.2",
-    "chroma-js": "^2.4.2",
     "classnames": "^2.3.1",
-    "cli-progress": "^3.12.0",
-    "commander": "^9.4.1",
     "email-prop-type": "^3.0.0",
     "file-selector": "^0.6.0",
+    "font-awesome": "^4.7.0",
     "glob": "^8.0.3",
     "inquirer": "^8.2.5",
     "lodash.uniqby": "^4.7.0",
-    "log-update": "^4.0.0",
     "mailto-link": "^2.0.0",
-    "minimist": "^1.2.8",
-    "ora": "^5.4.1",
-    "postcss": "^8.4.21",
-    "postcss-combine-duplicated-selectors": "^10.0.3",
-    "postcss-custom-media": "^9.1.2",
-    "postcss-import": "^15.1.0",
-    "postcss-map": "^0.11.0",
-    "postcss-minify": "^1.1.0",
     "prop-types": "^15.8.1",
     "react-bootstrap": "^1.6.5",
     "react-colorful": "^5.6.1",
@@ -89,8 +76,6 @@
     "react-responsive": "^8.2.0",
     "react-table": "^7.7.0",
     "react-transition-group": "^4.4.2",
-    "sass": "^1.58.3",
-    "style-dictionary": "^3.7.1",
     "tabbable": "^5.3.3",
     "uncontrollable": "^7.2.1",
     "uuid": "^9.0.0"
@@ -109,7 +94,6 @@
     "@babel/preset-env": "^7.16.8",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
-    "@edx/browserslist-config": "^1.2.0",
     "@edx/eslint-config": "^3.2.0",
     "@edx/stylelint-config-edx": "^2.3.0",
     "@edx/typescript-config": "^1.0.1",
@@ -127,6 +111,7 @@
     "@types/uuid": "^9.0.0",
     "@typescript-eslint/eslint-plugin": "^5.22.0",
     "@typescript-eslint/parser": "^5.22.0",
+    "axios": "^0.27.2",
     "axios-mock-adapter": "^1.21.1",
     "babel-jest": "^28.1.2",
     "babel-loader": "^8.2.4",
@@ -143,11 +128,13 @@
     "jest": "^28.1.3",
     "jest-cli": "^28.1.2",
     "jest-environment-jsdom": "^28.1.2",
+    "lint-staged": "^15.2.0",
     "markdown-loader-jest": "^0.1.1",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
     "react-test-renderer": "^17.0.0",
     "regenerator-runtime": "^0.13.9",
+    "sass": "^1.32.13",
     "semantic-release": "^20.1.3",
     "stylelint": "^14.7.1",
     "stylelint-config-standard-scss": "^4.0.0",
@@ -188,16 +175,16 @@
       "/component-generator/"
     ],
     "transformIgnorePatterns": [
-      "/node_modules/(?!(@edx/paragon)/).*/"
+      "/node_modules/(?!(@openedx/paragon)/).*/"
     ]
   },
-  "browserslist": [
-    "extends @edx/browserslist-config"
-  ],
-  "husky": {
-    "hooks": {
-      "pre-commit": "npm run lint"
-    }
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": [
+      "npx eslint"
+    ],
+    "*.scss": [
+      "npx stylelint"
+    ]
   },
   "workspaces": [
     "example",

package/{styles/scss → scss}/core/_functions.scss

@@ -1,4 +1,4 @@
-@import "./bootstrap-override/functions";
+@import "~bootstrap/scss/functions";
 
 //
 // BOOTSTRAP FUNCTION OVERRIDE

package/scss/core/_grid.scss

@@ -0,0 +1,21 @@
+@import "~bootstrap/scss/grid";
+
+.container-mw-xs {
+  max-width: $max-width-xs + $grid-gutter-width !important;
+}
+
+.container-mw-sm {
+  max-width: $max-width-sm + $grid-gutter-width !important;
+}
+
+.container-mw-md {
+  max-width: $max-width-md + $grid-gutter-width !important;
+}
+
+.container-mw-lg {
+  max-width: $max-width-lg + $grid-gutter-width !important;
+}
+
+.container-mw-xl {
+  max-width: $max-width-xl + $grid-gutter-width !important;
+}

package/{styles/scss → scss}/core/_utilities.scss

@@ -1,25 +1,19 @@
-// explicitly import bootstrap's utility module to exclude some modules which do not work
-// with CSS variables, they are instead overriden by Paragon
-@import "~bootstrap/scss/utilities/align";
-@import "~bootstrap/scss/utilities/clearfix";
-@import "~bootstrap/scss/utilities/display";
-@import "~bootstrap/scss/utilities/embed";
-@import "~bootstrap/scss/utilities/flex";
-@import "~bootstrap/scss/utilities/float";
-@import "~bootstrap/scss/utilities/interactions";
-@import "~bootstrap/scss/utilities/overflow";
-@import "~bootstrap/scss/utilities/position";
-@import "~bootstrap/scss/utilities/screenreaders";
-@import "~bootstrap/scss/utilities/shadows";
-@import "~bootstrap/scss/utilities/sizing";
-@import "~bootstrap/scss/utilities/stretched-link";
-@import "~bootstrap/scss/utilities/visibility";
-@import "./bootstrap-override/utilities";
+@import "~bootstrap/scss/utilities";
 
 // Add background, border, and text color utilities
 // for all theme color levels.
 $color-levels: 100, 200, 300, 400, 500, 600, 700, 800, 900;
 
+@each $color, $value in $theme-colors {
+  @each $level in $color-levels {
+    @include bg-variant(".bg-#{$color}-#{$level}", theme-color($color, $level), true);
+    @include text-emphasis-variant(".text-#{$color}-#{$level}", theme-color($color, $level), true);
+    .border-#{$color}-#{$level} {
+      border-color: theme-color($color, $level) !important;
+    }
+  }
+}
+
 .x-small {
   font-size: $x-small-font-size;
 }