react-tradeshift-ui - npm Package Compare versions

Comparing version 2.6.1 to 3.0.0

package.json

 {
-  "name": "react-tradeshift-ui",
-  "version": "2.6.1",
-  "main": "dist/components.js",
-  "module": "dist/components.js",
-  "license": "SEE LICENSE IN LICENSE.md",
-  "scripts": {
-    "build": "webpack --mode production",
-    "prepublish": "npm run build",
-    "build-storybook": "build-storybook",
-    "start": "start-storybook -p 9009",
-    "lint": "eslint src",
-    "test": "react-scripts test --env=jsdom",
-    "test:debug": "react-scripts --inspect-brk test --runInBand --no-cache",
-    "prettier": "prettier --write --use-tabs --single-quote --print-width 100 --color src",
-    "report-coverage": "cat ./coverage/lcov.info | codecov",
-    "commitmsg": "opt --in commit-msg --exec \"validate-commit-msg\"",
-    "precommit": "lint-staged",
-    "commit": "git-cz",
-    "storybook": "start-storybook -p 9009"
-  },
-  "lint-staged": {
-    "*.js": [
-      "eslint --color",
-      "prettier --write --use-tabs --single-quote --print-width 100 --color",
-      "git add"
-    ]
-  },
-  "jest": {
-    "snapshotSerializers": [
-      "enzyme-to-json/serializer"
-    ]
-  },
-  "config": {
-    "commitizen": {
-      "path": "node_modules/cz-conventional-changelog"
-    }
-  },
-  "devDependencies": {
-    "@babel/core": "^7.4.5",
-    "@babel/preset-env": "^7.4.5",
-    "@babel/preset-react": "^7.0.0",
-    "@storybook/addon-actions": "^5.1.9",
-    "@storybook/addon-info": "^5.1.9",
-    "@storybook/addon-knobs": "^5.1.9",
-    "@storybook/addon-links": "^5.1.9",
-    "@storybook/addon-notes": "^5.1.9",
-    "@storybook/addon-options": "^5.1.9",
-    "@storybook/addons": "^5.1.9",
-    "@storybook/react": "^5.1.9",
-    "@types/jest": "^24.0.15",
-    "@types/react": "^16.9.23",
-    "@types/react-dom": "^16.9.5",
-    "@types/react-portal": "^4.0.2",
-    "@types/react-test-renderer": "^16.9.2",
-    "@types/webpack": "^4.4.34",
-    "codecov.io": "^0.1.6",
-    "commitizen": "^3.1.1",
-    "cz-conventional-changelog": "^2.1.0",
-    "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.14.0",
-    "enzyme-to-json": "^3.4.2",
-    "eslint-config-airbnb": "^17.1.0",
-    "eslint-plugin-import": "^2.18.0",
-    "eslint-plugin-jest": "^22.7.1",
-    "eslint-plugin-jsx-a11y": "^6.2.1",
-    "eslint-plugin-react": "^7.14.2",
-    "husky": "^2.7.0",
-    "jsdom": "^15.1.1",
-    "lint-staged": "^8.2.1",
-    "lodash": "^4.17.11",
-    "mini-css-extract-plugin": "^0.7.0",
-    "opt-cli": "^1.6.0",
-    "prettier": "^1.18.2",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "react-scripts": "^3.0.1",
-    "react-test-renderer": "^16.12.0",
-    "semantic-release": "^15.13.18",
-    "validate-commit-msg": "^2.14.0",
-    "webpack": "~4.29.0",
-    "webpack-cli": "^3.3.5"
-  },
-  "dependencies": {
-    "@types/classnames": "2.2.8",
-    "classnames": "^2.2.6",
-    "prop-types": "^15.7.2",
-    "react-portal": "^4.2.0"
-  },
-  "peerDependencies": {
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "prop-types": "^15.7.2"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/Tradeshift/react-tradeshift-ui.git"
-  },
-  "bugs": {
-    "url": "https://github.com/Tradeshift/react-tradeshift-ui/issues"
-  },
-  "homepage": "https://github.com/Tradeshift/react-tradeshift-ui#readme"
+	"name": "react-tradeshift-ui",
+	"version": "3.0.0",
+	"main": "dist/components/index.js",
+	"module": "dist/components/index.js",
+	"license": "SEE LICENSE IN LICENSE.md",
+	"scripts": {
+		"build": "babel src --out-dir dist",
+		"prepublish": "npm run build",
+		"build-storybook": "build-storybook",
+		"start": "start-storybook -p 9009",
+		"lint": "eslint src",
+		"pretest": "eslint src",
+		"test": "react-scripts test --env=jsdom",
+		"test:debug": "react-scripts --inspect-brk test --runInBand --no-cache",
+		"prettier": "prettier --write --use-tabs --single-quote --print-width 100 --color src",
+		"report-coverage": "cat ./coverage/lcov.info | codecov",
+		"commitmsg": "opt --in commit-msg --exec \"validate-commit-msg\"",
+		"precommit": "lint-staged",
+		"commit": "git-cz",
+		"storybook": "start-storybook -p 9009"
+	},
+	"lint-staged": {
+		"*.js": [
+			"eslint --color",
+			"prettier --write --use-tabs --single-quote --print-width 100 --color",
+			"git add"
+		]
+	},
+	"jest": {
+		"snapshotSerializers": [
+			"enzyme-to-json/serializer"
+		]
+	},
+	"config": {
+		"commitizen": {
+			"path": "node_modules/cz-conventional-changelog"
+		}
+	},
+	"devDependencies": {
+		"@babel/cli": "^7.10.4",
+		"@babel/core": "^7.4.5",
+		"@babel/preset-env": "^7.4.5",
+		"@babel/preset-react": "^7.0.0",
+		"@storybook/addon-actions": "^5.1.9",
+		"@storybook/addon-info": "^5.1.9",
+		"@storybook/addon-knobs": "^5.1.9",
+		"@storybook/addon-links": "^5.1.9",
+		"@storybook/addon-notes": "^5.1.9",
+		"@storybook/addon-options": "^5.1.9",
+		"@storybook/addons": "^5.1.9",
+		"@storybook/react": "^5.1.9",
+		"@types/jest": "^24.0.15",
+		"@types/react": "^16.9.23",
+		"@types/react-dom": "^16.9.5",
+		"@types/react-portal": "^4.0.2",
+		"@types/react-test-renderer": "^16.9.2",
+		"codecov.io": "^0.1.6",
+		"commitizen": "^3.1.1",
+		"cz-conventional-changelog": "^2.1.0",
+		"enzyme": "^3.10.0",
+		"enzyme-adapter-react-16": "^1.14.0",
+		"enzyme-to-json": "^3.4.2",
+		"eslint-config-airbnb": "^17.1.0",
+		"eslint-plugin-import": "^2.18.0",
+		"eslint-plugin-jest": "^22.7.1",
+		"eslint-plugin-jsx-a11y": "^6.2.1",
+		"eslint-plugin-react": "^7.14.2",
+		"husky": "^2.7.0",
+		"jsdom": "^15.1.1",
+		"lint-staged": "^8.2.1",
+		"lodash": "^4.17.11",
+		"mini-css-extract-plugin": "^0.7.0",
+		"opt-cli": "^1.6.0",
+		"prettier": "^1.18.2",
+		"react": "^16.12.0",
+		"react-dom": "^16.12.0",
+		"react-scripts": "^3.0.1",
+		"react-test-renderer": "^16.12.0",
+		"semantic-release": "^15.13.18",
+		"validate-commit-msg": "^2.14.0"
+	},
+	"dependencies": {
+		"@types/classnames": "2.2.8",
+		"classnames": "^2.2.6",
+		"prop-types": "^15.7.2",
+		"react-portal": "^4.2.0"
+	},
+	"peerDependencies": {
+		"react": "^16.12.0",
+		"react-dom": "^16.12.0",
+		"prop-types": "^15.7.2"
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/Tradeshift/react-tradeshift-ui.git"
+	},
+	"bugs": {
+		"url": "https://github.com/Tradeshift/react-tradeshift-ui/issues"
+	},
+	"homepage": "https://github.com/Tradeshift/react-tradeshift-ui#readme"
 }

src/__mocks__/knobs.js

@@ -7,2 +7,2 @@ const defaultVal = (_, v) => v;
 export const number = defaultVal;
-export const select = data => data;
+export const select = (data) => data;

src/__mocks__/storybook.js

@@ -7,3 +7,3 @@ import renderer from 'react-test-renderer';
 // Mocked version of `import { storiesOf } from "@kadira/storybook"`.
-export const storiesOf = groupName => {
+export const storiesOf = (groupName) => {
 	const createSpec = (storyName, story) => {
@@ -26,3 +26,3 @@ describe(groupName, () => {
 		addWithInfo(storyName, ...info) {
-			const fns = info.filter(x => typeof x === 'function');
+			const fns = info.filter((x) => typeof x === 'function');
 			const story = fns[fns.length - 1];
@@ -36,3 +36,3 @@ createSpec(storyName, story);
 			return api;
-		}
+		},
 	};
@@ -39,0 +39,0 @@

src/components/Aside/Aside.spec.js

@@ -18,4 +18,4 @@ import React from 'react';
 				ui: {
-					get: (ref, cb) => cb(spirit)
-				}
+					get: (ref, cb) => cb(spirit),
+				},
 			};
@@ -30,3 +30,3 @@
 					wrapper.setProps({ isOpen: false });
-				}
+				},
 			});
@@ -33,0 +33,0 @@ expect(spirit.onclose()).toEqual(true);

src/components/Aside/index.js

@@ -5,3 +5,3 @@ import React, { Component } from 'react';
 
-const noop = () => { };
+const noop = () => {};
 
@@ -11,3 +11,3 @@ class Aside extends Component {
 		const children = React.Children.toArray(nodes);
-		const wrappedTabs = children.every(node => node.props['data-ts'] === 'Panel');
+		const wrappedTabs = children.every((node) => node.props['data-ts'] === 'Panel');
 		if (nodes && wrappedTabs) {
@@ -17,9 +17,5 @@ if (children.length === 1) {
 			}
-			else {
-				return <div data-ts="Panels">{nodes}</div>;
-			}
+			return <div data-ts="Panels">{nodes}</div>;
 		}
-		else {
-			return <div data-ts="Panel">{nodes}</div>;
-		}
+		return <div data-ts="Panel">{nodes}</div>;
 	}
@@ -32,14 +28,7 @@
 		this.onClose = this.onClose.bind(this);
-
-		// Sync open flag for onclose / onopen callbacks
-		this.isOpen = props.isOpen;
 	}
 
-	componentWillReceiveProps(nextProps) {
-		this.isOpen = nextProps.isOpen;
-	}
-
 	onClose(e) {
 		this.props.onClose(e);
-		return typeof this.isOpen !== 'undefined' ? !this.isOpen : undefined;
+		return !this.props.isOpen;
 	}
@@ -49,3 +38,3 @@
 		this.props.onOpen(e);
-		return this.isOpen;
+		return this.props.isOpen;
 	}
@@ -58,3 +47,3 @@
 
-		window.ts.ui.get(ref, spirit => {
+		window.ts.ui.get(ref, (spirit) => {
 			spirit.onclose = this.onClose;
@@ -73,3 +62,3 @@ spirit.onclosed = this.props.onClosed;
 			'data-ts.open': isOpen,
-			'data-ts.busy': busyMessage
+			'data-ts.busy': busyMessage,
 		};
@@ -102,3 +91,3 @@
 	title: PropTypes.string,
-	className: PropTypes.string
+	className: PropTypes.string,
 };
@@ -116,5 +105,5 @@
 	title: 'Aside',
-	className: ''
+	className: '',
 };
 
 export default Aside;

src/components/Button/index.js

@@ -17,3 +17,3 @@ import PropTypes from 'prop-types';
 	type: PropTypes.string,
-	className: PropTypes.string
+	className: PropTypes.string,
 };
@@ -25,5 +25,5 @@
 	type: 'button',
-	className: undefined
+	className: undefined,
 };
 
 export default Button;

src/components/Buttons/Buttons.spec.js

@@ -22,3 +22,3 @@ import { configure, shallow } from 'enzyme';
 				</li>
-			</Buttons>
+			</Buttons>,
 		);
@@ -25,0 +25,0 @@

src/components/Buttons/index.js

 import PropTypes from 'prop-types';
 import React from 'react';
 
-const Buttons = props => {
-	return <menu data-ts="Buttons" {...props} />;
-};
+const Buttons = (props) => <menu data-ts="Buttons" {...props} />;
 
 Buttons.propTypes = {
 	children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
-	className: PropTypes.string
+	className: PropTypes.string,
 };
@@ -15,5 +13,5 @@
 	children: null,
-	className: undefined
+	className: undefined,
 };
 
 export default Buttons;

src/components/Footer/index.js

@@ -20,4 +20,4 @@ import PropTypes from 'prop-types';
 
-	componentWillReceiveProps(nextProps) {
-		Footer.update(nextProps);
+	componentDidUpdate() {
+		Footer.update(this.props);
 	}
@@ -34,5 +34,5 @@
 	buttons: PropTypes.arrayOf(PropTypes.object),
-	onOpenCollaboration: PropTypes.func
+	onOpenCollaboration: PropTypes.func,
 };
 /* eslint-enable react/no-unused-prop-types, react/require-default-props */
 export default Footer;

src/components/Form/index.js

 import React from 'react';
 import PropTypes from 'prop-types';
 
-const Form = props => (
+const Form = (props) => (
 	<form data-ts="Form" {...props}>
@@ -11,9 +11,9 @@ {props.children}
 Form.defaultProps = {
-	children: []
+	children: [],
 };
 
 Form.propTypes = {
-	children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
+	children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
 };
 
 export default Form;

src/components/FormSwitch/index.js

@@ -10,12 +10,6 @@ import React, { Component } from 'react';
 		this.onChange = this.onChange.bind(this);
-		this.checked = props.checked;
 	}
 
-	componentWillReceiveProps(nextProps) {
-		this.checked = nextProps.checked;
-	}
-
 	onChange(e) {
 		this.props.onChange(e);
-		return typeof this.checked !== 'undefined' ? !this.checked : undefined;
 	}
@@ -50,3 +44,3 @@
 	disabled: PropTypes.bool,
-	onChange: PropTypes.func
+	onChange: PropTypes.func,
 };
@@ -60,5 +54,5 @@
 	disabled: false,
-	onChange: noop
+	onChange: noop,
 };
 
 export default Switch;

src/components/Header/index.js

@@ -8,3 +8,3 @@ import PropTypes from 'prop-types';
 	GREEN: 'green',
-	PURPLE: 'purple'
+	PURPLE: 'purple',
 };
@@ -49,4 +49,4 @@
 
-	componentWillReceiveProps(nextProps) {
-		Header.update(nextProps);
+	componentDidUpdate() {
+		Header.update(this.props);
 	}
@@ -64,3 +64,3 @@
 	title: PropTypes.string,
-	visible: PropTypes.bool
+	visible: PropTypes.bool,
 };
@@ -73,5 +73,5 @@ /* eslint-enable react/no-unused-prop-types, react/require-default-props */
 	title: '',
-	visible: true
+	visible: true,
 };
 
 export default Header;

src/components/Menu/index.js

@@ -9,10 +9,10 @@ import React from 'react';
 		PropTypes.arrayOf(PropTypes.node),
-		PropTypes.node
-	])
+		PropTypes.node,
+	]),
 };
 
 Menu.defaultProps = {
-	children: null
+	children: null,
 };
 
 export default Menu;

src/components/MenuItem/index.js

@@ -17,3 +17,3 @@ import React from 'react';
 	selected: PropTypes.bool,
-	disabled: PropTypes.bool
+	disabled: PropTypes.bool,
 };
@@ -24,5 +24,5 @@
 	selected: false,
-	disabled: false
+	disabled: false,
 };
 
 export default MenuItem;

src/components/Modal/index.js

@@ -14,9 +14,5 @@ import React, { Component } from 'react';
 		this.onClose = this.onClose.bind(this);
-
-		// Sync open flag for onclose / onopen callbacks
-		this.isOpen = props.isOpen;
 	}
 
-	componentWillReceiveProps(nextProps) {
-		this.isOpen = nextProps.isOpen;
+	componentDidUpdate() {
 		this.onRef(this.modalRef);
@@ -27,3 +23,3 @@ }
 		this.props.onClose(e);
-		return typeof this.isOpen !== 'undefined' ? !this.isOpen : undefined;
+		return !this.props.isOpen;
 	}
@@ -33,3 +29,3 @@
 		this.props.onOpen(e);
-		return this.isOpen;
+		return this.props.isOpen;
 	}
@@ -45,3 +41,3 @@
 
-		window.ts.ui.get(ref, spirit => {
+		window.ts.ui.get(ref, (spirit) => {
 			spirit.onclose = this.onClose;
@@ -60,6 +56,6 @@ spirit.onclosed = this.props.onClosed;
 			'data-ts.title': this.props.title,
-			'data-ts.open': this.props.isOpen
+			'data-ts.open': this.props.isOpen,
 		};
 		const dialogClass = classNames({
-			'ts-micro-modal': this.props.isMicroSize
+			'ts-micro-modal': this.props.isMicroSize,
 		});
@@ -85,3 +81,3 @@ return (
 	buttons: PropTypes.arrayOf(PropTypes.object),
-	isMicroSize: PropTypes.bool
+	isMicroSize: PropTypes.bool,
 };
@@ -98,5 +94,5 @@
 	buttons: undefined,
-	isMicroSize: false
+	isMicroSize: false,
 };
 
-export default Modal;
+export default Modal;

src/components/Modal/Modal.spec.js

@@ -16,3 +16,3 @@ import React from 'react';
 			const spirit = {
-				buttons: () => {}
+				buttons: () => {},
 			};
@@ -27,4 +27,4 @@
 						cb(spirit);
-					}
-				}
+					},
+				},
 			};
@@ -39,3 +39,3 @@
 					wrapper.setProps({ isOpen: false });
-				}
+				},
 			});
@@ -42,0 +42,0 @@ expect(spirit.onclose()).toEqual(true);

src/components/Note/index.js

@@ -10,4 +10,4 @@ /* eslint-disable react/no-unused-prop-types */
 
-	componentWillReceiveProps(nextProps) {
-		this.update(nextProps);
+	componentDidUpdate() {
+		this.update(this.props);
 	}
@@ -27,3 +27,3 @@
 				text: props.text,
-				onclose: props.onClose
+				onclose: props.onClose,
 			});
@@ -44,3 +44,3 @@ this.note.icon = props.icon;
 	text: PropTypes.string.isRequired,
-	onClose: PropTypes.func
+	onClose: PropTypes.func,
 };
@@ -50,5 +50,5 @@
 	icon: null,
-	onClose: () => {}
+	onClose: () => {},
 };
 
 export default Note;

src/components/Note/Note.spec.js

@@ -19,4 +19,4 @@ import React from 'react';
 				jasmine.objectContaining({
-					text: 'Bar'
-				})
+					text: 'Bar',
+				}),
 			);
@@ -23,0 +23,0 @@ });

src/components/SideBar/index.js

@@ -10,3 +10,3 @@ import React, { Component } from 'react';
 		const children = React.Children.toArray(nodes);
-		const wrappedTabs = children.every(node => node.props['data-ts'] === 'Panel');
+		const wrappedTabs = children.every((node) => node.props['data-ts'] === 'Panel');
 		return nodes && wrappedTabs ? nodes : <div data-ts="Panel">{nodes}</div>;
@@ -20,14 +20,7 @@ }
 		this.onClose = this.onClose.bind(this);
-
-		// Sync open flag for onclose / onopen callbacks
-		this.isOpen = props.isOpen;
 	}
 
-	componentWillReceiveProps(nextProps) {
-		this.isOpen = nextProps.isOpen;
-	}
-
 	onClose(e) {
 		this.props.onClose(e);
-		return typeof this.isOpen !== 'undefined' ? !this.isOpen : undefined;
+		return !this.props.isOpen;
 	}
@@ -37,3 +30,3 @@
 		this.props.onOpen(e);
-		return this.isOpen;
+		return this.props.isOpen;
 	}
@@ -46,3 +39,3 @@
 
-		window.ts.ui.get(ref, spirit => {
+		window.ts.ui.get(ref, (spirit) => {
 			spirit.onclose = this.onClose;
@@ -61,3 +54,3 @@ spirit.onclosed = this.props.onClosed;
 			'data-ts.open': isOpen,
-			'data-ts.busy': busyMessage
+			'data-ts.busy': busyMessage,
 		};
@@ -90,3 +83,3 @@
 	title: PropTypes.string,
-	className: PropTypes.string
+	className: PropTypes.string,
 };
@@ -104,5 +97,5 @@
 	title: 'SideBar',
-	className: ''
+	className: '',
 };
 
 export default SideBar;

src/components/Spinner/index.js

@@ -6,3 +6,3 @@ import React from 'react';
 	componentDidUpdate() {
-		window.ts.ui.get('.ts-app', app => {
+		window.ts.ui.get('.ts-app', (app) => {
 			if (this.props.show) {
@@ -26,3 +26,3 @@ if (this.props.blocking) {
 Spinner.defaultProps = {
-	blocking: false
+	blocking: false,
 };
@@ -32,5 +32,5 @@ Spinner.propTypes = {
 	message: PropTypes.string.isRequired,
-	blocking: PropTypes.bool
+	blocking: PropTypes.bool,
 };
 
 export default Spinner;

src/components/Spinner/Spinner.spec.js

@@ -12,3 +12,3 @@ import React from 'react';
 		const spirit = {
-			done: jest.fn()
+			done: jest.fn(),
 		};
@@ -19,4 +19,4 @@ window.ts = {
 					cb(spirit);
-				}
-			}
+				},
+			},
 		};
@@ -23,0 +23,0 @@ wrapper.setProps({ show: false });

src/components/StatusBar/index.js

@@ -9,4 +9,4 @@ import { Component } from 'react';
 
-	componentWillReceiveProps(nextProps) {
-		this.update(nextProps.visible, nextProps.linkable, nextProps.message, nextProps.buttons);
+	componentDidUpdate() {
+		this.update(this.props.visible, this.props.linkable, this.props.message, this.props.buttons);
 	}
@@ -46,3 +46,3 @@
 	message: PropTypes.string,
-	visible: PropTypes.bool
+	visible: PropTypes.bool,
 };
@@ -54,5 +54,5 @@
 	message: '',
-	visible: true
+	visible: true,
 };
 
 export default StatusBar;

src/components/StatusBar/StatusBar.spec.js

@@ -24,3 +24,3 @@ import React from 'react';
 				message: 'Bar',
-				buttons: []
+				buttons: [],
 			});
@@ -33,3 +33,3 @@ expect(component.update).toHaveBeenCalledWith(true, true, 'Bar', []);
 			wrapper.setProps({
-				visible: false
+				visible: false,
 			});
@@ -36,0 +36,0 @@ expect(component.bar.hide).toHaveBeenCalled();

src/components/Table/index.js

@@ -0,1 +1,2 @@
+/* eslint-disable react/no-unused-prop-types */
 import React, { useEffect } from 'react';
@@ -5,8 +6,12 @@ import PropTypes from 'prop-types';
 
-const Table = props => {
-	const renderTable = props => {
-		const { id, cols, rows, onbutton, linkable, pager, explode, selectable } = props;
-		window.ts.ui.get(`#${id}`, table => {
-			explode && table.explode();
-			selectable && table.selectable();
+const Table = (props) => {
+	const renderTable = (renderProps) => {
+		const { id, cols, rows, onbutton, linkable, pager, explode, selectable } = renderProps;
+		window.ts.ui.get(`#${id}`, (table) => {
+			if (explode) {
+				table.explode();
+			}
+			if (selectable) {
+				table.selectable();
+			}
 			table.cols(cols);
@@ -38,3 +43,3 @@ table.rows(rows);
 	selectable: false,
-	explode: false
+	explode: false,
 };
@@ -50,4 +55,4 @@ Table.propTypes = {
 	selectable: PropTypes.bool,
-	explode: PropTypes.bool
+	explode: PropTypes.bool,
 };
 export default Table;

src/components/Tag/index.js

@@ -5,6 +5,6 @@ import React, { useEffect } from 'react';
 
-const Tag = props => {
+const Tag = (props) => {
 	const { id, label, text, type, onDelete } = props;
 	useEffect(() => {
-		window.ts.ui.get(`#${id}`, tag => {
+		window.ts.ui.get(`#${id}`, (tag) => {
 			tag.data = new Map([[label, text]]);
@@ -29,3 +29,3 @@ tag.doremove = false;
 	onDelete: null,
-	type: null
+	type: null,
 };
@@ -38,5 +38,5 @@
 	id: PropTypes.string.isRequired,
-	type: PropTypes.string
+	type: PropTypes.string,
 };
 
 export default Tag;

src/components/Tooltip/index.js

 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 
-const Tooltip = props => {
+const Tooltip = (props) => {
 	const { id, title, children } = props;
 	useEffect(() => {
-		let tooltipEle = document.getElementById(id);
+		const tooltipEle = document.getElementById(id);
 		tooltipEle.setAttribute('data-ts.title', title);
@@ -19,3 +19,3 @@ }, [id, title]);
 	children: [],
-	title: ''
+	title: '',
 };
@@ -26,5 +26,5 @@
 	title: PropTypes.string,
-	children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
+	children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
 };
 
 export default Tooltip;

src/components/TsLogo/index.js

@@ -5,5 +5,3 @@ import React from 'react';
 
-require('./TsLogo.css');
-
-const TsLogo = props => {
+const TsLogo = (props) => {
 	const { className } = props;
@@ -25,7 +23,14 @@ const path =
 TsLogo.propTypes = {
-	className: PropTypes.string
+	className: PropTypes.string,
+	style: PropTypes.object,
 };
 
 TsLogo.defaultProps = {
-	className: ''
+	className: '',
+	style: {
+		display: 'inline-block',
+		width: '33px',
+		height: '22px',
+		opacity: 0.1,
+	},
 };

src/setupTests.js

@@ -11,3 +11,3 @@ /* eslint-disable global-require */
 	__esModule: true,
-	Portal
+	Portal,
 }));
@@ -17,3 +17,3 @@
 	ui: {
-		ready: cb => cb(),
+		ready: (cb) => cb(),
 		Note: jest.fn().mockReturnValue({}),
@@ -26,7 +26,7 @@ Notification: jest.fn().mockReturnValue({}),
 			show: jest.fn(),
-			hide: jest.fn()
+			hide: jest.fn(),
 		},
 		Footer: {
 			collabbutton: jest.fn(),
-			buttons: jest.fn()
+			buttons: jest.fn(),
 		},
@@ -41,6 +41,6 @@ TopBar: {
 			show: jest.fn(),
-			hide: jest.fn()
+			hide: jest.fn(),
 		},
-		get: jest.fn()
-	}
+		get: jest.fn(),
+	},
 };
@@ -51,3 +51,3 @@ global.document = new JSDOM().window.document;
 Portal.propTypes = {
-	children: PropTypes.object.isRequired
+	children: PropTypes.object.isRequired,
 };

src/stories/Aside.js

@@ -29,4 +29,4 @@ import React from 'react';
 		info: `In controlled mode the aside will respect the isOpen attribute at all times
-				Use the onClose callback to toggle the flag.`
-	}
+				Use the onClose callback to toggle the flag.`,
+	},
 );
@@ -41,3 +41,3 @@
 			max: 10,
-			step: 1
+			step: 1,
 		});
@@ -47,3 +47,3 @@ const tabs = [];
 			const tabLabel = {
-				'data-ts.label': ['tab', index].join(' ')
+				'data-ts.label': ['tab', index].join(' '),
 			};
@@ -54,3 +54,3 @@ const tabContent = ['tab', index, 'content'].join(' ');
 					{tabContent}
-				</div>
+				</div>,
 			);
@@ -74,3 +74,3 @@ }
 	},
-	{ info: 'Aside may contain tabs content. Just define some Panels in specified format' }
+	{ info: 'Aside may contain tabs content. Just define some Panels in specified format' },
 );

src/stories/Button.js

@@ -15,4 +15,4 @@ import { storiesOf } from '@storybook/react';
 	{
-		info: `A simple Button does not require any props`
-	}
+		info: 'A simple Button does not require any props',
+	},
 );
@@ -28,4 +28,4 @@
 	{
-		info: 'A primary Button requires `ts-primary` className'
-	}
+		info: 'A primary Button requires `ts-primary` className',
+	},
 );
@@ -41,4 +41,4 @@
 	{
-		info: 'A secondary Button requires `ts-secondary` className'
-	}
+		info: 'A secondary Button requires `ts-secondary` className',
+	},
 );
@@ -54,4 +54,4 @@
 	{
-		info: 'A tertiary Button requires `ts-tertiary` className'
-	}
+		info: 'A tertiary Button requires `ts-tertiary` className',
+	},
 );
@@ -68,4 +68,4 @@
 		info:
-			'A mirco Button requires `ts-micro` and one of `ts-primary` `ts-secondary` `ts-tertiary` className'
-	}
+			'A mirco Button requires `ts-micro` and one of `ts-primary` `ts-secondary` `ts-tertiary` className',
+	},
 );
@@ -81,4 +81,4 @@
 	{
-		info: 'For making a Button busy, set `busy={true}`'
-	}
+		info: 'For making a Button busy, set `busy={true}`',
+	},
 );
@@ -94,4 +94,4 @@
 	{
-		info: 'For more information visit `tradeshift-ui` documentation page'
-	}
+		info: 'For more information visit `tradeshift-ui` documentation page',
+	},
 );

src/stories/Buttons.js

@@ -24,4 +24,4 @@ import { storiesOf } from '@storybook/react';
 	{
-		info: `The basic structure`
-	}
+		info: 'The basic structure',
+	},
 );
@@ -47,4 +47,4 @@
 		info:
-			'Buttons component accepts attributes describes in `tradeshift-ui buttons` documentation page'
-	}
+			'Buttons component accepts attributes describes in `tradeshift-ui buttons` documentation page',
+	},
 );

src/stories/Footer.js

@@ -13,3 +13,3 @@ import React from 'react';
 	() => {
-		const buttons = _.times(number('buttonsCount', 2)).map(count => ({
+		const buttons = _.times(number('buttonsCount', 2)).map((count) => ({
 			label: text(`button_${count}_title`, `Button ${count}`),
@@ -19,3 +19,3 @@ type: text(`button_${count}_class`, `ts-primary button-${count}`),
 				action(`Footer button ${count} clicked`);
-			}
+			},
 		}));
@@ -26,4 +26,4 @@ return <Footer buttons={buttons} />;
 		info: `The Footer component accepts a 'buttons' prop in an Array of Objects format as documented in ui.tradeshift.com.
-	No buttons will be displayed if this prop is empty or not passed.`
-	}
+	No buttons will be displayed if this prop is empty or not passed.`,
+	},
 );
@@ -36,4 +36,4 @@
 		info:
-			'The Footer component accepts an *onOpenCollaboration* prop as a function to open the collaboration panel'
-	}
+			'The Footer component accepts an *onOpenCollaboration* prop as a function to open the collaboration panel',
+	},
 );
@@ -51,4 +51,4 @@
 		info:
-			'The Footer component accepts an *badge* prop as a boolean that, if true, will show a notification badge over the icon. The is to be used in tandem with the *onOpenCollaboration* prop.'
-	}
+			'The Footer component accepts an *badge* prop as a boolean that, if true, will show a notification badge over the icon. The is to be used in tandem with the *onOpenCollaboration* prop.',
+	},
 );

src/stories/Form.js

@@ -9,3 +9,3 @@ import React from 'react';
 	info: `Form elements must be wrapped inside a Form component.
-	The Form component renders the basic ts-ui form structure`
+	The Form component renders the basic ts-ui form structure`,
 });

src/stories/FormSwitch.js

@@ -34,3 +34,3 @@ import React from 'react';
 	),
-	{ info: 'FormSwitch should be used in a form' }
+	{ info: 'FormSwitch should be used in a form' },
 );

src/stories/Header.js

@@ -11,3 +11,3 @@ import React from 'react';
 stories.add('Change the title', () => <Header title={text('header title', 'My cool title')} />, {
-	info: 'The Header component accepts a "title" property.'
+	info: 'The Header component accepts a "title" property.',
 });
@@ -23,3 +23,3 @@
 	),
-	{ info: 'The Header component accepts a "color" property to change the color.' }
+	{ info: 'The Header component accepts a "color" property to change the color.' },
 );
@@ -30,3 +30,3 @@
 	() => {
-		const buttons = _.times(number('buttonsCount', 2)).map(count => ({
+		const buttons = _.times(number('buttonsCount', 2)).map((count) => ({
 			label: text(`button_${count}_title`, `Button ${count}`),
@@ -36,3 +36,3 @@ type: text(`button_${count}_class`, `ts-primary button-${count}`),
 				action(`Header button ${count} clicked`);
-			}
+			},
 		}));
@@ -44,4 +44,4 @@
 		info: `The Header component accepts a 'buttons' prop in an Array of Objects format as documented in ui.tradeshift.com.
-	No buttons will be displayed if this prop is empty or not passed.`
-	}
+	No buttons will be displayed if this prop is empty or not passed.`,
+	},
 );

src/stories/Modal.js

@@ -33,4 +33,4 @@ import React from 'react';
 		info: `In controlled mode the Modal will respect the isOpen attribute at all times.
-	Use the onClose callback to toggle the flag.`
-	}
+	Use the onClose callback to toggle the flag.`,
+	},
 );
@@ -47,4 +47,4 @@
 					action('onClick');
-				}
-			}
+				},
+			},
 		];
@@ -75,4 +75,4 @@ return (
 		info: `In controlled mode the Modal will respect the isOpen attribute at all times.
-	Use the onClose callback to toggle the flag.`
-	}
+	Use the onClose callback to toggle the flag.`,
+	},
 );

src/stories/Note.js

@@ -23,4 +23,4 @@ import React from 'react';
 		info:
-			'Notes are toggled by rendering and removing them from the DOM. You can only have one note on a page at a time.'
-	}
+			'Notes are toggled by rendering and removing them from the DOM. You can only have one note on a page at a time.',
+	},
 );

src/stories/SideBar.js

@@ -29,4 +29,4 @@ import React from 'react';
 		info: `In controlled mode the side bar will respect the isOpen attribute at all times.
-	Use the onClose callback to toggle the flag`
-	}
+	Use the onClose callback to toggle the flag`,
+	},
 );
@@ -41,3 +41,3 @@
 			max: 10,
-			step: 1
+			step: 1,
 		});
@@ -47,3 +47,3 @@ const tabs = [];
 			const tabLabel = {
-				'data-ts.label': ['tab', index].join(' ')
+				'data-ts.label': ['tab', index].join(' '),
 			};
@@ -54,3 +54,3 @@ const tabContent = ['tab', index, 'content'].join(' ');
 					{tabContent}
-				</div>
+				</div>,
 			);
@@ -75,4 +75,4 @@ }
 	{
-		info: 'SideBar may contain tabs content. Just define some Panels in specified format'
-	}
+		info: 'SideBar may contain tabs content. Just define some Panels in specified format',
+	},
 );

src/stories/Spinner.js

@@ -17,4 +17,4 @@ import React from 'react';
 	{
-		info: 'The blocking props is treated as false if you don’t set it'
-	}
+		info: 'The blocking props is treated as false if you don’t set it',
+	},
 );

src/stories/StatusBar.js

@@ -14,3 +14,3 @@ import React from 'react';
 	() => {
-		const buttons = _.times(number('buttonsCount', 2)).map(count => ({
+		const buttons = _.times(number('buttonsCount', 2)).map((count) => ({
 			label: text(`button_${count}_title`, `Button ${count}`),
@@ -20,3 +20,3 @@ type: text(`button_${count}_class`, `ts-primary button-${count}`),
 				action(`StatusBar button ${count} clicked`);
-			}
+			},
 		}));
@@ -28,4 +28,4 @@
 		info: `The StatusBar component accepts a "buttons" prop in an Array of Objects format as documented in ui.tradeshift.com.
-	No buttons will be displayed if this prop is empty or not passed.`
-	}
+	No buttons will be displayed if this prop is empty or not passed.`,
+	},
 );
@@ -40,3 +40,3 @@
 				'message',
-				'StatusBar message (with a link)[http://ui.tradeshift.com/#components/bars/statusbar.html]'
+				'StatusBar message (with a link)[http://ui.tradeshift.com/#components/bars/statusbar.html]',
 			)}
@@ -49,4 +49,4 @@ />
 	which will render links in the message if this prop evaluates to true
-	No message will be displayed if this prop is empty or not passed`
-	}
+	No message will be displayed if this prop is empty or not passed`,
+	},
 );
@@ -58,3 +58,3 @@
 	which will render links in the message if this prop evaluates to true
-	No message will be displayed if this prop is empty or not passed`
+	No message will be displayed if this prop is empty or not passed`,
 });

src/stories/Table.js

@@ -10,3 +10,3 @@ import React from 'react';
 		cols: [{ label: 'One' }, { label: 'Two' }, { label: 'Three' }],
-		rows: [['A', 'D', 'G'], ['B', 'E', 'H'], ['C', 'F', 'I']]
+		rows: [['A', 'D', 'G'], ['B', 'E', 'H'], ['C', 'F', 'I']],
 	};
@@ -29,4 +29,4 @@ const shouldShow = boolean('shouldShow', false);
 					text: '[sayHello](sayHello)',
-					type: 'say-hello'
-				}
+					type: 'say-hello',
+				},
 			],
@@ -38,4 +38,4 @@ [
 					text: '[sayHello](sayHello)',
-					type: 'say-hello'
-				}
+					type: 'say-hello',
+				},
 			],
@@ -47,8 +47,8 @@ [
 					text: '[sayHello](sayHello)',
-					type: 'say-hello'
-				}
-			]
-		]
+					type: 'say-hello',
+				},
+			],
+		],
 	};
-	const handleLinkable = action => {
+	const handleLinkable = (action) => {
 		if (action === 'sayHello') {
@@ -55,0 +55,0 @@ window.ts.ui.Notification.info('hello');

src/stories/Tag.js

@@ -7,13 +7,5 @@ import React from 'react';
 const stories = storiesOf('Tag', module);
-stories.add('Text only', () => {
-	return <Tag text="Roll a d20" id="tag1" />;
-});
-stories.add('Label-Text', () => {
-	return <Tag label="AREA OF ORIGIN" text="The Sword Coast" id="tag2" />;
-});
-stories.add('Tag with type', () => {
-	return <Tag text="ts-danger" type="ts-danger" id="tag3" />;
-});
-stories.add('Tag with ondelete function', () => {
-	return <Tag label="fruit" text="apple" onDelete={action('onDelete')} id="tag4" />;
-});
+stories.add('Text only', () => <Tag text="Roll a d20" id="tag1" />);
+stories.add('Label-Text', () => <Tag label="AREA OF ORIGIN" text="The Sword Coast" id="tag2" />);
+stories.add('Tag with type', () => <Tag text="ts-danger" type="ts-danger" id="tag3" />);
+stories.add('Tag with ondelete function', () => <Tag label="fruit" text="apple" onDelete={action('onDelete')} id="tag4" />);

src/stories/Tooltip.js

@@ -7,8 +7,6 @@ import React from 'react';
 const stories = storiesOf('Tooltip', module);
-stories.add('Basic usage', () => {
-	return (
-		<Tooltip id="tooltip-example" title="hahha">
-			Tooltip will show on mouse hover.
-		</Tooltip>
-	);
-});
+stories.add('Basic usage', () => (
+	<Tooltip id="tooltip-example" title="hahha">
+		Tooltip will show on mouse hover.
+	</Tooltip>
+	));

New alerts

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

Fixed alerts

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

41

decreased by-4.65%

Number of package files

110

increased by69.23%

Lines of code

3312

increased by77.11%

Number of low quality alerts

1

decreased by-50%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

122586

decreased by-30.48%

No dependency changes