@devtron-labs/devtron-fe-common-lib 0.0.39-beta-2 → 0.0.40

package/src/Common/RJSF/Form.tsx

@@ -1,29 +0,0 @@
-import React from 'react'
-import RJSF from '@rjsf/core'
-import RJSFValidator from '@rjsf/validator-ajv8'
-
-import { templates, widgets } from './config'
-import { FormProps } from './types'
-import { translateString } from './utils'
-import './rjsfForm.scss'
-
-// Need to use this way because the default import was not working as expected
-// The default import resolves to an object intead of a function
-const Form = (RJSF as any).default as typeof RJSF
-const validator = (RJSFValidator as any).default as typeof RJSFValidator
-
-export const RJSFForm = (props: FormProps) => (
-    <Form
-        noHtml5Validate
-        showErrorList={false}
-        autoComplete="off"
-        {...props}
-        validator={validator}
-        templates={{
-            ...templates,
-            ...props.templates,
-        }}
-        widgets={{ ...widgets, ...props.widgets }}
-        translateString={translateString}
-    />
-)

package/src/Common/RJSF/common/FieldRow.tsx

@@ -1,31 +0,0 @@
-import React from 'react'
-import { FieldRowProps } from './types'
-
-export const FieldRowWithLabel = ({
-    showLabel,
-    label,
-    required,
-    children,
-    id,
-    shouldAlignCenter = true,
-}: FieldRowProps) => (
-    <div
-        className={
-            showLabel
-                ? `display-grid dc__gap-12 rjsf-form-template__field ${shouldAlignCenter ? 'flex-align-center' : ''}`
-                : ''
-        }
-    >
-        {showLabel && (
-            <label className="cn-7 fs-13 lh-32 fw-4 flexbox mb-0" htmlFor={id}>
-                {!!label && (
-                    <>
-                        <span className="dc__ellipsis-right">{label}</span>
-                        {required && <span className="cr-5">&nbsp;*</span>}
-                    </>
-                )}
-            </label>
-        )}
-        {children}
-    </div>
-)

package/src/Common/RJSF/common/types.ts

@@ -1,9 +0,0 @@
-import { FieldTemplateProps } from '@rjsf/utils'
-
-export interface FieldRowProps extends Pick<FieldTemplateProps, 'children' | 'label' | 'required' | 'id'> {
-    showLabel?: boolean
-    /**
-     * @default true
-     */
-    shouldAlignCenter?: boolean
-}

package/src/Common/RJSF/config.ts

@@ -1,37 +0,0 @@
-import React from 'react'
-import { RegistryWidgetsType } from '@rjsf/utils'
-
-import {
-    AddButton,
-    ArrayFieldItemTemplate,
-    ArrayFieldTemplate,
-    BaseInputTemplate,
-    DescriptionFieldTemplate,
-    FieldTemplate,
-    FieldErrorTemplate,
-    ObjectFieldTemplate,
-    RemoveButton,
-    SubmitButton,
-    TitleFieldTemplate,
-    WrapIfAdditionalTemplate,
-} from './templates'
-import { CheckboxWidget, SelectWidget } from './widgets'
-import { FormProps } from './types'
-
-export const widgets: RegistryWidgetsType = {
-    CheckboxWidget,
-    SelectWidget,
-}
-
-export const templates: FormProps['templates'] = {
-    ArrayFieldItemTemplate,
-    ArrayFieldTemplate,
-    BaseInputTemplate,
-    ButtonTemplates: { AddButton, RemoveButton, SubmitButton },
-    DescriptionFieldTemplate,
-    FieldTemplate,
-    FieldErrorTemplate,
-    ObjectFieldTemplate,
-    TitleFieldTemplate,
-    WrapIfAdditionalTemplate,
-}

package/src/Common/RJSF/constants.ts

@@ -1,5 +0,0 @@
-export const PLACEHOLDERS = {
-    SELECT: 'Please select an option',
-    INPUT: 'Please enter an input',
-    OBJECT_KEY: 'Please enter a value for the key',
-}

package/src/Common/RJSF/index.ts

@@ -1,2 +0,0 @@
-export { RJSFForm } from './Form'
-export * from './types'

package/src/Common/RJSF/rjsfForm.scss

@@ -1,17 +0,0 @@
-.rjsf-form-template {
-    &__field {
-        grid-template-columns: 250px 1fr;
-    }
-
-    &__additional-fields {
-        grid-template-columns: 1fr 1fr minmax(20px, auto);
-    }
-
-    &__array-field-item {
-        grid-template-columns: 1fr auto;
-
-        & :first-child {
-            margin: 0;
-        }
-    }
-}

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

@@ -1,33 +0,0 @@
-import React, { CSSProperties } from 'react'
-import { ArrayFieldTemplateItemType } from '@rjsf/utils'
-
-export const ArrayFieldItemTemplate = ({
-    children,
-    className,
-    disabled,
-    hasToolbar,
-    hasRemove,
-    index,
-    onDropIndexClick,
-    readonly,
-    registry,
-    uiSchema,
-}: ArrayFieldTemplateItemType) => {
-    const { RemoveButton } = registry.templates.ButtonTemplates
-
-    return (
-        <div className="display-grid rjsf-form-template__array-field-item flex-align-center dc__gap-8 mb-12">
-            {children}
-            {hasToolbar && hasRemove && (
-                <div>
-                    <RemoveButton
-                        disabled={disabled || readonly}
-                        onClick={onDropIndexClick(index)}
-                        uiSchema={uiSchema}
-                        registry={registry}
-                    />
-                </div>
-            )}
-        </div>
-    )
-}

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

@@ -1,77 +0,0 @@
-import React from 'react'
-import { getTemplate, getUiOptions, ArrayFieldTemplateProps, ArrayFieldTemplateItemType } from '@rjsf/utils'
-import { FieldRowWithLabel } from '../common/FieldRow'
-
-const ActionButton = ({ canAdd, onAddClick, disabled, readonly, uiSchema, registry }) => {
-    const {
-        ButtonTemplates: { AddButton },
-    } = registry.templates
-
-    return (
-        canAdd && (
-            <AddButton onClick={onAddClick} disabled={disabled || readonly} uiSchema={uiSchema} registry={registry} />
-        )
-    )
-}
-
-export const ArrayFieldTemplate = ({
-    canAdd,
-    className,
-    disabled,
-    idSchema,
-    uiSchema,
-    items,
-    onAddClick,
-    readonly,
-    registry,
-    required,
-    title,
-}: ArrayFieldTemplateProps) => {
-    const uiOptions = getUiOptions(uiSchema)
-    const ArrayFieldItemTemplate = getTemplate<'ArrayFieldItemTemplate'>('ArrayFieldItemTemplate', registry, uiOptions)
-    const label = uiOptions.title || title
-
-    return (
-        <fieldset className={className} id={idSchema.$id}>
-            {/* Show the label here in case there are no items, otherwise handled by Field Template */}
-            {items.length ? (
-                <>
-                    {items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType, index) => {
-                        // Show the title as the label for the first field
-                        const children = {
-                            ...itemProps.children,
-                            props: {
-                                ...itemProps.children.props,
-                                name: index === 0 ? label : '',
-                            },
-                        }
-                        return (
-                            <ArrayFieldItemTemplate key={key} {...itemProps}>
-                                {children}
-                            </ArrayFieldItemTemplate>
-                        )
-                    })}
-                    <ActionButton
-                        canAdd={canAdd}
-                        onAddClick={onAddClick}
-                        disabled={disabled}
-                        readonly={readonly}
-                        uiSchema={uiSchema}
-                        registry={registry}
-                    />
-                </>
-            ) : (
-                <FieldRowWithLabel label={label} required={required} showLabel id={idSchema.$id}>
-                    <ActionButton
-                        canAdd={canAdd}
-                        onAddClick={onAddClick}
-                        disabled={disabled}
-                        readonly={readonly}
-                        uiSchema={uiSchema}
-                        registry={registry}
-                    />
-                </FieldRowWithLabel>
-            )}
-        </fieldset>
-    )
-}

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

@@ -1,16 +0,0 @@
-import React from 'react'
-import { getDefaultRegistry } from '@rjsf/core'
-import { BaseInputTemplateProps } from '@rjsf/utils'
-import { PLACEHOLDERS } from '../constants'
-
-const {
-    templates: { BaseInputTemplate },
-} = getDefaultRegistry()
-
-export const BaseInput = ({ placeholder, ...props }: BaseInputTemplateProps) => (
-    <BaseInputTemplate
-        placeholder={placeholder || PLACEHOLDERS.INPUT}
-        {...props}
-        className="form__input cn-9 fs-13 lh-20 fw-4"
-    />
-)

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,96 +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}
-                />
-            )}
-            <Field {...props} />
-        </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,59 +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) => ({
-            ...base,
-            padding: '0 8px',
-            fontWeight: '400',
-        }),
-        loadingMessage: (base) => ({
-            ...base,
-            color: 'var(--N600)',
-        }),
-        noOptionsMessage: (base) => ({
-            ...base,
-            color: 'var(--N600)',
-        }),
-        ...styleOverrides,
-    }
-}

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