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

package/src/tool-menu.jsx

@@ -1,294 +1,235 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Typography, Button } from '@material-ui/core';
-import Radio from '@material-ui/core/Radio';
-import { withStyles } from '@material-ui/core/styles';
+import { Typography, Button, Radio } from '@mui/material';
+import { styled } from '@mui/material/styles';
 
 export class ToolMenu extends React.Component {
   static propTypes = {
-    classes: PropTypes.object,
     gssLineData: PropTypes.object,
     disabled: PropTypes.bool,
     onChange: PropTypes.func,
   };
 
+  onChangeRadioValue = (event) => {
+    let { gssLineData, onChange } = this.props;
+    let oldSelectedTool = gssLineData.selectedTool;
+    gssLineData.selectedTool = event.target.value;
+    onChange(gssLineData, oldSelectedTool);
+  };
+
+  lineTypeChange = (line, type) => {
+    let { gssLineData, onChange } = this.props;
+    let oldSelectedTool = gssLineData.selectedTool;
+    gssLineData[`line${line}`].lineType = type;
+    onChange(gssLineData, oldSelectedTool);
+  };
+
   render() {
-    let { classes, gssLineData, disabled } = this.props;
+    const { gssLineData, disabled } = this.props;
 
     return (
-      <div className={classes.selectLineRadioGroup}>
-        <div className={classes.radioFieldOuter}>
-          <div className={classes.radioFieldInner}>
-            <Radio
-              name={'select-line-radio-buttons'}
-              onChange={this.onChangeRadioValue}
-              value={'lineA'}
-              disabled={!!disabled}
-              checked={gssLineData.selectedTool === 'lineA'}
-              className={classes.lineTypeRadio}
-            />
-            <Typography className={classes.lineNameFont}>Line A</Typography>
-          </div>
-          <div className={classes.radioFieldButtons}>
-            {gssLineData.lineA.lineType === 'Solid' ? (
-              <Button
-                size={'small'}
-                variant={'contained'}
-                color={'primary'}
-                onClick={() => this.lineTypeChange('A', 'Solid')}
-                className={disabled ? classes.lineTypeButtonLeftSelectedDisabled : classes.lineTypeButtonLeftSelected}
-              >
-                &#x2714; Solid
-              </Button>
-            ) : (
+      <Root>
+        <div className="selectLineRadioGroup">
+          {/* LINE A */}
+          <div className="radioFieldOuter">
+            <div className="radioFieldInner">
+              <Radio
+                name="select-line-radio-buttons"
+                onChange={this.onChangeRadioValue}
+                value="lineA"
+                disabled={!!disabled}
+                checked={gssLineData.selectedTool === 'lineA'}
+                className="lineTypeRadio"
+              />
+              <Typography className="lineNameFont">Line A</Typography>
+            </div>
+            <div className="radioFieldButtons">
               <Button
-                size={'small'}
-                variant={'contained'}
+                size="small"
+                variant="contained"
+                color={gssLineData.lineA.lineType === 'Solid' ? 'primary' : 'inherit'}
                 disabled={!!disabled}
                 onClick={() => this.lineTypeChange('A', 'Solid')}
                 className={
-                  disabled ? classes.lineTypeButtonLeftUnSelectedDisabled : classes.lineTypeButtonLeftUnSelected
+                  gssLineData.lineA.lineType === 'Solid'
+                    ? disabled
+                      ? 'lineTypeButtonLeftSelectedDisabled'
+                      : 'lineTypeButtonLeftSelected'
+                    : disabled
+                      ? 'lineTypeButtonLeftUnSelectedDisabled'
+                      : 'lineTypeButtonLeftUnSelected'
                 }
               >
-                Solid
+                {gssLineData.lineA.lineType === 'Solid' && '✔'} Solid
               </Button>
-            )}
-            {gssLineData.lineA.lineType === 'Dashed' ? (
-              <Button
-                size={'small'}
-                variant={'contained'}
-                color={'primary'}
-                onClick={() => this.lineTypeChange('A', 'Dashed')}
-                className={disabled ? classes.lineTypeButtonRightSelectedDisabled : classes.lineTypeButtonRightSelected}
-              >
-                &#x2714; Dashed
-              </Button>
-            ) : (
+
               <Button
-                size={'small'}
-                variant={'contained'}
+                size="small"
+                variant="contained"
+                color={gssLineData.lineA.lineType === 'Dashed' ? 'primary' : 'inherit'}
                 disabled={!!disabled}
                 onClick={() => this.lineTypeChange('A', 'Dashed')}
                 className={
-                  disabled ? classes.lineTypeButtonRightUnSelectedDisabled : classes.lineTypeButtonRightUnSelected
+                  gssLineData.lineA.lineType === 'Dashed'
+                    ? disabled
+                      ? 'lineTypeButtonRightSelectedDisabled'
+                      : 'lineTypeButtonRightSelected'
+                    : disabled
+                      ? 'lineTypeButtonRightUnSelectedDisabled'
+                      : 'lineTypeButtonRightUnSelected'
                 }
               >
-                Dashed
+                {gssLineData.lineA.lineType === 'Dashed' && '✔'} Dashed
               </Button>
-            )}
-          </div>
-        </div>
-        {gssLineData.numberOfLines === 2 ? (
-          <div className={classes.radioFieldOuter}>
-            <div className={classes.radioFieldInner}>
-              <Radio
-                name={'select-line-radio-buttons'}
-                onChange={this.onChangeRadioValue}
-                value={'lineB'}
-                disabled={!!disabled}
-                checked={gssLineData.selectedTool === 'lineB'}
-                className={classes.lineTypeRadio}
-              />
-              <Typography className={classes.lineNameFont}>Line B</Typography>
             </div>
-            <div className={classes.radioFieldButtons}>
-              {gssLineData.lineB.lineType === 'Solid' ? (
-                <Button
-                  size={'small'}
-                  variant={'contained'}
-                  color={'primary'}
-                  onClick={() => this.lineTypeChange('B', 'Solid')}
-                  className={disabled ? classes.lineTypeButtonLeftSelectedDisabled : classes.lineTypeButtonLeftSelected}
-                >
-                  &#x2714; Solid
-                </Button>
-              ) : (
+          </div>
+
+          {/* LINE B (if applicable) */}
+          {gssLineData.numberOfLines === 2 && (
+            <div className="radioFieldOuter">
+              <div className="radioFieldInner">
+                <Radio
+                  name="select-line-radio-buttons"
+                  onChange={this.onChangeRadioValue}
+                  value="lineB"
+                  disabled={!!disabled}
+                  checked={gssLineData.selectedTool === 'lineB'}
+                  className="lineTypeRadio"
+                />
+                <Typography className="lineNameFont">Line B</Typography>
+              </div>
+              <div className="radioFieldButtons">
                 <Button
-                  size={'small'}
-                  variant={'contained'}
+                  size="small"
+                  variant="contained"
+                  color={gssLineData.lineB.lineType === 'Solid' ? 'primary' : 'inherit'}
                   disabled={!!disabled}
                   onClick={() => this.lineTypeChange('B', 'Solid')}
                   className={
-                    disabled ? classes.lineTypeButtonLeftUnSelectedDisabled : classes.lineTypeButtonLeftUnSelected
-                  }
-                >
-                  Solid
-                </Button>
-              )}
-              {gssLineData.lineB.lineType === 'Dashed' ? (
-                <Button
-                  size={'small'}
-                  variant={'contained'}
-                  color={'primary'}
-                  onClick={() => this.lineTypeChange('B', 'Dashed')}
-                  className={
-                    disabled ? classes.lineTypeButtonRightSelectedDisabled : classes.lineTypeButtonRightSelected
+                    gssLineData.lineB.lineType === 'Solid'
+                      ? disabled
+                        ? 'lineTypeButtonLeftSelectedDisabled'
+                        : 'lineTypeButtonLeftSelected'
+                      : disabled
+                        ? 'lineTypeButtonLeftUnSelectedDisabled'
+                        : 'lineTypeButtonLeftUnSelected'
                   }
                 >
-                  &#x2714; Dashed
+                  {gssLineData.lineB.lineType === 'Solid' && '✔'} Solid
                 </Button>
-              ) : (
+
                 <Button
-                  size={'small'}
-                  variant={'contained'}
+                  size="small"
+                  variant="contained"
+                  color={gssLineData.lineB.lineType === 'Dashed' ? 'primary' : 'inherit'}
                   disabled={!!disabled}
                   onClick={() => this.lineTypeChange('B', 'Dashed')}
                   className={
-                    disabled ? classes.lineTypeButtonRightUnSelectedDisabled : classes.lineTypeButtonRightUnSelected
+                    gssLineData.lineB.lineType === 'Dashed'
+                      ? disabled
+                        ? 'lineTypeButtonRightSelectedDisabled'
+                        : 'lineTypeButtonRightSelected'
+                      : disabled
+                        ? 'lineTypeButtonRightUnSelectedDisabled'
+                        : 'lineTypeButtonRightUnSelected'
                   }
                 >
-                  Dashed
+                  {gssLineData.lineB.lineType === 'Dashed' && '✔'} Dashed
                 </Button>
-              )}
+              </div>
+            </div>
+          )}
+
+          {/* SOLUTION SET */}
+          <div className="radioFieldOuter">
+            <div className="radioFieldInner">
+              <Radio
+                name="select-line-radio-buttons"
+                onChange={this.onChangeRadioValue}
+                value="solutionSet"
+                disabled={!!disabled}
+                checked={gssLineData.selectedTool === 'solutionSet'}
+                className="lineTypeRadio"
+              />
+              <Typography className="lineNameFont">Solution Set</Typography>
             </div>
-          </div>
-        ) : null}
-        <div className={classes.radioFieldOuter}>
-          <div className={classes.radioFieldInner}>
-            <Radio
-              name={'select-line-radio-buttons'}
-              onChange={this.onChangeRadioValue}
-              value={'solutionSet'}
-              disabled={!!disabled}
-              checked={gssLineData.selectedTool === 'solutionSet'}
-              className={classes.lineTypeRadio}
-            />
-            <Typography className={classes.lineNameFont}>Solution Set</Typography>
           </div>
         </div>
-      </div>
+      </Root>
     );
   }
-
-  onChangeRadioValue = (event) => {
-    let { gssLineData, onChange } = this.props;
-    let oldSelectedTool = gssLineData.selectedTool;
-    gssLineData.selectedTool = event.target.value;
-    onChange(gssLineData, oldSelectedTool);
-  };
-
-  lineTypeChange = (line, type) => {
-    let { gssLineData, onChange } = this.props;
-    let oldSelectedTool = gssLineData.selectedTool;
-    gssLineData[`line${line}`].lineType = type;
-    onChange(gssLineData, oldSelectedTool);
-  };
 }
 
-const styles = (theme) => ({
-  radioButtonClass: {},
-  selectLineRadioGroup: {
+const Root = styled('div')(() => ({
+  '& .selectLineRadioGroup': {
     display: 'flex',
     flexWrap: 'wrap',
     flexDirection: 'row',
   },
-  radioFieldInner: {
+  '& .radioFieldOuter': {
     display: 'flex',
     flexWrap: 'wrap',
-    flexDirection: 'row',
-    alignItems: 'center',
+    flexDirection: 'column',
   },
-  radioFieldOuter: {
+  '& .radioFieldInner': {
     display: 'flex',
     flexWrap: 'wrap',
-    flexDirection: 'column',
+    flexDirection: 'row',
+    alignItems: 'center',
   },
-  radioFieldButtons: {
+  '& .radioFieldButtons': {
     display: 'flex',
     flexWrap: 'wrap',
     flexDirection: 'row',
     padding: '0 .9rem',
   },
-  lineTypeText: {
-    marginLeft: '.7rem',
-  },
-  lineNameFont: {
+  '& .lineNameFont': {
     fontWeight: 'bold',
     padding: '0 5px 0 0',
   },
-  lineTypeButtonLeftSelected: {
-    textTransform: 'none',
-    border: '1px solid #3E4EB1',
-    borderRadius: '0',
-    backgroundColor: '#3E4EB1 !important',
-    borderTopLeftRadius: '4px',
-    borderBottomLeftRadius: '4px',
-    color: '#FFFFFF !important',
-  },
-  lineTypeButtonLeftUnSelected: {
-    textTransform: 'none',
-    border: '1px solid #3E4EB1',
-    borderRadius: '0',
-    backgroundColor: '#FFFFFF !important',
-    borderTopLeftRadius: '4px',
-    borderBottomLeftRadius: '4px',
-    color: '#3E4EB1 !important',
+  '& .lineTypeRadio': {
+    color: '#000000 !important',
   },
-  lineTypeButtonRightSelected: {
+  '& .lineTypeButtonLeftSelected': {
     textTransform: 'none',
     border: '1px solid #3E4EB1',
-    borderRadius: '0',
     backgroundColor: '#3E4EB1 !important',
-    borderTopRightRadius: '4px',
-    borderBottomRightRadius: '4px',
     color: '#FFFFFF !important',
+    borderRadius: '4px 0 0 4px',
   },
-  lineTypeButtonRightUnSelected: {
+  '& .lineTypeButtonLeftUnSelected': {
     textTransform: 'none',
     border: '1px solid #3E4EB1',
-    borderRadius: '0',
     backgroundColor: '#FFFFFF !important',
-    borderTopRightRadius: '4px',
-    borderBottomRightRadius: '4px',
     color: '#3E4EB1 !important',
+    borderRadius: '4px 0 0 4px',
   },
-  lineTypeRadio: {
-    color: '#000000 !important',
-  },
-  lineTypeButtonLeftSelectedDisabled: {
+  '& .lineTypeButtonRightSelected': {
     textTransform: 'none',
     border: '1px solid #3E4EB1',
-    borderRadius: '0',
     backgroundColor: '#3E4EB1 !important',
-    borderTopLeftRadius: '4px',
-    borderBottomLeftRadius: '4px',
     color: '#FFFFFF !important',
-    cursor: 'default',
-    pointerEvents: 'none',
+    borderRadius: '0 4px 4px 0',
   },
-  lineTypeButtonLeftUnSelectedDisabled: {
+  '& .lineTypeButtonRightUnSelected': {
     textTransform: 'none',
     border: '1px solid #3E4EB1',
-    borderRadius: '0',
     backgroundColor: '#FFFFFF !important',
-    borderTopLeftRadius: '4px',
-    borderBottomLeftRadius: '4px',
     color: '#3E4EB1 !important',
-    cursor: 'default',
-    pointerEvents: 'none',
+    borderRadius: '0 4px 4px 0',
   },
-  lineTypeButtonRightSelectedDisabled: {
-    textTransform: 'none',
-    border: '1px solid #3E4EB1',
-    borderRadius: '0',
+  '& .lineTypeButtonLeftSelectedDisabled, & .lineTypeButtonRightSelectedDisabled': {
     backgroundColor: '#3E4EB1 !important',
-    borderTopRightRadius: '4px',
-    borderBottomRightRadius: '4px',
     color: '#FFFFFF !important',
     cursor: 'default',
     pointerEvents: 'none',
   },
-  lineTypeButtonRightUnSelectedDisabled: {
-    textTransform: 'none',
-    border: '1px solid #3E4EB1',
-    borderRadius: '0',
+  '& .lineTypeButtonLeftUnSelectedDisabled, & .lineTypeButtonRightUnSelectedDisabled': {
     backgroundColor: '#FFFFFF !important',
-    borderTopRightRadius: '4px',
-    borderBottomRightRadius: '4px',
     color: '#3E4EB1 !important',
     cursor: 'default',
     pointerEvents: 'none',
   },
-});
+}));
 
-export default withStyles(styles)(ToolMenu);
+export default ToolMenu;

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

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

package/src/tools/line/component.jsx

@@ -2,28 +2,33 @@ import { lineToolComponent, lineBase, styles } from '../shared/line';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { trig, types } from '@pie-lib/plot';
-import classNames from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 import { ArrowMarker, genUid } from '../shared/arrow-head';
 import { thinnerShapesNeeded, getAdjustedGraphLimits } from '../../utils';
 
-const lineStyles = (theme) => ({
-  line: styles.line(theme),
-  dashedLine: styles.dashedLine(theme),
-  enabledArrow: styles.arrow(theme),
-  disabledArrow: styles.disabledArrow(theme),
-  disabled: styles.disabled(theme),
-  correct: styles.correct(theme, 'stroke'),
-  correctArrow: styles.correct(theme),
-  incorrect: styles.incorrect(theme, 'stroke'),
-  incorrectArrow: styles.incorrect(theme),
-  missing: styles.missing(theme, 'stroke'),
-  missingArrow: styles.missing(theme),
-});
+const StyledLine = styled('line', {
+  shouldForwardProp: (prop) => !['fill', 'disabled', 'correctness'].includes(prop),
+})(({ theme, fill, disabled, correctness }) => ({
+  ...(fill === 'Solid' ? styles.line(theme) : styles.dashedLine(theme)),
+  ...(disabled && styles.disabled(theme)),
+  ...(correctness === 'correct' && styles.correct(theme, 'stroke')),
+  ...(correctness === 'incorrect' && styles.incorrect(theme, 'stroke')),
+  ...(correctness === 'missing' && styles.missing(theme, 'stroke')),
+}));
+
+const StyledArrowMarker = styled(ArrowMarker, {
+  shouldForwardProp: (prop) => !['suffix'].includes(prop),
+})(({ theme, suffix }) => ({
+  ...(suffix === 'enabled' && styles.arrow(theme)),
+  ...(suffix === 'disabled' && styles.disabledArrow(theme)),
+  ...(suffix === 'correct' && styles.correct(theme)),
+  ...(suffix === 'incorrect' && styles.incorrect(theme)),
+  ...(suffix === 'missing' && styles.missing(theme)),
+}));
 
 export const ArrowedLine = (props) => {
   const markerId = genUid();
-  const { className, classes, correctness, disabled, graphProps, fill = 'Solid', from, to, ...rest } = props;
+  const { className, correctness, disabled, graphProps, fill = 'Solid', from, to, ...rest } = props;
   const { scale } = graphProps;
   const { domain, range } = getAdjustedGraphLimits(graphProps);
   const [eFrom, eTo] = trig.edges(domain, range)(from, to);
@@ -32,23 +37,21 @@ export const ArrowedLine = (props) => {
   return (
     <g>
       <defs>
-        <ArrowMarker
+        <StyledArrowMarker
           size={thinnerShapesNeeded(graphProps) ? 4 : 5}
           id={`${props.markerId || markerId}-${suffix}`}
-          className={classNames(classes[`${suffix}Arrow`])}
+          suffix={suffix}
         />
       </defs>
-      <line
+      <StyledLine
         x1={scale.x(eFrom.x)}
         y1={scale.y(eFrom.y)}
         x2={scale.x(eTo.x)}
         y2={scale.y(eTo.y)}
-        className={classNames(
-          fill === 'Solid' ? classes.line : classes.dashedLine,
-          disabled && classes.disabled,
-          classes[correctness],
-          className,
-        )}
+        fill={fill}
+        disabled={disabled}
+        correctness={correctness}
+        className={className}
         markerEnd={`url(#${props.markerId || markerId}-${suffix})`}
         markerStart={`url(#${props.markerId || markerId}-${suffix})`}
         {...rest}
@@ -59,7 +62,6 @@ export const ArrowedLine = (props) => {
 
 ArrowedLine.propTypes = {
   className: PropTypes.string,
-  classes: PropTypes.object,
   fill: PropTypes.string,
   correctness: PropTypes.string,
   disabled: PropTypes.bool,
@@ -69,9 +71,7 @@ ArrowedLine.propTypes = {
   markerId: PropTypes.string,
 };
 
-const StyledArrowedLine = withStyles(lineStyles)(ArrowedLine);
-
-const Line = lineBase(StyledArrowedLine);
+const Line = lineBase(ArrowedLine);
 const Component = lineToolComponent(Line);
 
 export default Component;