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

package/package.json

@@ -1,12 +1,16 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.55-beta-2",
+    "version": "0.0.55-beta-4",
     "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",
@@ -47,7 +64,8 @@
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-router": "^5.3.0",
-        "react-router-dom": "^5.3.0"
+        "react-router-dom": "^5.3.0",
+        "react-draggable": "^4.4.5"
     },
     "dependencies": {
         "fast-json-patch": "^3.1.1",

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

@@ -0,0 +1,8 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.3335 9.33325C10.8858 9.33325 11.3335 8.88554 11.3335 8.33325C11.3335 7.78097 10.8858 7.33325 10.3335 7.33325C9.78121 7.33325 9.3335 7.78097 9.3335 8.33325C9.3335 8.88554 9.78121 9.33325 10.3335 9.33325Z" fill="#596168"/>
+<path d="M5.66675 9.33325C6.21903 9.33325 6.66675 8.88554 6.66675 8.33325C6.66675 7.78097 6.21903 7.33325 5.66675 7.33325C5.11446 7.33325 4.66675 7.78097 4.66675 8.33325C4.66675 8.88554 5.11446 9.33325 5.66675 9.33325Z" fill="#596168"/>
+<path d="M10.3335 5.33325C10.8858 5.33325 11.3335 4.88554 11.3335 4.33325C11.3335 3.78097 10.8858 3.33325 10.3335 3.33325C9.78121 3.33325 9.3335 3.78097 9.3335 4.33325C9.3335 4.88554 9.78121 5.33325 10.3335 5.33325Z" fill="#596168"/>
+<path d="M5.66675 5.33325C6.21903 5.33325 6.66675 4.88554 6.66675 4.33325C6.66675 3.78097 6.21903 3.33325 5.66675 3.33325C5.11446 3.33325 4.66675 3.78097 4.66675 4.33325C4.66675 4.88554 5.11446 5.33325 5.66675 5.33325Z" fill="#596168"/>
+<path d="M10.3335 13.3333C10.8858 13.3333 11.3335 12.8855 11.3335 12.3333C11.3335 11.781 10.8858 11.3333 10.3335 11.3333C9.78121 11.3333 9.3335 11.781 9.3335 12.3333C9.3335 12.8855 9.78121 13.3333 10.3335 13.3333Z" fill="#596168"/>
+<path d="M5.66675 13.3333C6.21903 13.3333 6.66675 12.8855 6.66675 12.3333C6.66675 11.781 6.21903 11.3333 5.66675 11.3333C5.11446 11.3333 4.66675 11.781 4.66675 12.3333C4.66675 12.8855 5.11446 13.3333 5.66675 13.3333Z" fill="#596168"/>
+</svg>

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/Constants.ts

@@ -240,4 +240,6 @@ export const RepositoryAction = {
     CONTAINER: "CONTAINER",
     CHART_PULL: "CHART_PULL",
     CHART_PUSH: "CHART_PUSH"
-}
+}
+
+export const MAX_Z_INDEX = 2147483647

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/DraggableWrapper/DraggableButton.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { ReactComponent as ICDrag } from '../../Assets/Icon/ic-drag.svg'
+import { DraggableButtonProps } from './types'
+
+export default function DraggableButton({ dragClassName }: DraggableButtonProps) {
+    return (
+        <button
+            type="button"
+            className={`${dragClassName} dc__outline-none-imp dc__no-border p-0 dc__transparent h-20`}
+        >
+            <ICDrag className="dc__grabbable icon-dim-20 fcn-6" />
+        </button>
+    )
+}

package/src/Common/DraggableWrapper/DraggableWrapper.tsx

@@ -0,0 +1,116 @@
+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

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

package/src/Common/DraggableWrapper/types.ts

@@ -0,0 +1,27 @@
+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/Grid/Grid.tsx

@@ -10,6 +10,7 @@ export default function Grid({
     containerClass = '',
     itemClass = '',
     children,
+    ...containerDivProps
 }: GridProps) {
     const containerStyles = container ? { gap: spacing + 'px' } : {}
 
@@ -25,14 +26,18 @@ export default function Grid({
         }
 
         return (
-            <div className={`p-0 ${itemClass}`} style={itemStyles}>
+            <div className={`p-0 ${itemClass}`} style={itemStyles} {...containerDivProps}>
                 {children}
             </div>
         )
     }
 
     return (
-        <div className={`flex-wrap flexbox ${container ? containerClass : ''}`} style={containerStyles}>
+        <div
+            className={`flex-wrap flexbox ${container ? containerClass : ''}`}
+            style={containerStyles}
+            {...containerDivProps}
+        >
             {children}
         </div>
     )

package/src/Common/Grid/types.ts

@@ -1,4 +1,6 @@
-export interface GridProps {
+import { HTMLAttributes } from 'react'
+
+export interface GridProps extends HTMLAttributes<HTMLDivElement> {
     container?: boolean
     spacing?: number
     item?: boolean

package/src/Common/Helper.tsx

@@ -499,20 +499,18 @@ export const getFilteredChartVersions = (charts, selectedChartType) => {
             chartRefId: item.chartRefId,
         }))
 }
-
-function removeEmptyObjectKeysAndNullValues(obj, originaljsonCopy) {
-    // It recursively removes empty object keys and empty array keys
+function removeEmptyObjectKeysAndNullValues(obj) {
+    // It recursively removes empty object keys and array values that are null
     for (let key in obj) {
         if (Array.isArray(obj[key])) {
+            if (obj[key].length === 0) continue
+            obj[key] = obj[key].filter((item) => item !== null)
             // Check if the array is empty
-            if (obj[key].length === 0 && originaljsonCopy[key].length !== 0) {
-                delete obj[key] 
+            if (obj[key].length === 0) {
+                delete obj[key] // Delete the key if the array is empty
             }
         } else if (obj[key] && typeof obj[key] === 'object') {
-            if (
-                removeEmptyObjectKeysAndNullValues(obj[key], originaljsonCopy[key]) &&
-                Object.keys(originaljsonCopy[key]).length !== 0
-            ) {
+            if (removeEmptyObjectKeysAndNullValues(obj[key])) {
                 delete obj[key]
             }
         } else if (obj[key] === undefined) {
@@ -522,25 +520,20 @@ function removeEmptyObjectKeysAndNullValues(obj, originaljsonCopy) {
     return Object.keys(obj).length === 0
 }
 
-export function getUnlockedJSON(json, jsonPathArray, removeParentKeysAndEmptyArrays = false) {
-    if (!jsonPathArray.length) return { newDocument: json, removedPatches: [] }
-    
+export function getUnlockedJSON(json, jsonPathArray) {
     const jsonCopy = JSON.parse(JSON.stringify(json))
-    const originaljsonCopy = JSON.parse(JSON.stringify(json))
-    let removedPatches = []
     let patches = jsonPathArray.flatMap((jsonPath) => {
         const pathsToRemove = JSONPath({ path: jsonPath, json: jsonCopy, resultType: 'all' })
-        //reversing patches to handle correct array index deletion
-        pathsToRemove.reverse()
-        return pathsToRemove.map((result) => {
-            //storing removed patches to have functionality of undo
-            removedPatches.push({ op: 'add', path: result.pointer, value: result.value })
-            return { op: 'remove', path: result.pointer }
-        })
+        return pathsToRemove.map((result) =>
+            Array.isArray(result.parent)
+                ? { op: 'replace', path: result.pointer, value: null }
+                : { op: 'remove', path: result.pointer },
+        )
     })
     let newDocument = jsonpatch.applyPatch(jsonCopy, patches).newDocument
-    if (removeParentKeysAndEmptyArrays) removeEmptyObjectKeysAndNullValues(newDocument, originaljsonCopy)
-    return { newDocument, removedPatches: removedPatches.reverse() }
+
+    removeEmptyObjectKeysAndNullValues(newDocument)
+    return newDocument
 }
 
 export function getLockedJSON(json, jsonPathArray: string[]) {
@@ -566,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/Hooks/UseWindowSize/UseWindowSize.tsx

@@ -0,0 +1,31 @@
+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/Hooks/index.ts

@@ -1,2 +1,3 @@
 export { useSuperAdmin } from './UseSuperAdmin/UseSuperAdmin'
 export { useClickOutside } from './UseClickOutside/UseClickOutside'
+export { useWindowSize } from './UseWindowSize/UseWindowSize'

package/src/Common/Pagination/PageSizeSelector.tsx

@@ -0,0 +1,78 @@
+import { useRef, useState } from 'react'
+import { PageSizeItemsProps, PageSizeOption, PageSizeSelectorProps } from './types'
+import { useClickOutside } from '../Hooks'
+import { getDefaultPageValueOptions } from './utils'
+
+const PageSizeItems = ({
+    optionValue,
+    options,
+    setOptions,
+    handleCloseDropdown,
+    changePageSize,
+}: PageSizeItemsProps) => {
+    const handlePageSizeSelect = () => {
+        const newOptions = options.map((_option) => ({
+            value: _option.value,
+            selected: _option.value === optionValue,
+        }))
+        setOptions([...newOptions])
+        handleCloseDropdown()
+        changePageSize(optionValue)
+    }
+
+    return (
+        <div key={optionValue} className="select__item" onClick={handlePageSizeSelect}>
+            {optionValue}
+        </div>
+    )
+}
+
+const PageSizeSelector = ({ pageSizeOptions, pageSize, changePageSize }: PageSizeSelectorProps) => {
+    const defaultOptions = getDefaultPageValueOptions(pageSizeOptions).map((option) => ({
+        value: option.value,
+        selected: option.value === pageSize,
+    }))
+
+    const [isDropdownOpen, setIsDropdownOpen] = useState<boolean>(false)
+    const [options, setOptions] = useState<PageSizeOption[]>(defaultOptions)
+
+    const handleCloseDropdown = () => {
+        setIsDropdownOpen(false)
+    }
+
+    const handleDropdownToggle = () => {
+        setIsDropdownOpen(!isDropdownOpen)
+    }
+
+    const dropdownRef = useRef<HTMLDivElement>(null)
+    useClickOutside(dropdownRef, handleCloseDropdown)
+
+    const selectedOption = options.find((option) => option.selected)
+    const font = isDropdownOpen ? 'fa fa-caret-up' : 'fa fa-caret-down'
+    return (
+        <div ref={dropdownRef}>
+            {isDropdownOpen && (
+                <div className="pagination__select-menu">
+                    {options.map((_option) => (
+                        <PageSizeItems
+                            optionValue={_option.value}
+                            options={options}
+                            setOptions={setOptions}
+                            handleCloseDropdown={handleCloseDropdown}
+                            changePageSize={changePageSize}
+                        />
+                    ))}
+                </div>
+            )}
+
+            <button type="button" className="select__button" onClick={handleDropdownToggle}>
+                <span>{selectedOption ? selectedOption.value : ''}</span>
+                <span className="select__icon">
+                    <i className={font} />
+                </span>
+            </button>
+        </div>
+    )
+}
+
+export default PageSizeSelector

package/src/Common/Pagination/Pagination.tsx

@@ -0,0 +1,127 @@
+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

@@ -0,0 +1,6 @@
+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

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