@devtron-labs/devtron-fe-common-lib 0.0.55 → 0.0.56

package/src/Common/Pagination/Pagination.tsx

@@ -1,127 +0,0 @@
-import { useEffect, useState } from 'react'
-import PageSizeSelector from './PageSizeSelector'
-import { Page, PageValueItemProps, PaginationProps } from './types'
-import { createPageArr } from './utils'
-import './pagination.scss'
-
-const PageValueItem = ({ value, isSelected, selectPage }: PageValueItemProps) => {
-    const classes = isSelected ? 'page__button page__button--selected' : 'page__button'
-    const handlePageSelection = () => {
-        selectPage(value)
-    }
-
-    return (
-        <li className="page">
-            <button className={classes} onClick={handlePageSelection} type="button">
-                {value}
-            </button>
-        </li>
-    )
-}
-
-// NOTE: This component will heavily benefit from data normalization
-const Pagination = ({
-    size,
-    pageSize,
-    offset,
-    changePage,
-    changePageSize,
-    isPageSizeFix,
-    pageSizeOptions,
-    rootClassName,
-}: PaginationProps) => {
-    const [pages, setPages] = useState<Page[]>([])
-
-    useEffect(() => {
-        const _pages = createPageArr({ size, pageSize, selectedPageNo: 1 })
-        setPages(_pages)
-    }, [size, pageSize])
-
-    useEffect(() => {
-        const selectedPageNo = 1 + Math.floor(offset / pageSize)
-        const _pages = createPageArr({ size, pageSize, selectedPageNo })
-        setPages(_pages)
-    }, [offset])
-
-    const selectPage = (selectedPageNo: number): void => {
-        const _pages = createPageArr({ size, pageSize, selectedPageNo })
-        setPages(_pages)
-        changePage(selectedPageNo)
-    }
-
-    const selectPreviousPage = (): void => {
-        const currPage = pages.find((page) => page.selected)
-        const selectedPageNo = currPage.value - 1
-        selectPage(selectedPageNo)
-    }
-
-    const selectNextPage = (): void => {
-        const currPage = pages.find((page) => page.selected)
-        const selectedPageNo = currPage.value + 1
-        selectPage(selectedPageNo)
-    }
-
-    const lastPageNo = offset + pageSize < size ? offset + pageSize : size
-    const pageNoIndex = pages.findIndex((page) => page.selected)
-    const visiblePages = pages.filter((page) => page.isVisible)
-    return (
-        // TODO: Remove pagination-wrapper from dashboard
-        <div className={rootClassName || ''}>
-            <div className="page-number">
-                {offset + 1} - {lastPageNo} of {size}
-            </div>
-
-            <ul className="pagination">
-                <li className="page">
-                    <button
-                        className="page__button page__button--icon"
-                        disabled={!pageNoIndex}
-                        onClick={selectPreviousPage}
-                        type="button"
-                        aria-label="Previous page"
-                    >
-                        <span className="left-icon">
-                            <i className="fa fa-chevron-left" />
-                        </span>
-                    </button>
-                </li>
-
-                {visiblePages.map((page) => (
-                    <PageValueItem
-                        value={page.value}
-                        isSelected={page.selected}
-                        key={page.value}
-                        selectPage={selectPage}
-                    />
-                ))}
-
-                <li className="page">
-                    <button
-                        className="page__button page__button--icon"
-                        disabled={pageNoIndex === pages.length - 1}
-                        onClick={selectNextPage}
-                        type="button"
-                        aria-label="Next page"
-                    >
-                        <span className="left-icon">
-                            <i className="fa fa-chevron-right" />
-                        </span>
-                    </button>
-                </li>
-            </ul>
-
-            {!isPageSizeFix && (
-                <div className="select">
-                    <span className="select__placeholder">Rows per page</span>
-                    <PageSizeSelector
-                        pageSizeOptions={pageSizeOptions}
-                        pageSize={pageSize}
-                        changePageSize={changePageSize}
-                    />
-                </div>
-            )}
-        </div>
-    )
-}
-
-export default Pagination

package/src/Common/Pagination/constants.ts

@@ -1,6 +0,0 @@
-export const VISIBLE_PAGES_LIMIT = 5
-export const FALLBACK_PAGE_SIZE_OPTIONS = [
-    { value: 20, selected: true },
-    { value: 40, selected: false },
-    { value: 50, selected: false },
-]

package/src/Common/Pagination/index.tsx

@@ -1,3 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-// Disabling since might need to export types as well
-export { default as Pagination } from './Pagination'

package/src/Common/Pagination/pagination.scss

@@ -1,123 +0,0 @@
-.pagination-wrapper {
-    display: flex;
-    align-items: center;
-    padding: 0px 24px;
-    justify-content: space-between;
-    margin: 0px;
-    background-color: var(--white);
-}
-
-.pagination {
-    margin-top: 16px;
-    margin-bottom: 16px;
-    padding: 0px;
-}
-
-.select {
-    display: flex;
-    align-items: center;
-    position: relative;
-}
-
-.select__placeholder {
-    font-size: 12px;
-    font-weight: normal;
-    font-style: normal;
-    font-stretch: normal;
-    line-height: 1.5;
-    letter-spacing: normal;
-    color: var(--N700);
-    margin-right: 8px;
-}
-
-.pagination__select-menu {
-    padding: 0px;
-    list-style: none;
-    overflow: hidden;
-    border: solid 1px var(--N200);
-    border-radius: 4px;
-    width: 64px;
-    position: absolute;
-    bottom: 31px;
-    background-color: var(--white);;
-}
-
-.select__button {
-    width: 64px;
-    background-color: transparent;
-    border-radius: 4px;
-    border: solid 1px var(--N200);
-    padding: 5px 10px;
-    text-align: left;
-}
-
-.select__item {
-    padding: 5px 10px;
-    cursor: pointer;
-}
-
-.select__icon {
-    margin-left: 18px;
-}
-
-.page {
-    margin: 0px 8px;
-    display: inline-block;
-}
-
-.page-number {
-    font-size: 12px;
-    font-weight: normal;
-    font-style: normal;
-    font-stretch: normal;
-    line-height: 1.5;
-    letter-spacing: normal;
-    color: var(--N700);
-}
-
-.page__button {
-    width: 24px;
-    height: 24px;
-    border-radius: 8px;
-    color: var(--B500);
-    background-color: var(--white);
-    padding: 0px;
-    user-select: none;
-}
-
-.page__button--icon {
-    background-color: var(--white);
-    color: var(--B500);
-}
-
-/* MODIFIERS */
-
-.page__button--selected {
-    color: var(--white);
-    background-color: var(--B500);
-}
-
-/* States and Selectorys */
-
-.page__button:disabled {
-    opacity: 0.5;
-}
-
-.select__item:hover {
-    background-color: var(--N50);
-}
-
-.page__button:hover ~ :disabled {
-    background-color: var(--B100);
-}
-
-.page__button--selected:hover {
-    color: var(--white);
-    background-color: var(--B500);
-}
-
-@media (min-width: 1024px) {
-    .pagination {
-        margin: 16px auto;
-    }
-}

package/src/Common/Pagination/types.ts

@@ -1,55 +0,0 @@
-export interface PageSizeOption {
-    value: number
-    selected: boolean
-}
-export interface PaginationProps {
-    /**
-     * number of items
-     */
-    size: number
-    /**
-     * pageSize
-     */
-    pageSize: number
-    offset: number
-    changePage: (pageNo: number) => void
-    changePageSize?: (pageSize: number) => void
-    /**
-     * If true will not show page size selector
-     */
-    isPageSizeFix?: boolean
-    /**
-     * If given would show these options in page size selector else [20,40,50] with 20 as selected
-     */
-    pageSizeOptions?: PageSizeOption[]
-    /**
-     * class for wrapper
-     */
-    rootClassName?: string
-}
-
-export interface Page {
-    value: number
-    selected: boolean
-    isVisible: boolean
-}
-
-export interface CreatePageArrType extends Pick<PaginationProps, 'size' | 'pageSize'> {
-    selectedPageNo: number
-}
-
-export interface PageSizeSelectorProps
-    extends Pick<PaginationProps, 'pageSizeOptions' | 'pageSize' | 'changePageSize'> {}
-
-export interface PageSizeItemsProps extends Pick<PageSizeSelectorProps, 'changePageSize'> {
-    optionValue: PageSizeOption['value']
-    options: PageSizeOption[]
-    setOptions: React.Dispatch<React.SetStateAction<PageSizeOption[]>>
-    handleCloseDropdown: () => void
-}
-
-export interface PageValueItemProps {
-    value: PageSizeOption['value']
-    isSelected: PageSizeOption['selected']
-    selectPage: (selectedPageNo: number) => void
-}

package/src/Common/Pagination/utils.tsx

@@ -1,24 +0,0 @@
-import { CreatePageArrType, Page, PageSizeOption } from './types'
-import { FALLBACK_PAGE_SIZE_OPTIONS, VISIBLE_PAGES_LIMIT } from './constants'
-
-/**
- * Returns an array of pages numbers and whether they are selected, visible or not
- */
-export const createPageArr = ({ size, pageSize, selectedPageNo }: CreatePageArrType): Page[] => {
-    const arr = []
-    const numberOfPages = Math.ceil(size / pageSize)
-    // we are showing 2 numbers before and after the selected page, so computing the lower and upper bounds
-    const lowerBound = selectedPageNo - 2 < 1 ? 1 : selectedPageNo - 2
-    const upperBound = selectedPageNo + 2 > numberOfPages ? numberOfPages : selectedPageNo + 2
-    for (let i = 1; i <= numberOfPages; i++) {
-        arr.push({
-            value: i,
-            selected: i === selectedPageNo,
-            isVisible: upperBound - VISIBLE_PAGES_LIMIT < i && i < lowerBound + VISIBLE_PAGES_LIMIT,
-        })
-    }
-    return arr
-}
-
-export const getDefaultPageValueOptions = (pageSizeOptions: PageSizeOption[]): PageSizeOption[] =>
-    pageSizeOptions?.length ? pageSizeOptions : FALLBACK_PAGE_SIZE_OPTIONS

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

@@ -1,120 +0,0 @@
-import { ChangeEvent, useCallback, useRef, useState, KeyboardEvent } 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 } from '../Helper'
-
-/**
- * Generic search input component with support for enter based and debounced search
- * Note: The component is uncontrolled
- *
- * @example Usage with default debounced search
- * ```tsx
- * <SearchBar handleSearchChange={triggerSearchApi} shouldDebounce />
- * ```
- *
- * @example Initial search text
- * ```tsx
- * <SearchBar initialSearchText="Keyword" />
- * ```
- *
- * @example Custom width
- * ```tsx
- * <SearchBar containerClassName="w-300" />
- * ```
- *
- * @example Trigger search on enter key press
- * ```tsx
- * <SearchBar handleEnter={triggerSearchApi} />
- * ```
- *
- * @example Custom timeout for debounced search
- * ```tsx
- * <SearchBar handleSearchChange={triggerSearchApi} shouldDebounce debounceTimeout={500} />
- * ```
- *
- * @example Placeholder for the search
- * ```tsx
- * <SearchBar inputProps={{ placeholder: 'Enter search text' }} />
- * ```
- */
-const SearchBar = ({
-    initialSearchText = '',
-    handleSearchChange = () => {},
-    handleEnter = () => {},
-    inputProps = {},
-    containerClassName,
-    shouldDebounce = false,
-    debounceTimeout = 300,
-}: SearchBarProps) => {
-    const [showClearButton, setShowClearButton] = useState(!!initialSearchText)
-    const inputRef = useRef<HTMLInputElement>()
-    const debouncedSearchChange = useCallback(debounce(handleSearchChange, debounceTimeout), [
-        handleSearchChange,
-        debounceTimeout,
-    ])
-
-    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-        const { value } = e.target
-        setShowClearButton(!!value)
-        if (shouldDebounce) {
-            debouncedSearchChange(value)
-        } else {
-            handleSearchChange(value)
-        }
-    }
-
-    const _applySearch = (value: string) => {
-        handleSearchChange(value)
-        handleEnter(value)
-    }
-
-    const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
-        const { key } = e
-
-        if (key === 'Enter') {
-            const inputTarget = e.target as HTMLInputElement
-            const value = inputTarget.value.trim()
-            _applySearch(value)
-        }
-    }
-
-    const clearSearch = () => {
-        inputRef.current.value = ''
-        _applySearch('')
-    }
-
-    return (
-        <div className={containerClassName}>
-            <div className="search-bar bcn-0 dc__block w-100 min-w-200 dc__position-rel en-2 bw-1 br-4 h-32">
-                <Search className="search-bar__icon dc__position-abs icon-color-n6 icon-dim-18" />
-                <input
-                    placeholder="Search"
-                    data-testid="search-bar"
-                    type="text"
-                    {...inputProps}
-                    defaultValue={initialSearchText}
-                    className={`search-bar__input bcn-0 dc__position-abs w-100 h-100 br-4 dc__no-border pt-6 pr-10 pb-6 pl-30 fs-13 lh-20 fw-4 cn-9 placeholder-cn5 ${
-                        showClearButton ? 'pr-30' : 'pr-10'
-                    }`}
-                    onChange={handleChange}
-                    onKeyDown={handleKeyDown}
-                    ref={inputRef}
-                />
-                {showClearButton && (
-                    <button
-                        className="flex search-bar__clear-button dc__position-abs dc__transparent mt-0 mb-0 mr-5 ml-5"
-                        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/index.ts

@@ -1,2 +0,0 @@
-export { default as SearchBar } from './SearchBar.component'
-export type { SearchBarProps } from './types'

package/src/Common/SearchBar/searchBar.scss

@@ -1,31 +0,0 @@
-.search-bar {
-
-    &:focus,
-    &:focus-within {
-        outline: none;
-        border: solid 1px var(--B500);
-    }
-
-    &__input {
-
-        &:focus,
-        &:focus-visible {
-            border: none;
-            outline: none;
-        }
-    }
-
-    &__icon {
-        z-index: 1;
-        top: 50%;
-        left: 8px;
-        transform: translateY(-50%);
-    }
-
-    &__clear-button {
-        right: 0;
-        top: 50%;
-        transform: translateY(-50%);
-        z-index: 1;
-    }
-}

package/src/Common/SearchBar/types.ts

@@ -1,36 +0,0 @@
-import { InputHTMLAttributes } 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?: (searchText: string) => 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
-}