@pie-lib/graphing-solution-set 2.34.3-next.0 → 2.34.3-next.155

package/src/tools/shared/point/base-point.jsx

@@ -1,15 +1,38 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import { types } from '@pie-lib/plot';
 import CoordinatesLabel from '../../../coordinates-label';
 import ReactDOM from 'react-dom';
 import { thinnerShapesNeeded } from '../../../utils';
 import { color } from '@pie-lib/render-ui';
+import { styled } from '@mui/material/styles';
+import { disabled as disabledStyle, correct, incorrect, missing } from '../styles';
+
+const StyledPointGroup = styled('g')(({ disabled, correctness }) => ({
+  cursor: 'pointer',
+  '& circle': {
+    fill: 'currentColor',
+  },
+  ...(disabled && {
+    ...disabledStyle('fill'),
+    ...disabledStyle('color'),
+  }),
+  ...(correctness === 'correct' && {
+    ...correct('fill'),
+    ...correct('color'),
+  }),
+  ...(correctness === 'incorrect' && {
+    ...incorrect('fill'),
+    ...incorrect('color'),
+  }),
+  ...(correctness === 'missing' && {
+    ...missing('fill'),
+    ...missing('color'),
+  }),
+}));
 
 export class RawBp extends React.Component {
   static propTypes = {
-    classes: PropTypes.object,
     className: PropTypes.string,
     coordinatesOnHover: PropTypes.bool,
     correctness: PropTypes.string,
@@ -18,6 +41,9 @@ export class RawBp extends React.Component {
     x: PropTypes.number,
     y: PropTypes.number,
     graphProps: types.GraphPropsType.isRequired,
+    onClick: PropTypes.func,
+    onTouchStart: PropTypes.func,
+    onTouchEnd: PropTypes.func,
   };
 
   constructor(props) {
@@ -27,7 +53,6 @@ export class RawBp extends React.Component {
 
   render() {
     const {
-      classes,
       className,
       coordinatesOnHover,
       x,
@@ -63,8 +88,10 @@ export class RawBp extends React.Component {
           onTouchEnd={onTouchEnd}
           onClick={onClick}
         />
-        <g
-          className={classNames(classes.point, disabled && classes.disabled, classes[correctness], className)}
+        <StyledPointGroup
+          disabled={disabled}
+          correctness={correctness}
+          className={className}
           onMouseEnter={() => this.setState({ showCoordinates: true })}
           onMouseLeave={() => this.setState({ showCoordinates: false })}
         >
@@ -79,7 +106,7 @@ export class RawBp extends React.Component {
             coordinatesOnHover &&
             showCoordinates &&
             ReactDOM.createPortal(<CoordinatesLabel graphProps={graphProps} x={x} y={y} />, labelNode)}
-        </g>
+        </StyledPointGroup>
       </>
     );
   }

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

@@ -1,4 +1,6 @@
-import { withStyles } from '@material-ui/core/styles/index';
+import React from 'react';
+import PropTypes from 'prop-types';
+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 +26,33 @@ 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) => {
+  const WrappedComponentWithStyles = (props) => (
+    <StyledPointWrapper disabled={props.disabled} correctness={props.correctness}>
+      <WrappedComponent {...props} />
+    </StyledPointWrapper>
+  );
+  WrappedComponentWithStyles.displayName = `withStyledWrapper(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;
+  WrappedComponentWithStyles.propTypes = {
+    disabled: PropTypes.bool,
+    correctness: PropTypes.string,
   };
+  return WrappedComponentWithStyles;
 };
 
-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;

package/src/__tests__/__snapshots__/graph-with-controls.test.jsx.snap

@@ -1,114 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`GraphWithControls snapshot renders 1`] = `
-<div
-  className=""
->
-  <div />
-  <div />
-  <Graph
-    axesSettings={
-      Object {
-        "includeArrows": true,
-      }
-    }
-    backgroundMarks={Array []}
-    coordinatesOnHover={false}
-    currentTool={
-      Object {
-        "Component": [Function],
-        "addPoint": [Function],
-        "toolbar": true,
-        "type": "line",
-      }
-    }
-    disabled={false}
-    disabledLabels={false}
-    disabledTitle={false}
-    domain={
-      Object {
-        "max": 10,
-        "min": 0,
-        "step": 1,
-      }
-    }
-    labelModeEnabled={false}
-    labels={
-      Object {
-        "bottom": "d",
-        "left": "b",
-        "right": "c",
-        "top": "a",
-      }
-    }
-    marks={
-      Array [
-        Object {
-          "building": true,
-          "from": Object {
-            "x": 0,
-            "y": 0,
-          },
-          "label": "Line",
-          "to": Object {
-            "x": 1,
-            "y": 1,
-          },
-          "type": "line",
-        },
-        Object {
-          "points": Array [
-            Object {
-              "x": 0,
-              "y": 0,
-            },
-            Object {
-              "x": 1,
-              "y": 1,
-            },
-            Object {
-              "x": 2,
-              "y": 2,
-            },
-          ],
-          "type": "polygon",
-        },
-      ]
-    }
-    onChangeMarks={[MockFunction]}
-    range={
-      Object {
-        "max": 10,
-        "min": 0,
-        "step": 1,
-      }
-    }
-    showLabels={true}
-    showTitle={true}
-    size={
-      Object {
-        "height": 500,
-        "width": 500,
-      }
-    }
-    title="Title"
-    tools={
-      Array [
-        Object {
-          "Component": [Function],
-          "addPoint": [Function],
-          "toolbar": true,
-          "type": "line",
-        },
-        Object {
-          "Component": [Function],
-          "addPoint": [Function],
-          "complete": [Function],
-          "toolbar": true,
-          "type": "polygon",
-        },
-      ]
-    }
-  />
-</div>
-`;

package/src/__tests__/__snapshots__/graph.test.jsx.snap

@@ -1,213 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Graph snapshot renders 1`] = `
-<WithStyles(Root)
-  disabledLabels={false}
-  disabledTitle={false}
-  graphProps={
-    Object {
-      "domain": Object {
-        "max": 1,
-        "min": 0,
-        "step": 1,
-      },
-      "getRootNode": [Function],
-      "range": Object {
-        "max": 1,
-        "min": 0,
-        "step": 1,
-      },
-      "scale": Object {
-        "x": [Function],
-        "y": [Function],
-      },
-      "size": Object {
-        "height": 400,
-        "width": 400,
-      },
-      "snap": Object {
-        "x": [Function],
-        "y": [Function],
-      },
-    }
-  }
-  labelsPlaceholders={Object {}}
-  mathMlOptions={Object {}}
-  rootRef={[Function]}
->
-  <g>
-    <WithStyles(Grid)
-      graphProps={
-        Object {
-          "domain": Object {
-            "max": 1,
-            "min": 0,
-            "step": 1,
-          },
-          "getRootNode": [Function],
-          "range": Object {
-            "max": 1,
-            "min": 0,
-            "step": 1,
-          },
-          "scale": Object {
-            "x": [Function],
-            "y": [Function],
-          },
-          "size": Object {
-            "height": 400,
-            "width": 400,
-          },
-          "snap": Object {
-            "x": [Function],
-            "y": [Function],
-          },
-        }
-      }
-    />
-    <Axes
-      graphProps={
-        Object {
-          "domain": Object {
-            "max": 1,
-            "min": 0,
-            "step": 1,
-          },
-          "getRootNode": [Function],
-          "range": Object {
-            "max": 1,
-            "min": 0,
-            "step": 1,
-          },
-          "scale": Object {
-            "x": [Function],
-            "y": [Function],
-          },
-          "size": Object {
-            "height": 400,
-            "width": 400,
-          },
-          "snap": Object {
-            "x": [Function],
-            "y": [Function],
-          },
-        }
-      }
-      includeArrows={
-        Object {
-          "down": true,
-          "left": true,
-          "right": true,
-          "up": true,
-        }
-      }
-    />
-    <Bg
-      graphProps={
-        Object {
-          "domain": Object {
-            "max": 1,
-            "min": 0,
-            "step": 1,
-          },
-          "getRootNode": [Function],
-          "range": Object {
-            "max": 1,
-            "min": 0,
-            "step": 1,
-          },
-          "scale": Object {
-            "x": [Function],
-            "y": [Function],
-          },
-          "size": Object {
-            "height": 400,
-            "width": 400,
-          },
-          "snap": Object {
-            "x": [Function],
-            "y": [Function],
-          },
-        }
-      }
-      height={400}
-      onClick={[Function]}
-      width={400}
-    />
-    <mask
-      id="graph-1618"
-    >
-      <rect
-        fill="white"
-        height={446}
-        width={446}
-        x={-23}
-        y={-23}
-      />
-       
-    </mask>
-    <g
-      id="marks"
-      mask="url('#graph-1618')"
-    >
-      <LineToolComponent
-        graphProps={
-          Object {
-            "domain": Object {
-              "max": 1,
-              "min": 0,
-              "step": 1,
-            },
-            "getRootNode": [Function],
-            "range": Object {
-              "max": 1,
-              "min": 0,
-              "step": 1,
-            },
-            "scale": Object {
-              "x": [Function],
-              "y": [Function],
-            },
-            "size": Object {
-              "height": 400,
-              "width": 400,
-            },
-            "snap": Object {
-              "x": [Function],
-              "y": [Function],
-            },
-          }
-        }
-        isToolActive={true}
-        key="line-0"
-        mark={
-          Object {
-            "building": true,
-            "from": Object {
-              "x": 0,
-              "y": 0,
-            },
-            "label": "Line",
-            "type": "line",
-          }
-        }
-        onChange={[Function]}
-        onClick={[Function]}
-        onComplete={[Function]}
-      />
-      <foreignObject
-        height={400}
-        style={
-          Object {
-            "fontSize": "14px",
-            "pointerEvents": "none",
-          }
-        }
-        width={400}
-        x="0"
-        y="0"
-      />
-    </g>
-  </g>
-</WithStyles(Root)>
-`;

package/src/__tests__/__snapshots__/grid.test.jsx.snap

@@ -1,54 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Grid snapshot renders 1`] = `
-<Fragment>
-  <r
-    columnTickValues={
-      Array [
-        0,
-        1,
-      ]
-    }
-    height={400}
-    innerRef={[Function]}
-    rowTickValues={
-      Array [
-        0,
-        1,
-      ]
-    }
-    stroke="#D3D3D3"
-    width={400}
-    xScale={
-      [MockFunction] {
-        "calls": Array [
-          Array [
-            0,
-          ],
-        ],
-        "results": Array [
-          Object {
-            "type": "return",
-            "value": 0,
-          },
-        ],
-      }
-    }
-    yScale={
-      [MockFunction] {
-        "calls": Array [
-          Array [
-            0,
-          ],
-        ],
-        "results": Array [
-          Object {
-            "type": "return",
-            "value": 0,
-          },
-        ],
-      }
-    }
-  />
-</Fragment>
-`;

package/src/__tests__/__snapshots__/labels.test.jsx.snap

@@ -1,30 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Labels snapshot renders 1`] = `
-<Fragment>
-  <WithStyles(RawLabel)
-    key="left"
-    mathMlOptions={Object {}}
-    onChange={[Function]}
-    side="left"
-  />
-  <WithStyles(RawLabel)
-    key="top"
-    mathMlOptions={Object {}}
-    onChange={[Function]}
-    side="top"
-  />
-  <WithStyles(RawLabel)
-    key="bottom"
-    mathMlOptions={Object {}}
-    onChange={[Function]}
-    side="bottom"
-  />
-  <WithStyles(RawLabel)
-    key="right"
-    mathMlOptions={Object {}}
-    onChange={[Function]}
-    side="right"
-  />
-</Fragment>
-`;

package/src/__tests__/__snapshots__/mark-label.test.jsx.snap

@@ -1,37 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`MarkLabel snapshot renders 1`] = `
-<AutosizeInput
-  injectStyles={true}
-  inputClassName=""
-  inputRef={[Function]}
-  minWidth={1}
-  onChange={[Function]}
-  style={
-    Object {
-      "left": -9,
-      "pointerEvents": "auto",
-      "position": "fixed",
-      "top": -9,
-    }
-  }
-/>
-`;
-
-exports[`MarkLabel snapshot renders 2`] = `
-<AutosizeInput
-  injectStyles={true}
-  inputClassName=""
-  inputRef={[Function]}
-  minWidth={1}
-  onChange={[Function]}
-  style={
-    Object {
-      "left": 0,
-      "pointerEvents": "auto",
-      "position": "fixed",
-      "top": 0,
-    }
-  }
-/>
-`;

package/src/__tests__/__snapshots__/toggle-bar.test.jsx.snap

@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ToggleBar snapshot renders 1`] = `
-<div
-  className="className"
-/>
-`;