@pie-lib/plot 2.7.3 → 2.7.4-next.1618

package/src/__tests__/utils.test.js

@@ -0,0 +1,233 @@
+import { AssertionError } from 'assert';
+import * as utils from '../utils';
+
+const xy = utils.xy;
+
+const tick = (isMajor, v) => ({
+  major: isMajor,
+  value: v,
+  x: v,
+});
+
+const major = tick.bind(null, true);
+const minor = tick.bind(null, false);
+
+describe('utils', () => {
+  describe('getDelta', () => {
+    const assertDelta = (from, to, delta) => {
+      it(`returns a delta of: ${delta} for ${from} -> ${to}`, () => {
+        const d = utils.getDelta(from, to);
+        expect(d.x).toEqual(delta.x);
+        expect(d.y).toEqual(delta.y);
+      });
+    };
+    assertDelta(xy(0, 0), xy(0, 1), xy(0, 1));
+    assertDelta(xy(0, 1), xy(0, 0), xy(0, -1));
+    assertDelta(xy(1, 1), xy(3, 3), xy(2, 2));
+    assertDelta(xy(-1, -1), xy(3, 3), xy(4, 4));
+    assertDelta(xy(-1, -1), xy(-2, -5), xy(-1, -4));
+  });
+
+  describe('polygonToArea', () => {
+    const assertPolygon = (points, area) => {
+      it(`converts ${points} -> ${area}`, () => {
+        const result = utils.polygonToArea(points);
+        expect(result).toEqual(area);
+      });
+    };
+    assertPolygon([xy(0, 0), xy(1, 1), xy(1, -1)], {
+      left: 0,
+      top: 1,
+      bottom: -1,
+      right: 1,
+    });
+    assertPolygon([xy(0, 0), xy(3, 0), xy(2, -1), xy(4, -3), xy(1, -4), xy(2, -2)], {
+      left: 0,
+      top: 0,
+      bottom: -4,
+      right: 4,
+    });
+  });
+
+  describe('buildTickModel', () => {
+    let scaleFn;
+
+    beforeEach(() => {
+      scaleFn = jest.fn(function(v) {
+        return v;
+      });
+    });
+
+    it('builds major only ticks', () => {
+      let result = utils.buildTickModel({ min: 0, max: 2 }, { minor: 0 }, 1, scaleFn);
+      expect(result).toEqual([major(0), major(1), major(2)]);
+    });
+
+    it('builds minor + major ticks', () => {
+      let result = utils.buildTickModel({ min: 0, max: 2 }, { minor: 1 }, 0.5, scaleFn);
+      expect(result).toEqual([major(0), minor(0.5), major(1), minor(1.5), major(2)]);
+    });
+  });
+
+  describe('snapTo', () => {
+    let assertSnapTo = (min, max, interval, value, expected) => {
+      it(`snaps ${value} to ${expected} with domain ${min}<->${max} with interval: ${interval} `, () => {
+        let result = utils.snapTo(min, max, interval, value);
+        expect(result).toEqual(expected);
+      });
+    };
+
+    describe('with 0, 10, 0.25', () => {
+      let a = assertSnapTo.bind(null, 0, 10, 0.25);
+      a(1, 1);
+      a(1.2, 1.25);
+      a(0.2, 0.25);
+      a(5.2, 5.25);
+      a(5.125, 5.25);
+      a(5.124, 5);
+    });
+
+    describe('with 0, 10, 1', () => {
+      let a = assertSnapTo.bind(null, 0, 10, 1);
+      a(0, 0);
+      a(10, 10);
+      a(100, 10);
+      a(1, 1);
+      a(1.2, 1);
+      a(0.2, 0);
+      a(5.2, 5);
+      a(5.001, 5);
+    });
+  });
+
+  describe('getInterval', () => {
+    let assertGetInterval = (min, max, ticks, expected) => {
+      let paramsDescription = JSON.stringify(ticks);
+      it(`converts: ${paramsDescription} to ${JSON.stringify(expected)}`, () => {
+        let result = utils.getInterval({ min: min, max: max }, ticks);
+        expect(result).toEqual(expected);
+      });
+    };
+
+    describe('with bad params', () => {
+      it('throws an error if min > max', () => {
+        expect(() => {
+          let result = utils.convertFrequencyToInterval(
+            { min: 11, max: 10, tickFrequency: 1, betweenTickCount: 0 },
+            { interval: 10, major: 10 },
+          );
+          console.log('result: ', result);
+        }).toThrow(Error);
+      });
+
+      it('throws an error if min = max', () => {
+        expect(() => {
+          let result = utils.convertFrequencyToInterval(
+            { min: 10, max: 10, tickFrequency: 1, betweenTickCount: 0 },
+            { interval: 10, major: 10 },
+          );
+          console.log('result: ', result);
+        }).toThrow(Error);
+      });
+    });
+
+    describe('with domain 0 -> 1', () => {
+      let a = assertGetInterval.bind(null, 0, 1);
+      a({ major: 2, minor: 0 }, 1);
+      a({ major: 2, minor: 1 }, 0.5);
+    });
+
+    describe('with domain 0 -> 10', () => {
+      let a = assertGetInterval.bind(null, 0, 10);
+
+      it('throws an error if the tick frequency is less than 2', () => {
+        expect(() => {
+          let result = utils.convertFrequencyToInterval(
+            { min: 0, max: 10, tickFrequency: 1, betweenTickCount: 0 },
+            { interval: 10, major: 10 },
+          );
+          console.log('result: ', result);
+        }).toThrow(Error);
+      });
+
+      a({ major: 2, minor: 9 }, 1);
+      a({ major: 2, minor: 0 }, 10);
+      a({ major: 3, minor: 0 }, 5);
+      a({ major: 3, minor: 1 }, 2.5);
+      a({ major: 4, minor: 0 }, 3.3333);
+      a({ major: 5, minor: 0 }, 2.5);
+      a({ major: 6, minor: 0 }, 2);
+      a({ major: 7, minor: 0 }, 1.6667);
+      a({ major: 8, minor: 0 }, 1.4286);
+      a({ major: 9, minor: 0 }, 1.25);
+      a({ major: 10, minor: 0 }, 1.1111);
+      a({ major: 11, minor: 0 }, 1);
+      a({ major: 11, minor: 1 }, 0.5);
+      a({ major: 11, minor: 2 }, 0.3333);
+    });
+
+    describe('with domain 0 -> 100', () => {
+      let a = assertGetInterval.bind(null, 0, 100);
+      a({ major: 11, minor: 1 }, 5);
+      a({ major: 101, minor: 0 }, 1);
+    });
+
+    describe('with domain -5 - 5', () => {
+      let a = assertGetInterval.bind(null, -5, 5);
+      a({ major: 11, minor: 0 }, 1);
+    });
+
+    describe('with domain 0 - 5', () => {
+      let a = assertGetInterval.bind(null, 0, 5);
+      a({ major: 11, minor: 0 }, 0.5);
+      a({ major: 11, minor: 2 }, 0.1667);
+      a({ major: 11, minor: 1 }, 0.25);
+    });
+  });
+
+  describe('findLongestWord', () => {
+    it('should return 0 if label is undefined', () => {
+      const label = undefined;
+      const result = utils.findLongestWord(label);
+
+      expect(result).toEqual(0);
+    });
+
+    it('should return 0 if label is null', () => {
+      const label = null;
+      const result = utils.findLongestWord(label);
+
+      expect(result).toEqual(0);
+    });
+
+    it('should return 6 if the longest word from label has 6 letters', () => {
+      const label = 'Number of months';
+      const result = utils.findLongestWord(label);
+
+      expect(result).toEqual(6);
+    });
+  });
+
+  describe('amountToIncreaseWidth', () => {
+    it('should return 0 if longestWord is undefined', () => {
+      const longestWord = undefined;
+      const result = utils.amountToIncreaseWidth(longestWord);
+
+      expect(result).toEqual(0);
+    });
+
+    it('should return 0 if longestWord is null', () => {
+      const longestWord = null;
+      const result = utils.amountToIncreaseWidth(longestWord);
+
+      expect(result).toEqual(0);
+    });
+
+    it('should return 150 if longestWord is 10', () => {
+      const longestWord = 10;
+      const result = utils.amountToIncreaseWidth(longestWord);
+
+      expect(result).toEqual(200);
+    });
+  });
+});

package/src/grid-draggable.jsx

@@ -96,10 +96,57 @@ export const gridDraggable = (opts) => (Comp) => {
       return scaled;
     };
 
+    /**
+     * Retrieves the coordinates of a mouse or touch event relative to an SVG element.
+     * This method has been overwritten from the d3-selection library's clientPoint to handle touch events and improve clarity.
+     * @param {Element} node - The SVG element.
+     * @param {Event} event - The mouse or touch event.
+     * @returns {Array} - An array containing the coordinates [x, y] relative to the SVG element.
+     */
+    getClientPoint = (node, event) => {
+      if (!node || !event) {
+        return null;
+      }
+      const svg = node.ownerSVGElement || node;
+
+      if (svg && svg.createSVGPoint) {
+        let point = svg.createSVGPoint();
+        // Check if it's a touch event and use the first touch point
+        if (event.touches && event.touches.length > 0) {
+          const touch = event.touches[0];
+          point.x = touch.clientX;
+          point.y = touch.clientY;
+        } else {
+          // Fall back to mouse event properties
+          point.x = event.clientX;
+          point.y = event.clientY;
+        }
+        if (node.getScreenCTM) {
+          point = point.matrixTransform(node.getScreenCTM().inverse());
+          return [point.x, point.y];
+        } else {
+          return null;
+        }
+      }
+
+      const rect = node.getBoundingClientRect();
+      if (rect) {
+        return [event.clientX - rect.left - node.clientLeft, event.clientY - rect.top - node.clientTop];
+      } else {
+        return null;
+      }
+    };
+
     skipDragOutsideOfBounds = (dd, e, graphProps) => {
-      // ignore drag movement outside of the domain and range.
+      // Ignore drag movement outside of the domain and range.
       const rootNode = graphProps.getRootNode();
-      const [rawX, rawY] = clientPoint(rootNode, e);
+      const clientPoint = this.getClientPoint(rootNode, e);
+
+      if (clientPoint === null) {
+        return true; // Indicate that the drag is outside of bounds
+      }
+
+      const [rawX, rawY] = clientPoint;
       const { scale, domain, range } = graphProps;
       let x = scale.x.invert(rawX);
       let y = scale.y.invert(rawY);
@@ -195,13 +242,10 @@ export const gridDraggable = (opts) => (Comp) => {
     };
 
     render() {
-      /* eslint-disable no-unused-vars */
-      //Note: we pull onClick out so that it's not in ...rest.
-      const { disabled, onClick, ...rest } = this.props;
-      /* eslint-enable no-unused-vars */
-
+      const { disabled, ...rest } = this.props;
       const grid = this.grid();
-      //prevent the text select icon from rendering.
+
+      // prevent the text select icon from rendering.
       const onMouseDown = (e) => e.nativeEvent.preventDefault();
 
       /**

package/src/label.jsx

@@ -4,7 +4,7 @@ import cn from 'classnames';
 import EditableHtml from '@pie-lib/editable-html';
 import { withStyles } from '@material-ui/core/styles';
 import PropTypes from 'prop-types';
-
+import { extractTextFromHTML, isEmptyString } from './utils';
 const LabelComponent = (props) => {
   const {
     classes,
@@ -20,6 +20,8 @@ const LabelComponent = (props) => {
     side,
     onChange,
     mathMlOptions = {},
+    charactersLimit,
+    titleHeight,
   } = props;
   const [rotatedToHorizontal, setRotatedToHorizontal] = useState(false);
   const activePlugins = [
@@ -40,8 +42,8 @@ const LabelComponent = (props) => {
       chartValue ||
       (isChartLeftLabel && `${graphHeight - 70}px`) ||
       (side === 'left' && `${graphHeight - 8}px`) ||
-      (isChartBottomLabel && `${graphHeight - 30}px`) ||
-      (side === 'bottom' && `${graphHeight - 90}px`) ||
+      (isChartBottomLabel && `${graphHeight - 60 + titleHeight}px`) ||
+      (side === 'bottom' && `${graphHeight - 120 + titleHeight}px`) ||
       0,
     left:
       (side === 'right' && `${graphWidth - 8}px`) ||
@@ -66,6 +68,7 @@ const LabelComponent = (props) => {
           [classes.rotateRightLabel]: side === 'right' && !rotatedToHorizontal,
           [classes.editLabel]: rotatedToHorizontal,
           [classes.customBottom]: isChartBottomLabel || isDefineChartBottomLabel,
+          [classes.displayNone]: disabledLabel && !isChart && isEmptyString(extractTextFromHTML(text)),
         })}
         style={rotatedToHorizontal ? rotatedStyle : defaultStyle}
         onClick={rotateLabel}
@@ -79,12 +82,14 @@ const LabelComponent = (props) => {
             placeholder={!disabledLabel && placeholder}
             toolbarOpts={{
               position: side === 'bottom' ? 'top' : 'bottom',
+              noPadding: true,
               noBorder: true,
             }}
             disableScrollbar
             activePlugins={activePlugins}
             onDone={() => setRotatedToHorizontal(false)}
             mathMlOptions={mathMlOptions}
+            charactersLimit={charactersLimit}
           />
         )}
       </div>
@@ -104,6 +109,9 @@ LabelComponent.propTypes = {
   text: PropTypes.string,
   side: PropTypes.string,
   onChange: PropTypes.func,
+  mathMlOptions: PropTypes.object,
+  charactersLimit: PropTypes.number,
+  titleHeight: PropTypes.number,
 };
 
 export default withStyles((theme) => ({
@@ -148,4 +156,7 @@ export default withStyles((theme) => ({
   customBottom: {
     position: 'absolute',
   },
+  displayNone: {
+    display: 'none',
+  },
 }))(LabelComponent);

package/src/root.jsx

@@ -1,15 +1,24 @@
 import React from 'react';
-import { ChildrenType } from './types';
 import { withStyles } from '@material-ui/core/styles';
-import { select, mouse } from 'd3-selection';
 import PropTypes from 'prop-types';
-import { GraphPropsType } from './types';
+import { select, mouse } from 'd3-selection';
+import cn from 'classnames';
+
 import { color, Readable } from '@pie-lib/render-ui';
 import EditableHtml from '@pie-lib/editable-html';
-import cn from 'classnames';
+import { ChildrenType } from './types';
+import { GraphPropsType } from './types';
 import Label from './label';
+import { extractTextFromHTML, isEmptyObject, isEmptyString } from './utils';
 
 export class Root extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      titleHeight: 0,
+    };
+  }
+
   static propTypes = {
     title: PropTypes.string,
     children: ChildrenType,
@@ -29,6 +38,8 @@ export class Root extends React.Component {
     rootRef: PropTypes.func,
     onChangeLabels: PropTypes.func,
     titlePlaceholder: PropTypes.string,
+    mathMlOptions: PropTypes.object,
+    labelsCharactersLimit: PropTypes.number,
   };
 
   mouseMove = (g) => {
@@ -54,6 +65,7 @@ export class Root extends React.Component {
   componentDidMount() {
     const g = select(this.g);
     g.on('mousemove', this.mouseMove.bind(this, g));
+    this.measureTitleHeight();
   }
 
   componentWillUnmount() {
@@ -61,9 +73,19 @@ export class Root extends React.Component {
     g.on('mousemove', null);
   }
 
+  componentDidUpdate(prevProps) {
+    if (prevProps.title !== this.props.title) {
+      this.measureTitleHeight();
+    }
+  }
+
   onChangeLabel = (newValue, side) => {
     const { labels, onChangeLabels, isChart } = this.props;
 
+    if (!onChangeLabels) {
+      return;
+    }
+
     if (isChart) {
       if (side === 'left') {
         onChangeLabels('range', newValue);
@@ -80,6 +102,18 @@ export class Root extends React.Component {
     });
   };
 
+  measureTitleHeight = () => {
+    const titleElement = this.titleRef;
+    if (titleElement) {
+      const titleHeight = titleElement.clientHeight;
+      this.setState({ titleHeight, prevTitle: this.props.title });
+    }
+  };
+
+  handleKeyDown = () => {
+    setTimeout(this.measureTitleHeight, 0);
+  };
+
   render() {
     const {
       disabledTitle,
@@ -99,6 +133,7 @@ export class Root extends React.Component {
       title,
       rootRef,
       mathMlOptions = {},
+      labelsCharactersLimit,
     } = this.props;
     const {
       size: { width = 500, height = 500 },
@@ -107,14 +142,18 @@ export class Root extends React.Component {
     } = graphProps;
 
     const topPadding = 40;
-    const leftPadding = showLabels ? 80 : 60;
-    const finalWidth = width + leftPadding * 2 + (domain.padding || 0) * 2;
+    const leftPadding = isEmptyString(extractTextFromHTML(labels?.left)) && isEmptyObject(labelsPlaceholders) ? 48 : 70;
+    const rightPadding =
+      isEmptyString(extractTextFromHTML(labels?.right)) && isEmptyObject(labelsPlaceholders) ? 48 : 70;
+    const finalWidth = width + leftPadding + rightPadding + (domain.padding || 0) * 2;
     const finalHeight = height + topPadding * 2 + (range.padding || 0) * 2;
 
     const activeTitlePlugins = [
       'bold',
       'italic',
       'underline',
+      'superscript',
+      'subscript',
       'strikethrough',
       'math',
       // 'languageCharacters'
@@ -124,11 +163,11 @@ export class Root extends React.Component {
     const nbOfVerticalLines = parseInt(width / 100);
     const nbOfHorizontalLines = parseInt(actualHeight / 100);
     const sideGridlinesPadding = parseInt(actualHeight % 100);
-
+    const { titleHeight } = this.state;
     return (
       <div className={classes.root}>
         {showPixelGuides && (
-          <div className={classes.topPixelGuides} style={{ marginLeft: isChart ? 60 : showLabels ? 30 : 10 }}>
+          <div className={classes.topPixelGuides} style={{ marginLeft: isChart ? 80 : showLabels ? 30 : 10 }}>
             {[...Array(nbOfVerticalLines + 1).keys()].map((value) => (
               <Readable false key={`top-guide-${value}`}>
                 <div className={classes.topPixelIndicator}>
@@ -142,34 +181,37 @@ export class Root extends React.Component {
         {showTitle &&
           (disabledTitle ? (
             <div
-              style={
-                isChart && {
-                  width: finalWidth,
-                }
-              }
+              ref={(r) => (this.titleRef = r)}
+              style={{
+                ...(isChart && { width: finalWidth }),
+                ...(isEmptyString(extractTextFromHTML(title)) && { display: 'none' }),
+              }}
               className={cn(isChart ? classes.chartTitle : classes.graphTitle, classes.disabledTitle)}
               dangerouslySetInnerHTML={{ __html: title || '' }}
             />
           ) : (
-            <EditableHtml
-              style={
-                isChart && {
-                  width: finalWidth,
+            <div ref={(r) => (this.titleRef = r)}>
+              <EditableHtml
+                style={
+                  isChart && {
+                    width: finalWidth,
+                  }
                 }
-              }
-              className={cn(
-                { [classes.rightMargin]: showPixelGuides },
-                isChart ? classes.chartTitle : classes.graphTitle,
-              )}
-              markup={title || ''}
-              onChange={onChangeTitle}
-              placeholder={
-                (defineChart && titlePlaceholder) || (!disabledTitle && 'Click here to add a title for this graph')
-              }
-              toolbarOpts={{ noBorder: true }}
-              activePlugins={activeTitlePlugins}
-              disableScrollbar
-            />
+                className={cn(
+                  { [classes.rightMargin]: showPixelGuides },
+                  isChart ? classes.chartTitle : classes.graphTitle,
+                )}
+                markup={title || ''}
+                onChange={onChangeTitle}
+                placeholder={
+                  (defineChart && titlePlaceholder) || (!disabledTitle && 'Click here to add a title for this graph')
+                }
+                toolbarOpts={{ noPadding: true, noBorder: true }}
+                activePlugins={activeTitlePlugins}
+                disableScrollbar
+                onKeyDown={this.handleKeyDown}
+              />
+            </div>
           ))}
         {showLabels && !isChart && (
           <Label
@@ -181,6 +223,7 @@ export class Root extends React.Component {
             graphWidth={finalWidth}
             onChange={(value) => this.onChangeLabel(value, 'top')}
             mathMlOptions={mathMlOptions}
+            charactersLimit={labelsCharactersLimit}
           />
         )}
         <div className={classes.wrapper}>
@@ -196,6 +239,7 @@ export class Root extends React.Component {
               isDefineChartLeftLabel={isChart && defineChart}
               onChange={(value) => this.onChangeLabel(value, 'left')}
               mathMlOptions={mathMlOptions}
+              charactersLimit={labelsCharactersLimit}
             />
           )}
           <svg width={finalWidth} height={finalHeight} className={defineChart ? classes.defineChart : classes.chart}>
@@ -207,7 +251,7 @@ export class Root extends React.Component {
                 }
               }}
               className={classes.graphBox}
-              transform={`translate(${leftPadding}, ${topPadding})`}
+              transform={`translate(${leftPadding + (domain.padding || 0)}, ${topPadding + (range.padding || 0)})`}
             >
               {children}
             </g>
@@ -222,6 +266,7 @@ export class Root extends React.Component {
               graphWidth={finalWidth}
               onChange={(value) => this.onChangeLabel(value, 'right')}
               mathMlOptions={mathMlOptions}
+              charactersLimit={labelsCharactersLimit}
             />
           )}
           {showPixelGuides && (
@@ -229,7 +274,7 @@ export class Root extends React.Component {
               className={classes.sidePixelGuides}
               style={{
                 paddingTop: sideGridlinesPadding,
-                marginTop: defineChart ? 25 : 31,
+                marginTop: 31,
               }}
             >
               {[...Array(nbOfHorizontalLines + 1).keys()].reverse().map((value) => (
@@ -248,10 +293,12 @@ export class Root extends React.Component {
             placeholder={labelsPlaceholders?.bottom}
             graphHeight={finalHeight}
             graphWidth={finalWidth}
+            titleHeight={titleHeight}
             isChartBottomLabel={isChart && !defineChart}
             isDefineChartBottomLabel={isChart && defineChart}
             onChange={(value) => this.onChangeLabel(value, 'bottom')}
             mathMlOptions={mathMlOptions}
+            charactersLimit={labelsCharactersLimit}
           />
         )}
       </div>
@@ -259,13 +306,15 @@ export class Root extends React.Component {
   }
 }
 
+// use default color theme style to avoid color contrast issues
 const styles = (theme) => ({
   root: {
     border: `solid 1px ${color.primaryLight()}`,
-    color: color.text(),
-    backgroundColor: color.background(),
+    color: color.defaults.TEXT,
+    backgroundColor: theme.palette.common.white,
     touchAction: 'none',
     position: 'relative',
+    boxSizing: 'unset', // to override the default border-box in IBX that breaks the component width layout
   },
   wrapper: {
     display: 'flex',
@@ -284,13 +333,13 @@ const styles = (theme) => ({
     userSelect: 'none',
   },
   graphTitle: {
-    color: color.text(),
+    color: color.defaults.TEXT,
     fontSize: theme.typography.fontSize + 2,
     padding: `${theme.spacing.unit * 1.5}px ${theme.spacing.unit / 2}px 0`,
     textAlign: 'center',
   },
   chartTitle: {
-    color: color.text(),
+    color: color.defaults.TEXT,
     fontSize: theme.typography.fontSize + 4,
     padding: `${theme.spacing.unit * 1.5}px ${theme.spacing.unit / 2}px 0`,
     textAlign: 'center',
@@ -306,7 +355,6 @@ const styles = (theme) => ({
     paddingTop: '6px',
   },
   topPixelIndicator: {
-    color: color.primaryLight(),
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
@@ -321,7 +369,6 @@ const styles = (theme) => ({
     marginRight: '6px',
   },
   sidePixelIndicator: {
-    color: color.primaryLight(),
     textAlign: 'right',
     height: '20px',
     pointerEvents: 'none',

package/src/trig.js

@@ -1,4 +1,4 @@
-import { xy } from '../lib/utils';
+import { xy } from './utils';
 import Point from '@mapbox/point-geometry';
 import debug from 'debug';
 const log = debug('pie-lib:plot:trig');

package/src/utils.js

@@ -154,3 +154,17 @@ export const amountToIncreaseWidth = (longestWord) => {
 
   return longestWord * 20;
 };
+
+export const extractTextFromHTML = (htmlString) => {
+  const parser = new DOMParser();
+  const doc = parser?.parseFromString(htmlString, 'text/html');
+  return doc?.body?.textContent || '';
+};
+
+export const isEmptyObject = (obj) => {
+  return obj && Object.keys(obj).length === 0 && obj.constructor === Object;
+};
+
+export const isEmptyString = (str) => {
+  return typeof str === 'string' && str.trim() === '';
+};