From 6d7731cdde9d429b1b400906a68aeddaf4397d32 Mon Sep 17 00:00:00 2001 From: ilan7empest Date: Tue, 7 Jun 2022 14:47:38 +0300 Subject: [PATCH] Create a new dist version 0.0.8 Collecting: - Fix [Form] wizard and form input (#16) --- commit_message | 4 +- dist/components/FormInput/FormInput.js | 96 ++++-- dist/components/FormInput/formInput.scss | 95 +----- dist/components/FormSelect/FormSelect.js | 131 +++++--- dist/components/FormSelect/formSelect.scss | 342 ++++----------------- dist/components/Wizard/Wizard.js | 88 +++--- dist/elements/OptionsMenu/OptionsMenu.js | 9 +- dist/elements/SelectOption/SelectOption.js | 2 +- dist/elements/index.js | 31 ++ dist/hooks/index.js | 13 + dist/index.js | 14 +- dist/scss/mixins.scss | 94 ++++++ package.json | 200 ++++++------ 13 files changed, 511 insertions(+), 608 deletions(-) create mode 100644 dist/elements/index.js create mode 100644 dist/hooks/index.js diff --git a/commit_message b/commit_message index 9b0e46b2..fe7fd948 100644 --- a/commit_message +++ b/commit_message @@ -1,6 +1,6 @@ -Create a new dist version 0.0.7 +Create a new dist version 0.0.8 Collecting: -- Impl [Form Select] move and revamp select component (#11) +- Fix [Form] wizard and form input (#16) diff --git a/dist/components/FormInput/FormInput.js b/dist/components/FormInput/FormInput.js index a0cd77f2..249e2d6b 100644 --- a/dist/components/FormInput/FormInput.js +++ b/dist/components/FormInput/FormInput.js @@ -92,7 +92,7 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) { required = _ref.required, suggestionList = _ref.suggestionList, tip = _ref.tip, - validationRules = _ref.validationRules, + rules = _ref.validationRules, validator = _ref.validator, withoutBorder = _ref.withoutBorder, inputProps = _objectWithoutProperties(_ref, _excluded); @@ -120,10 +120,15 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) { _useState8 = _slicedToArray(_useState7, 1), validationPattern = _useState8[0]; - var _useState9 = (0, _react.useState)(false), + var _useState9 = (0, _react.useState)(rules), _useState10 = _slicedToArray(_useState9, 2), - showValidationRules = _useState10[0], - setShowValidationRules = _useState10[1]; + validationRules = _useState10[0], + setValidationRules = _useState10[1]; + + var _useState11 = (0, _react.useState)(false), + _useState12 = _slicedToArray(_useState11, 2), + showValidationRules = _useState12[0], + setShowValidationRules = _useState12[1]; var wrapperRef = (0, _react.useRef)(); (_ref2 = ref) !== null && _ref2 !== void 0 ? _ref2 : ref = wrapperRef; @@ -131,8 +136,8 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) { (0, _useDetectOutsideClick.useDetectOutsideClick)(ref, function () { return setShowValidationRules(false); }); - var inputClassNames = (0, _classnames.default)('form-field__input', className, "form-field__input-".concat(density), isInvalid && 'form-field__input-invalid', // isInvalid && 'input_rules-invalid', - withoutBorder && 'without-border'); + var formFieldClassNames = (0, _classnames.default)('form-field', className); + var inputWrapperClassNames = (0, _classnames.default)('form-field__wrapper', "form-field__wrapper-".concat(density), disabled && 'form-field__wrapper-disabled', isInvalid && 'form-field__wrapper-invalid', withoutBorder && 'without-border'); var labelClassNames = (0, _classnames.default)('form-field__label', disabled && 'form-field__label-disabled'); (0, _react.useEffect)(function () { setTypedValue(String(input.value)); // convert from number to string @@ -155,8 +160,8 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) { } }, [focused]); - var getValidationRules = function getValidationRules(rules) { - return rules.map(function (_ref3) { + var getValidationRules = function getValidationRules() { + return validationRules.map(function (_ref3) { var _ref3$isValid = _ref3.isValid, isValid = _ref3$isValid === void 0 ? false : _ref3$isValid, label = _ref3.label, @@ -173,7 +178,7 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) { input.onBlur(event); - if (!event.relatedTarget || !((_event$relatedTarget = event.relatedTarget) !== null && _event$relatedTarget !== void 0 && _event$relatedTarget.closest('.suggestion-list'))) { + if (!event.relatedTarget || !((_event$relatedTarget = event.relatedTarget) !== null && _event$relatedTarget !== void 0 && _event$relatedTarget.closest('.form-field__suggestion-list'))) { setIsFocused(false); onBlur && onBlur(event); } @@ -206,18 +211,39 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) { setShowValidationRules(!showValidationRules); }; + (0, _react.useEffect)(function () { + setValidationRules(function (prevState) { + return prevState.map(function (rule) { + return _objectSpread(_objectSpread({}, rule), {}, { + isValid: !meta.error || !Array.isArray(meta.error) ? true : !meta.error.some(function (err) { + return err.name === rule.name; + }) + }); + }); + }); + }, [meta.error]); + var validateField = function validateField(value) { var valueToValidate = value !== null && value !== void 0 ? value : ''; var validationError = null; - if (!(0, _lodash.isEmpty)(validationRules)) { - var _checkPatternsValidit = (0, _validationService.checkPatternsValidity)(validationRules, valueToValidate), + if (!(0, _lodash.isEmpty)(validationRules) && valueToValidate !== typedValue) { + var _checkPatternsValidit = (0, _validationService.checkPatternsValidity)(rules, valueToValidate), _checkPatternsValidit2 = _slicedToArray(_checkPatternsValidit, 2), newRules = _checkPatternsValidit2[0], isValidField = _checkPatternsValidit2[1]; + var invalidRules = newRules.filter(function (rule) { + return !rule.isValid; + }); + if (!isValidField) { - validationError = newRules; + validationError = invalidRules.map(function (rule) { + return { + name: rule.name, + label: rule.label + }; + }); } if (isValidField && showValidationRules || required && valueToValidate === '') { @@ -261,7 +287,7 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) { meta = _ref4.meta; return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", { ref: ref, - className: "form-field", + className: formFieldClassNames, children: [label && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", { className: labelClassNames, children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("label", { @@ -291,22 +317,24 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) { }) })] }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", { - className: "form-field__wrapper", - children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({ - "data-testid": "input", - id: input.name, - className: inputClassNames, - ref: inputRef, - required: isInvalid - }, _objectSpread(_objectSpread({ - disabled: disabled, - pattern: pattern - }, inputProps), input)), {}, { - autoComplete: (_inputProps$autocompl = inputProps.autocomplete) !== null && _inputProps$autocompl !== void 0 ? _inputProps$autocompl : 'off', - onChange: handleInputChange, - onBlur: handleInputBlur, - onFocus: handleInputFocus - })), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", { + className: inputWrapperClassNames, + children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", { + className: "form-field__control", + children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({ + "data-testid": "input", + id: input.name, + ref: inputRef, + required: isInvalid || required + }, _objectSpread(_objectSpread({ + disabled: disabled, + pattern: pattern + }, inputProps), input)), {}, { + autoComplete: (_inputProps$autocompl = inputProps.autocomplete) !== null && _inputProps$autocompl !== void 0 ? _inputProps$autocompl : 'off', + onChange: handleInputChange, + onBlur: handleInputBlur, + onFocus: handleInputFocus + })) + }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", { className: "form-field__icons", children: [isInvalid && !Array.isArray(meta.error) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, { className: "form-field__warning", @@ -315,7 +343,7 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) { warning: true }), children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_invalid.ReactComponent, {}) - }), isInvalid && Array.isArray(meta.error) && !(0, _lodash.isEmpty)(meta.error) && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", { + }), isInvalid && Array.isArray(meta.error) && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", { className: "form-field__warning", onClick: toggleValidationRulesMenu, children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_warning.ReactComponent, {}) @@ -329,7 +357,7 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) { })] })] }), (suggestionList === null || suggestionList === void 0 ? void 0 : suggestionList.length) > 0 && isFocused && /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", { - className: "suggestion-list", + className: "form-field__suggestion-list", children: suggestionList.map(function (item, index) { return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", { className: "suggestion-item", @@ -344,10 +372,10 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) { } }, "".concat(item).concat(index)); }) - }), isInvalid && Array.isArray(meta.error) && !(0, _lodash.isEmpty)(meta.error) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_OptionsMenu.default, { + }), !(0, _lodash.isEmpty)(validationRules) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_OptionsMenu.default, { show: showValidationRules, - parentElement: ref, - children: getValidationRules(meta.error) + ref: ref, + children: getValidationRules() })] }); } diff --git a/dist/components/FormInput/formInput.scss b/dist/components/FormInput/formInput.scss index 526ebbf4..2f4ff5dc 100644 --- a/dist/components/FormInput/formInput.scss +++ b/dist/components/FormInput/formInput.scss @@ -3,30 +3,10 @@ @import '../../scss/shadows'; @import '../../scss/mixins'; -.form-field { - position: relative; - display: block; - width: 100%; +@include formField; +.form-field { &__label { - margin-bottom: 5px; - color: $topaz; - font-size: 12px; - text-transform: capitalize; - background-color: transparent; - - &-mandatory { - color: $amaranth; - } - - &-disabled { - color: $spunPearl; - - .form-field__label-mandatory { - color: $spunPearl; - } - } - &-icon { display: inline-flex; margin-left: 3px; @@ -51,11 +31,11 @@ } } - &__input { - padding-left: 16px; - padding-right: 30px; - - @include fieldWrapper; + input { + border: 0; + color: inherit; + padding: 0; + width: 100%; &::placeholder { color: $spunPearl; @@ -81,66 +61,13 @@ color: $spunPearl; } - &-invalid { - border: $errorBorder; - padding-right: 50px; - } - - &.without-border { - border-color: transparent; - } - - &:read-only:not(:disabled) { - border-color: transparent; - padding: 0; - } - &:disabled { - color: $spunPearl; + background: transparent; cursor: not-allowed; } - - &-dense { - padding-top: 12px; - padding-bottom: 12px; - } - - &-normal { - padding-top: 14px; - padding-bottom: 14px; - } - - &-medium { - padding-top: 16px; - padding-bottom: 16px; - } - - &-chunky { - padding-top: 18px; - padding-bottom: 18px; - } } - &__icons { - display: flex; - align-items: center; - position: absolute; - top: 50%; - right: 10px; - transform: translateY(-50%); - - & > * { - display: flex; - align-items: center; - cursor: pointer; - - &:not(:first-child) { - margin-left: 8px; - } - } - } - - .suggestion-list { + &__suggestion-list { position: absolute; top: 100%; left: 0; @@ -162,8 +89,4 @@ } } } - - &__wrapper { - position: relative; - } } diff --git a/dist/components/FormSelect/FormSelect.js b/dist/components/FormSelect/FormSelect.js index 06a108a7..20fac9a1 100644 --- a/dist/components/FormSelect/FormSelect.js +++ b/dist/components/FormSelect/FormSelect.js @@ -41,6 +41,12 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } +function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; } + +function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } + +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } + function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); } function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } @@ -71,33 +77,64 @@ var FormSelect = function FormSelect(_ref) { withSelectedIcon = _ref.withSelectedIcon; var _useField = (0, _reactFinalForm.useField)(name), - input = _useField.input; - - var selectRef = (0, _react.useRef)(); + input = _useField.input, + meta = _useField.meta; var _useState = (0, _react.useState)(false), _useState2 = _slicedToArray(_useState, 2), - isConfirmDialogOpen = _useState2[0], - setConfirmDialogOpen = _useState2[1]; + isInvalid = _useState2[0], + setIsInvalid = _useState2[1]; var _useState3 = (0, _react.useState)(false), _useState4 = _slicedToArray(_useState3, 2), - isOpen = _useState4[0], - setOpen = _useState4[1]; + isConfirmDialogOpen = _useState4[0], + setConfirmDialogOpen = _useState4[1]; - var _useState5 = (0, _react.useState)(''), + var _useState5 = (0, _react.useState)(false), _useState6 = _slicedToArray(_useState5, 2), - searchValue = _useState6[0], - setSearchValue = _useState6[1]; + isOpen = _useState6[0], + setOpen = _useState6[1]; + + var _useState7 = (0, _react.useState)(''), + _useState8 = _slicedToArray(_useState7, 2), + searchValue = _useState8[0], + setSearchValue = _useState8[1]; + + var selectRef = (0, _react.useRef)(); var _ref2 = (selectRef === null || selectRef === void 0 ? void 0 : (_selectRef$current = selectRef.current) === null || _selectRef$current === void 0 ? void 0 : _selectRef$current.getBoundingClientRect()) || {}, dropdownWidth = _ref2.width; - var selectClassName = (0, _classnames.default)('form-field__select', "form-field__select-".concat(density), isOpen && 'form-field__select-active', withoutBorder && 'without-border', disabled && 'form-field__select-disabled'); + var selectWrapperClassNames = (0, _classnames.default)('form-field__wrapper', "form-field__wrapper-".concat(density), disabled && 'form-field__wrapper-disabled', isOpen && 'form-field__wrapper-active', isInvalid && 'form-field__wrapper-invalid', withoutBorder && 'without-border'); var selectLabelClassName = (0, _classnames.default)('form-field__label', disabled && 'form-field__label-disabled'); var selectedOption = options.find(function (option) { return option.id === input.value; }); + (0, _react.useEffect)(function () { + setIsInvalid(meta.invalid && (meta.validating || meta.modified || meta.submitFailed && meta.touched)); + }, [meta.invalid, meta.modified, meta.submitFailed, meta.touched, meta.validating]); + var openMenu = (0, _react.useCallback)(function () { + if (!isOpen) { + setOpen(true); + input.onFocus(new Event('focus')); + } + }, [input, isOpen]); + var closeMenu = (0, _react.useCallback)(function () { + if (isOpen) { + setOpen(false); + input.onBlur(new Event('blur')); + } + }, [input, isOpen]); + var clickHandler = (0, _react.useCallback)(function (event) { + if (selectRef.current !== event.target.closest('.form-field')) { + closeMenu(); + } + }, [closeMenu]); + var handleScroll = (0, _react.useCallback)(function (event) { + if (!event.target.closest('.options-list__body')) { + closeMenu(); + } + }, [closeMenu]); (0, _react.useEffect)(function () { if (isOpen) { window.addEventListener('scroll', handleScroll, true); @@ -108,32 +145,24 @@ var FormSelect = function FormSelect(_ref) { window.removeEventListener('click', clickHandler); window.removeEventListener('scroll', handleScroll, true); }; - }, [isOpen]); - - var clickHandler = function clickHandler(event) { - if (selectRef.current !== event.target.closest('.form-field')) { - setOpen(false); - } - }; - - var handleScroll = function handleScroll(event) { - if (!event.target.closest('.select__body')) { - setOpen(false); - } - }; + }, [clickHandler, handleScroll, isOpen]); var toggleOpen = function toggleOpen() { - !disabled && setOpen(!isOpen); + if (isOpen) { + closeMenu(); + } else { + !disabled && openMenu(); + } }; var handleCloseSelectBody = (0, _react.useCallback)(function (event) { event.stopPropagation(); - if (!event.target.classList.contains('disabled') && !event.target.closest('.select__search')) { - setOpen(false); + if (!event.target.classList.contains('disabled') && !event.target.closest('.options-list__search')) { + closeMenu(); setSearchValue(''); } - }, []); + }, [closeMenu]); var handleSelectOptionClick = function handleSelectOptionClick(selectedOption, option) { if (selectedOption !== input.value) { @@ -149,7 +178,6 @@ var FormSelect = function FormSelect(_ref) { return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, { name: name, - component: "select", validate: required, children: function children(_ref3) { var input = _ref3.input, @@ -170,18 +198,21 @@ var FormSelect = function FormSelect(_ref) { }) }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", { "data-testid": "select-header", - className: "form-field__wrapper", - children: [!hideSelectedOption && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", { - "data-testid": "selected-option", - className: selectClassName, - children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", { - className: "form-field__select-value", - children: input.value && (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) - }), (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.subLabel) && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", { - "data-testid": "select-subLabel", - className: "sub-label", - children: selectedOption.subLabel - })] + className: selectWrapperClassNames, + children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", { + className: "form-field__control", + children: !hideSelectedOption && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", { + "data-testid": "selected-option", + className: "form-field__select", + children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", { + className: "form-field__select-value", + children: input.value && (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) + }), (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.subLabel) && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", { + "data-testid": "select-subLabel", + className: "form-field__select-sub_label", + children: selectedOption.subLabel + })] + }) }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", { className: "form-field__icons", children: [input.value && selectedItemAction && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, { @@ -204,8 +235,10 @@ var FormSelect = function FormSelect(_ref) { }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", { children: selectedItemAction.icon }) - }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropdown.ReactComponent, { - className: "form-field__caret" + }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", { + children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropdown.ReactComponent, { + className: "form-field__caret" + }) })] })] }), isConfirmDialogOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConfirmDialog.default, { @@ -230,7 +263,7 @@ var FormSelect = function FormSelect(_ref) { header: selectedItemAction.confirm.title, message: selectedItemAction.confirm.message }), isOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopUpDialog.default, { - className: "select__options-list", + className: "form-field__select__options-list", customPosition: { element: selectRef, position: 'bottom-right' @@ -240,10 +273,10 @@ var FormSelect = function FormSelect(_ref) { }, children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", { "data-testid": "select-body", - className: "select__body", + className: "options-list__body", onClick: handleCloseSelectBody, children: [search && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", { - className: "select__search", + className: "options-list__search", children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", { type: "text", placeholder: "Search...", @@ -266,7 +299,9 @@ var FormSelect = function FormSelect(_ref) { }, option.id); })] }) - })] + }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({}, input), {}, { + type: "hidden" + }))] }); } }); @@ -283,7 +318,7 @@ FormSelect.defaultProps = { search: false, selectType: '', withoutBorder: false, - withSelectedIcon: false + withSelectedIcon: true }; FormSelect.propTypes = { className: _propTypes.default.string, diff --git a/dist/components/FormSelect/formSelect.scss b/dist/components/FormSelect/formSelect.scss index 041fcee1..9290e691 100644 --- a/dist/components/FormSelect/formSelect.scss +++ b/dist/components/FormSelect/formSelect.scss @@ -1,303 +1,93 @@ @import '../../scss/mixins'; @import '../../scss/colors'; -@import '../../scss/borders'; @import '../../scss/shadows'; -.form-field { - position: relative; - display: block; - width: 100%; - - &__label { - margin-bottom: 5px; - color: $topaz; - font-size: 12px; - text-transform: capitalize; - background-color: transparent; - - &-disabled { - color: $spunPearl; - } - } - - &__select { - padding-left: 16px; - padding-right: 30px; - cursor: pointer; +@include formField; - @include fieldWrapper; - - &-active:not(.without-border) { +.form-field { + &__wrapper { + &-active { background: $alabaster; } - &-disabled { - color: $spunPearl; - cursor: not-allowed; + .form-field__caret { + cursor: pointer; } - &.without { - &-border { - border-color: transparent; - - .form-field__caret { - display: none; - } + &-disabled { + .form-field__caret { + cursor: not-allowed; - &:hover { - .form-field__caret { - display: block; - } + path { + fill: $spunPearl; } } - - &-label { - padding-left: 16px; - } } - &-dense { - padding-top: 12px; - padding-bottom: 12px; - } - - &-normal { - padding-top: 14px; - padding-bottom: 14px; - } + &.without-border { + .form-field__caret { + display: none; + } - &-medium { - padding-top: 16px; - padding-bottom: 16px; + &:hover { + .form-field__caret { + display: block; + } + } } + } - &-chunky { - padding-top: 18px; - padding-bottom: 18px; - } + &__select { + width: 100%; &-value { display: block; - min-height: 18px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } - } -} - -// .select { -// position: relative; -// display: flex; -// flex-flow: column; -// flex: 1 0; -// cursor: pointer; - -// @include fieldWrapper; - -// &__label { -// margin-bottom: 5px; -// color: $topaz; -// font-size: 12px; -// text-transform: capitalize; -// background-color: transparent; - -// &-mandatory { -// color: $amaranth; -// } - -// &-disabled { -// color: $spunPearl; - -// .form-field__label-mandatory { -// color: $spunPearl; -// } -// } -// } - -// &_active:not(.without-border) { -// background: $alabaster; -// } -// &__caret { -// position: absolute; -// top: 50%; -// right: 10px; -// transform: translate(0%, -50%); -// } - -// &.without { -// &-border { -// border: none; - -// .select__caret { -// display: none; -// } - -// &:hover { -// .select__caret { -// display: block; -// } -// } -// } - -// &-label { -// padding-left: 16px; -// } -// } - -// &__header { -// position: relative; -// display: flex; -// align-items: center; -// width: 100%; -// height: 100%; -// } - -// &__value { -// min-width: 96px; -// min-height: 1em; -// padding-right: 50px; -// overflow: hidden; -// color: $mulledWine; -// white-space: nowrap; -// text-overflow: ellipsis; - -// &_floating { -// position: relative; -// top: 6px; -// left: 16px; -// } -// } - -// &__label { -// top: 15px; -// left: 0; -// padding: 0 5px 0 16px; -// color: $topaz; -// font-size: 15px; -// text-transform: capitalize; -// transition: 200ms ease; - -// &_floating { -// position: absolute; -// top: 0; -// left: 0; -// padding-top: 9px; -// font-weight: 700; -// font-size: 10px; -// line-height: 12px; -// letter-spacing: 0.5px; -// transition: 200ms ease; -// } - -// &_top { -// position: absolute; -// top: -20px; -// left: 0; -// padding: 0; -// font-weight: bold; -// font-size: 12px; -// line-height: 15px; - -// & + .select__value { -// padding-left: 15px; -// } -// } -// } - -// &__options-list { -// .pop-up-dialog { -// width: 100%; -// padding: 0; - -// &__header { -// display: none; -// } -// } -// } - -// &.disabled { -// cursor: not-allowed; - -// .select__label, -// .select__value { -// color: $spunPearl; -// } -// } - -// .sub-label { -// margin-left: 5px; -// overflow: hidden; -// color: $topaz; -// white-space: nowrap; -// text-overflow: ellipsis; -// } - -// &__body { -// width: 100%; -// max-height: 250px; -// overflow-y: auto; -// color: $mulledWineTwo; -// background-color: $white; -// border: $primaryBorder; -// border-radius: 2px; -// box-shadow: $filterShadow; -// } - -// &__search { -// width: 100%; - -// input { -// width: 100%; -// padding: 10px; -// border: none; -// border-bottom: $primaryBorder; -// } -// } - -// .actions { -// position: absolute; -// right: 25px; -// } - -// .disabled { -// color: $spunPearl; -// cursor: default; -// user-select: none; - -// &:hover { -// background-color: $white; -// } -// } - -// .pop-up-dialog__overlay { -// top: 100%; -// right: calc(100% + 10px); -// } - -// &-dense { -// height: 40px; - -// .select__label_floating { -// padding-top: 6px; -// } -// } - -// &-normal { -// height: 48px; -// } + &-sub_label { + display: block; + margin-left: 5px; + overflow: hidden; + color: $topaz; + white-space: nowrap; + text-overflow: ellipsis; + } -// &-medium { -// height: 52px; + &__options-list { + .pop-up-dialog { + width: 100%; + padding: 0; -// .select__label_floating { -// padding-top: 11px; -// } -// } + &__header { + display: none; + } + } + .options-list { + &__body { + width: 100%; + max-height: 250px; + overflow-y: auto; + color: $mulledWineTwo; + background-color: $white; + border: $primaryBorder; + border-radius: 2px; + box-shadow: $filterShadow; + } -// &-chunky { -// height: 56px; + &__search { + width: 100%; -// .select__label_floating { -// padding-top: 13px; -// } -// } -// } + input { + width: 100%; + padding: 10px; + border: none; + border-bottom: $primaryBorder; + } + } + } + } + } +} diff --git a/dist/components/Wizard/Wizard.js b/dist/components/Wizard/Wizard.js index 9427db07..13f29a90 100644 --- a/dist/components/Wizard/Wizard.js +++ b/dist/components/Wizard/Wizard.js @@ -11,8 +11,6 @@ var _react = _interopRequireWildcard(require("react")); var _propTypes = _interopRequireDefault(require("prop-types")); -var _reactFinalForm = require("react-final-form"); - var _classnames = _interopRequireDefault(require("classnames")); var _Button = _interopRequireDefault(require("../Button/Button")); @@ -61,7 +59,7 @@ var Wizard = function Wizard(_ref) { var children = _ref.children, className = _ref.className, confirmClose = _ref.confirmClose, - initialValues = _ref.initialValues, + FormState = _ref.FormState, isWizardOpen = _ref.isWizardOpen, onWizardResolve = _ref.onWizardResolve, onWizardSubmit = _ref.onWizardSubmit, @@ -115,7 +113,7 @@ var Wizard = function Wizard(_ref) { return setActiveStepNumber(idx); }; - var _handleOnClose = function handleOnClose(FormState) { + var handleOnClose = function handleOnClose() { if (confirmClose && FormState && FormState.dirty) { (0, _common.openPopUp)(_ConfirmDialog.default, { cancelButton: { @@ -135,15 +133,19 @@ var Wizard = function Wizard(_ref) { } }; - var handleSubmit = function handleSubmit(values) { - if (isLastStep) { - onWizardSubmit(values); - } else { - goToNextStep(); + var handleSubmit = function handleSubmit() { + FormState.handleSubmit(); + + if (FormState.valid) { + if (isLastStep) { + onWizardSubmit(FormState.values); + } else { + goToNextStep(); + } } }; - var getDefaultActions = function getDefaultActions(FormState) { + var getDefaultActions = function getDefaultActions() { if (hasSteps) { return [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, { onClick: goToPreviousStep, @@ -151,22 +153,20 @@ var Wizard = function Wizard(_ref) { label: "Back", type: "button" }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, { - onClick: FormState.handleSubmit, - disabled: FormState.submitting, + onClick: handleSubmit, + disabled: FormState.submitting || FormState.invalid && FormState.submitFailed, label: isLastStep ? submitButtonLabel : 'Next', type: "button", variant: _constants.SECONDARY_BUTTON })]; } else { return [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, { - onClick: function onClick() { - return _handleOnClose(FormState); - }, + onClick: handleOnClose, label: "Cancel", type: "button" }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, { - onClick: FormState.handleSubmit, - disabled: FormState.submitting, + onClick: handleSubmit, + disabled: FormState.submitting || FormState.invalid && FormState.submitFailed, label: submitButtonLabel, type: "button", variant: _constants.SECONDARY_BUTTON @@ -174,7 +174,7 @@ var Wizard = function Wizard(_ref) { } }; - var renderModalActions = function renderModalActions(FormState) { + var renderModalActions = function renderModalActions() { var _stepsConfig$activeSt; if ((_stepsConfig$activeSt = stepsConfig[activeStepNumber]) !== null && _stepsConfig$activeSt !== void 0 && _stepsConfig$activeSt.getActions) { @@ -182,51 +182,37 @@ var Wizard = function Wizard(_ref) { FormState: FormState, goToNextStep: goToNextStep, goToPreviousStep: goToPreviousStep, - handleOnClose: function handleOnClose() { - return _handleOnClose(FormState); - } + handleOnClose: handleOnClose, + handleSubmit: handleSubmit }).map(function (action) { return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, _objectSpread({}, action)); }); } else { - return getDefaultActions(FormState); + return getDefaultActions(); } }; - return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, { - children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Form, { - initialValues: initialValues, - onSubmit: handleSubmit, - children: function children(FormState) { - return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Modal.default, { - actions: renderModalActions(FormState), - className: wizardClasses, - onClose: function onClose() { - return _handleOnClose(FormState); - }, - show: isWizardOpen, - size: size, - title: title, - children: [hasSteps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_WizardSteps.default, { - activeStepNumber: activeStepNumber, - jumpToStep: jumpToStep, - steps: stepsMenu - }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", { - className: "wizard-form__content", - children: [activeStepTemplate, /*#__PURE__*/(0, _jsxRuntime.jsx)("pre", { - children: JSON.stringify(FormState, null, 2) - })] - })] - }); - } - }) + return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Modal.default, { + actions: renderModalActions(), + className: wizardClasses, + onClose: handleOnClose, + show: isWizardOpen, + size: size, + title: title, + children: [hasSteps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_WizardSteps.default, { + activeStepNumber: activeStepNumber, + jumpToStep: jumpToStep, + steps: stepsMenu + }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", { + className: "wizard-form__content", + children: activeStepTemplate + })] }); }; Wizard.defaultProps = { className: '', confirmClose: false, - initialValues: {}, size: _constants.MODAL_MD, stepsConfig: [], submitButtonLabel: 'Submit' @@ -234,7 +220,7 @@ Wizard.defaultProps = { Wizard.propsTypes = { className: _propTypes.default.string, confirmClose: _propTypes.default.bool, - initialValues: _propTypes.default.object, + FormState: _propTypes.default.object.isRequired, isOpen: _propTypes.default.bool.isRequired, onResolve: _propTypes.default.func.isRequired, onSubmit: _propTypes.default.func.isRequired, diff --git a/dist/elements/OptionsMenu/OptionsMenu.js b/dist/elements/OptionsMenu/OptionsMenu.js index f45698dc..91dbc0cc 100644 --- a/dist/elements/OptionsMenu/OptionsMenu.js +++ b/dist/elements/OptionsMenu/OptionsMenu.js @@ -19,13 +19,12 @@ var _jsxRuntime = require("react/jsx-runtime"); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } -var OptionsMenu = function OptionsMenu(_ref) { +var OptionsMenu = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) { var children = _ref.children, - parentElement = _ref.parentElement, show = _ref.show, timeout = _ref.timeout; - var _ref2 = parentElement.current ? parentElement.current.getBoundingClientRect() : {}, + var _ref2 = ref.current ? ref.current.getBoundingClientRect() : {}, dropdownWidth = _ref2.width; return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, { @@ -36,7 +35,7 @@ var OptionsMenu = function OptionsMenu(_ref) { children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.PopUpDialog, { className: "options-menu", customPosition: { - element: parentElement, + element: ref, position: 'bottom-right' }, style: { @@ -48,7 +47,7 @@ var OptionsMenu = function OptionsMenu(_ref) { }) }) }); -}; +}); OptionsMenu.defaultProps = { children: [], diff --git a/dist/elements/SelectOption/SelectOption.js b/dist/elements/SelectOption/SelectOption.js index 03076043..c04d06e9 100644 --- a/dist/elements/SelectOption/SelectOption.js +++ b/dist/elements/SelectOption/SelectOption.js @@ -81,7 +81,7 @@ var SelectOption = function SelectOption(_ref) { SelectOption.defaultProps = { onClick: function onClick() {}, selectType: '', - withSelectedIcon: false + withSelectedIcon: true }; SelectOption.propTypes = { disabled: _propTypes.default.bool, diff --git a/dist/elements/index.js b/dist/elements/index.js new file mode 100644 index 00000000..7741b543 --- /dev/null +++ b/dist/elements/index.js @@ -0,0 +1,31 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +Object.defineProperty(exports, "OptionsMenu", { + enumerable: true, + get: function get() { + return _OptionsMenu.default; + } +}); +Object.defineProperty(exports, "SelectOption", { + enumerable: true, + get: function get() { + return _SelectOption.default; + } +}); +Object.defineProperty(exports, "ValidationTemplate", { + enumerable: true, + get: function get() { + return _ValidationTemplate.default; + } +}); + +var _OptionsMenu = _interopRequireDefault(require("./OptionsMenu/OptionsMenu")); + +var _SelectOption = _interopRequireDefault(require("./SelectOption/SelectOption")); + +var _ValidationTemplate = _interopRequireDefault(require("./ValidationTemplate/ValidationTemplate")); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } \ No newline at end of file diff --git a/dist/hooks/index.js b/dist/hooks/index.js new file mode 100644 index 00000000..14e67db0 --- /dev/null +++ b/dist/hooks/index.js @@ -0,0 +1,13 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +Object.defineProperty(exports, "useDetectOutsideClick", { + enumerable: true, + get: function get() { + return _useDetectOutsideClick.useDetectOutsideClick; + } +}); + +var _useDetectOutsideClick = require("./useDetectOutsideClick"); \ No newline at end of file diff --git a/dist/index.js b/dist/index.js index e717e62a..6d31a0b5 100644 --- a/dist/index.js +++ b/dist/index.js @@ -5,12 +5,20 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" = Object.defineProperty(exports, "__esModule", { value: true }); -exports.types = exports.hooks = exports.constants = exports.components = void 0; +exports.types = exports.hooks = exports.elements = exports.constants = exports.components = void 0; var components = _interopRequireWildcard(require("./components")); exports.components = components; +var constants = _interopRequireWildcard(require("./constants")); + +exports.constants = constants; + +var elements = _interopRequireWildcard(require("./elements")); + +exports.elements = elements; + var hooks = _interopRequireWildcard(require("./hooks")); exports.hooks = hooks; @@ -19,10 +27,6 @@ var types = _interopRequireWildcard(require("./types")); exports.types = types; -var constants = _interopRequireWildcard(require("./constants")); - -exports.constants = constants; - function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); } function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } \ No newline at end of file diff --git a/dist/scss/mixins.scss b/dist/scss/mixins.scss index 92451d39..5ba1a474 100644 --- a/dist/scss/mixins.scss +++ b/dist/scss/mixins.scss @@ -983,6 +983,10 @@ } @mixin fieldWrapper { + display: flex; + flex: 1; + flex-flow: row nowrap; + align-items: center; position: relative; width: 100%; color: $primary; @@ -990,3 +994,93 @@ border: $primaryBorder; border-radius: 4px; } + +@mixin formField { + .form-field { + position: relative; + display: flex; + flex-flow: column nowrap; + height: 100%; + width: 100%; + + &__label { + margin-bottom: 5px; + color: $topaz; + font-size: 12px; + text-align: left; + text-transform: capitalize; + background-color: transparent; + + &-mandatory { + color: $amaranth; + } + + &-disabled { + color: $spunPearl; + + .form-field__label-mandatory { + color: $spunPearl; + } + } + } + + &__wrapper { + @include fieldWrapper; + + &-disabled { + color: $spunPearl; + cursor: not-allowed; + } + + &-invalid { + border: $errorBorder; + } + + &.without-border { + border-color: transparent; + } + + &-dense { + padding-top: 12px; + padding-bottom: 12px; + } + + &-normal { + padding-top: 14px; + padding-bottom: 14px; + } + + &-medium { + padding-top: 16px; + padding-bottom: 16px; + } + + &-chunky { + padding-top: 18px; + padding-bottom: 18px; + } + } + + &__control { + position: relative; + display: flex; + flex: 1; + overflow: hidden; + padding: 0 8px 0 16px; + } + + &__icons { + display: flex; + flex-shrink: 0; + align-items: center; + margin-right: 4px; + min-height: 25px; + + & > * { + display: flex; + align-items: center; + padding: 0 4px; + } + } + } +} diff --git a/package.json b/package.json index dba6fe5b..a8b8f599 100644 --- a/package.json +++ b/package.json @@ -1,103 +1,103 @@ { - "name": "iguazio.dashboard-react-controls", - "version": "0.0.7", - "description": "Collection of resources (such as CSS styles, fonts and images) and ReactJS 17.x components to share among different Iguazio React repos.", - "main": "dist/index.js", - "module": "dist/index.js", - "files": [ - "dist", - "README.md" - ], - "repository": { - "type": "git", - "url": "git@github.com:iguazio/dashboard-react-controls.git" - }, - "keywords": [ - "Iguazio", - "iguazio", - "MLRun", - "mlrun" - ], - "peerDependencies": { - "classnames": "*", - "lodash": "*", - "prop-types": "*", - "react": "*", - "react-dom": "*", - "react-modal-promise": "*", - "react-transition-group": "*", - "final-form": "*", - "react-final-form": "*" - }, - "devDependencies": { - "@babel/cli": "^7.17.6", - "@babel/core": "^7.17.9", - "@babel/eslint-parser": "^7.17.0", - "@babel/plugin-transform-react-jsx": "^7.17.3", - "@babel/preset-env": "^7.16.11", - "@babel/preset-react": "^7.16.7", - "@storybook/addon-actions": "^6.4.22", - "@storybook/addon-essentials": "^6.4.22", - "@storybook/addon-interactions": "^6.4.22", - "@storybook/addon-links": "^6.4.22", - "@storybook/builder-webpack5": "^6.4.22", - "@storybook/manager-webpack5": "^6.4.22", - "@storybook/preset-create-react-app": "^4.1.0", - "@storybook/react": "^6.4.22", - "@storybook/testing-library": "0.0.9", - "@testing-library/jest-dom": "^5.16.4", - "@testing-library/react": "^12.1.5", - "@testing-library/user-event": "^13.5.0", - "babel-loader": "^8.2.4", - "babel-plugin-inline-react-svg": "^2.0.1", - "classnames": "^2.3.1", - "cross-env": "^7.0.3", - "eslint": "^8.8.0", - "eslint-config-prettier": "^8.3.0", - "eslint-config-react-app": "^7.0.0", - "eslint-plugin-prettier": "^4.0.0", - "eslint-plugin-storybook": "^0.5.10", - "eslint-webpack-plugin": "^3.1.1", - "lodash": "^4.17.21", - "node": "14.18.1", - "prettier": "^2.5.1", - "prop-types": "^15.8.1", - "react": "^17.0.2", - "react-dom": "^17.0.2", - "final-form": "^4.20.7", - "react-final-form": "^6.5.9", - "react-modal-promise": "^1.0.2", - "react-scripts": "5.0.0", - "react-transition-group": "^4.4.2", - "sass": "^1.50.0", - "web-vitals": "^2.1.4", - "webpack": "^5.72.0" - }, - "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", - "eject": "react-scripts eject", - "build-storybook": "build-storybook", - "storybook": "start-storybook -p 6006", - "compile": "rm -rf dist/* && babel src/lib --out-dir dist --copy-files --no-copy-ignored --ignore src/**/*.stories.js" - }, - "eslintConfig": { - "extends": [ - "react-app", - "react-app/jest" - ] - }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" + "name": "iguazio.dashboard-react-controls", + "version": "0.0.8", + "description": "Collection of resources (such as CSS styles, fonts and images) and ReactJS 17.x components to share among different Iguazio React repos.", + "main": "dist/index.js", + "module": "dist/index.js", + "files": [ + "dist", + "README.md" ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] - } + "repository": { + "type": "git", + "url": "git@github.com:iguazio/dashboard-react-controls.git" + }, + "keywords": [ + "Iguazio", + "iguazio", + "MLRun", + "mlrun" + ], + "peerDependencies": { + "classnames": "*", + "lodash": "*", + "prop-types": "*", + "react": "*", + "react-dom": "*", + "react-modal-promise": "*", + "react-transition-group": "*", + "final-form": "*", + "react-final-form": "*" + }, + "devDependencies": { + "@babel/cli": "^7.17.6", + "@babel/core": "^7.17.9", + "@babel/eslint-parser": "^7.17.0", + "@babel/plugin-transform-react-jsx": "^7.17.3", + "@babel/preset-env": "^7.16.11", + "@babel/preset-react": "^7.16.7", + "@storybook/addon-actions": "^6.4.22", + "@storybook/addon-essentials": "^6.4.22", + "@storybook/addon-interactions": "^6.4.22", + "@storybook/addon-links": "^6.4.22", + "@storybook/builder-webpack5": "^6.4.22", + "@storybook/manager-webpack5": "^6.4.22", + "@storybook/preset-create-react-app": "^4.1.0", + "@storybook/react": "^6.4.22", + "@storybook/testing-library": "0.0.9", + "@testing-library/jest-dom": "^5.16.4", + "@testing-library/react": "^12.1.5", + "@testing-library/user-event": "^13.5.0", + "babel-loader": "^8.2.4", + "babel-plugin-inline-react-svg": "^2.0.1", + "classnames": "^2.3.1", + "cross-env": "^7.0.3", + "eslint": "^8.8.0", + "eslint-config-prettier": "^8.3.0", + "eslint-config-react-app": "^7.0.0", + "eslint-plugin-prettier": "^4.0.0", + "eslint-plugin-storybook": "^0.5.10", + "eslint-webpack-plugin": "^3.1.1", + "lodash": "^4.17.21", + "node": "14.18.1", + "prettier": "^2.5.1", + "prop-types": "^15.8.1", + "react": "^17.0.2", + "react-dom": "^17.0.2", + "final-form": "^4.20.7", + "react-final-form": "^6.5.9", + "react-modal-promise": "^1.0.2", + "react-scripts": "5.0.0", + "react-transition-group": "^4.4.2", + "sass": "^1.50.0", + "web-vitals": "^2.1.4", + "webpack": "^5.72.0" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test", + "eject": "react-scripts eject", + "build-storybook": "build-storybook", + "storybook": "start-storybook -p 6006", + "compile": "rm -rf dist/* && babel src/lib --out-dir dist --copy-files --no-copy-ignored --ignore src/**/*.stories.js" + }, + "eslintConfig": { + "extends": [ + "react-app", + "react-app/jest" + ] + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + } }