@devtron-labs/devtron-fe-common-lib 0.0.54 → 0.0.55-beta-2

package/src/Common/DraggableWrapper/DraggableWrapper.tsx

@@ -1,116 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react'
-import Draggable, { ControlPosition, DraggableData } from 'react-draggable'
-import { DraggableWrapperProps, DraggablePositionVariant } from './types'
-import { useWindowSize } from '../Hooks'
-import { MAX_Z_INDEX } from '../Constants'
-
-/**
- * TODO: import it as lazy, after it is supported in common
- * 1. If using react select please use menuPlacement='auto'
- * 2. dragSelector will be used to identify the grabbable button that will grab the div to drag
- * 3. parentRef is the reference point from which we will derive the base top:0 ,left: 0 position
- */
-export default function DraggableWrapper({
-    children,
-    zIndex = MAX_Z_INDEX,
-    positionVariant,
-    dragSelector,
-    parentRef,
-    boundaryGap = 16,
-    childDivProps = {},
-}: DraggableWrapperProps) {
-    const windowSize = useWindowSize()
-    const nodeRef = useRef<HTMLDivElement>(null)
-
-    const [position, setPosition] = useState<ControlPosition>({
-        x: 0,
-        y: 0,
-    })
-
-    const getDefaultPosition = (positionVariant: DraggablePositionVariant): ControlPosition => {
-        // if this return x: 0, y: 0 then it will be top left corner of parentDiv
-        const parentRect =
-            parentRef?.current?.getBoundingClientRect() ??
-            ({
-                width: 0,
-                height: 0,
-                top: 0,
-                left: 0,
-                bottom: 0,
-            } as DOMRect)
-        const nodeRefHeight = nodeRef.current?.getBoundingClientRect().height ?? 0
-        const nodeRefWidth = nodeRef.current?.getBoundingClientRect().width ?? 0
-
-        switch (positionVariant) {
-            case DraggablePositionVariant.PARENT_BOTTOM_CENTER: {
-                // currently at parentRect.x and need to start to the center of its width and half of node should lie on left of center and other half on right
-                const x = (parentRect.width - nodeRefWidth) / 2
-                // currently at parentRect.y now parent height can be greater than windowSize.height so taking min
-                // subtracting parentRect.top since window height already contains that
-                const baseY =
-                    parentRect.height > windowSize.height ? windowSize.height - parentRect.top : parentRect.height
-                const y = baseY - nodeRefHeight - boundaryGap
-                return { x, y }
-            }
-            // Add more cases for other variants if needed
-            default: {
-                // Since need node to be in center of screen so subtracting width/2 by left of parentRect it will start the node from center but want node's midpoint at center so subtracting node's width from it.
-                const x = windowSize.width / 2 - parentRect.left - nodeRefWidth / 2
-                // subtracting top since windowSize already contains that
-                const y = windowSize.height - parentRect.top - nodeRefHeight - boundaryGap
-
-                return { x, y }
-            }
-        }
-    }
-
-    // On change of windowSize we will reset the position to default
-    useEffect(() => {
-        const defaultPosition = getDefaultPosition(positionVariant)
-        setPosition(defaultPosition)
-    }, [nodeRef, positionVariant, windowSize])
-
-    // Would be called on drag and will not update the state if the new position is out of window screen
-    function handlePositionChange(e, data: DraggableData) {
-        const offsetX = parentRef?.current?.getBoundingClientRect().left ?? 0
-        const offsetY = parentRef?.current?.getBoundingClientRect().top ?? 0
-
-        const nodeRefHeight = nodeRef.current?.getBoundingClientRect().height ?? 0
-        const nodeRefWidth = nodeRef.current?.getBoundingClientRect().width ?? 0
-
-        if (
-            offsetX + data.x + nodeRefWidth + boundaryGap > windowSize.width ||
-            offsetY + data.y + nodeRefHeight + boundaryGap > windowSize.height ||
-            offsetX + data.x < 0 ||
-            offsetY + data.y < 0
-        ) {
-            return
-        }
-
-        setPosition({
-            x: data.x,
-            y: data.y,
-        })
-    }
-
-    return (
-        <div
-            className="dc__position-fixed"
-            style={{
-                zIndex,
-            }}
-        >
-            <Draggable handle={dragSelector} nodeRef={nodeRef} position={position} onDrag={handlePositionChange}>
-                <div
-                    ref={nodeRef}
-                    {...childDivProps}
-                    style={{
-                        zIndex,
-                    }}
-                >
-                    {children}
-                </div>
-            </Draggable>
-        </div>
-    )
-}

package/src/Common/DraggableWrapper/index.ts

@@ -1,3 +0,0 @@
-export { default as DraggableWrapper } from './DraggableWrapper'
-export { default as DraggableButton } from './DraggableButton'
-export * from './types'

package/src/Common/DraggableWrapper/types.ts

@@ -1,27 +0,0 @@
-import { HTMLAttributes, ReactNode, RefObject } from 'react'
-
-export enum DraggablePositionVariant {
-    PARENT_BOTTOM_CENTER = 'PARENT_BOTTOM_CENTER',
-    SCREEN_BOTTOM_CENTER = 'SCREEN_BOTTOM_CENTER',
-    // Can add more based on requirement
-}
-
-export interface DraggableWrapperProps {
-    children: ReactNode
-    zIndex?: number
-    positionVariant?: DraggablePositionVariant
-    /**
-     * dragSelector (class - (append with .), id, etc) will be used to identify the grabbable button that will grab the div to drag
-     */
-    dragSelector: string
-    parentRef?: RefObject<HTMLDivElement>
-    boundaryGap?: number
-    childDivProps?: HTMLAttributes<HTMLDivElement>
-}
-
-/**
- * dragClassName is the class that we feed to Draggable to identify dragging buttons
- */
-export interface DraggableButtonProps {
-    dragClassName: string
-}

package/src/Common/Hooks/UseWindowSize/UseWindowSize.tsx

@@ -1,31 +0,0 @@
-import { useState, useEffect } from 'react'
-
-let timeout
-
-const getSize = () => {
-    return {
-        width: window.innerWidth,
-        height: window.innerHeight,
-    }
-}
-
-export const useWindowSize = () => {
-    const [windowSize, setWindowSize] = useState(getSize)
-
-    function handleResize(e) {
-        if (timeout) {
-            window.cancelAnimationFrame(timeout)
-        }
-
-        timeout = window.requestAnimationFrame(function () {
-            setWindowSize(getSize())
-        })
-    }
-
-    useEffect(() => {
-        window.addEventListener('resize', handleResize, false)
-        return () => window.removeEventListener('resize', handleResize, false)
-    }, [])
-
-    return windowSize
-}

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
-}