@devtron-labs/devtron-fe-common-lib 0.0.62-beta-3 → 0.0.62-beta-5

package/src/Shared/Components/FilterChips/FilterChips.component.tsx

@@ -0,0 +1,100 @@
+import { ReactComponent as CloseIcon } from '../../../Assets/Icon/ic-close.svg'
+import { noop } from '../../../Common'
+import { FilterChipProps, FilterChipsProps } from './types'
+
+const FilterChip = ({
+    label,
+    value,
+    handleRemoveFilter,
+    getFormattedLabel = noop,
+    getFormattedValue = noop,
+}: FilterChipProps) => {
+    const removeFilter = () => {
+        handleRemoveFilter(label, value)
+    }
+
+    const labelToDisplay = getFormattedLabel(label) ?? label
+
+    const valueToDisplay = getFormattedValue(label, value) ?? value
+
+    return (
+        <div className="flexbox flex-align-center br-4 dc__border dc__bg-n50 pl-6 pr-6 pt-2 pb-2 dc__user-select-none h-24 dc__gap-6 fs-12 lh-20 cn-9 fw-4">
+            <span className="fw-6 dc__capitalize">{labelToDisplay}</span>
+            <span className="dc__divider h-24" />
+            <span className="dc__ellipsis-right">{valueToDisplay}</span>
+            <button
+                type="button"
+                className="flex p-0 dc__transparent"
+                onClick={removeFilter}
+                aria-label="Remove filter"
+            >
+                <CloseIcon className="icon-dim-12 icon-use-fill-n6" />
+            </button>
+        </div>
+    )
+}
+
+/**
+ * Component for rendering the applied filter chips
+ */
+const FilterChips = ({
+    filterConfig,
+    clearFilters,
+    onRemoveFilter,
+    getFormattedLabel,
+    getFormattedValue,
+}: FilterChipsProps) => {
+    const handleRemoveFilter = (filterKey, valueToRemove) => {
+        const updatedFilterConfig = JSON.parse(JSON.stringify(filterConfig))
+        if (Array.isArray(filterConfig[filterKey])) {
+            onRemoveFilter({
+                ...updatedFilterConfig,
+                [filterKey]: updatedFilterConfig[filterKey].filter((val) => val !== valueToRemove),
+            })
+            return
+        }
+        if (filterKey in updatedFilterConfig) {
+            delete updatedFilterConfig[filterKey]
+            onRemoveFilter(updatedFilterConfig)
+        }
+    }
+
+    const chips = Object.entries(filterConfig).filter(([, value]) => (Array.isArray(value) ? value.length : !!value))
+
+    return (
+        chips.length > 0 && (
+            <div className="flexbox pt-6 pb-6 flex-wrap dc__gap-8">
+                {chips.map(([filterKey, filterValue]) =>
+                    Array.isArray(filterValue) ? (
+                        filterValue.map((filter) => (
+                            <FilterChip
+                                key={`${filterKey}-${filter}`}
+                                label={filterKey}
+                                value={filter}
+                                handleRemoveFilter={handleRemoveFilter}
+                                getFormattedLabel={getFormattedLabel}
+                                getFormattedValue={getFormattedValue}
+                            />
+                        ))
+                    ) : (
+                        <FilterChip
+                            key={filterKey}
+                            label={filterKey}
+                            value={filterValue}
+                            handleRemoveFilter={handleRemoveFilter}
+                            getFormattedLabel={getFormattedLabel}
+                            getFormattedValue={getFormattedValue}
+                        />
+                    ),
+                )}
+                <div className="flex">
+                    <button type="button" className="cta text fs-13 lh-20-imp h-20 p-0-imp" onClick={clearFilters}>
+                        Clear All Filters
+                    </button>
+                </div>
+            </div>
+        )
+    )
+}
+
+export default FilterChips

package/src/Shared/Components/FilterChips/index.ts

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

package/src/Shared/Components/FilterChips/types.ts

@@ -0,0 +1,39 @@
+import { ReactNode } from 'react'
+
+export interface FilterChipProps {
+    /**
+     * Filter label
+     */
+    label: string
+    /**
+     * Corresponding value of the filter
+     */
+    value: unknown
+    /**
+     * Callback handler for removing the filter
+     */
+    handleRemoveFilter: (label: string, valueToRemove: unknown) => void
+    /**
+     * If passed, the label will be formatted accordingly
+     */
+    getFormattedLabel?: (filterKey: string) => ReactNode
+    /**
+     * If passed, the label will be formatted accordingly
+     */
+    getFormattedValue?: (filterKey: string, filterValue: unknown) => ReactNode
+}
+
+export interface FilterChipsProps extends Pick<FilterChipProps, 'getFormattedLabel' | 'getFormattedValue'> {
+    /**
+     * Current filter configuration
+     */
+    filterConfig: Record<string, unknown>
+    /**
+     * Callback handler for removing the filters
+     */
+    clearFilters: () => void
+    /**
+     * Handler for removing a applied filter
+     */
+    onRemoveFilter: (filterConfig: Record<string, unknown>) => void
+}

package/src/Shared/Components/ReactSelect/index.ts

@@ -0,0 +1 @@
+export * from './utils'

package/src/Shared/Components/ReactSelect/utils.tsx

@@ -0,0 +1,97 @@
+import Tippy from '@tippyjs/react'
+import { components } from 'react-select'
+import { stopPropagation } from '../../../Common'
+
+export const getCommonSelectStyle = (styleOverrides = {}) => ({
+    menuList: (base) => ({
+        ...base,
+        paddingTop: 0,
+        paddingBottom: 0,
+    }),
+    control: (base, state) => ({
+        ...base,
+        minHeight: '32px',
+        boxShadow: 'none',
+        backgroundColor: 'var(--N50)',
+        border: state.isFocused ? '1px solid var(--B500)' : '1px solid var(--N200)',
+        cursor: 'pointer',
+    }),
+    option: (base, state) => ({
+        ...base,
+        color: 'var(--N900)',
+        backgroundColor: state.isFocused ? 'var(--N100)' : 'white',
+        padding: '10px 12px',
+    }),
+    dropdownIndicator: (base, state) => ({
+        ...base,
+        color: 'var(--N400)',
+        padding: '0 8px',
+        transition: 'all .2s ease',
+        transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+    }),
+    valueContainer: (base) => ({
+        ...base,
+        padding: '0 8px',
+        fontWeight: '400',
+    }),
+    loadingMessage: (base) => ({
+        ...base,
+        color: 'var(--N600)',
+    }),
+    noOptionsMessage: (base) => ({
+        ...base,
+        color: 'var(--N600)',
+    }),
+    ...styleOverrides,
+})
+
+const getCustomOptionBackgroundColor = (isSelected: boolean, isFocused: boolean) => {
+    if (isSelected) {
+        return 'var(--B100)'
+    }
+
+    if (isFocused) {
+        return 'var(--N50)'
+    }
+
+    return 'var(--white)'
+}
+
+export const getCustomOptionSelectionStyle =
+    (styleOverrides = {}) =>
+    (base, state) => ({
+        ...base,
+        backgroundColor: getCustomOptionBackgroundColor(state.isSelected, state.isFocused),
+        color: state.isSelected ? 'var(--B500)' : 'var(--N900)',
+        textOverflow: 'ellipsis',
+        fontWeight: '500',
+        overflow: 'hidden',
+        textAlign: 'left',
+        whiteSpace: 'nowrap',
+        cursor: 'pointer',
+        fontSize: '13px',
+        ...styleOverrides,
+    })
+
+export const SelectOption = (props: any) => {
+    const { selectProps, data, showTippy, style, placement, tippyContent, tippyClass } = props
+    selectProps.styles.option = getCustomOptionSelectionStyle(style)
+    const getOption = () => (
+        <div onClick={stopPropagation}>
+            <components.Option {...props} />
+        </div>
+    )
+
+    return showTippy ? (
+        <Tippy
+            className={tippyClass || 'default-white'}
+            arrow={false}
+            placement={placement || 'right'}
+            content={tippyContent || data.label}
+        >
+            {getOption()}
+        </Tippy>
+    ) : (
+        getOption()
+    )
+}

package/src/Shared/Components/index.ts

@@ -1 +1,4 @@
+export * from './APIResponseHandler'
+export * from './ReactSelect'
 export * from './BulkSelection'
+export * from './FilterChips'

package/src/Shared/Helpers.tsx

@@ -0,0 +1,29 @@
+interface HighlightSearchTextProps {
+    /**
+     * The text to be highlighted
+     */
+    searchText: string
+    /**
+     * The whole text string
+     */
+    text: string
+    /**
+     * The classes to be applied to the highlighted text
+     */
+    highlightClasses?: string
+}
+
+// Disabling default export since this is a helper function and we would have to export a lot of functions in future.
+// eslint-disable-next-line import/prefer-default-export
+export const highlightSearchText = ({ searchText, text, highlightClasses }: HighlightSearchTextProps): string => {
+    if (!searchText) {
+        return text
+    }
+
+    try {
+        const regex = new RegExp(searchText, 'gi')
+        return text.replace(regex, (match) => `<span class="${highlightClasses}">${match}</span>`)
+    } catch (error) {
+        return text
+    }
+}

package/src/Shared/index.ts

@@ -1 +1,3 @@
 export * from './Components'
+export * from './validations'
+export * from './Helpers'

package/src/Shared/validations.tsx

@@ -0,0 +1,130 @@
+export interface ValidationResponseType {
+    isValid: boolean
+    message?: string
+}
+
+const MESSAGES = {
+    PROVIDE_A_NUMBER: 'Please provide a number',
+    LOWERCASE_ALPHANUMERIC: 'Only lowercase alphanumeric characters, -, _ or . allowed',
+    CAN_NOT_START_END_WITH_SEPARATORS: 'Cannot start/end with -, _ or .',
+    getMinMaxCharMessage: (min: number, max: number) => `Minimum ${min} and maximum ${max} characters allowed`,
+    getMaxCharMessage: (max: number) => `Maximum ${max} characters are allowed`,
+    VALID_POSITIVE_NUMBER: 'This field should be a valid positive number',
+    VALID_POSITIVE_INTEGER: 'This field should be a valid positive integer',
+    MAX_SAFE_INTEGER: `Maximum allowed value is ${Number.MAX_SAFE_INTEGER}`,
+}
+
+const MAX_DESCRIPTION_LENGTH = 300
+
+export const validateName = (name: string): ValidationResponseType => {
+    if (!/^.{3,50}$/.test(name)) {
+        return {
+            isValid: false,
+            message: MESSAGES.getMinMaxCharMessage(3, 50),
+        }
+    }
+
+    if (!/^[a-z0-9-._]+$/.test(name)) {
+        return {
+            isValid: false,
+            message: MESSAGES.LOWERCASE_ALPHANUMERIC,
+        }
+    }
+
+    if (!/^(?![-._]).*[^-._]$/.test(name)) {
+        return {
+            isValid: false,
+            message: MESSAGES.CAN_NOT_START_END_WITH_SEPARATORS,
+        }
+    }
+
+    return {
+        isValid: true,
+    }
+}
+
+export const validateDescription = (description: string): ValidationResponseType => {
+    if (description?.length > MAX_DESCRIPTION_LENGTH) {
+        return {
+            isValid: false,
+            message: MESSAGES.getMaxCharMessage(MAX_DESCRIPTION_LENGTH),
+        }
+    }
+
+    return {
+        isValid: true,
+    }
+}
+
+export const validateRequiredPositiveNumber = (value: string | number): ValidationResponseType => {
+    if (!value) {
+        return {
+            isValid: false,
+            message: MESSAGES.PROVIDE_A_NUMBER,
+        }
+    }
+
+    // TODO: Look if regex is available for this, since 0002 is not a valid number
+    if (!/^\d+(\.\d+)?$/.test(value.toString())) {
+        return {
+            isValid: false,
+            message: MESSAGES.VALID_POSITIVE_NUMBER,
+        }
+    }
+
+    const numericValue = Number(value)
+
+    if (numericValue > Number.MAX_SAFE_INTEGER) {
+        return {
+            isValid: false,
+            message: MESSAGES.MAX_SAFE_INTEGER,
+        }
+    }
+
+    if (numericValue <= 0) {
+        return {
+            isValid: false,
+            message: MESSAGES.VALID_POSITIVE_NUMBER,
+        }
+    }
+
+    return {
+        isValid: true,
+    }
+}
+
+export const validateRequiredPositiveInteger = (value: string | number): ValidationResponseType => {
+    if (!value) {
+        return {
+            isValid: false,
+            message: MESSAGES.PROVIDE_A_NUMBER,
+        }
+    }
+
+    if (!/^\d+$/.test(value.toString())) {
+        return {
+            isValid: false,
+            message: MESSAGES.VALID_POSITIVE_INTEGER,
+        }
+    }
+
+    const numericValue = Number(value)
+
+    if (numericValue > Number.MAX_SAFE_INTEGER) {
+        return {
+            isValid: false,
+            message: MESSAGES.MAX_SAFE_INTEGER,
+        }
+    }
+
+    if (numericValue <= 0) {
+        return {
+            isValid: false,
+            message: MESSAGES.VALID_POSITIVE_INTEGER,
+        }
+    }
+
+    return {
+        isValid: true,
+    }
+}