@pie-lib/tools 0.29.2-next.0 → 0.29.2-next.164

package/src/ruler/__tests__/unit-type.test.jsx

@@ -1,13 +1,66 @@
-import toJson from 'enzyme-to-json';
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
 import { UnitType } from '../unit-type';
 import React from 'react';
 
 describe('unit-type', () => {
-  describe('snapshot', () => {
-    it('renders', () => {
-      const wrapper = shallow(<UnitType classes={{}} label={'cm'} />);
-      expect(toJson(wrapper)).toMatchSnapshot();
+  const theme = createTheme();
+
+  const renderComponent = (props = {}) => {
+    const defaultProps = {
+      label: 'cm',
+      ...props,
+    };
+
+    return render(
+      <ThemeProvider theme={theme}>
+        <svg>
+          <UnitType {...defaultProps} />
+        </svg>
+      </ThemeProvider>
+    );
+  };
+
+  describe('rendering', () => {
+    it('renders text element with label', () => {
+      const { container } = renderComponent({ label: 'cm' });
+      const text = container.querySelector('text');
+      expect(text).toBeInTheDocument();
+      expect(text).toHaveTextContent('cm');
+    });
+
+    it('renders with default position', () => {
+      const { container } = renderComponent();
+      const text = container.querySelector('text');
+      expect(text).toHaveAttribute('x', '8');
+      expect(text).toHaveAttribute('y', '14');
+    });
+
+    it('renders with custom position', () => {
+      const { container } = renderComponent({ x: 20, y: 30 });
+      const text = container.querySelector('text');
+      expect(text).toHaveAttribute('x', '20');
+      expect(text).toHaveAttribute('y', '30');
+    });
+
+    it('renders with custom fontSize', () => {
+      const { container } = renderComponent({ fontSize: 16 });
+      const text = container.querySelector('text');
+      expect(text).toBeInTheDocument();
+    });
+
+    it('renders with different labels', () => {
+      const { container, rerender } = renderComponent({ label: 'in' });
+      expect(container.querySelector('text')).toHaveTextContent('in');
+
+      rerender(
+        <ThemeProvider theme={theme}>
+          <svg>
+            <UnitType label="mm" />
+          </svg>
+        </ThemeProvider>
+      );
+      expect(container.querySelector('text')).toHaveTextContent('mm');
     });
   });
 });

package/src/ruler/__tests__/unit.test.jsx

@@ -1,15 +1,68 @@
-import toJson from 'enzyme-to-json';
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
 import { Unit } from '../unit';
 import React from 'react';
 
 describe('unit', () => {
-  describe('snapshot', () => {
-    it('renders', () => {
-      const wrapper = shallow(
-        <Unit index={2} width={30} height={20} last={false} config={{ ticks: 10 }} classes={{}} />,
-      );
-      expect(toJson(wrapper)).toMatchSnapshot();
+  const theme = createTheme();
+
+  const renderComponent = (props = {}) => {
+    const defaultProps = {
+      index: 2,
+      width: 30,
+      height: 20,
+      last: false,
+      config: { ticks: 10 },
+      ...props,
+    };
+
+    return render(
+      <ThemeProvider theme={theme}>
+        <svg>
+          <Unit {...defaultProps} />
+        </svg>
+      </ThemeProvider>
+    );
+  };
+
+  describe('rendering', () => {
+    it('renders group element with correct transform', () => {
+      const { container } = renderComponent({ index: 2, width: 30 });
+      const group = container.querySelector('g');
+      expect(group).toBeInTheDocument();
+      expect(group).toHaveStyle({ transform: 'translate(30px, 0px)' });
+    });
+
+    it('renders label with index value', () => {
+      const { container } = renderComponent({ index: 5 });
+      const text = container.querySelector('text');
+      expect(text).toHaveTextContent('5');
+    });
+
+    it('renders end tick when not last unit', () => {
+      const { container } = renderComponent({ last: false });
+      const lines = container.querySelectorAll('line');
+      // Should have end tick plus ticks based on config
+      expect(lines.length).toBeGreaterThan(0);
+    });
+
+    it('does not render end tick when last unit', () => {
+      const { container } = renderComponent({ last: true });
+      const group = container.querySelector('g');
+      expect(group).toBeInTheDocument();
+    });
+
+    it('renders correct number of tick marks', () => {
+      const { container } = renderComponent({ config: { ticks: 16 } });
+      const lines = container.querySelectorAll('line');
+      // Should render ticks based on config (16 ticks - 1 for range + 1 end tick = 16 total)
+      expect(lines.length).toBeGreaterThan(10);
+    });
+
+    it('renders with different width', () => {
+      const { container } = renderComponent({ index: 3, width: 40 });
+      const group = container.querySelector('g');
+      expect(group).toHaveStyle({ transform: 'translate(80px, 0px)' });
     });
   });
 });

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,19 +1,34 @@
 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,
       top: PropTypes.number.isRequired,
@@ -30,7 +45,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, startPosition, label, tickCount } = this.props;
 
     const unit =
       measure === 'imperial'
@@ -44,38 +59,20 @@ export class Ruler extends React.Component {
           };
     return (
       <Rotatable
-        className={className}
         startPosition={startPosition}
         handle={[
           { class: 'leftAnchor', origin: 'bottom right' },
           { 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="leftAnchor" />
+          <StyledRightAnchor className="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;

package/src/ruler/unit.jsx

@@ -1,18 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 import { noSelect, strokeColor } from '../style-utils';
 import range from 'lodash/range';
 
-const Tick = withStyles((theme) => ({
-  tick: {
-    stroke: strokeColor(theme),
-  },
-}))(({ x, height, bottom, classes, major, minor }) => {
+const StyledTick = styled('line')(({ theme }) => ({
+  stroke: strokeColor(theme),
+}));
+
+const Tick = ({ x, height, bottom, major, minor }) => {
   const y1 = major ? bottom - height * 2 : minor ? bottom - height * 1.5 : bottom - height;
 
-  return <line y1={y1} y2={bottom} x1={x} x2={x} className={classes.tick} />;
-});
+  return <StyledTick y1={y1} y2={bottom} x1={x} x2={x} />;
+};
 
 const Ticks = ({ count, width, height }) => {
   return (
@@ -40,48 +40,44 @@ Ticks.propTypes = {
   height: PropTypes.number.isRequired,
 };
 
+const StyledEndTick = styled('line')(({ theme }) => ({
+  stroke: strokeColor(theme),
+  strokeWidth: 1,
+}));
+
+const StyledLabel = styled('text')(({ theme }) => ({
+  textAnchor: 'end',
+  fontSize: '12px',
+  fill: strokeColor(theme),
+  ...noSelect(),
+}));
+
 export class Unit extends React.Component {
   static propTypes = {
     index: PropTypes.number.isRequired,
     width: PropTypes.number.isRequired,
     height: PropTypes.number.isRequired,
-    classes: PropTypes.object.isRequired,
     last: PropTypes.bool.isRequired,
     config: PropTypes.object.isRequired,
   };
 
   render() {
-    const { index, width, height, classes, last, config } = this.props;
+    const { index, width, height, last, config } = this.props;
 
     const style = {
       transform: `translate(${width * (index - 1)}px, 0px)`,
     };
     return (
       <g style={style}>
-        {!last && <line x1={width} y1={0} x2={width} y2={height} className={classes.endTick} />}
+        {!last && <StyledEndTick x1={width} y1={0} x2={width} y2={height} />}
 
         <Ticks count={config.ticks} width={width} height={height} />
-        <text width={width} className={classes.label} x={width - 5} y={15}>
+        <StyledLabel width={width} x={width - 5} y={15}>
           {index}
-        </text>
+        </StyledLabel>
       </g>
     );
   }
 }
 
-export default withStyles((theme) => ({
-  endTick: {
-    stroke: strokeColor(theme),
-    strokeWidth: 1,
-  },
-  label: {
-    textAnchor: 'end',
-    fontSize: '12px',
-    fill: strokeColor(theme),
-    ...noSelect(),
-  },
-  base: {
-    fill: 'none',
-    stroke: 'red',
-  },
-}))(Unit);
+export default Unit;

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

@@ -1,37 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`rotatable snapshot renders 1`] = `
-<div
-  className=""
-  onMouseDown={[Function]}
-  onMouseUp={[Function]}
-  style={
-    Object {
-      "left": 0,
-      "top": 0,
-      "transform": " rotate(0deg)",
-      "transformOrigin": undefined,
-    }
-  }
->
-  foo
-</div>
-`;
-
-exports[`rotatable snapshot renders with transforms 1`] = `
-<div
-  className=""
-  onMouseDown={[Function]}
-  onMouseUp={[Function]}
-  style={
-    Object {
-      "left": 0,
-      "top": 0,
-      "transform": "translate(10px, 10px) rotate(10deg)",
-      "transformOrigin": "bottom left",
-    }
-  }
->
-  foo
-</div>
-`;