@devtron-labs/devtron-fe-common-lib 0.0.6-beta-16 → 0.0.6-beta-18

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.6-beta-16",
+    "version": "0.0.6-beta-18",
     "description": "Supporting common component library",
     "main": "dist/index.js",
     "scripts": {
@@ -32,9 +32,11 @@
         "rollup-plugin-delete": "^2.0.0",
         "@svgr/rollup": "6.5.1",
         "@rollup/plugin-url": "8.0.1",
+        "@rollup/plugin-commonjs": "24.0.1",
         "typescript": "^4.9.4",
         "react-toastify": "^8.2.0",
         "@tippyjs/react": "^4.2.0",
+        "react-select": "^5.2.2",
         "@sentry/browser": "^7.31.1"
     },
     "peerDependencies": {

package/rollup.config.js

@@ -7,13 +7,15 @@ import del from 'rollup-plugin-delete'
 import pkg from './package.json'
 import svgr from '@svgr/rollup'
 import url from '@rollup/plugin-url'
+import commonjs from '@rollup/plugin-commonjs';
 
 export default {
     input: './src/index.ts',
-    output: [{ file: pkg.main, format: 'es' }],
+    output: [{ file: pkg.main, format: 'cjs' }],
     plugins: [
         peerDepsExternal(),
         resolve(),
+        commonjs(),
         typescript(),
         postcss({
             extensions: ['.css'],

package/src/Assets/Icon/ic-appstatus-cancelled.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" width="24" height="24">
+    <g fill="none" fill-rule="evenodd" transform="translate(2 2)">
+        <rect width="20" height="20" fill="#B1B7BC" rx="10"/>
+        <path fill="#FFF" fill-rule="nonzero" d="M6.464 6.464a1 1 0 0 1 1.415 0l2.12 2.12 2.122-2.12a1 1 0 0 1 1.32-.083l.095.083a1 1 0 0 1 0 1.415l-2.122 2.12 2.122 2.122a1 1 0 0 1 .083 1.32l-.083.095a1 1 0 0 1-1.415 0L10 11.414l-2.121 2.122a1 1 0 0 1-1.32.083l-.095-.083a1 1 0 0 1 0-1.415L8.584 10l-2.12-2.121a1 1 0 0 1-.083-1.32z"/>
+    </g>
+</svg>

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

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <g fill="none" fill-rule="evenodd">
+        <path stroke="#06C" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.898 12.564l4.95 4.95L19.455 6.906"/>
+    </g>
+</svg>

package/src/Assets/Icon/ic-error-medium.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21">
+    <g fill="none" fill-rule="evenodd">
+        <path fill="#FDE7E7" stroke="#F33E3E" stroke-linejoin="round" stroke-width="2" d="M10 1.667C5.4 1.667 1.667 5.4 1.667 10S5.4 18.333 10 18.333 18.333 14.6 18.333 10 14.6 1.667 10 1.667z"/>
+        <path fill="#F33E3E" d="M10 10.833c.46 0 .833-.373.833-.833V6.667c0-.46-.373-.834-.833-.834-.46 0-.833.373-.833.834V10c0 .46.373.833.833.833zm0 3.334c.46 0 .833-.373.833-.834 0-.46-.373-.833-.833-.833-.46 0-.833.373-.833.833 0 .46.373.834.833.834z"/>
+    </g>
+</svg>

package/src/Common/Constants.ts

@@ -4,6 +4,6 @@ export const Host = process.env.REACT_APP_ORCHESTRATOR_ROOT
 export const PATTERNS = {
   KUBERNETES_KEY_PREFIX: /^[a-z0-9]([-a-z0-9]*[a-z0-9])?(\.[a-z0-9]([-a-z0-9]*[a-z0-9])?)*$/,
   KUBERNETES_KEY_NAME: /^(([A-Za-z0-9][-A-Za-z0-9_.]*)?[A-Za-z0-9])$/,
-  START_END_ALPHANUMERIC: /^([A-Za-z0-9].*[A-Za-z0-9])$|[A-Za-z0-9]$/,
+  START_END_ALPHANUMERIC: /^([Az09].*[A-Za-z0-9])$|[A-Za-z0-9]$/,
   ALPHANUMERIC_WITH_SPECIAL_CHAR: /^[A-Za-z0-9._-]+$/, // allow alphanumeric,(.) ,(-),(_)
 }

package/src/Common/CustomTagSelector/PropagateTagInfo.tsx

@@ -13,25 +13,25 @@ export default function PropagateTagInfo() {
         )
     }
     return (
-        <div className="flexbox">
-            <InjectTag className="icon-dim-16 mt-2 mr-4" />
-            <span>Propagate tags</span>
-            <TippyCustomized
-                theme={TippyTheme.white}
-                className="w-300"
-                placement="top"
-                Icon={InjectTag}
-                heading={'Propagate tags to K8s resources'}
-                infoText={`Add a tag and click on the ⬡ icon to propagate tags as labels to Kubernetes resources.`}
-                additionalContent={additionalInfo()}
-                showCloseButton={true}
-                trigger="click"
-                interactive={true}
-                documentationLink={''}
-                documentationLinkText={'View Documentation'}
-            >
+        <TippyCustomized
+            theme={TippyTheme.white}
+            className="w-300"
+            placement="top"
+            Icon={InjectTag}
+            heading={'Propagate tags to K8s resources'}
+            infoText={`Add a tag and click on the ⬡ icon to propagate tags as labels to Kubernetes resources.`}
+            additionalContent={additionalInfo()}
+            showCloseButton={true}
+            trigger="click"
+            interactive={true}
+            documentationLink={''}
+            documentationLinkText={'View Documentation'}
+        >
+            <div className="flexbox">
+                <InjectTag className="icon-dim-16 mt-2 mr-4" />
+                <span>Propagate tags</span>
                 <Help className="icon-dim-16 mt-2 ml-4 cursor" />
-            </TippyCustomized>
-        </div>
+            </div>
+        </TippyCustomized>
     )
 }

package/src/Common/CustomTagSelector/TagDetails.tsx

@@ -1,20 +1,10 @@
 import React from 'react'
 import { ReactComponent as DeleteCross } from '../../Assets/Icon/ic-close.svg'
 import { ReactComponent as InjectTag } from '../../Assets/Icon/inject-tag.svg'
-import { TagType } from '../Types'
+import { TagDetailType } from '../Types'
 import { TagLabelValueSelector } from './TagLabelValueSelector'
 
-export default function TagDetails({
-    index,
-    tagData,
-    setTagData,
-    removeTag,
-}: {
-    index: number
-    tagData: TagType
-    setTagData: (index: number, tagData: TagType) => void
-    removeTag: (index: number) => void
-}) {
+export default function TagDetails({ index, tagData, setTagData, removeTag }: TagDetailType) {
     const deleteTag = (): void => {
         removeTag(index)
     }
@@ -31,8 +21,20 @@ export default function TagDetails({
             >
                 <InjectTag className={`icon-dim-20 mt-4 ${tagData.propagate ? 'scn-0' : ''}`} />
             </div>
-            <TagLabelValueSelector selectedTagIndex={index} tagData={tagData} setTagData={setTagData} type="key" />
-            <TagLabelValueSelector selectedTagIndex={index} tagData={tagData} setTagData={setTagData} type="value" />
+            <TagLabelValueSelector
+                selectedTagIndex={index}
+                tagData={tagData}
+                setTagData={setTagData}
+                type="key"
+                placeholder="Enter key"
+            />
+            <TagLabelValueSelector
+                selectedTagIndex={index}
+                tagData={tagData}
+                setTagData={setTagData}
+                type="value"
+                placeholder="Enter value"
+            />
             <div className="dc__border pl-4 pr-4 dc__right-radius-4 pointer" onClick={deleteTag}>
                 <DeleteCross className="icon-dim-20 mt-4" />
             </div>

package/src/Common/CustomTagSelector/TagLabelSelect.tsx

@@ -2,15 +2,9 @@ import React from 'react'
 import PropagateTagInfo from './PropagateTagInfo'
 import { ReactComponent as Add } from '../../Assets/Icon/ic-add.svg'
 import TagDetails from './TagDetails'
-import { TagType } from '../Types'
+import { TagLabelSelectType } from '../Types'
 
-export const TagLabelSelect = ({
-    labelTags,
-    setLabelTags,
-}: {
-    labelTags: TagType[]
-    setLabelTags: (tagList: TagType[]) => void
-}) => {
+export const TagLabelSelect = ({ labelTags, setLabelTags }: TagLabelSelectType) => {
     const setTagData = (index, tagValue): void => {
         const _tags = [...labelTags]
         _tags[index] = tagValue

package/src/Common/CustomTagSelector/TagLabelValueSelector.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { OptionType, TagType } from '../Types'
+import { TagLabelValueSelectorType } from '../Types'
 import PopupMenu from '../PopupMenu'
 import { ValidationRules } from './ValidationRules'
 import { ReactComponent as ErrorCross } from '../../Assets/Icon/ic-close.svg'
@@ -12,29 +12,22 @@ export const TagLabelValueSelector = ({
     tagOptions,
     isRequired,
     type,
-}: {
-    selectedTagIndex: number
-    tagData: TagType
-    setTagData: (index: number, tagData: TagType) => void
-    tagOptions?: OptionType[]
-    isRequired?: boolean
-    type?: string
-}) => {
+    placeholder,
+}: TagLabelValueSelectorType) => {
     const [selectedValue, setSelectedValue] = useState<string>('')
     const [isPopupOpen, togglePopup] = useState<boolean>(false)
 
     const validationRules = new ValidationRules()
 
     useEffect(() => {
-        const _tagData = { ...tagData }
-        setSelectedValue(_tagData[type])
+        setSelectedValue(tagData?.[type] || '')
     }, [selectedTagIndex, tagData, type])
 
     const handleOnBlur = (e) => {
         if (
             !e.relatedTarget ||
             !e.relatedTarget.classList.value ||
-            e.relatedTarget.classList.value.indexOf(`tag-${selectedTagIndex}-class`) === -1
+            !e.relatedTarget.classList.value.includes(`tag-${selectedTagIndex}-class`)
         ) {
             const _tagData = { ...tagData }
             _tagData[type] = selectedValue
@@ -42,14 +35,12 @@ export const TagLabelValueSelector = ({
                 _tagData.isInvalidKey = selectedValue
                     ? !validationRules.propagateTagKey(selectedValue).isValid
                     : _tagData.value !== ''
+            } else if (selectedValue) {
+                _tagData.isInvalidValue = !validationRules.propagateTagValue(selectedValue).isValid
+                _tagData.isInvalidKey = !_tagData.key || _tagData.isInvalidKey
             } else {
-                if (selectedValue) {
-                    _tagData.isInvalidValue = !validationRules.propagateTagValue(selectedValue).isValid
-                    _tagData.isInvalidKey = !_tagData.key || _tagData.isInvalidKey
-                } else {
-                    _tagData.isInvalidValue = false
-                    _tagData.isInvalidKey = !_tagData.key ? false : _tagData.isInvalidKey
-                }
+                _tagData.isInvalidValue = false
+                _tagData.isInvalidKey = !_tagData.key ? false : _tagData.isInvalidKey
             }
             setTagData(selectedTagIndex, _tagData)
         }
@@ -67,12 +58,12 @@ export const TagLabelValueSelector = ({
 
     const renderValidationsSuggestions = (): JSX.Element => {
         let field = { isValid: true, messages: [] }
-        if (type === 'value') {
-            if (isRequired || selectedValue) {
-                field = validationRules.propagateTagValue(selectedValue)
+        if (type === 'key') {
+            if (selectedValue || tagData.value || tagData.description) {
+                field = validationRules.propagateTagKey(selectedValue)
             }
-        } else {
-            field = validationRules.propagateTagKey(selectedValue)
+        } else if (isRequired || selectedValue) {
+            field = validationRules.propagateTagValue(selectedValue)
         }
         if (!field.isValid) {
             return (
@@ -80,7 +71,7 @@ export const TagLabelValueSelector = ({
                     {field.messages.map((error) => (
                         <div key={error} className="flexbox p-4">
                             <span>
-                                <ErrorCross className="icon-dim-14 scr-5 mt-3 mr-4" />
+                                <ErrorCross className="fcr-5 mr-4" />
                             </span>
                             <span>{error}</span>
                         </div>
@@ -88,7 +79,7 @@ export const TagLabelValueSelector = ({
                     {type === 'key' && (
                         <div className="flexbox p-4">
                             <span>
-                                <Info className="icon-dim-14 mt-3 mr-4" />
+                                <Info className="mr-4" />
                             </span>
                             <span className="dc__italic-font-style">Key format: prefix/name or name</span>
                         </div>
@@ -122,7 +113,7 @@ export const TagLabelValueSelector = ({
     return (
         <PopupMenu onToggleCallback={(isOpen) => togglePopup(isOpen)} autoClose>
             <PopupMenu.Button
-                rootClassName={`${
+                rootClassName={`h-32 ${
                     type === 'key'
                         ? `dc__no-right-radius`
                         : `dc__no-border-radius dc__no-right-border dc__no-left-border`
@@ -134,6 +125,7 @@ export const TagLabelValueSelector = ({
                     value={selectedValue}
                     onChange={handleInputChange}
                     onBlur={handleOnBlur}
+                    placeholder={placeholder}
                 />
             </PopupMenu.Button>
             <PopupMenu.Body rootClassName={`tag-${selectedTagIndex}-class`} autoWidth={true}>

package/src/Common/CustomTagSelector/ValidationRules.ts

@@ -5,11 +5,11 @@ const validateTagValue = (value: string): string[] => {
     if (value.length > 63) {
         errorList.push('Can be max 63 characters')
     }
-    let firstLastAlphanumeric = PATTERNS.START_END_ALPHANUMERIC.test(value)
+    const firstLastAlphanumeric = PATTERNS.START_END_ALPHANUMERIC.test(value)
     if (!firstLastAlphanumeric) {
         errorList.push('Must start and end with an alphanumeric character')
     }
-    let validValue = PATTERNS.ALPHANUMERIC_WITH_SPECIAL_CHAR.test(value)
+    const validValue = PATTERNS.ALPHANUMERIC_WITH_SPECIAL_CHAR.test(value)
     if (!validValue) {
         errorList.push('Can only contain alphanumeric chars and (-), (_), (.)')
     }
@@ -32,7 +32,7 @@ export class ValidationRules {
                 if (prefix.length > 253) {
                     errorList.push('Prefix: Can be max 253 characters')
                 }
-                let validPrefix = PATTERNS.KUBERNETES_KEY_PREFIX.test(prefix)
+                const validPrefix = PATTERNS.KUBERNETES_KEY_PREFIX.test(prefix)
                 if (!validPrefix) {
                     errorList.push('Prefix: Must be a DNS subdomain (a series of DNS labels separated by dots (.)')
                 }

package/src/Common/InfoColorBar/InfoColourbar.tsx

@@ -0,0 +1,92 @@
+import React, { CSSProperties } from 'react'
+import { Link } from 'react-router-dom'
+import './infoColourBar.scss'
+
+interface InfoColourBarType {
+    message: React.ReactNode
+    classname: string
+    Icon
+    iconClass?: string
+    iconSize?: number // E.g. 16, 20, etc.. Currently, there are around 12 sizes supported. Check `icons.css` or `base.scss` for supported sizes or add new size (class names starts with `icon-dim-`).
+    renderActionButton?: () => JSX.Element
+    linkText?: React.ReactNode
+    redirectLink?: string
+    linkOnClick?: () => void
+    linkClass?: string
+    internalLink?: boolean
+    styles?: CSSProperties
+}
+
+function InfoColourBar({
+    message,
+    classname,
+    Icon,
+    iconClass,
+    iconSize,
+    renderActionButton,
+    linkText,
+    redirectLink,
+    linkOnClick,
+    linkClass,
+    internalLink,
+    styles,
+}: InfoColourBarType) {
+    const renderLink = () => {
+        if (!linkText) {
+            return null
+        } else if (redirectLink) {
+            if (internalLink) {
+                return (
+                    <Link
+                        to={redirectLink}
+                        onClick={linkOnClick}
+                        className="cursor dc__link dc__underline-onhover mr-5"
+                    >
+                        {linkText}
+                    </Link>
+                )
+            }
+
+            return (
+                <a
+                    href={redirectLink}
+                    target="_blank"
+                    onClick={linkOnClick}
+                    className="cursor dc__link dc__underline-onhover mr-5"
+                >
+                    {linkText}
+                </a>
+            )
+        }
+
+        return (
+            linkOnClick && (
+                <div onClick={linkOnClick} className="cursor dc__link dc__underline-onhover">
+                    {linkText}
+                </div>
+            )
+        )
+    }
+
+    return (
+        <div className="info-bar-container">
+            <div
+                className={`${classname} info_text flex dc__content-space pt-8 pb-8 pl-16 pr-16 br-4 top fs-13 fw-4`}
+                style={styles}
+            >
+                <div className={`flex top ${typeof renderActionButton === 'function' ? 'mr-5' : ''}`}>
+                    <div className={`icon-dim-${iconSize ?? '20'} mr-10`}>
+                        <Icon className={`icon-dim-${iconSize ?? '20'} ${iconClass || ''} mr-8`} />
+                    </div>
+                    <div className={`info-bar-message-wrapper ${linkClass || ''}`}>
+                        <span className={linkText && redirectLink ? 'mr-5' : ''}>{message}</span>
+                        {renderLink()}
+                    </div>
+                </div>
+                {typeof renderActionButton === 'function' && renderActionButton()}
+            </div>
+        </div>
+    )
+}
+
+export default InfoColourBar

package/src/Common/InfoColorBar/infoColourBar.scss

@@ -0,0 +1,28 @@
+.info-bar-container {
+    .info_text .success {
+        background-color: var(--G100);
+    }
+    .warn {
+        background: var(--Y100);
+        border: solid var(--Y200);
+
+        .warning-icon path:nth-child(2) {
+            fill: var(--Y700);
+        }
+    }
+
+    .info_bar {
+        background-color: var(--B100);
+        border: 1px solid var(--B200);
+    }
+
+    .error_bar {
+        background-color: var(--R100);
+        border: 1px solid var(--R200);
+    }
+
+    .question-bar {
+        background-color: var(--V100);
+        border: 1px solid var(--V200);
+    }
+}

package/src/Common/MultiSelectCustomization.tsx

@@ -0,0 +1,150 @@
+import React from 'react'
+import Select, { components } from 'react-select'
+import { ReactComponent as ClearIcon } from '../Assets/Icon/ic-appstatus-cancelled.svg'
+import { ReactComponent as Check } from '../Assets/Icon/ic-check.svg'
+import { ReactComponent as RedWarning } from '../Assets/Icon/ic-error-medium.svg'
+
+export const Option = (props) => {
+    const { selectOption, data } = props
+    return (
+        <div className="flex left pl-12" style={{ background: props.isFocused ? 'var(--N100)' : 'transparent' }}>
+            <input
+                checked={props.isSelected}
+                disabled={props.isDisabled}
+                onChange={(e) => selectOption(data)}
+                type="checkbox"
+                style={{ height: '16px', width: '16px', flex: '0 0 16px' }}
+                className="mr-8"
+            />
+            <components.Option {...props} />
+        </div>
+    )
+}
+
+export const SingleSelectOption = (props) => {
+    const { selectOption, data } = props
+    const style = { height: '16px', width: '16px', flex: '0 0 16px' }
+    const onClick = (e) => selectOption(data)
+    return (
+        <div className="flex left pl-12" style={{ background: props.isFocused ? 'var(--N100)' : 'transparent' }}>
+            {props.isSelected ? (
+                <Check onClick={onClick} className="mr-8 icon-dim-16" style={style} />
+            ) : (
+                <span onClick={onClick} className="mr-8" style={style} />
+            )}
+            <components.Option {...props} />
+        </div>
+    )
+}
+
+export const MultiValueContainer = (props) => {
+    const { children, data, innerProps, selectProps } = props
+    const { label, value } = data
+    return (
+        <components.MultiValueContainer {...{ data, innerProps, selectProps }}>
+            <div className={`flex fs-12 ml-4 cn-9`}>{label}</div>
+            {children[1]}
+        </components.MultiValueContainer>
+    )
+}
+
+export const ClearIndicator = (props) => {
+    const {
+        children = <ClearIcon className="icon-dim-24" />,
+        getStyles,
+        innerProps: { ref, ...restInnerProps },
+    } = props
+    return (
+        <div {...restInnerProps} ref={ref} style={getStyles('clearIndicator', props)}>
+            <div className="flex pointer">{children}</div>
+        </div>
+    )
+}
+
+export const MultiValueRemove = (props) => {
+    const {
+        data,
+        innerProps: { onClick, onMouseDown },
+        selectProps,
+    } = props
+    return (
+        <components.MultiValueRemove {...props}>
+            <ClearIcon
+                {...{ onClick, onMouseDown }}
+                onClick={(e) => onClick(data)}
+                style={{ height: '18px', width: '18px' }}
+            />
+        </components.MultiValueRemove>
+    )
+}
+
+export const MultiValueChipContainer = ({ validator,  isAllSelected = false, ...props }) => {
+    const { children, data, innerProps, selectProps } = props
+    const { label, value } = data
+    const isValidEmail = validator ? validator(value) : true
+
+    if(isAllSelected && value !== '*') return null
+
+    return (
+        <components.MultiValueContainer {...{ data, innerProps, selectProps }}>
+            <div className={`flex fs-12 pl-4 pr-4`}>
+                {!isValidEmail && <RedWarning className="mr-4 icon-dim-16" />}
+                <div className={`${isValidEmail ? 'cn-9' : 'cr-5'}`}>{label}</div>
+            </div>
+            {children[1]}
+        </components.MultiValueContainer>
+    )
+}
+
+export const multiSelectStyles = {
+  control: (base, state) => ({
+      ...base,
+      cursor: state.isDisabled ? 'not-allowed' : 'normal',
+      border: state.isFocused ? '1px solid #06c' : '1px solid #d6dbdf',
+      boxShadow: 'none',
+      minheight: '24px !important'
+  }),
+  menu: (base, state) => ({
+      ...base,
+      top: `40px`,
+  }),
+  option: (base, state) => {
+      return ({
+          ...base,
+          backgroundColor: state.isFocused ? 'var(--N100)' : 'white',
+          color: 'var(--N900)',
+          padding: '8px 12px',
+      })
+  },
+  container: (base, state) => ({
+      ...base,
+      cursor: state.isDisabled ? 'not-allowed' : 'normal'
+  }),
+  valueContainer: (base, state) => ({
+      ...base,
+      color: state.selectProps.menuIsOpen ? 'var(--N500)' : base.color,
+  }),
+}
+
+interface CustomSelect {
+    sortSelected?: boolean
+    options: any[]
+    onChange: (...args) => void
+    value?: any
+    name?: string
+    placeholder?: string
+    className?: string
+    classNamePrefix?: string
+    menuPortalTarget?: any
+    components?: object
+    styles?: object
+    isMulti?: boolean
+    isDisabled?: boolean
+    closeMenuOnSelect?: boolean
+    hideSelectedOptions?: boolean
+    formatOptionLabel?: (...args) => any
+}
+
+export const CustomSelect: React.FC<CustomSelect> = (props) => {
+    return <Select {...props} />
+}

package/src/Common/Types.ts

@@ -1,3 +1,5 @@
+import { TagLabelSelect } from './CustomTagSelector'
+
 export interface ResponseType {
     code: number
     status: string
@@ -12,20 +14,43 @@ export interface APIOptions {
 }
 
 export interface TagType {
-  key:string
-  value?: string
-  description?: string
-  propagate: boolean
-  isInvalidKey?: boolean
-  isInvalidValue?: boolean
+    key: string
+    value?: string
+    description?: string
+    propagate: boolean
+    mandatoryProjectIdsCsv?: string[]
+    isInvalidKey?: boolean
+    isInvalidValue?: boolean
 }
 
 export interface OptionType {
-    label: string;
-    value: string;
+    label: string
+    value: string
 }
 
 export enum TippyTheme {
     black = 'black',
     white = 'white',
+}
+
+export interface TagLabelSelectType {
+    labelTags: TagType[]
+    setLabelTags: (tagList: TagType[]) => void
+}
+
+export interface TagDetailType {
+    index: number
+    tagData: TagType
+    setTagData: (index: number, tagData: TagType) => void
+    removeTag: (index: number) => void
+}
+
+export interface TagLabelValueSelectorType {
+  selectedTagIndex: number
+  tagData: TagType
+  setTagData: (index: number, tagData: TagType) => void
+  tagOptions?: OptionType[]
+  isRequired?: boolean
+  type?: string
+  placeholder?: string
 }

package/src/Common/index.ts

@@ -19,4 +19,6 @@ export * from './RadioGroup'
 export { default as PopupMenu } from './PopupMenu'
 export * from './TippyCustomized'
 export * from './CustomTagSelector'
-export * from './Dialogs'
+export * from './Dialogs'
+export * from './MultiSelectCustomization'
+export * from './InfoColorBar/InfoColourbar'