Added tree shaking support for core library

client/package.json

@@ -15,8 +15,8 @@
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "axios": "^0.21.0",
-    "basicprimitives": "^5.9.2",
-    "basicprimitivesreact": "^5.9.3",
+    "basicprimitives": "^6.0.3",
+    "basicprimitivesreact": "^6.0.3",
     "blob-stream": "^0.1.3",
     "clsx": "^1.1.1",
     "codemirror": "^5.58.2",

client/src/components/Options/CheckboxOption.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import _ from 'lodash';
+import { isEqual } from 'lodash';
 import PropTypes from 'prop-types';
 import Checkbox from '@material-ui/core/Checkbox';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
@@ -17,7 +17,7 @@ class CheckboxOption extends Component { // eslint-disable-line react/prefer-sta
     const nextOptions = this.getUsedOptions(nextProps);
     const currentOptions = this.getUsedOptions(this.props);
 
-    return !_.isEqual(currentOptions, nextOptions);
+    return !isEqual(currentOptions, nextOptions);
   }
 
   getUsedOptions(props) { // eslint-disable-line class-methods-use-this

client/src/components/Options/ComboBoxOption.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import _ from 'lodash';
+import { isEqual } from 'lodash';
 import PropTypes from 'prop-types';
 import FormLabel from '@material-ui/core/FormLabel';
 import MenuItem from '@material-ui/core/MenuItem';
@@ -34,7 +34,7 @@ class ComboBoxOption extends Component {
     const nextOptions = this.getUsedOptions(nextProps);
     const currentOptions = this.getUsedOptions(this.props);
 
-    return !_.isEqual(currentOptions, nextOptions);
+    return !isEqual(currentOptions, nextOptions);
   }
 
   getValue(value) {

client/src/components/Options/ItemsOrderOption.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import _ from 'lodash';
+import { isEqual } from 'lodash';
 import { SortableContainer, SortableElement, arrayMove } from 'react-sortable-hoc';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
@@ -45,7 +45,7 @@ class ItemsOrderOption extends Component {
 
   componentWillReceiveProps({ items: newItems }) {
     const { items } = this.state;
-    if (!_.isEqual(newItems, items)) {
+    if (!isEqual(newItems, items)) {
       this.setState({
         items: newItems
       });
@@ -56,7 +56,7 @@ class ItemsOrderOption extends Component {
     // eslint-disable-line no-unused-vars
     const { items } = this.state;
     const { items: newItems } = nextState;
-    return !_.isEqual(items, newItems);
+    return !isEqual(items, newItems);
   }
 
   onSortEnd({ oldIndex, newIndex }) {

client/src/components/Options/RadioGroupOption.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import _ from 'lodash';
+import { isEqual } from 'lodash';
 import PropTypes from 'prop-types';
 import Radio from '@material-ui/core/Radio';
 import RadioGroup from '@material-ui/core/RadioGroup';
@@ -29,7 +29,7 @@ class RadioGroupOption extends Component {
     const nextOptions = this.getUsedOptions(nextProps);
     const currentOptions = this.getUsedOptions(this.props);
 
-    return !_.isEqual(currentOptions, nextOptions);
+    return !isEqual(currentOptions, nextOptions);
   }
 
   getValue(value) {

client/src/components/Options/SizeOption.js

@@ -1,11 +1,11 @@
 import React, { Component } from 'react';
-import _ from 'lodash';
+import { isEqual } from 'lodash';
 import PropTypes from 'prop-types';
 import FormLabel from '@material-ui/core/FormLabel';
 import MenuItem from '@material-ui/core/MenuItem';
 import FormControl from '@material-ui/core/FormControl';
 import Select from '@material-ui/core/Select';
-import primitives from 'basicprimitives';
+import { Size } from 'basicprimitives';
 import Tooltip from '@material-ui/core/Tooltip';
 
 class SizeOption extends Component {
@@ -25,17 +25,17 @@ class SizeOption extends Component {
     const nextOptions = this.getUsedOptions(nextProps);
     const currentOptions = this.getUsedOptions(this.props);
 
-    return !_.isEqual(currentOptions, nextOptions);
+    return !isEqual(currentOptions, nextOptions);
   }
 
   onWidthChange(width) {
     const { onChange, value } = this.props;
-    onChange(new primitives.common.Size(width, value.height));
+    onChange(new Size(width, value.height));
   }
 
   onHeightChange(height) {
     const { onChange, value } = this.props;
-    onChange(new primitives.common.Size(value.width, height));
+    onChange(new Size(value.width, height));
   }
 
   getUsedOptions(props) { // eslint-disable-line class-methods-use-this

client/src/components/Options/TextOption.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import _ from 'lodash';
+import { isEqual } from 'lodash';
 import PropTypes from 'prop-types';
 import TextField from '@material-ui/core/TextField';
 
@@ -56,7 +56,7 @@ class TextOption extends Component { // eslint-disable-line react/prefer-statele
     const currentOptions = this.getUsedOptions(this.props);
     const { value } = this.state;
     const { newValue } = nextState;
-    return !(_.isEqual(currentOptions, nextOptions) && value === newValue);
+    return !(isEqual(currentOptions, nextOptions) && value === newValue);
   }
 
   onTimer() {

client/src/components/Options/ThicknessOption.js

@@ -1,12 +1,12 @@
 import React, { Component } from 'react';
-import _ from 'lodash';
+import { isEqual, startCase, camelCase } from 'lodash';
 import PropTypes from 'prop-types';
 import FormLabel from '@material-ui/core/FormLabel';
 import MenuItem from '@material-ui/core/MenuItem';
 import FormControl from '@material-ui/core/FormControl';
 import Select from '@material-ui/core/Select';
 import Tooltip from '@material-ui/core/Tooltip';
-import primitives from 'basicprimitives';
+import { Thickness } from 'basicprimitives';
 
 class ThicknessOption extends Component {
   static propTypes = {
@@ -26,12 +26,12 @@ class ThicknessOption extends Component {
     const nextOptions = this.getUsedOptions(nextProps);
     const currentOptions = this.getUsedOptions(this.props);
 
-    return !_.isEqual(currentOptions, nextOptions);
+    return !isEqual(currentOptions, nextOptions);
   }
 
   onPropertyChange(propertyName, propertyValue) {
     const { onChange, value } = this.props;
-    const result = new primitives.common.Thickness(value);
+    const result = new Thickness(value);
     result[propertyName] = propertyValue;
     onChange(result);
   }
@@ -58,7 +58,7 @@ class ThicknessOption extends Component {
         </Tooltip>
         {names.map(name => {
           return <FormControl className={'option-panel-item'} key={`${propertyName}-${name}`}>
-            <FormLabel key={`${propertyName}-${name}-label`} id={`${propertyName}-${name}-label`}>{_.startCase(_.camelCase(name))}</FormLabel>
+            <FormLabel key={`${propertyName}-${name}-label`} id={`${propertyName}-${name}-label`}>{startCase(camelCase(name))}</FormLabel>
             <Select
               labelId={`${propertyName}-${name}-label`}
               key={`${propertyName}-${name}`}