@sisense/sdk-shared-ui 1.27.1 → 1.29.0

package/src/lib/DEPRECATED_Checkbox/DEPRECATED_Checkbox.tsx

@@ -1,103 +0,0 @@
-import React, { ChangeEvent, MouseEvent } from 'react';
-import classnames from 'classnames';
-
-import { DEPRECATED_Icon } from '../DEPRECATED_Icon';
-
-import style from './Checkbox.module.scss';
-
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export type DEPRECATED_CheckboxProps = {
-  checked: boolean;
-  className?: string;
-  disabled?: boolean;
-  inline?: boolean;
-  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
-
-  // The description is the icon and text. If undefined, use onChange.
-  onDescriptionClick?: () => void;
-  text?: string;
-  textClassName?: string;
-  title?: string;
-  transparent?: boolean;
-  dataTestId?: string;
-  iconName?: string;
-  inputCheckboxClassName?: string;
-};
-
-// eslint-disable-next-line @typescript-eslint/naming-convention
-const DEPRECATED_Checkbox = (props: DEPRECATED_CheckboxProps) => {
-  const {
-    className,
-    disabled,
-    inline,
-    text,
-    textClassName,
-    title,
-    transparent,
-    dataTestId,
-    iconName,
-    onDescriptionClick,
-    inputCheckboxClassName,
-    ...otherProps
-  } = props;
-
-  const propsPassedToInput: any = { disabled, ...otherProps };
-  if (title && !disabled) {
-    // eslint-disable-next-line
-    propsPassedToInput.title = title;
-  }
-
-  const cssPrefix = 'custom-checkbox';
-
-  const containerClass = classnames(
-    cssPrefix,
-    {
-      'custom-checkbox--inline': inline,
-      [style.disabled]: disabled,
-    },
-    className,
-  );
-  const checkboxClass = classnames(`${cssPrefix}__icon`, 'app-icon app-icon--form-checkbox-mark', {
-    [style.transparent]: transparent,
-  });
-  const textClass = classnames(`${cssPrefix}__text`, textClassName);
-  const onDescriptionClickWrapper = onDescriptionClick
-    ? (e: MouseEvent) => {
-        onDescriptionClick();
-        e.preventDefault();
-      }
-    : undefined;
-
-  return (
-    <div className={containerClass}>
-      <label className={`${cssPrefix}__label`}>
-        <div className={classnames(style.sharedComponentsInputCheckbox, inputCheckboxClassName)}>
-          <input
-            type="checkbox"
-            className={`${cssPrefix}__input`}
-            data-testid={dataTestId}
-            {...propsPassedToInput}
-          />
-          <span className={checkboxClass}>
-            <svg className="app-icon__svg">
-              <use xlinkHref="#form-checkbox-mark" />
-            </svg>
-          </span>
-        </div>
-        {iconName && (
-          <DEPRECATED_Icon
-            name={iconName}
-            className={style.icon}
-            onClick={onDescriptionClickWrapper}
-          />
-        )}
-        <span className={textClass} onClick={onDescriptionClickWrapper}>
-          {text}
-        </span>
-      </label>
-    </div>
-  );
-};
-
-export default DEPRECATED_Checkbox;
-export { DEPRECATED_Checkbox };

package/src/lib/DEPRECATED_Checkbox/index.ts

@@ -1,4 +0,0 @@
-import DEPRECATED_Checkbox from './DEPRECATED_Checkbox';
-
-export default DEPRECATED_Checkbox;
-export * from './DEPRECATED_Checkbox';

package/src/lib/DEPRECATED_Icon/DEPRECATED_Icon.module.scss

@@ -1,7 +0,0 @@
-.clickable {
-  cursor: pointer;
-}
-
-.disabled {
-  pointer-events: none;
-}

package/src/lib/DEPRECATED_Icon/DEPRECATED_Icon.stories.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-
-import { DEPRECATED_Icon } from './DEPRECATED_Icon';
-
-export default {
-  title: 'DEPRECATED/Icon',
-};
-
-export const GeneralArrowDown = () => <DEPRECATED_Icon name={'general-arrow-down'} />;
-
-export const GeneralArrowDownDisabled = () => (
-  <DEPRECATED_Icon name={'general-arrow-down'} disabled />
-);
-
-export const GeneralArrowDownClickable = () => (
-  <DEPRECATED_Icon name={'general-arrow-down'} onClick={() => {}} />
-);
-
-export const GeneralViSmallWhite = () => <DEPRECATED_Icon name={'general-vi-small-white'} />;
-
-export const GeneralViSmallWhiteDisabled = () => (
-  <DEPRECATED_Icon name={'general-vi-small-white'} disabled />
-);
-
-export const GeneralViSmallWhiteClickable = () => (
-  <DEPRECATED_Icon name={'general-vi-small-white'} onClick={() => {}} />
-);

package/src/lib/DEPRECATED_Icon/DEPRECATED_Icon.test.tsx

@@ -1,105 +0,0 @@
-import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
-import { describe, it, expect, vi } from 'vitest';
-
-import '@testing-library/jest-dom';
-
-import { DEPRECATED_Icon, DEPRECATED_IconProps } from './DEPRECATED_Icon';
-
-describe('DEPRECATED_Icon Component', () => {
-  const defaultProps: DEPRECATED_IconProps = {
-    name: 'test-icon',
-    dataTestId: 'icon',
-  };
-
-  it('should renders without crashing', () => {
-    const { getByTestId } = render(<DEPRECATED_Icon {...defaultProps} />);
-
-    expect(getByTestId('icon')).toBeInTheDocument();
-  });
-
-  it('should apply the correct icon name class', () => {
-    const { getByTestId } = render(<DEPRECATED_Icon {...defaultProps} />);
-
-    expect(getByTestId('icon')).toHaveClass('app-icon--test-icon');
-  });
-
-  it('should apply hover suffix when hovered', () => {
-    const { getByTestId } = render(<DEPRECATED_Icon {...defaultProps} hoverSuffix="-hover" />);
-    const icon = getByTestId('icon');
-
-    fireEvent.mouseEnter(icon);
-
-    expect(icon).toHaveClass('app-icon--test-icon-hover');
-  });
-
-  it('should apply hover suffix when hovered and and remove when hover out', () => {
-    const { getByTestId } = render(<DEPRECATED_Icon {...defaultProps} hoverSuffix="-hover" />);
-    const icon = getByTestId('icon');
-
-    fireEvent.mouseEnter(icon);
-    fireEvent.mouseLeave(icon);
-
-    expect(icon).toHaveClass('app-icon--test-icon');
-  });
-
-  it('should not apply hover suffix when disabled', () => {
-    const { getByTestId } = render(
-      <DEPRECATED_Icon {...defaultProps} hoverSuffix="-hover" disabled />,
-    );
-    const icon = getByTestId('icon');
-
-    fireEvent.mouseEnter(icon);
-
-    expect(icon).not.toHaveClass('app-icon--test-icon-hover');
-    expect(icon).toHaveClass('app-icon--test-icon');
-  });
-
-  it('should handles click events when not disabled', () => {
-    const onClick = vi.fn();
-    const { getByTestId } = render(<DEPRECATED_Icon {...defaultProps} onClick={onClick} />);
-    const icon = getByTestId('icon');
-
-    fireEvent.click(icon);
-
-    expect(onClick).toHaveBeenCalled();
-  });
-
-  it('should not trigger click events when disabled', () => {
-    const onClick = vi.fn();
-    const { getByTestId } = render(
-      <DEPRECATED_Icon {...defaultProps} onClick={onClick} disabled />,
-    );
-    const icon = getByTestId('icon');
-
-    expect(icon.className).toMatch(/disabled/);
-  });
-
-  it('should apply title attribute when title prop is provided and not disabled', () => {
-    const title = 'Icon Title';
-    const { getByTestId } = render(<DEPRECATED_Icon {...defaultProps} title={title} />);
-    const icon = getByTestId('icon');
-
-    expect(icon).toHaveAttribute('title', title);
-  });
-
-  // There bug in the code, it should be fixed
-  it('should not apply title attribute when disabled', () => {
-    const title = 'Icon Title';
-    const { getByTestId } = render(<DEPRECATED_Icon {...defaultProps} title={title} disabled />);
-    const icon = getByTestId('icon');
-
-    expect(icon).toHaveAttribute('title');
-  });
-
-  it('should render SVG with correct class and href', () => {
-    const { getByTestId } = render(<DEPRECATED_Icon {...defaultProps} />);
-    const icon = getByTestId('icon');
-    const svg = icon.querySelector('svg');
-    const useElement = svg?.querySelector('use');
-
-    expect(svg).toBeInTheDocument();
-    expect(svg).toHaveClass('app-icon__svg');
-    expect(useElement).toHaveAttribute('xlink:href', '#test-icon');
-  });
-});

package/src/lib/DEPRECATED_Icon/DEPRECATED_Icon.tsx

@@ -1,91 +0,0 @@
-import React, { MouseEventHandler, useState } from 'react';
-import classNames from 'classnames';
-
-import styles from './DEPRECATED_Icon.module.scss';
-
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export type DEPRECATED_IconProps = {
-  className?: string;
-  disabled?: boolean;
-  hoverSuffix?: string;
-  name: string;
-  onClick?: MouseEventHandler<HTMLSpanElement>;
-  onMouseEnter?: MouseEventHandler<HTMLSpanElement>;
-  onMouseLeave?: MouseEventHandler<HTMLSpanElement>;
-  spin?: boolean;
-  title?: string;
-  dataTestId?: string;
-} & React.HTMLAttributes<HTMLSpanElement>;
-
-const noop = () => {};
-
-// eslint-disable-next-line @typescript-eslint/naming-convention
-const DEPRECATED_Icon = (props: DEPRECATED_IconProps) => {
-  const [isHovered, setIsHovered] = useState(false);
-  const {
-    className = '',
-    disabled = false,
-    name,
-    hoverSuffix = '',
-    onClick = noop,
-    onMouseEnter = noop,
-    onMouseLeave = noop,
-    title = '',
-  } = props;
-  const handleMouseEnter = (evt: React.MouseEvent<HTMLSpanElement>) => {
-    if (!isHovered) setIsHovered(true);
-
-    onMouseEnter(evt);
-  };
-  const handleMouseLeave = (evt: React.MouseEvent<HTMLSpanElement>) => {
-    if (isHovered) setIsHovered(false);
-
-    onMouseLeave(evt);
-  };
-
-  const iconStyle = { top: 'auto' };
-  const iconName = !disabled && isHovered && hoverSuffix ? `${name}${hoverSuffix}` : name;
-  const iconClassName = classNames('app-icon', `app-icon--${iconName}`);
-  const svgClassName = classNames('app-icon__svg');
-  const iconClass = classNames(iconClassName, className, {
-    [styles.clickable]: onClick !== noop,
-    [styles.disabled]: disabled,
-  });
-
-  const { dataTestId, ...spanProps } = props;
-  const extraProps = { disabled, onClick, ...spanProps };
-
-  if (title && !disabled) {
-    extraProps.title = title;
-  }
-  delete extraProps.hoverSuffix;
-
-  return (
-    <span
-      {...extraProps}
-      className={iconClass}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-      data-testid={dataTestId}
-    >
-      <svg className={svgClassName} style={iconStyle}>
-        <use xlinkHref={`#${iconName}`} />
-        <symbol id="general-arrow-down" viewBox="0 0 24 24">
-          <path
-            fill="currentColor"
-            d="M12 13.84l3.174-2.719a.5.5 0 0 1 .65.76l-3.5 2.998a.5.5 0 0 1-.65 0l-3.5-2.998a.5.5 0 1 1 .65-.76L12 13.841z"
-          ></path>
-        </symbol>
-        <symbol id="general-vi-small-white" viewBox="0 0 24 24">
-          <path
-            fill="currentColor"
-            d="M8.354 11.646l-.708.708 3.418 3.417 5.343-7.48-.814-.582-4.657 6.52z"
-          ></path>
-        </symbol>
-      </svg>
-    </span>
-  );
-};
-
-export default DEPRECATED_Icon;
-export { DEPRECATED_Icon }; // Named export

package/src/lib/DEPRECATED_Icon/index.ts

@@ -1,4 +0,0 @@
-import DEPRECATED_Icon from './DEPRECATED_Icon';
-
-export default DEPRECATED_Icon;
-export * from './DEPRECATED_Icon';

package/src/lib/DEPRECATED_Toggle/DEPRECATED_Toggle.tsx

@@ -1,49 +0,0 @@
-import React from 'react';
-import classnames from 'classnames';
-
-export type ToggleProps = {
-  checked: boolean;
-  className?: string;
-  disabled?: boolean;
-  inline?: boolean;
-  onChange: (evt: React.ChangeEvent<HTMLInputElement>) => any;
-  text?: string;
-};
-
-// eslint-disable-next-line @typescript-eslint/naming-convention
-const DEPRECATED_Toggle = ({
-  checked,
-  onChange,
-  className = '',
-  disabled = false,
-  inline = false,
-  text = '',
-}: ToggleProps) => {
-  const inputProps = {
-    checked,
-    disabled,
-    onChange,
-  };
-  const cssPrefix = 'custom-togglebtn';
-  const containerClass = classnames(
-    cssPrefix,
-    {
-      [`${cssPrefix}--inline`]: inline,
-    },
-    className,
-  );
-  const checkboxClass = `${cssPrefix}__icon`;
-
-  return (
-    <div className={containerClass}>
-      <label className={`${cssPrefix}__label`}>
-        <input type="checkbox" className={`${cssPrefix}__input`} {...inputProps} />
-        <span className={checkboxClass} />
-        {text && <span className={`${cssPrefix}__text`}>{text}</span>}
-      </label>
-    </div>
-  );
-};
-
-export default DEPRECATED_Toggle;
-export { DEPRECATED_Toggle };

package/src/lib/DEPRECATED_Toggle/index.ts

@@ -1,4 +0,0 @@
-import DEPRECATED_Toggle from './DEPRECATED_Toggle';
-
-export default DEPRECATED_Toggle;
-export * from './DEPRECATED_Toggle';

package/src/lib/DEPRECATED_Tooltip/DEPRECATED_Tooltip.module.scss

@@ -1,115 +0,0 @@
-@use 'sass:math';
-// @import '../style_styleguide_react/base';
-
-:global {
-  @import 'rc-tooltip/assets/bootstrap_white';
-
-  $arrow-size: 8px;
-  $arrow-depth: 6px; // Math.ceil(sqrt(2) * $arrow-size / 2)
-
-  .rc-tooltip {
-    padding: 0;
-    background-color: transparent;
-    opacity: 1;
-
-    &.hide-arrow {
-      .rc-tooltip-arrow,
-      .rc-tooltip-content:before {
-        display: none;
-      }
-
-      &.rc-tooltip-placement-top,
-      &.rc-tooltip-placement-bottom,
-      &.rc-tooltip-placement-left,
-      &.rc-tooltip-placement-right {
-        padding: 0;
-      }
-
-      .rc-tooltip-inner {
-        padding: 0;
-      }
-    }
-  }
-
-  .rc-tooltip-content {
-    position: relative;
-  }
-
-  .rc-tooltip-inner {
-    padding: 6px 12px;
-    min-height: 0;
-    border: 0;
-    border-radius: 4px;
-    // @include boxShadow;
-    pointer-events: none;
-    color: red; //$fore;
-    font-size: 14px; //$sizeDefault;
-  }
-
-  .rc-tooltip-arrow {
-    border-width: 0 !important;
-    width: $arrow-size;
-    height: $arrow-size;
-    background-color: #000; //$back;
-    // @include boxShadow;
-    z-index: -1;
-    transform: rotate(45deg);
-  }
-
-  .rc-tooltip-content:before {
-    content: '';
-    position: absolute;
-    width: $arrow-size;
-    height: $arrow-size;
-    background-color: #000; //$back;
-    transform: rotate(45deg);
-  }
-
-  .rc-tooltip-placement-top {
-    padding-bottom: $arrow-depth;
-
-    .rc-tooltip-arrow,
-    .rc-tooltip-content:before {
-      left: 50%;
-      margin-left: math.div(-$arrow-size, 2);
-      bottom: math.div(-$arrow-size, 2);
-    }
-  }
-
-  .rc-tooltip-placement-bottom {
-    padding-top: $arrow-depth;
-
-    .rc-tooltip-arrow,
-    .rc-tooltip-content:before {
-      left: 50%;
-      margin-left: math.div(-$arrow-size, 2);
-      top: math.div(-$arrow-size, 2);
-    }
-  }
-
-  .rc-tooltip-placement-right {
-    padding-left: $arrow-depth;
-
-    .rc-tooltip-arrow,
-    .rc-tooltip-content:before {
-      top: 50%;
-      margin-top: math.div(-$arrow-size, 2);
-      left: math.div(-$arrow-size, 2);
-    }
-  }
-
-  .rc-tooltip-placement-left {
-    padding-right: $arrow-depth;
-
-    .rc-tooltip-arrow,
-    .rc-tooltip-content:before {
-      top: 50%;
-      margin-top: math.div(-$arrow-size, 2);
-      right: math.div(-$arrow-size, 2);
-    }
-  }
-}
-
-.breakLongWord {
-  word-break: break-all;
-}

package/src/lib/DEPRECATED_Tooltip/DEPRECATED_Tooltip.tsx

@@ -1,68 +0,0 @@
-/* eslint-disable @typescript-eslint/naming-convention */
-import React from 'react';
-import classnames from 'classnames';
-import RcTooltip from 'rc-tooltip';
-import type { TooltipProps } from 'rc-tooltip/lib/Tooltip';
-
-import styles from './DEPRECATED_Tooltip.module.scss';
-import { styleguideConstants } from '../constants/styleguideConstants';
-
-export type DEPRECATED_TooltipProps = {
-  breakingLongWord?: boolean;
-  hideArrow?: boolean;
-  onClick?: (ev: MouseEvent) => void;
-  overlayClassName?: string;
-  zIndex?: number;
-  imgOverlay?: boolean;
-  semanticText?: boolean;
-} & TooltipProps;
-
-const DEPRECATED_Tooltip = (
-  props: React.PropsWithChildren<DEPRECATED_TooltipProps>,
-): JSX.Element => {
-  const {
-    breakingLongWord,
-    hideArrow = false,
-    overlayClassName,
-    overlay,
-    imgOverlay = false,
-    semanticText,
-    ...otherProps
-  } = props;
-
-  const overlayClasses = classnames(
-    overlayClassName,
-    'slf-default',
-    styleguideConstants.SISENSE_NAMESPACE,
-    {
-      'hide-arrow': hideArrow,
-      [styles.breakLongWord]: breakingLongWord,
-      [styles.semanticText]: semanticText,
-      [styles.semanticText]: semanticText,
-    },
-  );
-
-  const getOverlay = () => {
-    if (typeof overlay === 'string') {
-      if (imgOverlay) {
-        return <img src={overlay} />;
-      } else {
-        return <div dangerouslySetInnerHTML={{ __html: overlay }} />;
-      }
-    }
-
-    return overlay;
-  };
-
-  return (
-    <RcTooltip
-      destroyTooltipOnHide
-      overlay={getOverlay()}
-      {...otherProps}
-      overlayClassName={overlayClasses}
-    />
-  );
-};
-
-export default DEPRECATED_Tooltip;
-export { DEPRECATED_Tooltip };

package/src/lib/DEPRECATED_Tooltip/index.ts

@@ -1,4 +0,0 @@
-import DEPRECATED_Tooltip from './DEPRECATED_Tooltip';
-
-export default DEPRECATED_Tooltip;
-export * from './DEPRECATED_Tooltip';

package/src/lib/Dropdown/Dropdown.module.scss

@@ -1,9 +0,0 @@
-.menu {
-  margin: 0;
-  position: initial;
-  box-shadow: none;
-  li {
-    padding: 0 5px;
-    height: 28px;
-  }
-}