@pie-lib/graphing 2.34.2-next.0 → 2.36.0-mui-update.0

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "2.34.2-next.0+19a7ac5d",
+  "version": "2.36.0-mui-update.0",
   "description": "Graphing components",
   "keywords": [
     "react",
@@ -16,15 +16,18 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@dnd-kit/sortable": "8.0.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/style": "^0.8.0",
     "@mapbox/point-geometry": "^0.1.0",
-    "@material-ui/core": "^3.8.3",
-    "@material-ui/icons": "^3.0.2",
-    "@pie-lib/drag": "^2.22.2-next.0+19a7ac5d",
-    "@pie-lib/editable-html": "^11.21.2-next.0+19a7ac5d",
-    "@pie-lib/graphing-utils": "^1.21.2-next.0+19a7ac5d",
-    "@pie-lib/plot": "^2.27.2-next.0+19a7ac5d",
-    "@pie-lib/render-ui": "^4.35.2-next.0+19a7ac5d",
-    "@pie-lib/translator": "^2.23.2-next.0+19a7ac5d",
+    "@mui/icons-material": "^7.3.4",
+    "@mui/material": "^7.3.4",
+    "@pie-lib/drag": "^2.24.0-mui-update.0",
+    "@pie-lib/editable-html": "^11.23.0-mui-update.0",
+    "@pie-lib/graphing-utils": "^1.23.0-mui-update.0",
+    "@pie-lib/plot": "^2.29.0-mui-update.0",
+    "@pie-lib/render-ui": "^4.37.0-mui-update.0",
+    "@pie-lib/translator": "^2.26.0-mui-update.0",
     "@vx/axis": "^0.0.189",
     "@vx/clip-path": "^0.0.189",
     "@vx/event": "^0.0.189",
@@ -39,8 +42,8 @@
     "invariant": "^2.2.4",
     "lodash": "^4.17.11",
     "prop-types": "^15.7.2",
-    "react": "^16.8.1",
-    "react-dom": "^16.9.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-draggable": "^3.3.0",
     "react-input-autosize": "^2.2.1",
     "react-redux": "^6.0.0",
@@ -48,8 +51,8 @@
     "redux-undo": "beta"
   },
   "peerDependencies": {
-    "react": "^16.8.1"
+    "react": "^18.2.0"
   },
-  "gitHead": "19a7ac5d429f1c5fe9138faff9981720f8c9e294",
+  "gitHead": "4d8ccede3634986a13ea7df987defd26d089f0d6",
   "scripts": {}
 }

package/src/axis/arrow.jsx

@@ -1,20 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import classNames from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 import { types } from '@pie-lib/plot';
 
-const style = (theme) => ({
-  root: {
-    fill: `var(--arrow-color, ${theme.palette.common.black})`,
-  },
-});
+const StyledPath = styled('path')(({ theme }) => ({
+  fill: `var(--arrow-color, ${theme.palette.common.black})`,
+}));
 
 export class Arrow extends React.Component {
   render() {
-    const { x, y, classes, className, scale } = this.props;
-    const names = classNames(classes.root, className);
+    const { x, y, className, scale } = this.props;
     let direction = this.props.direction || 'left';
 
     const xv = scale.x(x);
@@ -40,7 +36,7 @@ export class Arrow extends React.Component {
       transform = getTransform(xv, yv + 15, 270);
     }
 
-    return <path d="m 0,0 8,-5 0,10 -8,-5" transform={transform} className={names} />;
+    return <StyledPath d="m 0,0 8,-5 0,10 -8,-5" transform={transform} className={className} />;
   }
 }
 
@@ -48,7 +44,6 @@ Arrow.propTypes = {
   y: PropTypes.number,
   x: PropTypes.number,
   direction: PropTypes.oneOf(['left', 'right', 'up', 'down']),
-  classes: PropTypes.object.isRequired,
   className: PropTypes.string,
   scale: types.ScaleType.isRequired,
 };
@@ -59,4 +54,4 @@ Arrow.defaultProps = {
   direction: 'left',
 };
 
-export default withStyles(style)(Arrow);
+export default Arrow;

package/src/axis/axes.jsx

@@ -3,7 +3,7 @@ import { Axis } from '@vx/axis';
 import { types } from '@pie-lib/plot';
 import PropTypes from 'prop-types';
 import Arrow from './arrow';
-import { withStyles } from '@material-ui/core';
+import { styled } from '@mui/material/styles';
 import { countWords, findLongestWord, amountToIncreaseWidth, getTickValues } from '../utils';
 import { color, Readable } from '@pie-lib/render-ui';
 
@@ -21,34 +21,37 @@ const AxisDefaultProps = {
   },
 };
 
-const axisStyles = (theme) => ({
-  line: {
+const StyledArrow = styled(Arrow)(() => ({
+  fill: color.defaults.PRIMARY,
+}));
+
+const StyledLabel = styled('div')(({ theme }) => ({
+  fontSize: theme.typography.fontSize,
+}));
+
+const StyledAxisLabelHolder = styled('div')(({ theme }) => ({
+  padding: 0,
+  margin: 0,
+  textAlign: 'center',
+  '* > *': {
+    margin: 0,
+    padding: 0,
+  },
+  fontSize: theme.typography.fontSize,
+}));
+
+const StyledAxesGroup = styled('g')(() => ({
+  '& .vx-axis-line': {
     stroke: color.defaults.PRIMARY,
     strokeWidth: 3,
   },
-  arrow: {
-    fill: color.defaults.PRIMARY,
-  },
-  tick: {
+  '& .vx-axis-tick': {
     fill: color.defaults.PRIMARY,
-    '& > line': {
+    '& line': {
       stroke: color.defaults.PRIMARY,
     },
   },
-  labelFontSize: {
-    fontSize: theme.typography.fontSize,
-  },
-  axisLabelHolder: {
-    padding: 0,
-    margin: 0,
-    textAlign: 'center',
-    '* > *': {
-      margin: 0,
-      padding: 0,
-    },
-    fontSize: theme.typography.fontSize,
-  },
-});
+}));
 
 const tickLabelStyles = {
   fontFamily: 'Roboto',
@@ -84,7 +87,6 @@ export const firstNegativeValue = (interval) => (interval || []).find((element)
 export class RawXAxis extends React.Component {
   static propTypes = {
     ...AxisPropTypes,
-    classes: PropTypes.object,
     graphProps: types.GraphPropsType.isRequired,
   };
   static defaultProps = AxisDefaultProps;
@@ -92,7 +94,6 @@ export class RawXAxis extends React.Component {
   render() {
     const {
       includeArrows,
-      classes,
       graphProps,
       columnTicksValues,
       skipValues,
@@ -124,36 +125,34 @@ export class RawXAxis extends React.Component {
     const necessaryWidth = amountToIncreaseWidth(longestWord) + 2;
 
     return (
-      <React.Fragment>
+      <StyledAxesGroup>
         <Axis
-          axisLineClassName={classes.line}
           scale={scale.x}
           top={scale.y(0)}
           left={0}
           label={domain.label}
           rangePadding={8}
-          tickClassName={classes.tick}
           tickFormat={(value) => value}
           tickLabelProps={labelProps}
           tickValues={tickValues}
         />
         {includeArrows && includeArrows.left && (
-          <Arrow direction="left" x={domain.min} y={0} className={classes.arrow} scale={scale} />
+          <StyledArrow direction="left" x={domain.min} y={0} scale={scale} />
         )}
         {includeArrows && includeArrows.right && (
-          <Arrow direction="right" x={domain.max} y={0} className={classes.arrow} scale={scale} />
+          <StyledArrow direction="right" x={domain.max} y={0} scale={scale} />
         )}
         {domain.axisLabel && (
           <foreignObject x={size.width + 17} y={scale.y(0) - 9} width={necessaryWidth} height={20 * necessaryRows}>
-            <div dangerouslySetInnerHTML={{ __html: domain.axisLabel }} className={classes.labelFontSize} />
+            <StyledLabel dangerouslySetInnerHTML={{ __html: domain.axisLabel }} />
           </foreignObject>
         )}
-      </React.Fragment>
+      </StyledAxesGroup>
     );
   }
 }
 
-const XAxis = withStyles(axisStyles)(RawXAxis);
+const XAxis = RawXAxis;
 
 export class RawYAxis extends React.Component {
   static propTypes = {
@@ -163,7 +162,7 @@ export class RawYAxis extends React.Component {
   static defaultProps = AxisDefaultProps;
 
   render() {
-    const { classes, includeArrows, graphProps, skipValues, rowTickValues } = this.props;
+    const { includeArrows, graphProps, skipValues, rowTickValues } = this.props;
     const { scale, range, size } = graphProps || {};
 
     const necessaryWidth = range.axisLabel ? amountToIncreaseWidth(range.axisLabel.length) : 0;
@@ -171,9 +170,8 @@ export class RawYAxis extends React.Component {
     const customTickFormat = (value) => (skipValues && skipValues.indexOf(value) >= 0 ? '' : value);
 
     return (
-      <React.Fragment>
+      <StyledAxesGroup>
         <Axis
-          axisLineClassName={classes.line}
           orientation={'left'}
           scale={scale.y}
           top={0}
@@ -183,7 +181,6 @@ export class RawYAxis extends React.Component {
           labelProps={{ 'data-pie-readable': false }}
           rangePadding={8}
           tickLength={10}
-          tickClassName={classes.tick}
           tickFormat={customTickFormat}
           tickLabelProps={(value) => {
             let digits = value.toLocaleString().replace(/[.-]/g, '').length || 1;
@@ -199,31 +196,29 @@ export class RawYAxis extends React.Component {
           tickTextAnchor={'bottom'}
           tickValues={rowTickValues}
         />
-
         {includeArrows && includeArrows.down && (
-          <Arrow direction="down" x={0} y={range.min} className={classes.arrow} scale={scale} />
+          <StyledArrow direction="down" x={0} y={range.min} scale={scale} />
         )}
         {includeArrows && includeArrows.up && (
-          <Arrow direction="up" x={0} y={range.max} className={classes.arrow} scale={scale} />
+          <StyledArrow direction="up" x={0} y={range.max} scale={scale} />
         )}
         {range.axisLabel && (
           <foreignObject x={scale.x(0) - necessaryWidth / 2} y={-33} width={necessaryWidth} height="20">
             <Readable false>
-              <div dangerouslySetInnerHTML={{ __html: range.axisLabel }} className={classes.axisLabelHolder} />
+              <StyledAxisLabelHolder dangerouslySetInnerHTML={{ __html: range.axisLabel }} />
             </Readable>
           </foreignObject>
         )}
-      </React.Fragment>
+      </StyledAxesGroup>
     );
   }
 }
 
-const YAxis = withStyles(axisStyles)(RawYAxis);
+const YAxis = RawYAxis;
 
 export default class Axes extends React.Component {
   static propTypes = {
     ...AxisPropTypes,
-    classes: PropTypes.object,
     graphProps: types.GraphPropsType.isRequired,
   };
   static defaultProps = AxisDefaultProps;
@@ -283,7 +278,7 @@ export default class Axes extends React.Component {
 
     // each axis has to be displayed only if the domain & range include it
     return (
-      <React.Fragment>
+      <StyledAxesGroup>
         {range.min <= 0 ? (
           <XAxis
             {...this.props}
@@ -301,7 +296,7 @@ export default class Axes extends React.Component {
             distanceFromOriginToFirstNegativeX={distanceFromOriginToFirstNegativeX}
           />
         ) : null}
-      </React.Fragment>
+      </StyledAxesGroup>
     );
   }
 }

package/src/coordinates-label.jsx

@@ -2,22 +2,20 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { types } from '@pie-lib/plot';
 import { color } from '@pie-lib/render-ui';
-import { withStyles } from '@material-ui/core/styles';
-import InputBase from '@material-ui/core/InputBase';
+import { styled } from '@mui/material/styles';
+import InputBase from '@mui/material/InputBase';
 import { roundNumber } from './utils';
 
-const styles = (theme) => ({
-  input: {
-    fontFamily: theme.typography.fontFamily,
-    fontSize: theme.typography.fontSize,
-    borderRadius: '8px',
-    background: theme.palette.common.white,
-    color: color.defaults.PRIMARY_DARK,
-  },
-  inputLabel: {
+const StyledInputBase = styled(InputBase)(({ theme }) => ({
+  fontFamily: theme.typography.fontFamily,
+  fontSize: theme.typography.fontSize,
+  borderRadius: '8px',
+  background: theme.palette.common.white,
+  color: color.defaults.PRIMARY_DARK,
+  '& .MuiInputBase-input': {
     padding: 0,
   },
-});
+}));
 
 export const getLabelPosition = (graphProps, x, y, labelLength) => {
   const { scale, domain, range } = graphProps;
@@ -39,7 +37,7 @@ export const getLabelPosition = (graphProps, x, y, labelLength) => {
   };
 };
 
-export const CoordinatesLabel = ({ x, y, graphProps, classes }) => {
+export const CoordinatesLabel = ({ x, y, graphProps }) => {
   const label = `(${roundNumber(x)}, ${roundNumber(y)})`;
   const labelLength = (label.length || 0) * 6;
   const labelPosition = getLabelPosition(graphProps, x, y, labelLength);
@@ -53,10 +51,8 @@ export const CoordinatesLabel = ({ x, y, graphProps, classes }) => {
   };
 
   return (
-    <InputBase
+    <StyledInputBase
       style={style}
-      classes={{ input: classes.inputLabel }}
-      className={classes.input}
       value={label}
       inputProps={{ ariaLabel: 'naked' }}
     />
@@ -65,9 +61,8 @@ export const CoordinatesLabel = ({ x, y, graphProps, classes }) => {
 
 CoordinatesLabel.propTypes = {
   graphProps: types.GraphPropsType,
-  classes: PropTypes.object,
   x: PropTypes.number,
   y: PropTypes.number,
 };
 
-export default withStyles(styles)(CoordinatesLabel);
+export default CoordinatesLabel;

package/src/graph-with-controls.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-import classNames from 'classnames';
+import { styled } from '@mui/material/styles';
 import uniq from 'lodash/uniq';
 import isString from 'lodash/isString';
 import { color } from '@pie-lib/render-ui';
@@ -10,8 +9,45 @@ import ToolMenu from './tool-menu';
 import Graph, { graphPropTypes } from './graph';
 import UndoRedo from './undo-redo';
 import { allTools, toolsArr } from './tools';
-import { ExpansionPanel, ExpansionPanelDetails, ExpansionPanelSummary, Typography } from '@material-ui/core';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import { Accordion, AccordionDetails, AccordionSummary, Typography } from '@mui/material';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+
+const StyledGraphContainer = styled('div')({
+  display: 'flex',
+  flexDirection: 'column',
+  width: 'min-content',
+});
+
+const StyledControls = styled('div')(({ theme }) => ({
+  display: 'flex',
+  justifyContent: 'space-between',
+  padding: theme.spacing(1),
+  color: color.text(),
+  backgroundColor: color.primaryLight(),
+  '& button': {
+    fontSize: theme.typography.fontSize,
+  },
+}));
+
+const StyledAccordion = styled(Accordion)({
+  backgroundColor: color.primaryLight(),
+  width: '100%',
+});
+
+const StyledAccordionSummary = styled(AccordionSummary)(({ theme }) => ({
+  padding: `0 ${theme.spacing(1)}px`,
+  minHeight: '32px !important',
+  '& .MuiAccordionSummary-content': {
+    margin: '4px 0 !important',
+  },
+}));
+
+const StyledAccordionDetails = styled(AccordionDetails)(({ theme }) => ({
+  padding: 0,
+  marginTop: theme.spacing(1),
+  display: 'flex',
+  justifyContent: 'space-between',
+}));
 
 export const setToolbarAvailability = (toolbarTools) =>
   toolsArr.map((tA) => ({ ...tA, toolbar: !!toolbarTools.find((t) => t === tA.type) })) || [];
@@ -29,23 +65,16 @@ export const filterByVisibleToolTypes = (toolbarTools, marks) =>
 
 const getDefaultCurrentTool = (toolType) => toolsArr.find((tool) => tool.type === toolType) || null;
 
-const Collapsible = ({ classes, children, title }) => (
-  <ExpansionPanel elevation={0} className={classes.expansionPanel} disabledGutters={true} square={true}>
-    <ExpansionPanelSummary
-      classes={{
-        root: classes.summaryRoot,
-        content: classes.summaryContent,
-      }}
-      expandIcon={<ExpandMoreIcon />}
-    >
+const Collapsible = ({ children, title }) => (
+  <StyledAccordion elevation={0} disableGutters={true} square={true} TransitionProps={{ timeout: { enter: 225, exit: 195 } }}>
+    <StyledAccordionSummary expandIcon={<ExpandMoreIcon />}>
       <Typography variant="subheading">{title}</Typography>
-    </ExpansionPanelSummary>
-    <ExpansionPanelDetails className={classes.details}>{children}</ExpansionPanelDetails>
-  </ExpansionPanel>
+    </StyledAccordionSummary>
+    <StyledAccordionDetails>{children}</StyledAccordionDetails>
+  </StyledAccordion>
 );
 
 Collapsible.propTypes = {
-  classes: PropTypes.object,
   children: PropTypes.array,
   title: PropTypes.string,
 };
@@ -96,7 +125,6 @@ export class GraphWithControls extends React.Component {
     let { currentTool, labelModeEnabled } = this.state;
     const {
       axesSettings,
-      classes,
       className,
       coordinatesOnHover,
       collapsibleToolbar,
@@ -162,16 +190,16 @@ export class GraphWithControls extends React.Component {
     );
 
     return (
-      <div className={classNames(classes.graphWithControls, className)}>
-        <div className={classes.controls}>
+      <StyledGraphContainer className={className}>
+        <StyledControls>
           {collapsibleToolbar ? (
-            <Collapsible classes={classes} title={collapsibleToolbarTitle}>
+            <Collapsible title={collapsibleToolbarTitle}>
               {graphActions}
             </Collapsible>
           ) : (
             graphActions
           )}
-        </div>
+        </StyledControls>
 
         <div ref={(r) => (this.labelNode = r)} />
 
@@ -201,44 +229,9 @@ export class GraphWithControls extends React.Component {
           removeIncompleteTool={removeIncompleteTool}
           limitLabeling={limitLabeling}
         />
-      </div>
+      </StyledGraphContainer>
     );
   }
 }
 
-const styles = (theme) => ({
-  graphWithControls: {
-    display: 'flex',
-    flexDirection: 'column',
-    width: 'min-content',
-  },
-  controls: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    padding: theme.spacing.unit,
-    color: color.text(),
-    backgroundColor: color.primaryLight(),
-    '& button': {
-      fontSize: theme.typography.fontSize,
-    },
-  },
-  expansionPanel: {
-    backgroundColor: color.primaryLight(),
-    width: '100%',
-  },
-  summaryRoot: {
-    padding: `0 ${theme.spacing.unit}px`,
-    minHeight: '32px !important',
-  },
-  summaryContent: {
-    margin: '4px 0 !important',
-  },
-  details: {
-    padding: 0,
-    marginTop: theme.spacing.unit,
-    display: 'flex',
-    justifyContent: 'space-between',
-  },
-});
-
-export default withStyles(styles)(GraphWithControls);
+export default GraphWithControls;