react-tradeshift-ui - npm Package Compare versions

Comparing version 3.3.0 to 3.3.1

package.json

 {
 	"name": "react-tradeshift-ui",
-	"version": "3.3.0",
+	"version": "3.3.1",
 	"main": "dist/cjs/index.js",
@@ -8,5 +8,7 @@ "module": "dist/esm/index.js",
 	"scripts": {
+		"prepare": "husky install",
 		"build": "babel src/components --out-dir dist/esm --presets=@babel/preset-react && babel src/components --out-dir dist/cjs --presets=@babel/preset-react,@babel/preset-env",
 		"prepublish": "npm run build",
 		"build-storybook": "build-storybook",
+		"deploy-storybook": "storybook-to-ghpages",
 		"start": "start-storybook -p 9009",
@@ -17,4 +19,4 @@ "lint": "eslint src",
 		"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",
+		"prettier": "prettier --write --color src",
+		"report-coverage": "codecov",
 		"commitmsg": "opt --in commit-msg --exec \"validate-commit-msg\"",
@@ -28,4 +30,3 @@ "precommit": "lint-staged",
 			"eslint --color",
-			"prettier --write --use-tabs --single-quote --print-width 100 --color",
-			"git add"
+			"prettier --write --color"
 		]
@@ -44,6 +45,6 @@ },
 	"devDependencies": {
-		"@babel/cli": "^7.14.3",
-		"@babel/core": "^7.14.3",
-		"@babel/preset-env": "^7.14.4",
-		"@babel/preset-react": "^7.13.13",
+		"@babel/cli": "^7.14.5",
+		"@babel/core": "^7.14.6",
+		"@babel/preset-env": "^7.14.5",
+		"@babel/preset-react": "^7.14.5",
 		"@storybook/addon-actions": "^6.2.9",
@@ -56,3 +57,4 @@ "@storybook/addon-info": "^5.3.21",
 		"@storybook/addons": "^6.2.9",
-		"@storybook/react": "^6.2.9",
+		"@storybook/react": "^6.4.22",
+		"@storybook/storybook-deployer": "^2.8.10",
 		"@testing-library/react": "^11.2.7",
@@ -65,3 +67,3 @@ "@types/classnames": "^2.3.1",
 		"@types/react-test-renderer": "^17.0.1",
-		"codecov.io": "^0.1.6",
+		"codecov": "^3.8.2",
 		"commitizen": "^4.2.4",
@@ -72,18 +74,18 @@ "cz-conventional-changelog": "^3.3.0",
 		"enzyme-to-json": "^3.6.2",
+		"eslint": "^8.14.0",
 		"eslint-config-airbnb": "^18.2.1",
-		"eslint-plugin-import": "^2.23.4",
-		"eslint-plugin-jest": "^24.3.6",
+		"eslint-config-prettier": "^8.3.0",
+		"eslint-plugin-import": "^2.26.0",
+		"eslint-plugin-jest": "26.1.5",
 		"eslint-plugin-jsx-a11y": "^6.4.1",
 		"eslint-plugin-react": "^7.24.0",
-		"husky": "^2.7.0",
+		"husky": "^6.0.0",
 		"jsdom": "^16.6.0",
-		"lint-staged": "^8.2.1",
+		"lint-staged": "12.4.1",
 		"lodash": "^4.17.21",
-		"mini-css-extract-plugin": "^0.7.0",
-		"prettier": "^1.18.2",
+		"prettier": "^2.3.1",
 		"react": "^17.0.2",
 		"react-dom": "^17.0.2",
-		"react-scripts": "^4.0.3",
+		"react-scripts": "5.0.0",
 		"react-test-renderer": "^17.0.2",
-		"semantic-release": "^17.4.3",
 		"validate-commit-msg": "^2.14.0"
@@ -99,2 +101,40 @@ },
 	},
+	"overrides": {
+		"commitizen": {
+			"minimist": "^1.2.6",
+			"inquirer": {
+				"ansi-regex": "^3.0.1"
+			},
+			"strip-ansi": {
+				"ansi-regex": "^4.1.1"
+			}
+		},
+		"@storybook/addon-info": {
+			"marked": "^4.0.10",
+			"highlight.js": "^10.4.1",
+			"node-fetch": "^2.6.7",
+			"refractor": {
+				"prismjs": "^1.27.0"
+			}
+		},
+		"@storybook/addon-notes": {
+			"highlight.js": "^10.4.1",
+			"refractor": {
+				"prismjs": "^1.27.0"
+			}
+		},
+		"@storybook/react": {
+			"trim": "^0.0.3",
+			"glob-parent": "^5.1.2",
+			"@storybook/core": {
+				"ansi-regex": "^3.0.1"
+			}
+		},
+		"react-scripts": {
+			"nth-check": "^2.0.1"
+		},
+		"validate-commit-msg": {
+			"semver-regex": "^3.1.3"
+		}
+	},
 	"repository": {
@@ -101,0 +141,0 @@ "type": "git",

prettier.config.js

 module.exports = {
 	singleQuote: true,
-	tabs: true,
+	useTabs: true,
 	trailingComma: 'all',
 };

src/__mocks__/storybook.js

@@ -0,1 +1,2 @@
+/* eslint-disable jest/no-export, jest/valid-title */
 import renderer from 'react-test-renderer';
@@ -2,0 +3,0 @@

src/components/Aside/index.js

@@ -10,3 +10,5 @@ import React, { Component } from 'react';
 		const children = React.Children.toArray(nodes);
-		const isPanels = children.every((node) => node.props['data-ts'] === 'Panel');
+		const isPanels = children.every(
+			(node) => node.props['data-ts'] === 'Panel',
+		);
 		const isRootElements = children.find((node) => node.type === 'footer');
@@ -58,3 +60,4 @@
 	render() {
-		const { autofocus, isLoading, loadingMessage, title, isOpen, className } = this.props;
+		const { autofocus, isLoading, loadingMessage, title, isOpen, className } =
+			this.props;
 		const busyMessage = isLoading ? loadingMessage : '';
@@ -84,3 +87,6 @@ const asideProps = {
 Aside.propTypes = {
-	children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+	children: PropTypes.oneOfType([
+		PropTypes.arrayOf(PropTypes.node),
+		PropTypes.node,
+	]),
 	autofocus: PropTypes.bool,
@@ -87,0 +93,0 @@ isLoading: PropTypes.bool,

src/components/Button/Button.spec.js

@@ -16,3 +16,5 @@ import { configure, shallow } from 'enzyme';
 	it('should render correctly having className', () => {
-		const wrapper = shallow(<Button className="ts-primary">Default button</Button>);
+		const wrapper = shallow(
+			<Button className="ts-primary">Default button</Button>,
+		);
 
@@ -19,0 +21,0 @@ expect(wrapper).toMatchSnapshot();

src/components/Button/index.js

@@ -14,3 +14,6 @@ import PropTypes from 'prop-types';
 Button.propTypes = {
-	children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+	children: PropTypes.oneOfType([
+		PropTypes.arrayOf(PropTypes.node),
+		PropTypes.node,
+	]),
 	busy: PropTypes.bool,
@@ -17,0 +20,0 @@ type: PropTypes.string,

src/components/Buttons/index.js

@@ -7,3 +7,6 @@ import PropTypes from 'prop-types';
 Buttons.propTypes = {
-	children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+	children: PropTypes.oneOfType([
+		PropTypes.arrayOf(PropTypes.node),
+		PropTypes.node,
+	]),
 	className: PropTypes.string,
@@ -10,0 +13,0 @@ };

src/components/Form/index.js

@@ -15,5 +15,8 @@ import React from 'react';
 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/MenuItem/index.js

@@ -15,3 +15,6 @@ import React from 'react';
 MenuItem.propTypes = {
-	children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+	children: PropTypes.oneOfType([
+		PropTypes.arrayOf(PropTypes.node),
+		PropTypes.node,
+	]),
 	selected: PropTypes.bool,
@@ -18,0 +21,0 @@ disabled: PropTypes.bool,

src/components/Modal/index.js

@@ -59,3 +59,8 @@ import React, { Component } from 'react';
 			<Portal>
-				<dialog data-ts="Modal" {...modalProps} ref={this.onRef} className={dialogClass}>
+				<dialog
+					data-ts="Modal"
+					{...modalProps}
+					ref={this.onRef}
+					className={dialogClass}
+				>
 					<div data-ts="Panel">{this.props.children}</div>
@@ -69,3 +74,6 @@ </dialog>
 Modal.propTypes = {
-	children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+	children: PropTypes.oneOfType([
+		PropTypes.arrayOf(PropTypes.node),
+		PropTypes.node,
+	]),
 	isOpen: PropTypes.bool,
@@ -72,0 +80,0 @@ onClose: PropTypes.func,

src/components/SideBar/index.js

@@ -10,3 +10,5 @@ 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>;
@@ -70,3 +72,6 @@ }
 SideBar.propTypes = {
-	children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+	children: PropTypes.oneOfType([
+		PropTypes.arrayOf(PropTypes.node),
+		PropTypes.node,
+	]),
 	isLoading: PropTypes.bool,
@@ -73,0 +78,0 @@ isOpen: PropTypes.bool,

src/components/Table/index.js

@@ -8,3 +8,4 @@ /* eslint-disable react/no-unused-prop-types */
 	const renderTable = (renderProps) => {
-		const { id, cols, rows, onbutton, linkable, pager, explode, selectable } = renderProps;
+		const { id, cols, rows, onbutton, linkable, pager, explode, selectable } =
+			renderProps;
 		window.ts.ui.get(`#${id}`, (table) => {
@@ -11,0 +12,0 @@ if (explode) {

src/components/Tooltip/index.js

@@ -25,5 +25,8 @@ import React, { useEffect } from 'react';
 	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/setupTests.js

@@ -1,2 +0,2 @@
-/* eslint-disable global-require */
+/* eslint-disable global-require, jest/no-mocks-import */
 import React from 'react';
@@ -3,0 +3,0 @@ import PropTypes from 'prop-types';

src/stories/Aside.js

@@ -70,3 +70,5 @@ import React from 'react';
 	},
-	{ 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

@@ -63,4 +63,3 @@ import { storiesOf } from '@storybook/react';
 	{
-		info:
-			'A micro Button requires `ts-micro` and one of `ts-primary` `ts-secondary` `ts-tertiary` className',
+		info: 'A micro Button requires `ts-micro` and one of `ts-primary` `ts-secondary` `ts-tertiary` className',
 	},
@@ -67,0 +66,0 @@ );

src/stories/Buttons.js

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

src/stories/Footer.js

@@ -30,6 +30,11 @@ import React from 'react';
 	'Open collaboration',
-	() => <Footer onOpenCollaboration={() => window.ts.ui.Notification.success('Go collaborate!')} />,
+	() => (
+		<Footer
+			onOpenCollaboration={() =>
+				window.ts.ui.Notification.success('Go collaborate!')
+			}
+		/>
+	),
 	{
-		info:
-			'The Footer component accepts an *onOpenCollaboration* prop as a function to open the collaboration panel',
+		info: 'The Footer component accepts an *onOpenCollaboration* prop as a function to open the collaboration panel',
 	},
@@ -42,3 +47,5 @@ );
 		<Footer
-			onOpenCollaboration={() => window.ts.ui.Notification.success('Go collaborate!')}
+			onOpenCollaboration={() =>
+				window.ts.ui.Notification.success('Go collaborate!')
+			}
 			badge
@@ -48,5 +55,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.',
+		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.',
 	},
 );

src/stories/Header.js

@@ -10,5 +10,9 @@ 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.',
-});
+stories.add(
+	'Change the title',
+	() => <Header title={text('header title', 'My cool title')} />,
+	{
+		info: 'The Header component accepts a "title" property.',
+	},
+);
 
@@ -20,6 +24,13 @@ stories.add(
 			title="the title"
-			color={select('color', ['blue', 'dark', 'green', 'purple'], 'dark', 'foo-id-2')}
+			color={select(
+				'color',
+				['blue', 'dark', 'green', 'purple'],
+				'dark',
+				'foo-id-2',
+			)}
 		/>
 	),
-	{ info: 'The Header component accepts a "color" property to change the color.' },
+	{
+		info: 'The Header component accepts a "color" property to change the color.',
+	},
 );
@@ -26,0 +37,0 @@

src/stories/Menu.js

@@ -10,3 +10,6 @@ import React from 'react';
 	<Menu>
-		<MenuItem selected={boolean('selected', true)} disabled={boolean('disabled', false)}>
+		<MenuItem
+			selected={boolean('selected', true)}
+			disabled={boolean('disabled', false)}
+		>
 			Menu item 1
@@ -13,0 +16,0 @@ </MenuItem>

src/stories/Modal.js

@@ -24,3 +24,7 @@ import React from 'react';
 				<p>
-					<button type="submit" onClick={action('onClose')} className="ts-primary">
+					<button
+						type="submit"
+						onClick={action('onClose')}
+						className="ts-primary"
+					>
 						<span>Close the Modal</span>
@@ -64,3 +68,7 @@ </button>
 					<p>
-						<button type="submit" onClick={action('onClose')} className="ts-primary">
+						<button
+							type="submit"
+							onClick={action('onClose')}
+							className="ts-primary"
+						>
 							<span>Close the Modal</span>
@@ -67,0 +75,0 @@ </button>

src/stories/Note.js

@@ -22,5 +22,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.',
+		info: '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/StatusBar.js

@@ -49,7 +49,11 @@ import React from 'react';
 
-stories.add('Hide bar', () => <StatusBar visible={boolean('visible', false)} />, {
-	info: `The StatusBar component accepts a "message" prop in a string format.
+stories.add(
+	'Hide bar',
+	() => <StatusBar visible={boolean('visible', false)} />,
+	{
+		info: `The StatusBar component accepts a "message" prop in a string format.
 	In addition, a "linkable" prop can also be passed
 	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`,
-});
+	},
+);

src/stories/Table.js

@@ -10,3 +10,7 @@ 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'],
+		],
 	};
@@ -16,3 +20,7 @@ const shouldShow = boolean('shouldShow', false);
 		<div style={{ height: 200 }}>
-			<Table id="profile-table" cols={tableConfig.cols} rows={tableConfig.rows} />
+			<Table
+				id="profile-table"
+				cols={tableConfig.cols}
+				rows={tableConfig.rows}
+			/>
 		</div>
@@ -19,0 +27,0 @@ ) : null;

src/stories/Tag.js

@@ -8,4 +8,10 @@ import React from 'react';
 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" />);
+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

@@ -11,2 +11,2 @@ import React from 'react';
 	</Tooltip>
-	));
+));

No alert changes

Improved metrics

Total package byte prevSize

192266

increased by3.4%

Number of package files

128

increased by8.47%

Lines of code

4500

increased by1.88%

Worsened metrics

Dev dependency count

43

increased by2.38%

No dependency changes