sync release-22.x -> release-23.x (React 18 support)

.stylelintrc.json

@@ -32,6 +32,13 @@
     }],
     "alpha-value-notation": "number",
     "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,
     "value-keyword-case": ["lower", {
       "ignoreProperties": ["/font-family/"]
     }],

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\>
 
 
 

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": {
     ".": {

netlify.toml

@@ -4,3 +4,7 @@
   environment = { SEGMENT_KEY = "", NODE_VERSION = "18.16.0" }
 [functions]
   directory = "www/netlify/functions"
+[[headers]]
+  for = "/*"
+  [headers.values]
+    Content-Security-Policy = "frame-ancestors *;"