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.

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

feat: upgrade React to v18 #420

Merged
merged 3 commits into from
Dec 19, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
15 changes: 7 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,22 +23,21 @@ Here is a quick example to get you started:
**./App.js**
```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { createRoot } from 'react-dom/client';

import CustomComponent from './CustomComponent';

import '@ichef/gypcrete/dist/gypcrete.css';

const App = () => (
<div>
<CustomComponent />
</div>
<div>
<CustomComponent />
</div>
);

ReactDOM.render(
<App />,
document.getElementById('app')
);
const container = document.getElementById('app');
const root = createRoot(container);
root.render(<App />);
```

**./CustomComponent.js**
Expand Down
2 changes: 1 addition & 1 deletion configs/jestSetup.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/* eslint-disable import/no-extraneous-dependencies */
import Enzyme from 'enzyme';
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
import Adapter from '@cfaester/enzyme-adapter-react-18';
import '@testing-library/jest-dom';

Enzyme.configure({ adapter: new Adapter() });
14 changes: 7 additions & 7 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -35,14 +35,14 @@
"@babel/plugin-proposal-class-properties": "^7.4.4",
"@babel/plugin-transform-runtime": "^7.4.4",
"@babel/preset-env": "^7.4.4",
"@babel/preset-react": "^7.0.0",
"@babel/preset-react": "^7.23.3",
"@babel/runtime": "^7.4.4",
"@babel/runtime-corejs3": "^7.4.4",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^12.1.5",
"@testing-library/react": "^13.4.0",
"@testing-library/react-hooks": "^7.0.2",
"@testing-library/user-event": "^13.5.0",
"@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
"@cfaester/enzyme-adapter-react-18": "^0.7.1",
"autoprefixer": "^9.6.1",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
Expand All @@ -54,7 +54,7 @@
"core-js": "^3.1.1",
"coveralls": "^3.0.0",
"css-loader": "^6.8.1",
"enzyme": "^3.7.0",
"enzyme": "^3.11.0",
"eslint": "7.8",
"eslint-config-airbnb": "18.2",
"eslint-config-ichef": "8.0",
Expand All @@ -72,9 +72,9 @@
"mini-css-extract-plugin": "^2.7.6",
"postcss-loader": "^7.3.3",
"prop-types": "^15.6.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-test-renderer": "^17.0.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-test-renderer": "^18.2.0",
"sass": "^1.69.5",
"sass-loader": "^13.3.2",
"style-loader": "^3.3.3",
Expand Down
10 changes: 5 additions & 5 deletions packages/core/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,8 @@
"peerDependencies": {
"@babel/runtime-corejs3": "^7.4.4",
"prop-types": "^15.5.8",
"react": "^17.0.2",
"react-dom": "^17.0.2"
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"dependencies": {
"classnames": "^2.2.5",
Expand All @@ -48,11 +48,11 @@
"devDependencies": {
"@babel/cli": "^7.4.4",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^12.1.5",
"@testing-library/react": "^13.4.0",
"@testing-library/react-hooks": "^7.0.2",
"@testing-library/user-event": "^13.5.0",
"enzyme": "^3.7.0",
"react-is": "^17.0.2",
"enzyme": "^3.11.0",
"react-is": "^18.2.0",
"webpack": "^5.89.0",
"webpack-merge": "^4.1.2"
}
Expand Down
5 changes: 2 additions & 3 deletions packages/core/src/__tests__/Avatar.test.js
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { render } from '@testing-library/react';
import { shallow } from 'enzyme';

import Avatar from '../Avatar';

describe('<Avatar>', () => {
it('renders without crashing', () => {
const div = document.createElement('div');
const element = <Avatar src="LINK" alt="ALT" />;

ReactDOM.render(element, div);
render(element);
});

it('handles type modifiers', () => {
Expand Down
5 changes: 2 additions & 3 deletions packages/core/src/__tests__/BasicRow.test.js
Original file line number Diff line number Diff line change
@@ -1,21 +1,20 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { render } from '@testing-library/react';
import { shallow } from 'enzyme';

import BasicRow from '../BasicRow';
import StatusIcon from '../StatusIcon';
import Tag from '../Tag';

it('renders without crashing', () => {
const div = document.createElement('div');
const element = (
<BasicRow
basic="Basic text"
tag="Tag"
/>
);

ReactDOM.render(element, div);
render(element);
});

it('renders with only Basic text', () => {
Expand Down
5 changes: 2 additions & 3 deletions packages/core/src/__tests__/Button.test.js
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { render } from '@testing-library/react';
import { shallow } from 'enzyme';

import Button, { PureButton } from '../Button';

describe('rowComp(Button)', () => {
it('renders without crashing', () => {
const div = document.createElement('div');
const element = <Button basic="label" />;

ReactDOM.render(element, div);
render(element);
});

it('is minified by default', () => {
Expand Down
5 changes: 2 additions & 3 deletions packages/core/src/__tests__/Checkbox.test.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { render } from '@testing-library/react';
import { shallow, mount } from 'enzyme';

import Checkbox, { PureCheckbox, BEM } from '../Checkbox';
Expand All @@ -10,10 +10,9 @@ function BarButton() {

describe('rowComp(Checkbox)', () => {
it('renders without crashing', () => {
const div = document.createElement('div');
const element = <Checkbox basic="Basic text" />;

ReactDOM.render(element, div);
render(element);
});
});

Expand Down
5 changes: 2 additions & 3 deletions packages/core/src/__tests__/ColumnView.test.js
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { render } from '@testing-library/react';
import { shallow } from 'enzyme';

import ColumnView, { BEM as COLUMN_BEM } from '../ColumnView';

describe('<ColumnView>', () => {
it('renders without crashing', () => {
const div = document.createElement('div');
const element = <ColumnView>Foo bar</ColumnView>;

ReactDOM.render(element, div);
render(element);
});

it('renders childen in a body wrapper', () => {
Expand Down
5 changes: 2 additions & 3 deletions packages/core/src/__tests__/EditableText.test.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { render } from '@testing-library/react';
import { shallow } from 'enzyme';

import EditableBasicRow from '../EditableBasicRow';
Expand All @@ -8,10 +8,9 @@ import { PureText } from '../Text';

describe('withStatus(EditableText)', () => {
it('renders without crashing', () => {
const div = document.createElement('div');
const element = <EditableText />;

ReactDOM.render(element, div);
render(element);
});
});

Expand Down
5 changes: 2 additions & 3 deletions packages/core/src/__tests__/FlexCell.test.js
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { render } from '@testing-library/react';
import FlexCell from '../FlexCell';

it('renders without crashing', () => {
const div = document.createElement('div');
const element = (
<FlexCell>
<h1>Hello World</h1>
</FlexCell>
);

ReactDOM.render(element, div);
render(element);
});
5 changes: 2 additions & 3 deletions packages/core/src/__tests__/HeaderRow.test.js
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { render } from '@testing-library/react';
import { shallow } from 'enzyme';

import HeaderRow, { HeaderArea } from '../HeaderRow';

it('renders without crashing', () => {
const div = document.createElement('div');
const element = <HeaderRow left="Left" center="Title" right="Right" />;

ReactDOM.render(element, div);
render(element);
});

describe('<HeaderArea> helper component', () => {
Expand Down
5 changes: 2 additions & 3 deletions packages/core/src/__tests__/Icon.test.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { render } from '@testing-library/react';
import Icon from '../Icon';

it('renders without crashing', () => {
const div = document.createElement('div');
const element = <Icon type="duplicate" />;

ReactDOM.render(element, div);
render(element);
});
5 changes: 2 additions & 3 deletions packages/core/src/__tests__/IconButton.test.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { render } from '@testing-library/react';
import { shallow } from 'enzyme';

import Button from '../Button';
Expand All @@ -8,10 +8,9 @@ import IconLayout from '../IconLayout';

describe('<IconButton>', () => {
it('renders without crashing', () => {
const div = document.createElement('div');
const element = <IconButton icon="printer" status="loading" />;

ReactDOM.render(element, div);
render(element);
});

it('renders as a custom-configured variant of <Button>', () => {
Expand Down
5 changes: 2 additions & 3 deletions packages/core/src/__tests__/IconCheckbox.test.js
Original file line number Diff line number Diff line change
@@ -1,16 +1,15 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { render } from '@testing-library/react';
import { shallow } from 'enzyme';

import Checkbox, { CHECKBOX_BUTTON } from '../Checkbox';
import IconCheckbox from '../IconCheckbox';
import IconLayout from '../IconLayout';

it('renders without crashing', () => {
const div = document.createElement('div');
const element = <IconCheckbox status="loading" />;

ReactDOM.render(element, div);
render(element);
});

it('renders as a custom-configured, minified variant of <Checkbox>', () => {
Expand Down
5 changes: 2 additions & 3 deletions packages/core/src/__tests__/IconLayout.test.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { render } from '@testing-library/react';
import { shallow } from 'enzyme';

import Tooltip from '../Tooltip';
Expand All @@ -9,10 +9,9 @@ import StatusIcon from '../StatusIcon';

describe('<withStatus(IconLayout)>', () => {
it('renders without crashing', () => {
const div = document.createElement('div');
const element = <IconLayout icon="printer" />;

ReactDOM.render(element, div);
render(element);
});

it('receives props from withStatus() mixin', () => {
Expand Down
5 changes: 2 additions & 3 deletions packages/core/src/__tests__/InfiniteScroll.test.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { render } from '@testing-library/react';
import { shallow, mount } from 'enzyme';

import InfiniteScroll, { BEM } from '../InfiniteScroll';
Expand All @@ -18,14 +18,13 @@ const FAKE_LIST = (

describe('InfiniteScroll', () => {
it('renders without crashing', () => {
const div = document.createElement('div');
const element = (
<InfiniteScroll onLoadMore={() => {}}>
{FAKE_LIST}
</InfiniteScroll>
);

ReactDOM.render(element, div);
render(element);
});

// -------------------------------------
Expand Down
5 changes: 2 additions & 3 deletions packages/core/src/__tests__/List.test.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { render } from '@testing-library/react';
import { shallow, mount } from 'enzyme';

import List from '../List';
Expand All @@ -8,10 +8,9 @@ import Section from '../Section';
import ListSpacingContext from '../contexts/listSpacing';

it('renders without crashing', () => {
const div = document.createElement('div');
const element = <List title="Title">Hello world</List>;

ReactDOM.render(element, div);
render(element);
});

it('consumes context to render a <Section> with spacing configs', () => {
Expand Down
5 changes: 2 additions & 3 deletions packages/core/src/__tests__/ListRow.test.js
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { render } from '@testing-library/react';
import { shallow } from 'enzyme';

import ListRow, { BEM as ROW_BEM } from '../ListRow';
import ListSpacingContext from '../contexts/listSpacing';

it('renders without crashing', () => {
const div = document.createElement('div');
const element = <ListRow>Hello world</ListRow>;

ReactDOM.render(element, div);
render(element);
});

it('renders a <li> element with class name of root wrapper', () => {
Expand Down
Loading
Loading