@devtron-labs/devtron-fe-common-lib 0.0.55-beta-6 → 0.0.55-beta-7

package/src/Common/TippyCustomized.tsx

@@ -1,172 +0,0 @@
-import React, { useRef, useState } from 'react'
-import Tippy from '@tippyjs/react'
-import { ReactComponent as CloseIcon } from '../Assets/Icon/ic-cross.svg'
-import { ReactComponent as QuestionFilled } from '../Assets/Icon/ic-help.svg'
-import { ReactComponent as Question } from '../Assets/Icon/ic-help-outline.svg'
-import 'tippy.js/animations/shift-toward-subtle.css'
-import { TippyCustomizedProps, TippyTheme } from './Types'
-import { not } from './Helper'
-
-// This component will handle some of the new tippy designs and interactions
-// So this can be updated to support further for new features or interactions
-export function TippyCustomized(props: TippyCustomizedProps) {
-    const tippyRef = useRef(null)
-    const [showHeadingInfo, setShowHeadingInfo] = useState(false)
-    const isWhiteTheme = props.theme === TippyTheme.white
-
-    const onTippyMount = (tippyInstance) => {
-        tippyRef.current = tippyInstance
-        document.addEventListener('keydown', closeOnEsc)
-    }
-
-    const closeTippy = () => {
-        if (tippyRef.current?.hide) {
-            tippyRef.current.hide()
-            tippyRef.current = null
-
-            if (props.onClose) {
-                props.onClose()
-            }
-        }
-        setShowHeadingInfo(false)
-    }
-
-    const closeOnEsc = (e) => {
-        if (e.keyCode === 27) {
-            closeTippy()
-        }
-    }
-
-    const toggleHeadingInfo = (e) => {
-        setShowHeadingInfo(not)
-    }
-
-    const getTippyContent = () => {
-        const {
-            Icon,
-            iconPath,
-            iconClass,
-            iconSize,
-            onImageLoadError,
-            heading,
-            headingInfo,
-            infoTextHeading,
-            hideHeading,
-            infoText,
-            showCloseButton,
-            additionalContent,
-            documentationLink,
-            documentationLinkText,
-        } = props
-        return (
-            <>
-                {!hideHeading && 
-                <div
-                    className={`dc__word-break dc__hyphens-auto flex left ${
-                        isWhiteTheme 
-                            ? `p-12 cn-9 ${props.noHeadingBorder ? '' : 'dc__border-bottom-n1'}`
-                            : 'pt-20 pb-12 pr-20 pl-20 cn-0 top'
-                    }`}
-                >
-                    {iconPath ? (
-                        <img
-                            className={`icon-dim-${iconSize || 20} mr-6 ${iconClass || ''}`}
-                            src={iconPath}
-                            alt="Heading"
-                            onError={onImageLoadError}
-                        />
-                    ) : (
-                        Icon && (
-                            <div className={`icon-dim-${iconSize || 20} mr-6`}>
-                                <Icon className={`icon-dim-${iconSize || 20} ${iconClass || ''}`} />
-                            </div>
-                        )
-                    )}
-                    {heading && <span className={`fs-14 fw-6 lh-20 ${showCloseButton ? 'mr-6' : ''}`}>{heading}</span>}
-                    {headingInfo && (
-                        <div className="icon-dim-20 cursor" onClick={toggleHeadingInfo}>
-                            <Question className="icon-dim-20" />
-                        </div>
-                    )}
-                    {showCloseButton && (
-                        <div className="icon-dim-16 ml-auto">
-                            <CloseIcon
-                                className={`icon-dim-16 cursor ${isWhiteTheme ? 'fcn-9' : 'fcn-0'}`}
-                                onClick={closeTippy}
-                            />
-                        </div>
-                    )}
-                </div>}
-                {showHeadingInfo && (
-                    <div
-                        className={`flex left top bcv-1 fs-13 fw-4 lh-20 pt-8 pb-8 ${
-                            isWhiteTheme ? 'pl-12 pr-12' : 'pl-20 pr-20'
-                        }`}
-                    >
-                        <div className="icon-dim-20 mr-8">
-                            <QuestionFilled className="icon-dim-20 fcv-5" />
-                        </div>
-                        <div className="dc__word-break dc__hyphens-auto">{headingInfo}</div>
-                    </div>
-                )}
-                {infoTextHeading && (
-                    <div
-                        className={`dc__word-break dc__hyphens-auto fs-14 fw-6 lh-20 ${
-                            isWhiteTheme ? 'pl-12 pr-12' : 'pl-20 pr-20'
-                        }`}
-                    >
-                        {infoTextHeading}
-                    </div>
-                )}
-                {infoText && (
-                    <div
-                        className={`dc__word-break dc__hyphens-auto fs-13 fw-4 lh-20 ${
-                            isWhiteTheme
-                                ? 'p-12'
-                                : `pl-20 pr-20 pt-4 ${additionalContent && documentationLink ? 'pb-12' : 'pb-20'}`
-                        }`}
-                    >
-                        {infoText}
-                    </div>
-                )}
-                {additionalContent}
-                {documentationLink && (
-                    <div className="pl-12 pb-12">
-                        <a
-                            href={documentationLink}
-                            target="_blank"
-                            rel="noreferrer noopener"
-                            className="fs-13 cb-5"
-                            onClick={closeTippy}
-                        >
-                            {documentationLinkText || 'Learn more'}
-                        </a>
-                    </div>
-                )}
-            </>
-        )
-    }
-
-    const { className, placement, arrow, interactive, showOnCreate, trigger, animation, duration, children } = props
-
-    return (
-        <Tippy
-            className={`${
-                isWhiteTheme ? 'tippy-white-container default-white' : 'tippy-black-container default-black'
-            } no-content-padding tippy-shadow ${className}`}
-            arrow={arrow || false}
-            interactive={interactive || false}
-            placement={placement || 'top'}
-            content={getTippyContent()}
-            trigger={trigger || 'mouseenter'}
-            onMount={onTippyMount}
-            onClickOutside={closeTippy}
-            showOnCreate={showOnCreate || false}
-            animation={animation || 'fade'}
-            duration={duration || 300}
-            visible={props.visible}
-        >
-            {children}
-        </Tippy>
-    )
-}

package/src/Common/ToastBody.tsx

@@ -1,62 +0,0 @@
-import React from 'react'
-import { toast } from 'react-toastify'
-import { TOAST_ACCESS_DENIED } from './Constants'
-
-export class ToastBody extends React.Component<{
-    title: string
-    subtitle?: string
-}> {
-    render() {
-        return (
-            <div className="toast">
-                <div className="toast__title">{this.props.title}</div>
-                {this.props.subtitle && <div className="toast__subtitle">{this.props.subtitle}</div>}
-            </div>
-        )
-    }
-}
-
-export class ToastBody3 extends React.Component<{
-    text: string
-    onClick: (...args) => void
-    buttonText: string
-}> {
-    render() {
-        return (
-            <div className="flex left column dc__app-update-toast">
-                <span className="info">{this.props.text}</span>
-                <button type="button" onClick={this.props.onClick}>
-                    {this.props.buttonText}
-                </button>
-            </div>
-        )
-    }
-}
-
-export class ToastBodyWithButton extends React.Component<{
-    title: string
-    subtitle?: string
-    onClick: (...args) => void
-    buttonText: string
-}> {
-    render() {
-        return (
-            <div className="toast dc__app-update-toast">
-                <div className="toast__title">{this.props.title}</div>
-                {this.props.subtitle && <div className="toast__subtitle">{this.props.subtitle}</div>}
-                <button type="button" onClick={this.props.onClick} style={{ float: 'right' }}>
-                    {this.props.buttonText}
-                </button>
-            </div>
-        )
-    }
-}
-
-export const toastAccessDenied = (title?: string, subtitle?: string) => {
-    return toast.info(
-        <ToastBody title={title || TOAST_ACCESS_DENIED.TITLE} subtitle={subtitle || TOAST_ACCESS_DENIED.SUBTITLE} />,
-        {
-            className: 'devtron-toast unauthorized',
-        },
-    )
-}

package/src/Common/Toggle/Toggle.scss

@@ -1,78 +0,0 @@
-.toggle__switch {
-    position: relative;
-    display: inline-block;
-    width: 100%;
-    height: 100%;
-
-    &.disabled {
-        cursor: not-allowed;
-        .toggle__slider {
-            cursor: not-allowed;
-        }
-    }
-}
-
-/* Hide default HTML checkbox */
-
-.toggle__switch input {
-    opacity: 0;
-    width: 0;
-    height: 0;
-}
-
-/* The slider */
-
-.toggle__slider {
-    position: absolute;
-    cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: #ccc;
-    transition: all 0.4s ease;
-    &.round {
-        border-radius: 34px;
-        &:before {
-            border-radius: 50%;
-        }
-    }
-    &:before {
-        position: absolute;
-        content: '';
-        height: calc(100% - 8px);
-        width: calc(50% - 4px);
-        left: 4px;
-        bottom: 4px;
-        background-color: white;
-        transition: all 0.4s ease;
-    }
-    &.with-icon {
-        background-color: var(--N000) !important;
-        svg {
-            position: absolute;
-            content: '';
-            top: -1px;
-            left: -1px;
-            background-color: var(--N300);
-            transition: all 0.4s ease;
-        }
-    }
-}
-
-input:checked + .toggle__slider {
-    background-color: var(--color);
-    &:before {
-        transform: translateX(calc(100%));
-    }
-    &.with-icon {
-        svg {
-            transform: translateX(calc(100%));
-            background-color: var(--color);
-        }
-    }
-}
-
-input:focus + .toggle__slider {
-    box-shadow: 0 0 1px var(--color);
-}

package/src/Common/Toggle/Toggle.tsx

@@ -1,50 +0,0 @@
-import React from 'react'
-import { useEffectAfterMount } from '../Helper'
-import './Toggle.scss'
-
-const Toggle = ({
-    selected = false,
-    onSelect = null,
-    color = '#36b37e',
-    rootClassName = '',
-    disabled = false,
-    dataTestId = 'handle-toggle-button',
-    Icon = null,
-    iconClass= '',
-    ...props
-}) => {
-    const [active, setActive] = React.useState(selected)
-
-    useEffectAfterMount(() => {
-        if (typeof onSelect === 'function') {
-            if (active !== selected) {
-                onSelect(active)
-            }
-        }
-    }, [active])
-
-    useEffectAfterMount(() => {
-        setActive(selected)
-    }, [selected])
-
-    function handleClick(e) {
-        if (!disabled) {
-            setActive((active) => !active)
-        }
-    }
-
-    return (
-        <label
-            {...props}
-            className={`${rootClassName} toggle__switch ${disabled ? 'disabled' : ''}`}
-            style={{ ['--color' as any]: color }}
-        >
-            <input type="checkbox" checked={!!active} onChange={handleClick} className="toggle__input" />
-            <span className={`toggle__slider ${Icon ? 'with-icon br-4 dc__border' : 'round'}`} data-testid={dataTestId}>
-                {Icon && <Icon className={`icon-dim-20 br-4 p-2 ${iconClass}`} />}
-            </span>
-        </label>
-    )
-}
-
-export default Toggle