@s-ui/react-atom-input - npm Package Compare versions

Comparing version 1.1.0 to 1.7.0

lib/index.js

@@ -6,3 +6,8 @@ 'use strict';
 });
+exports.inputSizes = undefined;
 
+var _values = require('babel-runtime/core-js/object/values');
+
+var _values2 = _interopRequireDefault(_values);
+
 var _extends2 = require('babel-runtime/helpers/extends');
@@ -24,64 +29,77 @@
 
-var _reactMoleculeField = require('@s-ui/react-molecule-field');
+var _Input = require('./Input');
 
-var _reactMoleculeField2 = _interopRequireDefault(_reactMoleculeField);
+var _Input2 = _interopRequireDefault(_Input);
 
-var _reactFormInput = require('@s-ui/react-form-input');
+var _Password = require('./Password');
 
-var _reactFormInput2 = _interopRequireDefault(_reactFormInput);
+var _Password2 = _interopRequireDefault(_Password);
 
+var _Mask = require('./Mask');
+
+var _Mask2 = _interopRequireDefault(_Mask);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var getErrorState = function getErrorState(success, error) {
-  if (success) return false;
-  if (error) return true;
-};
+var TYPES = process.env.NODE_ENV !== "production" ? {
+  DATE: 'date',
+  MASK: 'mask',
+  NUMBER: 'number',
+  PASSWORD: 'password',
+  SUI_PASSWORD: 'sui-password',
+  TEXT: 'text',
+  RADIO: 'radio',
+  CHECKBOX: 'checkbox'
+} : {};;
 
 var AtomInput = function AtomInput(_ref) {
-  var id = _ref.id,
-      label = _ref.label,
-      successText = _ref.successText,
-      errorText = _ref.errorText,
-      helpText = _ref.helpText,
-      inline = _ref.inline,
-      props = (0, _objectWithoutProperties3.default)(_ref, ['id', 'label', 'successText', 'errorText', 'helpText', 'inline']);
+  var type = _ref.type,
+      props = (0, _objectWithoutProperties3.default)(_ref, ['type']);
 
-  var errorState = getErrorState(successText, errorText);
-
-  return _react2.default.createElement(
-    _reactMoleculeField2.default,
-    {
-      name: id,
-      label: label,
-      successText: successText,
-      errorText: errorText,
-      helpText: helpText,
-      inline: inline
-    },
-    _react2.default.createElement(_reactFormInput2.default, (0, _extends3.default)({ id: id, errorState: errorState }, props))
-  );
+  switch (type) {
+    case 'sui-password':
+      return _react2.default.createElement(_Password2.default, props);
+    case 'mask':
+      return _react2.default.createElement(_Mask2.default, props);
+    default:
+      return _react2.default.createElement(_Input2.default, (0, _extends3.default)({}, props, { type: type }));
+  }
 };
 
-AtomInput.displayName = 'AtomInput';
-
 AtomInput.propTypes = process.env.NODE_ENV !== "production" ? process.env.NODE_ENV !== "production" ? {
-  /** Text to be displayed as label */
-  label: _propTypes2.default.string.isRequired,
+  /* native types (text, date, ...), 'sui-password' */
+  type: _propTypes2.default.oneOf((0, _values2.default)(TYPES)),
+  /* Left addon component, text,... */
+  leftAddon: _propTypes2.default.any,
+  /* Right addon component, text,... */
+  rightAddon: _propTypes2.default.any,
+  /* Text to be shown in order to show the password on click */
+  pwShowLabel: _propTypes2.default.string,
+  /* Text to be shown in order to hide the password on click */
+  pwHideLabel: _propTypes2.default.string,
+  /* onBlur callback */
+  onBlur: _propTypes2.default.func,
+  /* onChange callback */
+  onChange: _propTypes2.default.func,
+  /* sets the name property of an element in the DOM */
+  name: _propTypes2.default.string,
+  /* The DOM id global attribute. */
+  id: _propTypes2.default.string,
+  /* A hint to the user of what can be entered in the control. The placeholder text must not contain carriage returns or line-feeds. */
+  placeholder: _propTypes2.default.string,
+  /* This Boolean attribute prevents the user from interacting with the input */
+  disabled: _propTypes2.default.bool,
+  /* 's' or 'm', default: 'm' */
+  size: _propTypes2.default.oneOf((0, _values2.default)(_Input.inputSizes)),
+  /* true = error, false = success, null = neutral */
+  errorState: _propTypes2.default.bool,
+  /* value of the control */
+  value: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.bool]),
+  /* mask object, see https://unmanner.github.io/imaskjs/ */
+  mask: _propTypes2.default.object
+} : {} : {};
 
-  /** used as label for attribute and input element id */
-  id: _propTypes2.default.string.isRequired,
+AtomInput.displayName = 'AtomInput';
 
-  /** Success message to display when success state  */
-  successText: _propTypes2.default.string,
-
-  /** Error message to display when error state  */
-  errorText: _propTypes2.default.string,
-
-  /** Help Text to display */
-  helpText: _propTypes2.default.string,
-
-  /** Boolean to decide if elements should be set inline */
-  inline: _propTypes2.default.bool
-} : {} : {};
-
-exports.default = AtomInput;
+exports.default = AtomInput;
+exports.inputSizes = _Input.inputSizes;

package.json

 {
   "name": "@s-ui/react-atom-input",
-  "version": "1.1.0",
+  "version": "1.7.0",
   "description": "",
@@ -13,4 +13,3 @@ "main": "lib/index.js",
     "@s-ui/component-dependencies": "1",
-    "@s-ui/react-form-input": "1",
-    "@s-ui/react-molecule-field": "1"
+    "imask": "3.4.0"
   },
@@ -17,0 +16,0 @@ "keywords": [],

README.md

 # AtomInput
 
+> Inputs are the text fields that users fill in with different types of information. These include dates, passwords or even short answers. It’s a field where users can write alphanumeric texts.
 
-`AtomInput` is a component that wraps a composition of Label + Textarea + Validations  Messages. 
-
-
 ## Installation
 
 ```sh
-$ npm install @s-ui/react-atom-input --save
+ƛ npm install @s-ui/react-atom-input --save
 ```
@@ -15,63 +13,141 @@
 
-After importing the component `AtomInput` like this
+### You can use native types like this
 
-```javascript
+```js
 import AtomInput from '@s-ui/react-atom-input'
-```
 
-### Basic usage
-    
+return <AtomInput type='number' /> // possible type options: text, number, date and password
 ```
-  <AtomInput
-    id="second"
-    placeholder="Medium Input"
-    leftAddon="http://"
-    rightAddon="@schibsted.com"
-    label="Description"
-    value="In some place of La Mancha which name..."
-  />
-```
 
-### With `successText`
-    
-```
-  <AtomInput
-    id="description2"
-    label="Description"
-    value="In some place of La Mancha which name..."
-    successText="Everything ok!"
-  />
-```
+### Non native Inputs
 
-### With `errorText`
-    
+#### SUI-Password
+
+In order to use SUI defined Password Input pass the prop `type='sui-password'` to the Input component.
+
+```js
+import AtomInput from '@s-ui/react-atom-input'
+
+return <AtomInput type='sui-password' />
 ```
-  <AtomInput
-    id="notes"
-    label="Notes"
-    errorText="All wrong!"
-  />
-```
 
-### With `helpText`
+### Mask
+
+Wraps the https://unmanner.github.io/imaskjs/ lib, used if the input must follow a regex or a specific format/pattern . Using `type='mask'` activates this input, which will be expecting the `mask` prop type to be passed by.
+
+```js
+const bankAccountMask = { // checkout all options here https://unmanner.github.io/imaskjs/guide.html
+  mask: 'ES00 0000 0000 00 0000000000'
+}
+
+ return <AtomInput type='mask' mask={bankAccountMask} placeholder='ES00 0000 0000 00 0000000000' />
 ```
-  <AtomInput
-    id="description-inline2"
-    label="Description"
-    helpText="Tu descripción en Latin"
-    value="Lorem ipsum dolor sit amet"
-  />
-```
 
-### Inline
+## Addons
+
+>[What are addons?](https://paper.dropbox.com/doc/SUI-Input-03mHJFkOCjviSZevsaTwm#:uid=125362683844628624581838&h2=Icons-and-addons-inside-the-in)
+
+Addons are passed as prop, use **leftAddon** or **rightAddon** in order to set the position inside the Input
+
+### Addon usage
+
+```js
+import AtomInput from '@s-ui/react-atom-input'
+
+return <AtomInput leftAddon='http://' rightAddon='@schibsted.com' />
 ```
-  <AtomInput
-    id="description"
-    label="Description"
-    value="In some place of La Mancha which name..."
-    inline
-  />
-```
 
+## Error states
 
-> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/atom/input/demo).**
+There are 3 error states:
+
+* error state = **true**, will show a **red** border around the input field
+* error state = **false**, will show a **green** border around the input field
+* error state = **null**, will show the by **default** border around the input field
+
+
+## Form Usage
+
+Each field returns its value on every onChange event so you can save it inside your form state.
+
+```jsx
+import React from 'react'
+import ReactDOM from 'react-dom'
+import Input from '@s-ui/react-atom-input'
+import Button from '@schibstedspain/sui-atom-button'
+
+class SimpleLoginForm extends React.Component {
+  constructor() {
+    super()
+    this.state = {
+      email: {
+        value: '',
+        errorState: null
+      },
+      password: {
+        value: '',
+        errorState: null
+      }
+    }
+
+    this.onChange = this.onChange.bind(this)
+    this.onSubmit = this.onSubmit.bind(this)
+    this.onBlur = this.onBlur.bind(this)
+  }
+
+  isEmail(value) {
+    return /(.+)@(.+){2,}\.(.+){2,}/.test(value)
+  }
+
+  onChange({value, field}) {
+    this.setState(
+      Object.assign({}, this.state, {
+        [field]: {
+          value,
+          errorState: null
+        }
+      })
+    )
+  }
+
+  onBlur({value, field}) {
+    let errorState = !this.isEmail(value)
+    this.setState({
+      [field]: {errorState, value}
+    })
+  }
+
+  onSubmit(ev) {
+    ev.preventDefault()
+    ev.stopPropagation()
+
+    window.alert(JSON.stringify(this.state))
+  }
+
+  render() {
+    const {email, password} = this.state
+    return (
+      <form>
+        <Input
+          type="text"
+          value={email.value}
+          onChange={({ev, value}) => this.onChange({value, field: 'email', ev})}
+          onBlur={ev =>
+            this.onBlur({value: ev.target.value, field: 'email'})
+          }
+          errorState={this.state.email.errorState}
+        />
+        <Input
+          type="sui-password"
+          value={password.value}
+          onChange={({ev, value}) =>
+            this.onChange({value, field: 'password', ev})
+          }
+        />
+        <button onClick={this.onSubmit}>Login</button>
+      </form>
+    )
+  }
+}
+
+```

New alerts

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

Improved metrics

Total package byte prevSize

26981

increased by480.86%

Dependency count

2

decreased by-33.33%

Number of package files

14

increased by133.33%

Lines of code

473

increased by715.52%

Number of lines in readme file

153

increased by101.32%

Worsened metrics

Number of low supply chain risk alerts

10

increased by233.33%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedimask@3.4.0

• - Removed@s-ui/react-form-input@1

• - Removed@s-ui/react-molecule-field@1

• - Removed@nodelib/fs.scandir@2.1.5(transitive)

• - Removed@nodelib/fs.stat@2.0.5(transitive)

• - Removed@nodelib/fs.walk@1.2.8(transitive)

• - Removed@s-ui/compiler-config@1.1.0(transitive)

• - Removed@s-ui/js-compiler@1.29.0(transitive)

• - Removed@s-ui/react-atom-help-text@1.10.0(transitive)

• - Removed@s-ui/react-atom-label@1.30.0(transitive)

• - Removed@s-ui/react-atom-validation-text@1.10.0(transitive)

• - Removed@s-ui/react-form-input@1.6.0(transitive)

• - Removed@s-ui/react-molecule-field@1.39.0(transitive)

• - Removed@s-ui/react-primitive-injector@1.2.0(transitive)

• - Removed@swc/core@1.3.14(transitive)

• - Removed@swc/core-darwin-arm64@1.3.14(transitive)

• - Removed@swc/core-darwin-x64@1.3.14(transitive)

• - Removed@swc/core-linux-arm-gnueabihf@1.3.14(transitive)

• - Removed@swc/core-linux-arm64-gnu@1.3.14(transitive)

• - Removed@swc/core-linux-arm64-musl@1.3.14(transitive)

• - Removed@swc/core-linux-x64-gnu@1.3.14(transitive)

• - Removed@swc/core-linux-x64-musl@1.3.14(transitive)

• - Removed@swc/core-win32-arm64-msvc@1.3.14(transitive)

• - Removed@swc/core-win32-ia32-msvc@1.3.14(transitive)

• - Removed@swc/core-win32-x64-msvc@1.3.14(transitive)

• - Removed@swc/helpers@0.4.12(transitive)

• - Removed@tsconfig/esm@1.0.4(transitive)

• - Removed@tsconfig/vite-react@2.0.0(transitive)

• - Removedbraces@3.0.3(transitive)

• - Removedcommander@8.3.0(transitive)

• - Removedfast-glob@3.2.12(transitive)

• - Removedfastq@1.19.0(transitive)

• - Removedfill-range@7.1.1(transitive)

• - Removedfs-extra@10.1.0(transitive)

• - Removedglob-parent@5.1.2(transitive)

• - Removedgraceful-fs@4.2.11(transitive)

• - Removedis-extglob@2.1.1(transitive)

• - Removedis-glob@4.0.3(transitive)

• - Removedis-number@7.0.0(transitive)

• - Removedjsonfile@6.1.0(transitive)

• - Removedmerge2@1.4.1(transitive)

• - Removedmicromatch@4.0.8(transitive)

• - Removedpicomatch@2.3.1(transitive)

• - Removedqueue-microtask@1.2.3(transitive)

• - Removedreusify@1.0.4(transitive)

• - Removedrun-parallel@1.2.0(transitive)

• - Removedto-regex-range@5.0.1(transitive)

• - Removedtslib@2.8.1(transitive)

• - Removedtypescript@5.0.4(transitive)

• - Removeduniversalify@2.0.1(transitive)