@pie-lib/graphing 2.34.3-next.0 → 2.34.3-next.162

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

@@ -1,22 +1,20 @@
-import { withStyles } from '@material-ui/core/styles/index';
+import React from 'react';
+import { styled } from '@mui/material/styles';
 import { gridDraggable } from '@pie-lib/plot';
 import * as utils from '../../../utils';
-import { disabled, correct, incorrect, missing, disabledSecondary } from '../styles';
 import { RawBp } from './base-point';
 import { RawArrow } from './arrow-point';
-import { color } from '@pie-lib/render-ui';
-import BaseArrow from './arrow';
+import { BaseArrow } from './arrow';
 
+// Drag & bounds options
 const opts = {
   bounds: (props, { domain, range }) => {
     const { x, y } = props;
     const area = { left: x, top: y, bottom: y, right: x };
-
     return utils.bounds(area, domain, range);
   },
   anchorPoint: (props) => {
     const { x, y } = props;
-
     return { x, y };
   },
   fromDelta: (props, delta) => {
@@ -24,42 +22,27 @@ const opts = {
   },
 };
 
-const styles = () => {
-  return {
-    point: {
-      '& circle, & polygon': {
-        cursor: 'pointer',
-        fill: color.defaults.BLACK,
-      },
-    },
-    disabled: {
-      '& circle, & polygon': {
-        ...disabled(),
-      },
-    },
-    disabledSecondary: {
-      '& circle, & polygon': {
-        ...disabledSecondary(),
-      },
-    },
-    correct: {
-      '& circle, & polygon': {
-        ...correct(),
-      },
-    },
-    incorrect: {
-      '& circle, & polygon': {
-        ...incorrect(),
-      },
-    },
-    missing: {
-      '& circle, & polygon': {
-        ...missing(),
-      },
-    },
-  };
-};
+// Common styled point
+const PointStyle = styled('g')(() => ({
+  '& circle, & polygon': {
+    cursor: 'pointer',
+  },
+}));
+
+export const BasePoint = gridDraggable(opts)((props) => (
+  <PointStyle {...props}>
+    <RawBp {...props} />
+  </PointStyle>
+));
+
+export const ArrowPoint = gridDraggable(opts)((props) => (
+  <PointStyle {...props}>
+    <RawArrow {...props} />
+  </PointStyle>
+));
 
-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 Arrow = gridDraggable(opts)((props) => (
+  <PointStyle {...props}>
+    <BaseArrow {...props} />
+  </PointStyle>
+));

package/src/tools/vector/__tests__/component.test.jsx

@@ -1,12 +1,11 @@
-import { shallow } from 'enzyme';
+import { render } from '@pie-lib/test-utils';
 import React from 'react';
 import { Line } from '../component';
 import { graphProps as getGraphProps } from '../../../__tests__/utils';
 import { utils } from '@pie-lib/plot';
 
 describe('Line', () => {
-  let w;
-  const wrapper = (extras) => {
+  const renderComponent = (extras) => {
     const defaults = {
       classes: {},
       className: 'className',
@@ -15,12 +14,12 @@ describe('Line', () => {
       to: utils.xy(1, 1),
     };
     const props = { ...defaults, ...extras };
-    return shallow(<Line {...props} />);
+    return render(<Line {...props} />);
   };
-  describe('snapshot', () => {
-    it('renders', () => {
-      const w = wrapper();
-      expect(w).toMatchSnapshot();
+  describe('rendering', () => {
+    it('renders without crashing', () => {
+      const { container } = renderComponent();
+      expect(container.firstChild).toBeInTheDocument();
     });
   });
 });

package/src/tools/vector/component.jsx

@@ -3,23 +3,18 @@ import { Arrow } from '../shared/point';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { types } from '@pie-lib/plot';
-import classNames from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 import { getDistanceBetweenTwoPoints } from '../../utils';
 
-const lineStyles = (theme) => ({
-  line: styles.line(theme),
-  disabled: styles.disabled(theme),
-  disabledSecondary: styles.disabledSecondary(theme),
-  correct: styles.correct(theme, 'stroke'),
-  incorrect: styles.incorrect(theme, 'stroke'),
-  missing: styles.missing(theme, 'stroke'),
-});
+const StyledLine = styled('line')(({ theme, disabled, correctness }) => ({
+  ...styles.line(theme),
+  ...(disabled && styles.disabledSecondary(theme)),
+  ...(correctness && styles[correctness] && styles[correctness](theme, 'stroke')),
+}));
 
 export const Line = (props) => {
   const {
     className,
-    classes,
     disabled,
     correctness,
     graphProps: { scale },
@@ -32,8 +27,10 @@ export const Line = (props) => {
   const length = getDistanceBetweenTwoPoints(startPoint, endPoint);
 
   return (
-    <line
-      className={classNames(classes.line, disabled && classes.disabledSecondary, classes[correctness], className)}
+    <StyledLine
+      className={className}
+      disabled={disabled}
+      correctness={correctness}
       x1={startPoint.x}
       y1={startPoint.y}
       x2={endPoint.x}
@@ -46,7 +43,6 @@ export const Line = (props) => {
 
 Line.propTypes = {
   className: PropTypes.string,
-  classes: PropTypes.object,
   disabled: PropTypes.bool,
   correctness: PropTypes.string,
   graphProps: PropTypes.any,
@@ -54,8 +50,7 @@ Line.propTypes = {
   to: types.PointType,
 };
 
-const StyledLine = withStyles(lineStyles)(Line);
-const Vector = lineBase(StyledLine, { to: Arrow });
+const Vector = lineBase(Line, { to: Arrow });
 const Component = lineToolComponent(Vector);
 
 export default Component;

package/src/undo-redo.jsx

@@ -1,16 +1,24 @@
 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 Button from '@mui/material/Button';
+import { styled } from '@mui/material/styles';
 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,
     onUndo: PropTypes.func.isRequired,
     onRedo: PropTypes.func.isRequired,
@@ -20,31 +28,21 @@ export class UndoRedo extends React.Component {
   static defaultProps = {};
 
   render() {
-    const { classes, className, onUndo, onRedo, onReset, language } = this.props;
+    const { className, onUndo, onRedo, onReset, language } = this.props;
     return (
       <div className={classNames(className)}>
-        <Button classes={{ root: classes.button }} onClick={() => onUndo(true)}>
+        <StyledButton onClick={() => onUndo(true)}>
           {translator.t('common:undo', { lng: language })}
-        </Button>
-        <Button classes={{ root: classes.button }} onClick={() => onRedo(true)}>
+        </StyledButton>
+        <StyledButton onClick={() => onRedo(true)}>
           {translator.t('graphing.redo', { lng: language })}
-        </Button>
-        <Button classes={{ root: classes.button }} onClick={() => onReset()}>
+        </StyledButton>
+        <StyledButton onClick={() => onReset()}>
           {translator.t('graphing.reset', { lng: language })}
-        </Button>
+        </StyledButton>
       </div>
     );
   }
 }
 
-const styles = (theme) => ({
-  button: {
-    color: color.text(),
-    marginBottom: theme.spacing.unit / 2,
-    '&:not(:last-of-type)': {
-      marginRight: theme.spacing.unit / 2,
-    },
-  },
-});
-
-export default withStyles(styles)(UndoRedo);
+export default UndoRedo;

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

@@ -1,237 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`GraphWithControls snapshot renders 1`] = `
-<div
-  className=""
->
-  <div>
-    <ToolMenu
-      currentToolType="circle"
-      disabled={false}
-      labelModeEnabled={false}
-      onChange={[Function]}
-      toolbarTools={
-        Array [
-          "circle",
-          "line",
-          "label",
-          "parabola",
-          "point",
-          "polygon",
-          "ray",
-          "segment",
-          "sine",
-          "vector",
-          "absolute",
-          "exponential",
-        ]
-      }
-    />
-    <WithStyles(UndoRedo) />
-  </div>
-  <div />
-  <Graph
-    axesSettings={
-      Object {
-        "includeArrows": true,
-      }
-    }
-    backgroundMarks={
-      Array [
-        Object {
-          "label": "Point",
-          "showLabel": true,
-          "type": "point",
-          "x": 2,
-          "y": 2,
-        },
-        Object {
-          "building": true,
-          "from": Object {
-            "x": 0,
-            "y": 0,
-          },
-          "label": "Line",
-          "to": Object {
-            "x": 1,
-            "y": 1,
-          },
-          "type": "line",
-        },
-        Object {
-          "edge": Object {
-            "x": 0,
-            "y": 0,
-          },
-          "root": Object {
-            "x": 2,
-            "y": 2,
-          },
-          "type": "line",
-        },
-      ]
-    }
-    coordinatesOnHover={false}
-    currentTool={
-      Object {
-        "Component": [Function],
-        "addPoint": [Function],
-        "hover": [Function],
-        "toolbar": true,
-        "type": "circle",
-      }
-    }
-    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 {
-          "label": "Point",
-          "showLabel": true,
-          "type": "point",
-          "x": 2,
-          "y": 2,
-        },
-        Object {
-          "building": true,
-          "from": Object {
-            "x": 0,
-            "y": 0,
-          },
-          "label": "Line",
-          "to": Object {
-            "x": 1,
-            "y": 1,
-          },
-          "type": "line",
-        },
-        Object {
-          "edge": Object {
-            "x": 0,
-            "y": 0,
-          },
-          "root": Object {
-            "x": 2,
-            "y": 2,
-          },
-          "type": "line",
-        },
-      ]
-    }
-    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],
-          "hover": [Function],
-          "toolbar": true,
-          "type": "circle",
-        },
-        Object {
-          "Component": [Function],
-          "addPoint": [Function],
-          "toolbar": true,
-          "type": "line",
-        },
-        Object {
-          "Component": [Function],
-          "addPoint": [Function],
-          "complete": [Function],
-          "toolbar": true,
-          "type": "parabola",
-        },
-        Object {
-          "Component": [Function],
-          "addPoint": [Function],
-          "label": "Point",
-          "toolbar": true,
-          "type": "point",
-        },
-        Object {
-          "Component": [Function],
-          "addPoint": [Function],
-          "complete": [Function],
-          "toolbar": true,
-          "type": "polygon",
-        },
-        Object {
-          "Component": [Function],
-          "addPoint": [Function],
-          "toolbar": true,
-          "type": "ray",
-        },
-        Object {
-          "Component": [Function],
-          "addPoint": [Function],
-          "toolbar": true,
-          "type": "segment",
-        },
-        Object {
-          "Component": [Function],
-          "addPoint": [Function],
-          "complete": [Function],
-          "toolbar": true,
-          "type": "sine",
-        },
-        Object {
-          "Component": [Function],
-          "addPoint": [Function],
-          "toolbar": true,
-          "type": "vector",
-        },
-        Object {
-          "Component": [Function],
-          "addPoint": [Function],
-          "complete": [Function],
-          "toolbar": true,
-          "type": "absolute",
-        },
-        Object {
-          "Component": [Function],
-          "addPoint": [Function],
-          "complete": [Function],
-          "toolbar": true,
-          "type": "exponential",
-        },
-        Object {
-          "toolbar": true,
-          "type": "label",
-        },
-      ]
-    }
-  />
-</div>
-`;

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

@@ -1,211 +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')"
-    >
-      <Point
-        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={false}
-        key="point-0"
-        mark={
-          Object {
-            "label": "Point",
-            "showLabel": true,
-            "type": "point",
-            "x": 2,
-            "y": 2,
-          }
-        }
-        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)>
-`;