@devtron-labs/devtron-fe-common-lib 0.0.18-beta-3 → 0.0.18-beta-6

package/dist/Common/ResizableTextarea.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ResizableTextareaProps } from './Types';
+export declare const ResizableTextarea: React.FC<ResizableTextareaProps>;

package/dist/Common/Toggle/Toggle.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import './Toggle.scss';
-declare const Toggle: ({ selected, onSelect, color, rootClassName, disabled, dataTestId, Icon, iconClass, ...props }: {
+declare const Toggle: ({ selected, onSelect, color, rootClassName, disabled, dataTestId, ...props }: {
     [x: string]: any;
     selected?: boolean;
     onSelect?: any;
@@ -8,7 +8,5 @@ declare const Toggle: ({ selected, onSelect, color, rootClassName, disabled, dat
     rootClassName?: string;
     disabled?: boolean;
     dataTestId?: string;
-    Icon?: any;
-    iconClass?: string;
 }) => JSX.Element;
 export default Toggle;

package/dist/Common/Types.d.ts

@@ -338,4 +338,19 @@ export interface UseSearchString {
         [key: string]: string;
     };
 }
+export interface ResizableTextareaProps {
+    minHeight?: number;
+    maxHeight?: number;
+    value?: string;
+    onChange?: (e: any) => void;
+    onBlur?: (e: any) => void;
+    onFocus?: (e: any) => void;
+    className?: string;
+    placeholder?: string;
+    lineHeight?: number;
+    padding?: number;
+    disabled?: boolean;
+    name?: string;
+    dataTestId?: string;
+}
 export {};

package/dist/Common/index.d.ts

@@ -34,3 +34,4 @@ export * from './Policy.Types';
 export { default as DeleteComponent } from './DeleteComponentModal/DeleteComponent';
 export * from './ImageTags';
 export * from './ImageTags.Types';
+export * from './ResizableTextarea';

package/dist/index.js

@@ -14925,7 +14925,7 @@ function Icon(_a) {
 }
 function Body(_a) {
     var title = _a.title, _b = _a.subtitle, subtitle = _b === void 0 ? null : _b, _c = _a.children, children = _c === void 0 ? null : _c;
-    return (jsxRuntime.jsxs("div", __assign({ className: "flex left column " }, { children: [jsxRuntime.jsx("h3", __assign({ className: "confirmation-dialog__title lh-1-5 dc__break-word w-100" }, { children: title })), subtitle && jsxRuntime.jsx("div", __assign({ className: "confirmation-dialog__subtitle" }, { children: subtitle })), children] })));
+    return (jsxRuntime.jsxs("div", __assign({ className: "flex left column " }, { children: [jsxRuntime.jsx("h3", __assign({ className: "confirmation-dialog__title lh-1-25 dc__break-word w-100" }, { children: title })), subtitle && jsxRuntime.jsx("div", __assign({ className: "confirmation-dialog__subtitle" }, { children: subtitle })), children] })));
 }
 function ButtonGroup(_a) {
     var children = _a.children;
@@ -22675,13 +22675,13 @@ var Checkbox = /** @class */ (function (_super) {
     return Checkbox;
 }(React.Component));
 
-var css_248z$2 = ".toggle__switch {\n  position: relative;\n  display: inline-block;\n  width: 100%;\n  height: 100%;\n}\n.toggle__switch.disabled {\n  cursor: not-allowed;\n}\n.toggle__switch.disabled .toggle__slider {\n  cursor: not-allowed;\n}\n\n/* Hide default HTML checkbox */\n.toggle__switch input {\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n\n/* The slider */\n.toggle__slider {\n  position: absolute;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: #ccc;\n  transition: all 0.4s ease;\n}\n.toggle__slider.round {\n  border-radius: 34px;\n}\n.toggle__slider.round:before {\n  border-radius: 50%;\n}\n.toggle__slider:before {\n  position: absolute;\n  content: \"\";\n  height: calc(100% - 8px);\n  width: calc(50% - 4px);\n  left: 4px;\n  bottom: 4px;\n  background-color: white;\n  transition: all 0.4s ease;\n}\n.toggle__slider.with-icon {\n  background-color: var(--N000) !important;\n}\n.toggle__slider.with-icon svg {\n  position: absolute;\n  content: \"\";\n  top: -1px;\n  left: -1px;\n  background-color: var(--N300);\n  transition: all 0.4s ease;\n}\n\ninput:checked + .toggle__slider {\n  background-color: var(--color);\n}\ninput:checked + .toggle__slider:before {\n  transform: translateX(100%);\n}\ninput:checked + .toggle__slider.with-icon svg {\n  transform: translateX(100%);\n  background-color: var(--color);\n}\n\ninput:focus + .toggle__slider {\n  box-shadow: 0 0 1px var(--color);\n}";
+var css_248z$2 = ".toggle__switch {\n  position: relative;\n  display: inline-block;\n  width: 100%;\n  height: 100%;\n}\n.toggle__switch.disabled {\n  cursor: not-allowed;\n}\n.toggle__switch.disabled .toggle__slider {\n  cursor: not-allowed;\n}\n\n/* Hide default HTML checkbox */\n.toggle__switch input {\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n\n/* The slider */\n.toggle__slider {\n  position: absolute;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: #ccc;\n  transition: all 0.4s ease;\n}\n\n.toggle__slider:before {\n  position: absolute;\n  content: \"\";\n  height: calc(100% - 8px);\n  width: calc(50% - 4px);\n  left: 4px;\n  bottom: 4px;\n  background-color: white;\n  transition: all 0.4s ease;\n}\n\ninput:checked + .toggle__slider {\n  background-color: var(--color);\n}\n\ninput:focus + .toggle__slider {\n  box-shadow: 0 0 1px var(--color);\n}\n\ninput:checked + .toggle__slider:before {\n  transform: translateX(100%);\n}\n\n/* Rounded sliders */\n.toggle__slider.round {\n  border-radius: 34px;\n}\n\n.toggle__slider.round:before {\n  border-radius: 50%;\n}";
 styleInject(css_248z$2);
 
 var Toggle = function (_a) {
     var _b;
-    var _c = _a.selected, selected = _c === void 0 ? false : _c, _d = _a.onSelect, onSelect = _d === void 0 ? null : _d, _e = _a.color, color = _e === void 0 ? '#36b37e' : _e, _f = _a.rootClassName, rootClassName = _f === void 0 ? '' : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g, _h = _a.dataTestId, dataTestId = _h === void 0 ? 'handle-toggle-button' : _h, _j = _a.Icon, Icon = _j === void 0 ? null : _j, _k = _a.iconClass, iconClass = _k === void 0 ? '' : _k, props = __rest(_a, ["selected", "onSelect", "color", "rootClassName", "disabled", "dataTestId", "Icon", "iconClass"]);
-    var _l = __read(React.useState(selected), 2), active = _l[0], setActive = _l[1];
+    var _c = _a.selected, selected = _c === void 0 ? false : _c, _d = _a.onSelect, onSelect = _d === void 0 ? null : _d, _e = _a.color, color = _e === void 0 ? "#36b37e" : _e, _f = _a.rootClassName, rootClassName = _f === void 0 ? "" : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g, _h = _a.dataTestId, dataTestId = _h === void 0 ? "handle-toggle-button" : _h, props = __rest(_a, ["selected", "onSelect", "color", "rootClassName", "disabled", "dataTestId"]);
+    var _j = __read(React.useState(selected), 2), active = _j[0], setActive = _j[1];
     useEffectAfterMount(function () {
         if (typeof onSelect === 'function') {
             if (active !== selected) {
@@ -22697,7 +22697,7 @@ var Toggle = function (_a) {
             setActive(function (active) { return !active; });
         }
     }
-    return (jsxRuntime.jsxs("label", __assign({}, props, { className: "".concat(rootClassName, " toggle__switch ").concat(disabled ? 'disabled' : ''), style: (_b = {}, _b['--color'] = color, _b) }, { children: [jsxRuntime.jsx("input", { type: "checkbox", checked: !!active, onChange: handleClick, className: "toggle__input" }), jsxRuntime.jsx("span", __assign({ className: "toggle__slider ".concat(Icon ? 'with-icon br-4 dc__border' : 'round'), "data-testid": dataTestId }, { children: Icon && jsxRuntime.jsx(Icon, { className: "icon-dim-20 br-4 p-2 ".concat(iconClass) }) }))] })));
+    return (jsxRuntime.jsxs("label", __assign({}, props, { className: "".concat(rootClassName, " toggle__switch ").concat(disabled ? 'disabled' : ''), style: (_b = {}, _b['--color'] = color, _b) }, { children: [jsxRuntime.jsx("input", { type: "checkbox", checked: !!active, onChange: handleClick, className: "toggle__input" }), jsxRuntime.jsx("span", { className: "toggle__slider round", "data-testid": dataTestId })] })));
 };
 
 var css_248z$1 = ".modal-body--scan-details {\n    position: fixed;\n    top: 0;\n    right: 0;\n    background: var(--N000);\n    width: 800px;\n}\n\n.security-tab__table {\n    width: 100%;\n}\n\n.security-tab__table-header {\n    border-bottom: solid 1px var(--N200);\n}\n\n.security-cell-header {\n    font-size: 12px;\n    font-weight: 600;\n    line-height: 1.5;\n    letter-spacing: normal;\n    text-transform: uppercase;\n    color: var(--N500);\n}\n\n.dc__security-tab__table-row {\n    font-size: 13px;\n    font-weight: normal;\n    line-height: 1.54;\n    letter-spacing: normal;\n    color: var(--N900);\n    box-shadow: inset 0 -1px 0 0 #f5f5f5;\n}\n\n.security-tab__cell-cve,\n.security-tab__cell-severity,\n.security-tab__cell-package,\n.security-tab__cell-current-ver,\n.security-tab__cell-fixed-ver,\n.security-tab__cell-policy {\n    padding: 10px;\n}\n\n.security-tab__cell-cve {\n    padding-left: 0px;\n    text-align: left;\n    width: 20%;\n}\n\n.security-tab__cell-policy {\n    padding-right: 0px;\n}\n\n.security-tab__cell-policy--whitelist,\n.security-tab__cell-policy--whitelisted {\n    color: var(--G500);\n    text-transform: capitalize;\n}\n\n.security-tab__cell-policy--block {\n    color: var(--R500);\n    text-transform: capitalize;\n}\n\n.scanned-object__results {\n    margin: 0 20px;\n}";
@@ -23307,6 +23307,41 @@ var AddImageButton = function (_a) {
     return (jsxRuntime.jsx("div", __assign({ className: "add-tag-button flex pt-12 pr-12", "data-testid": "add-tags-button", onClick: handleClick }, { children: jsxRuntime.jsxs("div", __assign({ className: "lh-16 flex" }, { children: [jsxRuntime.jsx(SvgIcAdd, { className: "icon-dim-16 cn-6" }), jsxRuntime.jsx("span", __assign({ className: "cn-7" }, { children: "Add tags/comment" }))] })) })));
 };
 
+var ResizableTextarea = function (_a) {
+    var minHeight = _a.minHeight, maxHeight = _a.maxHeight, value = _a.value, _b = _a.onChange, onChange = _b === void 0 ? null : _b, _c = _a.onBlur, onBlur = _c === void 0 ? null : _c, _d = _a.onFocus, onFocus = _d === void 0 ? null : _d, _e = _a.className, className = _e === void 0 ? '' : _e, _f = _a.placeholder, placeholder = _f === void 0 ? 'Enter your text here..' : _f, _g = _a.lineHeight, lineHeight = _g === void 0 ? 14 : _g, _h = _a.padding, padding = _h === void 0 ? 12 : _h, _j = _a.disabled, disabled = _j === void 0 ? false : _j, dataTestId = _a.dataTestId, props = __rest(_a, ["minHeight", "maxHeight", "value", "onChange", "onBlur", "onFocus", "className", "placeholder", "lineHeight", "padding", "disabled", "dataTestId"]);
+    var _k = __read(React.useState(''), 2), text = _k[0], setText = _k[1];
+    var _textRef = React.useRef(null);
+    React.useEffect(function () {
+        setText(value);
+    }, [value]);
+    function handleChange(e) {
+        e.persist();
+        setText(e.target.value);
+        if (typeof onChange === 'function')
+            onChange(e);
+    }
+    function handleBlur(e) {
+        if (typeof onBlur === 'function')
+            onBlur(e);
+    }
+    function handleFocus(e) {
+        if (typeof onFocus === 'function')
+            onFocus(e);
+    }
+    useThrottledEffect(function () {
+        _textRef.current.style.height = 'auto';
+        var nextHeight = _textRef.current.scrollHeight;
+        if (minHeight && nextHeight < minHeight) {
+            nextHeight = minHeight;
+        }
+        if (maxHeight && nextHeight > maxHeight) {
+            nextHeight = maxHeight;
+        }
+        _textRef.current.style.height = nextHeight + 2 + 'px';
+    }, 500, [text]);
+    return (jsxRuntime.jsx("textarea", __assign({ "data-testid": dataTestId, ref: function (el) { return (_textRef.current = el); }, value: text, placeholder: placeholder, className: "dc__resizable-textarea ".concat(className), onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, style: { lineHeight: "".concat(lineHeight, "px"), padding: "".concat(padding, "px") }, spellCheck: false, disabled: disabled }, props)));
+};
+
 exports.BreadCrumb = BreadCrumb;
 exports.BreadcrumbStore = Store;
 exports.BuildStageVariable = BuildStageVariable;
@@ -23353,6 +23388,7 @@ exports.RadioGroupItem = RadioGroupItem;
 exports.Reload = Reload;
 exports.RequestTimeout = RequestTimeout;
 exports.ResizableTagTextArea = ResizableTagTextArea;
+exports.ResizableTextarea = ResizableTextarea;
 exports.ScanVulnerabilitiesTable = ScanVulnerabilitiesTable;
 exports.ServerError = ServerError;
 exports.ServerErrors = ServerErrors;

package/package.json

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

package/src/Common/Dialogs/ConfirmationDialog.tsx

@@ -17,7 +17,7 @@ function Icon({ src, className = '' }: ConfirmationDialogIconType) {
 function Body({ title, subtitle = null, children = null }: ConfirmationDialogBodyType) {
     return (
         <div className="flex left column ">
-            <h3 className="confirmation-dialog__title lh-1-5 dc__break-word w-100">{title}</h3>
+            <h3 className="confirmation-dialog__title lh-1-25 dc__break-word w-100">{title}</h3>
             {subtitle && <div className="confirmation-dialog__subtitle">{subtitle}</div>}
             {children}
         </div>

package/src/Common/ResizableTextarea.tsx

@@ -0,0 +1,73 @@
+import React, { useState, useEffect, useRef } from 'react'
+import { useThrottledEffect } from './Helper'
+import { ResizableTextareaProps } from './Types'
+
+export const ResizableTextarea: React.FC<ResizableTextareaProps> = ({
+                                                                        minHeight,
+                                                                        maxHeight,
+                                                                        value,
+                                                                        onChange = null,
+                                                                        onBlur = null,
+                                                                        onFocus = null,
+                                                                        className = '',
+                                                                        placeholder = 'Enter your text here..',
+                                                                        lineHeight = 14,
+                                                                        padding = 12,
+                                                                        disabled = false,
+                                                                        dataTestId,
+                                                                        ...props
+                                                                    }) => {
+    const [text, setText] = useState('')
+    const _textRef = useRef(null)
+
+    useEffect(() => {
+        setText(value)
+    }, [value])
+
+    function handleChange(e) {
+        e.persist()
+        setText(e.target.value)
+        if (typeof onChange === 'function') onChange(e)
+    }
+
+    function handleBlur(e) {
+        if (typeof onBlur === 'function') onBlur(e)
+    }
+
+    function handleFocus(e) {
+        if (typeof onFocus === 'function') onFocus(e)
+    }
+
+    useThrottledEffect(
+        () => {
+            _textRef.current.style.height = 'auto'
+            let nextHeight = _textRef.current.scrollHeight
+            if (minHeight && nextHeight < minHeight) {
+                nextHeight = minHeight
+            }
+            if (maxHeight && nextHeight > maxHeight) {
+                nextHeight = maxHeight
+            }
+            _textRef.current.style.height = nextHeight + 2 + 'px'
+        },
+        500,
+        [text],
+    )
+
+    return (
+        <textarea
+            data-testid={dataTestId}
+            ref={(el) => (_textRef.current = el)}
+            value={text}
+            placeholder={placeholder}
+            className={`dc__resizable-textarea ${className}`}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            onFocus={handleFocus}
+            style={{ lineHeight: `${lineHeight}px`, padding: `${padding}px` }}
+            spellCheck={false}
+            disabled={disabled}
+            {...props}
+        />
+    )
+}

package/src/Common/Toggle/Toggle.scss

@@ -4,14 +4,15 @@
     width: 100%;
     height: 100%;
 
-    &.disabled {
+    &.disabled{
         cursor: not-allowed;
-        .toggle__slider {
+        .toggle__slider{
             cursor: not-allowed;
         }
     }
 }
 
+
 /* Hide default HTML checkbox */
 
 .toggle__switch input {
@@ -20,6 +21,7 @@
     height: 0;
 }
 
+
 /* The slider */
 
 .toggle__slider {
@@ -30,49 +32,39 @@
     right: 0;
     bottom: 0;
     background-color: #ccc;
+    transition: all .4s ease;
+}
+
+.toggle__slider:before {
+    position: absolute;
+    content: "";
+    height: calc( 100% - 8px);
+    width: calc( 50% - 4px);
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
     transition: all 0.4s ease;
-    &.round {
-        border-radius: 34px;
-        &:before {
-            border-radius: 50%;
-        }
-    }
-    &:before {
-        position: absolute;
-        content: '';
-        height: calc(100% - 8px);
-        width: calc(50% - 4px);
-        left: 4px;
-        bottom: 4px;
-        background-color: white;
-        transition: all 0.4s ease;
-    }
-    &.with-icon {
-        background-color: var(--N000) !important;
-        svg {
-            position: absolute;
-            content: '';
-            top: -1px;
-            left: -1px;
-            background-color: var(--N300);
-            transition: all 0.4s ease;
-        }
-    }
 }
 
-input:checked + .toggle__slider {
+input:checked+.toggle__slider {
     background-color: var(--color);
-    &:before {
-        transform: translateX(calc(100%));
-    }
-    &.with-icon {
-        svg {
-            transform: translateX(calc(100%));
-            background-color: var(--color);
-        }
-    }
 }
 
-input:focus + .toggle__slider {
+input:focus+.toggle__slider {
     box-shadow: 0 0 1px var(--color);
 }
+
+input:checked+.toggle__slider:before {
+    transform: translateX(calc( 100%));
+}
+
+
+/* Rounded sliders */
+
+.toggle__slider.round {
+    border-radius: 34px;
+}
+
+.toggle__slider.round:before {
+    border-radius: 50%;
+}

package/src/Common/Toggle/Toggle.tsx

@@ -1,35 +1,25 @@
-import React from 'react'
-import { useEffectAfterMount } from '../Helper'
+import React from 'react';
+import { useEffectAfterMount } from '../Helper';
 import './Toggle.scss'
 
-const Toggle = ({
-    selected = false,
-    onSelect = null,
-    color = '#36b37e',
-    rootClassName = '',
-    disabled = false,
-    dataTestId = 'handle-toggle-button',
-    Icon = null,
-    iconClass= '',
-    ...props
-}) => {
-    const [active, setActive] = React.useState(selected)
+const Toggle = ({selected=false, onSelect=null, color="#36b37e", rootClassName="", disabled=false, dataTestId="handle-toggle-button", ...props})=>{
+    const [active, setActive] = React.useState(selected);
 
-    useEffectAfterMount(() => {
-        if (typeof onSelect === 'function') {
-            if (active !== selected) {
+    useEffectAfterMount(()=>{
+        if(typeof onSelect === 'function'){
+            if(active !== selected){
                 onSelect(active)
             }
         }
-    }, [active])
+    },[active])
 
     useEffectAfterMount(() => {
         setActive(selected)
     }, [selected])
 
-    function handleClick(e) {
-        if (!disabled) {
-            setActive((active) => !active)
+    function handleClick(e){
+        if(!disabled){
+            setActive(active=>!active)
         }
     }
 
@@ -40,11 +30,9 @@ const Toggle = ({
             style={{ ['--color' as any]: color }}
         >
             <input type="checkbox" checked={!!active} onChange={handleClick} className="toggle__input" />
-            <span className={`toggle__slider ${Icon ? 'with-icon br-4 dc__border' : 'round'}`} data-testid={dataTestId}>
-                {Icon && <Icon className={`icon-dim-20 br-4 p-2 ${iconClass}`} />}
-            </span>
+            <span className="toggle__slider round" data-testid={dataTestId}></span>
         </label>
     )
 }
 
-export default Toggle
+export default Toggle

package/src/Common/Types.ts

@@ -371,4 +371,20 @@ export interface UseSearchString {
     searchParams: {
         [key: string]: string
     }
+}
+
+export interface ResizableTextareaProps {
+    minHeight?: number
+    maxHeight?: number
+    value?: string
+    onChange?: (e) => void
+    onBlur?: (e) => void
+    onFocus?: (e) => void
+    className?: string
+    placeholder?: string
+    lineHeight?: number
+    padding?: number
+    disabled?: boolean
+    name?: string
+    dataTestId?: string
 }

package/src/Common/index.ts

@@ -34,3 +34,4 @@ export * from './Policy.Types'
 export { default as DeleteComponent } from './DeleteComponentModal/DeleteComponent'
 export * from './ImageTags'
 export * from './ImageTags.Types'
+export * from './ResizableTextarea'