Merge pull request #377 from visdesignlab/fix-build-errors

Fix build errors and update to react 18
visdesignlab · Aug 9, 2024 · bbef28c · bbef28c
2 parents 09fc29c + 329814a
commit bbef28c
Show file tree

Hide file tree

Showing 8 changed files with 72 additions and 65 deletions.
diff --git a/README.md b/README.md
@@ -38,7 +38,7 @@ UpSet 2.0 can be imported as a React component using:
 npm install @visdesignlab/upset2-react
 ```
 
-Note that UpSet 2.0 requires a react version of 16.0 or higher.
+Note that UpSet 2.0 requires a react version of 18.0 or higher.
 
 Import the component using `import { Upset } from @visdesignlab/upset2-react` in your react component.
 

diff --git a/package.json b/package.json
@@ -45,6 +45,7 @@
     "eslint-config-react-app": "^7.0.1",
     "vite": "^4.4.9",
     "vite-plugin-dts": "^3.5.1",
-    "vite-tsconfig-paths": "^4.2.0"
+    "vite-tsconfig-paths": "^4.2.0",
+    "react": "^18.0.2"
   }
 }
diff --git a/packages/app/package.json b/packages/app/package.json
@@ -23,8 +23,8 @@
     "@visdesignlab/upset2-react": "^0.1.0",
     "localforage": "^1.10.0",
     "multinet": "0.23.3",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.0.2",
+    "react-dom": "^18.0.2",
     "react-router-dom": "^6.14.1",
     "recoil": "^0.6.1",
     "typescript": "^4.5.5",

diff --git a/packages/core/src/defaultConfig.ts b/packages/core/src/defaultConfig.ts
@@ -1,4 +1,4 @@
-import { AttributePlotType, UpsetConfig } from './types';
+import { UpsetConfig } from './types';
 
 export const DefaultConfig: UpsetConfig = {
   // Calls to the alttext API may error if these are not set

diff --git a/packages/upset/package.json b/packages/upset/package.json
@@ -37,8 +37,8 @@
     "build-storybook": "storybook build"
   },
   "peerDependencies": {
-    "react": ">=16",
-    "react-dom": "^17.0.2"
+    "react": "^18.0.2",
+    "react-dom": "^18.0.2"
   },
   "husky": {
     "hooks": {
@@ -48,40 +48,43 @@
   "devDependencies": {
     "@babel/core": "^7.16.7",
     "@babel/preset-react": "^7.16.7",
-    "@chromatic-com/storybook": "^1",
+    "@chromatic-com/storybook": "^1.6.1",
     "@emotion/babel-plugin": "^11.7.2",
     "@emotion/babel-preset-css-prop": "^11.2.0",
     "@size-limit/preset-small-lib": "^7.0.5",
-    "@storybook/react-vite": "^8.0.10",
+    "@storybook/react-vite": "^8.2.8",
     "@types/d3": "^7.1.0",
     "@types/react": "^17.0.38",
     "@types/react-dom": "^17.0.11",
     "babel-loader": "^8.2.3",
     "husky": "^7.0.4",
     "react-is": "^17.0.2",
     "size-limit": "^7.0.5",
+    "storybook": "^8.2.8",
     "tsdx": "^0.14.1",
     "tslib": "^2.3.1",
-    "typescript": "^4.5.4",
-    "react": ">=16",
-    "react-dom": ">=17.0.2",
-    "storybook": "^8.0.10"
+    "typescript": "^4.5.4"
   },
   "dependencies": {
     "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.13.0",
     "@fontsource/roboto": "^4.5.1",
     "@mui/icons-material": "^5.11.0",
     "@mui/material": "^5.11.0",
     "@mui/system": "^5.11.0",
     "@mui/x-data-grid": "^5.17.12",
+    "@storybook/react": "^8.2.8",
+    "@storybook/react-vite": "^8.2.8",
     "@trrack/core": "^1.3.0-beta.1",
     "@trrack/vis-react": "^1.3.0",
     "@visdesignlab/upset2-core": "*",
     "d3-array": "^3.2.4",
-    "d3-selection": "^3.0.0",
-    "d3-dsv": "^3.0.1",
     "d3-drag": "^3.0.0",
+    "d3-dsv": "^3.0.1",
     "d3-scale": "^4.0.2",
+    "d3-selection": "^3.0.0",
+    "react": "^18.0.2",
+    "react-dom": "^18.0.2",
     "react-markdown": "^8.0.7",
     "react-spring": "^9.4.4",
     "react-vega": "^7.4.4",

diff --git a/packages/upset/src/atoms/config/plotInformationAtom.ts b/packages/upset/src/atoms/config/plotInformationAtom.ts
@@ -1,6 +1,6 @@
 import { selector } from 'recoil';
-import { upsetConfigAtom } from './upsetConfigAtoms';
 import { PlotInformation } from '@visdesignlab/upset2-core';
+import { upsetConfigAtom } from './upsetConfigAtoms';
 
 export const plotInformationSelector = selector<PlotInformation>({
   key: 'meta-data',

diff --git a/packages/upset/src/components/custom/PlotInformation.tsx b/packages/upset/src/components/custom/PlotInformation.tsx
@@ -6,9 +6,9 @@ import {
   Typography,
 } from '@mui/material';
 import EditIcon from '@mui/icons-material/Edit';
-import { plotInformationSelector } from '../../atoms/config/plotInformationAtom';
 import { useRecoilValue } from 'recoil';
 import { useContext, useState } from 'react';
+import { plotInformationSelector } from '../../atoms/config/plotInformationAtom';
 import { ProvenanceContext } from '../Root';
 
 /**
@@ -35,9 +35,9 @@ type Props = {
  * Uses up to 5 tab indices, starting from @param tabIndex
  * @param Props @see @type Props
  */
-export const PlotInformation = ({onSave, divider, tabIndex}: Props) => {
+export const PlotInformation = ({ onSave, divider, tabIndex }: Props) => {
   /**
-   * Width of the titles for all the fields in %. 
+   * Width of the titles for all the fields in %.
    * Field entry boxes will occupy the rest of the space
    */
   const fieldTitleWidth = 30;
@@ -49,12 +49,12 @@ export const PlotInformation = ({onSave, divider, tabIndex}: Props) => {
     margin: '0.25em 0',
     minHeight: '4em',
   };
-  
+
   const plotInfoTitle = {
     fontSize: '1em',
     fontWeight: 'inherit',
     color: 'GrayText',
-    width: fieldTitleWidth + '%',
+    width: `${fieldTitleWidth}%`,
   };
 
   const placeholderText = {
@@ -75,10 +75,10 @@ export const PlotInformation = ({onSave, divider, tabIndex}: Props) => {
    */
   const generatePlotInformationText: () => string = () => {
     // return default string if there are no values filled in
-    if (Object.values(plotInformation).filter((a) => a.length > 0).length === 0) {
+    if (Object.values(plotInformation).filter((a) => a?.length > 0).length === 0) {
       return `This UpSet plot shows ${placeholderText.description}. The sets are ${placeholderText.sets}. The items are ${placeholderText.items}`;
     }
-    
+
     let str: string = '';
     if (plotInformation.description !== '') {
       str += `This UpSet plot shows ${plotInformation.description}. `;
@@ -89,23 +89,22 @@ export const PlotInformation = ({onSave, divider, tabIndex}: Props) => {
     if (plotInformation.items !== '') {
       str += `The items are ${plotInformation.items}.`;
     }
-    
+
     return str;
   };
 
   /**
    * Commits changes to the plot information if the new state is different from the old state.
-   * If a commit occurs, records a trrack action. 
+   * If a commit occurs, records a trrack action.
    */
-  const commitEdits = () => { 
+  const commitEdits = () => {
     if ( // Need to manually check for changes since the state is an object
       plotInformation.caption !== plotInformationState.caption
       || plotInformation.title !== plotInformationState.title
       || plotInformation.description !== plotInformationState.description
       || plotInformation.sets !== plotInformationState.sets
       || plotInformation.items !== plotInformationState.items
-    )
-      actions.setPlotInformation(plotInformation);
+    ) actions.setPlotInformation(plotInformation);
     if (onSave) onSave();
     setEditing(false);
   };
@@ -115,71 +114,76 @@ export const PlotInformation = ({onSave, divider, tabIndex}: Props) => {
       <Box
         tabIndex={tabIndex}
         onClick={() => setEditing(true)}
-        sx={{ 
+        sx={{
           cursor: 'pointer',
           border: '2px solid white', // Prevent resize on hover
           padding: '.2em',
           '&:hover': {
-            border: '2px inset #ddd', 
-          }
+            border: '2px inset #ddd',
+          },
         }}
       >
-        <div style={{height: '1.6em'}}>
+        <div style={{ height: '1.6em' }}>
           <Typography variant="h2" fontSize="1.2em" fontWeight="inherit" height="1.4em" padding="0">
-            {plotInformation.title ?? "[Title]"}
+            {plotInformation.title ?? '[Title]'}
           </Typography>
-          <Button 
-            aria-label='Edit Plot Information' 
-            style={{float: 'right', position: 'relative', bottom: '40px'}} 
+          <Button
+            aria-label="Edit Plot Information"
+            style={{ float: 'right', position: 'relative', bottom: '40px' }}
             tabIndex={tabIndex + 1}
           >
-            <Icon style={{overflow: 'visible'}}>
+            <Icon style={{ overflow: 'visible' }}>
               <EditIcon />
             </Icon>
           </Button>
         </div>
         {divider}
-        <Typography>{plotInformation.caption ?? "[Caption]"}</Typography>
+        <Typography>{plotInformation.caption ?? '[Caption]'}</Typography>
         <br />
         <Typography>{generatePlotInformationText()}</Typography>
       </Box>
     ) : (
       <Box tabIndex={tabIndex}>
-        <Button 
-          tabIndex={tabIndex + 6} 
-          color="primary" 
-          style={{float: 'right'}} 
+        <Button
+          tabIndex={tabIndex + 6}
+          color="primary"
+          style={{ float: 'right' }}
           onClick={commitEdits}
-        >Save</Button>
+        >
+          Save
+        </Button>
         <Box>
           <TextField
-            tabIndex={tabIndex + 1} 
-            fullWidth 
-            variant='standard'
-            style={{marginBottom: "5px"}}
+            tabIndex={tabIndex + 1}
+            fullWidth
+            variant="standard"
+            style={{ marginBottom: '5px' }}
             value={plotInformation.title}
             onChange={(e) => setPlotInformation({ ...plotInformation, title: e.target.value })}
-            placeholder='Title'
+            placeholder="Title"
             inputProps={{
               disableUnderline: true,
               style: {
-                padding: "1px", 
-                height: "1.4em", 
-                fontSize: "1.2em", 
-                fontWeight: "inherit",
-                border: "none",
-            }}}/>
-          <TextField 
+                padding: '1px',
+                height: '1.4em',
+                fontSize: '1.2em',
+                fontWeight: 'inherit',
+                border: 'none',
+              },
+            }}
+          />
+          <TextField
             tabIndex={tabIndex + 2}
-            fullWidth multiline
+            fullWidth
+            multiline
             inputProps={{
               rows: 3,
               // We need to override the default overflow prop (hidden), then still deny x scrolling
-              style: {height: "4em", overflow: "auto", overflowX: "hidden"}
+              style: { height: '4em', overflow: 'auto', overflowX: 'hidden' },
             }}
             value={plotInformation.caption}
             onChange={(e) => setPlotInformation({ ...plotInformation, caption: e.target.value })}
-            placeholder='Caption'
+            placeholder="Caption"
           />
         </Box>
         <Box>
@@ -190,7 +194,7 @@ export const PlotInformation = ({onSave, divider, tabIndex}: Props) => {
             <TextField
               tabIndex={tabIndex + 3}
               onChange={(e) => setPlotInformation({ ...plotInformation, description: e.target.value })}
-              sx={{ width: 100 - fieldTitleWidth + '%' }}
+              sx={{ width: `${100 - fieldTitleWidth}%` }}
               multiline
               InputLabelProps={{ shrink: true }}
               value={plotInformation.description}
@@ -208,7 +212,7 @@ export const PlotInformation = ({onSave, divider, tabIndex}: Props) => {
             <TextField
               tabIndex={tabIndex + 4}
               onChange={(e) => setPlotInformation({ ...plotInformation, sets: e.target.value })}
-              sx={{ width: 100 - fieldTitleWidth + '%' }}
+              sx={{ width: `${100 - fieldTitleWidth}%` }}
               multiline
               InputLabelProps={{ shrink: true }}
               value={plotInformation.sets}
@@ -226,7 +230,7 @@ export const PlotInformation = ({onSave, divider, tabIndex}: Props) => {
             <TextField
               tabIndex={tabIndex + 5}
               onChange={(e) => setPlotInformation({ ...plotInformation, items: e.target.value })}
-              sx={{ width: 100 - fieldTitleWidth + '%' }}
+              sx={{ width: `${100 - fieldTitleWidth}%` }}
               multiline
               InputLabelProps={{ shrink: true }}
               value={plotInformation.items}
@@ -239,5 +243,5 @@ export const PlotInformation = ({onSave, divider, tabIndex}: Props) => {
         <Typography>{generatePlotInformationText()}</Typography>
       </Box>
     )
-  )
-}
+  );
+};
diff --git a/packages/upset/src/provenance/index.ts b/packages/upset/src/provenance/index.ts
@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 import {
-  AggregateBy, Plot, PlotInformation, SortBy, SortByOrder, SortVisibleBy, UpsetConfig, DefaultConfig, Row,
-  AltText
+  AggregateBy, Plot, PlotInformation, SortByOrder, SortVisibleBy, UpsetConfig, DefaultConfig, Row, AltText,
 } from '@visdesignlab/upset2-core';
 
 import { Registry, initializeTrrack } from '@trrack/core';