Enable support for React 18, bump Gatsby to v5

.stylelintrc.json

@@ -31,6 +31,13 @@
       "ignoreProperties": ["xs", "sm", "md", "lg", "xl", "xxl"]
     }],
     "alpha-value-notation": "number",
-    "color-function-notation": "legacy"
+    "color-function-notation": "legacy",
+    "import-notation": "string",
+    "at-rule-empty-line-before": ["always", {
+      "except": ["blockless-after-same-name-blockless", "first-nested"],
+      "ignore": ["after-comment"],
+      "ignoreAtRules": ["import"]
+    }],
+    "declaration-block-no-redundant-longhand-properties": null
   }
 }

CHANGELOG.md

@@ -802,8 +802,8 @@ The following subcomponents have been added / reworked:
 
 * fix: update image sizing according to figma design
 
-Co-authored-by: vlasovmichael <mykhailo.vlasov@raccoongang.com>
-Co-authored-by: vzadorozhnii <vladyslav.zadorozhnii@raccoongang.com>
+Co-authored-by: vlasovmichael \<mykhailo.vlasov@raccoongang.com\>
+Co-authored-by: vzadorozhnii \<vladyslav.zadorozhnii@raccoongang.com\>
 
 
 

build-scss.js

@@ -18,6 +18,8 @@ var coreResult = sass.renderSync({
   file: './scss/core/core.scss',
   outputStyle: 'compressed',
   importer: tildaImporter,
+  // For now we can't resolve these warnings as we need to upgrade our 'bootstrap' dependency to do so:
+  silenceDeprecations: ['abs-percent', 'color-functions', 'import', 'mixed-decls', 'global-builtin'],
 });
 
 fs.writeFileSync('./dist/paragon.css', coreResult.css);

example/.eslintrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  extends: [
+    '@edx/eslint-config',
+  ],
+  root: true, // Don't also import the paragon eslint config in the parent directory.
+};

example/package.json

@@ -17,14 +17,10 @@
   "license": "ISC",
   "dependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-platform": "^4.2.0",
+    "@edx/frontend-build": "^13.0.14",
+    "@edx/frontend-platform": "^8",
     "@faker-js/faker": "^7.6.0",
-    "core-js": "^3.22.2",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "regenerator-runtime": "^0.13.9"
-  },
-  "devDependencies": {
-    "@edx/frontend-build": "^12.8.10"
+    "react-dom": "^17.0.2"
   }
 }

example/src/MyComponent.jsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { Button, Form, Icon, Bubble, Stack, Container } from '@openedx/paragon'; // eslint-disable-line
 import { FavoriteBorder } from '@openedx/paragon/icons'; // eslint-disable-line
 
-const MyComponent = () => {
+function MyComponent() {
   const [value, setValue] = useState('');
   const handleChange = (e) => setValue(e.target.value);
   const handleClick = () => alert('Form is submitted!'); // eslint-disable-line no-alert
@@ -26,6 +26,6 @@ const MyComponent = () => {
       </Form>
     </Container>
   );
-};
+}
 
 export default MyComponent;

example/src/index.jsx

@@ -1,6 +1,3 @@
-import 'core-js/stable';
-import 'regenerator-runtime/runtime';
-
 import React from 'react';
 import ReactDOM from 'react-dom';
 import {

icons/package.json

@@ -21,7 +21,7 @@
     "bootstrap-icons": "^1.11.3"
   },
   "peerDependencies": {
-    "react": "^16.8.6 || ^17.0.2"
+    "react": "^16.8.6 || ^17 || ^18"
   },
   "exports": {
     ".": {