@data-ui/forms - npm Package Compare versions

Comparing version 0.0.50 to 0.0.60-alpha.3.0

package.json

 {
   "name": "@data-ui/forms",
-  "version": "0.0.50",
+  "version": "0.0.60-alpha.3.0",
   "description": "A package of form elements for data-rich UIs. https://williaster.github.io/data-ui",
@@ -10,3 +10,5 @@ "main": "build/index.js",
     "dev": "webpack --progress --colors --watch",
-    "dev:nowatch": "webpack --progress --colors",
+    "eslint": "beemo eslint \"./{src,test}/**/*.{js,jsx,json,md}\"",
+    "lint": "npm run prettier && npm run eslint",
+    "prettier": "beemo prettier \"./{src,test}/**/*.{js,jsx,json,md}\"",
     "prepublish": "npm run build",
@@ -28,2 +30,3 @@ "test": "jest --colors --verbose --coverage"
   "devDependencies": {
+    "@data-ui/build-config": "^0.0.8",
     "aphrodite": "^1.2.0",
@@ -56,3 +59,18 @@ "babel-core": "^6.24.1",
     "setupTestFrameworkScriptFile": "./test/testsSetup.js"
+  },
+  "engines": {
+    "node": ">=8.10.0"
+  },
+  "beemo": {
+    "module": "@data-ui/build-config",
+    "drivers": [
+      "prettier",
+      "eslint"
+    ],
+    "eslint": {
+      "rules": {
+        "sort-keys": "off"
+      }
+    }
   }
 }

src/Button.jsx

@@ -0,1 +1,2 @@
+/* eslint complexity: 'off' */
 import { css, StyleSheet } from 'aphrodite';
@@ -14,3 +15,3 @@ import React from 'react';
     background: '#fff',
-    padding: 1 * unit,
+    padding: Number(unit),
     color: '#484848',
@@ -49,7 +50,7 @@ outline: 'none',
   container_sizeSmall: {
-    padding: 1 * unit,
+    padding: Number(unit),
   },
 
   container_sizeRegular: {
-    padding: `${1.5 * unit}px ${2 * unit}px`,
+    padding: `${1.5 * unit}px ${2 * unit}px`, // eslint-disable-line no-magic-numbers
   },
@@ -78,5 +79,5 @@
   round: {
-    width: 4 * unit,
-    height: 4 * unit,
-    lineHeight: `${4 * unit}px`,
+    width: 4 * unit, // eslint-disable-line no-magic-numbers
+    height: 4 * unit, // eslint-disable-line no-magic-numbers
+    lineHeight: `${4 * unit}px`, // eslint-disable-line no-magic-numbers
     borderRadius: '50%',
@@ -146,2 +147,3 @@ display: 'flex',
     <button
+      type="button"
       aria-disabled={disabled}
@@ -156,3 +158,3 @@ disabled={disabled}
         rounded && styles.rounded,
-        round && small ? styles.round_small : (round && styles.round),
+        round && small ? styles.round_small : round && styles.round,
         disabled && styles.disabled,
@@ -159,0 +161,0 @@ active && styles.active,

src/icons/BaseIcon.jsx

@@ -8,3 +8,5 @@ import React from 'react';
 const IconSizePropType = PropTypes.oneOf(
-  Array(SIZE_MAX - SIZE_MIN).fill().map((_, i) => SIZE_MIN + i),
+  Array(SIZE_MAX - SIZE_MIN)
+    .fill()
+    .map((_, i) => SIZE_MIN + i),
 );
@@ -16,3 +18,3 @@
   color: PropTypes.string,
-  style: PropTypes.object,
+  style: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
 };
@@ -37,5 +39,3 @@
 
-  return (
-    <Glyph style={iconStyles} />
-  );
+  return <Glyph style={iconStyles} />;
 }
@@ -42,0 +42,0 @@

src/Select.jsx

@@ -16,7 +16,9 @@ import React from 'react';
   optionRenderer: PropTypes.func,
-  options: PropTypes.arrayOf(PropTypes.shape({
-    label: PropTypes.string,
-    value: valueShape.isRequired,
-    disabled: PropTypes.bool,
-  })),
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string,
+      value: valueShape.isRequired,
+      disabled: PropTypes.bool,
+    }),
+  ),
   valueRenderer: PropTypes.func,
@@ -23,0 +25,0 @@ value: valueShape,

src/StepIncrementer.jsx

@@ -8,2 +8,3 @@ import { css, StyleSheet } from 'aphrodite';
 const unit = 8;
+const halfUnit = unit / 2;
 
@@ -26,3 +27,3 @@ const styles = StyleSheet.create({
     fontWeight: 700,
-    paddingRight: 1 * unit,
+    paddingRight: Number(unit),
   },
@@ -35,3 +36,3 @@
   spacer: {
-    width: 0.5 * unit,
+    width: halfUnit,
   },
@@ -65,4 +66,4 @@ });
     super(props);
-    this.incrementValue = this.incrementValue.bind(this);
-    this.decrementValue = this.decrementValue.bind(this);
+    this.handleIncrementValue = this.handleIncrementValue.bind(this);
+    this.handleDecrementValue = this.handleDecrementValue.bind(this);
 
@@ -76,5 +77,7 @@ const { value, disableZero } = props;
   componentWillReceiveProps(nextProps) {
-    if (nextProps.value !== this.state.value) {
+    const { value } = this.state;
+    const { value: nextValue } = nextProps;
+    if (nextValue !== value) {
       this.setState({
-        value: nextProps.value,
+        value: nextValue,
       });
@@ -84,19 +87,21 @@ }
 
-  incrementValue() {
+  handleIncrementValue() {
     const { onChange, max, disableZero } = this.props;
-    if (this.state.value < max) {
-      let value = this.state.value + 1;
-      if (value === 0 && disableZero) value += 1;
-      this.setState({ value });
-      if (onChange) onChange(value);
+    const { value } = this.state;
+    if (value < max) {
+      let nextValue = value + 1;
+      if (nextValue === 0 && disableZero) nextValue += 1;
+      this.setState({ value: nextValue });
+      if (onChange) onChange(nextValue);
     }
   }
 
-  decrementValue() {
+  handleDecrementValue() {
     const { onChange, min, disableZero } = this.props;
-    if (this.state.value > min) {
-      let value = this.state.value - 1;
-      if (value === 0 && disableZero) value -= 1;
-      this.setState({ value });
-      if (onChange) onChange(value);
+    const { value } = this.state;
+    if (value > min) {
+      let nextValue = value - 1;
+      if (nextValue === 0 && disableZero) nextValue -= 1;
+      this.setState({ value: nextValue });
+      if (onChange) onChange(nextValue);
     }
@@ -115,17 +120,7 @@ }
         <div className={css(styles.buttons)}>
-          <Button
-            onClick={this.decrementValue}
-            disabled={value <= min}
-            round
-            small
-          >
+          <Button onClick={this.handleDecrementValue} disabled={value <= min} round small>
             -
           </Button>
           <div className={css(styles.spacer)} />
-          <Button
-            onClick={this.incrementValue}
-            disabled={value >= max}
-            round
-            small
-          >
+          <Button onClick={this.handleIncrementValue} disabled={value >= max} round small>
             +
@@ -132,0 +127,0 @@ </Button>

test/Button.test.js

@@ -6,17 +6,21 @@ import React from 'react';
 describe('<Button />', () => {
-  test('it should be defined', () => {
+  it('it should be defined', () => {
     expect(Button).toBeDefined();
   });
 
-  test('It should render a button', () => {
+  it('It should render a button', () => {
     const wrapper = shallow(<Button />);
-    expect(wrapper.find('button').length).toBe(1);
+    expect(wrapper.find('button')).toHaveLength(1);
   });
 
-  test('It should render children', () => {
-    const wrapper = shallow(<Button><span className="test" /></Button>);
-    expect(wrapper.find('.test').length).toBe(1);
+  it('It should render children', () => {
+    const wrapper = shallow(
+      <Button>
+        <span className="test" />
+      </Button>,
+    );
+    expect(wrapper.find('.test')).toHaveLength(1);
   });
 
-  test('It should call onClick when clicked', () => {
+  it('It should call onClick when clicked', () => {
     const onClick = jest.fn(() => {});
@@ -23,0 +27,0 @@ const wrapper = shallow(<Button onClick={onClick} />);

test/Icon.test.js

@@ -7,3 +7,3 @@ import React from 'react';
 describe('<BaseIcon />', () => {
-  test('it should be defined', () => {
+  it('it should be defined', () => {
     expect(BaseIcon).toBeDefined();
@@ -10,0 +10,0 @@ });

test/IconChevronDown.test.js

@@ -7,3 +7,3 @@ import React from 'react';
 describe('<IconChevronDown />', () => {
-  test('it should be defined', () => {
+  it('it should be defined', () => {
     expect(IconChevronDown).toBeDefined();
@@ -18,5 +18,5 @@ });
         .dive() // IconX
-        .find('svg').length,
-    ).toBe(1);
+        .find('svg'),
+    ).toHaveLength(1);
   });
 });

test/IconX.test.js

@@ -7,3 +7,3 @@ import React from 'react';
 describe('<IconX />', () => {
-  test('it should be defined', () => {
+  it('it should be defined', () => {
     expect(IconX).toBeDefined();
@@ -19,5 +19,5 @@ });
         .dive() // IconX
-        .find('svg').length,
-    ).toBe(1);
+        .find('svg'),
+    ).toHaveLength(1);
   });
 });

test/Select.test.js

@@ -8,7 +8,7 @@ import React from 'react';
 describe('<Select />', () => {
-  test('it should be defined', () => {
+  it('it should be defined', () => {
     expect(Select).toBeDefined();
   });
 
-  test('It should render a ReactSelect', () => {
+  it('It should render a ReactSelect', () => {
     const wrapper = shallow(<Select />);
@@ -15,0 +15,0 @@ expect(wrapper.is(ReactSelect)).toBe(true);

test/shim.js

 // polyfill for React 16 https://github.com/facebook/react/issues/9102#issuecomment-283873039
-global.requestAnimationFrame = (callback) => {
+global.requestAnimationFrame = callback => {
   setTimeout(callback, 0);
 };

test/StepIncrementer.test.js

@@ -7,28 +7,33 @@ import React from 'react';
 
-
 describe('<StepIncrementer />', () => {
-  test('it should be defined', () => {
+  it('it should be defined', () => {
     expect(StepIncrementer).toBeDefined();
   });
 
-  test('It should render two Buttons', () => {
+  it('It should render two Buttons', () => {
     const wrapper = shallow(<StepIncrementer />);
-    expect(wrapper.find(Button).length).toBe(2);
+    expect(wrapper.find(Button)).toHaveLength(2);
   });
 
-  test('It should call onChange when clicked', () => {
+  it('It should call onChange when clicked', () => {
     const onChange = jest.fn(() => {});
     const wrapper = shallow(<StepIncrementer onChange={onChange} />);
 
-    wrapper.find(Button).at(0).simulate('click');
-    wrapper.find(Button).at(1).simulate('click');
+    wrapper
+      .find(Button)
+      .at(0)
+      .simulate('click');
+    wrapper
+      .find(Button)
+      .at(1)
+      .simulate('click');
     expect(onChange).toHaveBeenCalledTimes(2);
   });
 
-  test('It should use formatValue to format the step', () => {
+  it('It should use formatValue to format the step', () => {
     const wrapper = shallow(<StepIncrementer formatValue={() => <span className="test" />} />);
-    expect(wrapper.find('.test').length).toBe(1);
+    expect(wrapper.find('.test')).toHaveLength(1);
   });
 
-  test('It should limit its range to within [min, max]', () => {
+  it('It should limit its range to within [min, max]', () => {
     const wrapper = shallow(<StepIncrementer min={-1} max={1} value={0} />);
@@ -52,3 +57,3 @@ const decrement = wrapper.find(Button).at(0);
 
-  test('It should skip zero when disableZero=true', () => {
+  it('It should skip zero when disableZero=true', () => {
     const wrapper = shallow(<StepIncrementer min={-1} max={1} value={1} disableZero />);
@@ -55,0 +60,0 @@ const decrement = wrapper.find(Button).at(0);

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

1369

increased by14.85%

Worsened metrics

Total package byte prevSize

232533

decreased by-35.58%

Dev dependency count

17

increased by6.25%

Number of package files

27

decreased by-43.75%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes