Updating to react 18 (#305)

* updating-to-react-18 wip Need to get tests to pass with new api (app root etc) * ci: version bump to 2.0.0 * upgrading-to-react-18 Updated types and and other versions in package.json upgrading-to-react-18 * ci: version bump to 2.0.1 * upgrading-to-react-18 removed extra spaces * ci: version bump to 2.0.2 * upgrading-to-react-18 Adjusted imports / types along with new test search naming for combobox * ci: version bump to 2.1.0 * upgrading-to-react-18 upgraded emotion for pipeline * ci: version bump to 2.1.1 * upgrading-to-react-18 upgraded emotion and react router dom * ci: version bump to 2.1.2 * upgrading-to-react-18 trying other versions * ci: version bump to 2.1.3 * upgrading-to-react-18 dependency test * ci: version bump to 2.1.4 * upgrading-to-react-18 version test * ci: version bump to 2.1.5 * upgrading-to-react-18 removed dependency / removed previous testing version * ci: version bump to 2.1.6 * 2.1.7-rc.0 * ci: version bump to 2.1.7 * 2.1.8-rc.0 * upgrading-to-react-18 RELEASE * ci: version bump to 2.1.8-rc.1 * upgrading-to-react-18 RELEASE --------- Co-authored-by: Automated Version Bump <gh-action-bump-version@users.noreply.github.com>
woven-planet · Feb 28, 2023 · e9c66fb · e9c66fb
1 parent 83f47f9
commit e9c66fb
Show file tree

Hide file tree

Showing 36 changed files with 3,789 additions and 3,157 deletions.
diff --git a/README.md b/README.md
@@ -32,14 +32,14 @@ import { theme } from '@toyota-research-institute/lakefront';
 Here is a quick example to get you started, **it's all you need**:
 
 ```jsx
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { Button } from '@toyota-research-institute/lakefront';
 
 function App() {
     return <Button>Hello World</Button>;
 }
 
-ReactDOM.render(<App />, document.querySelector('#app'));
+createRoot.render(<App />, document.querySelector('#app'));
 
 ```
 ## Contributing

diff --git a/index.js b/index.js
@@ -26,7 +26,7 @@ function readReadMe() {
     } else {
         generateReadMe(true);
     }
-};
+}
 
 function generateReadMe(rightColumn) {
     fs.readFile(MUSTACHE_MAIN_DIR, (err, data) => {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@toyota-research-institute/lakefront",
   "description": "React UI Components",
-  "version": "1.1.2",
+  "version": "2.1.8-rc.1",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "homepage": "https://github.com/ToyotaResearchInstitute/lakefront",
@@ -27,52 +27,51 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@emotion/react": "^11.1.5",
-    "@emotion/styled": "^11.1.5",
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
     "copyfiles": "^2.4.1",
     "d3-selection": "^3.0.0",
-    "d3-shape": "^3.0.1",
+    "d3-shape": "^3.2.0",
     "d3-zoom": "^3.0.0",
     "dagre-d3": "^0.6.4",
     "mustache": "^4.2.0",
     "query-string": "^7.0.0",
-    "ramda": "^0.27.1",
-    "react-router-dom": "^5.1.2",
-    "react-select": "^4.3.1",
-    "react-table": "^7.7.0",
-    "uuid": "^8.3.2"
+    "ramda": "^0.28.0",
+    "react-router-dom": "^6.8.1",
+    "react-select": "^5.7.0",
+    "react-table": "^7.8.0",
+    "uuid": "^9.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.13.10",
     "@babel/preset-env": "^7.13.10",
     "@babel/preset-react": "^7.12.13",
     "@babel/preset-typescript": "^7.13.0",
-    "@emotion/jest": "^11.2.1",
-    "@emotion/react": "^11.1.5",
-    "@emotion/styled": "^11.1.5",
-    "@react-theming/storybook-addon": "^1.1.6",
-    "@storybook/addon-actions": "^6.5.9",
-    "@storybook/addon-docs": "^6.5.9",
-    "@storybook/addon-essentials": "^6.5.9",
-    "@storybook/addon-links": "^6.5.9",
-    "@storybook/react": "^6.5.9",
+    "@emotion/jest": "^11.10.5",
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "@react-theming/storybook-addon": "^1.1.10",
+    "@storybook/addon-actions": "^6.5.16",
+    "@storybook/addon-docs": "^6.5.16",
+    "@storybook/addon-essentials": "^6.5.16",
+    "@storybook/addon-links": "^6.5.16",
+    "@storybook/react": "^6.5.16",
     "@svgr/rollup": "^5.5.0",
     "@svgr/webpack": "^5.5.0",
     "@testing-library/jest-dom": "^5.11.9",
-    "@testing-library/react": "^11.2.5",
-    "@testing-library/react-hooks": "^7.0.0",
-    "@testing-library/user-event": "^13.5.0",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
     "@types/d3-selection": "^3.0.1",
     "@types/d3-shape": "^3.0.2",
     "@types/d3-zoom": "^3.0.1",
     "@types/dagre-d3": "^0.6.3",
-    "@types/jest": "^26.0.20",
-    "@types/ramda": "^0.27.64",
-    "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.1",
-    "@types/react-router-dom": "^5.1.0",
-    "@types/react-select": "^4.0.17",
-    "@types/react-table": "^7.7.9",
+    "@types/jest": "^27.4.1",
+    "@types/ramda": "^0.28.23",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.11",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/react-select": "^5.0.1",
+    "@types/react-table": "^7.7.14",
     "@types/uuid": "^8.3.1",
     "@typescript-eslint/eslint-plugin": "^4.23.0",
     "@typescript-eslint/parser": "^4.23.0",
@@ -83,8 +82,8 @@
     "eslint-plugin-react": "^7.23.2",
     "jest": "^26.6.3",
     "jest-canvas-mock": "^2.3.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "rollup": "^2.63.0",
     "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-terser": "^7.0.2",
@@ -95,15 +94,15 @@
     "url-loader": "^4.1.1"
   },
   "peerDependencies": {
-    "@emotion/react": "^11.1.5",
-    "@emotion/styled": "^11.1.5",
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
     "d3-selection": "^3.0.0",
     "d3-shape": "^3.0.1",
     "d3-zoom": "^3.0.0",
     "dagre-d3": "^0.6.4",
-    "ramda": "^0.27.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "ramda": "^0.28.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "files": [
     "dist"

diff --git a/src/components/Breadcrumb/BreadcrumbHeader.tsx b/src/components/Breadcrumb/BreadcrumbHeader.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 
 import Breadcrumb, { RouteProp } from './Breadcrumb';
 import { Container, Content } from './breadcrumbStyles';
@@ -22,6 +22,10 @@ export interface BreadcrumbHeaderProps {
      * If set to true, this will not display any routes. 
      */
     hideRoutes?: boolean;
+    /**
+     * Children to display as the content.
+     */
+    children?: ReactNode
 }
 
 /**

diff --git a/src/components/Button/buttonUtil.tsx b/src/components/Button/buttonUtil.tsx
@@ -1,4 +1,4 @@
-import React, { ComponentPropsWithoutRef, ElementType, ReactElement } from 'react';
+import React, { ComponentPropsWithoutRef, ElementType, ReactElement, ReactNode } from 'react';
 import { SerializedStyles } from '@emotion/react';
 import { ReactComponent as Add } from './assets/add.svg';
 import { ReactComponent as Delete } from './assets/delete.svg';
@@ -63,6 +63,10 @@ export interface IconComponentProps {
      * (Future) When a string, an icon lookup/conversion will be attempted.
      */
     icon?: Icon;
+    /**
+     * When provided will display next to icon.
+     */
+    children?: ReactNode;
     /**
      * When icon is defined, the position can be specified via the iconPosition prop.
      */

diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
@@ -17,6 +17,10 @@ export interface CardProps {
     * Description of the card's intent.
     */
     description?: string;
+    /**
+     * Display content as a child node.
+     */
+    children?: ReactNode;
     /**
     * This takes in any ReactNode to be displayed in the main content area of the card.
     */

diff --git a/src/components/Drawer/Drawer.tsx b/src/components/Drawer/Drawer.tsx
@@ -1,11 +1,15 @@
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import { DrawerContainer } from './drawerStyles';
 import theme from 'src/styles/theme';
 import { ThemeProvider } from '@emotion/react';
 import Button from 'src/components/Button/Button';
 import { ReactComponent as CloseIcon } from './assets/closeIcon.svg';
 
 export interface DrawerProps {
+    /**
+     * Children to display below the containers close button.
+     */
+    children?: ReactNode;
     /**
      * This is the initial display state of the component. When true, the drawer will be displayed.
      * When false, the drawer will be hidden.

diff --git a/src/components/Filter/modules/DoubleMultiSelectFilter/__tests__/doubleMultiSelect.test.js b/src/components/Filter/modules/DoubleMultiSelectFilter/__tests__/doubleMultiSelect.test.js
@@ -59,7 +59,7 @@ describe('DoubleMultiSelect', () => {
     });
 
     it('should add a value to each multi select', () => {
-        const { container, getByText } = render(
+        const { container } = render(
             <DoubleMultiSelect value={defaultValues} onChange={onChange} options={defaultOptions} />
         );
 
@@ -71,13 +71,11 @@ describe('DoubleMultiSelect', () => {
 
         fireEvent.change(firstSelect, { target: { value: 'a' } });
         fireEvent.keyDown(wrapper, { key: 'Enter', code: 'Enter' });
-
         fireEvent.mouseDown(wrapper);
 
         fireEvent.change(secondSelect, { target: { value: 'b' } });
         fireEvent.keyDown(wrapper, { key: 'Enter', code: 'Enter' });
-
-        getByText('a');
-        getByText('b');
+        expect(firstSelect['value']).toBe('a');
+        expect(secondSelect['value']).toBe('b');
     });
 });
diff --git a/src/components/Filter/modules/DurationFilter/__tests__/MinMaxFilter.tests.jsx b/src/components/Filter/modules/DurationFilter/__tests__/MinMaxFilter.tests.jsx
@@ -1,4 +1,4 @@
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { fireEvent, screen, waitFor, render } from '@testing-library/react';
 import MinMaxInput from '../MinMaxInput';
 
 describe('<MinMaxInput />', () => {

diff --git a/src/components/Filter/modules/MultiSelectFilter/MultiSelect.tsx b/src/components/Filter/modules/MultiSelectFilter/MultiSelect.tsx
@@ -1,13 +1,15 @@
 import { Component } from 'react';
 
-import Select, { InputProps, OptionsType } from 'react-select';
+import Select from 'react-select';
 import CreatableSelect from 'react-select/creatable';
 import { SelectOption } from 'src/types/global';
 import { MULTI_SELECT_STYLES } from './multiSelectStyles';
 import { createUniqueOptions, getUniqueOptions, parseItems } from './multiSelectUtil';
 import { ThemeProvider } from '@emotion/react';
 import theme from 'src/styles/theme';
 import MultiValueInput from './MultiValueInput';
+import { GroupBase, OnChangeValue } from 'react-select/dist/declarations/src/types';
+import { SelectComponents } from 'react-select/dist/declarations/src/components';
 
 export type MultiSelectOption = SelectOption<string>;
 
@@ -51,7 +53,7 @@ export class MultiSelect extends Component<MultiSelectProps, MultiSelectState> {
         };
     }
 
-    handleChange = (selectedOptions: MultiSelectOption[] | OptionsType<MultiSelectOption> | null) => {
+    handleChange = (selectedOptions: OnChangeValue<MultiSelectOption, true> | null) => {
         const items = selectedOptions ? selectedOptions.map((option: MultiSelectOption) => option.value) : [];
         this.setState({ selected: items });
         this.props.selectItem(items);
@@ -103,9 +105,9 @@ export class MultiSelect extends Component<MultiSelectProps, MultiSelectState> {
             }
             : {};
 
-        const parseMultiValueComponents = delimiter
+        const parseMultiValueComponents: Partial<SelectComponents<unknown, true, GroupBase<unknown>>> | undefined = delimiter
             ? {
-                Input: (props: Omit<InputProps, 'theme'>) => (
+                Input: (props) => (
                     <MultiValueInput {...props} handleCreate={this.handleCreate} />
                 )
             }
@@ -124,13 +126,14 @@ export class MultiSelect extends Component<MultiSelectProps, MultiSelectState> {
                         isMulti
                         name={title}
                         placeholder={placeholder}
-                        onChange={this.handleChange}
+                        onChange={(value) => this.handleChange(value as MultiSelectOption[])}
                         onCreateOption={this.handleCreate}
                         options={this.state.items}
                         styles={MULTI_SELECT_STYLES}
                         theme={(defaultTheme) => ({
                             ...defaultTheme,
                             colors: {
+                                ...defaultTheme.colors,
                                 ...theme.colors,
                                 primary: theme.colors.white,
                                 primary25: theme.colors.mercury,
@@ -151,6 +154,7 @@ export class MultiSelect extends Component<MultiSelectProps, MultiSelectState> {
                         theme={(defaultTheme) => ({
                             ...defaultTheme,
                             colors: {
+                                ...defaultTheme.colors,
                                 ...theme.colors,
                                 primary: theme.colors.white,
                                 primary25: theme.colors.mercury,

diff --git a/src/components/Filter/modules/MultiSelectFilter/MultiValueInput.tsx b/src/components/Filter/modules/MultiSelectFilter/MultiValueInput.tsx
@@ -1,6 +1,6 @@
 import { ClipboardEvent, FC } from 'react';
-import { InputProps } from 'react-select';
 import { MultiValueInputContainer, StyledMultiValueInput } from './multiSelectStyles';
+import { InputProps } from 'src/components/Input/Input';
 
 interface MultiValueInputProps {
     handleCreate: (item: string) => void;

diff --git a/src/components/Filter/modules/MultiSelectFilter/__tests__/multiSelect.test.js b/src/components/Filter/modules/MultiSelectFilter/__tests__/multiSelect.test.js
@@ -31,7 +31,7 @@ describe('MultiSelect', () => {
             />
         );
 
-        fireEvent.mouseDown(getByRole('textbox'));
+        fireEvent.mouseDown(getByRole('combobox'));
 
         for (const option of MULTI_SELECT_FILTER_OPTIONS) {
             getByText(option.label);
@@ -52,14 +52,14 @@ describe('MultiSelect', () => {
             />
         );
 
-        fireEvent.mouseDown(getByRole('textbox'));
+        fireEvent.mouseDown(getByRole('combobox'));
         expect(queryByText(newOption)).not.toBeInTheDocument();
 
-        fireEvent.change(getByRole('textbox'), { target: { value: newOption } });
-        fireEvent.keyDown(getByRole('textbox'), { key: 'Enter', code: 'Enter' });
+        fireEvent.change(getByRole('combobox'), { target: { value: newOption } });
+        fireEvent.keyDown(getByRole('combobox'), { key: 'Enter', code: 'Enter' });
         // Make sure to clear input text
-        fireEvent.change(getByRole('textbox'), { target: { value: '' } });
-        fireEvent.mouseDown(getByRole('textbox'));
+        fireEvent.change(getByRole('combobox'), { target: { value: '' } });
+        fireEvent.mouseDown(getByRole('combobox'));
 
         expect(queryByText('option Create "newOption", selected.'));
     });
@@ -77,14 +77,14 @@ describe('MultiSelect', () => {
             />
         );
 
-        fireEvent.mouseDown(getByRole('textbox'));
+        fireEvent.mouseDown(getByRole('combobox'));
         expect(queryByText(newOption)).not.toBeInTheDocument();
 
-        fireEvent.change(getByRole('textbox'), { target: { value: newOption } });
-        fireEvent.keyDown(getByRole('textbox'), { key: 'Enter', code: 'Enter' });
+        fireEvent.change(getByRole('combobox'), { target: { value: newOption } });
+        fireEvent.keyDown(getByRole('combobox'), { key: 'Enter', code: 'Enter' });
         // Make sure to clear input text
-        fireEvent.change(getByRole('textbox'), { target: { value: '' } });
-        fireEvent.mouseDown(getByRole('textbox'));
+        fireEvent.change(getByRole('combobox'), { target: { value: '' } });
+        fireEvent.mouseDown(getByRole('combobox'));
 
         expect(queryByText(newOption)).not.toBeInTheDocument();
     });
@@ -103,8 +103,8 @@ describe('MultiSelect', () => {
             />
         );
 
-        fireEvent.change(getByRole('textbox'), { target: { value: 'text' } });
-        fireEvent.keyDown(getByRole('textbox'), { key: 'Enter', code: 'Enter' });
+        fireEvent.change(getByRole('combobox'), { target: { value: 'text' } });
+        fireEvent.keyDown(getByRole('combobox'), { key: 'Enter', code: 'Enter' });
 
         expect(handleCreateItem).toHaveBeenCalled();
     });
@@ -123,8 +123,8 @@ describe('MultiSelect', () => {
             />
         );
 
-        fireEvent.change(getByRole('textbox'), { target: { value: 'text' } });
-        fireEvent.keyDown(getByRole('textbox'), { key: 'Enter', code: 'Enter' });
+        fireEvent.change(getByRole('combobox'), { target: { value: 'text' } });
+        fireEvent.keyDown(getByRole('combobox'), { key: 'Enter', code: 'Enter' });
 
         expect(selectItem).toHaveBeenCalledWith(['text']);
     });
@@ -144,7 +144,7 @@ describe('MultiSelect', () => {
             />
         );
 
-        fireEvent.mouseDown(getByRole('textbox'));
+        fireEvent.mouseDown(getByRole('combobox'));
 
         for (const option of MULTI_SELECT_FILTER_OPTIONS) {
             queryByText(option.label);