@pie-lib/graphing-solution-set 2.34.1 → 2.35.0-mui-update.0

package/src/tools/polygon/polygon.jsx

@@ -1,13 +1,37 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { alpha, styled } from '@mui/material/styles';
 import { gridDraggable, types } from '@pie-lib/plot';
 import * as utils from '../../utils';
-import classNames from 'classnames';
 import { color } from '@pie-lib/render-ui';
-import { fade } from '@material-ui/core/styles/colorManipulator';
 import { correct, disabled, incorrect } from '../shared/styles';
 
+const StyledPolygon = styled('polygon', {
+  shouldForwardProp: (prop) => !['isSolution', 'correctness'].includes(prop),
+})(({ theme, isSolution, correctness }) => ({
+  fill: isSolution ? 'rgb(60, 73, 150, 0.6)' : 'transparent',
+  strokeWidth: 2,
+  stroke: color.defaults.SECONDARY_LIGHT,
+  '&:hover': {
+    fill: isSolution ? 'rgb(60, 73, 150, 0.6)' : 'rgb(0, 0, 0, 0.25)',
+  },
+  ...(correctness === 'correct' && correct('stroke')),
+  ...(correctness === 'incorrect' && incorrect('stroke')),
+}));
+
+const StyledPolyline = styled('polyline', {
+  shouldForwardProp: (prop) => !['isSolution', 'correctness'].includes(prop),
+})(({ theme, isSolution, correctness }) => ({
+  fill: isSolution ? 'rgb(60, 73, 150, 0.6)' : 'transparent',
+  strokeWidth: 2,
+  stroke: color.defaults.SECONDARY_LIGHT,
+  '&:hover': {
+    fill: isSolution ? 'rgb(60, 73, 150, 0.6)' : 'rgb(0, 0, 0, 0.25)',
+  },
+  ...(correctness === 'correct' && correct('stroke')),
+  ...(correctness === 'incorrect' && incorrect('stroke')),
+}));
+
 export const getPointString = (points, scale) => {
   return (points || [])
     .map((p) => {
@@ -22,7 +46,6 @@ export const getPointString = (points, scale) => {
 
 export class RawPolygon extends React.Component {
   static propTypes = {
-    classes: PropTypes.object,
     className: PropTypes.string,
     isSolution: PropTypes.bool,
     points: PropTypes.arrayOf(types.PointType),
@@ -36,52 +59,24 @@ export class RawPolygon extends React.Component {
   };
 
   render() {
-    const { points, classes, className, correctness, graphProps, closed, isSolution, ...rest } = this.props;
+    const { points, className, correctness, graphProps, closed, isSolution, ...rest } = this.props;
     const { scale } = graphProps;
 
     const pointString = getPointString(points, scale);
-    const Tag = closed ? 'polygon' : 'polyline';
+    const Component = closed ? StyledPolygon : StyledPolyline;
     return (
-      <Tag
+      <Component
         points={pointString}
-        className={classNames(isSolution ? classes.gssSolution : classes.gssClosed, classes[correctness], className)}
+        isSolution={isSolution}
+        correctness={correctness}
+        className={className}
         {...rest}
       />
     );
   }
 }
 
-export const Polygon = withStyles((theme) => ({
-  closed: {
-    fill: fade(theme.palette.primary.light, 0.2), // TODO hardcoded color
-    strokeWidth: 2,
-    stroke: color.defaults.SECONDARY_LIGHT,
-  },
-  open: {
-    fill: fade(theme.palette.primary.light, 0.0), // TODO hardcoded color
-    strokeWidth: 2,
-    stroke: color.defaults.SECONDARY_LIGHT,
-    pointerEvents: 'none',
-  },
-  gssClosed: {
-    fill: 'transparent',
-    '&:hover': {
-      fill: 'rgb(0, 0, 0, 0.25)',
-    },
-  },
-  gssSolution: {
-    fill: 'rgb(60, 73, 150, 0.6)',
-  },
-  disabled: {
-    ...disabled('stroke'),
-  },
-  correct: {
-    ...correct('stroke'),
-  },
-  incorrect: {
-    ...incorrect('stroke'),
-  },
-}))(RawPolygon);
+export const Polygon = RawPolygon;
 
 export default gridDraggable({
   bounds: (props, { domain, range }) => {

package/src/tools/shared/line/line-path.jsx

@@ -1,16 +1,52 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 import { types } from '@pie-lib/plot';
-import classNames from 'classnames';
 import { disabled, correct, incorrect, missing } from '../styles';
 import * as vx from '@vx/shape';
 import { color } from '@pie-lib/render-ui';
 
+const dragging = () => ({
+  strokeWidth: 7,
+  stroke: color.defaults.BLACK,
+});
+
+const StyledDrawLine = styled(vx.LinePath, {
+  shouldForwardProp: (prop) => !['disabled', 'correctness'].includes(prop),
+})(({ disabled: isDisabled, correctness }) => ({
+  fill: 'none',
+  strokeWidth: 2,
+  stroke: color.secondaryLight(),
+  ...(isDisabled && {
+    ...disabled('stroke'),
+    strokeWidth: 2,
+  }),
+  ...(correctness === 'correct' && correct('stroke')),
+  ...(correctness === 'incorrect' && incorrect('stroke')),
+  ...(correctness === 'missing' && missing('stroke')),
+}));
+
+const StyledInteractionLine = styled(vx.LinePath, {
+  shouldForwardProp: (prop) => !['disabled', 'correctness', 'isDragging'].includes(prop),
+})(({ disabled: isDisabled, correctness, isDragging }) => ({
+  strokeWidth: 6,
+  fill: 'none',
+  transition: 'stroke-width 200ms ease-in, stroke 200ms ease-in',
+  stroke: 'transparent',
+  '&:hover': dragging(),
+  ...(isDragging && dragging()),
+  ...(isDisabled && {
+    ...disabled('stroke'),
+    strokeWidth: 2,
+  }),
+  ...(correctness === 'correct' && correct('stroke')),
+  ...(correctness === 'incorrect' && incorrect('stroke')),
+  ...(correctness === 'missing' && missing('stroke')),
+}));
+
 export class RawLinePath extends React.Component {
   static propTypes = {
     className: PropTypes.string,
-    classes: PropTypes.object,
     data: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)),
     graphProps: types.GraphPropsType.isRequired,
     disabled: PropTypes.bool,
@@ -27,25 +63,24 @@ export class RawLinePath extends React.Component {
 
   render() {
     /* eslint-disable no-unused-vars */
-    const { data, classes, className, disabled, correctness, from, to, graphProps, isDragging, ...rest } = this.props;
+    const { data, className, disabled, correctness, from, to, graphProps, isDragging, ...rest } = this.props;
     /* eslint-enable */
 
     return (
       <React.Fragment>
-        <vx.LinePath
+        <StyledDrawLine
           data={data}
-          className={classNames(classes.drawLine, disabled && classes.disabled, classes[correctness], className)}
+          disabled={disabled}
+          correctness={correctness}
+          className={className}
           {...rest}
         />
-        <vx.LinePath
+        <StyledInteractionLine
           data={data}
-          className={classNames(
-            classes.line,
-            isDragging && classes.dragging,
-            disabled && classes.disabled,
-            classes[correctness],
-            className,
-          )}
+          isDragging={isDragging}
+          disabled={disabled}
+          correctness={correctness}
+          className={className}
           {...rest}
         />
       </React.Fragment>
@@ -53,36 +88,4 @@ export class RawLinePath extends React.Component {
   }
 }
 
-const dragging = () => ({
-  strokeWidth: 7,
-  stroke: color.defaults.BLACK,
-});
-
-export const LinePath = withStyles((theme) => ({
-  drawLine: {
-    fill: 'none',
-    strokeWidth: 2,
-    stroke: color.secondaryLight(),
-  },
-  line: {
-    strokeWidth: 6,
-    fill: 'none',
-    transition: 'stroke-width 200ms ease-in, stroke 200ms ease-in',
-    stroke: 'transparent',
-    '&:hover': dragging(theme),
-  },
-  dragging: dragging(theme),
-  disabled: {
-    ...disabled('stroke'),
-    strokeWidth: 2,
-  },
-  correct: {
-    ...correct('stroke'),
-  },
-  incorrect: {
-    ...incorrect('stroke'),
-  },
-  missing: {
-    ...missing('stroke'),
-  },
-}))(RawLinePath);
+export const LinePath = RawLinePath;

package/src/tools/shared/point/index.jsx

@@ -1,4 +1,4 @@
-import { withStyles } from '@material-ui/core/styles/index';
+import { styled } from '@mui/material/styles';
 import { gridDraggable } from '@pie-lib/plot';
 import * as utils from '../../../utils';
 import { disabled, correct, incorrect, missing } from '../styles';
@@ -24,37 +24,25 @@ const opts = {
   },
 };
 
-const styles = () => {
-  return {
-    point: {
-      '& circle, & polygon': {
-        cursor: 'pointer',
-        fill: color.defaults.SECONDARY,
-      },
-    },
-    disabled: {
-      '& circle, & polygon': {
-        ...disabled(),
-      },
-    },
-    correct: {
-      '& circle, & polygon': {
-        ...correct(),
-      },
-    },
-    incorrect: {
-      '& circle, & polygon': {
-        ...incorrect(),
-      },
-    },
-    missing: {
-      '& circle, & polygon': {
-        ...missing(),
-      },
-    },
-  };
-};
+const StyledPointWrapper = styled('g', {
+  shouldForwardProp: (prop) => !['disabled', 'correctness'].includes(prop),
+})(({ disabled: isDisabled, correctness }) => ({
+  '& circle, & polygon': {
+    cursor: 'pointer',
+    fill: color.defaults.SECONDARY,
+    ...(isDisabled && disabled()),
+    ...(correctness === 'correct' && correct()),
+    ...(correctness === 'incorrect' && incorrect()),
+    ...(correctness === 'missing' && missing()),
+  },
+}));
+
+const withStyledWrapper = (WrappedComponent) => (props) => (
+  <StyledPointWrapper disabled={props.disabled} correctness={props.correctness}>
+    <WrappedComponent {...props} />
+  </StyledPointWrapper>
+);
 
-export const BasePoint = withStyles(styles)(gridDraggable(opts)(RawBp));
-export const ArrowPoint = withStyles(styles)(gridDraggable(opts)(RawArrow));
-export const Arrow = withStyles(styles)(gridDraggable(opts)(BaseArrow));
+export const BasePoint = gridDraggable(opts)(withStyledWrapper(RawBp));
+export const ArrowPoint = gridDraggable(opts)(withStyledWrapper(RawArrow));
+export const Arrow = gridDraggable(opts)(withStyledWrapper(BaseArrow));

package/src/undo-redo.jsx

@@ -1,16 +1,23 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import Button from '@material-ui/core/Button';
-import { withStyles } from '@material-ui/core';
+import { styled } from '@mui/material/styles';
+import Button from '@mui/material/Button';
 import { color } from '@pie-lib/render-ui';
 import Translator from '@pie-lib/translator';
 
 const { translator } = Translator;
 
+const StyledButton = styled(Button)(({ theme }) => ({
+  color: color.text(),
+  fontWeight: 'bold',
+  marginBottom: theme.spacing(0.5),
+  '&:not(:last-of-type)': {
+    marginRight: theme.spacing(0.5),
+  },
+}));
+
 export class UndoRedo extends React.Component {
   static propTypes = {
-    classes: PropTypes.object,
     className: PropTypes.string,
     onReset: PropTypes.func.isRequired,
     language: PropTypes.string,
@@ -18,30 +25,15 @@ export class UndoRedo extends React.Component {
   static defaultProps = {};
 
   render() {
-    const { classes, className, onReset = false, language } = this.props;
+    const { className, onReset = false, language } = this.props;
     return (
-      <div className={classNames(className)}>
-        <Button classes={{ root: classes.button }} onClick={() => onReset()}>
+      <div className={className}>
+        <StyledButton onClick={() => onReset()}>
           {translator.t('graphing.reset', { lng: language })}
-        </Button>
+        </StyledButton>
       </div>
     );
   }
 }
 
-const styles = (theme) => ({
-  button: {
-    color: color.text(),
-    fontWeight: 'bold',
-    marginBottom: theme.spacing.unit / 2,
-    '&:not(:last-of-type)': {
-      marginRight: theme.spacing.unit / 2,
-    },
-  },
-  undoRedoDiv: {
-    display: 'flex',
-    flexDirection: 'row',
-  },
-});
-
-export default withStyles(styles)(UndoRedo);
+export default UndoRedo;