@app-garage/text-input - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

CHANGELOG.md

 # Change Log
 
+## 1.2.0
+
+### Minor Changes
+
+- [`df30cb8`](https://github.com/electronic33/ag-ui-react/commit/df30cb8df8629d307375b209d40dccc1d81d8c98) Thanks [@Levi1235](https://github.com/Levi1235)! - classes
+
+### Patch Changes
+
+- Updated dependencies [[`df30cb8`](https://github.com/electronic33/ag-ui-react/commit/df30cb8df8629d307375b209d40dccc1d81d8c98)]:
+  - @app-garage/label@1.3.0
+  - @app-garage/button@1.4.0
+
 ## 1.1.0
@@ -4,0 +16,0 @@

dist/index.es.js

@@ -1,2 +0,2 @@
-import React, { forwardRef, useState } from 'react';
+import React, { forwardRef } from 'react';
 import classNames from 'classnames';
@@ -6,34 +6,2 @@ import { Label } from '@app-garage/label';
 
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-function __read(o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-}
-
 function useTextInputValues(_a) {
@@ -55,5 +23,3 @@ var _b, _c, _d;
         formikCompatibleError =
-            ((_b = form.errors) === null || _b === void 0 ? void 0 : _b[field.name]) && ((_c = form.touched) === null || _c === void 0 ? void 0 : _c[field.name])
-                ? (_d = form.errors) === null || _d === void 0 ? void 0 : _d[field === null || field === void 0 ? void 0 : field.name]
-                : '';
+            ((_b = form.errors) === null || _b === void 0 ? void 0 : _b[field.name]) && ((_c = form.touched) === null || _c === void 0 ? void 0 : _c[field.name]) ? (_d = form.errors) === null || _d === void 0 ? void 0 : _d[field === null || field === void 0 ? void 0 : field.name] : '';
     }
@@ -97,5 +63,5 @@ var formikCompatibleName = '';
 var TextInput = forwardRef(function (_a, ref) {
+    // const [isFocused, setIsFocused] = useState(false);
     var id = _a.id, label = _a.label, secondaryLabel = _a.secondaryLabel, Icon = _a.Icon, withRequiredIndicator = _a.withRequiredIndicator, name = _a.name, value = _a.value, onChange = _a.onChange, onClick = _a.onClick, onKeyDown = _a.onKeyDown, onEnterPress = _a.onEnterPress, onButtonClick = _a.onButtonClick, error = _a.error, containerClassName = _a.containerClassName, labelClassName = _a.labelClassName, inputClassName = _a.inputClassName, _b = _a.type, type = _b === void 0 ? 'text' : _b, max = _a.max, withMax = _a.withMax, placeholder = _a.placeholder, field = _a.field, form = _a.form, onBlur = _a.onBlur, onFocus = _a.onFocus, withErrorInLabel = _a.withErrorInLabel, isDisabled = _a.isDisabled, withButton = _a.withButton, buttonText = _a.buttonText;
-    var _c = __read(useState(false), 2), isFocused = _c[0], setIsFocused = _c[1];
-    var _d = useTextInputValues({
+    var _c = useTextInputValues({
         field: field,
@@ -108,12 +74,12 @@ form: form,
         onBlur: onBlur,
-    }), formikCompatibleValue = _d.formikCompatibleValue, formikCompatibleError = _d.formikCompatibleError, formikCompatibleOnBlur = _d.formikCompatibleOnBlur, formikCompatibleOnChange = _d.formikCompatibleOnChange, formikCompatibleName = _d.formikCompatibleName;
-    return (React.createElement("div", { className: classNames('flex flex-col relative', containerClassName) },
+    }), formikCompatibleValue = _c.formikCompatibleValue, formikCompatibleError = _c.formikCompatibleError, formikCompatibleOnBlur = _c.formikCompatibleOnBlur, formikCompatibleOnChange = _c.formikCompatibleOnChange, formikCompatibleName = _c.formikCompatibleName;
+    return (React.createElement("div", { className: classNames('text-input-container', containerClassName) },
         label && (React.createElement(Label, { className: labelClassName, secondaryText: secondaryLabel, withRequiredIndicator: withRequiredIndicator, errorText: withErrorInLabel ? formikCompatibleError : undefined, htmlFor: formikCompatibleName },
-            Icon ? React.createElement(Icon, { className: "w-5 mr-2" }) : null,
+            Icon ? React.createElement(Icon, { className: "text-input-label-icon" }) : null,
             label)),
-        React.createElement("div", { className: classNames('flex justify-between h-10 rounded-md shadow transition-all hover:shadow-md ', {
-                'shadow-md': isFocused,
+        React.createElement("div", { className: classNames('text-input-input-wrapper', {
+            // 'text-input-input-wrapper-focus': isFocused,
             }) },
             React.createElement("input", { onFocus: function (event) {
-                    setIsFocused(true);
+                    // setIsFocused(true);
                     if (onFocus) {
@@ -123,7 +89,7 @@ onFocus(event);
                 }, onBlur: function (event) {
-                    setIsFocused(false);
+                    // setIsFocused(false);
                     formikCompatibleOnBlur(event);
-                }, ref: ref, placeholder: placeholder, type: type, className: classNames('w-full outline-none ml-2', {
-                    'border-red-700': Boolean(formikCompatibleError),
-                    'bg-gray-200 cursor-not-allowed': isDisabled,
+                }, ref: ref, placeholder: placeholder, type: type, className: classNames('text-input-input', {
+                    'text-input-input-error': Boolean(formikCompatibleError),
+                    'text-input-input-disabled': isDisabled,
                 }, inputClassName), value: formikCompatibleValue, onChange: formikCompatibleOnChange, onClick: onClick, onKeyDown: function (event) {
@@ -137,7 +103,13 @@ if (event.code === 'Enter' && onEnterPress) {
                 }, name: formikCompatibleName, id: id || formikCompatibleName, max: max, disabled: isDisabled }),
-            withButton && (React.createElement(Button, { onFocus: function () { return setIsFocused(true); }, onBlur: function () { return setIsFocused(false); }, className: "flex-shrink-0 hover:bg-blue-600 rounded-l-none active:shadow-inner outline-none", onClick: onButtonClick }, buttonText))),
-        withMax && (React.createElement("p", { className: "flex absolute right-0 bottom-0 text-gray-400 -mb-4 text-xs" }, String(formikCompatibleValue).length + "/" + max)),
-        !withErrorInLabel && formikCompatibleError && (React.createElement("p", { className: "flex absolute inset-x-0 bottom-0 text-red-700 -mb-4 text-xs" }, formikCompatibleError))));
+            withButton && (React.createElement(Button
+            // onFocus={() => setIsFocused(true)}
+            // onBlur={() => setIsFocused(false)}
+            , { 
+                // onFocus={() => setIsFocused(true)}
+                // onBlur={() => setIsFocused(false)}
+                className: "text-input-input-button", onClick: onButtonClick }, buttonText))),
+        withMax && (React.createElement("p", { className: "text-input-with-max" }, String(formikCompatibleValue).length + "/" + max)),
+        !withErrorInLabel && formikCompatibleError && (React.createElement("p", { className: "text-input-with-error" }, formikCompatibleError))));
 });
 
 export { TextInput, useTextInputValues };

dist/index.js

@@ -15,34 +15,2 @@ 'use strict';
 
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-function __read(o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-}
-
 function useTextInputValues(_a) {
@@ -64,5 +32,3 @@ var _b, _c, _d;
         formikCompatibleError =
-            ((_b = form.errors) === null || _b === void 0 ? void 0 : _b[field.name]) && ((_c = form.touched) === null || _c === void 0 ? void 0 : _c[field.name])
-                ? (_d = form.errors) === null || _d === void 0 ? void 0 : _d[field === null || field === void 0 ? void 0 : field.name]
-                : '';
+            ((_b = form.errors) === null || _b === void 0 ? void 0 : _b[field.name]) && ((_c = form.touched) === null || _c === void 0 ? void 0 : _c[field.name]) ? (_d = form.errors) === null || _d === void 0 ? void 0 : _d[field === null || field === void 0 ? void 0 : field.name] : '';
     }
@@ -106,5 +72,5 @@ var formikCompatibleName = '';
 var TextInput = React.forwardRef(function (_a, ref) {
+    // const [isFocused, setIsFocused] = useState(false);
     var id = _a.id, label$1 = _a.label, secondaryLabel = _a.secondaryLabel, Icon = _a.Icon, withRequiredIndicator = _a.withRequiredIndicator, name = _a.name, value = _a.value, onChange = _a.onChange, onClick = _a.onClick, onKeyDown = _a.onKeyDown, onEnterPress = _a.onEnterPress, onButtonClick = _a.onButtonClick, error = _a.error, containerClassName = _a.containerClassName, labelClassName = _a.labelClassName, inputClassName = _a.inputClassName, _b = _a.type, type = _b === void 0 ? 'text' : _b, max = _a.max, withMax = _a.withMax, placeholder = _a.placeholder, field = _a.field, form = _a.form, onBlur = _a.onBlur, onFocus = _a.onFocus, withErrorInLabel = _a.withErrorInLabel, isDisabled = _a.isDisabled, withButton = _a.withButton, buttonText = _a.buttonText;
-    var _c = __read(React.useState(false), 2), isFocused = _c[0], setIsFocused = _c[1];
-    var _d = useTextInputValues({
+    var _c = useTextInputValues({
         field: field,
@@ -117,12 +83,12 @@ form: form,
         onBlur: onBlur,
-    }), formikCompatibleValue = _d.formikCompatibleValue, formikCompatibleError = _d.formikCompatibleError, formikCompatibleOnBlur = _d.formikCompatibleOnBlur, formikCompatibleOnChange = _d.formikCompatibleOnChange, formikCompatibleName = _d.formikCompatibleName;
-    return (React__default['default'].createElement("div", { className: classNames__default['default']('flex flex-col relative', containerClassName) },
+    }), formikCompatibleValue = _c.formikCompatibleValue, formikCompatibleError = _c.formikCompatibleError, formikCompatibleOnBlur = _c.formikCompatibleOnBlur, formikCompatibleOnChange = _c.formikCompatibleOnChange, formikCompatibleName = _c.formikCompatibleName;
+    return (React__default['default'].createElement("div", { className: classNames__default['default']('text-input-container', containerClassName) },
         label$1 && (React__default['default'].createElement(label.Label, { className: labelClassName, secondaryText: secondaryLabel, withRequiredIndicator: withRequiredIndicator, errorText: withErrorInLabel ? formikCompatibleError : undefined, htmlFor: formikCompatibleName },
-            Icon ? React__default['default'].createElement(Icon, { className: "w-5 mr-2" }) : null,
+            Icon ? React__default['default'].createElement(Icon, { className: "text-input-label-icon" }) : null,
             label$1)),
-        React__default['default'].createElement("div", { className: classNames__default['default']('flex justify-between h-10 rounded-md shadow transition-all hover:shadow-md ', {
-                'shadow-md': isFocused,
+        React__default['default'].createElement("div", { className: classNames__default['default']('text-input-input-wrapper', {
+            // 'text-input-input-wrapper-focus': isFocused,
             }) },
             React__default['default'].createElement("input", { onFocus: function (event) {
-                    setIsFocused(true);
+                    // setIsFocused(true);
                     if (onFocus) {
@@ -132,7 +98,7 @@ onFocus(event);
                 }, onBlur: function (event) {
-                    setIsFocused(false);
+                    // setIsFocused(false);
                     formikCompatibleOnBlur(event);
-                }, ref: ref, placeholder: placeholder, type: type, className: classNames__default['default']('w-full outline-none ml-2', {
-                    'border-red-700': Boolean(formikCompatibleError),
-                    'bg-gray-200 cursor-not-allowed': isDisabled,
+                }, ref: ref, placeholder: placeholder, type: type, className: classNames__default['default']('text-input-input', {
+                    'text-input-input-error': Boolean(formikCompatibleError),
+                    'text-input-input-disabled': isDisabled,
                 }, inputClassName), value: formikCompatibleValue, onChange: formikCompatibleOnChange, onClick: onClick, onKeyDown: function (event) {
@@ -146,5 +112,11 @@ if (event.code === 'Enter' && onEnterPress) {
                 }, name: formikCompatibleName, id: id || formikCompatibleName, max: max, disabled: isDisabled }),
-            withButton && (React__default['default'].createElement(button.Button, { onFocus: function () { return setIsFocused(true); }, onBlur: function () { return setIsFocused(false); }, className: "flex-shrink-0 hover:bg-blue-600 rounded-l-none active:shadow-inner outline-none", onClick: onButtonClick }, buttonText))),
-        withMax && (React__default['default'].createElement("p", { className: "flex absolute right-0 bottom-0 text-gray-400 -mb-4 text-xs" }, String(formikCompatibleValue).length + "/" + max)),
-        !withErrorInLabel && formikCompatibleError && (React__default['default'].createElement("p", { className: "flex absolute inset-x-0 bottom-0 text-red-700 -mb-4 text-xs" }, formikCompatibleError))));
+            withButton && (React__default['default'].createElement(button.Button
+            // onFocus={() => setIsFocused(true)}
+            // onBlur={() => setIsFocused(false)}
+            , { 
+                // onFocus={() => setIsFocused(true)}
+                // onBlur={() => setIsFocused(false)}
+                className: "text-input-input-button", onClick: onButtonClick }, buttonText))),
+        withMax && (React__default['default'].createElement("p", { className: "text-input-with-max" }, String(formikCompatibleValue).length + "/" + max)),
+        !withErrorInLabel && formikCompatibleError && (React__default['default'].createElement("p", { className: "text-input-with-error" }, formikCompatibleError))));
 });
@@ -151,0 +123,0 @@

package.json

 {
   "name": "@app-garage/text-input",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "author": "Matyas Furtos",
@@ -32,4 +32,4 @@ "license": "MIT",
   "dependencies": {
-    "@app-garage/button": "^1.2.0",
-    "@app-garage/label": "^1.2.0",
+    "@app-garage/button": "^1.4.0",
+    "@app-garage/label": "^1.3.0",
     "classnames": "^2.3.1"
@@ -36,0 +36,0 @@ },

No alert changes

Worsened metrics

Total package byte prevSize

21486

decreased by-9.88%

Lines of code

296

decreased by-14.45%

Dependency changes

• Updated@app-garage/button@^1.4.0

• Updated@app-garage/label@^1.3.0