@devtron-labs/devtron-fe-common-lib 0.0.26-beta-2 → 0.0.26-beta-3

package/package.json

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

package/src/Assets/Icon/ic-error-cross.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+    <g fill="none" fill-rule="evenodd">
+        <g transform="translate(2.667 2.667)">
+            <rect width="26.667" height="26.667" class="fill-color" fill="#596168" rx="13.333"/>
+            <path fill="#FFF" fill-rule="nonzero" d="M8.62 8.62c.52-.521 1.364-.521 1.885 0l2.828 2.827 2.829-2.828a1.334 1.334 0 0 1 1.777-.097l.108.097c.521.521.521 1.365 0 1.886l-2.828 2.828 2.828 2.829c.486.486.519 1.254.098 1.777l-.098.108c-.52.521-1.365.521-1.885 0l-2.83-2.828-2.827 2.828a1.334 1.334 0 0 1-1.777.098l-.109-.098a1.333 1.333 0 0 1 0-1.885l2.828-2.83-2.828-2.827a1.334 1.334 0 0 1-.097-1.777z"/>
+        </g>
+    </g>
+</svg>

package/src/Common/CustomTagSelector/ResizableTagTextArea.tsx

@@ -15,7 +15,6 @@ export function ResizableTagTextArea({
     refVar,
     dependentRef,
     dataTestId,
-    handleKeyDown,
 }: ResizableTagTextAreaProps) {
     const [text, setText] = useState('')
 
@@ -30,12 +29,10 @@ export function ResizableTagTextArea({
 
     const reInitHeight = () => {
         if (document.activeElement !== refVar.current) return
-        refVar.current.style.height = minHeight + 'px'
-        if (dependentRef) {
-            dependentRef.current.style.height = minHeight + 'px'
-        }
+        refVar.current.style.height = minHeight+ 'px'
+        dependentRef.current.style.height = minHeight+ 'px'
         let nextHeight = refVar.current.scrollHeight
-        if (dependentRef && nextHeight < dependentRef.current.scrollHeight) {
+        if (nextHeight < dependentRef.current.scrollHeight) {
             nextHeight = dependentRef.current.scrollHeight
         }
         if (minHeight && nextHeight < minHeight) {
@@ -45,18 +42,14 @@ export function ResizableTagTextArea({
             nextHeight = maxHeight
         }
         refVar.current.style.height = nextHeight + 'px'
-        if (dependentRef) {
-            dependentRef.current.style.height = nextHeight + 'px'
-        }
+        dependentRef.current.style.height = nextHeight + 'px'
     }
 
     useThrottledEffect(reInitHeight, 500, [text])
 
     const handleOnBlur = (event) => {
-        refVar.current.style.height = minHeight + 'px'
-        if (dependentRef) {
-            dependentRef.current.style.height = minHeight + 'px'
-        }
+        refVar.current.style.height = minHeight+ 'px'
+        dependentRef.current.style.height = minHeight+ 'px'
         onBlur && onBlur(event)
     }
 
@@ -78,7 +71,6 @@ export function ResizableTagTextArea({
             onFocus={handleOnFocus}
             tabIndex={tabIndex}
             data-testid={dataTestId}
-            onKeyDown={handleKeyDown}
         />
     )
 }

package/src/Common/CustomTagSelector/Types.ts

@@ -68,5 +68,4 @@ export interface ResizableTagTextAreaProps {
     refVar?: React.MutableRefObject<HTMLTextAreaElement>
     dependentRef?: React.MutableRefObject<HTMLTextAreaElement>
     dataTestId?: string
-    handleKeyDown?: any   
 }

package/src/Common/DebouncedSearch/DebouncedSearch.tsx

@@ -0,0 +1,75 @@
+import React, { useEffect, useState } from 'react'
+import { useDebouncedEffect } from './Utils'
+import { ReactComponent as ICClear } from '../../Assets/Icon/ic-error-cross.svg'
+import { DebouncedSearchProps } from './Types'
+
+/**
+ * @param onSearch - Callback function to be called on search
+ * @param Icon - (Optional) Icon to be shown before the input
+ * @param iconClass - (Optional) Class for the icon
+ * @param children - (Optional) In case we want to add another button or any other element
+ * @param placeholder - (Optional) Placeholder for the input
+ * @param containerClass - (Optional) Class for the container
+ * @param inputClass - (Optional) Class for the input field
+ * @param debounceTimeout - (Optional) Timeout for the debounce with default value of 500ms
+ * @param clearSearch - (Optional) To clear the search text
+ * @param showClearIcon - (Optional) To show the clear icon default value is true
+ */
+export default function DebouncedSearch({
+    onSearch,
+    Icon,
+    children,
+    placeholder,
+    containerClass = '',
+    iconClass = '',
+    inputClass = '',
+    debounceTimeout = 500,
+    clearSearch,
+    showClearIcon = true,
+}: DebouncedSearchProps) {
+    const [searchText, setSearchText] = useState<string>('')
+
+    useEffect(() => {
+        setSearchText('')
+    }, [clearSearch])
+
+    const handleSearchTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setSearchText(e.target.value)
+    }
+
+    const handleClearSearch = () => {
+        setSearchText('')
+    }
+
+    useDebouncedEffect(() => onSearch(searchText), debounceTimeout, [searchText, onSearch])
+
+    return (
+        <div className={containerClass}>
+            {Icon && <Icon className={iconClass} />}
+
+            <input
+                type="text"
+                className={inputClass}
+                placeholder={placeholder ?? 'Search'}
+                value={searchText}
+                onChange={handleSearchTextChange}
+                autoFocus
+                data-testid="debounced-search"
+            />
+
+            {showClearIcon && !!searchText && (
+                <button
+                    type="button"
+                    className="dc__outline-none-imp dc__no-border p-0 bc-n50 flex"
+                    onClick={handleClearSearch}
+                    data-testid="clear-search"
+                >
+                    <ICClear className="icon-dim-20 icon-n6" />
+                </button>
+            )}
+
+            {/* In case we want to add another button or something  */}
+            {children}
+        </div>
+    )
+}

package/src/Common/DebouncedSearch/Types.ts

@@ -0,0 +1,12 @@
+export interface DebouncedSearchProps {
+    onSearch: (query: string) => void
+    Icon?: React.FunctionComponent<React.SVGProps<SVGSVGElement>>
+    placeholder?: string
+    inputClass?: string
+    containerClass?: string
+    iconClass?: string
+    children?: React.ReactNode
+    debounceTimeout?: number
+    clearSearch?: boolean
+    showClearIcon?: boolean
+}

package/src/Common/DebouncedSearch/Utils.ts

@@ -0,0 +1,19 @@
+import { useEffect, useRef } from 'react'
+
+export function useDebouncedEffect(callback, delay, deps: unknown[] = []) {
+    // function will be executed only after the specified time once the user stops firing the event.
+    const firstUpdate = useRef(true)
+    useEffect(() => {
+        if (firstUpdate.current) {
+            firstUpdate.current = false
+            return
+        }
+        const handler = setTimeout(() => {
+            callback()
+        }, delay)
+
+        return () => {
+            clearTimeout(handler)
+        }
+    }, [delay, ...deps])
+}

package/src/Common/DebouncedSearch/__tests__/DebouncedSearch.test.tsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { ReactComponent as ICClear } from '../../../../assets/icons/ic-error.svg'
+import DebouncedSearch from '../DebouncedSearch'
+
+jest.mock('../../helpers/Helpers', () => ({
+    useDebouncedEffect: jest.fn().mockImplementation((fn) => fn()),
+}))
+
+describe('When DebouncedSearch mounts', () => {
+    it('should have a input field', () => {
+        render(<DebouncedSearch onSearch={jest.fn()} />)
+        expect(screen.getByRole('textbox')).toBeTruthy()
+    })
+
+    it('should have a clear icon when clearSearch is true and user has typed something', () => {
+        const { getByTestId } = render(<DebouncedSearch onSearch={jest.fn()} clearSearch debounceTimeout={0} />)
+        fireEvent.change(screen.getByRole('textbox'), { target: { value: 'test' } })
+        expect(getByTestId('clear-search')).toBeTruthy()
+    })
+
+    it('should call onSearch when input value changes', () => {
+        const onSearch = jest.fn()
+        render(<DebouncedSearch onSearch={onSearch} debounceTimeout={0} />)
+        fireEvent.change(screen.getByRole('textbox'), { target: { value: 'test' } })
+        expect(onSearch).toHaveBeenCalled()
+    })
+
+    it('should clear input value when clear icon is clicked', () => {
+        const { container } = render(<DebouncedSearch onSearch={jest.fn()} clearSearch debounceTimeout={0} />)
+        fireEvent.change(screen.getByRole('textbox'), { target: { value: 'test' } })
+        const inputBar = container.querySelector('input')
+        expect(inputBar.value).toBe('test')
+        fireEvent.click(screen.getByRole('button'))
+        expect(inputBar.value).toBe('')
+    })
+
+    it('should have a placeholder', () => {
+        render(<DebouncedSearch onSearch={jest.fn()} placeholder="test" />)
+        expect(screen.getByPlaceholderText('test')).toBeTruthy()
+    })
+
+    it('should not show clear icon when showClearIcon is false', () => {
+        render(<DebouncedSearch onSearch={jest.fn()} showClearIcon={false} />)
+        expect(screen.queryByRole('button')).toBeNull()
+    })
+
+    it('should have a custom Icon', () => {
+        const { container } = render(<DebouncedSearch onSearch={jest.fn()} Icon={ICClear} iconClass="icon-class" />)
+        expect(container.querySelector('.icon-class')).toBeTruthy()
+    })
+
+    it('should support children', () => {
+        render(
+            <DebouncedSearch onSearch={jest.fn()}>
+                <div>test</div>
+            </DebouncedSearch>,
+        )
+        expect(screen.getByText('test')).toBeTruthy()
+    })
+})

package/src/Common/Grid/Grid.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import { GridProps } from './types'
+
+// This is meant to be a reusable component that will provide a grid like dynamic layout where xs is the number of columns out of 12 that the item will take up
+export default function Grid({
+    container,
+    spacing = 0,
+    item,
+    xs,
+    containerClass = '',
+    itemClass = '',
+    children,
+}: GridProps) {
+    const containerStyles = container ? { gap: spacing + 'px' } : {}
+
+    if (item) {
+        const getColumnWidth = () => {
+            const percentageWidth = (xs / 12) * 100
+            // DONT CHANGE IT FROM CALC SINCE CALC CONVERTS TO PX which is needed to handle text overflow
+            return `calc(${percentageWidth}%)`
+        }
+
+        const itemStyles = {
+            flex: `1 1 ${getColumnWidth()}`,
+        }
+
+        return (
+            <div className={`p-0 ${itemClass}`} style={itemStyles}>
+                {children}
+            </div>
+        )
+    }
+
+    return (
+        <div className={`flex-wrap flexbox ${container ? containerClass : ''}`} style={containerStyles}>
+            {children}
+        </div>
+    )
+}

package/src/Common/Grid/types.ts

@@ -0,0 +1,9 @@
+export interface GridProps {
+    container?: boolean
+    spacing?: number
+    item?: boolean
+    xs?: number
+    containerClass?: string
+    itemClass?: string
+    children?: React.ReactNode
+}

package/src/Common/index.ts

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