From a692aee244aee63bb53e7993aba3da550351742b Mon Sep 17 00:00:00 2001 From: andresin87 Date: Tue, 20 Sep 2022 11:31:51 +0200 Subject: [PATCH 01/31] chore(Root): wip --- components/atom/input/demo/index.js | 39 +++++--- .../atom/input/src/Input/Component/index.scss | 26 +++-- .../src/Input/Wrappers/Addons/InputAddons.js | 13 +-- .../input/src/Input/Wrappers/Addons/config.js | 4 +- .../src/Input/Wrappers/Addons/index.scss | 51 +++++----- .../src/Input/Wrappers/Icons/InputIcons.js | 42 ++++---- .../input/src/Input/Wrappers/Icons/config.js | 6 +- .../input/src/Input/Wrappers/Icons/index.scss | 67 ++++++------- components/atom/input/src/Input/index.js | 48 ++++++--- components/atom/input/src/Password/config.js | 5 +- components/atom/input/src/Password/index.js | 11 ++- .../atom/input/src/Password/styles/index.scss | 2 +- components/atom/input/src/config.js | 4 + components/atom/input/src/index.js | 97 +++++++++++++------ components/atom/input/src/mixins.scss | 75 -------------- components/atom/input/src/styles/index.scss | 51 ++++++++++ .../atom/input/src/styles/settings.scss | 2 - .../src/components/InputWithClearUI/index.js | 2 +- 18 files changed, 293 insertions(+), 252 deletions(-) delete mode 100644 components/atom/input/src/mixins.scss diff --git a/components/atom/input/demo/index.js b/components/atom/input/demo/index.js index 0ec18c7d12..a21887e585 100644 --- a/components/atom/input/demo/index.js +++ b/components/atom/input/demo/index.js @@ -1,12 +1,5 @@ import {useState} from 'react' -import AtomInput, { - inputShapes, - inputSizes, - inputStates, - inputTypes -} from 'components/atom/input/src/index.js' - import { Anchor, AntDesignIcon, @@ -29,6 +22,12 @@ import { UnorderedList } from '@s-ui/documentation-library' +import AtomInput, { + inputShapes, + inputSizes, + inputStates, + inputTypes +} from '../../input/src/index.js' import {flexCenteredStyle, stackMap} from './settings.js' const DefaultDemo = () => ( @@ -288,6 +287,22 @@ const AddonAndIconDemo = () => { return (

Addon and Icon

+ + } + rightIcon={ + + } + leftAddon="leftAddon" + rightAddon="rightAddon" + /> Input offers the possibility to add icons and contents on its left or right positions @@ -602,17 +617,17 @@ const Demo = () => (

- + {/**/}

- + {/**/}
- + {/**/}
- + {/**/}
- + {/**/}

diff --git a/components/atom/input/src/Input/Component/index.scss b/components/atom/input/src/Input/Component/index.scss index 17bfbf0236..561f378a36 100644 --- a/components/atom/input/src/Input/Component/index.scss +++ b/components/atom/input/src/Input/Component/index.scss @@ -7,9 +7,11 @@ $class-read-only: '#{$base-class-input}--readOnly'; -webkit-appearance: none; @include sui-atom-input-input; - border-radius: $bdrs-atom-input; min-height: auto; text-overflow: $tov-atom-input-placeholder; + padding-left: 0; + padding-right: 0; + border: 0 solid transparent; &--charsSize { width: inherit; } @@ -24,15 +26,6 @@ $class-read-only: '#{$base-class-input}--readOnly'; color: $c-atom-input-read-only; } - @include atom-input-shape-wrapper( - $base-class, - $base-class-input, - $bdrs-atom-input-shapes, - $sizes-atom-input, - $bdrs-atom-input, - $h-atom-input--m - ); - &#{$base-class-input}--noBorder, &#{$base-class-input}--noBorder:disabled { border: 0; @@ -60,13 +53,17 @@ $class-read-only: '#{$base-class-input}--readOnly'; } &:focus { - @include sui-atom-input-input-focus; + // @include sui-atom-input-input-focus; + box-shadow: none; + } + &:focus-visible { + outline: 0; } @each $type, $attr in $sizes-atom-input { &-size-#{$type} { - height: $attr; - min-height: $attr; + height: $attr - 2 * $bdw-s; + min-height: $attr - 2 * $bdw-s; } } @@ -75,7 +72,8 @@ $class-read-only: '#{$base-class-input}--readOnly'; border-color: $color; &:focus { - box-shadow: $bxsh-atom-input-size $color; + box-shadow: none; + //box-shadow: $bxsh-atom-input-size $color; } } } diff --git a/components/atom/input/src/Input/Wrappers/Addons/InputAddons.js b/components/atom/input/src/Input/Wrappers/Addons/InputAddons.js index af4999be14..8fb49f887e 100644 --- a/components/atom/input/src/Input/Wrappers/Addons/InputAddons.js +++ b/components/atom/input/src/Input/Wrappers/Addons/InputAddons.js @@ -1,21 +1,14 @@ -import cx from 'classnames' import PropTypes from 'prop-types' import {INPUT_SHAPES, SIZES} from '../../../config.js' -import {ADDON_TYPES, BASE_CLASS_ADDON_WRAPPER, getClassName} from './config.js' +import {ADDON_TYPES, getClassName} from './config.js' const InputAddon = ({leftAddon, rightAddon, shape, size, children}) => { if (!(leftAddon || rightAddon)) { return children } return ( -
+ <> {leftAddon && ( {leftAddon} @@ -27,7 +20,7 @@ const InputAddon = ({leftAddon, rightAddon, shape, size, children}) => { {rightAddon} )} -
+ ) } diff --git a/components/atom/input/src/Input/Wrappers/Addons/config.js b/components/atom/input/src/Input/Wrappers/Addons/config.js index f561c5393b..e951c2f02a 100644 --- a/components/atom/input/src/Input/Wrappers/Addons/config.js +++ b/components/atom/input/src/Input/Wrappers/Addons/config.js @@ -1,6 +1,6 @@ import cx from 'classnames' -import {BASE} from '../../../config.js' +import { BASE, BASE_CLASS_ITEM } from '../../../config.js' export const BASE_CLASS_ADDON = `${BASE}--withAddon` export const BASE_CLASS_ADDON_WRAPPER = `${BASE_CLASS_ADDON}Wrapper` @@ -10,4 +10,4 @@ export const ADDON_TYPES = { } export const getClassName = ({type}) => - cx(BASE_CLASS_ADDON, `${BASE_CLASS_ADDON}--${type}`) + cx(BASE_CLASS_ITEM, BASE_CLASS_ADDON, `${BASE_CLASS_ADDON}--${type}`) diff --git a/components/atom/input/src/Input/Wrappers/Addons/index.scss b/components/atom/input/src/Input/Wrappers/Addons/index.scss index e66319f7d0..87af1a17c8 100644 --- a/components/atom/input/src/Input/Wrappers/Addons/index.scss +++ b/components/atom/input/src/Input/Wrappers/Addons/index.scss @@ -1,34 +1,27 @@ -#{$base-class}--withAddon { - align-items: center; - background-color: $bgc-atom-input-addon; - border-color: $bdc-atom-input-addon; - border-style: solid; - color: $c-atom-input-addon; - display: flex; - flex-direction: column; - height: inherit; - justify-content: center; - line-height: inherit; - padding-left: $p-atom-input-addon-left; - padding-right: $p-atom-input-addon-right; +$base-class-addon: "#{$base-class}--withAddon"; - &--right { - border-width: $bdw-atom-input-addon-right; - } +#{$base-class} { + #{$base-class-addon} { + align-items: center; + background-color: $bgc-atom-input-addon; + border-color: $bdc-atom-input-addon; + border-style: solid; + color: $c-atom-input-addon; + display: flex; + flex-direction: column; + height: inherit; + justify-content: center; + line-height: inherit; + padding-left: $p-atom-input-addon-left; + padding-right: $p-atom-input-addon-right; + width: auto; - &--left { - border-width: $bdw-atom-input-addon-left; - } + &#{$base-class-addon}--right { + border-left-width: $bdw-s; + } - &Wrapper { - display: flex; - @include atom-input-shape-wrapper( - $base-class, - #{'.sui-AtomInput--withAddonWrapper'}, - $bdrs-atom-input-shapes, - $sizes-atom-input, - $bdrs-atom-input, - $h-atom-input--m - ); + &#{$base-class-addon}--left { + border-right-width: $bdw-s; + } } } diff --git a/components/atom/input/src/Input/Wrappers/Icons/InputIcons.js b/components/atom/input/src/Input/Wrappers/Icons/InputIcons.js index 22010b5f94..ce09bab509 100644 --- a/components/atom/input/src/Input/Wrappers/Icons/InputIcons.js +++ b/components/atom/input/src/Input/Wrappers/Icons/InputIcons.js @@ -2,13 +2,11 @@ import cx from 'classnames' import PropTypes from 'prop-types' import { - BASE_CLASS_ICON, BASE_CLASS_ICON_COMPONENT, BASE_CLASS_ICON_COMPONENT_HANDLER, BASE_CLASS_ICON_COMPONENT_LEFT, BASE_CLASS_ICON_COMPONENT_RIGHT, - BASE_CLASS_ICON_LEFT, - BASE_CLASS_ICON_RIGHT + BASE_CLASS_ICON_CONTENT_COMPONENT } from './config.js' const InputIcons = ({ @@ -18,9 +16,6 @@ const InputIcons = ({ onClickRightIcon, children }) => { - if (!(leftIcon || rightIcon)) { - return children - } const handleLeftClick = event => { onClickLeftIcon && onClickLeftIcon(event) } @@ -30,24 +25,22 @@ const InputIcons = ({ } return ( -
+ <> {leftIcon && ( - {leftIcon} + + {leftIcon} + )} {children} @@ -55,17 +48,20 @@ const InputIcons = ({ - {rightIcon} + + {rightIcon} + )} -
+ ) } diff --git a/components/atom/input/src/Input/Wrappers/Icons/config.js b/components/atom/input/src/Input/Wrappers/Icons/config.js index 4d415eb0d6..6a161e9c5e 100644 --- a/components/atom/input/src/Input/Wrappers/Icons/config.js +++ b/components/atom/input/src/Input/Wrappers/Icons/config.js @@ -1,14 +1,14 @@ -import {BASE} from '../../../config.js' +import {BASE, BASE_CLASS_ITEM, BASE_CLASS_ITEM_FOCUSABLE} from '../../../config.js' export const ICON_TYPES = { LEFT: 'left', RIGHT: 'right' } +export {BASE_CLASS_ITEM, BASE_CLASS_ITEM_FOCUSABLE} export const BASE_CLASS_ICON = `${BASE}--withIcon` -export const BASE_CLASS_ICON_LEFT = `${BASE_CLASS_ICON}--${ICON_TYPES.LEFT}` -export const BASE_CLASS_ICON_RIGHT = `${BASE_CLASS_ICON}--${ICON_TYPES.RIGHT}` export const BASE_CLASS_ICON_COMPONENT = `${BASE_CLASS_ICON}-icon` +export const BASE_CLASS_ICON_CONTENT_COMPONENT = `${BASE_CLASS_ICON_COMPONENT}--content` export const BASE_CLASS_ICON_COMPONENT_HANDLER = `${BASE_CLASS_ICON_COMPONENT}--withHandler` export const BASE_CLASS_ICON_COMPONENT_LEFT = `${BASE_CLASS_ICON_COMPONENT}--${ICON_TYPES.LEFT}` export const BASE_CLASS_ICON_COMPONENT_RIGHT = `${BASE_CLASS_ICON_COMPONENT}--${ICON_TYPES.RIGHT}` diff --git a/components/atom/input/src/Input/Wrappers/Icons/index.scss b/components/atom/input/src/Input/Wrappers/Icons/index.scss index f493df3295..37edd01ad9 100644 --- a/components/atom/input/src/Input/Wrappers/Icons/index.scss +++ b/components/atom/input/src/Input/Wrappers/Icons/index.scss @@ -1,44 +1,41 @@ -#{$base-class}--withIcon { - position: relative; - width: 100%; +$base-class-with-icon: '#{$base-class}--withIcon'; - &--left #{$base-class-input} { - padding-left: $pl-atom-input-input; - } +#{$base-class-with-icon}-icon--left { + //padding-left: $pl-atom-input-input; +} - &--right #{$base-class-input} { - padding-right: $pr-atom-input-input; - } +#{$base-class-with-icon}-icon--right { + //padding-right: $pr-atom-input-input; +} - &-icon { - align-items: center; - color: $c-atom-input-icon; - display: flex; - fill: $c-atom-input-icon; - height: $w-atom-input-icon; - justify-content: center; - position: absolute; - top: $t-atom-input-icon; - transform: translateY($trf-ty-atom-input-icon); - width: $w-atom-input-icon; - pointer-events: none; +#{$base-class-with-icon}-icon { + align-items: center; + color: $c-atom-input-icon; + display: flex; + fill: $c-atom-input-icon; + //height: $w-atom-input-icon; + justify-content: center; + //position: absolute; + //top: $t-atom-input-icon; + //transform: translateY($trf-ty-atom-input-icon); + width: $w-atom-input-icon; + pointer-events: none; - &--withHandler { - cursor: pointer; - pointer-events: auto; - } + &--withHandler { + cursor: pointer; + pointer-events: auto; + } - &--left { - left: $l-atom-input-icon; - } + &--left { + //left: $l-atom-input-icon; + } - &--right { - right: $r-atom-input-icon; - } + &--right { + //right: $r-atom-input-icon; + } - & > * { - height: 100%; - width: 100%; - } + & > * { + //height: 100%; + //width: 100%; } } diff --git a/components/atom/input/src/Input/index.js b/components/atom/input/src/Input/index.js index 1bdf066e20..350005767c 100644 --- a/components/atom/input/src/Input/index.js +++ b/components/atom/input/src/Input/index.js @@ -1,16 +1,33 @@ import {forwardRef} from 'react' import PropTypes from 'prop-types' +import cx from 'classnames' + +import { + SIZES, + BASE_CLASS_AREA_FOCUSABLE, + BASE_CLASS_ITEM, + TYPES +} from '../config.js' + +import Mask from '../Mask/index.js' +import Password from '../Password/index.js' +import Input from './Component/index.js' -import {SIZES} from '../config.js' -import Input, {inputSizes, inputStates} from './Component/index.js' import InputAddons from './Wrappers/Addons/InputAddons.js' import InputButton from './Wrappers/Button/InputButton.js' import InputIcons from './Wrappers/Icons/InputIcons.js' +const componentType = { + undefined: ({...props}) => [Input, {...props}], + [TYPES.SUI_PASSWORD]: ({type, ...props}) => [Password, {...props}], + [TYPES.MASK]: ({type, ...props}) => [Mask, {...props}] +} + const BaseInput = forwardRef( ( { + type, button, leftAddon, rightAddon, @@ -24,6 +41,9 @@ const BaseInput = forwardRef( }, forwardedRef ) => { + const [Component, passedProps] = componentType[type] + ? componentType[type]({type, size, ...inputProps}) + : componentType[undefined]({type, size, ...inputProps}) return ( - - - {children} - - +
+ + + {children} + + +
) @@ -70,4 +92,4 @@ BaseInput.propTypes = { } export default BaseInput -export {inputSizes, inputStates, BaseInput} +export {BaseInput} diff --git a/components/atom/input/src/Password/config.js b/components/atom/input/src/Password/config.js index c18b7ba0a2..e2bec087f5 100644 --- a/components/atom/input/src/Password/config.js +++ b/components/atom/input/src/Password/config.js @@ -1,6 +1,7 @@ -import {BASE_CLASS} from '../config.js' +import {BASE, BASE_CLASS_ITEM} from '../config.js' -export const BASE_CLASS_PASSWORD = `${BASE_CLASS}-password` +export {BASE_CLASS_ITEM} +export const BASE_CLASS_PASSWORD = `${BASE}-password` export const BASE_CLASS_PASSWORD_TOGGLE_BUTTON = `${BASE_CLASS_PASSWORD}--toggleButton` export const TEXT = 'text' diff --git a/components/atom/input/src/Password/index.js b/components/atom/input/src/Password/index.js index f26592e398..4b0d10cc51 100644 --- a/components/atom/input/src/Password/index.js +++ b/components/atom/input/src/Password/index.js @@ -1,12 +1,14 @@ import {forwardRef, useState} from 'react' import PropTypes from 'prop-types' +import cx from 'classnames' import useControlledState from '@s-ui/react-hooks/lib/useControlledState' import Input from '../Input/index.js' import { BASE_CLASS_PASSWORD, + BASE_CLASS_ITEM, BASE_CLASS_PASSWORD_TOGGLE_BUTTON, PASSWORD, TEXT @@ -38,7 +40,7 @@ const Password = forwardRef( } return ( -
+ <> -
+
{type === PASSWORD ? pwShowLabel : pwHideLabel}
-
+ ) } ) diff --git a/components/atom/input/src/Password/styles/index.scss b/components/atom/input/src/Password/styles/index.scss index 6da24f47f1..02f67d4508 100644 --- a/components/atom/input/src/Password/styles/index.scss +++ b/components/atom/input/src/Password/styles/index.scss @@ -1,4 +1,4 @@ -$base-class-password: '#{$base-class-input}-password'; +$base-class-password: '#{$base-class}-password'; #{$base-class-password} { position: relative; diff --git a/components/atom/input/src/config.js b/components/atom/input/src/config.js index 75c4f7aef1..23927ed30c 100644 --- a/components/atom/input/src/config.js +++ b/components/atom/input/src/config.js @@ -1,11 +1,15 @@ import cx from 'classnames' +import Input from './Input/index.js' + export const PREFIX = 'sui' export const CATEGORY = 'Atom' export const COMPONENT = 'Input' export const BASE = `${PREFIX}-${CATEGORY}${COMPONENT}` +export const BASE_CLASS_ITEM = `${BASE}-item` +export const BASE_CLASS_AREA_FOCUSABLE = `${BASE}-area-focusable` export const BASE_CLASS = `${BASE}-input` // Enums diff --git a/components/atom/input/src/index.js b/components/atom/input/src/index.js index 5ae81987c2..7b37df9d44 100644 --- a/components/atom/input/src/index.js +++ b/components/atom/input/src/index.js @@ -1,33 +1,70 @@ import {forwardRef} from 'react' +import cx from 'classnames' import PropTypes from 'prop-types' -import Input, {inputSizes, inputStates} from './Input/index.js' -import Mask from './Mask/index.js' -import Password from './Password/index.js' -import {INPUT_SHAPES, TYPES} from './config.js' +import Input from './Input/index.js' +import { + BASE, + INPUT_SHAPES, + INPUT_STATES, + SIZES, + TYPES, + isValidSize +} from './config.js' import {checkIfValidNumberInput} from './helper.js' -const AtomInput = forwardRef(({type, ...props}, ref) => { - switch (type) { - case 'sui-password': - return - case 'mask': - return - case 'number': - return ( +const AtomInput = forwardRef( +( +{ + type, + shape, + charsSize, + size = SIZES.MEDIUM, + noBorder, + errorState, + state, + disabled, + readOnly, + ...props +}, +ref +) => { + return ( + - ) - - default: - return - } -}) + + ) +} +) AtomInput.propTypes = { /** native types (text, date, ...), 'sui-password' */ @@ -88,7 +125,7 @@ AtomInput.propTypes = { disabled: PropTypes.bool, /** 's' or 'm', default: 'm' */ - size: PropTypes.oneOf(Object.values(inputSizes)), + size: PropTypes.oneOf(Object.values(SIZES)), /** width of input based in number of characters (native "size" attribute) */ charsSize: PropTypes.number, @@ -118,7 +155,7 @@ AtomInput.propTypes = { errorState: PropTypes.bool, /** 'success', 'error' or 'alert' */ - state: PropTypes.oneOf(Object.values(inputStates)), + state: PropTypes.oneOf(Object.values(INPUT_STATES)), /** value of the control */ value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), @@ -142,7 +179,13 @@ AtomInput.propTypes = { inputMode: PropTypes.string, /** Sets the shape of the input field. It can be 'rounded', 'square' or 'circle' */ - shape: PropTypes.string + shape: PropTypes.string, + + /** Wether to hide the input border or not */ + noBorder: PropTypes.bool, + + /* This Boolean attribute prevents the user from interacting with the input but without disabled styles */ + readOnly: PropTypes.bool } AtomInput.displayName = 'AtomInput' @@ -150,8 +193,8 @@ AtomInput.displayName = 'AtomInput' export default AtomInput export { - inputSizes, - inputStates, + SIZES as inputSizes, + INPUT_STATES as inputStates, TYPES as inputTypes, INPUT_SHAPES as inputShapes } diff --git a/components/atom/input/src/mixins.scss b/components/atom/input/src/mixins.scss deleted file mode 100644 index 9985338e36..0000000000 --- a/components/atom/input/src/mixins.scss +++ /dev/null @@ -1,75 +0,0 @@ -@mixin atom-input-shape-wrapper( - $baseClass, - $baseClassName, - $shapeMap, - $sizesMap, - $bdrs-defaultValue, - $sz-defaultValue -) { - $this: &; - @if #{'sui-AtomInput-input'} == $baseClassName { - @each $shapeMapKey, $shapeMapValue in $shapeMap { - @if $shapeMapKey != 'circle' { - &#{$baseClassName}-shape-#{$shapeMapKey} { - border-radius: $shapeMapValue; - } - } @else { - @each $sizeKey, $sizeValue in $sizesMap { - &#{$baseClassName}-shape-#{$shapeMapKey}#{$baseClassName}-size-#{$sizeKey} { - border-radius: $sizeValue * 0.5; - } - } - } - } - } @else { - > *, - #{$baseClass}-input { - border-radius: 0; - } - > *:first-child { - border-top-left-radius: $bdrs-defaultValue; - border-bottom-left-radius: $bdrs-defaultValue; - } - > *:last-child { - border-top-right-radius: $bdrs-defaultValue; - border-bottom-right-radius: $bdrs-defaultValue; - } - @each $shapeMapKey, $shapeMapValue in $shapeMap { - &#{$baseClassName}-shape-#{$shapeMapKey} { - > *, - #{$baseClass}-input { - border-radius: 0; - } - @if $shapeMapKey != 'circle' { - border-radius: $shapeMapValue; - > *:first-child { - border-top-left-radius: $shapeMapValue; - border-bottom-left-radius: $shapeMapValue; - } - > *:last-child { - border-top-right-radius: $shapeMapValue; - border-bottom-right-radius: $shapeMapValue; - } - } @else { - @each $sizeKey, $sizeValue in $sizesMap { - &#{$baseClassName}-shape-#{$shapeMapKey}#{$baseClassName}-size-#{$sizeKey} { - border-radius: $sizeValue * 0.5; - > *, - #{$baseClass}-input { - border-radius: 0; - } - > *:first-child { - border-top-left-radius: $sizeValue * 0.5; - border-bottom-left-radius: $sizeValue * 0.5; - } - > *:last-child { - border-top-right-radius: $sizeValue * 0.5; - border-bottom-right-radius: $sizeValue * 0.5; - } - } - } - } - } - } - } -} diff --git a/components/atom/input/src/styles/index.scss b/components/atom/input/src/styles/index.scss index 6d42d354f5..466760ec49 100644 --- a/components/atom/input/src/styles/index.scss +++ b/components/atom/input/src/styles/index.scss @@ -1,5 +1,56 @@ $base-class: '.sui-AtomInput'; +$base-class-area-focusable: '.sui-AtomInput-area-focusable'; @import '../Input/Component/index'; @import '../Input/Wrappers/index'; @import '../Password/index'; + +#{$base-class} { + display: flex; + width: 100%; + align-items: stretch; + + + + #{$base-class}-item { + border-width: $bdw-s 0; + border-style: solid; + border-color: $c-gray-light; + &:first-child { + border-bottom-left-radius: $bdrs-atom-input; + border-top-left-radius: $bdrs-atom-input; + border-left-width: $bdw-s; + } + &:last-child { + border-bottom-right-radius: $bdrs-atom-input; + border-top-right-radius: $bdrs-atom-input; + border-right-width: $bdw-s; + } + + } + + @each $shapeMapKey, $shapeMapValue in $bdrs-atom-input-shapes { + &#{$base-class}-shape-#{$shapeMapKey} { + #{$base-class}-item { + &:first-child { + border-bottom-left-radius: $shapeMapValue; + border-top-left-radius: $shapeMapValue; + } + &:last-child { + border-bottom-right-radius: $shapeMapValue; + border-top-right-radius: $shapeMapValue; + } + } + } + } + + #{$base-class-area-focusable} { + display: flex; + width: 100%; + padding-left: $pl-atom-input; + padding-right: $pr-atom-input; + &:focus-within { + @include sui-atom-input-input-focus; + } + } +} diff --git a/components/atom/input/src/styles/settings.scss b/components/atom/input/src/styles/settings.scss index 13012356cd..72501a9dc4 100644 --- a/components/atom/input/src/styles/settings.scss +++ b/components/atom/input/src/styles/settings.scss @@ -1,3 +1 @@ @import '../settings.scss'; - -@import '../mixins.scss'; diff --git a/components/molecule/autosuggest/src/components/InputWithClearUI/index.js b/components/molecule/autosuggest/src/components/InputWithClearUI/index.js index 70c8849133..10ee6c5a90 100644 --- a/components/molecule/autosuggest/src/components/InputWithClearUI/index.js +++ b/components/molecule/autosuggest/src/components/InputWithClearUI/index.js @@ -8,7 +8,7 @@ const InputWithClearUI = ({ onClickClear, isVisibleClear, iconClear, - rightIcon = , + rightIcon, children, ...props }) => { From 2872a0089960844de9196fba9f33aa395dbba215 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Wed, 21 Sep 2022 12:41:59 +0200 Subject: [PATCH 02/31] chore(Root): wip --- components/atom/input/demo/index.js | 45 ++++------- components/atom/input/package.json | 2 +- .../atom/input/src/Input/Component/index.scss | 52 +------------ .../src/Input/Wrappers/Addons/index.scss | 18 ++++- .../src/Input/Wrappers/Button/InputButton.js | 14 ++-- .../input/src/Input/Wrappers/Button/config.js | 3 +- .../src/Input/Wrappers/Button/index.scss | 14 +--- .../input/src/Input/Wrappers/Icons/config.js | 4 +- .../input/src/Input/Wrappers/Icons/index.scss | 69 ++++++++--------- components/atom/input/src/Input/index.js | 5 +- components/atom/input/src/Mask/index.js | 74 ++++++++++++------- components/atom/input/src/Password/index.js | 10 +-- .../atom/input/src/Password/styles/index.scss | 6 +- components/atom/input/src/config.js | 6 +- components/atom/input/src/styles/index.scss | 54 +++++++++++++- 15 files changed, 194 insertions(+), 182 deletions(-) diff --git a/components/atom/input/demo/index.js b/components/atom/input/demo/index.js index a21887e585..8deff5d602 100644 --- a/components/atom/input/demo/index.js +++ b/components/atom/input/demo/index.js @@ -1,4 +1,4 @@ -import {useState} from 'react' +import {useState, Fragment} from 'react' import { Anchor, @@ -165,7 +165,7 @@ const TypeDemo = () => { 'MASK', { type: inputTypes.MASK, - mask: 'ES00 0000 0000 00 0000000000', + mask: {mask: 'ES00 0000 0000 00 0000000000'}, placeholder: 'ES00 0000 0000 00 0000000000', charsSize: 31 }, @@ -287,22 +287,6 @@ const AddonAndIconDemo = () => { return (

Addon and Icon

- - } - rightIcon={ - - } - leftAddon="leftAddon" - rightAddon="rightAddon" - /> Input offers the possibility to add icons and contents on its left or right positions @@ -321,6 +305,7 @@ const AddonAndIconDemo = () => { { const [border, setBorder] = useState(true) const [mode, setMode] = useState('light') return ( -
+

No border

The border of the input can be removed using the boolean prop{' '} @@ -468,9 +453,7 @@ const BorderlessDemo = () => { /> - - - +
@@ -540,7 +523,9 @@ const InlineFormDemo = () => ( Input have its own way of provide a submision using the{' '} button prop, you can pass a React node. - Send} /> + Send} + />
) @@ -577,7 +562,7 @@ const ShapeDemo = () => ( ))} {Object.entries({default: undefined, ...inputSizes}).map( ([sizeKey, sizeValue]) => ( - <> + @@ -593,7 +578,7 @@ const ShapeDemo = () => ( ) )} - + ) )} @@ -617,17 +602,17 @@ const Demo = () => (

- {/**/} +

- {/**/} +
- {/**/} +
- {/**/} +
- {/**/} +

diff --git a/components/atom/input/package.json b/components/atom/input/package.json index 84c5ca087d..ec78cd40f7 100644 --- a/components/atom/input/package.json +++ b/components/atom/input/package.json @@ -11,7 +11,7 @@ "dependencies": { "@s-ui/react-hooks": "1", "@s-ui/react-primitive-polymorphic-element": "1", - "imask": "3.4.0" + "react-imask": "6.4.3" }, "peerDependencies": { "@s-ui/component-dependencies": "1" diff --git a/components/atom/input/src/Input/Component/index.scss b/components/atom/input/src/Input/Component/index.scss index 561f378a36..3fd7e18269 100644 --- a/components/atom/input/src/Input/Component/index.scss +++ b/components/atom/input/src/Input/Component/index.scss @@ -7,77 +7,31 @@ $class-read-only: '#{$base-class-input}--readOnly'; -webkit-appearance: none; @include sui-atom-input-input; + background-color: transparent; min-height: auto; text-overflow: $tov-atom-input-placeholder; padding-left: 0; padding-right: 0; border: 0 solid transparent; - &--charsSize { + &#{$base-class-input}--charsSize { width: inherit; } - &--hidden { + &#{$base-class-input}--hidden { display: none; } - &--readOnly { - background: $bgc-atom-input-read-only; - border: $bd-atom-input-read-only; - color: $c-atom-input-read-only; - } - - &#{$base-class-input}--noBorder, - &#{$base-class-input}--noBorder:disabled { - border: 0; - &:focus { - border: 0; - box-shadow: none; - outline: 0; - } - } - &::placeholder { color: $c-atom-input-placeholder; } - &:disabled { - pointer-events: none; - - &:not(#{$class-read-only}) { - -webkit-text-fill-color: $c-atom-input-disabled; - - background: $bgc-atom-input-disabled; - border: $bd-atom-input-disabled; - color: $c-atom-input-disabled; - } - } - &:focus { - // @include sui-atom-input-input-focus; box-shadow: none; } &:focus-visible { outline: 0; } - @each $type, $attr in $sizes-atom-input { - &-size-#{$type} { - height: $attr - 2 * $bdw-s; - min-height: $attr - 2 * $bdw-s; - } - } - - @each $state, $color in $states-atom-input { - &.sui-AtomInput-input--#{$state} { - border-color: $color; - - &:focus { - box-shadow: none; - //box-shadow: $bxsh-atom-input-size $color; - } - } - } - &[type='number'] { -moz-appearance: textfield; diff --git a/components/atom/input/src/Input/Wrappers/Addons/index.scss b/components/atom/input/src/Input/Wrappers/Addons/index.scss index 87af1a17c8..8b8adb6d42 100644 --- a/components/atom/input/src/Input/Wrappers/Addons/index.scss +++ b/components/atom/input/src/Input/Wrappers/Addons/index.scss @@ -1,4 +1,4 @@ -$base-class-addon: "#{$base-class}--withAddon"; +$base-class-addon: '#{$base-class}--withAddon'; #{$base-class} { #{$base-class-addon} { @@ -9,7 +9,6 @@ $base-class-addon: "#{$base-class}--withAddon"; color: $c-atom-input-addon; display: flex; flex-direction: column; - height: inherit; justify-content: center; line-height: inherit; padding-left: $p-atom-input-addon-left; @@ -24,4 +23,19 @@ $base-class-addon: "#{$base-class}--withAddon"; border-right-width: $bdw-s; } } + @each $state, $color in $states-atom-input { + &#{$base-class}--status-#{$state} { + #{$base-class}-item { + &#{$base-class-addon} { + border-color: $bdc-atom-input-addon; + &#{$base-class-addon}--right { + border-left-color: $color; + } + &#{$base-class-addon}--left { + border-right-color: $color; + } + } + } + } + } } diff --git a/components/atom/input/src/Input/Wrappers/Button/InputButton.js b/components/atom/input/src/Input/Wrappers/Button/InputButton.js index fc6a62a687..c794c53ee1 100644 --- a/components/atom/input/src/Input/Wrappers/Button/InputButton.js +++ b/components/atom/input/src/Input/Wrappers/Button/InputButton.js @@ -1,6 +1,8 @@ import PropTypes from 'prop-types' -import {BASE_CLASS_BUTTON} from './config.js' +import cx from 'classnames' + +import {BASE_CLASS_BUTTON, BASE_CLASS_ITEM} from './config.js' const InputButton = ({button, children}) => { if (button === undefined) { @@ -8,10 +10,12 @@ const InputButton = ({button, children}) => { } return ( -
-
{children}
-
{button}
-
+ <> + {children} + + {button} + + ) } InputButton.propTypes = { diff --git a/components/atom/input/src/Input/Wrappers/Button/config.js b/components/atom/input/src/Input/Wrappers/Button/config.js index 86a66b2c31..da59c18f38 100644 --- a/components/atom/input/src/Input/Wrappers/Button/config.js +++ b/components/atom/input/src/Input/Wrappers/Button/config.js @@ -1,3 +1,4 @@ -import {BASE} from '../../../config.js' +import {BASE, BASE_CLASS_ITEM} from '../../../config.js' +export {BASE_CLASS_ITEM} export const BASE_CLASS_BUTTON = `${BASE}--withButton` diff --git a/components/atom/input/src/Input/Wrappers/Button/index.scss b/components/atom/input/src/Input/Wrappers/Button/index.scss index ca26941a34..5274fe8589 100644 --- a/components/atom/input/src/Input/Wrappers/Button/index.scss +++ b/components/atom/input/src/Input/Wrappers/Button/index.scss @@ -1,13 +1,3 @@ -#{$base-class}--withButton { - display: flex; - width: 100%; - - &-input { - flex: 1; - width: 100%; - } - - &-button { - margin-left: $m-m; - } +#{$base-class}--withButton-button { + overflow: hidden; } diff --git a/components/atom/input/src/Input/Wrappers/Icons/config.js b/components/atom/input/src/Input/Wrappers/Icons/config.js index 6a161e9c5e..396c4e67a7 100644 --- a/components/atom/input/src/Input/Wrappers/Icons/config.js +++ b/components/atom/input/src/Input/Wrappers/Icons/config.js @@ -1,11 +1,11 @@ -import {BASE, BASE_CLASS_ITEM, BASE_CLASS_ITEM_FOCUSABLE} from '../../../config.js' +import {BASE, BASE_CLASS_ITEM, BASE_CLASS_AREA_FOCUSABLE} from '../../../config.js' export const ICON_TYPES = { LEFT: 'left', RIGHT: 'right' } -export {BASE_CLASS_ITEM, BASE_CLASS_ITEM_FOCUSABLE} +export {BASE_CLASS_ITEM, BASE_CLASS_AREA_FOCUSABLE} export const BASE_CLASS_ICON = `${BASE}--withIcon` export const BASE_CLASS_ICON_COMPONENT = `${BASE_CLASS_ICON}-icon` export const BASE_CLASS_ICON_CONTENT_COMPONENT = `${BASE_CLASS_ICON_COMPONENT}--content` diff --git a/components/atom/input/src/Input/Wrappers/Icons/index.scss b/components/atom/input/src/Input/Wrappers/Icons/index.scss index 37edd01ad9..309bbe6abf 100644 --- a/components/atom/input/src/Input/Wrappers/Icons/index.scss +++ b/components/atom/input/src/Input/Wrappers/Icons/index.scss @@ -1,41 +1,44 @@ -$base-class-with-icon: '#{$base-class}--withIcon'; - -#{$base-class-with-icon}-icon--left { - //padding-left: $pl-atom-input-input; -} +@use 'sass:math'; -#{$base-class-with-icon}-icon--right { - //padding-right: $pr-atom-input-input; -} +$base-class-with-icon: '#{$base-class}--withIcon'; -#{$base-class-with-icon}-icon { - align-items: center; - color: $c-atom-input-icon; - display: flex; - fill: $c-atom-input-icon; - //height: $w-atom-input-icon; - justify-content: center; - //position: absolute; - //top: $t-atom-input-icon; - //transform: translateY($trf-ty-atom-input-icon); - width: $w-atom-input-icon; - pointer-events: none; +#{$base-class} { + #{$base-class-with-icon}-icon { + align-items: center; + color: $c-atom-input-icon; + display: flex; + fill: $c-atom-input-icon; + justify-content: center; + width: $w-atom-input-icon; + pointer-events: none; - &--withHandler { - cursor: pointer; - pointer-events: auto; - } + &--withHandler { + cursor: pointer; + pointer-events: auto; + } - &--left { - //left: $l-atom-input-icon; - } + &--left { + #{$base-class-with-icon}-icon--content { + width: $w-atom-input-icon; + margin-right: math.div($pl-atom-input, 2); + } + } - &--right { - //right: $r-atom-input-icon; + &--right { + #{$base-class-with-icon}-icon--content { + width: $w-atom-input-icon; + margin-left: math.div($pr-atom-input, 2); + } + } } - - & > * { - //height: 100%; - //width: 100%; + @each $state, $color in $states-atom-input { + &#{$base-class}--status-#{$state} { + #{$base-class-with-icon}-icon { + #{$base-class-with-icon}-icon--content { + color: $color; + fill: $color; + } + } + } } } diff --git a/components/atom/input/src/Input/index.js b/components/atom/input/src/Input/index.js index 350005767c..c0f48ad652 100644 --- a/components/atom/input/src/Input/index.js +++ b/components/atom/input/src/Input/index.js @@ -44,6 +44,7 @@ const BaseInput = forwardRef( const [Component, passedProps] = componentType[type] ? componentType[type]({type, size, ...inputProps}) : componentType[undefined]({type, size, ...inputProps}) + return ( -
+ -
+ ) diff --git a/components/atom/input/src/Mask/index.js b/components/atom/input/src/Mask/index.js index 1259d696a3..958b139add 100644 --- a/components/atom/input/src/Mask/index.js +++ b/components/atom/input/src/Mask/index.js @@ -1,38 +1,54 @@ -import {forwardRef, useEffect, useRef, useState} from 'react' +import {forwardRef, useEffect} from 'react' import PropTypes from 'prop-types' -import Input from '../Input/index.js' +import {useIMask} from 'react-imask' -const MaskInput = forwardRef( - ({name, onChange, mask: maskOptions, ...props}, forwardedRef) => { - const [mask, setMask] = useState(null) - const refInput = useRef(null) - - useEffect(() => () => mask && mask.destroy(), [mask]) +import useMergeRefs from '@s-ui/react-hooks/lib/useMergeRefs' - const handleChange = (ev, {value}) => { - typeof onChange === 'function' && onChange(ev, {value}) - } +import Input from '../Input/Component/index.js' - const handleFocus = () => { - if (!mask) { - import('imask').then(({default: IMask}) => { - setMask(new IMask(refInput.current, maskOptions)) - }) +const MaskInput = forwardRef( + ( + { + name, + onChange, + onComplete, + mask, + value: propValue, + defaultValue, + ...props + }, + forwardedRef + ) => { + const { + ref: refInput, + maskRef, + value: maskedValue = '', + setValue, + ...other + } = useIMask( + {...mask}, + { + onAccept: (value, maskRef, event, ...args) => { + typeof onChange === 'function' && + onChange(event, {value, maskRef, ...args}) + }, + onComplete: (value, maskRef, event, ...args) => { + typeof onComplete === 'function' && + onComplete(event, {value, maskRef, ...args}) + } } - } - - return ( - ) + useEffect(() => { + if(propValue !== maskedValue) { + setValue(propValue) + } + }, [propValue]) + + const ref = useMergeRefs(refInput, forwardedRef) + + return } ) @@ -44,7 +60,9 @@ MaskInput.propTypes = { /* The name of the control */ name: PropTypes.string, /* Event launched on every input change */ - onChange: PropTypes.func + onChange: PropTypes.func, + /* Event fired every onChange which completes teh mask */ + onComplete: PropTypes.func } export default MaskInput diff --git a/components/atom/input/src/Password/index.js b/components/atom/input/src/Password/index.js index 4b0d10cc51..5fadf82e85 100644 --- a/components/atom/input/src/Password/index.js +++ b/components/atom/input/src/Password/index.js @@ -5,10 +5,8 @@ import cx from 'classnames' import useControlledState from '@s-ui/react-hooks/lib/useControlledState' -import Input from '../Input/index.js' +import Input from '../Input/Component/index.js' import { - BASE_CLASS_PASSWORD, - BASE_CLASS_ITEM, BASE_CLASS_PASSWORD_TOGGLE_BUTTON, PASSWORD, TEXT @@ -48,12 +46,12 @@ const Password = forwardRef( value={innerValue} type={type} /> -
{type === PASSWORD ? pwShowLabel : pwHideLabel} -
+ ) } diff --git a/components/atom/input/src/Password/styles/index.scss b/components/atom/input/src/Password/styles/index.scss index 02f67d4508..32048db477 100644 --- a/components/atom/input/src/Password/styles/index.scss +++ b/components/atom/input/src/Password/styles/index.scss @@ -7,10 +7,8 @@ $base-class-password: '#{$base-class}-password'; &--toggleButton { color: $c-atom-input-password-toggle-button; cursor: pointer; - position: absolute; - right: $r-atom-input-password-toggle-button; - top: 50%; - transform: translateY(-50%); user-select: none; + display: flex; + align-items: center; } } diff --git a/components/atom/input/src/config.js b/components/atom/input/src/config.js index 23927ed30c..24696f1ab8 100644 --- a/components/atom/input/src/config.js +++ b/components/atom/input/src/config.js @@ -63,9 +63,9 @@ export const getClassNames = ({ hideInput && `${BASE_CLASS}--hidden`, noBorder && `${BASE_CLASS}--noBorder`, readOnly && `${BASE_CLASS}--readOnly`, - errorState && `${BASE_CLASS}--${INPUT_STATES.ERROR}`, - errorState === false && `${BASE_CLASS}--${INPUT_STATES.SUCCESS}`, - state && `${BASE_CLASS}--${state}`, + errorState && `${BASE_CLASS}--status-${INPUT_STATES.ERROR}`, + errorState === false && `${BASE_CLASS}--status-${INPUT_STATES.SUCCESS}`, + state && `${BASE_CLASS}--status-${state}`, shape && `${BASE_CLASS}-shape-${shape}` ) } diff --git a/components/atom/input/src/styles/index.scss b/components/atom/input/src/styles/index.scss index 466760ec49..4e10515351 100644 --- a/components/atom/input/src/styles/index.scss +++ b/components/atom/input/src/styles/index.scss @@ -10,8 +10,6 @@ $base-class-area-focusable: '.sui-AtomInput-area-focusable'; width: 100%; align-items: stretch; - - #{$base-class}-item { border-width: $bdw-s 0; border-style: solid; @@ -26,7 +24,6 @@ $base-class-area-focusable: '.sui-AtomInput-area-focusable'; border-top-right-radius: $bdrs-atom-input; border-right-width: $bdw-s; } - } @each $shapeMapKey, $shapeMapValue in $bdrs-atom-input-shapes { @@ -49,8 +46,57 @@ $base-class-area-focusable: '.sui-AtomInput-area-focusable'; width: 100%; padding-left: $pl-atom-input; padding-right: $pr-atom-input; + background: $bgc-atom-input; &:focus-within { - @include sui-atom-input-input-focus; + border-color: $c-primary; + border-top-width: $bd-atom-input-focus; + border-bottom-width: $bd-atom-input-focus; + box-shadow: $bxsh-atom-input; + outline: 0 none; + } + } + + @each $state, $color in $states-atom-input { + &#{$base-class}--status-#{$state} { + #{$base-class}-item { + border-color: $color; + } + } + } + + &#{$base-class}--is-disabled { + #{$base-class-area-focusable} { + pointer-events: none; + } + &:not(#{$base-class}--is-read-only) { + #{$base-class-area-focusable} { + -webkit-text-fill-color: $c-atom-input-disabled; + background: $bgc-atom-input-disabled; + border: $bd-atom-input-disabled; + color: $c-atom-input-disabled; + } + } + } + + @each $type, $attr in $sizes-atom-input { + &#{$base-class}-size-#{$type} { + height: $attr; + min-height: $attr; + } + } + + &#{$base-class}-borderless { + #{$base-class}-item { + border-width: 0; + } + #{$base-class-area-focusable} { + padding-left: $pl-atom-input + $bdw-s; + padding-right: $pr-atom-input + $bdw-s; + &:focus-within { + padding-left: $pl-atom-input; + padding-right: $pr-atom-input; + @include sui-atom-input-input-focus; + } } } } From edd308ea1be37c2de115bdea8b6fcbc4b391cc62 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Wed, 21 Sep 2022 13:00:50 +0200 Subject: [PATCH 03/31] feat(components/atom/input): refactor general --- components/atom/input/demo/index.js | 3 +-- .../input/src/Input/Wrappers/Addons/config.js | 2 +- .../src/Input/Wrappers/Button/InputButton.js | 3 +-- .../atom/input/src/Input/Wrappers/Icons/config.js | 6 +++++- components/atom/input/src/Input/index.js | 8 ++++---- components/atom/input/src/Mask/index.js | 15 ++++++++------- components/atom/input/src/Password/index.js | 8 ++------ components/atom/input/src/config.js | 2 -- 8 files changed, 22 insertions(+), 25 deletions(-) diff --git a/components/atom/input/demo/index.js b/components/atom/input/demo/index.js index 8deff5d602..7b978c2c53 100644 --- a/components/atom/input/demo/index.js +++ b/components/atom/input/demo/index.js @@ -1,10 +1,9 @@ -import {useState, Fragment} from 'react' +import {Fragment, useState} from 'react' import { Anchor, AntDesignIcon, Article, - Box, Button, Cell, Code, diff --git a/components/atom/input/src/Input/Wrappers/Addons/config.js b/components/atom/input/src/Input/Wrappers/Addons/config.js index e951c2f02a..f1551f87d9 100644 --- a/components/atom/input/src/Input/Wrappers/Addons/config.js +++ b/components/atom/input/src/Input/Wrappers/Addons/config.js @@ -1,6 +1,6 @@ import cx from 'classnames' -import { BASE, BASE_CLASS_ITEM } from '../../../config.js' +import {BASE, BASE_CLASS_ITEM} from '../../../config.js' export const BASE_CLASS_ADDON = `${BASE}--withAddon` export const BASE_CLASS_ADDON_WRAPPER = `${BASE_CLASS_ADDON}Wrapper` diff --git a/components/atom/input/src/Input/Wrappers/Button/InputButton.js b/components/atom/input/src/Input/Wrappers/Button/InputButton.js index c794c53ee1..87d1d5626a 100644 --- a/components/atom/input/src/Input/Wrappers/Button/InputButton.js +++ b/components/atom/input/src/Input/Wrappers/Button/InputButton.js @@ -1,6 +1,5 @@ -import PropTypes from 'prop-types' - import cx from 'classnames' +import PropTypes from 'prop-types' import {BASE_CLASS_BUTTON, BASE_CLASS_ITEM} from './config.js' diff --git a/components/atom/input/src/Input/Wrappers/Icons/config.js b/components/atom/input/src/Input/Wrappers/Icons/config.js index 396c4e67a7..73e045e57b 100644 --- a/components/atom/input/src/Input/Wrappers/Icons/config.js +++ b/components/atom/input/src/Input/Wrappers/Icons/config.js @@ -1,4 +1,8 @@ -import {BASE, BASE_CLASS_ITEM, BASE_CLASS_AREA_FOCUSABLE} from '../../../config.js' +import { + BASE, + BASE_CLASS_AREA_FOCUSABLE, + BASE_CLASS_ITEM +} from '../../../config.js' export const ICON_TYPES = { LEFT: 'left', diff --git a/components/atom/input/src/Input/index.js b/components/atom/input/src/Input/index.js index c0f48ad652..a4901affa6 100644 --- a/components/atom/input/src/Input/index.js +++ b/components/atom/input/src/Input/index.js @@ -1,19 +1,17 @@ import {forwardRef} from 'react' -import PropTypes from 'prop-types' import cx from 'classnames' +import PropTypes from 'prop-types' import { - SIZES, BASE_CLASS_AREA_FOCUSABLE, BASE_CLASS_ITEM, + SIZES, TYPES } from '../config.js' - import Mask from '../Mask/index.js' import Password from '../Password/index.js' import Input from './Component/index.js' - import InputAddons from './Wrappers/Addons/InputAddons.js' import InputButton from './Wrappers/Button/InputButton.js' import InputIcons from './Wrappers/Icons/InputIcons.js' @@ -72,6 +70,8 @@ const BaseInput = forwardRef( ) BaseInput.propTypes = { + /* text, password, date or number */ + type: PropTypes.string, /** button html element */ button: PropTypes.node, /* inner react node element */ diff --git a/components/atom/input/src/Mask/index.js b/components/atom/input/src/Mask/index.js index 958b139add..38865cfba4 100644 --- a/components/atom/input/src/Mask/index.js +++ b/components/atom/input/src/Mask/index.js @@ -1,9 +1,8 @@ import {forwardRef, useEffect} from 'react' +import {useIMask} from 'react-imask' import PropTypes from 'prop-types' -import {useIMask} from 'react-imask' - import useMergeRefs from '@s-ui/react-hooks/lib/useMergeRefs' import Input from '../Input/Component/index.js' @@ -23,10 +22,8 @@ const MaskInput = forwardRef( ) => { const { ref: refInput, - maskRef, value: maskedValue = '', - setValue, - ...other + setValue } = useIMask( {...mask}, { @@ -41,10 +38,10 @@ const MaskInput = forwardRef( } ) useEffect(() => { - if(propValue !== maskedValue) { + if (propValue !== maskedValue) { setValue(propValue) } - }, [propValue]) + }, [propValue, setValue, maskedValue]) const ref = useMergeRefs(refInput, forwardedRef) @@ -55,6 +52,10 @@ const MaskInput = forwardRef( MaskInput.displayName = 'MaskInput' MaskInput.propTypes = { + /* The value of the control */ + value: PropTypes.string, + /* default value of the control */ + defaultValue: PropTypes.string, /* mask object, see https://unmanner.github.io/imaskjs/ */ mask: PropTypes.object.isRequired, /* The name of the control */ diff --git a/components/atom/input/src/Password/index.js b/components/atom/input/src/Password/index.js index 5fadf82e85..e6e4a69912 100644 --- a/components/atom/input/src/Password/index.js +++ b/components/atom/input/src/Password/index.js @@ -1,16 +1,12 @@ import {forwardRef, useState} from 'react' -import PropTypes from 'prop-types' import cx from 'classnames' +import PropTypes from 'prop-types' import useControlledState from '@s-ui/react-hooks/lib/useControlledState' import Input from '../Input/Component/index.js' -import { - BASE_CLASS_PASSWORD_TOGGLE_BUTTON, - PASSWORD, - TEXT -} from './config.js' +import {BASE_CLASS_PASSWORD_TOGGLE_BUTTON, PASSWORD, TEXT} from './config.js' const Password = forwardRef( ( diff --git a/components/atom/input/src/config.js b/components/atom/input/src/config.js index 24696f1ab8..4bd9d34c03 100644 --- a/components/atom/input/src/config.js +++ b/components/atom/input/src/config.js @@ -1,7 +1,5 @@ import cx from 'classnames' -import Input from './Input/index.js' - export const PREFIX = 'sui' export const CATEGORY = 'Atom' export const COMPONENT = 'Input' From 2b8da35f8a17a73c789d434ac9d5a00fdc636317 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Wed, 21 Sep 2022 13:05:34 +0200 Subject: [PATCH 04/31] docs(Root): remove unnecesary declared prop --- components/atom/input/demo/index.js | 1 - components/atom/input/src/Input/Wrappers/Addons/config.js | 1 - 2 files changed, 2 deletions(-) diff --git a/components/atom/input/demo/index.js b/components/atom/input/demo/index.js index 7b978c2c53..670911343d 100644 --- a/components/atom/input/demo/index.js +++ b/components/atom/input/demo/index.js @@ -304,7 +304,6 @@ const AddonAndIconDemo = () => { Date: Wed, 21 Sep 2022 13:23:24 +0200 Subject: [PATCH 05/31] chore(Root): revert --- .../autosuggest/src/components/InputWithClearUI/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/molecule/autosuggest/src/components/InputWithClearUI/index.js b/components/molecule/autosuggest/src/components/InputWithClearUI/index.js index 10ee6c5a90..70c8849133 100644 --- a/components/molecule/autosuggest/src/components/InputWithClearUI/index.js +++ b/components/molecule/autosuggest/src/components/InputWithClearUI/index.js @@ -8,7 +8,7 @@ const InputWithClearUI = ({ onClickClear, isVisibleClear, iconClear, - rightIcon, + rightIcon = , children, ...props }) => { From 12b6d8077323bb97521d83ac61da14989d487900 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Wed, 21 Sep 2022 13:23:54 +0200 Subject: [PATCH 06/31] fix(components/molecule/autosuggest): remove padded icon --- .../autosuggest/src/components/InputWithClearUI/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/molecule/autosuggest/src/components/InputWithClearUI/index.js b/components/molecule/autosuggest/src/components/InputWithClearUI/index.js index 70c8849133..10ee6c5a90 100644 --- a/components/molecule/autosuggest/src/components/InputWithClearUI/index.js +++ b/components/molecule/autosuggest/src/components/InputWithClearUI/index.js @@ -8,7 +8,7 @@ const InputWithClearUI = ({ onClickClear, isVisibleClear, iconClear, - rightIcon = , + rightIcon, children, ...props }) => { From 42a1bc3857fbf21c7d24d07dffbb7f475125a6c2 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Thu, 22 Sep 2022 11:46:49 +0200 Subject: [PATCH 07/31] feat(components/atom/input): minor input style mods --- components/atom/input/src/styles/index.scss | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/components/atom/input/src/styles/index.scss b/components/atom/input/src/styles/index.scss index 4e10515351..d7ae37eb87 100644 --- a/components/atom/input/src/styles/index.scss +++ b/components/atom/input/src/styles/index.scss @@ -7,7 +7,6 @@ $base-class-area-focusable: '.sui-AtomInput-area-focusable'; #{$base-class} { display: flex; - width: 100%; align-items: stretch; #{$base-class}-item { @@ -93,9 +92,7 @@ $base-class-area-focusable: '.sui-AtomInput-area-focusable'; padding-left: $pl-atom-input + $bdw-s; padding-right: $pr-atom-input + $bdw-s; &:focus-within { - padding-left: $pl-atom-input; - padding-right: $pr-atom-input; - @include sui-atom-input-input-focus; + box-shadow: none; } } } From cb69630d21a66046836104bb05edac3d2ee4c2d3 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Fri, 23 Sep 2022 12:54:34 +0200 Subject: [PATCH 08/31] feat(components/atom/input): mod styles --- .../src/Input/Wrappers/Addons/index.scss | 4 +- .../input/src/Input/Wrappers/Icons/index.scss | 2 - .../atom/input/src/Password/styles/index.scss | 3 -- components/atom/input/src/styles/index.scss | 46 +++++++++++++------ 4 files changed, 33 insertions(+), 22 deletions(-) diff --git a/components/atom/input/src/Input/Wrappers/Addons/index.scss b/components/atom/input/src/Input/Wrappers/Addons/index.scss index 8b8adb6d42..84402747b1 100644 --- a/components/atom/input/src/Input/Wrappers/Addons/index.scss +++ b/components/atom/input/src/Input/Wrappers/Addons/index.scss @@ -16,11 +16,11 @@ $base-class-addon: '#{$base-class}--withAddon'; width: auto; &#{$base-class-addon}--right { - border-left-width: $bdw-s; + border-left-width: 0; } &#{$base-class-addon}--left { - border-right-width: $bdw-s; + border-right-width: 0; } } @each $state, $color in $states-atom-input { diff --git a/components/atom/input/src/Input/Wrappers/Icons/index.scss b/components/atom/input/src/Input/Wrappers/Icons/index.scss index 309bbe6abf..f2e5d51fb6 100644 --- a/components/atom/input/src/Input/Wrappers/Icons/index.scss +++ b/components/atom/input/src/Input/Wrappers/Icons/index.scss @@ -20,14 +20,12 @@ $base-class-with-icon: '#{$base-class}--withIcon'; &--left { #{$base-class-with-icon}-icon--content { width: $w-atom-input-icon; - margin-right: math.div($pl-atom-input, 2); } } &--right { #{$base-class-with-icon}-icon--content { width: $w-atom-input-icon; - margin-left: math.div($pr-atom-input, 2); } } } diff --git a/components/atom/input/src/Password/styles/index.scss b/components/atom/input/src/Password/styles/index.scss index 32048db477..ce2e2dbb0c 100644 --- a/components/atom/input/src/Password/styles/index.scss +++ b/components/atom/input/src/Password/styles/index.scss @@ -1,9 +1,6 @@ $base-class-password: '#{$base-class}-password'; #{$base-class-password} { - position: relative; - width: 100%; - &--toggleButton { color: $c-atom-input-password-toggle-button; cursor: pointer; diff --git a/components/atom/input/src/styles/index.scss b/components/atom/input/src/styles/index.scss index d7ae37eb87..cb92baa520 100644 --- a/components/atom/input/src/styles/index.scss +++ b/components/atom/input/src/styles/index.scss @@ -1,3 +1,5 @@ +@use 'sass:math'; + $base-class: '.sui-AtomInput'; $base-class-area-focusable: '.sui-AtomInput-area-focusable'; @@ -8,11 +10,10 @@ $base-class-area-focusable: '.sui-AtomInput-area-focusable'; #{$base-class} { display: flex; align-items: stretch; + flex-grow: 1; #{$base-class}-item { - border-width: $bdw-s 0; - border-style: solid; - border-color: $c-gray-light; + border: $bd-atom-input-base; &:first-child { border-bottom-left-radius: $bdrs-atom-input; border-top-left-radius: $bdrs-atom-input; @@ -25,6 +26,12 @@ $base-class-area-focusable: '.sui-AtomInput-area-focusable'; } } + &:not(#{$base-class}--has-charSize) { + #{$base-class-area-focusable} { + flex-grow: 1; + } + } + @each $shapeMapKey, $shapeMapValue in $bdrs-atom-input-shapes { &#{$base-class}-shape-#{$shapeMapKey} { #{$base-class}-item { @@ -42,14 +49,12 @@ $base-class-area-focusable: '.sui-AtomInput-area-focusable'; #{$base-class-area-focusable} { display: flex; - width: 100%; padding-left: $pl-atom-input; padding-right: $pr-atom-input; background: $bgc-atom-input; + gap: math.div($p-l, 2); &:focus-within { - border-color: $c-primary; - border-top-width: $bd-atom-input-focus; - border-bottom-width: $bd-atom-input-focus; + border: $bd-atom-input-focus; box-shadow: $bxsh-atom-input; outline: 0 none; } @@ -63,6 +68,14 @@ $base-class-area-focusable: '.sui-AtomInput-area-focusable'; } } + &#{$base-class}--is-read-only { + #{$base-class-area-focusable} { + background: $bgc-atom-input-read-only; + border: $bd-atom-input-read-only; + color: $c-atom-input-read-only; + } + } + &#{$base-class}--is-disabled { #{$base-class-area-focusable} { pointer-events: none; @@ -85,14 +98,17 @@ $base-class-area-focusable: '.sui-AtomInput-area-focusable'; } &#{$base-class}-borderless { - #{$base-class}-item { - border-width: 0; - } - #{$base-class-area-focusable} { - padding-left: $pl-atom-input + $bdw-s; - padding-right: $pr-atom-input + $bdw-s; - &:focus-within { - box-shadow: none; + &, + &#{$base-class}--is-disabled:not(#{$base-class}--is-read-only) { + #{$base-class}-item { + border-width: 0; + } + #{$base-class-area-focusable} { + padding-left: $pl-atom-input + $bdw-s; + padding-right: $pr-atom-input + $bdw-s; + &:focus-within { + box-shadow: none; + } } } } From a6fa389769699942bfaf980e5bdab2f2839d859d Mon Sep 17 00:00:00 2001 From: andresin87 Date: Fri, 23 Sep 2022 12:55:24 +0200 Subject: [PATCH 09/31] feat(components/atom/tag): add 2 sizes and fix styles --- .../atom/tag/demo/articles/ArticleDesign.js | 16 ++-- components/atom/tag/src/_settings.scss | 28 +++++- components/atom/tag/src/constants.js | 6 +- components/atom/tag/src/index.js | 80 ++++++++-------- components/atom/tag/src/styles/index.scss | 91 ++++++++----------- components/atom/tag/test/index.test.js | 6 +- 6 files changed, 122 insertions(+), 105 deletions(-) diff --git a/components/atom/tag/demo/articles/ArticleDesign.js b/components/atom/tag/demo/articles/ArticleDesign.js index 99ff42eaea..43bf315fb1 100644 --- a/components/atom/tag/demo/articles/ArticleDesign.js +++ b/components/atom/tag/demo/articles/ArticleDesign.js @@ -34,28 +34,32 @@ const ArticleDesign = ({className}) => { )} {Object.values(atomTagDesigns) .reverse() - .map((size, index) => ( + .map((design, index) => ( - + - + - + - + diff --git a/components/atom/tag/src/_settings.scss b/components/atom/tag/src/_settings.scss index 05132670cf..084cf259cc 100644 --- a/components/atom/tag/src/_settings.scss +++ b/components/atom/tag/src/_settings.scss @@ -3,18 +3,42 @@ $bgc-atom-tag: color-variation($c-gray, 3) !default; $mw-label: 240px !default; // sizes +$h-atom-tag-xl: 48px !default; $h-atom-tag-l: 40px !default; $h-atom-tag-m: 32px !default; $h-atom-tag-s: 24px !default; +$h-atom-tag-xs: 16px !default; $m-atom-tag: $m-m !default; +$p-atom-tag-xl: 0 $p-l !default; $p-atom-tag-l: 0 $p-l !default; $p-atom-tag-m: 0 $p-l !default; $p-atom-tag-s: 0 $p-m !default; +$p-atom-tag-xs: 0 $p-m !default; -$p-atom-tag-hasIcon-hasClose: ( +$atom-tag-sizes: (xlarge, large, medium, small, xsmall) !default; + +$h-atom-tags: ( + xlarge: $h-atom-tag-xl, + large: $h-atom-tag-l, + medium: $h-atom-tag-m, + small: $h-atom-tag-s, + xsmall: $h-atom-tag-xs +) !default; + +$p-atom-tags: ( + xlarge: $p-atom-tag-xl, + large: $p-atom-tag-l, + medium: $p-atom-tag-m, small: $p-atom-tag-s, + xsmall: $p-atom-tag-xs +) !default; + +$p-atom-tag-hasIcon-hasClose: ( + xlarge: $p-atom-tag-xl, + large: $p-atom-tag-l, medium: $p-atom-tag-m, - large: $p-atom-tag-l + small: $p-atom-tag-s, + xsmall: $p-atom-tag-xs ) !default; // outline diff --git a/components/atom/tag/src/constants.js b/components/atom/tag/src/constants.js index b4c93e45dc..325a796c8c 100644 --- a/components/atom/tag/src/constants.js +++ b/components/atom/tag/src/constants.js @@ -11,10 +11,12 @@ export const ACTIONABLE_ONLY_PROPS = [ export const STANDARD_ONLY_PROPS = ['closeIcon', 'onClose'] -export const SIZES = { +export var SIZES = { + XLARGE: 'xlarge', LARGE: 'large', MEDIUM: 'medium', - SMALL: 'small' + SMALL: 'small', + XSMALL: 'xsmall' } export const LINK_TYPES = { diff --git a/components/atom/tag/src/index.js b/components/atom/tag/src/index.js index 6304e2ab7e..6d118db803 100644 --- a/components/atom/tag/src/index.js +++ b/components/atom/tag/src/index.js @@ -11,43 +11,52 @@ import { } from './constants.js' import StandardTag from './Standard.js' -const AtomTag = props => { - const { - design, - href, - icon, - onClick, - responsive, - size, - type, - readOnly, - disabled, - isFitted = false - } = props +const AtomTag = ({ + design, + href, + icon, + iconPlacement = 'left', + onClick, + responsive, + size = SIZES.MEDIUM, + type, + readOnly, + disabled, + isFitted = false, + ...props +}) => { const isActionable = onClick || href - const classNames = cx( - 'sui-AtomTag', - `sui-AtomTag-${size}`, - design && `sui-AtomTag--${design}`, - icon && 'sui-AtomTag-hasIcon', - responsive && 'sui-AtomTag--responsive', - type && `sui-AtomTag--${type}`, - isFitted && 'sui-AtomTag--isFitted' - ) + const [Component, getter] = isActionable + ? [ActionableTag, getActionableProps] + : [StandardTag, getStandardProps] - return isActionable ? ( - - ) : ( - ) } @@ -119,11 +128,6 @@ AtomTag.propTypes = { isFitted: PropTypes.bool } -AtomTag.defaultProps = { - iconPlacement: 'left', - size: SIZES.MEDIUM -} - export default AtomTag export {DESIGNS as atomTagDesigns} export {LINK_TYPES as linkTypes} diff --git a/components/atom/tag/src/styles/index.scss b/components/atom/tag/src/styles/index.scss index 20738051f5..c96f3d7246 100644 --- a/components/atom/tag/src/styles/index.scss +++ b/components/atom/tag/src/styles/index.scss @@ -6,7 +6,6 @@ $base-class: '.sui-AtomTag'; align-content: center; background-color: $bgc-atom-tag; border: $bd-atom-tag; - border-radius: ceil($h-atom-tag-m * 0.5); box-sizing: border-box; cursor: default; display: inline-flex; @@ -103,7 +102,7 @@ $base-class: '.sui-AtomTag'; } } - &#{$self}--outline { + &#{$base-class}--design-outline { border-color: $c-atom-tag-actionable-invert; color: $c-atom-tag-actionable-invert; fill: $c-atom-tag-actionable-invert; @@ -119,50 +118,32 @@ $base-class: '.sui-AtomTag'; } } - &-small { - height: $h-atom-tag-s; - padding: $p-atom-tag-s; - &.sui-AtomTag-hasIcon.sui-AtomTag-hasClose { - padding: map-get($p-atom-tag-hasIcon-hasClose, 'small'); - } - - & .sui-AtomTag-label { - line-height: $h-atom-tag-s; - } - - .sui-AtomTag-closeable { - @include icon-secondary-clickable-area($h-atom-tag-s); - } - - .sui-AtomTag-icon { - margin-left: 0; - } - - .sui-AtomTag-secondary-icon { - margin-right: 0; - } - } + @each $atom-tag-size in $atom-tag-sizes { + &#{$base-class}--size-#{$atom-tag-size} { + height: map-get($h-atom-tags, $atom-tag-size); + padding: map-get($p-atom-tags, $atom-tag-size); + border-radius: ceil(map-get($h-atom-tags, $atom-tag-size) * 0.5); + &.sui-AtomTag-hasIcon.sui-AtomTag-hasClose { + padding: map-get($p-atom-tag-hasIcon-hasClose, $atom-tag-size); + } - &-medium { - &.sui-AtomTag-hasIcon.sui-AtomTag-hasClose { - padding: map-get($p-atom-tag-hasIcon-hasClose, 'medium'); - } - } + & .sui-AtomTag-label { + line-height: map-get($h-atom-tags, $atom-tag-size); + } - &-large { - border-radius: ceil($h-atom-tag-l * 0.5); - height: $h-atom-tag-l; - padding: $p-atom-tag-l; - &.sui-AtomTag-hasIcon.sui-AtomTag-hasClose { - padding: map-get($p-atom-tag-hasIcon-hasClose, 'large'); - } + .sui-AtomTag-closeable { + @include icon-secondary-clickable-area( + map-get($h-atom-tags, $atom-tag-size) + ); + } - & .sui-AtomTag-label { - line-height: $h-atom-tag-l; - } + .sui-AtomTag-icon { + margin-left: 0; + } - .sui-AtomTag-closeable { - @include icon-secondary-clickable-area($h-atom-tag-l); + .sui-AtomTag-secondary-icon { + margin-right: 0; + } } } @@ -182,22 +163,22 @@ $base-class: '.sui-AtomTag'; } } - &--outline { + &--design-outline { background-color: $bgc-atom-tag-outline; border: $bdw-atom-tag-outline solid $bc-atom-tag-outline; } - @each $name, $type in $atom-tag-types { - $bgc: map-get($type, bgc); - $c: map-get($type, c); - $bgc-hover: map-get($type, bgc-hover); - $c-hover: map-get($type, c-hover); - $bdc: map-get($type, bdc); - $bds: map-get($type, bds); - $bdw: map-get($type, bdw); - $bdc-hover: map-get($type, bdc-hover); - - &--#{$name} { + @each $type-name, $type-value in $atom-tag-types { + $bgc: map-get($type-value, bgc); + $c: map-get($type-value, c); + $bgc-hover: map-get($type-value, bgc-hover); + $c-hover: map-get($type-value, c-hover); + $bdc: map-get($type-value, bdc); + $bds: map-get($type-value, bds); + $bdw: map-get($type-value, bdw); + $bdc-hover: map-get($type-value, bdc-hover); + + &--type-#{$type-name} { background-color: $bgc; border-color: $bdc; border-style: $bds; @@ -212,7 +193,7 @@ $base-class: '.sui-AtomTag'; fill: $c; } - &#{$self}--outline { + &#{$self}--design-outline { border-color: $bgc; color: $bgc; background-color: $c; diff --git a/components/atom/tag/test/index.test.js b/components/atom/tag/test/index.test.js index d772bf9e56..ac1b5c9ea1 100644 --- a/components/atom/tag/test/index.test.js +++ b/components/atom/tag/test/index.test.js @@ -201,14 +201,16 @@ describe(json.name, () => { // Given const library = pkg const expected = { + XLARGE: 'xlarge', LARGE: 'large', MEDIUM: 'medium', - SMALL: 'small' + SMALL: 'small', + XSMALL: 'xsmall' } // When const {atomTagSizes: actual} = library - const {LARGE, MEDIUM, SMALL, ...others} = actual + const {XLARGE, LARGE, MEDIUM, SMALL, XSMALL, ...others} = actual // Then expect(Object.keys(others).length).to.equal(0) From 1802c895eb8d05d97709b555710502c46c98d09f Mon Sep 17 00:00:00 2001 From: andresin87 Date: Fri, 23 Sep 2022 12:56:35 +0200 Subject: [PATCH 10/31] feat(components/molecule/inputTags): modify the component to addopt the nes input structure --- components/molecule/inputTags/package.json | 4 ++-- components/molecule/inputTags/src/config.js | 14 ++++++++++++++ components/molecule/inputTags/src/index.js | 5 ++++- .../molecule/inputTags/src/styles/index.scss | 4 ++++ .../molecule/inputTags/src/styles/settings.scss | 3 ++- 5 files changed, 26 insertions(+), 4 deletions(-) diff --git a/components/molecule/inputTags/package.json b/components/molecule/inputTags/package.json index c49bbca278..6e1aab7677 100644 --- a/components/molecule/inputTags/package.json +++ b/components/molecule/inputTags/package.json @@ -9,8 +9,8 @@ "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { - "@s-ui/react-atom-input": "5", - "@s-ui/react-atom-tag": "2", + "@s-ui/react-atom-input": "5.21.0-beta.4", + "@s-ui/react-atom-tag": "2.43.0-beta.0", "@s-ui/react-hooks": "1" }, "peerDependencies": { diff --git a/components/molecule/inputTags/src/config.js b/components/molecule/inputTags/src/config.js index 3e08958bd6..4e1ee64da9 100644 --- a/components/molecule/inputTags/src/config.js +++ b/components/molecule/inputTags/src/config.js @@ -1,3 +1,6 @@ +import {inputSizes} from '@s-ui/react-atom-input' +import {atomTagSizes} from '@s-ui/react-atom-tag' + export const BASE_CLASS = 'sui-AtomInput' export const CLASS_TAGS = `${BASE_CLASS}--withTags` export const CLASS_TAGS_FOCUS = `${CLASS_TAGS}--focus` @@ -12,4 +15,15 @@ export const isDuplicate = (values, newValue) => { return upperTags.includes(newValue.toUpperCase()) } +export const getInputToTagSize = inputSize => { + const conversor = { + [inputSizes.XSMALL]: atomTagSizes.XSMALL, + [inputSizes.SMALL]: atomTagSizes.SMALL, + [inputSizes.MEDIUM]: atomTagSizes.MEDIUM, + [inputSizes.LARGE]: atomTagSizes.LARGE, + [inputSizes.XLARGE]: atomTagSizes.XLARGE + } + return conversor[inputSize] +} + export const isFunction = fn => typeof fn === 'function' diff --git a/components/molecule/inputTags/src/index.js b/components/molecule/inputTags/src/index.js index 823c82910d..79da8ff01b 100644 --- a/components/molecule/inputTags/src/index.js +++ b/components/molecule/inputTags/src/index.js @@ -14,6 +14,7 @@ import { CLASS_TAGS_ERROR, CLASS_TAGS_FOCUS, CLASS_TAGS_SUCCESS, + getInputToTagSize, isDuplicate, isFunction } from './config.js' @@ -136,10 +137,11 @@ const MoleculeInputTags = forwardRef( label })} label={label} - size={atomTagSizes.SMALL} + size={getInputToTagSize(size)} responsive readOnly={readOnly} disabled={disabled} + isFitted /> ) })} @@ -156,6 +158,7 @@ const MoleculeInputTags = forwardRef( noBorder readOnly={readOnly} disabled={disabled} + size={size} placeholder={isEmpty ? placeholder : undefined} /> )} diff --git a/components/molecule/inputTags/src/styles/index.scss b/components/molecule/inputTags/src/styles/index.scss index e92b1804b2..f499e479bb 100644 --- a/components/molecule/inputTags/src/styles/index.scss +++ b/components/molecule/inputTags/src/styles/index.scss @@ -10,6 +10,7 @@ $class-input: '#{$base-class}-input'; display: flex; flex-wrap: wrap; padding: 0 0 0 $p-m; + gap: $p-base; &--focus { @include sui-atom-input-input-focus; @@ -22,6 +23,9 @@ $class-input: '#{$base-class}-input'; background-color: transparent; } } + &[aria-readonly='true'] { + background-color: $bgc-input-tag-read-only; + } & #{$class-input} { flex: 1; diff --git a/components/molecule/inputTags/src/styles/settings.scss b/components/molecule/inputTags/src/styles/settings.scss index 8fff321a6d..6c637513b9 100644 --- a/components/molecule/inputTags/src/styles/settings.scss +++ b/components/molecule/inputTags/src/styles/settings.scss @@ -1,3 +1,4 @@ $sizes-atom-input-paddings: m $p-m, s $p-s !default; -$bg-input-tag-disable: $c-gray-light-4 !default; +$bg-input-tag-disable: $bgc-atom-input-disabled; +$bgc-input-tag-read-only: $bgc-atom-input-read-only; $bdrs-molecule-input-tags: 0 !default; From 0d4025199a8425900042fceb03bef0d5c629cf69 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Fri, 23 Sep 2022 15:09:53 +0200 Subject: [PATCH 11/31] chore(components/molecule/inputTags): restore package.json+ --- components/molecule/inputTags/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/molecule/inputTags/package.json b/components/molecule/inputTags/package.json index 6e1aab7677..c49bbca278 100644 --- a/components/molecule/inputTags/package.json +++ b/components/molecule/inputTags/package.json @@ -9,8 +9,8 @@ "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { - "@s-ui/react-atom-input": "5.21.0-beta.4", - "@s-ui/react-atom-tag": "2.43.0-beta.0", + "@s-ui/react-atom-input": "5", + "@s-ui/react-atom-tag": "2", "@s-ui/react-hooks": "1" }, "peerDependencies": { From 9d454150a4225034716b26c19cd6dfa4d836444e Mon Sep 17 00:00:00 2001 From: andresin87 Date: Tue, 27 Sep 2022 10:59:45 +0200 Subject: [PATCH 12/31] refactor(components/atom/input): remove unnnecesary destructuring --- components/atom/input/src/Input/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/atom/input/src/Input/index.js b/components/atom/input/src/Input/index.js index a4901affa6..fc39ba5f3e 100644 --- a/components/atom/input/src/Input/index.js +++ b/components/atom/input/src/Input/index.js @@ -17,7 +17,7 @@ import InputButton from './Wrappers/Button/InputButton.js' import InputIcons from './Wrappers/Icons/InputIcons.js' const componentType = { - undefined: ({...props}) => [Input, {...props}], + undefined: (props) => [Input, props], [TYPES.SUI_PASSWORD]: ({type, ...props}) => [Password, {...props}], [TYPES.MASK]: ({type, ...props}) => [Mask, {...props}] } From ee8e66a75566590548a55af2c5bc5fe786f6fe59 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Tue, 27 Sep 2022 11:02:52 +0200 Subject: [PATCH 13/31] refactor(components/atom/input): improve readability oh imask handlers --- components/atom/input/src/Mask/index.js | 14 ++++++-------- components/atom/input/src/config.js | 2 ++ 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/components/atom/input/src/Mask/index.js b/components/atom/input/src/Mask/index.js index 38865cfba4..e0381f462e 100644 --- a/components/atom/input/src/Mask/index.js +++ b/components/atom/input/src/Mask/index.js @@ -7,6 +7,8 @@ import useMergeRefs from '@s-ui/react-hooks/lib/useMergeRefs' import Input from '../Input/Component/index.js' +import {isFunction} from '../config.js' + const MaskInput = forwardRef( ( { @@ -27,14 +29,10 @@ const MaskInput = forwardRef( } = useIMask( {...mask}, { - onAccept: (value, maskRef, event, ...args) => { - typeof onChange === 'function' && - onChange(event, {value, maskRef, ...args}) - }, - onComplete: (value, maskRef, event, ...args) => { - typeof onComplete === 'function' && - onComplete(event, {value, maskRef, ...args}) - } + onAccept: (value, maskRef, event, ...args) => + isFunction(onChange) && onChange(event, {value, maskRef, ...args}), + onComplete: (value, maskRef, event, ...args) => + isFunction(onComplete) && onComplete(event, {value, maskRef, ...args}) } ) useEffect(() => { diff --git a/components/atom/input/src/config.js b/components/atom/input/src/config.js index 4bd9d34c03..639bb28521 100644 --- a/components/atom/input/src/config.js +++ b/components/atom/input/src/config.js @@ -67,3 +67,5 @@ export const getClassNames = ({ shape && `${BASE_CLASS}-shape-${shape}` ) } + +export const isFunction = fn => typeof fn === 'function' From cc41e5c1369f5ac64c881e69a70fb85324d6f2e5 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Tue, 27 Sep 2022 11:17:42 +0200 Subject: [PATCH 14/31] refactor(components/atom/input): isValidSize refactor helper --- components/atom/input/src/config.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/components/atom/input/src/config.js b/components/atom/input/src/config.js index 639bb28521..97ad8f508e 100644 --- a/components/atom/input/src/config.js +++ b/components/atom/input/src/config.js @@ -69,3 +69,6 @@ export const getClassNames = ({ } export const isFunction = fn => typeof fn === 'function' + +export const isValidSize = charSize => + Number.isInteger(charSize) && charSize >= 0 From cb4caf307d10b482561778abda3643ac5e605e17 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Tue, 27 Sep 2022 11:22:18 +0200 Subject: [PATCH 15/31] refactor(components/atom/input): lint --- components/atom/input/src/Input/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/atom/input/src/Input/index.js b/components/atom/input/src/Input/index.js index fc39ba5f3e..c7e7348592 100644 --- a/components/atom/input/src/Input/index.js +++ b/components/atom/input/src/Input/index.js @@ -17,7 +17,7 @@ import InputButton from './Wrappers/Button/InputButton.js' import InputIcons from './Wrappers/Icons/InputIcons.js' const componentType = { - undefined: (props) => [Input, props], + undefined: props => [Input, props], [TYPES.SUI_PASSWORD]: ({type, ...props}) => [Password, {...props}], [TYPES.MASK]: ({type, ...props}) => [Mask, {...props}] } From 6c1ad31f1b59b1edd3d9d58b306c11fefc540155 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Thu, 29 Sep 2022 12:35:17 +0200 Subject: [PATCH 16/31] feat(components/molecule/select): get the right input structure --- .../src/components/MoleculeInputSelect.js | 8 ++++++-- .../src/components/MultipleSelection.js | 5 ++--- .../select/src/components/SingleSelection.js | 2 +- .../molecule/select/src/styles/index.scss | 19 ++----------------- 4 files changed, 11 insertions(+), 23 deletions(-) diff --git a/components/molecule/select/src/components/MoleculeInputSelect.js b/components/molecule/select/src/components/MoleculeInputSelect.js index a4ac2f9d48..624e007a9e 100644 --- a/components/molecule/select/src/components/MoleculeInputSelect.js +++ b/components/molecule/select/src/components/MoleculeInputSelect.js @@ -20,8 +20,12 @@ const MoleculeInputSelect = props => { return (
- {children} - {iconArrow} + {iconArrow}} + {...props} + > + {children} +
) } diff --git a/components/molecule/select/src/components/MultipleSelection.js b/components/molecule/select/src/components/MultipleSelection.js index 17a718a43a..3d24d7e315 100644 --- a/components/molecule/select/src/components/MultipleSelection.js +++ b/components/molecule/select/src/components/MultipleSelection.js @@ -26,6 +26,7 @@ const MoleculeSelectFieldMultiSelection = props => { } = props const tags = values.map(value => optionsData[value]) + const isFull = () => maxTags && tags?.length >= maxTags const handleMultiSelection = (ev, {value: valueOptionSelected}) => { const handleToggle = ev => { @@ -42,8 +43,6 @@ const MoleculeSelectFieldMultiSelection = props => { const addToValues = () => [...values, valueOptionSelected] - const isFull = () => maxTags && tags?.length >= maxTags - if (isValueSelectedAlreadySelected()) { onChange(ev, {value: removeFromValues()}) } else if (!isFull()) { @@ -82,7 +81,7 @@ const MoleculeSelectFieldMultiSelection = props => { diff --git a/components/molecule/select/src/components/SingleSelection.js b/components/molecule/select/src/components/SingleSelection.js index 3cd9c56e94..34fc386db7 100644 --- a/components/molecule/select/src/components/SingleSelection.js +++ b/components/molecule/select/src/components/SingleSelection.js @@ -48,7 +48,7 @@ const MoleculeSelectSingleSelection = props => { size={selectSize} tabIndex={tabIndex} > - + Date: Fri, 16 Sep 2022 09:51:03 +0200 Subject: [PATCH 17/31] chore(Root): wip --- .../use-portal/demo/articles/ArticleCustom.js | 28 ++++ .../demo/articles/ArticleDefault.js | 132 +++++++++++++++++ .../demo/articles/ArticleCloseOnEvent.js | 2 +- .../demo/articles/ArticleCustom/usePopper.js | 136 ------------------ .../demo/articles/ArticleCustom/useTooltip.js | 61 -------- .../demo/articles/ArticleStateless.js | 3 + 6 files changed, 164 insertions(+), 198 deletions(-) create mode 100644 components/hook/use-portal/demo/articles/ArticleCustom.js create mode 100644 components/hook/use-portal/demo/articles/ArticleDefault.js delete mode 100644 components/hook/usePortal/demo/articles/ArticleCustom/usePopper.js delete mode 100644 components/hook/usePortal/demo/articles/ArticleCustom/useTooltip.js diff --git a/components/hook/use-portal/demo/articles/ArticleCustom.js b/components/hook/use-portal/demo/articles/ArticleCustom.js new file mode 100644 index 0000000000..c1697c4608 --- /dev/null +++ b/components/hook/use-portal/demo/articles/ArticleCustom.js @@ -0,0 +1,28 @@ +import PropTypes from 'prop-types' + +import {Article, Button, H2, Paragraph} from '@s-ui/documentation-library' + +import useTooltip from './ArticleCustom/useTooltip.js' + +const ArticleCustom = ({className}) => { + const [bind, Tooltip] = useTooltip() + return ( +
+

Custom

+ + You can use the hook defining custom event handlers to extend its + functionalities to may other ways like creating tooltips. + + + + hello world + +
+ ) +} + +ArticleCustom.propTypes = { + className: PropTypes.string +} + +export default ArticleCustom diff --git a/components/hook/use-portal/demo/articles/ArticleDefault.js b/components/hook/use-portal/demo/articles/ArticleDefault.js new file mode 100644 index 0000000000..a8f7e5f004 --- /dev/null +++ b/components/hook/use-portal/demo/articles/ArticleDefault.js @@ -0,0 +1,132 @@ +import {useRef} from 'react' + +import PropTypes from 'prop-types' + +import { + Anchor, + Article, + Bold, + Box, + Button, + Code, + H2, + H3, + H4, + ListItem, + OrderedList, + Paragraph, + UnorderedList +} from '@s-ui/documentation-library' + +import usePortal from '../../src/index.js' + +const ArticleDefault = ({className}) => { + const {Portal, portalRef} = usePortal() + const articleRef = useRef() + return ( +
+

Default

+ + The portal is default appended at the document body. It is default + opened unless you define its initial isOpen configuration + settings to false. + + + + +

Default Portal Result

+ + This text is portaled at the end of document.body from the{' '} + articleRef.current.scrollIntoView()} + style={{ + border: 0, + padding: 0, + margin: 0, + backgroundColor: 'transparent' + }} + > + default demo + + ! + + + + + usePortal hook admits many different options as an{' '} + object argument to configure the portal: + + + + isOpen (boolean|true): sets the initial state visible or + not. + + + onOpen (func): opens the portal + + + onClose (func): closes the portal + + + onToggle (func): changes between open/close the portal + + + hasCloseOnOutsideClick (boolean|false): auto-close the + portal on outside click + + + hasCloseOnEsc (boolean|false): autoClose the portal on + 'Esc' press + + +

Result

+ + usePortal hook result can be destructured using an array or + an object. + +

Array

+ + const [Portal, open, close, isOpen, togglePortal, triggerRef, portalRef] + = usePortal() + +

Object

+ + { + 'const {Portal, open, close, isOpen, togglePortal, triggerRef, portalRef} = usePortal()' + } + + + + Portal: The portal component + + + open: The action to open the portal + + + close: The action to close the portal + + + isOpen: The portal current state + + + togglePortal: The action to toggle the state + + + triggerRef: The trigger element ref + + + portalRef: The portal element ref + + +
+ ) +} + +ArticleDefault.propTypes = { + className: PropTypes.string +} + +export default ArticleDefault diff --git a/components/hook/usePortal/demo/articles/ArticleCloseOnEvent.js b/components/hook/usePortal/demo/articles/ArticleCloseOnEvent.js index 14e5d3cbda..85a06eb89c 100644 --- a/components/hook/usePortal/demo/articles/ArticleCloseOnEvent.js +++ b/components/hook/usePortal/demo/articles/ArticleCloseOnEvent.js @@ -1,8 +1,8 @@ +import { import {useRef, useState} from 'react' import PropTypes from 'prop-types' -import { Article, Box, Cell, diff --git a/components/hook/usePortal/demo/articles/ArticleCustom/usePopper.js b/components/hook/usePortal/demo/articles/ArticleCustom/usePopper.js deleted file mode 100644 index bc02ae8511..0000000000 --- a/components/hook/usePortal/demo/articles/ArticleCustom/usePopper.js +++ /dev/null @@ -1,136 +0,0 @@ -import {useMemo, useRef, useState} from 'react' -import isEqual from 'react-fast-compare' - -import {createPopper as defaultCreatePopper} from '@popperjs/core' - -import useIsomorphicLayoutEffect from '@s-ui/react-hooks/lib/useIsomorphicLayoutEffect' - -const EMPTY_MODIFIERS = [] - -const usePopper = function usePopper( - referenceElement, - popperElement, - options = {} -) { - const prevOptions = useRef(null) - const optionsWithDefaults = { - onFirstUpdate: options.onFirstUpdate, - placement: options.placement || 'bottom', - strategy: options.strategy || 'absolute', - modifiers: options.modifiers || EMPTY_MODIFIERS - } - - const [state, setState] = useState({ - styles: { - popper: { - position: optionsWithDefaults.strategy, - left: '0', - top: '0' - }, - arrow: { - position: 'absolute' - } - }, - attributes: {} - }) - - const updateStateModifier = useMemo(function () { - return { - name: 'updateState', - enabled: true, - phase: 'write', - fn: function fn({state}) { - const elements = Object.keys(state.elements) - setState({ - styles: Object.fromEntries( - elements.map(function (element) { - return [element, state.styles[element] || {}] - }) - ), - attributes: Object.fromEntries( - elements.map(function (element) { - return [element, state.attributes[element]] - }) - ) - }) - }, - requires: ['computeStyles'] - } - }, []) - - const popperOptions = useMemo( - function () { - const newOptions = { - onFirstUpdate: optionsWithDefaults.onFirstUpdate, - placement: optionsWithDefaults.placement, - strategy: optionsWithDefaults.strategy, - modifiers: [].concat(optionsWithDefaults.modifiers, [ - updateStateModifier, - { - name: 'applyStyles', - enabled: false - } - ]) - } - - if (isEqual(prevOptions.current, newOptions)) { - return prevOptions.current || newOptions - } else { - prevOptions.current = newOptions - return newOptions - } - }, - [ - optionsWithDefaults.onFirstUpdate, - optionsWithDefaults.placement, - optionsWithDefaults.strategy, - optionsWithDefaults.modifiers, - updateStateModifier - ] - ) - const popperInstanceRef = useRef() - - useIsomorphicLayoutEffect( - function () { - if (popperInstanceRef.current) { - popperInstanceRef.current.setOptions(popperOptions) - } - }, - [popperOptions] - ) - useIsomorphicLayoutEffect( - function () { - if ( - referenceElement == null || - popperElement == null || - popperInstanceRef.current - ) { - return - } - - const createPopper = options.createPopper || defaultCreatePopper - const popperInstance = createPopper( - referenceElement, - popperElement, - popperOptions - ) - popperInstanceRef.current = popperInstance - return function () { - popperInstance.destroy() - popperInstanceRef.current = null - } - }, - [referenceElement, popperElement, options.createPopper] - ) - return { - state: popperInstanceRef.current ? popperInstanceRef.current.state : null, - styles: state.styles, - attributes: state.attributes, - update: popperInstanceRef.current ? popperInstanceRef.current.update : null, - forceUpdate: popperInstanceRef.current - ? popperInstanceRef.current.forceUpdate - : null - } -} - -export default usePopper diff --git a/components/hook/usePortal/demo/articles/ArticleCustom/useTooltip.js b/components/hook/usePortal/demo/articles/ArticleCustom/useTooltip.js deleted file mode 100644 index d8540acc8b..0000000000 --- a/components/hook/usePortal/demo/articles/ArticleCustom/useTooltip.js +++ /dev/null @@ -1,61 +0,0 @@ -import {useCallback, useState} from 'react' - -import cx from 'classnames' - -import usePortal from '../../../src/index.js' -import usePopper from './usePopper.js' - -const useTooltip = ({isOpen, ...config} = {}) => { - const [isVisible, setIsVisible] = useState(false) - const { - Portal, - onMouseEnter, - onMouseLeave, - portalRef, - open, - close, - triggerRef - } = usePortal({ - onMouseEnter: event => open(event), - onMouseLeave: event => close(event), - onOpen: () => setIsVisible(true), - onClose: () => setIsVisible(false), - isOpen: false, - ...config - }) - - const {styles, attributes} = usePopper( - triggerRef.current, - isVisible ? portalRef.current : null - ) - - const Tooltip = useCallback( - ({children, className, style = {}, ...props}) => { - return ( - - {children} - - ) - }, - [styles, attributes] - ) - - return [ - { - ref: triggerRef, - onMouseEnter, - onMouseLeave - }, - Tooltip - ] -} - -export default useTooltip diff --git a/components/hook/usePortal/demo/articles/ArticleStateless.js b/components/hook/usePortal/demo/articles/ArticleStateless.js index fc2f9bd679..d374af13c7 100644 --- a/components/hook/usePortal/demo/articles/ArticleStateless.js +++ b/components/hook/usePortal/demo/articles/ArticleStateless.js @@ -36,6 +36,9 @@ const ArticleStateless = ({className}) => {
) } +ArticleStateless.propTypes = { + className: PropTypes.string +} ArticleStateless.displayName = 'ArticleStateless' From 818fd845e6d01e7257586450b403dea87ad4beae Mon Sep 17 00:00:00 2001 From: andresin87 Date: Tue, 20 Sep 2022 11:31:51 +0200 Subject: [PATCH 18/31] chore(Root): wip --- components/atom/input/src/config.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/atom/input/src/config.js b/components/atom/input/src/config.js index 97ad8f508e..34915c6d8a 100644 --- a/components/atom/input/src/config.js +++ b/components/atom/input/src/config.js @@ -1,5 +1,7 @@ import cx from 'classnames' +import Input from './Input/index.js' + export const PREFIX = 'sui' export const CATEGORY = 'Atom' export const COMPONENT = 'Input' From 09b34fa12ebd20579c81dd8d6e5f78deb8b9c135 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Wed, 21 Sep 2022 12:41:59 +0200 Subject: [PATCH 19/31] chore(Root): wip --- .../input/src/Input/Wrappers/Addons/index.scss | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/components/atom/input/src/Input/Wrappers/Addons/index.scss b/components/atom/input/src/Input/Wrappers/Addons/index.scss index 84402747b1..aacf641e4e 100644 --- a/components/atom/input/src/Input/Wrappers/Addons/index.scss +++ b/components/atom/input/src/Input/Wrappers/Addons/index.scss @@ -38,4 +38,19 @@ $base-class-addon: '#{$base-class}--withAddon'; } } } + @each $state, $color in $states-atom-input { + &#{$base-class}--status-#{$state} { + #{$base-class}-item { + &#{$base-class-addon} { + border-color: $bdc-atom-input-addon; + &#{$base-class-addon}--right { + border-left-color: $color; + } + &#{$base-class-addon}--left { + border-right-color: $color; + } + } + } + } + } } From cdee08a74cc6361a3f0892e676ffa981fcf5b1dc Mon Sep 17 00:00:00 2001 From: andresin87 Date: Wed, 21 Sep 2022 13:00:50 +0200 Subject: [PATCH 20/31] feat(components/atom/input): refactor general --- components/atom/input/src/config.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/components/atom/input/src/config.js b/components/atom/input/src/config.js index 34915c6d8a..97ad8f508e 100644 --- a/components/atom/input/src/config.js +++ b/components/atom/input/src/config.js @@ -1,7 +1,5 @@ import cx from 'classnames' -import Input from './Input/index.js' - export const PREFIX = 'sui' export const CATEGORY = 'Atom' export const COMPONENT = 'Input' From 241503404986d1a0d930f496d0eee1518629b545 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Thu, 22 Sep 2022 11:46:49 +0200 Subject: [PATCH 21/31] feat(components/atom/input): minor input style mods --- components/atom/input/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/atom/input/package.json b/components/atom/input/package.json index ec78cd40f7..0d72129d2f 100644 --- a/components/atom/input/package.json +++ b/components/atom/input/package.json @@ -1,6 +1,6 @@ { "name": "@s-ui/react-atom-input", - "version": "5.22.0", + "version": "5.21.0-beta.0", "description": "", "main": "lib/index.js", "scripts": { From 8ac23e2fe391b786a7c652a4f29fb8d9bb9b5cdb Mon Sep 17 00:00:00 2001 From: andresin87 Date: Fri, 23 Sep 2022 12:54:34 +0200 Subject: [PATCH 22/31] feat(components/atom/input): mod styles --- components/atom/input/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/atom/input/package.json b/components/atom/input/package.json index 0d72129d2f..c1a80955d0 100644 --- a/components/atom/input/package.json +++ b/components/atom/input/package.json @@ -1,6 +1,6 @@ { "name": "@s-ui/react-atom-input", - "version": "5.21.0-beta.0", + "version": "5.21.0-beta.4", "description": "", "main": "lib/index.js", "scripts": { From 6d8834ef3de4d85ed8a29ebece571d4cd0aecb9a Mon Sep 17 00:00:00 2001 From: andresin87 Date: Fri, 23 Sep 2022 12:55:24 +0200 Subject: [PATCH 23/31] feat(components/atom/tag): add 2 sizes and fix styles --- components/atom/tag/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/atom/tag/package.json b/components/atom/tag/package.json index 22fd9ce780..ac4c7ba2c3 100644 --- a/components/atom/tag/package.json +++ b/components/atom/tag/package.json @@ -1,6 +1,6 @@ { "name": "@s-ui/react-atom-tag", - "version": "2.44.0", + "version": "2.43.0-beta.0", "description": "", "main": "lib/index.js", "scripts": { From 87e8b905a7ad70643673ebb570d8edbb693e7623 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Fri, 14 Oct 2022 13:15:24 +0200 Subject: [PATCH 24/31] fix(components/atom/input): input mask fully hooked --- components/atom/input/src/Mask/index.js | 45 ++++++----------------- components/atom/input/src/Mask/useMask.js | 43 ++++++++++++++++++++++ 2 files changed, 54 insertions(+), 34 deletions(-) create mode 100644 components/atom/input/src/Mask/useMask.js diff --git a/components/atom/input/src/Mask/index.js b/components/atom/input/src/Mask/index.js index e0381f462e..c79c26becf 100644 --- a/components/atom/input/src/Mask/index.js +++ b/components/atom/input/src/Mask/index.js @@ -1,47 +1,24 @@ -import {forwardRef, useEffect} from 'react' -import {useIMask} from 'react-imask' +import {forwardRef} from 'react' import PropTypes from 'prop-types' -import useMergeRefs from '@s-ui/react-hooks/lib/useMergeRefs' - import Input from '../Input/Component/index.js' -import {isFunction} from '../config.js' +import useMask from './useMask.js' const MaskInput = forwardRef( ( - { - name, - onChange, - onComplete, - mask, - value: propValue, - defaultValue, - ...props - }, + {name, onChange, onComplete, mask, value, defaultValue, ...props}, forwardedRef ) => { - const { - ref: refInput, - value: maskedValue = '', - setValue - } = useIMask( - {...mask}, - { - onAccept: (value, maskRef, event, ...args) => - isFunction(onChange) && onChange(event, {value, maskRef, ...args}), - onComplete: (value, maskRef, event, ...args) => - isFunction(onComplete) && onComplete(event, {value, maskRef, ...args}) - } - ) - useEffect(() => { - if (propValue !== maskedValue) { - setValue(propValue) - } - }, [propValue, setValue, maskedValue]) - - const ref = useMergeRefs(refInput, forwardedRef) + const {maskedValue, ref} = useMask({ + value, + defaultValue, + mask, + onChange, + onComplete, + forwardedRef + }) return } diff --git a/components/atom/input/src/Mask/useMask.js b/components/atom/input/src/Mask/useMask.js new file mode 100644 index 0000000000..d7d6327743 --- /dev/null +++ b/components/atom/input/src/Mask/useMask.js @@ -0,0 +1,43 @@ +import {useEffect} from 'react' + +import {useIMask} from 'react-imask' + +import useMergeRefs from '@s-ui/react-hooks/lib/useMergeRefs' +import useMountedState from '@s-ui/react-hooks/lib/useMountedState' + +import {isFunction} from '../config.js' + +const useMask = ({ + value: argValue, + defaultValue: argDefaultValue, + mask, + onChange, + onComplete, + forwardedRef +}) => { + const [value] = useMountedState(argValue, argDefaultValue) + const { + ref: refInput, + value: maskedValue = '', + setValue + } = useIMask( + {...mask}, + { + onAccept: (value, maskRef, event, ...args) => + isFunction(onChange) && onChange(event, {value, maskRef, ...args}), + onComplete: (value, maskRef, event, ...args) => + isFunction(onComplete) && onComplete(event, {value, maskRef, ...args}) + } + ) + useEffect(() => { + if (value !== maskedValue) { + setValue(value) + } + }, [argValue, setValue, maskedValue]) + + const ref = useMergeRefs(refInput, forwardedRef) + + return Object.assign([maskedValue, ref]) +} + +export default useMask From 4a313c82c28103212301bfec5222482791e2e047 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Wed, 26 Oct 2022 15:08:23 +0200 Subject: [PATCH 25/31] docs(Root): rebasing --- .../use-portal/demo/articles/ArticleCustom.js | 28 ---- .../demo/articles/ArticleDefault.js | 132 ------------------ .../demo/articles/ArticleCloseOnEvent.js | 2 +- .../demo/articles/ArticleCustom/usePopper.js | 0 .../demo/articles/ArticleCustom/useTooltip.js | 0 5 files changed, 1 insertion(+), 161 deletions(-) delete mode 100644 components/hook/use-portal/demo/articles/ArticleCustom.js delete mode 100644 components/hook/use-portal/demo/articles/ArticleDefault.js create mode 100644 components/hook/usePortal/demo/articles/ArticleCustom/usePopper.js create mode 100644 components/hook/usePortal/demo/articles/ArticleCustom/useTooltip.js diff --git a/components/hook/use-portal/demo/articles/ArticleCustom.js b/components/hook/use-portal/demo/articles/ArticleCustom.js deleted file mode 100644 index c1697c4608..0000000000 --- a/components/hook/use-portal/demo/articles/ArticleCustom.js +++ /dev/null @@ -1,28 +0,0 @@ -import PropTypes from 'prop-types' - -import {Article, Button, H2, Paragraph} from '@s-ui/documentation-library' - -import useTooltip from './ArticleCustom/useTooltip.js' - -const ArticleCustom = ({className}) => { - const [bind, Tooltip] = useTooltip() - return ( -
-

Custom

- - You can use the hook defining custom event handlers to extend its - functionalities to may other ways like creating tooltips. - - - - hello world - -
- ) -} - -ArticleCustom.propTypes = { - className: PropTypes.string -} - -export default ArticleCustom diff --git a/components/hook/use-portal/demo/articles/ArticleDefault.js b/components/hook/use-portal/demo/articles/ArticleDefault.js deleted file mode 100644 index a8f7e5f004..0000000000 --- a/components/hook/use-portal/demo/articles/ArticleDefault.js +++ /dev/null @@ -1,132 +0,0 @@ -import {useRef} from 'react' - -import PropTypes from 'prop-types' - -import { - Anchor, - Article, - Bold, - Box, - Button, - Code, - H2, - H3, - H4, - ListItem, - OrderedList, - Paragraph, - UnorderedList -} from '@s-ui/documentation-library' - -import usePortal from '../../src/index.js' - -const ArticleDefault = ({className}) => { - const {Portal, portalRef} = usePortal() - const articleRef = useRef() - return ( -
-

Default

- - The portal is default appended at the document body. It is default - opened unless you define its initial isOpen configuration - settings to false. - - - - -

Default Portal Result

- - This text is portaled at the end of document.body from the{' '} - articleRef.current.scrollIntoView()} - style={{ - border: 0, - padding: 0, - margin: 0, - backgroundColor: 'transparent' - }} - > - default demo - - ! - - - - - usePortal hook admits many different options as an{' '} - object argument to configure the portal: - - - - isOpen (boolean|true): sets the initial state visible or - not. - - - onOpen (func): opens the portal - - - onClose (func): closes the portal - - - onToggle (func): changes between open/close the portal - - - hasCloseOnOutsideClick (boolean|false): auto-close the - portal on outside click - - - hasCloseOnEsc (boolean|false): autoClose the portal on - 'Esc' press - - -

Result

- - usePortal hook result can be destructured using an array or - an object. - -

Array

- - const [Portal, open, close, isOpen, togglePortal, triggerRef, portalRef] - = usePortal() - -

Object

- - { - 'const {Portal, open, close, isOpen, togglePortal, triggerRef, portalRef} = usePortal()' - } - - - - Portal: The portal component - - - open: The action to open the portal - - - close: The action to close the portal - - - isOpen: The portal current state - - - togglePortal: The action to toggle the state - - - triggerRef: The trigger element ref - - - portalRef: The portal element ref - - -
- ) -} - -ArticleDefault.propTypes = { - className: PropTypes.string -} - -export default ArticleDefault diff --git a/components/hook/usePortal/demo/articles/ArticleCloseOnEvent.js b/components/hook/usePortal/demo/articles/ArticleCloseOnEvent.js index 85a06eb89c..14e5d3cbda 100644 --- a/components/hook/usePortal/demo/articles/ArticleCloseOnEvent.js +++ b/components/hook/usePortal/demo/articles/ArticleCloseOnEvent.js @@ -1,8 +1,8 @@ -import { import {useRef, useState} from 'react' import PropTypes from 'prop-types' +import { Article, Box, Cell, diff --git a/components/hook/usePortal/demo/articles/ArticleCustom/usePopper.js b/components/hook/usePortal/demo/articles/ArticleCustom/usePopper.js new file mode 100644 index 0000000000..e69de29bb2 diff --git a/components/hook/usePortal/demo/articles/ArticleCustom/useTooltip.js b/components/hook/usePortal/demo/articles/ArticleCustom/useTooltip.js new file mode 100644 index 0000000000..e69de29bb2 From 8eb784c7525521c1c09bb8d60695a3c05943e8c8 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Wed, 26 Oct 2022 15:15:27 +0200 Subject: [PATCH 26/31] chore(Root): refactor --- components/atom/input/src/Mask/index.js | 1 - components/atom/input/src/Mask/useMask.js | 3 +- components/atom/input/src/index.js | 96 ++++++++++---------- components/atom/tag/src/constants.js | 2 +- components/hook/usePortal/test/index.test.js | 3 +- 5 files changed, 52 insertions(+), 53 deletions(-) diff --git a/components/atom/input/src/Mask/index.js b/components/atom/input/src/Mask/index.js index c79c26becf..c621c4ba01 100644 --- a/components/atom/input/src/Mask/index.js +++ b/components/atom/input/src/Mask/index.js @@ -3,7 +3,6 @@ import {forwardRef} from 'react' import PropTypes from 'prop-types' import Input from '../Input/Component/index.js' - import useMask from './useMask.js' const MaskInput = forwardRef( diff --git a/components/atom/input/src/Mask/useMask.js b/components/atom/input/src/Mask/useMask.js index d7d6327743..75938689d7 100644 --- a/components/atom/input/src/Mask/useMask.js +++ b/components/atom/input/src/Mask/useMask.js @@ -1,5 +1,4 @@ import {useEffect} from 'react' - import {useIMask} from 'react-imask' import useMergeRefs from '@s-ui/react-hooks/lib/useMergeRefs' @@ -33,7 +32,7 @@ const useMask = ({ if (value !== maskedValue) { setValue(value) } - }, [argValue, setValue, maskedValue]) + }, [argValue, setValue, maskedValue, value]) const ref = useMergeRefs(refInput, forwardedRef) diff --git a/components/atom/input/src/index.js b/components/atom/input/src/index.js index 7b37df9d44..0e7cb44b9b 100644 --- a/components/atom/input/src/index.js +++ b/components/atom/input/src/index.js @@ -8,62 +8,62 @@ import { BASE, INPUT_SHAPES, INPUT_STATES, + isValidSize, SIZES, - TYPES, - isValidSize + TYPES } from './config.js' import {checkIfValidNumberInput} from './helper.js' const AtomInput = forwardRef( -( -{ - type, - shape, - charsSize, - size = SIZES.MEDIUM, - noBorder, - errorState, - state, - disabled, - readOnly, - ...props -}, -ref -) => { - return ( - + ( + { + type, + shape, + charsSize, + size = SIZES.MEDIUM, + noBorder, + errorState, + state, + disabled, + readOnly, + ...props + }, + ref + ) => { + return ( + - ) -} + ) + } ) AtomInput.propTypes = { diff --git a/components/atom/tag/src/constants.js b/components/atom/tag/src/constants.js index 325a796c8c..52840cb918 100644 --- a/components/atom/tag/src/constants.js +++ b/components/atom/tag/src/constants.js @@ -11,7 +11,7 @@ export const ACTIONABLE_ONLY_PROPS = [ export const STANDARD_ONLY_PROPS = ['closeIcon', 'onClose'] -export var SIZES = { +export const SIZES = { XLARGE: 'xlarge', LARGE: 'large', MEDIUM: 'medium', diff --git a/components/hook/usePortal/test/index.test.js b/components/hook/usePortal/test/index.test.js index 0373a773c8..a5eb5afbe6 100644 --- a/components/hook/usePortal/test/index.test.js +++ b/components/hook/usePortal/test/index.test.js @@ -10,9 +10,10 @@ import ReactDOM from 'react-dom' import {expect} from 'chai' import PropTypes from 'prop-types' - import sinon from 'sinon' + import {fireEvent, waitFor} from '@testing-library/react' + import json from '../package.json' import * as pkg from '../src/index.js' From a1d13126fe0c4cdc4cb91b4d8a10ff80408a7a62 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Wed, 26 Oct 2022 15:24:17 +0200 Subject: [PATCH 27/31] chore(Root): rebase --- .../demo/articles/ArticleCustom/usePopper.js | 136 ++++++++++++++++++ .../demo/articles/ArticleCustom/useTooltip.js | 61 ++++++++ .../demo/articles/ArticleStateless.js | 3 - 3 files changed, 197 insertions(+), 3 deletions(-) diff --git a/components/hook/usePortal/demo/articles/ArticleCustom/usePopper.js b/components/hook/usePortal/demo/articles/ArticleCustom/usePopper.js index e69de29bb2..bc02ae8511 100644 --- a/components/hook/usePortal/demo/articles/ArticleCustom/usePopper.js +++ b/components/hook/usePortal/demo/articles/ArticleCustom/usePopper.js @@ -0,0 +1,136 @@ +import {useMemo, useRef, useState} from 'react' +import isEqual from 'react-fast-compare' + +import {createPopper as defaultCreatePopper} from '@popperjs/core' + +import useIsomorphicLayoutEffect from '@s-ui/react-hooks/lib/useIsomorphicLayoutEffect' + +const EMPTY_MODIFIERS = [] + +const usePopper = function usePopper( + referenceElement, + popperElement, + options = {} +) { + const prevOptions = useRef(null) + const optionsWithDefaults = { + onFirstUpdate: options.onFirstUpdate, + placement: options.placement || 'bottom', + strategy: options.strategy || 'absolute', + modifiers: options.modifiers || EMPTY_MODIFIERS + } + + const [state, setState] = useState({ + styles: { + popper: { + position: optionsWithDefaults.strategy, + left: '0', + top: '0' + }, + arrow: { + position: 'absolute' + } + }, + attributes: {} + }) + + const updateStateModifier = useMemo(function () { + return { + name: 'updateState', + enabled: true, + phase: 'write', + fn: function fn({state}) { + const elements = Object.keys(state.elements) + setState({ + styles: Object.fromEntries( + elements.map(function (element) { + return [element, state.styles[element] || {}] + }) + ), + attributes: Object.fromEntries( + elements.map(function (element) { + return [element, state.attributes[element]] + }) + ) + }) + }, + requires: ['computeStyles'] + } + }, []) + + const popperOptions = useMemo( + function () { + const newOptions = { + onFirstUpdate: optionsWithDefaults.onFirstUpdate, + placement: optionsWithDefaults.placement, + strategy: optionsWithDefaults.strategy, + modifiers: [].concat(optionsWithDefaults.modifiers, [ + updateStateModifier, + { + name: 'applyStyles', + enabled: false + } + ]) + } + + if (isEqual(prevOptions.current, newOptions)) { + return prevOptions.current || newOptions + } else { + prevOptions.current = newOptions + return newOptions + } + }, + [ + optionsWithDefaults.onFirstUpdate, + optionsWithDefaults.placement, + optionsWithDefaults.strategy, + optionsWithDefaults.modifiers, + updateStateModifier + ] + ) + const popperInstanceRef = useRef() + + useIsomorphicLayoutEffect( + function () { + if (popperInstanceRef.current) { + popperInstanceRef.current.setOptions(popperOptions) + } + }, + [popperOptions] + ) + useIsomorphicLayoutEffect( + function () { + if ( + referenceElement == null || + popperElement == null || + popperInstanceRef.current + ) { + return + } + + const createPopper = options.createPopper || defaultCreatePopper + const popperInstance = createPopper( + referenceElement, + popperElement, + popperOptions + ) + popperInstanceRef.current = popperInstance + return function () { + popperInstance.destroy() + popperInstanceRef.current = null + } + }, + [referenceElement, popperElement, options.createPopper] + ) + return { + state: popperInstanceRef.current ? popperInstanceRef.current.state : null, + styles: state.styles, + attributes: state.attributes, + update: popperInstanceRef.current ? popperInstanceRef.current.update : null, + forceUpdate: popperInstanceRef.current + ? popperInstanceRef.current.forceUpdate + : null + } +} + +export default usePopper diff --git a/components/hook/usePortal/demo/articles/ArticleCustom/useTooltip.js b/components/hook/usePortal/demo/articles/ArticleCustom/useTooltip.js index e69de29bb2..d8540acc8b 100644 --- a/components/hook/usePortal/demo/articles/ArticleCustom/useTooltip.js +++ b/components/hook/usePortal/demo/articles/ArticleCustom/useTooltip.js @@ -0,0 +1,61 @@ +import {useCallback, useState} from 'react' + +import cx from 'classnames' + +import usePortal from '../../../src/index.js' +import usePopper from './usePopper.js' + +const useTooltip = ({isOpen, ...config} = {}) => { + const [isVisible, setIsVisible] = useState(false) + const { + Portal, + onMouseEnter, + onMouseLeave, + portalRef, + open, + close, + triggerRef + } = usePortal({ + onMouseEnter: event => open(event), + onMouseLeave: event => close(event), + onOpen: () => setIsVisible(true), + onClose: () => setIsVisible(false), + isOpen: false, + ...config + }) + + const {styles, attributes} = usePopper( + triggerRef.current, + isVisible ? portalRef.current : null + ) + + const Tooltip = useCallback( + ({children, className, style = {}, ...props}) => { + return ( + + {children} + + ) + }, + [styles, attributes] + ) + + return [ + { + ref: triggerRef, + onMouseEnter, + onMouseLeave + }, + Tooltip + ] +} + +export default useTooltip diff --git a/components/hook/usePortal/demo/articles/ArticleStateless.js b/components/hook/usePortal/demo/articles/ArticleStateless.js index d374af13c7..fc2f9bd679 100644 --- a/components/hook/usePortal/demo/articles/ArticleStateless.js +++ b/components/hook/usePortal/demo/articles/ArticleStateless.js @@ -36,9 +36,6 @@ const ArticleStateless = ({className}) => {
) } -ArticleStateless.propTypes = { - className: PropTypes.string -} ArticleStateless.displayName = 'ArticleStateless' From 798242fbbda96f81ca48db0b58bb9238e27e06e5 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Wed, 26 Oct 2022 15:39:49 +0200 Subject: [PATCH 28/31] chore(Root): uopdate component build:js script --- components/atom/actionButton/package.json | 2 +- components/atom/backToTop/package.json | 2 +- components/atom/badge/package.json | 2 +- components/atom/button/package.json | 2 +- components/atom/card/package.json | 2 +- components/atom/checkbox/package.json | 2 +- components/atom/helpText/package.json | 2 +- components/atom/icon/package.json | 2 +- components/atom/image/package.json | 2 +- components/atom/input/package.json | 2 +- components/atom/label/package.json | 2 +- components/atom/panel/package.json | 2 +- components/atom/pinInput/package.json | 2 +- components/atom/popover/package.json | 2 +- components/atom/progressBar/package.json | 2 +- components/atom/radioButton/package.json | 2 +- components/atom/skeleton/package.json | 2 +- components/atom/slider/package.json | 2 +- components/atom/spinner/package.json | 2 +- components/atom/switch/package.json | 2 +- components/atom/table/package.json | 2 +- components/atom/tag/package.json | 2 +- components/atom/textarea/package.json | 2 +- components/atom/toast/package.json | 2 +- components/atom/tooltip/package.json | 2 +- components/atom/upload/package.json | 2 +- components/atom/validationText/package.json | 2 +- components/behavior/sticky/package.json | 2 +- components/hook/usePortal/package.json | 2 +- components/layout/grid/package.json | 2 +- components/molecule/accordion/package.json | 2 +- components/molecule/autosuggest/package.json | 2 +- components/molecule/autosuggestField/package.json | 2 +- components/molecule/avatar/package.json | 2 +- components/molecule/badgeCounter/package.json | 2 +- components/molecule/breadcrumb/package.json | 2 +- components/molecule/buttonGroup/package.json | 2 +- components/molecule/buttonGroupField/package.json | 2 +- components/molecule/checkboxField/package.json | 2 +- components/molecule/collapsible/package.json | 2 +- components/molecule/dataCounter/package.json | 2 +- components/molecule/drawer/package.json | 2 +- components/molecule/dropdownList/package.json | 2 +- components/molecule/dropdownOption/package.json | 2 +- components/molecule/field/package.json | 2 +- components/molecule/imageEditor/package.json | 2 +- components/molecule/inputField/package.json | 2 +- components/molecule/inputTags/package.json | 2 +- components/molecule/modal/package.json | 2 +- components/molecule/notification/package.json | 2 +- components/molecule/pagination/package.json | 2 +- components/molecule/photoUploader/package.json | 2 +- components/molecule/progressSteps/package.json | 2 +- components/molecule/quickAction/package.json | 2 +- components/molecule/radioButtonField/package.json | 2 +- components/molecule/radioButtonGroup/package.json | 2 +- components/molecule/rating/package.json | 2 +- components/molecule/select/package.json | 2 +- components/molecule/selectField/package.json | 2 +- components/molecule/selectPopover/package.json | 2 +- components/molecule/stepper/package.json | 2 +- components/molecule/tabs/package.json | 2 +- components/molecule/textareaField/package.json | 2 +- components/molecule/thumbnail/package.json | 2 +- components/molecule/validationCode/package.json | 2 +- components/organism/nestedCheckboxes/package.json | 2 +- components/primitive/injector/package.json | 2 +- 67 files changed, 67 insertions(+), 67 deletions(-) diff --git a/components/atom/actionButton/package.json b/components/atom/actionButton/package.json index 4b7019a90e..113a5a97e2 100644 --- a/components/atom/actionButton/package.json +++ b/components/atom/actionButton/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/atom/backToTop/package.json b/components/atom/backToTop/package.json index d6538d23d4..f2111fe2a1 100644 --- a/components/atom/backToTop/package.json +++ b/components/atom/backToTop/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/atom/badge/package.json b/components/atom/badge/package.json index 13b97c42ce..354625ada3 100644 --- a/components/atom/badge/package.json +++ b/components/atom/badge/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/atom/button/package.json b/components/atom/button/package.json index 55f03b5290..c0a1c6fc92 100644 --- a/components/atom/button/package.json +++ b/components/atom/button/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/atom/card/package.json b/components/atom/card/package.json index f24da9b09a..e38ac36e78 100644 --- a/components/atom/card/package.json +++ b/components/atom/card/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/atom/checkbox/package.json b/components/atom/checkbox/package.json index 4ac0833895..9fc6a3ed70 100644 --- a/components/atom/checkbox/package.json +++ b/components/atom/checkbox/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/atom/helpText/package.json b/components/atom/helpText/package.json index 2185b3da0a..f5298ad760 100644 --- a/components/atom/helpText/package.json +++ b/components/atom/helpText/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/atom/icon/package.json b/components/atom/icon/package.json index 2deec47858..1727746dd6 100644 --- a/components/atom/icon/package.json +++ b/components/atom/icon/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/atom/image/package.json b/components/atom/image/package.json index 0d64e5be3b..e8357ffab5 100644 --- a/components/atom/image/package.json +++ b/components/atom/image/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/atom/input/package.json b/components/atom/input/package.json index c1a80955d0..c2523f2536 100644 --- a/components/atom/input/package.json +++ b/components/atom/input/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/atom/label/package.json b/components/atom/label/package.json index d2ac778fe7..7ba9a0184b 100644 --- a/components/atom/label/package.json +++ b/components/atom/label/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/atom/panel/package.json b/components/atom/panel/package.json index f08ab19f19..eec166ce5f 100644 --- a/components/atom/panel/package.json +++ b/components/atom/panel/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/atom/pinInput/package.json b/components/atom/pinInput/package.json index 107a9be070..4266223acc 100644 --- a/components/atom/pinInput/package.json +++ b/components/atom/pinInput/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "peerDependencies": { diff --git a/components/atom/popover/package.json b/components/atom/popover/package.json index b7d639afc3..8195ddcbd7 100644 --- a/components/atom/popover/package.json +++ b/components/atom/popover/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/atom/progressBar/package.json b/components/atom/progressBar/package.json index 93d78fe5df..b827e26f16 100644 --- a/components/atom/progressBar/package.json +++ b/components/atom/progressBar/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/atom/radioButton/package.json b/components/atom/radioButton/package.json index 1adf827dc3..656a8041a4 100644 --- a/components/atom/radioButton/package.json +++ b/components/atom/radioButton/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/atom/skeleton/package.json b/components/atom/skeleton/package.json index 7ce157fec0..4b9a5fe6b6 100644 --- a/components/atom/skeleton/package.json +++ b/components/atom/skeleton/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/atom/slider/package.json b/components/atom/slider/package.json index d4a53b08ef..e4a2de4c4f 100644 --- a/components/atom/slider/package.json +++ b/components/atom/slider/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/atom/spinner/package.json b/components/atom/spinner/package.json index 54ffca2ff5..34e8750aef 100644 --- a/components/atom/spinner/package.json +++ b/components/atom/spinner/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/atom/switch/package.json b/components/atom/switch/package.json index 40fe1944ea..094cfff641 100644 --- a/components/atom/switch/package.json +++ b/components/atom/switch/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/atom/table/package.json b/components/atom/table/package.json index fc033aa4ea..0ecf5e5916 100644 --- a/components/atom/table/package.json +++ b/components/atom/table/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/atom/tag/package.json b/components/atom/tag/package.json index ac4c7ba2c3..d119306505 100644 --- a/components/atom/tag/package.json +++ b/components/atom/tag/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/atom/textarea/package.json b/components/atom/textarea/package.json index b26903a7ff..e41e304f45 100644 --- a/components/atom/textarea/package.json +++ b/components/atom/textarea/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/atom/toast/package.json b/components/atom/toast/package.json index cc0ab32046..e38482a003 100644 --- a/components/atom/toast/package.json +++ b/components/atom/toast/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/atom/tooltip/package.json b/components/atom/tooltip/package.json index 012eca7040..08c54392a5 100644 --- a/components/atom/tooltip/package.json +++ b/components/atom/tooltip/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/atom/upload/package.json b/components/atom/upload/package.json index 95a208d30a..ae6de42b21 100644 --- a/components/atom/upload/package.json +++ b/components/atom/upload/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/atom/validationText/package.json b/components/atom/validationText/package.json index 706a87e9dd..bfb5787ae4 100644 --- a/components/atom/validationText/package.json +++ b/components/atom/validationText/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/behavior/sticky/package.json b/components/behavior/sticky/package.json index ba7c136438..eb50167692 100644 --- a/components/behavior/sticky/package.json +++ b/components/behavior/sticky/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/hook/usePortal/package.json b/components/hook/usePortal/package.json index 5d8276f295..f6b2d90786 100644 --- a/components/hook/usePortal/package.json +++ b/components/hook/usePortal/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/layout/grid/package.json b/components/layout/grid/package.json index 9ec365d7da..15791aa576 100644 --- a/components/layout/grid/package.json +++ b/components/layout/grid/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/accordion/package.json b/components/molecule/accordion/package.json index ab0aff5b7b..76fee0e4c5 100644 --- a/components/molecule/accordion/package.json +++ b/components/molecule/accordion/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/autosuggest/package.json b/components/molecule/autosuggest/package.json index e74bba9fd6..ed6e20e8f0 100644 --- a/components/molecule/autosuggest/package.json +++ b/components/molecule/autosuggest/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/autosuggestField/package.json b/components/molecule/autosuggestField/package.json index 8fa02421af..db6aaf52d9 100644 --- a/components/molecule/autosuggestField/package.json +++ b/components/molecule/autosuggestField/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/avatar/package.json b/components/molecule/avatar/package.json index efc3ab126a..e03d1b6957 100644 --- a/components/molecule/avatar/package.json +++ b/components/molecule/avatar/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/badgeCounter/package.json b/components/molecule/badgeCounter/package.json index ebb96c8b86..b1cee0df47 100644 --- a/components/molecule/badgeCounter/package.json +++ b/components/molecule/badgeCounter/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/breadcrumb/package.json b/components/molecule/breadcrumb/package.json index 8e7eb41577..c5a15a3f55 100644 --- a/components/molecule/breadcrumb/package.json +++ b/components/molecule/breadcrumb/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "keywords": [], diff --git a/components/molecule/buttonGroup/package.json b/components/molecule/buttonGroup/package.json index 2aa80ea4bd..b9ed596b5a 100644 --- a/components/molecule/buttonGroup/package.json +++ b/components/molecule/buttonGroup/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/buttonGroupField/package.json b/components/molecule/buttonGroupField/package.json index 392f478c1a..fd928dcc6d 100644 --- a/components/molecule/buttonGroupField/package.json +++ b/components/molecule/buttonGroupField/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/checkboxField/package.json b/components/molecule/checkboxField/package.json index 190008c691..50ed6d5f6c 100644 --- a/components/molecule/checkboxField/package.json +++ b/components/molecule/checkboxField/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/collapsible/package.json b/components/molecule/collapsible/package.json index 4f4fc3b8d5..4130d4aaf8 100755 --- a/components/molecule/collapsible/package.json +++ b/components/molecule/collapsible/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/dataCounter/package.json b/components/molecule/dataCounter/package.json index 87abbe2621..e557ea7890 100644 --- a/components/molecule/dataCounter/package.json +++ b/components/molecule/dataCounter/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/drawer/package.json b/components/molecule/drawer/package.json index e4862ba94a..7346cefce3 100644 --- a/components/molecule/drawer/package.json +++ b/components/molecule/drawer/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "peerDependencies": { diff --git a/components/molecule/dropdownList/package.json b/components/molecule/dropdownList/package.json index 4a7f5e8273..54a9e05ebe 100644 --- a/components/molecule/dropdownList/package.json +++ b/components/molecule/dropdownList/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/dropdownOption/package.json b/components/molecule/dropdownOption/package.json index 3947e7cc52..e1a871f3e5 100644 --- a/components/molecule/dropdownOption/package.json +++ b/components/molecule/dropdownOption/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/field/package.json b/components/molecule/field/package.json index 202c8213c0..334ec8d81d 100644 --- a/components/molecule/field/package.json +++ b/components/molecule/field/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/imageEditor/package.json b/components/molecule/imageEditor/package.json index 4ef46f01ba..a9bccd33c7 100644 --- a/components/molecule/imageEditor/package.json +++ b/components/molecule/imageEditor/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "peerDependencies": { diff --git a/components/molecule/inputField/package.json b/components/molecule/inputField/package.json index 64c0db14df..0d44586378 100644 --- a/components/molecule/inputField/package.json +++ b/components/molecule/inputField/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/inputTags/package.json b/components/molecule/inputTags/package.json index c49bbca278..ec2e4fac6d 100644 --- a/components/molecule/inputTags/package.json +++ b/components/molecule/inputTags/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/modal/package.json b/components/molecule/modal/package.json index 9b5c0e7592..81c3a87a13 100644 --- a/components/molecule/modal/package.json +++ b/components/molecule/modal/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/notification/package.json b/components/molecule/notification/package.json index 472d434e86..2e91f36d4d 100644 --- a/components/molecule/notification/package.json +++ b/components/molecule/notification/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/pagination/package.json b/components/molecule/pagination/package.json index 17a2ced139..90b8bc6097 100644 --- a/components/molecule/pagination/package.json +++ b/components/molecule/pagination/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/photoUploader/package.json b/components/molecule/photoUploader/package.json index ae24a27c5d..852faf2f99 100644 --- a/components/molecule/photoUploader/package.json +++ b/components/molecule/photoUploader/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/progressSteps/package.json b/components/molecule/progressSteps/package.json index 740b870ca6..1fdffbd0c4 100644 --- a/components/molecule/progressSteps/package.json +++ b/components/molecule/progressSteps/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/quickAction/package.json b/components/molecule/quickAction/package.json index 3a5f7d411a..3d31c06c79 100644 --- a/components/molecule/quickAction/package.json +++ b/components/molecule/quickAction/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/radioButtonField/package.json b/components/molecule/radioButtonField/package.json index 15b7203ba9..4a7cb3a7d5 100644 --- a/components/molecule/radioButtonField/package.json +++ b/components/molecule/radioButtonField/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/radioButtonGroup/package.json b/components/molecule/radioButtonGroup/package.json index a1da9598a3..2e53887c0c 100644 --- a/components/molecule/radioButtonGroup/package.json +++ b/components/molecule/radioButtonGroup/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/rating/package.json b/components/molecule/rating/package.json index 15a9f5ed3e..2cd551cfac 100644 --- a/components/molecule/rating/package.json +++ b/components/molecule/rating/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/select/package.json b/components/molecule/select/package.json index 9a2b056e30..1c66ef581f 100644 --- a/components/molecule/select/package.json +++ b/components/molecule/select/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/selectField/package.json b/components/molecule/selectField/package.json index 4c6637943b..9e32024731 100644 --- a/components/molecule/selectField/package.json +++ b/components/molecule/selectField/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/selectPopover/package.json b/components/molecule/selectPopover/package.json index 02fcdac28f..dfee538bf6 100644 --- a/components/molecule/selectPopover/package.json +++ b/components/molecule/selectPopover/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/stepper/package.json b/components/molecule/stepper/package.json index fd7512d5f3..444ad4df60 100644 --- a/components/molecule/stepper/package.json +++ b/components/molecule/stepper/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "peerDependencies": { diff --git a/components/molecule/tabs/package.json b/components/molecule/tabs/package.json index 1eb73a36c8..1ed31bc85a 100644 --- a/components/molecule/tabs/package.json +++ b/components/molecule/tabs/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/textareaField/package.json b/components/molecule/textareaField/package.json index aaf7582966..058f1fbdff 100644 --- a/components/molecule/textareaField/package.json +++ b/components/molecule/textareaField/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/thumbnail/package.json b/components/molecule/thumbnail/package.json index 202bccbc47..66fdc3e495 100644 --- a/components/molecule/thumbnail/package.json +++ b/components/molecule/thumbnail/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/validationCode/package.json b/components/molecule/validationCode/package.json index 81fd6847c5..6db4263e36 100644 --- a/components/molecule/validationCode/package.json +++ b/components/molecule/validationCode/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "peerDependencies": { diff --git a/components/organism/nestedCheckboxes/package.json b/components/organism/nestedCheckboxes/package.json index 71c333ad26..3fe0b56b4e 100644 --- a/components/organism/nestedCheckboxes/package.json +++ b/components/organism/nestedCheckboxes/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/primitive/injector/package.json b/components/primitive/injector/package.json index 7ddbca2ee7..242007a18a 100644 --- a/components/primitive/injector/package.json +++ b/components/primitive/injector/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "npm run build:js && npm run build:styles", - "build:js": "babel --presets sui ./src --out-dir ./lib", + "build:js": "npx @s-ui/js-compiler", "build:styles": "cpx './src/**/*.scss' ./lib" }, "peerDependencies": { From eb0b50afeef30a6725a0ca93b635bbe489f801c3 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Wed, 26 Oct 2022 15:44:02 +0200 Subject: [PATCH 29/31] Revert "chore(Root): uopdate component build:js script" This reverts commit 798242fbbda96f81ca48db0b58bb9238e27e06e5. --- components/atom/actionButton/package.json | 2 +- components/atom/backToTop/package.json | 2 +- components/atom/badge/package.json | 2 +- components/atom/button/package.json | 2 +- components/atom/card/package.json | 2 +- components/atom/checkbox/package.json | 2 +- components/atom/helpText/package.json | 2 +- components/atom/icon/package.json | 2 +- components/atom/image/package.json | 2 +- components/atom/input/package.json | 2 +- components/atom/label/package.json | 2 +- components/atom/panel/package.json | 2 +- components/atom/pinInput/package.json | 2 +- components/atom/popover/package.json | 2 +- components/atom/progressBar/package.json | 2 +- components/atom/radioButton/package.json | 2 +- components/atom/skeleton/package.json | 2 +- components/atom/slider/package.json | 2 +- components/atom/spinner/package.json | 2 +- components/atom/switch/package.json | 2 +- components/atom/table/package.json | 2 +- components/atom/tag/package.json | 2 +- components/atom/textarea/package.json | 2 +- components/atom/toast/package.json | 2 +- components/atom/tooltip/package.json | 2 +- components/atom/upload/package.json | 2 +- components/atom/validationText/package.json | 2 +- components/behavior/sticky/package.json | 2 +- components/hook/usePortal/package.json | 2 +- components/layout/grid/package.json | 2 +- components/molecule/accordion/package.json | 2 +- components/molecule/autosuggest/package.json | 2 +- components/molecule/autosuggestField/package.json | 2 +- components/molecule/avatar/package.json | 2 +- components/molecule/badgeCounter/package.json | 2 +- components/molecule/breadcrumb/package.json | 2 +- components/molecule/buttonGroup/package.json | 2 +- components/molecule/buttonGroupField/package.json | 2 +- components/molecule/checkboxField/package.json | 2 +- components/molecule/collapsible/package.json | 2 +- components/molecule/dataCounter/package.json | 2 +- components/molecule/drawer/package.json | 2 +- components/molecule/dropdownList/package.json | 2 +- components/molecule/dropdownOption/package.json | 2 +- components/molecule/field/package.json | 2 +- components/molecule/imageEditor/package.json | 2 +- components/molecule/inputField/package.json | 2 +- components/molecule/inputTags/package.json | 2 +- components/molecule/modal/package.json | 2 +- components/molecule/notification/package.json | 2 +- components/molecule/pagination/package.json | 2 +- components/molecule/photoUploader/package.json | 2 +- components/molecule/progressSteps/package.json | 2 +- components/molecule/quickAction/package.json | 2 +- components/molecule/radioButtonField/package.json | 2 +- components/molecule/radioButtonGroup/package.json | 2 +- components/molecule/rating/package.json | 2 +- components/molecule/select/package.json | 2 +- components/molecule/selectField/package.json | 2 +- components/molecule/selectPopover/package.json | 2 +- components/molecule/stepper/package.json | 2 +- components/molecule/tabs/package.json | 2 +- components/molecule/textareaField/package.json | 2 +- components/molecule/thumbnail/package.json | 2 +- components/molecule/validationCode/package.json | 2 +- components/organism/nestedCheckboxes/package.json | 2 +- components/primitive/injector/package.json | 2 +- 67 files changed, 67 insertions(+), 67 deletions(-) diff --git a/components/atom/actionButton/package.json b/components/atom/actionButton/package.json index 113a5a97e2..4b7019a90e 100644 --- a/components/atom/actionButton/package.json +++ b/components/atom/actionButton/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/atom/backToTop/package.json b/components/atom/backToTop/package.json index f2111fe2a1..d6538d23d4 100644 --- a/components/atom/backToTop/package.json +++ b/components/atom/backToTop/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/atom/badge/package.json b/components/atom/badge/package.json index 354625ada3..13b97c42ce 100644 --- a/components/atom/badge/package.json +++ b/components/atom/badge/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/atom/button/package.json b/components/atom/button/package.json index c0a1c6fc92..55f03b5290 100644 --- a/components/atom/button/package.json +++ b/components/atom/button/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/atom/card/package.json b/components/atom/card/package.json index e38ac36e78..f24da9b09a 100644 --- a/components/atom/card/package.json +++ b/components/atom/card/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/atom/checkbox/package.json b/components/atom/checkbox/package.json index 9fc6a3ed70..4ac0833895 100644 --- a/components/atom/checkbox/package.json +++ b/components/atom/checkbox/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/atom/helpText/package.json b/components/atom/helpText/package.json index f5298ad760..2185b3da0a 100644 --- a/components/atom/helpText/package.json +++ b/components/atom/helpText/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/atom/icon/package.json b/components/atom/icon/package.json index 1727746dd6..2deec47858 100644 --- a/components/atom/icon/package.json +++ b/components/atom/icon/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/atom/image/package.json b/components/atom/image/package.json index e8357ffab5..0d64e5be3b 100644 --- a/components/atom/image/package.json +++ b/components/atom/image/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/atom/input/package.json b/components/atom/input/package.json index c2523f2536..c1a80955d0 100644 --- a/components/atom/input/package.json +++ b/components/atom/input/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/atom/label/package.json b/components/atom/label/package.json index 7ba9a0184b..d2ac778fe7 100644 --- a/components/atom/label/package.json +++ b/components/atom/label/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/atom/panel/package.json b/components/atom/panel/package.json index eec166ce5f..f08ab19f19 100644 --- a/components/atom/panel/package.json +++ b/components/atom/panel/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/atom/pinInput/package.json b/components/atom/pinInput/package.json index 4266223acc..107a9be070 100644 --- a/components/atom/pinInput/package.json +++ b/components/atom/pinInput/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "peerDependencies": { diff --git a/components/atom/popover/package.json b/components/atom/popover/package.json index 8195ddcbd7..b7d639afc3 100644 --- a/components/atom/popover/package.json +++ b/components/atom/popover/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/atom/progressBar/package.json b/components/atom/progressBar/package.json index b827e26f16..93d78fe5df 100644 --- a/components/atom/progressBar/package.json +++ b/components/atom/progressBar/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/atom/radioButton/package.json b/components/atom/radioButton/package.json index 656a8041a4..1adf827dc3 100644 --- a/components/atom/radioButton/package.json +++ b/components/atom/radioButton/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/atom/skeleton/package.json b/components/atom/skeleton/package.json index 4b9a5fe6b6..7ce157fec0 100644 --- a/components/atom/skeleton/package.json +++ b/components/atom/skeleton/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/atom/slider/package.json b/components/atom/slider/package.json index e4a2de4c4f..d4a53b08ef 100644 --- a/components/atom/slider/package.json +++ b/components/atom/slider/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/atom/spinner/package.json b/components/atom/spinner/package.json index 34e8750aef..54ffca2ff5 100644 --- a/components/atom/spinner/package.json +++ b/components/atom/spinner/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/atom/switch/package.json b/components/atom/switch/package.json index 094cfff641..40fe1944ea 100644 --- a/components/atom/switch/package.json +++ b/components/atom/switch/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/atom/table/package.json b/components/atom/table/package.json index 0ecf5e5916..fc033aa4ea 100644 --- a/components/atom/table/package.json +++ b/components/atom/table/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/atom/tag/package.json b/components/atom/tag/package.json index d119306505..ac4c7ba2c3 100644 --- a/components/atom/tag/package.json +++ b/components/atom/tag/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/atom/textarea/package.json b/components/atom/textarea/package.json index e41e304f45..b26903a7ff 100644 --- a/components/atom/textarea/package.json +++ b/components/atom/textarea/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/atom/toast/package.json b/components/atom/toast/package.json index e38482a003..cc0ab32046 100644 --- a/components/atom/toast/package.json +++ b/components/atom/toast/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/atom/tooltip/package.json b/components/atom/tooltip/package.json index 08c54392a5..012eca7040 100644 --- a/components/atom/tooltip/package.json +++ b/components/atom/tooltip/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/atom/upload/package.json b/components/atom/upload/package.json index ae6de42b21..95a208d30a 100644 --- a/components/atom/upload/package.json +++ b/components/atom/upload/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/atom/validationText/package.json b/components/atom/validationText/package.json index bfb5787ae4..706a87e9dd 100644 --- a/components/atom/validationText/package.json +++ b/components/atom/validationText/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/behavior/sticky/package.json b/components/behavior/sticky/package.json index eb50167692..ba7c136438 100644 --- a/components/behavior/sticky/package.json +++ b/components/behavior/sticky/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/hook/usePortal/package.json b/components/hook/usePortal/package.json index f6b2d90786..5d8276f295 100644 --- a/components/hook/usePortal/package.json +++ b/components/hook/usePortal/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/layout/grid/package.json b/components/layout/grid/package.json index 15791aa576..9ec365d7da 100644 --- a/components/layout/grid/package.json +++ b/components/layout/grid/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/accordion/package.json b/components/molecule/accordion/package.json index 76fee0e4c5..ab0aff5b7b 100644 --- a/components/molecule/accordion/package.json +++ b/components/molecule/accordion/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/autosuggest/package.json b/components/molecule/autosuggest/package.json index ed6e20e8f0..e74bba9fd6 100644 --- a/components/molecule/autosuggest/package.json +++ b/components/molecule/autosuggest/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/autosuggestField/package.json b/components/molecule/autosuggestField/package.json index db6aaf52d9..8fa02421af 100644 --- a/components/molecule/autosuggestField/package.json +++ b/components/molecule/autosuggestField/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/avatar/package.json b/components/molecule/avatar/package.json index e03d1b6957..efc3ab126a 100644 --- a/components/molecule/avatar/package.json +++ b/components/molecule/avatar/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/badgeCounter/package.json b/components/molecule/badgeCounter/package.json index b1cee0df47..ebb96c8b86 100644 --- a/components/molecule/badgeCounter/package.json +++ b/components/molecule/badgeCounter/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/breadcrumb/package.json b/components/molecule/breadcrumb/package.json index c5a15a3f55..8e7eb41577 100644 --- a/components/molecule/breadcrumb/package.json +++ b/components/molecule/breadcrumb/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "keywords": [], diff --git a/components/molecule/buttonGroup/package.json b/components/molecule/buttonGroup/package.json index b9ed596b5a..2aa80ea4bd 100644 --- a/components/molecule/buttonGroup/package.json +++ b/components/molecule/buttonGroup/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/buttonGroupField/package.json b/components/molecule/buttonGroupField/package.json index fd928dcc6d..392f478c1a 100644 --- a/components/molecule/buttonGroupField/package.json +++ b/components/molecule/buttonGroupField/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/checkboxField/package.json b/components/molecule/checkboxField/package.json index 50ed6d5f6c..190008c691 100644 --- a/components/molecule/checkboxField/package.json +++ b/components/molecule/checkboxField/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/collapsible/package.json b/components/molecule/collapsible/package.json index 4130d4aaf8..4f4fc3b8d5 100755 --- a/components/molecule/collapsible/package.json +++ b/components/molecule/collapsible/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/dataCounter/package.json b/components/molecule/dataCounter/package.json index e557ea7890..87abbe2621 100644 --- a/components/molecule/dataCounter/package.json +++ b/components/molecule/dataCounter/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/drawer/package.json b/components/molecule/drawer/package.json index 7346cefce3..e4862ba94a 100644 --- a/components/molecule/drawer/package.json +++ b/components/molecule/drawer/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "peerDependencies": { diff --git a/components/molecule/dropdownList/package.json b/components/molecule/dropdownList/package.json index 54a9e05ebe..4a7f5e8273 100644 --- a/components/molecule/dropdownList/package.json +++ b/components/molecule/dropdownList/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/dropdownOption/package.json b/components/molecule/dropdownOption/package.json index e1a871f3e5..3947e7cc52 100644 --- a/components/molecule/dropdownOption/package.json +++ b/components/molecule/dropdownOption/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/field/package.json b/components/molecule/field/package.json index 334ec8d81d..202c8213c0 100644 --- a/components/molecule/field/package.json +++ b/components/molecule/field/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/imageEditor/package.json b/components/molecule/imageEditor/package.json index a9bccd33c7..4ef46f01ba 100644 --- a/components/molecule/imageEditor/package.json +++ b/components/molecule/imageEditor/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "peerDependencies": { diff --git a/components/molecule/inputField/package.json b/components/molecule/inputField/package.json index 0d44586378..64c0db14df 100644 --- a/components/molecule/inputField/package.json +++ b/components/molecule/inputField/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/inputTags/package.json b/components/molecule/inputTags/package.json index ec2e4fac6d..c49bbca278 100644 --- a/components/molecule/inputTags/package.json +++ b/components/molecule/inputTags/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/modal/package.json b/components/molecule/modal/package.json index 81c3a87a13..9b5c0e7592 100644 --- a/components/molecule/modal/package.json +++ b/components/molecule/modal/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/notification/package.json b/components/molecule/notification/package.json index 2e91f36d4d..472d434e86 100644 --- a/components/molecule/notification/package.json +++ b/components/molecule/notification/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/pagination/package.json b/components/molecule/pagination/package.json index 90b8bc6097..17a2ced139 100644 --- a/components/molecule/pagination/package.json +++ b/components/molecule/pagination/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/photoUploader/package.json b/components/molecule/photoUploader/package.json index 852faf2f99..ae24a27c5d 100644 --- a/components/molecule/photoUploader/package.json +++ b/components/molecule/photoUploader/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/progressSteps/package.json b/components/molecule/progressSteps/package.json index 1fdffbd0c4..740b870ca6 100644 --- a/components/molecule/progressSteps/package.json +++ b/components/molecule/progressSteps/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/quickAction/package.json b/components/molecule/quickAction/package.json index 3d31c06c79..3a5f7d411a 100644 --- a/components/molecule/quickAction/package.json +++ b/components/molecule/quickAction/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/radioButtonField/package.json b/components/molecule/radioButtonField/package.json index 4a7cb3a7d5..15b7203ba9 100644 --- a/components/molecule/radioButtonField/package.json +++ b/components/molecule/radioButtonField/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/radioButtonGroup/package.json b/components/molecule/radioButtonGroup/package.json index 2e53887c0c..a1da9598a3 100644 --- a/components/molecule/radioButtonGroup/package.json +++ b/components/molecule/radioButtonGroup/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/rating/package.json b/components/molecule/rating/package.json index 2cd551cfac..15a9f5ed3e 100644 --- a/components/molecule/rating/package.json +++ b/components/molecule/rating/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/select/package.json b/components/molecule/select/package.json index 1c66ef581f..9a2b056e30 100644 --- a/components/molecule/select/package.json +++ b/components/molecule/select/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/selectField/package.json b/components/molecule/selectField/package.json index 9e32024731..4c6637943b 100644 --- a/components/molecule/selectField/package.json +++ b/components/molecule/selectField/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/selectPopover/package.json b/components/molecule/selectPopover/package.json index dfee538bf6..02fcdac28f 100644 --- a/components/molecule/selectPopover/package.json +++ b/components/molecule/selectPopover/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/stepper/package.json b/components/molecule/stepper/package.json index 444ad4df60..fd7512d5f3 100644 --- a/components/molecule/stepper/package.json +++ b/components/molecule/stepper/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "peerDependencies": { diff --git a/components/molecule/tabs/package.json b/components/molecule/tabs/package.json index 1ed31bc85a..1eb73a36c8 100644 --- a/components/molecule/tabs/package.json +++ b/components/molecule/tabs/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/textareaField/package.json b/components/molecule/textareaField/package.json index 058f1fbdff..aaf7582966 100644 --- a/components/molecule/textareaField/package.json +++ b/components/molecule/textareaField/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/thumbnail/package.json b/components/molecule/thumbnail/package.json index 66fdc3e495..202bccbc47 100644 --- a/components/molecule/thumbnail/package.json +++ b/components/molecule/thumbnail/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/molecule/validationCode/package.json b/components/molecule/validationCode/package.json index 6db4263e36..81fd6847c5 100644 --- a/components/molecule/validationCode/package.json +++ b/components/molecule/validationCode/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "peerDependencies": { diff --git a/components/organism/nestedCheckboxes/package.json b/components/organism/nestedCheckboxes/package.json index 3fe0b56b4e..71c333ad26 100644 --- a/components/organism/nestedCheckboxes/package.json +++ b/components/organism/nestedCheckboxes/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { diff --git a/components/primitive/injector/package.json b/components/primitive/injector/package.json index 242007a18a..7ddbca2ee7 100644 --- a/components/primitive/injector/package.json +++ b/components/primitive/injector/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "scripts": { "prepublishOnly": "npm run build:js && npm run build:styles", - "build:js": "npx @s-ui/js-compiler", + "build:js": "babel --presets sui ./src --out-dir ./lib", "build:styles": "cpx './src/**/*.scss' ./lib" }, "peerDependencies": { From 37d10aec1327daffe0ee01cc432decc9d4aa0161 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Wed, 26 Oct 2022 17:07:20 +0200 Subject: [PATCH 30/31] chore(Root): ----- package beta versions --- components/atom/helpText/demo/package.json | 2 +- components/atom/input/package.json | 2 +- components/atom/label/demo/package.json | 2 +- components/atom/slider/demo/package.json | 2 +- components/atom/spinner/demo/package.json | 2 +- components/atom/tag/package.json | 2 +- components/atom/textarea/package.json | 2 +- components/molecule/accordion/demo/package.json | 2 +- components/molecule/autosuggest/demo/package.json | 4 ++-- components/molecule/autosuggest/package.json | 6 +++--- components/molecule/autosuggestField/demo/package.json | 2 +- components/molecule/autosuggestField/package.json | 2 +- components/molecule/buttonGroup/demo/package.json | 2 +- components/molecule/dataCounter/package.json | 2 +- components/molecule/dropdownList/package.json | 2 +- components/molecule/dropdownOption/demo/package.json | 2 +- components/molecule/inputField/package.json | 2 +- components/molecule/inputTags/package.json | 6 +++--- components/molecule/pagination/demo/package.json | 2 +- components/molecule/photoUploader/demo/package.json | 2 +- components/molecule/select/package.json | 6 +++--- components/molecule/selectField/demo/package.json | 2 +- components/molecule/selectField/package.json | 2 +- components/molecule/selectPopover/demo/package.json | 2 +- 24 files changed, 31 insertions(+), 31 deletions(-) diff --git a/components/atom/helpText/demo/package.json b/components/atom/helpText/demo/package.json index 9c30b8a8d3..cefbd64a69 100644 --- a/components/atom/helpText/demo/package.json +++ b/components/atom/helpText/demo/package.json @@ -13,7 +13,7 @@ "dependencies": { "@s-ui/react-atom-checkbox": "2", "@s-ui/react-atom-icon": "1", - "@s-ui/react-atom-input": "5", + "@s-ui/react-atom-input": "5.22.0-beta.0", "@s-ui/react-atom-label": "1", "@s-ui/react-atom-textarea": "2" } diff --git a/components/atom/input/package.json b/components/atom/input/package.json index c1a80955d0..f435149f31 100644 --- a/components/atom/input/package.json +++ b/components/atom/input/package.json @@ -1,6 +1,6 @@ { "name": "@s-ui/react-atom-input", - "version": "5.21.0-beta.4", + "version": "5.22.0-beta.0", "description": "", "main": "lib/index.js", "scripts": { diff --git a/components/atom/label/demo/package.json b/components/atom/label/demo/package.json index c2ae6ef5ca..43f3e3e7c6 100644 --- a/components/atom/label/demo/package.json +++ b/components/atom/label/demo/package.json @@ -14,6 +14,6 @@ "@s-ui/react-atom-button": "1", "@s-ui/react-atom-checkbox": "2", "@s-ui/react-atom-icon": "1", - "@s-ui/react-atom-input": "5" + "@s-ui/react-atom-input": "5.22.0-beta.0" } } diff --git a/components/atom/slider/demo/package.json b/components/atom/slider/demo/package.json index fc29345c03..79cb48ff08 100644 --- a/components/atom/slider/demo/package.json +++ b/components/atom/slider/demo/package.json @@ -14,6 +14,6 @@ "@s-ui/react-atom-button": "1", "@s-ui/react-atom-checkbox": "2", "@s-ui/react-atom-icon": "1", - "@s-ui/react-atom-input": "5" + "@s-ui/react-atom-input": "5.22.0-beta.0" } } diff --git a/components/atom/spinner/demo/package.json b/components/atom/spinner/demo/package.json index bd200e02ec..aa77db2448 100644 --- a/components/atom/spinner/demo/package.json +++ b/components/atom/spinner/demo/package.json @@ -14,6 +14,6 @@ "@s-ui/react-atom-button": "1", "@s-ui/react-atom-checkbox": "2", "@s-ui/react-atom-icon": "1", - "@s-ui/react-atom-input": "5" + "@s-ui/react-atom-input": "5.22.0-beta.0" } } diff --git a/components/atom/tag/package.json b/components/atom/tag/package.json index ac4c7ba2c3..f4faa52886 100644 --- a/components/atom/tag/package.json +++ b/components/atom/tag/package.json @@ -1,6 +1,6 @@ { "name": "@s-ui/react-atom-tag", - "version": "2.43.0-beta.0", + "version": "2.44.0-beta.0", "description": "", "main": "lib/index.js", "scripts": { diff --git a/components/atom/textarea/package.json b/components/atom/textarea/package.json index b26903a7ff..897855ba55 100644 --- a/components/atom/textarea/package.json +++ b/components/atom/textarea/package.json @@ -10,7 +10,7 @@ }, "dependencies": { "@s-ui/react-atom-help-text": "1", - "@s-ui/react-atom-input": "5" + "@s-ui/react-atom-input": "5.22.0-beta.0" }, "peerDependencies": { "@s-ui/component-dependencies": "1" diff --git a/components/molecule/accordion/demo/package.json b/components/molecule/accordion/demo/package.json index dfacf1208d..5b060302e1 100644 --- a/components/molecule/accordion/demo/package.json +++ b/components/molecule/accordion/demo/package.json @@ -12,7 +12,7 @@ "license": "ISC", "dependencies": { "@s-ui/react-atom-icon": "1", - "@s-ui/react-atom-tag": "2", + "@s-ui/react-atom-tag": "2.44.0-beta.0", "lorem-ipsum": "2.0.4", "react-json-view": "1.21.3" } diff --git a/components/molecule/autosuggest/demo/package.json b/components/molecule/autosuggest/demo/package.json index cf9206a5b1..c3c6c5c349 100644 --- a/components/molecule/autosuggest/demo/package.json +++ b/components/molecule/autosuggest/demo/package.json @@ -16,8 +16,8 @@ "@s-ui/react-atom-icon": "1", "@s-ui/react-molecule-autosuggest-field": "2", "@s-ui/react-molecule-dropdown-option": "2", - "@s-ui/react-molecule-input-tags": "2", - "@s-ui/react-molecule-select": "1", + "@s-ui/react-molecule-input-tags": "2.25.0-beta.1", + "@s-ui/react-molecule-select": "1.57.0-beta.0", "axios": "0.21.4" } } diff --git a/components/molecule/autosuggest/package.json b/components/molecule/autosuggest/package.json index e74bba9fd6..0990807408 100644 --- a/components/molecule/autosuggest/package.json +++ b/components/molecule/autosuggest/package.json @@ -1,6 +1,6 @@ { "name": "@s-ui/react-molecule-autosuggest", - "version": "2.66.0", + "version": "2.66.0-beta.0", "description": "", "main": "lib/index.js", "scripts": { @@ -10,10 +10,10 @@ }, "dependencies": { "@s-ui/js": "2", - "@s-ui/react-atom-input": "5", + "@s-ui/react-atom-input": "5.22.0-beta.0", "@s-ui/react-hooks": "1", "@s-ui/react-molecule-dropdown-list": "2", - "@s-ui/react-molecule-input-tags": "2", + "@s-ui/react-molecule-input-tags": "2.25.0-beta.1", "@s-ui/react-primitive-injector": "1", "lodash.isequal": "4.5" }, diff --git a/components/molecule/autosuggestField/demo/package.json b/components/molecule/autosuggestField/demo/package.json index 9bb12b8aec..606ca248dc 100644 --- a/components/molecule/autosuggestField/demo/package.json +++ b/components/molecule/autosuggestField/demo/package.json @@ -12,7 +12,7 @@ "license": "ISC", "dependencies": { "@s-ui/hoc": "1", - "@s-ui/react-molecule-autosuggest": "1", + "@s-ui/react-molecule-autosuggest": "2.66.0-beta.0", "@s-ui/react-molecule-dropdown-option": "2", "@s-ui/react-molecule-field": "1" } diff --git a/components/molecule/autosuggestField/package.json b/components/molecule/autosuggestField/package.json index 8fa02421af..48826b33ee 100644 --- a/components/molecule/autosuggestField/package.json +++ b/components/molecule/autosuggestField/package.json @@ -9,7 +9,7 @@ "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { - "@s-ui/react-molecule-autosuggest": "2", + "@s-ui/react-molecule-autosuggest": "2.66.0-beta.0", "@s-ui/react-molecule-field": "1" }, "peerDependencies": { diff --git a/components/molecule/buttonGroup/demo/package.json b/components/molecule/buttonGroup/demo/package.json index 6ef4cd2ce5..8ddf887622 100644 --- a/components/molecule/buttonGroup/demo/package.json +++ b/components/molecule/buttonGroup/demo/package.json @@ -13,7 +13,7 @@ "dependencies": { "@s-ui/react-atom-button": "1", "@s-ui/react-atom-icon": "1", - "@s-ui/react-atom-input": "5", + "@s-ui/react-atom-input": "5.22.0-beta.0", "react-use": "17.4.0" } } diff --git a/components/molecule/dataCounter/package.json b/components/molecule/dataCounter/package.json index 87abbe2621..4baaf3b4f8 100644 --- a/components/molecule/dataCounter/package.json +++ b/components/molecule/dataCounter/package.json @@ -11,7 +11,7 @@ "dependencies": { "@s-ui/hoc": "1", "@s-ui/react-atom-button": "1", - "@s-ui/react-atom-input": "5", + "@s-ui/react-atom-input": "5.22.0-beta.0", "@s-ui/react-molecule-field": "1" }, "peerDependencies": { diff --git a/components/molecule/dropdownList/package.json b/components/molecule/dropdownList/package.json index 4a7f5e8273..847d518eb1 100644 --- a/components/molecule/dropdownList/package.json +++ b/components/molecule/dropdownList/package.json @@ -9,7 +9,7 @@ "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { - "@s-ui/react-atom-input": "5", + "@s-ui/react-atom-input": "5.22.0-beta.0", "@s-ui/react-hooks": "1", "@s-ui/react-molecule-dropdown-option": "2", "@s-ui/react-primitive-injector": "1", diff --git a/components/molecule/dropdownOption/demo/package.json b/components/molecule/dropdownOption/demo/package.json index 6bf9ec4d8d..12bd984e71 100644 --- a/components/molecule/dropdownOption/demo/package.json +++ b/components/molecule/dropdownOption/demo/package.json @@ -11,7 +11,7 @@ "author": "", "license": "ISC", "dependencies": { - "@s-ui/react-atom-input": "5", + "@s-ui/react-atom-input": "5.22.0-beta.0", "@s-ui/react-hooks": "1", "lorem-ipsum": "2.0.4" } diff --git a/components/molecule/inputField/package.json b/components/molecule/inputField/package.json index 64c0db14df..09eaf0e649 100644 --- a/components/molecule/inputField/package.json +++ b/components/molecule/inputField/package.json @@ -9,7 +9,7 @@ "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { - "@s-ui/react-atom-input": "5", + "@s-ui/react-atom-input": "5.22.0-beta.0", "@s-ui/react-molecule-field": "1" }, "peerDependencies": { diff --git a/components/molecule/inputTags/package.json b/components/molecule/inputTags/package.json index c49bbca278..1583f3a0c9 100644 --- a/components/molecule/inputTags/package.json +++ b/components/molecule/inputTags/package.json @@ -1,6 +1,6 @@ { "name": "@s-ui/react-molecule-input-tags", - "version": "2.25.0", + "version": "2.25.0-beta.1", "description": "", "main": "lib/index.js", "scripts": { @@ -9,8 +9,8 @@ "build:styles": "cpx './src/**/*.scss' ./lib" }, "dependencies": { - "@s-ui/react-atom-input": "5", - "@s-ui/react-atom-tag": "2", + "@s-ui/react-atom-input": "5.22.0-beta.0", + "@s-ui/react-atom-tag": "2.44.0-beta.0", "@s-ui/react-hooks": "1" }, "peerDependencies": { diff --git a/components/molecule/pagination/demo/package.json b/components/molecule/pagination/demo/package.json index e91ccbc06c..3f7e9f9cf8 100644 --- a/components/molecule/pagination/demo/package.json +++ b/components/molecule/pagination/demo/package.json @@ -12,7 +12,7 @@ "license": "ISC", "dependencies": { "@s-ui/react-atom-button": "1", - "@s-ui/react-atom-input": "5", + "@s-ui/react-atom-input": "5.22.0-beta.0", "@s-ui/react-layout-media-query": "1", "@s-ui/react-molecule-button-group": "2" } diff --git a/components/molecule/photoUploader/demo/package.json b/components/molecule/photoUploader/demo/package.json index 9a78a21592..f02b03078f 100644 --- a/components/molecule/photoUploader/demo/package.json +++ b/components/molecule/photoUploader/demo/package.json @@ -13,6 +13,6 @@ "dependencies": { "@s-ui/react-atom-button": "1", "@s-ui/react-molecule-dropdown-option": "2", - "@s-ui/react-molecule-select": "1" + "@s-ui/react-molecule-select": "1.57.0-beta.0" } } diff --git a/components/molecule/select/package.json b/components/molecule/select/package.json index 9a2b056e30..e193df4e77 100644 --- a/components/molecule/select/package.json +++ b/components/molecule/select/package.json @@ -1,6 +1,6 @@ { "name": "@s-ui/react-molecule-select", - "version": "1.57.0", + "version": "1.57.0-beta.0", "description": "", "main": "lib/index.js", "scripts": { @@ -10,10 +10,10 @@ }, "dependencies": { "@s-ui/js": "2", - "@s-ui/react-atom-input": "5", + "@s-ui/react-atom-input": "5.22.0-beta.0", "@s-ui/react-hooks": "1", "@s-ui/react-molecule-dropdown-list": "2", - "@s-ui/react-molecule-input-tags": "2", + "@s-ui/react-molecule-input-tags": "2.25.0-beta.1", "@s-ui/react-primitive-injector": "1" }, "peerDependencies": { diff --git a/components/molecule/selectField/demo/package.json b/components/molecule/selectField/demo/package.json index f66d073fa0..8890e8cd38 100644 --- a/components/molecule/selectField/demo/package.json +++ b/components/molecule/selectField/demo/package.json @@ -14,6 +14,6 @@ "@s-ui/hoc": "1", "@s-ui/react-molecule-dropdown-option": "2", "@s-ui/react-molecule-field": "1", - "@s-ui/react-molecule-select": "1" + "@s-ui/react-molecule-select": "1.57.0-beta.0" } } diff --git a/components/molecule/selectField/package.json b/components/molecule/selectField/package.json index 4c6637943b..9424b4eca9 100644 --- a/components/molecule/selectField/package.json +++ b/components/molecule/selectField/package.json @@ -10,7 +10,7 @@ }, "dependencies": { "@s-ui/react-molecule-field": "1", - "@s-ui/react-molecule-select": "1" + "@s-ui/react-molecule-select": "1.57.0-beta.0" }, "peerDependencies": { "@s-ui/component-dependencies": "1" diff --git a/components/molecule/selectPopover/demo/package.json b/components/molecule/selectPopover/demo/package.json index 59d1dd130c..6859b42268 100644 --- a/components/molecule/selectPopover/demo/package.json +++ b/components/molecule/selectPopover/demo/package.json @@ -15,6 +15,6 @@ "@s-ui/react-icons": "1", "@s-ui/react-molecule-dropdown-option": "2", "@s-ui/react-molecule-modal": "1", - "@s-ui/react-molecule-select": "1" + "@s-ui/react-molecule-select": "1.57.0-beta.0" } } From 5890d9fd1a88102562f773280eab5ce58422a04d Mon Sep 17 00:00:00 2001 From: andresin87 Date: Wed, 26 Oct 2022 20:45:48 +0200 Subject: [PATCH 31/31] fix(components/atom/input): useMask hook refactor --- .../demo/articles/ArticleAddonAndIcon.js | 175 +++++ .../input/demo/articles/ArticleBorderless.js | 58 ++ .../input/demo/articles/ArticleDefault.js | 25 + .../demo/articles/ArticleDisabledReadOnly.js | 52 ++ .../input/demo/articles/ArticleErrorStatus.js | 53 ++ .../input/demo/articles/ArticleInlineForm.js | 34 + .../ArticlePlaceholderValueAndDefaultValue.js | 89 +++ .../atom/input/demo/articles/ArticleShape.js | 79 +++ .../atom/input/demo/articles/ArticleSize.js | 51 ++ .../atom/input/demo/articles/ArticleState.js | 44 ++ .../atom/input/demo/articles/ArticleType.js | 133 ++++ components/atom/input/demo/index.js | 620 +----------------- components/atom/input/demo/settings.js | 3 + components/atom/input/src/Mask/useMask.js | 17 +- 14 files changed, 828 insertions(+), 605 deletions(-) create mode 100644 components/atom/input/demo/articles/ArticleAddonAndIcon.js create mode 100644 components/atom/input/demo/articles/ArticleBorderless.js create mode 100644 components/atom/input/demo/articles/ArticleDefault.js create mode 100644 components/atom/input/demo/articles/ArticleDisabledReadOnly.js create mode 100644 components/atom/input/demo/articles/ArticleErrorStatus.js create mode 100644 components/atom/input/demo/articles/ArticleInlineForm.js create mode 100644 components/atom/input/demo/articles/ArticlePlaceholderValueAndDefaultValue.js create mode 100644 components/atom/input/demo/articles/ArticleShape.js create mode 100644 components/atom/input/demo/articles/ArticleSize.js create mode 100644 components/atom/input/demo/articles/ArticleState.js create mode 100644 components/atom/input/demo/articles/ArticleType.js diff --git a/components/atom/input/demo/articles/ArticleAddonAndIcon.js b/components/atom/input/demo/articles/ArticleAddonAndIcon.js new file mode 100644 index 0000000000..15fcabe705 --- /dev/null +++ b/components/atom/input/demo/articles/ArticleAddonAndIcon.js @@ -0,0 +1,175 @@ +import {useState} from 'react' + +import PropTypes from 'prop-types' + +import { + AntDesignIcon, + Article, + Cell, + Code, + Grid, + H2, + Input, + ListItem, + Paragraph, + RadioButton, + RadioButtonGroup, + UnorderedList +} from '@s-ui/documentation-library' + +import AtomInput from '../../src/index.js' + +const ArticleAddonAndIcon = ({className}) => { + const [state, setState] = useState({}) + const {icon, iconValue, rightAddon, leftAddon} = state + const setStatus = (newState = {}) => setState({...state, ...newState}) + const valueIcon = iconValue ? ( + + ) : null + return ( +
+

Addon and Icon

+ + Input offers the possibility to add icons and contents on its left or + right positions + + + + leftAddon and rightAddon: use it as a label + for the input field + + + leftIcon and rightIcon: use it as a valid + symbol for the field + + + This field props can be combined all together. + + + + + + { + setStatus({icon: value}) + }} + fullWidth + > + + + + + + + setStatus({ + iconValue: value + }) + } + fullWidth + > + + } + /> + + } + /> + + } + /> + + } + /> + + } + /> + + } + /> + + } + /> + + } + /> + + + + setStatus({leftAddon: event.target.value})} + /> + + + setStatus({rightAddon: event.target.value})} + /> + + +
+ ) +} + +ArticleAddonAndIcon.propTypes = { + className: PropTypes.string +} + +ArticleAddonAndIcon.displayName = 'ArticleAddonAndIcon' + +export default ArticleAddonAndIcon diff --git a/components/atom/input/demo/articles/ArticleBorderless.js b/components/atom/input/demo/articles/ArticleBorderless.js new file mode 100644 index 0000000000..e43dffd126 --- /dev/null +++ b/components/atom/input/demo/articles/ArticleBorderless.js @@ -0,0 +1,58 @@ +import {useState} from 'react' + +import PropTypes from 'prop-types' + +import { + Article, + Cell, + Code, + Grid, + H2, + Paragraph, + RadioButton +} from '@s-ui/documentation-library' + +import AtomInput from '../../src/index.js' + +const ArticleBorderless = ({className}) => { + const [border, setBorder] = useState(true) + const [mode, setMode] = useState('light') + return ( +
+

No border

+ + The border of the input can be removed using the boolean prop{' '} + noBorder + + + + setBorder(!value)} + /> + + + setMode(value ? 'dark' : 'light')} + /> + + + + + +
+ ) +} + +ArticleBorderless.propTypes = { + className: PropTypes.string +} + +ArticleBorderless.displayName = 'ArticleBorderless' + +export default ArticleBorderless diff --git a/components/atom/input/demo/articles/ArticleDefault.js b/components/atom/input/demo/articles/ArticleDefault.js new file mode 100644 index 0000000000..d6f7f9e72e --- /dev/null +++ b/components/atom/input/demo/articles/ArticleDefault.js @@ -0,0 +1,25 @@ +import PropTypes from 'prop-types' + +import {Article, H2, Paragraph} from '@s-ui/documentation-library' + +import AtomInput from '../../src/index.js' + +const ArticleDefault = ({className}) => ( +
+

Default

+ + By default, the element gets the following look and feel. + +
+ +
+
+) + +ArticleDefault.propTypes = { + className: PropTypes.string +} + +ArticleDefault.displayName = 'ArticleDefault' + +export default ArticleDefault diff --git a/components/atom/input/demo/articles/ArticleDisabledReadOnly.js b/components/atom/input/demo/articles/ArticleDisabledReadOnly.js new file mode 100644 index 0000000000..589a875c73 --- /dev/null +++ b/components/atom/input/demo/articles/ArticleDisabledReadOnly.js @@ -0,0 +1,52 @@ +import PropTypes from 'prop-types' + +import { + Article, + Cell, + Code, + Grid, + H2, + Label, + Paragraph +} from '@s-ui/documentation-library' + +import AtomInput from '../../src/index.js' + +const ArticleDisabledReadOnly = ({className}) => { + return ( +
+

Disable and ReadOnly

+ + Input provides two different modes that blocks the component behavior + the difference between them is the appearance. + + + The developer can disable the component using the disabled{' '} + boolean prop. It can be blocked also using the readOnly{' '} + boolean propm, but it will look like the default input. + + + + + + + + + + + + + + + +
+ ) +} + +ArticleDisabledReadOnly.propTypes = { + className: PropTypes.string +} + +ArticleDisabledReadOnly.displayName = 'ArticleDisabledReadOnly' + +export default ArticleDisabledReadOnly diff --git a/components/atom/input/demo/articles/ArticleErrorStatus.js b/components/atom/input/demo/articles/ArticleErrorStatus.js new file mode 100644 index 0000000000..40ddd161c6 --- /dev/null +++ b/components/atom/input/demo/articles/ArticleErrorStatus.js @@ -0,0 +1,53 @@ +import PropTypes from 'prop-types' + +import { + Article, + Cell, + Code, + Grid, + H2, + Label, + Paragraph +} from '@s-ui/documentation-library' + +import AtomInput from '../../src/index.js' + +const ArticleErrorStatus = ({className}) => { + return ( +
+

Error State

+ + Input can show its error mode using the boolean prop{' '} + errorStatus + + + + + + + + + + + + + + + + + + + + + +
+ ) +} + +ArticleErrorStatus.propTypes = { + className: PropTypes.string +} + +ArticleErrorStatus.displayName = 'ArticleErrorStatus' + +export default ArticleErrorStatus diff --git a/components/atom/input/demo/articles/ArticleInlineForm.js b/components/atom/input/demo/articles/ArticleInlineForm.js new file mode 100644 index 0000000000..e4a39255ff --- /dev/null +++ b/components/atom/input/demo/articles/ArticleInlineForm.js @@ -0,0 +1,34 @@ +import PropTypes from 'prop-types' + +import { + Article, + Button, + Code, + H2, + H3, + Paragraph +} from '@s-ui/documentation-library' + +import AtomInput from '../../src/index.js' + +const ArticleInlineForm = ({className}) => ( +
+

Inline Form

+

Deprecated

+ + Input have its own way of provide a submision using the{' '} + button prop, you can pass a React node. + + Send} + /> +
+) + +ArticleInlineForm.propTypes = { + className: PropTypes.string +} + +ArticleInlineForm.displayName = 'ArticleInlineForm' + +export default ArticleInlineForm diff --git a/components/atom/input/demo/articles/ArticlePlaceholderValueAndDefaultValue.js b/components/atom/input/demo/articles/ArticlePlaceholderValueAndDefaultValue.js new file mode 100644 index 0000000000..9a2f609cdb --- /dev/null +++ b/components/atom/input/demo/articles/ArticlePlaceholderValueAndDefaultValue.js @@ -0,0 +1,89 @@ +import {useState} from 'react' + +import PropTypes from 'prop-types' + +import { + Article, + Cell, + Code, + Grid, + H2, + Input, + Label, + Paragraph +} from '@s-ui/documentation-library' + +import AtomInput from '../../src/index.js' + +const ArticlePlaceholderValueAndDefaultValue = ({className}) => { + const [placeholder, setPlaceholder] = useState('placeholder') + const [value, setValue] = useState(undefined) + const [defaultValue, setDefaultValue] = useState('default value') + return ( +
+

value, defaultValue and placeholder

+ + value: controlled component. + + + defaultValue: for uncontrolled component + + + placeholder: the placeholder for empty component value + hint. + + + + + + + + + + + + + setPlaceholder(event.target.value)} + /> + + + setDefaultValue(event.target.value)} + /> + + + setValue(event.target.value)} + /> + + + + + + setValue(event.target.value)} + /> + + +
+ ) +} + +ArticlePlaceholderValueAndDefaultValue.propTypes = { + className: PropTypes.string +} + +ArticlePlaceholderValueAndDefaultValue.displayName = + 'ArticlePlaceholderValueAndDefaultValue' + +export default ArticlePlaceholderValueAndDefaultValue diff --git a/components/atom/input/demo/articles/ArticleShape.js b/components/atom/input/demo/articles/ArticleShape.js new file mode 100644 index 0000000000..465298439a --- /dev/null +++ b/components/atom/input/demo/articles/ArticleShape.js @@ -0,0 +1,79 @@ +import {Fragment} from 'react' + +import PropTypes from 'prop-types' + +import { + Article, + Cell, + Code, + Grid, + H2, + Label, + Paragraph +} from '@s-ui/documentation-library' + +import AtomInput, {inputShapes, inputSizes} from '../../src/index.js' + +const ArticleShape = ({className}) => ( +
+

Shape

+ + The border radius of the input can be set using the shape{' '} + property. + + + {Object.entries({default: undefined, ...inputShapes}).map(([key]) => ( + + + + ))} + {Object.entries({default: undefined, ...inputShapes}).map( + ([key, value]) => ( + + + + ) + )} + + + In even preserves its own shaping combined with addons and sizes also. + + + + {Object.entries({default: undefined, ...inputShapes}).map(([key]) => ( + + + + ))} + {Object.entries({default: undefined, ...inputSizes}).map( + ([sizeKey, sizeValue]) => ( + + + + + {Object.entries({default: undefined, ...inputShapes}).map( + ([shapeKey, shapeValue]) => ( + + left} + rightAddon={right} + /> + + ) + )} + + ) + )} + +
+) + +ArticleShape.propTypes = { + className: PropTypes.string +} + +ArticleShape.displayName = 'ArticleShape' + +export default ArticleShape diff --git a/components/atom/input/demo/articles/ArticleSize.js b/components/atom/input/demo/articles/ArticleSize.js new file mode 100644 index 0000000000..b950df1d47 --- /dev/null +++ b/components/atom/input/demo/articles/ArticleSize.js @@ -0,0 +1,51 @@ +import PropTypes from 'prop-types' + +import { + Article, + Cell, + Code, + Grid, + H2, + Label, + Paragraph +} from '@s-ui/documentation-library' + +import AtomInput, {inputSizes} from '../../src/index.js' +import {flexCenteredStyle} from '../settings.js' + +const ArticleSize = ({className}) => ( +
+

Size

+ + The element gets {Object.values(inputSizes).length} different size + configurations using its size prop. + + + {[['default', undefined], ...Object.entries(inputSizes)].map( + ([key], index) => ( + + + + ) + )} + {[['default', undefined], ...Object.entries(inputSizes)].map( + ([key, value], index) => ( + + + + ) + )} + +
+) + +ArticleSize.propTypes = { + className: PropTypes.string +} + +ArticleSize.displayName = 'ArticleSize' + +export default ArticleSize diff --git a/components/atom/input/demo/articles/ArticleState.js b/components/atom/input/demo/articles/ArticleState.js new file mode 100644 index 0000000000..4ca0f238b1 --- /dev/null +++ b/components/atom/input/demo/articles/ArticleState.js @@ -0,0 +1,44 @@ +import PropTypes from 'prop-types' + +import { + Article, + Code, + Grid, + H2, + Label, + Paragraph +} from '@s-ui/documentation-library' + +import AtomInput, {inputStates} from '../../src/index.js' +import {stackMap} from '../settings.js' + +const ArticleState = ({className}) => { + return ( +
+

State

+ + Input has {Object.values(inputStates).length} different values. It can + be used giving a valid state prop to the component. + + + {stackMap( + [['undefined', undefined], ...Object.entries(inputStates)], + ([key], index) => ( + + ), + ([key, value], index) => ( + + ) + )} + +
+ ) +} + +ArticleState.propTypes = { + className: PropTypes.string +} + +ArticleState.displayName = 'ArticleState' + +export default ArticleState diff --git a/components/atom/input/demo/articles/ArticleType.js b/components/atom/input/demo/articles/ArticleType.js new file mode 100644 index 0000000000..84550183ef --- /dev/null +++ b/components/atom/input/demo/articles/ArticleType.js @@ -0,0 +1,133 @@ +import PropTypes from 'prop-types' + +import { + Anchor, + Article, + Cell, + Code, + Grid, + H2, + H4, + Paragraph +} from '@s-ui/documentation-library' + +import AtomInput, {inputTypes} from '../../src/index.js' + +const ArticleType = ({className}) => { + return ( +
+

Type

+ + AtomInput provides different types of usage depending on its{' '} + type value prop. + + + {[ + [ + 'TEXT', + {type: inputTypes.TEXT}, + { + description: + 'Elements of type text create basic single-line text fields' + } + ], + [ + 'DATE', + {type: inputTypes.DATE, charsSize: 10}, + { + description: + 'Create input fields that let the user enter a date, either with a textbox that validates the input or a special date picker interface. The resulting value includes the year, month, and day, but not the time. The time and datetime-local input types support time and date+time input.' + } + ], + [ + 'MASK', + { + type: inputTypes.MASK, + mask: {mask: 'ES00 0000 0000 00 0000000000'}, + placeholder: 'ES00 0000 0000 00 0000000000', + charsSize: 31 + }, + { + description: ( + <> + Let the user define its own mask for custom purposes. More + info at{' '} + + http://shorturl.at/foBF1 + + + ) + } + ], + [ + 'NUMBER', + { + type: inputTypes.NUMBER, + placeholder: 'Number only input', + charsSize: 10 + }, + { + description: ( + <> + A control for entering a number. Displays a spinner and adds + default validation when supported. Displays a numeric keypad + in some devices with dynamic keypads. Arrows for number inputs + are not shown due to:{' '} + + http://shorturl.at/tR149 + + + ) + } + ], + [ + 'PASSWORD', + {type: inputTypes.PASSWORD, placeholder: 'Password Input'}, + { + description: + 'A single-line text field whose value is obscured. Will alert user if site is not secure' + } + ], + [ + 'SUI_PASSWORD', + {type: inputTypes.SUI_PASSWORD, placeholder: 'Password Input'}, + { + description: + 'Like password but whith a show button for value displaying state' + } + ], + [ + 'TEL', + {type: inputTypes.TEL}, + { + description: + 'A control for entering a telephone number. Displays a telephone keypad in some devices with dynamic keypads.' + } + ], + [ + 'EMAIL', + {type: inputTypes.EMAIL}, + { + description: + 'A field for editing an email address. Looks like a text input, but has validation parameters and relevant keyboard in supporting browsers and devices with dynamic keyboards.' + } + ] + ].map(([key, props, {description} = {}], index) => ( + +

{key}

+ + {description} + + ))} + +
+ ) +} + +ArticleType.propTypes = { + className: PropTypes.string +} + +ArticleType.displayName = 'ArticleType' + +export default ArticleType diff --git a/components/atom/input/demo/index.js b/components/atom/input/demo/index.js index 670911343d..68e14b5224 100644 --- a/components/atom/input/demo/index.js +++ b/components/atom/input/demo/index.js @@ -1,587 +1,17 @@ -import {Fragment, useState} from 'react' - -import { - Anchor, - AntDesignIcon, - Article, - Button, - Cell, - Code, - Grid, - H1, - H2, - H3, - H4, - Input, - Label, - ListItem, - Paragraph, - RadioButton, - RadioButtonGroup, - UnorderedList -} from '@s-ui/documentation-library' - -import AtomInput, { - inputShapes, - inputSizes, - inputStates, - inputTypes -} from '../../input/src/index.js' -import {flexCenteredStyle, stackMap} from './settings.js' - -const DefaultDemo = () => ( -
-

Default

- - By default, the element gets the following look and feel. - -
- -
-
-) - -const SizeDemo = () => ( -
-

Size

- - The element gets {Object.values(inputSizes).length} different size - configurations using its size prop. - - - {[['default', undefined], ...Object.entries(inputSizes)].map( - ([key], index) => ( - - - - ) - )} - {[['default', undefined], ...Object.entries(inputSizes)].map( - ([key, value], index) => ( - - - - ) - )} - -
-) - -const PlaceholderValueAndDefaultValueDemo = () => { - const [placeholder, setPlaceholder] = useState('placeholder') - const [value, setValue] = useState(undefined) - const [defaultValue, setDefaultValue] = useState('default value') - return ( -
-

value, defaultValue and placeholder

- - value: controlled component. - - - defaultValue: for uncontrolled component - - - placeholder: the placeholder for empty component value - hint. - - - - - - - - - - - - - setPlaceholder(event.target.value)} - /> - - - setDefaultValue(event.target.value)} - /> - - - setValue(event.target.value)} - /> - - - - - - setValue(event.target.value)} - /> - - -
- ) -} - -const TypeDemo = () => { - return ( -
-

Type

- - AtomInput provides diferent types of usage depending on its{' '} - type value prop. - - - {[ - [ - 'TEXT', - {type: inputTypes.TEXT}, - { - description: - 'Elements of type text create basic single-line text fields' - } - ], - [ - 'DATE', - {type: inputTypes.DATE, charsSize: 10}, - { - description: - 'Create input fields that let the user enter a date, either with a textbox that validates the input or a special date picker interface. The resulting value includes the year, month, and day, but not the time. The time and datetime-local input types support time and date+time input.' - } - ], - [ - 'MASK', - { - type: inputTypes.MASK, - mask: {mask: 'ES00 0000 0000 00 0000000000'}, - placeholder: 'ES00 0000 0000 00 0000000000', - charsSize: 31 - }, - { - description: ( - <> - Let the user define its own mask for custom purposes. More - info at{' '} - - http://shorturl.at/foBF1 - - - ) - } - ], - [ - 'NUMBER', - { - type: inputTypes.NUMBER, - placeholder: 'Number only input', - charsSize: 10 - }, - { - description: ( - <> - A control for entering a number. Displays a spinner and adds - default validation when supported. Displays a numeric keypad - in some devices with dynamic keypads. Arrows for number inputs - are not shown due to:{' '} - - http://shorturl.at/tR149 - - - ) - } - ], - [ - 'PASSWORD', - {type: inputTypes.PASSWORD, placeholder: 'Password Input'}, - { - description: - 'A single-line text field whose value is obscured. Will alert user if site is not secure' - } - ], - [ - 'SUI_PASSWORD', - {type: inputTypes.SUI_PASSWORD, placeholder: 'Password Input'}, - { - description: - 'Like password but whith a show button for value displaying state' - } - ], - [ - 'TEL', - {type: inputTypes.TEL}, - { - description: - 'A control for entering a telephone number. Displays a telephone keypad in some devices with dynamic keypads.' - } - ], - [ - 'EMAIL', - {type: inputTypes.EMAIL}, - { - description: - 'A field for editing an email address. Looks like a text input, but has validation parameters and relevant keyboard in supporting browsers and devices with dynamic keyboards.' - } - ] - ].map(([key, props, {description} = {}], index) => ( - -

{key}

- - {description} - - ))} - -
- ) -} - -const DisabledReadOnlyDemo = () => { - return ( -
-

Disable and ReadOnly

- - Input provides two different modes that blocks the component behavior - the difference between them is the appearance. - - - The developer can disable the component using the disabled{' '} - boolean prop. It can be blocked also using the readOnly{' '} - boolean propm, but it will look like the default input. - - - - - - - - - - - - - - - -
- ) -} - -const AddonAndIconDemo = () => { - const [state, setState] = useState({}) - const {icon, iconValue, rightAddon, leftAddon} = state - const setStatus = (newState = {}) => setState({...state, ...newState}) - const valueIcon = iconValue ? ( - - ) : null - return ( -
-

Addon and Icon

- - Input offers the possibility to add icons and contents on its left or - right positions - - - - leftAddon and rightAddon: use it as a label - for the input field - - - leftIcon and rightIcon: use it as a valid - symbol for the field - - - This field props can be combined all together. - - - - - - { - setStatus({icon: value}) - }} - fullWidth - > - - - - - - - setStatus({ - iconValue: value - }) - } - fullWidth - > - - } - /> - - } - /> - - } - /> - - } - /> - - } - /> - - } - /> - - } - /> - - } - /> - - - - setStatus({leftAddon: event.target.value})} - /> - - - setStatus({rightAddon: event.target.value})} - /> - - -
- ) -} - -const BorderlessDemo = () => { - const [border, setBorder] = useState(true) - const [mode, setMode] = useState('light') - return ( -
-

No border

- - The border of the input can be removed using the boolean prop{' '} - noBorder - - - - setBorder(!value)} - /> - - - setMode(value ? 'dark' : 'light')} - /> - - - - - -
- ) -} - -const StateDemo = () => { - return ( -
-

State

- - Input has {Object.values(inputStates).length} different values. It can - be used giving a valid state prop to the component. - - - {stackMap( - [['undefined', undefined], ...Object.entries(inputStates)], - ([key], index) => ( - - ), - ([key, value], index) => ( - - ) - )} - -
- ) -} - -const ErrorStatusDemo = () => { - return ( -
-

Error State

- - Input can show its error mode using the boolean prop{' '} - errorStatus - - - - - - - - - - - - - - - - - - - - - -
- ) -} - -const InlineFormDemo = () => ( -
-

Inline Form

-

Deprecated

- - Input have its own way of provide a submision using the{' '} - button prop, you can pass a React node. - - Send} - /> -
-) - -const ShapeDemo = () => ( -
-

Shape

- - The border radius of the input can be set using the shape{' '} - property. - - - {Object.entries({default: undefined, ...inputShapes}).map(([key]) => ( - - - - ))} - {Object.entries({default: undefined, ...inputShapes}).map( - ([key, value]) => ( - - - - ) - )} - - - In even preserves its own shaping combined with addons and sizes also. - - - - {Object.entries({default: undefined, ...inputShapes}).map(([key]) => ( - - - - ))} - {Object.entries({default: undefined, ...inputSizes}).map( - ([sizeKey, sizeValue]) => ( - - - - - {Object.entries({default: undefined, ...inputShapes}).map( - ([shapeKey, shapeValue]) => ( - - left} - rightAddon={right} - /> - - ) - )} - - ) - )} - -
-) +import {H1, Paragraph} from '@s-ui/documentation-library' + +import ArticleAddonAndIcon from './articles/ArticleAddonAndIcon.js' +import ArticleBorderless from './articles/ArticleBorderless.js' +import ArticleDefault from './articles/ArticleDefault.js' +import ArticleDisabledReadOnly from './articles/ArticleDisabledReadOnly.js' +import ArticleErrorStatus from './articles/ArticleErrorStatus.js' +import ArticleInlineForm from './articles/ArticleInlineForm.js' +import ArticlePlaceholderValueAndDefaultValue from './articles/ArticlePlaceholderValueAndDefaultValue.js' +import ArticleShape from './articles/ArticleShape.js' +import ArticleSize from './articles/ArticleSize.js' +import ArticleState from './articles/ArticleState.js' +import ArticleType from './articles/ArticleType.js' +import {CLASS_SECTION} from './settings.js' const Demo = () => (
@@ -592,27 +22,27 @@ const Demo = () => ( information. These include dates, passwords or even short answers. It’s a field where users can write alphanumeric texts. - +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
diff --git a/components/atom/input/demo/settings.js b/components/atom/input/demo/settings.js index b0aefee24e..4198ad96a5 100644 --- a/components/atom/input/demo/settings.js +++ b/components/atom/input/demo/settings.js @@ -13,3 +13,6 @@ export const stackMap = (arr = [], ...mappingCallbacks) => e(value, innerIndex + this.length * index) ) }, arr) + +const BASE_CLASS_DEMO = `DemoAtomInput` +export const CLASS_SECTION = `${BASE_CLASS_DEMO}-section` diff --git a/components/atom/input/src/Mask/useMask.js b/components/atom/input/src/Mask/useMask.js index 75938689d7..9952688e5e 100644 --- a/components/atom/input/src/Mask/useMask.js +++ b/components/atom/input/src/Mask/useMask.js @@ -1,8 +1,8 @@ import {useEffect} from 'react' import {useIMask} from 'react-imask' +import useControlledState from '@s-ui/react-hooks/lib/useControlledState' import useMergeRefs from '@s-ui/react-hooks/lib/useMergeRefs' -import useMountedState from '@s-ui/react-hooks/lib/useMountedState' import {isFunction} from '../config.js' @@ -14,7 +14,7 @@ const useMask = ({ onComplete, forwardedRef }) => { - const [value] = useMountedState(argValue, argDefaultValue) + const [value] = useControlledState(argValue, argDefaultValue) const { ref: refInput, value: maskedValue = '', @@ -28,15 +28,12 @@ const useMask = ({ isFunction(onComplete) && onComplete(event, {value, maskRef, ...args}) } ) - useEffect(() => { - if (value !== maskedValue) { - setValue(value) - } - }, [argValue, setValue, maskedValue, value]) - const ref = useMergeRefs(refInput, forwardedRef) - - return Object.assign([maskedValue, ref]) + useEffect( + () => value !== maskedValue && setValue(maskedValue), + [argValue, setValue, maskedValue, value] + ) + return Object.assign([maskedValue, ref], {maskedValue, ref}) } export default useMask