@pie-lib/tools 0.29.1 → 0.30.0-mui-update.0

package/lib/transform-origin.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.parse = void 0;
-
 var keyWordToPercent = function keyWordToPercent(v) {
   if (v === 'left' || v === 'top') {
     return 0;
@@ -18,7 +17,6 @@ var keyWordToPercent = function keyWordToPercent(v) {
     return v;
   }
 };
-
 var getValue = function getValue(s, length) {
   if (s.endsWith('px')) {
     return parseFloat(s);
@@ -28,7 +26,6 @@ var getValue = function getValue(s, length) {
     return v;
   }
 };
-
 var normalize = function normalize(a) {
   if (a[0] === 'bottom' || a[0] === 'top' || a[1] === 'left' || a[1] === 'right') {
     return [a[1], a[0]];
@@ -36,24 +33,21 @@ var normalize = function normalize(a) {
     return a;
   }
 };
+
 /**
  * Parse a transform origin string to x/y values.
  * @param {{width: number, height: number}} rect
  * @param {string} value
  * @returns {x:number, y:number}
  */
-
-
-var parse = function parse(rect, value) {
+var parse = exports.parse = function parse(rect, value) {
   if (!value) {
     return {
       x: rect.width / 2,
       y: rect.height / 2
     };
   }
-
   var arr = value.split(' ');
-
   if (arr.length === 1) {
     //1 val
     var x = getValue(arr[0], rect.width);
@@ -64,11 +58,8 @@ var parse = function parse(rect, value) {
     };
   } else if (arr.length === 2) {
     var sorted = normalize(arr);
-
     var _x = getValue(sorted[0], rect.width);
-
     var _y = getValue(sorted[1], rect.height);
-
     return {
       x: _x,
       y: _y
@@ -77,6 +68,4 @@ var parse = function parse(rect, value) {
     throw new Error('transform-origin values with 3 fields not supported.');
   }
 };
-
-exports.parse = parse;
 //# sourceMappingURL=transform-origin.js.map

package/lib/transform-origin.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/transform-origin.jsx"],"names":["keyWordToPercent","v","endsWith","parseFloat","getValue","s","length","normalize","a","parse","rect","value","x","width","y","height","arr","split","sorted","Error"],"mappings":"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","sourcesContent":["const keyWordToPercent = (v) => {\n  if (v === 'left' || v === 'top') {\n    return 0;\n  } else if (v === 'right' || v === 'bottom') {\n    return 100;\n  } else if (v === 'center') {\n    return 50;\n  } else if (v.endsWith('%')) {\n    return parseFloat(v);\n  } else {\n    return v;\n  }\n};\n\nconst getValue = (s, length) => {\n  if (s.endsWith('px')) {\n    return parseFloat(s);\n  } else {\n    s = keyWordToPercent(s);\n    const v = length * (s / 100);\n    return v;\n  }\n};\n\nconst normalize = (a) => {\n  if (a[0] === 'bottom' || a[0] === 'top' || a[1] === 'left' || a[1] === 'right') {\n    return [a[1], a[0]];\n  } else {\n    return a;\n  }\n};\n\n/**\n * Parse a transform origin string to x/y values.\n * @param {{width: number, height: number}} rect\n * @param {string} value\n * @returns {x:number, y:number}\n */\nexport const parse = (rect, value) => {\n  if (!value) {\n    return {\n      x: rect.width / 2,\n      y: rect.height / 2,\n    };\n  }\n  const arr = value.split(' ');\n  if (arr.length === 1) {\n    //1 val\n    const x = getValue(arr[0], rect.width);\n    const y = getValue('50%', rect.height);\n    return { x, y };\n  } else if (arr.length === 2) {\n    const sorted = normalize(arr);\n    const x = getValue(sorted[0], rect.width);\n    const y = getValue(sorted[1], rect.height);\n    return { x, y };\n  } else if (arr.length === 3) {\n    throw new Error('transform-origin values with 3 fields not supported.');\n  }\n};\n"],"file":"transform-origin.js"}
+{"version":3,"file":"transform-origin.js","names":["keyWordToPercent","v","endsWith","parseFloat","getValue","s","length","normalize","a","parse","exports","rect","value","x","width","y","height","arr","split","sorted","Error"],"sources":["../src/transform-origin.jsx"],"sourcesContent":["const keyWordToPercent = (v) => {\n  if (v === 'left' || v === 'top') {\n    return 0;\n  } else if (v === 'right' || v === 'bottom') {\n    return 100;\n  } else if (v === 'center') {\n    return 50;\n  } else if (v.endsWith('%')) {\n    return parseFloat(v);\n  } else {\n    return v;\n  }\n};\n\nconst getValue = (s, length) => {\n  if (s.endsWith('px')) {\n    return parseFloat(s);\n  } else {\n    s = keyWordToPercent(s);\n    const v = length * (s / 100);\n    return v;\n  }\n};\n\nconst normalize = (a) => {\n  if (a[0] === 'bottom' || a[0] === 'top' || a[1] === 'left' || a[1] === 'right') {\n    return [a[1], a[0]];\n  } else {\n    return a;\n  }\n};\n\n/**\n * Parse a transform origin string to x/y values.\n * @param {{width: number, height: number}} rect\n * @param {string} value\n * @returns {x:number, y:number}\n */\nexport const parse = (rect, value) => {\n  if (!value) {\n    return {\n      x: rect.width / 2,\n      y: rect.height / 2,\n    };\n  }\n  const arr = value.split(' ');\n  if (arr.length === 1) {\n    //1 val\n    const x = getValue(arr[0], rect.width);\n    const y = getValue('50%', rect.height);\n    return { x, y };\n  } else if (arr.length === 2) {\n    const sorted = normalize(arr);\n    const x = getValue(sorted[0], rect.width);\n    const y = getValue(sorted[1], rect.height);\n    return { x, y };\n  } else if (arr.length === 3) {\n    throw new Error('transform-origin values with 3 fields not supported.');\n  }\n};\n"],"mappings":";;;;;;AAAA,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAIC,CAAC,EAAK;EAC9B,IAAIA,CAAC,KAAK,MAAM,IAAIA,CAAC,KAAK,KAAK,EAAE;IAC/B,OAAO,CAAC;EACV,CAAC,MAAM,IAAIA,CAAC,KAAK,OAAO,IAAIA,CAAC,KAAK,QAAQ,EAAE;IAC1C,OAAO,GAAG;EACZ,CAAC,MAAM,IAAIA,CAAC,KAAK,QAAQ,EAAE;IACzB,OAAO,EAAE;EACX,CAAC,MAAM,IAAIA,CAAC,CAACC,QAAQ,CAAC,GAAG,CAAC,EAAE;IAC1B,OAAOC,UAAU,CAACF,CAAC,CAAC;EACtB,CAAC,MAAM;IACL,OAAOA,CAAC;EACV;AACF,CAAC;AAED,IAAMG,QAAQ,GAAG,SAAXA,QAAQA,CAAIC,CAAC,EAAEC,MAAM,EAAK;EAC9B,IAAID,CAAC,CAACH,QAAQ,CAAC,IAAI,CAAC,EAAE;IACpB,OAAOC,UAAU,CAACE,CAAC,CAAC;EACtB,CAAC,MAAM;IACLA,CAAC,GAAGL,gBAAgB,CAACK,CAAC,CAAC;IACvB,IAAMJ,CAAC,GAAGK,MAAM,IAAID,CAAC,GAAG,GAAG,CAAC;IAC5B,OAAOJ,CAAC;EACV;AACF,CAAC;AAED,IAAMM,SAAS,GAAG,SAAZA,SAASA,CAAIC,CAAC,EAAK;EACvB,IAAIA,CAAC,CAAC,CAAC,CAAC,KAAK,QAAQ,IAAIA,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,IAAIA,CAAC,CAAC,CAAC,CAAC,KAAK,MAAM,IAAIA,CAAC,CAAC,CAAC,CAAC,KAAK,OAAO,EAAE;IAC9E,OAAO,CAACA,CAAC,CAAC,CAAC,CAAC,EAAEA,CAAC,CAAC,CAAC,CAAC,CAAC;EACrB,CAAC,MAAM;IACL,OAAOA,CAAC;EACV;AACF,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACO,IAAMC,KAAK,GAAAC,OAAA,CAAAD,KAAA,GAAG,SAARA,KAAKA,CAAIE,IAAI,EAAEC,KAAK,EAAK;EACpC,IAAI,CAACA,KAAK,EAAE;IACV,OAAO;MACLC,CAAC,EAAEF,IAAI,CAACG,KAAK,GAAG,CAAC;MACjBC,CAAC,EAAEJ,IAAI,CAACK,MAAM,GAAG;IACnB,CAAC;EACH;EACA,IAAMC,GAAG,GAAGL,KAAK,CAACM,KAAK,CAAC,GAAG,CAAC;EAC5B,IAAID,GAAG,CAACX,MAAM,KAAK,CAAC,EAAE;IACpB;IACA,IAAMO,CAAC,GAAGT,QAAQ,CAACa,GAAG,CAAC,CAAC,CAAC,EAAEN,IAAI,CAACG,KAAK,CAAC;IACtC,IAAMC,CAAC,GAAGX,QAAQ,CAAC,KAAK,EAAEO,IAAI,CAACK,MAAM,CAAC;IACtC,OAAO;MAAEH,CAAC,EAADA,CAAC;MAAEE,CAAC,EAADA;IAAE,CAAC;EACjB,CAAC,MAAM,IAAIE,GAAG,CAACX,MAAM,KAAK,CAAC,EAAE;IAC3B,IAAMa,MAAM,GAAGZ,SAAS,CAACU,GAAG,CAAC;IAC7B,IAAMJ,EAAC,GAAGT,QAAQ,CAACe,MAAM,CAAC,CAAC,CAAC,EAAER,IAAI,CAACG,KAAK,CAAC;IACzC,IAAMC,EAAC,GAAGX,QAAQ,CAACe,MAAM,CAAC,CAAC,CAAC,EAAER,IAAI,CAACK,MAAM,CAAC;IAC1C,OAAO;MAAEH,CAAC,EAADA,EAAC;MAAEE,CAAC,EAADA;IAAE,CAAC;EACjB,CAAC,MAAM,IAAIE,GAAG,CAACX,MAAM,KAAK,CAAC,EAAE;IAC3B,MAAM,IAAIc,KAAK,CAAC,sDAAsD,CAAC;EACzE;AACF,CAAC","ignoreList":[]}

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.29.1",
+  "version": "0.30.0-mui-update.0",
   "description": "Some interactive tools",
   "keywords": [
     "react",
@@ -17,8 +17,12 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/style": "^0.8.0",
     "@mapbox/point-geometry": "^0.1.0",
-    "@pie-lib/style-utils": "^0.21.1",
+    "@mui/icons-material": "^7.3.4",
+    "@mui/material": "^7.3.4",
+    "@pie-lib/style-utils": "^0.22.0-mui-update.0",
     "assert": "^1.4.1",
     "classnames": "^2.2.6",
     "debug": "^4.1.1",
@@ -29,13 +33,13 @@
     "trigonometry-calculator": "^2.0.0"
   },
   "devDependencies": {
-    "@material-ui/core": "^3.8.3",
-    "react": "^16.8.1",
-    "react-dom": "^16.9.0"
+    "@mui/material": "^7.3.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "peerDependencies": {
-    "@material-ui/core": "^3.8.3",
-    "react": "^16.8.1"
+    "@mui/material": "^7.3.4",
+    "react": "^18.2.0"
   },
-  "gitHead": "ce0ec7134200c51f3a3301257be3e707054b36ca"
+  "gitHead": "2e0222bda045f46b504640a972d43787e68288c4"
 }

package/src/anchor.jsx

@@ -1,21 +1,20 @@
 import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
-import classNames from 'classnames';
+import { styled } from '@mui/material/styles';
 
-const Anchor = withStyles((theme) => ({
-  anchor: {
-    cursor: 'pointer',
-    width: '20px',
-    height: '20px',
-    position: 'absolute',
-    borderRadius: '10px',
-    backgroundColor: `var(--ruler-bg, ${theme.palette.primary.contrastText})`,
-    transition: 'background-color 200ms ease-in',
-    border: `solid 1px var(--ruler-stroke, ${theme.palette.primary.dark})`,
-    '&:hover': {
-      backgroundColor: `var(--ruler-bg-hover, ${theme.palette.primary.light})`,
-    },
+const StyledAnchor = styled('div')(({ theme }) => ({
+  cursor: 'pointer',
+  width: '20px',
+  height: '20px',
+  position: 'absolute',
+  borderRadius: '10px',
+  backgroundColor: `var(--ruler-bg, ${theme.palette.primary.contrastText})`,
+  transition: 'background-color 200ms ease-in',
+  border: `solid 1px var(--ruler-stroke, ${theme.palette.primary.dark})`,
+  '&:hover': {
+    backgroundColor: `var(--ruler-bg-hover, ${theme.palette.primary.light})`,
   },
-}))(({ classes, className }) => <div className={classNames(classes.anchor, className)} />);
+}));
+
+const Anchor = ({ className, ...props }) => <StyledAnchor className={className} {...props} />;
 
 export default Anchor;

package/src/protractor/graphic.jsx

@@ -1,58 +1,67 @@
 import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 import range from 'lodash/range';
-import PropTypes from 'prop-types';
 import { strokeColor, noSelect } from '../style-utils';
 
-const Line = withStyles((theme) => ({
-  line: {
-    strokeWidth: '0.2',
-    stroke: strokeColor(theme),
-  },
-}))(({ angle, classes, major, minor }) => (
-  <line
+const StyledLine = styled('line')(({ theme }) => ({
+  strokeWidth: '0.2',
+  stroke: strokeColor(theme),
+}));
+
+const Line = ({ angle, major, minor }) => (
+  <StyledLine
     transform={`rotate(${angle}, 50.5,50)`}
-    className={classes.line}
     style={{}}
     x1="1"
     x2={major ? 10 : minor ? 6 : 3}
     y1="50"
     y2="50"
   />
-));
+);
+
+const StyledSpikeLine = styled('line')(({ theme }) => ({
+  strokeWidth: '0.2',
+  stroke: strokeColor(theme),
+}));
 
-const Spike = withStyles((theme) => ({
-  line: {
-    strokeWidth: '0.2',
-    stroke: strokeColor(theme),
-  },
-}))(({ angle, classes }) => (
-  <line transform={`rotate(${angle}, 50.5,50)`} className={classes.line} style={{}} x1="15" x2={'46'} y1="50" y2="50" />
-));
+const Spike = ({ angle }) => (
+  <StyledSpikeLine transform={`rotate(${angle}, 50.5,50)`} style={{}} x1="15" x2={'46'} y1="50" y2="50" />
+);
 
-const Text = withStyles((theme) => ({
-  text: {
-    fontSize: '2.5px',
-    textAnchor: 'middle',
-    fill: strokeColor(theme),
-    ...noSelect(),
-  },
-}))(({ angle, classes }) => (
-  <text transform={`rotate(${angle - 90}, 50.5, 50)`} className={classes.text} x="50" y="12.5">
+const StyledText = styled('text')(({ theme }) => ({
+  fontSize: '2.5px',
+  textAnchor: 'middle',
+  fill: strokeColor(theme),
+  ...noSelect(),
+}));
+
+const Text = ({ angle }) => (
+  <StyledText transform={`rotate(${angle - 90}, 50.5, 50)`} x="50" y="12.5">
     {angle}
-  </text>
-));
+  </StyledText>
+);
 
-export class Graphic extends React.PureComponent {
-  static propTypes = {
-    classes: PropTypes.object.isRequired,
-  };
+const StyledPath = styled('path')(({ theme }) => ({
+  strokeWidth: '0.2',
+  stroke: strokeColor(theme),
+}));
 
+const StyledGraphicLine = styled('line')(({ theme }) => ({
+  strokeWidth: '0.2',
+  stroke: strokeColor(theme),
+}));
+
+const StyledCircle = styled('circle')(({ theme }) => ({
+  strokeWidth: '0.2',
+  stroke: strokeColor(theme),
+  fill: 'none',
+}));
+
+export class Graphic extends React.PureComponent {
   render() {
-    const { classes } = this.props;
     return (
       <svg viewBox="0 0 102 61">
-        <path className={classes.path} d="M 1,50 A 1,1 0 0 1 100,50 L 100,60 L 1,60 Z" fill="none" />
+        <StyledPath d="M 1,50 A 1,1 0 0 1 100,50 L 100,60 L 1,60 Z" fill="none" />
         {range(0, 181).map((r) => (
           <Line minor={r % 5 === 0} major={r % 10 === 0} angle={r} key={r} />
         ))}
@@ -62,26 +71,12 @@ export class Graphic extends React.PureComponent {
             <Text angle={r} />
           </React.Fragment>
         ))}
-        <circle r="4" cx="50.5" cy="50" className={classes.circle} />
-        <line className={classes.line} x1="48.5" x2="52.5" y1="50" y2="50" />
-        <line className={classes.line} transform={'rotate(90 50.5 50)'} x1="48.5" x2="52.5" y1="50" y2="50" />
+        <StyledCircle r="4" cx="50.5" cy="50" />
+        <StyledGraphicLine x1="48.5" x2="52.5" y1="50" y2="50" />
+        <StyledGraphicLine transform={'rotate(90 50.5 50)'} x1="48.5" x2="52.5" y1="50" y2="50" />
       </svg>
     );
   }
 }
 
-export default withStyles((theme) => ({
-  path: {
-    strokeWidth: '0.2',
-    stroke: strokeColor(theme),
-  },
-  line: {
-    strokeWidth: '0.2',
-    stroke: strokeColor(theme),
-  },
-  circle: {
-    strokeWidth: '0.2',
-    stroke: strokeColor(theme),
-    fill: 'none',
-  },
-}))(Graphic);
+export default Graphic;

package/src/protractor/index.jsx

@@ -1,14 +1,29 @@
 import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import Graphic from './graphic';
 import Anchor from '../anchor';
 import Rotatable from '../rotatable';
 import classNames from 'classnames';
 
+const StyledProtractor = styled('div')(() => ({
+  position: 'relative',
+}));
+
+const StyledLeftAnchor = styled(Anchor)(() => ({
+  position: 'absolute',
+  left: 0,
+  bottom: 0,
+}));
+
+const StyledRightAnchor = styled(Anchor)(() => ({
+  position: 'absolute',
+  right: 0,
+  bottom: 0,
+}));
+
 export class Protractor extends React.Component {
   static propTypes = {
-    classes: PropTypes.object.isRequired,
     width: PropTypes.number.isRequired,
     className: PropTypes.string,
     startPosition: PropTypes.shape({
@@ -23,7 +38,7 @@ export class Protractor extends React.Component {
   };
 
   render() {
-    const { classes, width, className, startPosition } = this.props;
+    const { width, className, startPosition } = this.props;
     return (
       <Rotatable
         className={className}
@@ -39,27 +54,15 @@ export class Protractor extends React.Component {
           },
         ]}
       >
-        <div className={classes.protractor} style={{ width: `${width}px` }}>
+        <StyledProtractor style={{ width: `${width}px` }}>
           <Graphic />
 
-          <Anchor className={classNames('leftAnchor', classes.leftAnchor)} />
-          <Anchor className={classNames('rightAnchor', classes.rightAnchor)} />
-        </div>
+          <StyledLeftAnchor className={classNames('leftAnchor')} />
+          <StyledRightAnchor className={classNames('rightAnchor')} />
+        </StyledProtractor>
       </Rotatable>
     );
   }
 }
 
-export default withStyles(() => ({
-  protractor: { position: 'relative' },
-  leftAnchor: {
-    position: 'absolute',
-    left: 0,
-    bottom: 0,
-  },
-  rightAnchor: {
-    position: 'absolute',
-    right: 0,
-    bottom: 0,
-  },
-}))(Protractor);
+export default Protractor;

package/src/rotatable.jsx

@@ -1,44 +1,47 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 import { getAnchor as calcAnchor, distanceBetween, arctangent } from './anchor-utils';
 import { Portal } from 'react-portal';
 import Point from '@mapbox/point-geometry';
 import { parse as parseOrigin } from './transform-origin';
-import classNames from 'classnames';
-
-const Anchor = withStyles({
-  anchor: {
-    position: 'absolute',
-    zIndex: 100,
-    width: '200px',
-    height: '80px',
-  },
-})(({ classes, left, top, color, fill }) => {
+
+const AnchorSvg = styled('svg')({
+  position: 'absolute',
+  zIndex: 100,
+  width: '200px',
+  height: '80px',
+});
+
+const Anchor = ({ left, top, color, fill }) => {
   color = color || 'green';
   fill = fill || 'white';
   return (
     <Portal>
-      <svg
-        className={classes.anchor}
+      <AnchorSvg
         style={{
           left: left - 10,
           top: top - 10,
         }}
       >
         <circle cx={10} cy={10} r={8} strokeWidth={1} stroke={color} fill={fill} />
-      </svg>
+      </AnchorSvg>
     </Portal>
   );
-});
+};
 
 /**
  * Tip o' the hat to:
  * https://bl.ocks.org/joyrexus/7207044
  */
+const RotatableContainer = styled('div')({
+  position: 'relative',
+  display: 'inline-block',
+  cursor: 'move',
+});
+
 export class Rotatable extends React.Component {
   static propTypes = {
-    classes: PropTypes.object.isRequired,
     children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
     showAnchor: PropTypes.bool,
     handle: PropTypes.arrayOf(
@@ -259,7 +262,7 @@ export class Rotatable extends React.Component {
   };
 
   render() {
-    const { children, classes, showAnchor, className } = this.props;
+    const { children, showAnchor, className } = this.props;
     const { rotation, anchor, origin, translate, position } = this.state;
 
     const t = translate ? `translate(${translate.x}px, ${translate.y}px)` : '';
@@ -272,8 +275,8 @@ export class Rotatable extends React.Component {
     };
 
     return (
-      <div
-        className={classNames(classes.rotatable, className)}
+      <RotatableContainer
+        className={className}
         style={style}
         ref={(r) => (this.rotatable = r)}
         onMouseDown={this.mouseDown}
@@ -281,15 +284,9 @@ export class Rotatable extends React.Component {
       >
         {anchor && showAnchor && <Anchor {...anchor} />}
         {children}
-      </div>
+      </RotatableContainer>
     );
   }
 }
 
-export default withStyles({
-  rotatable: {
-    position: 'relative',
-    display: 'inline-block',
-    cursor: 'move',
-  },
-})(Rotatable);
+export default Rotatable;

package/src/ruler/graphic.jsx

@@ -1,17 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 import UnitType from './unit-type';
 import range from 'lodash/range';
 import Unit from './unit';
 import { strokeColor, fillColor } from '../style-utils';
 
-const Bg = ({ width, height, className }) => <rect width={width} height={height} cx={0} cy={0} className={className} />;
+const StyledBg = styled('rect')(({ theme }) => ({
+  stroke: strokeColor(theme),
+  strokeWidth: '2px',
+  fill: fillColor(theme),
+}));
+
+const Bg = ({ width, height }) => <StyledBg width={width} height={height} cx={0} cy={0} />;
 
 Bg.propTypes = {
   width: PropTypes.number.isRequired,
   height: PropTypes.number.isRequired,
-  className: PropTypes.string.isRequired,
 };
 
 export class Graphic extends React.PureComponent {
@@ -20,18 +25,17 @@ export class Graphic extends React.PureComponent {
     height: PropTypes.number.isRequired,
     units: PropTypes.number.isRequired,
     unit: PropTypes.object.isRequired,
-    classes: PropTypes.object.isRequired,
   };
 
   render() {
-    const { width, height, classes, units, unit } = this.props;
+    const { width, height, units, unit } = this.props;
     const viewBox = `0 0 ${width} ${height}`;
     const unitWidth = width / units;
     const unitHeight = height;
 
     return (
       <svg viewBox={viewBox}>
-        <Bg width={width} height={height} className={classes.bg} />
+        <Bg width={width} height={height} />
         <UnitType label={unit.type} />
         {range(1, units + 1).map((r) => (
           <Unit width={unitWidth} height={unitHeight} key={r} index={r} config={unit} last={r === units} />
@@ -40,12 +44,5 @@ export class Graphic extends React.PureComponent {
     );
   }
 }
-const styles = (theme) => ({
-  bg: {
-    stroke: strokeColor(theme),
-    strokeWidth: '2px',
-    fill: fillColor(theme),
-  },
-});
 
-export default withStyles(styles)(Graphic);
+export default Graphic;

package/src/ruler/index.jsx

@@ -1,18 +1,35 @@
 import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 import Rotatable from '../rotatable';
 import classNames from 'classnames';
 import RulerGraphic from './graphic';
 import PropTypes from 'prop-types';
 import Anchor from '../anchor';
 
+const StyledRuler = styled('div')(({ theme }) => ({
+  cursor: 'move',
+  position: 'relative',
+  backgroundColor: theme.palette.secondary.light,
+  opacity: 1.0,
+  border: `solid 0px ${theme.palette.primary.main}`,
+}));
+
+const StyledLeftAnchor = styled(Anchor)(() => ({
+  left: '-10px',
+  top: '40%',
+}));
+
+const StyledRightAnchor = styled(Anchor)(() => ({
+  right: '-10px',
+  top: '40%',
+}));
+
 export class Ruler extends React.Component {
   static propTypes = {
     width: PropTypes.number,
     height: PropTypes.number,
     units: PropTypes.number.isRequired,
     measure: PropTypes.oneOf(['imperial', 'metric']).isRequired,
-    classes: PropTypes.object.isRequired,
     className: PropTypes.string,
     startPosition: PropTypes.shape({
       left: PropTypes.number.isRequired,
@@ -30,7 +47,7 @@ export class Ruler extends React.Component {
   };
 
   render() {
-    const { classes, width, height, units, measure, className, startPosition, label, tickCount } = this.props;
+    const { width, height, units, measure, className, startPosition, label, tickCount } = this.props;
 
     const unit =
       measure === 'imperial'
@@ -51,31 +68,14 @@ export class Ruler extends React.Component {
           { class: 'rightAnchor', origin: 'bottom left' },
         ]}
       >
-        <div className={classes.ruler} style={{ width: `${width}px`, height: `${height}px` }}>
+        <StyledRuler style={{ width: `${width}px`, height: `${height}px` }}>
           <RulerGraphic width={width} height={height} units={units} unit={unit} />
-          <Anchor className={classNames('leftAnchor', classes.leftAnchor)} />
-          <Anchor className={classNames('rightAnchor', classes.rightAnchor)} />
-        </div>
+          <StyledLeftAnchor className={classNames('leftAnchor')} />
+          <StyledRightAnchor className={classNames('rightAnchor')} />
+        </StyledRuler>
       </Rotatable>
     );
   }
 }
-const styles = (theme) => ({
-  ruler: {
-    cursor: 'move',
-    position: 'relative',
-    backgroundColor: theme.palette.secondary.light,
-    opacity: 1.0,
-    border: `solid 0px ${theme.palette.primary.main}`,
-  },
-  leftAnchor: {
-    left: '-10px',
-    top: '40%',
-  },
-  rightAnchor: {
-    right: '-10px',
-    top: '40%',
-  },
-});
 
-export default withStyles(styles)(Ruler);
+export default Ruler;

package/src/ruler/unit-type.jsx

@@ -1,14 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { noSelect, strokeColor } from '../style-utils';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
+
+const StyledText = styled('text')(({ theme }) => ({
+  ...noSelect(),
+  fill: strokeColor(theme),
+}));
 
 export const UnitType = (props) => {
-  const { classes, label, x, y, textAlign, fill, fontSize, stroke } = props;
+  const { label, x, y, textAlign, fill, fontSize, stroke } = props;
 
   return (
-    <text
-      className={classes.unitType}
+    <StyledText
       x={x}
       y={y}
       textAnchor={textAlign}
@@ -17,12 +21,11 @@ export const UnitType = (props) => {
       fontSize={fontSize}
     >
       {label}
-    </text>
+    </StyledText>
   );
 };
 
 UnitType.propTypes = {
-  classes: PropTypes.object.isRequired,
   label: PropTypes.string.isRequired,
   x: PropTypes.number,
   y: PropTypes.number,
@@ -40,6 +43,4 @@ UnitType.defaultProps = {
   y: 14,
 };
 
-export default withStyles((theme) => ({
-  unitType: { ...noSelect(), fill: strokeColor(theme) },
-}))(UnitType);
+export default UnitType;