@devtron-labs/devtron-fe-common-lib 0.0.44 → 0.0.45-beta-1

package/dist/Common/Helper.d.ts

@@ -1,6 +1,6 @@
 import * as Sentry from '@sentry/browser';
 import React from 'react';
-import { AsyncOptions, UseSearchString } from './Types';
+import { AsyncOptions, CustomInputProps, UseSearchString } from './Types';
 export declare function showError(serverError: any, showToastOnUnknownError?: boolean, hideAccessError?: boolean): void;
 interface ConditionalWrapper<T> {
     condition: boolean;
@@ -12,7 +12,7 @@ export declare function sortCallback(key: string, a: any, b: any, isCaseSensitiv
 export declare const stopPropagation: (event: any) => void;
 export declare function useThrottledEffect(callback: any, delay: any, deps?: any[]): void;
 export declare function getRandomColor(email: string): string;
-export declare const getAlphabetIcon: (str: string) => JSX.Element;
+export declare const getAlphabetIcon: (str: string, rootClassName?: string) => JSX.Element;
 export declare const getEmptyArrayOfLength: (length: number) => unknown[];
 export declare function noop(...args: any[]): any;
 export declare function not(e: any): boolean;
@@ -25,22 +25,7 @@ export declare function useForm(stateSchema: any, validationSchema: {}, callback
     handleOnChange: (event: any) => void;
     handleOnSubmit: (event: any) => void;
 };
-export declare function CustomInput({ name, value, error, onChange, onBlur, onFocus, label, type, disabled, autoComplete, labelClassName, placeholder, tabIndex, dataTestid, }: {
-    name: any;
-    value: any;
-    error: any;
-    onChange: any;
-    onBlur?: (e: any) => void;
-    onFocus?: (e: any) => void;
-    label: any;
-    type?: string;
-    disabled?: boolean;
-    autoComplete?: string;
-    labelClassName?: string;
-    placeholder?: string;
-    tabIndex?: number;
-    dataTestid?: string;
-}): JSX.Element;
+export declare function CustomInput({ name, value, error, onChange, onBlur, onFocus, label, type, disabled, labelClassName, placeholder, tabIndex, dataTestid, isRequiredField, autoFocus, rootClassName, }: CustomInputProps): JSX.Element;
 export declare function handleUTCTime(ts: string, isRelativeTime?: boolean): string;
 export declare function useSearchString(): UseSearchString;
 export declare const closeOnEscKeyPressed: (e: any, actionClose: () => void) => void;

package/dist/Common/Types.d.ts

@@ -563,4 +563,22 @@ export interface CiPipeline {
     isOffendingMandatoryPlugin?: boolean;
     pipelineType?: string;
 }
+export interface CustomInputProps {
+    name: string;
+    value: string;
+    error?: React.ReactNode;
+    onChange: (e: any) => void;
+    onBlur?: (e: any) => void;
+    onFocus?: (e: any) => void;
+    label?: React.ReactNode;
+    type?: string;
+    disabled?: boolean;
+    labelClassName?: string;
+    placeholder?: string;
+    tabIndex?: number;
+    dataTestid?: string;
+    isRequiredField?: boolean;
+    autoFocus?: boolean;
+    rootClassName?: string;
+}
 export {};

package/dist/index.js

@@ -9956,10 +9956,11 @@ function getRandomColor(email) {
     }
     return colors$1[sum % colors$1.length];
 }
-var getAlphabetIcon = function (str) {
+var getAlphabetIcon = function (str, rootClassName) {
+    if (rootClassName === void 0) { rootClassName = ""; }
     if (!str)
         return null;
-    return (jsxRuntime.jsx("span", __assign({ className: "alphabet-icon__initial fs-13 icon-dim-20 flex cn-0 mr-8", style: { backgroundColor: getRandomColor(str) } }, { children: str[0] })));
+    return (jsxRuntime.jsx("span", __assign({ className: "".concat(rootClassName, " alphabet-icon__initial fs-13 icon-dim-20 flex cn-0 mr-8"), style: { backgroundColor: getRandomColor(str) } }, { children: str[0] })));
 };
 var getEmptyArrayOfLength = function (length) {
     return Array.from({ length: length });
@@ -10095,11 +10096,11 @@ function handleError(error) {
     return error;
 }
 function CustomInput(_a) {
-    var name = _a.name, value = _a.value, error = _a.error, onChange = _a.onChange, _b = _a.onBlur, onBlur = _b === void 0 ? function (e) { } : _b, _c = _a.onFocus, onFocus = _c === void 0 ? function (e) { } : _c, label = _a.label, _d = _a.type, type = _d === void 0 ? 'text' : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e; _a.autoComplete; var _g = _a.labelClassName, labelClassName = _g === void 0 ? '' : _g, _h = _a.placeholder, placeholder = _h === void 0 ? '' : _h, _j = _a.tabIndex, tabIndex = _j === void 0 ? 1 : _j, _k = _a.dataTestid, dataTestid = _k === void 0 ? '' : _k;
-    return (jsxRuntime.jsxs("div", __assign({ className: "flex column left top" }, { children: [jsxRuntime.jsx("label", __assign({ className: "form__label ".concat(labelClassName) }, { children: label })), jsxRuntime.jsx("input", { "data-testid": dataTestid, type: type, name: name, autoComplete: "off", className: "form__input", onChange: function (e) {
+    var name = _a.name, value = _a.value, error = _a.error, onChange = _a.onChange, _b = _a.onBlur, onBlur = _b === void 0 ? function (e) { } : _b, _c = _a.onFocus, onFocus = _c === void 0 ? function (e) { } : _c, label = _a.label, _d = _a.type, type = _d === void 0 ? 'text' : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.labelClassName, labelClassName = _f === void 0 ? '' : _f, _g = _a.placeholder, placeholder = _g === void 0 ? '' : _g, _h = _a.tabIndex, tabIndex = _h === void 0 ? 1 : _h, _j = _a.dataTestid, dataTestid = _j === void 0 ? '' : _j, _k = _a.isRequiredField, isRequiredField = _k === void 0 ? false : _k, _l = _a.autoFocus, autoFocus = _l === void 0 ? true : _l, _m = _a.rootClassName, rootClassName = _m === void 0 ? '' : _m;
+    return (jsxRuntime.jsxs("div", __assign({ className: "flex column left top" }, { children: [label ? (jsxRuntime.jsx("label", __assign({ className: "form__label ".concat(labelClassName, " ").concat(isRequiredField ? 'dc__required-field' : '') }, { children: label }))) : (''), jsxRuntime.jsx("input", { "data-testid": dataTestid, type: type, name: name, autoComplete: "off", className: "form__input ".concat(rootClassName), onChange: function (e) {
                     e.persist();
                     onChange(e);
-                }, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder, value: value, disabled: disabled, tabIndex: tabIndex }), handleError(error).map(function (err) { return (jsxRuntime.jsxs("div", __assign({ className: "form__error" }, { children: [jsxRuntime.jsx(SvgIcWarning, { className: "form__icon form__icon--error" }), err] }), err)); })] })));
+                }, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder, value: value, disabled: disabled, tabIndex: tabIndex, autoFocus: autoFocus }), handleError(error).map(function (err) { return (jsxRuntime.jsxs("div", __assign({ className: "form__error" }, { children: [jsxRuntime.jsx(SvgIcWarning, { className: "form__icon form__icon--error" }), err] }), err)); })] })));
 }
 function handleUTCTime(ts, isRelativeTime) {
     if (isRelativeTime === void 0) { isRelativeTime = false; }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.44",
+    "version": "0.0.45-beta-1",
     "description": "Supporting common component library",
     "main": "dist/index.js",
     "scripts": {

package/src/Common/Helper.tsx

@@ -7,7 +7,7 @@ import { ReactComponent as FormError } from '../Assets/Icon/ic-warning.svg'
 import { ERROR_EMPTY_SCREEN, TOKEN_COOKIE_NAME } from './Constants'
 import { ServerErrors } from './ServerError'
 import { toastAccessDenied } from './ToastBody'
-import { AsyncOptions, AsyncState, UseSearchString } from './Types'
+import { AsyncOptions, AsyncState, CustomInputProps, UseSearchString } from './Types'
 
 toast.configure({
     autoClose: 3000,
@@ -116,11 +116,11 @@ export function getRandomColor(email: string): string {
     return colors[sum % colors.length]
 }
 
-export const getAlphabetIcon = (str: string) => {
+export const getAlphabetIcon = (str: string, rootClassName: string = "") => {
     if (!str) return null
     return (
         <span
-            className="alphabet-icon__initial fs-13 icon-dim-20 flex cn-0 mr-8"
+            className={`${rootClassName} alphabet-icon__initial fs-13 icon-dim-20 flex cn-0 mr-8`}
             style={{ backgroundColor: getRandomColor(str) }}
         >
             {str[0]}
@@ -299,21 +299,29 @@ export function CustomInput({
     label,
     type = 'text',
     disabled = false,
-    autoComplete = 'off',
     labelClassName = '',
     placeholder = '',
     tabIndex = 1,
     dataTestid = '',
-}) {
+    isRequiredField = false,
+    autoFocus = true,
+    rootClassName = '',
+}: CustomInputProps) {
     return (
         <div className="flex column left top">
-            <label className={`form__label ${labelClassName}`}>{label}</label>
+            {label ? (
+                <label className={`form__label ${labelClassName} ${isRequiredField ? 'dc__required-field' : ''}`}>
+                    {label}
+                </label>
+            ) : (
+                ''
+            )}
             <input
                 data-testid={dataTestid}
                 type={type}
                 name={name}
                 autoComplete="off"
-                className="form__input"
+                className={`form__input ${rootClassName}`}
                 onChange={(e) => {
                     e.persist()
                     onChange(e)
@@ -324,6 +332,7 @@ export function CustomInput({
                 value={value}
                 disabled={disabled}
                 tabIndex={tabIndex}
+                autoFocus={autoFocus}
             />
             {handleError(error).map((err) => (
                 <div className="form__error" key={err}>

package/src/Common/Types.ts

@@ -623,3 +623,22 @@ export interface CiPipeline {
     isOffendingMandatoryPlugin?: boolean
     pipelineType?: string
 }
+
+export interface CustomInputProps {
+    name: string
+    value: string
+    error?: React.ReactNode
+    onChange: (e: any) => void
+    onBlur?: (e: any) => void
+    onFocus?: (e: any) => void
+    label?: React.ReactNode
+    type?: string
+    disabled?: boolean
+    labelClassName?: string
+    placeholder?: string
+    tabIndex?: number
+    dataTestid?: string
+    isRequiredField?: boolean
+    autoFocus?: boolean
+    rootClassName?: string
+}