@devtron-labs/devtron-fe-common-lib 0.0.59 → 0.0.60-beta-1

package/src/Common/RJSF/templates/ButtonTemplates/AddButton.tsx

@@ -1,18 +0,0 @@
-import React from 'react'
-import { IconButtonProps } from '@rjsf/utils'
-
-import { ReactComponent as PlusIcon } from '../../../../Assets/Icon/ic-add.svg'
-
-export const AddButton = ({ icon, iconType, registry, uiSchema, ...props }: IconButtonProps) => (
-    <div className="flexbox flex-justify-end">
-        <button
-            {...props}
-            type="button"
-            className="dc__outline-none-imp p-0 dc__transparent flex dc__gap-4 cursor"
-            title="Add"
-        >
-            <PlusIcon className="icon-dim-16 fcb-5" />
-            <span className="cb-5 fs-13 lh-20">Add</span>
-        </button>
-    </div>
-)

package/src/Common/RJSF/templates/ButtonTemplates/RemoveButton.tsx

@@ -1,10 +0,0 @@
-import React from 'react'
-import { IconButtonProps } from '@rjsf/utils'
-
-import { ReactComponent as CrossIcon } from '../../../../Assets/Icon/ic-cross.svg'
-
-export const RemoveButton = ({ icon, iconType, registry, uiSchema, ...props }: IconButtonProps) => (
-    <button {...props} type="button" className="dc__outline-none-imp p-0 dc__transparent flex cursor" title="Remove">
-        <CrossIcon className="icon-dim-16 fcr-5" />
-    </button>
-)

package/src/Common/RJSF/templates/ButtonTemplates/SubmitButton.tsx

@@ -1,18 +0,0 @@
-import React from 'react'
-import { getSubmitButtonOptions, SubmitButtonProps } from '@rjsf/utils'
-
-export const SubmitButton = ({ uiSchema }: SubmitButtonProps) => {
-    const { submitText, norender, props: submitButtonProps = {} } = getSubmitButtonOptions(uiSchema)
-
-    return norender ? null : (
-        <div className="flexbox flex-justify-end">
-            <button
-                type="submit"
-                {...submitButtonProps}
-                className={`cta ${submitButtonProps.className || ''}`}
-            >
-                {submitText}
-            </button>
-        </div>
-    )
-}

package/src/Common/RJSF/templates/ButtonTemplates/index.ts

@@ -1,3 +0,0 @@
-export { AddButton } from './AddButton'
-export { RemoveButton } from './RemoveButton'
-export { SubmitButton } from './SubmitButton'

package/src/Common/RJSF/templates/Description.tsx

@@ -1,12 +0,0 @@
-import React from 'react'
-import { DescriptionFieldProps } from '@rjsf/utils'
-
-import { ReactComponent as Info } from '../../../Assets/Icon/ic-info-filled.svg'
-
-export const Description = ({ id, description }: DescriptionFieldProps) =>
-    description && (
-        <div id={id} className="flex left flex-align-center mt-4 dc__gap-4">
-            <Info className="icon-dim-16 mw-16 info-icon-n5" />
-            <span className="cn-7 fs-11 fw-4 dc__ellipsis-right">{description}</span>
-        </div>
-    )

package/src/Common/RJSF/templates/Field.tsx

@@ -1,30 +0,0 @@
-import React from 'react'
-import { FieldTemplateProps, getUiOptions, getTemplate, ADDITIONAL_PROPERTY_FLAG } from '@rjsf/utils'
-import { FieldRowWithLabel } from '../common/FieldRow'
-
-export const Field = (props: FieldTemplateProps) => {
-    const { id, label, children, errors, hidden, required, displayLabel, registry, uiSchema, classNames, schema, description } =
-        props
-    const uiOptions = getUiOptions(uiSchema)
-    const WrapIfAdditionalTemplate = getTemplate<'WrapIfAdditionalTemplate'>(
-        'WrapIfAdditionalTemplate',
-        registry,
-        uiOptions,
-    )
-    // Object type fields have additional properties for key/value pairs
-    const hasAdditionalProperties = ADDITIONAL_PROPERTY_FLAG in schema
-    // Label is not displayed for boolean fields by default and hide for object type fields
-    const showLabel = (displayLabel || schema.type === 'boolean') && !hasAdditionalProperties
-
-    return hidden ? (
-        <div className="hidden">{children}</div>
-    ) : (
-        <div className={`${classNames} mb-12`}>
-            <FieldRowWithLabel label={label} showLabel={showLabel} id={id} required={required}>
-                <WrapIfAdditionalTemplate {...props}>{children}</WrapIfAdditionalTemplate>
-            </FieldRowWithLabel>
-            {description}
-            {errors}
-        </div>
-    )
-}

package/src/Common/RJSF/templates/FieldErrorTemplate.tsx

@@ -1,25 +0,0 @@
-import React from 'react'
-import { errorId, FieldErrorProps } from '@rjsf/utils'
-
-import { ReactComponent as Error } from '../../../Assets/Icon/ic-warning.svg'
-
-export const FieldErrorTemplate = ({ errors = [], idSchema }: FieldErrorProps) => {
-    const id = errorId(idSchema)
-
-    return (
-        errors.length > 0 && (
-            <span id={id}>
-                {errors
-                    .filter((elem) => !!elem)
-                    .map((error, index: number) => {
-                        return (
-                            <span className="form__error" key={index}>
-                                <Error className="form__icon form__icon--error" />
-                                {error}
-                            </span>
-                        )
-                    })}
-            </span>
-        )
-    )
-}

package/src/Common/RJSF/templates/ObjectFieldTemplate.tsx

@@ -1,105 +0,0 @@
-import React from 'react'
-import {
-    ObjectFieldTemplatePropertyType,
-    ObjectFieldTemplateProps,
-    canExpand,
-    getTemplate,
-    getUiOptions,
-    titleId,
-} from '@rjsf/utils'
-import { FieldRowWithLabel } from '../common/FieldRow'
-
-const Field = ({
-    disabled,
-    formData,
-    idSchema,
-    onAddClick,
-    properties,
-    readonly,
-    registry,
-    required,
-    schema,
-    title,
-    uiSchema,
-}: ObjectFieldTemplateProps) => {
-    const {
-        ButtonTemplates: { AddButton },
-    } = registry.templates
-    const hasAdditionalProperties = !!schema.additionalProperties
-
-    const ActionButton = canExpand(schema, uiSchema, formData) && (
-        <AddButton
-            className="object-property-expand"
-            onClick={onAddClick(schema)}
-            disabled={disabled || readonly}
-            uiSchema={uiSchema}
-            registry={registry}
-        />
-    )
-
-    const Properties = properties.map((prop: ObjectFieldTemplatePropertyType) => prop.content)
-
-    if (hasAdditionalProperties) {
-        if (properties.length) {
-            return (
-                <>
-                    <FieldRowWithLabel
-                        label={title}
-                        required={required}
-                        showLabel
-                        id={idSchema.$id}
-                        shouldAlignCenter={false}
-                    >
-                        <div>{Properties}</div>
-                    </FieldRowWithLabel>
-                    {ActionButton}
-                </>
-            )
-        } else {
-            return (
-                <FieldRowWithLabel label={title} required={required} showLabel id={idSchema.$id}>
-                    {ActionButton}
-                </FieldRowWithLabel>
-            )
-        }
-    }
-    return (
-        <>
-            {Properties}
-            {ActionButton}
-        </>
-    )
-}
-
-export const ObjectFieldTemplate = (props: ObjectFieldTemplateProps) => {
-    const { idSchema, registry, required, schema, title, uiSchema } = props
-    const options = getUiOptions(uiSchema)
-    const TitleFieldTemplate = getTemplate('TitleFieldTemplate', registry, options)
-    const hasAdditionalProperties = !!schema.additionalProperties
-    const showTitle = title && !hasAdditionalProperties
-
-    return (
-        <fieldset id={idSchema.$id}>
-            {showTitle && (
-                <TitleFieldTemplate
-                    id={titleId(idSchema)}
-                    title={title}
-                    required={required}
-                    schema={schema}
-                    uiSchema={uiSchema}
-                    registry={registry}
-                />
-            )}
-            {/* Not adding the border and padding for non-objects and root schema */}
-            <div
-                className={
-                    schema.properties && !hasAdditionalProperties && idSchema.$id !== 'root'
-                        ? 'dc__border-left pl-12'
-                        : ''
-                }
-            >
-                <Field {...props} />
-            </div>
-        </fieldset>
-    )
-}

package/src/Common/RJSF/templates/TitleField.tsx

@@ -1,9 +0,0 @@
-import React from 'react'
-import { TitleFieldProps } from '@rjsf/utils'
-
-export const TitleField = ({ id, title, required }: TitleFieldProps) => (
-    <legend className="fs-13 fw-6 cn-9 lh-20 pb-8 dc__border-bottom en-1 mb-12" id={id}>
-        <span>{title}</span>
-        {required && <span className="cr-5">&nbsp;*</span>}
-    </legend>
-)

package/src/Common/RJSF/templates/WrapIfAdditionalTemplate.tsx

@@ -1,51 +0,0 @@
-import React from 'react'
-import { ADDITIONAL_PROPERTY_FLAG, WrapIfAdditionalTemplateProps } from '@rjsf/utils'
-
-import { PLACEHOLDERS } from '../constants'
-
-export const WrapIfAdditionalTemplate = ({
-    id,
-    disabled,
-    label,
-    onKeyChange,
-    onDropPropertyClick,
-    readonly,
-    schema,
-    children,
-    uiSchema,
-    registry,
-}: WrapIfAdditionalTemplateProps) => {
-    const { templates } = registry
-    const { RemoveButton } = templates.ButtonTemplates
-    const additional = ADDITIONAL_PROPERTY_FLAG in schema
-
-    return (
-        <>
-            {additional ? (
-                <div className="rjsf-form-template__additional-fields display-grid dc__gap-8 flex-align-center">
-                    <div>
-                        <input
-                            type="text"
-                            className="form__input cn-9 fs-13 lh-20 fw-4"
-                            id={`${id}-key`}
-                            onBlur={(event) => onKeyChange(event.target.value)}
-                            placeholder={PLACEHOLDERS.OBJECT_KEY}
-                            defaultValue={label}
-                        />
-                    </div>
-                    <div>{children}</div>
-                    <div>
-                        <RemoveButton
-                            disabled={disabled || readonly}
-                            onClick={onDropPropertyClick(label)}
-                            uiSchema={uiSchema}
-                            registry={registry}
-                        />
-                    </div>
-                </div>
-            ) : (
-                children
-            )}
-        </>
-    )
-}

package/src/Common/RJSF/templates/index.ts

@@ -1,10 +0,0 @@
-export { ArrayFieldTemplate } from './ArrayFieldTemplate'
-export { ArrayFieldItemTemplate } from './ArrayFieldItemTemplate'
-export { BaseInput as BaseInputTemplate } from './BaseInput'
-export * from './ButtonTemplates'
-export { Description as DescriptionFieldTemplate } from './Description'
-export { Field as FieldTemplate } from './Field'
-export { FieldErrorTemplate } from './FieldErrorTemplate'
-export { ObjectFieldTemplate } from './ObjectFieldTemplate'
-export { TitleField as TitleFieldTemplate } from './TitleField'
-export { WrapIfAdditionalTemplate } from './WrapIfAdditionalTemplate'

package/src/Common/RJSF/types.ts

@@ -1,4 +0,0 @@
-import { ComponentProps } from 'react'
-import RJSFForm from '@rjsf/core'
-
-export type FormProps = Omit<ComponentProps<typeof RJSFForm>, 'validator'>

package/src/Common/RJSF/utils.ts

@@ -1,123 +0,0 @@
-import { TranslatableString, englishStringTranslator } from '@rjsf/utils'
-
-/**
- * Override for the TranslatableString from RJSF
- */
-export const translateString = (stringToTranslate: TranslatableString, params?: string[]): string => {
-    switch (stringToTranslate) {
-        case TranslatableString.NewStringDefault:
-            // Use an empty string for the new additionalProperties string default value
-            return ''
-        default:
-            return englishStringTranslator(stringToTranslate, params)
-    }
-}
-
-export const getCommonSelectStyle = (styleOverrides = {}) => {
-    return {
-        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, state) => ({
-            ...base,
-            padding: '0 8px',
-            fontWeight: '400',
-            color: state.selectProps.menuIsOpen ? 'var(--N500)' : base.color,
-        }),
-        loadingMessage: (base) => ({
-            ...base,
-            color: 'var(--N600)',
-        }),
-        noOptionsMessage: (base) => ({
-            ...base,
-            color: 'var(--N600)',
-        }),
-        multiValue: (base, state) => {
-            return {
-                ...base,
-                border: `1px solid var(--N200)`,
-                borderRadius: `4px`,
-                background: 'white',
-                height: '28px',
-                marginRight: '8px',
-                padding: '2px',
-                fontSize: '12px',
-            }
-        },
-        ...styleOverrides,
-    }
-}
-
-/**
- * Returns the redirection props for a url
- */
-export const getRedirectionProps = (
-    url: string,
-): React.AnchorHTMLAttributes<HTMLAnchorElement> & {
-    url: string
-} => {
-    try {
-        // The URL is validated when added using the form
-        const isInternalUrl = new URL(url).origin === window.location.origin
-        return {
-            href: url,
-            target: isInternalUrl ? '_self' : '_blank',
-            rel: isInternalUrl ? undefined : 'external noreferrer',
-            url,
-        }
-    } catch (err) {
-        return {
-            href: url,
-            target: '_blank',
-            url: `${url} (Invalid URL)`,
-        }
-    }
-}
-
-/**
- * Infers the type for json schema from value type
- */
-export const getInferredTypeFromValueType = (value) => {
-    const valueType = typeof value
-
-    switch (valueType) {
-        case 'boolean':
-        case 'string':
-        case 'number':
-            return valueType
-        case 'object':
-            if (Array.isArray(value)) {
-                return 'array'
-            }
-            if (value === null) {
-                return 'null'
-            }
-            return valueType
-        default:
-            // Unsupported or undefined types
-            return 'null'
-    }
-}

package/src/Common/RJSF/widgets/Checkbox.tsx

@@ -1,44 +0,0 @@
-import React, { ChangeEvent } from 'react'
-import Toggle from '../../Toggle/Toggle'
-import { WidgetProps } from '@rjsf/utils'
-
-export const Checkbox = ({
-    id,
-    onChange,
-    value,
-    required,
-    disabled,
-    readonly,
-    autofocus,
-    onBlur,
-    onFocus,
-}: WidgetProps) => {
-    const handleEvent = (e: ChangeEvent<HTMLInputElement>, type: 'blur' | 'focus') => {
-        const { id, checked } = e.target
-        if (type === 'blur') {
-            onBlur(id, checked)
-        } else if (type === 'focus') {
-            onFocus(id, checked)
-        }
-    }
-
-    const isSelected: boolean = typeof value === 'undefined' ? false : value
-
-    return (
-        <div>
-            <Toggle
-                selected={isSelected}
-                onSelect={onChange}
-                id={id}
-                name={id}
-                required={required}
-                disabled={disabled || readonly}
-                autoFocus={autofocus}
-                rootClassName="w-32 mb-0 dc__height-inherit"
-                onBlur={(e) => handleEvent(e, 'blur')}
-                onFocus={(e) => handleEvent(e, 'focus')}
-            />
-            <span className="dc__capitalize ml-8">{isSelected.toString()}</span>
-        </div>
-    )
-}

package/src/Common/RJSF/widgets/Select.tsx

@@ -1,77 +0,0 @@
-import React from 'react'
-import isEqual from 'lodash/isEqual'
-import { WidgetProps } from '@rjsf/utils'
-import ReactSelect, { MenuListProps, components } from 'react-select'
-import { PLACEHOLDERS } from '../constants'
-import { getCommonSelectStyle } from '../utils'
-
-import { ReactComponent as ArrowDown } from '../../../Assets/Icon/ic-chevron-down.svg'
-
-const commonStyles = getCommonSelectStyle()
-
-const MenuList = ({ children, ...props }: MenuListProps) => (
-    <components.MenuList {...props}>{Array.isArray(children) ? children.slice(0, 20) : children}</components.MenuList>
-)
-
-const DropdownIndicator = (props) => (
-    <components.DropdownIndicator {...props}>
-        <ArrowDown className="icon-dim-20 icon-n5" data-testid="overview-project-edit-dropdown" />
-    </components.DropdownIndicator>
-)
-
-export const Select = (props: WidgetProps) => {
-    const {
-        id,
-        multiple = false,
-        options,
-        value,
-        disabled,
-        readonly,
-        autofocus = false,
-        onChange,
-        onBlur,
-        onFocus,
-        placeholder,
-    } = props
-    const { enumOptions: selectOptions = [] } = options
-    const emptyValue = multiple ? [] : ''
-
-    const handleChange = (option) => {
-        onChange(multiple ? option.map((o) => o.value) : option.value)
-    }
-
-    const getOption = (value) =>
-        multiple
-            ? selectOptions.filter((option) => value.some((val) => isEqual(val, option.value)))
-            : selectOptions.find((option) => isEqual(value, option.value))
-
-    return (
-        <ReactSelect
-            id={id}
-            name={id}
-            isMulti={multiple}
-            value={typeof value === 'undefined' ? emptyValue : getOption(value)}
-            autoFocus={autofocus}
-            onChange={handleChange}
-            options={selectOptions}
-            onBlur={() => onBlur(id, value)}
-            onFocus={() => onFocus(id, value)}
-            placeholder={placeholder || PLACEHOLDERS.SELECT}
-            isDisabled={disabled || readonly}
-            styles={{
-                ...commonStyles,
-                control: (base) => ({
-                    ...base,
-                    ...commonStyles.control,
-                    backgroundColor: 'var(--N50)',
-                }),
-            }}
-            components={{
-                IndicatorSeparator: null,
-                DropdownIndicator,
-                MenuList,
-            }}
-            menuPlacement="auto"
-        />
-    )
-}

package/src/Common/RJSF/widgets/index.ts

@@ -1,2 +0,0 @@
-export { Checkbox as CheckboxWidget } from './Checkbox'
-export { Select as SelectWidget } from './Select'

package/src/Common/RadioGroup/RadioGroup.tsx

@@ -1,105 +0,0 @@
-import Tippy from '@tippyjs/react'
-import React, { useState, useEffect } from 'react'
-import { ConditionalWrap } from '../Helper'
-import './radioGroup.scss'
-
-const RadioContext = React.createContext(null)
-
-function useRadioContext() {
-    const context = React.useContext(RadioContext)
-    if (!context) {
-        throw new Error(`Radio compound components cannot be rendered outside the Toggle component`)
-    }
-    return context
-}
-
-interface RadioGroupInterface {
-    name: string
-    onChange: any
-    className?: string
-    initialTab: string
-    disabled: boolean
-    showTippy?: boolean
-    tippyContent?: any
-    dataTestId?: string
-}
-
-interface RadioGroupComposition {
-    Radio?: React.FC<any>
-}
-
-const RadioGroup: React.FC<RadioGroupInterface> & RadioGroupComposition = React.memo(function RadioGroup({
-    name,
-    onChange,
-    children,
-    className = '',
-    initialTab,
-    disabled = false,
-    dataTestId,
-}) {
-    const [selected, select] = useState(null)
-
-    useEffect(() => {
-        if (initialTab === selected) return
-        select(initialTab)
-    }, [initialTab])
-
-    return (
-        <RadioContext.Provider value={{ name, selected, select, disabled, onChange }}>
-            <div className={`${className} radio-group`}>{children}</div>
-        </RadioContext.Provider>
-    )
-})
-
-function Radio({
-    value,
-    children,
-    className = '',
-    showTippy = false,
-    tippyContent = '',
-    tippyPlacement = 'bottom',
-    canSelect = true,
-    isDisabled = false,
-    tippyClass = '',
-    dataTestId,
-}) {
-    const { name, selected, select, disabled, onChange } = useRadioContext()
-    return (
-        <ConditionalWrap
-            condition={showTippy}
-            wrap={(children) => (
-                <Tippy
-                    className={`default-tt w-250 ${tippyClass}`}
-                    arrow={false}
-                    placement={tippyPlacement as any}
-                    content={tippyContent}
-                >
-                    {children}
-                </Tippy>
-            )}
-        >
-            <label className={`${className} radio ${isDisabled || disabled ? 'disabled' : ''}`}>
-                <input
-                    type="checkbox"
-                    value={value}
-                    name={name}
-                    checked={value === selected}
-                    onChange={(e) => {
-                        e.persist()
-                        if (canSelect) {
-                            select(e.target.value)
-                        }
-                        onChange(e)
-                    }}
-                    disabled={isDisabled || disabled}
-                />
-                <span className="radio__item-label" data-testid={dataTestId}>
-                    {children}
-                </span>
-            </label>
-        </ConditionalWrap>
-    )
-}
-
-RadioGroup.Radio = Radio
-export default RadioGroup