@devtron-labs/devtron-fe-common-lib 0.0.52 → 0.0.53-beta-2

package/package.json

@@ -1,12 +1,16 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.52",
+    "version": "0.0.53-beta-2",
     "description": "Supporting common component library",
     "main": "dist/index.js",
     "scripts": {
+        "prepare": "node -e \"try { require('husky').install() } catch (e) {}\"",
+        "lint": "tsc --noEmit && eslint 'src/**/*.{js,jsx,ts,tsx}' --max-warnings 0",
+        "lint-fix": "eslint 'src/**/*.{js,jsx,ts,tsx}' --fix",
         "test": "exit 0",
         "build-lib": "rollup -c --bundleConfigAsCjs",
-        "build-watch": "rollup -c --bundleConfigAsCjs -w"
+        "build-watch": "rollup -c --bundleConfigAsCjs -w",
+        "lint-staged": "lint-staged"
     },
     "repository": {
         "type": "git",
@@ -30,7 +34,20 @@
         "@types/react": "17.0.39",
         "@types/react-dom": "17.0.13",
         "@types/react-router-dom": "^5.3.3",
+        "@typescript-eslint/eslint-plugin": "^6.17.0",
+        "@typescript-eslint/parser": "^6.17.0",
+        "eslint": "^8.56.0",
+        "eslint-config-airbnb": "^19.0.4",
+        "eslint-config-prettier": "^9.1.0",
+        "eslint-plugin-import": "^2.29.1",
+        "eslint-plugin-jsx-a11y": "^6.8.0",
+        "eslint-plugin-prettier": "^5.1.2",
+        "eslint-plugin-react": "^7.33.2",
+        "eslint-plugin-react-hooks": "^4.6.0",
+        "husky": "^7.0.4",
+        "lint-staged": "^12.5.0",
         "moment": "^2.29.4",
+        "prettier": "^3.1.1",
         "react-select": "5.2.2",
         "react-toastify": "^8.2.0",
         "rollup": "^3.10.0",

package/src/Assets/Icon/ic-search.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <g fill="none" fill-rule="evenodd">
+        <path d="M0 0h24v24H0z"/>
+        <path fill="#959BA1" d="M10 2a8 8 0 0 1 6.32 12.905l5.044 5.045a1 1 0 1 1-1.414 1.414l-5.045-5.043A8 8 0 1 1 10 2zm0 2a6 6 0 1 0 0 12 6 6 0 0 0 0-12z"/>
+    </g>
+</svg>

package/src/Common/DebouncedSearch/DebouncedSearch.tsx

@@ -4,6 +4,8 @@ import { ReactComponent as ICClear } from '../../Assets/Icon/ic-error-cross.svg'
 import { DebouncedSearchProps } from './Types'
 
 /**
+ * @deprecated Use `SearchBar` component instead.
+ *
  * @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

package/src/Common/Helper.tsx

@@ -559,3 +559,18 @@ export function getLockedJSON(json, jsonPathArray: string[]) {
     return resultJson['$']
 }
 
+/**
+ * Returns a debounced variant of the function
+ */
+export const debounce = (func, timeout = 500) => {
+    let timer
+
+    return function (this, ...args) {
+        const context = this
+        if (timer) clearTimeout(timer)
+        timer = setTimeout(() => {
+            timer = null
+            func.apply(context, args)
+        }, timeout)
+    }
+}

package/src/Common/SearchBar/SearchBar.component.tsx

@@ -0,0 +1,79 @@
+import { ChangeEvent, FunctionComponent, useCallback, useState } from 'react'
+import { ReactComponent as Search } from '../../Assets/Icon/ic-search.svg'
+import { ReactComponent as Clear } from '../../Assets/Icon/ic-error-cross.svg'
+import { SearchBarProps } from './types'
+import './searchBar.scss'
+import { debounce, noop } from '../Helper'
+
+/**
+ * Generic search input component with support for enter based and debounced search
+ */
+const SearchBar: FunctionComponent<SearchBarProps> = ({
+    initialSearchText = '',
+    handleSearchChange = noop,
+    handleEnter = noop,
+    inputProps = {},
+    containerClassName,
+    shouldDebounce = false,
+    debounceTimeout = 300,
+}) => {
+    const [isSearchApplied, setIsSearchApplied] = useState(!!initialSearchText)
+    const debouncedSearchChange = useCallback(debounce(handleSearchChange, debounceTimeout), [
+        handleSearchChange,
+        debounceTimeout,
+    ])
+
+    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+        const { value } = e.target
+        setIsSearchApplied(!!value)
+        if (shouldDebounce) {
+            debouncedSearchChange(value)
+        } else {
+            handleSearchChange(value)
+        }
+    }
+
+    const handleKeyDown = (e) => {
+        const keyCode = e.key
+
+        if (keyCode === 'Enter') {
+            const event = { ...e, target: { ...e.target, value: e.target.value?.trim() } }
+            handleSearchChange(event.target.value)
+            handleEnter(event)
+        }
+    }
+
+    const clearSearch = () => {
+        handleSearchChange('')
+    }
+
+    return (
+        <div className={containerClassName}>
+            <div className="search-bar dc__position-rel en-2 bw-1 br-4 h-32">
+                <Search className="search-bar__icon icon-dim-18" />
+                <input
+                    placeholder="Search"
+                    {...inputProps}
+                    type="text"
+                    data-testid="search-bar"
+                    defaultValue={initialSearchText}
+                    className={`search-bar__input bcn-0 ${isSearchApplied ? 'search-bar__input--applied' : ''}`}
+                    onChange={handleChange}
+                    onKeyDown={handleKeyDown}
+                />
+                {isSearchApplied && (
+                    <button
+                        className="flex search-bar__clear-button"
+                        type="button"
+                        onClick={clearSearch}
+                        aria-label="Clear search"
+                    >
+                        <Clear className="icon-dim-18 icon-n4 dc__vertical-align-middle" />
+                    </button>
+                )}
+            </div>
+        </div>
+    )
+}
+
+export default SearchBar

package/src/Common/SearchBar/searchBar.scss

@@ -0,0 +1,65 @@
+.search-bar {
+    margin-right: 0;
+    margin-bottom: 0;
+    background-color: var(--N0);
+    display: block;
+    width: 100%;
+    min-width: 200px;
+    height: 32px;
+    position: relative;
+
+    &:focus, &:focus-within {
+        outline: none;
+        border: solid 1px var(--B500);
+    }
+
+    &__input {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        border-radius: 4px;
+        border: none;
+        padding: 6px 10px 6px 30px;
+        font-size: 13px;
+        line-height: 20px;
+        color: var(--N900);
+
+        &--applied {
+            width: calc(100% - 22px);
+        }
+
+        &:focus,
+        &:focus-visible {
+            border: none;
+            outline: none;
+        }
+
+        &::placeholder {
+            font-weight: 400;
+            color: var(--N500);
+        }
+    }
+
+    &__icon {
+        position: absolute;
+        z-index: 1;
+        color: var(--N600);
+        top: 50%;
+        left: 8px;
+        transform: translateY(-50%);
+        line-height: 1.9;
+    }
+
+    &__clear-button {
+        background-color: transparent;
+        position: absolute;
+        right: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        z-index: 1;
+        border: none;
+        padding: 2px;
+        color: var(--N600);
+        margin: 0px 5px;
+    }
+}

package/src/Common/SearchBar/types.ts

@@ -0,0 +1,36 @@
+import { InputHTMLAttributes, SyntheticEvent } from 'react'
+
+export interface SearchBarProps {
+    /**
+     * Initial search text
+     *
+     * @default ''
+     */
+    initialSearchText?: string
+    /**
+     * Search handler for the search input
+     */
+    handleSearchChange?: (searchText: string) => void
+    /**
+     * Enter event handler for the search input
+     */
+    handleEnter?: (event: SyntheticEvent) => void
+    /**
+     * Input props for the search input
+     */
+    inputProps?: InputHTMLAttributes<HTMLInputElement>
+    /**
+     * Class name for the container; can be used for handling width
+     */
+    containerClassName?: string
+    /**
+     * If true, the change handler would be triggered with debounce
+     *
+     * @default false
+     */
+    shouldDebounce?: boolean
+    /**
+     * Timeout for the debounce handler to be triggered
+     */
+    debounceTimeout?: number
+}

package/src/Common/index.ts

@@ -26,6 +26,7 @@ export * from './Common.service'
 export * from './Checkbox'
 export { default as EmptyState } from './EmptyState/EmptyState'
 export { default as GenericEmptyState } from './EmptyState/GenericEmptyState'
+export { default as SearchBar } from './SearchBar/SearchBar.component'
 export { default as Toggle } from './Toggle/Toggle'
 export { default as ScanVulnerabilitiesTable } from './Security/ScanVulnerabilitiesTable'
 export { default as StyledRadioGroup } from './RadioGroup/RadioGroup'