Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enable support for React 18, bump Gatsby to v5 #3367

Open
wants to merge 6 commits into
base: release-22.x
Choose a base branch
from
Open

Enable support for React 18, bump Gatsby to v5 #3367

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
eef43be
feat: bump packages to support React 18
bradenmacdonald Jan 16, 2025
6bcebea
chore: changes to migrate to gatsby-plugin-mdx v5
bradenmacdonald Jan 16, 2025
d42688c
fix: Gatsby webpack conflicts b/w e.g. 'useToggle.tsx' and 'useToggle…
bradenmacdonald Jan 16, 2025
6e40e44
chore: address/ignore SCSS warnings from upgraded sass + stylelint
bradenmacdonald Jan 16, 2025
84ddd73
test: update test cases (@testing-library/react bumped from v12 to v16)
bradenmacdonald Jan 16, 2025
271ef2e
chore: minor example/typescript/eslint updates for React 18 bump
bradenmacdonald Jan 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion .stylelintrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
}
4 changes: 2 additions & 2 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -802,8 +802,8 @@ The following subcomponents have been added / reworked:

* fix: update image sizing according to figma design

Co-authored-by: vlasovmichael <[email protected]>
Co-authored-by: vzadorozhnii <[email protected]>
Co-authored-by: vlasovmichael \<[email protected]\>
Co-authored-by: vzadorozhnii \<[email protected]\>



Expand Down
2 changes: 2 additions & 0 deletions build-scss.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
6 changes: 6 additions & 0 deletions example/.eslintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
module.exports = {
extends: [
'@edx/eslint-config',
],
root: true, // Don't also import the paragon eslint config in the parent directory.
};
10 changes: 3 additions & 7 deletions example/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[clarification] Why is @edx/frontend-build moved to a regular dependency vs. keeping it as a dev dependency?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is for the example MFE (not Paragon itself), and I'm following the best practice I established for MFEs that "dependencies" are what you need to build it (before deploying), and "devDependencies" are for development-only things like tests and linting.

If we had a part of the MFE that runs on the server, it would be different, but there's no server-side code here.

"@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"
}
}
4 changes: 2 additions & 2 deletions example/src/MyComponent.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -26,6 +26,6 @@ const MyComponent = () => {
</Form>
</Container>
);
};
}

export default MyComponent;
3 changes: 0 additions & 3 deletions example/src/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,3 @@
import 'core-js/stable';
import 'regenerator-runtime/runtime';

import React from 'react';
import ReactDOM from 'react-dom';
import {
Expand Down
2 changes: 1 addition & 1 deletion icons/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
"bootstrap-icons": "^1.11.3"
},
"peerDependencies": {
"react": "^16.8.6 || ^17.0.2"
"react": "^16.8.6 || ^17 || ^18"
},
"exports": {
".": {
Expand Down
4 changes: 4 additions & 0 deletions netlify.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 *;"
Loading
Loading