@sisense/sdk-shared-ui 1.27.1 → 1.29.0

package/src/lib/Icon/Icon.tsx

@@ -1,118 +0,0 @@
-import React, { type ForwardedRef, forwardRef } from 'react';
-import { IconProps as MuiIconProps } from '@mui/material';
-import ThemeProvider from '@mui/material/styles/ThemeProvider';
-import SvgIcon from '@mui/material/SvgIcon';
-import classNames from 'classnames';
-
-import { iconTheme } from './themes';
-
-export type IconProps = {
-  className?: string;
-  name: string;
-  title?: string;
-  dataTestId?: string;
-  disabled?: boolean;
-} & MuiIconProps &
-  React.HTMLAttributes<HTMLSpanElement>;
-
-const SisenseSvgIcon = (props: IconProps) => {
-  const { name, sx } = props;
-  const svgClassName = classNames('app-icon__svg');
-  return (
-    <SvgIcon classes={{ root: svgClassName }} sx={sx} inheritViewBox={true}>
-      <use xlinkHref={`#${name}`} />
-      <symbol id="general-arrow-big-down" viewBox="0 0 24 24">
-        <path
-          fill="currentColor"
-          d="M7.589 10L7 10.777 11.99 15 17 10.777 16.413 10l-4.422 3.727z"
-        ></path>
-      </symbol>
-      <symbol id="general-arrow-left" viewBox="0 0 24 24">
-        <path
-          fill="currentColor"
-          d="M13.878 9.325a.5.5 0 1 0-.76-.65l-2.998 3.5a.5.5 0 0 0 0 .65l2.999 3.5a.5.5 0 1 0 .76-.65l-2.72-3.175 2.72-3.175z"
-        ></path>
-      </symbol>
-
-      <symbol id="general-arrow-long-right" viewBox="0 0 29 8">
-        <path
-          d="M28.354 4.354a.5.5 0 0 0 0-.708L25.172.464a.5.5 0 1 0-.707.708L27.293 4l-2.828 2.828a.5.5 0 1 0 .707.708l3.182-3.182zM0 4.5h28v-1H0v1z"
-          fill="#3A4356"
-        ></path>
-      </symbol>
-
-      <symbol id="general-arrow-right" viewBox="0 0 24 24">
-        <path
-          fill="currentColor"
-          d="M13.34 12.5l-2.72-3.175a.5.5 0 1 1 .76-.65l2.998 3.5a.5.5 0 0 1 0 .65l-2.998 3.5a.5.5 0 1 1-.76-.65l2.72-3.175z"
-        ></path>
-      </symbol>
-
-      <symbol id="general-arrow-up" viewBox="0 0 24 24">
-        <path
-          fill="currentColor"
-          d="M12 10.16l-3.174 2.719a.5.5 0 0 1-.65-.76l3.5-2.998a.5.5 0 0 1 .65 0l3.5 2.998a.5.5 0 1 1-.65.76L12 10.159z"
-        ></path>
-      </symbol>
-
-      <symbol id="general-arrow-up-down" viewBox="0 0 24 24">
-        <path
-          fill="currentColor"
-          d="M15.646 14.646a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L12 18.293l3.646-3.647zm0-5.292L12 5.707 8.354 9.354a.5.5 0 1 1-.708-.708l4-4a.5.5 0 0 1 .708 0l4 4a.5.5 0 0 1-.708.708z"
-        ></path>
-      </symbol>
-
-      <symbol id="general-double-arrow-back" viewBox="0 0 24 24">
-        <path
-          fill="currentColor"
-          d="M9.658 12.5l2.72 3.175a.5.5 0 1 1-.76.65l-2.998-3.5a.5.5 0 0 1 0-.65l2.999-3.5a.5.5 0 1 1 .76.65L9.658 12.5zm5.719-3.175l-2.72 3.175 2.72 3.175a.5.5 0 1 1-.76.65l-2.998-3.5a.5.5 0 0 1 0-.65l2.998-3.5a.5.5 0 1 1 .76.65z"
-        ></path>
-      </symbol>
-
-      <symbol id="general-double-arrow-front" viewBox="0 0 24 24">
-        <path
-          fill="currentColor"
-          d="M11.34 12.5L8.62 9.325a.5.5 0 0 1 .76-.65l2.998 3.5a.5.5 0 0 1 0 .65l-2.998 3.5a.5.5 0 1 1-.76-.65l2.72-3.175zm.279-3.175a.5.5 0 0 1 .76-.65l2.998 3.5a.5.5 0 0 1 0 .65l-2.999 3.5a.5.5 0 1 1-.76-.65l2.72-3.175-2.72-3.175z"
-        ></path>
-      </symbol>
-
-      <symbol id="general-double-big-arrow-back" viewBox="0 0 31 31">
-        <g fill="currentColor">
-          <path d="M16 11.825l-3.842 4.297 3.662 4.087a.5.5 0 1 1-.76.65l-3.94-4.412a.5.5 0 0 1 0-.65l4.12-4.622a.5.5 0 1 1 .76.65zm5 0l-3.842 4.297 3.662 4.087a.5.5 0 1 1-.76.65l-3.94-4.412a.5.5 0 0 1 0-.65l4.12-4.622a.5.5 0 1 1 .76.65z"></path>
-          <path d="M10 11.5a.5.5 0 0 1 1 0v9a.5.5 0 0 1-1 0v-9z"></path>
-        </g>
-      </symbol>
-
-      <symbol id="general-double-big-arrow-front" viewBox="0 0 31 31">
-        <g fill="currentColor">
-          <path d="M15 20.175l3.842-4.297-3.662-4.087a.5.5 0 1 1 .76-.65l3.94 4.412a.5.5 0 0 1 0 .65l-4.12 4.622a.5.5 0 1 1-.76-.65zm-5 0l3.842-4.297-3.662-4.087a.5.5 0 1 1 .76-.65l3.94 4.412a.5.5 0 0 1 0 .65l-4.12 4.622a.5.5 0 1 1-.76-.65z"></path>
-          <path d="M21 20.5a.5.5 0 0 1-1 0v-9a.5.5 0 0 1 1 0v9z"></path>
-        </g>
-      </symbol>
-
-      <symbol id="general-x" viewBox="0 0 24 24">
-        <path
-          fill="currentColor"
-          d="M12 12.293L6.854 7.146a.5.5 0 1 0-.708.708L11.293 13l-5.147 5.146a.5.5 0 0 0 .708.708L12 13.707l5.146 5.147a.5.5 0 0 0 .708-.708L12.707 13l5.147-5.146a.5.5 0 0 0-.708-.708L12 12.293z"
-        ></path>
-      </symbol>
-    </SvgIcon>
-  );
-};
-
-const Icon = forwardRef((props: IconProps, ref: ForwardedRef<HTMLSpanElement>) => {
-  const { dataTestId, name, className } = props;
-  const returnedIconComponent = <SisenseSvgIcon {...props} />;
-  const iconClassName = classNames('app-icon', `app-icon--${name}`, className);
-
-  return (
-    <ThemeProvider theme={iconTheme}>
-      <span data-testid={dataTestId} {...props} ref={ref} className={iconClassName}>
-        {returnedIconComponent}
-      </span>
-    </ThemeProvider>
-  );
-});
-
-export default Icon;
-export { Icon };

package/src/lib/Icon/index.ts

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

package/src/lib/Icon/themes/iconTheme.tsx

@@ -1,38 +0,0 @@
-import createTheme from '@mui/material/styles/createTheme';
-// import { injectStylesWithWrapper, themeService, utils } from '@sbi/styleguide';
-
-// import { calcStyles } from './uiCustomization';
-import { siColors } from '../../themes';
-
-// injectStylesWithWrapper && injectStylesWithWrapper(calcStyles);
-
-declare module '@mui/material/Icon' {
-  interface IconPropsVariantOverrides {
-    gray: true;
-  }
-}
-
-export const iconTheme = createTheme({
-  components: {
-    MuiIcon: {
-      styleOverrides: {
-        root: {
-          color: `${siColors.StPrimaryColors.primary}`,
-          top: 0,
-        },
-      },
-    },
-    MuiSvgIcon: {
-      // styleOverrides: {
-      //     root: {
-      //         fill: utils.makeASlightlyDifferentColor(
-      //             themeService.getDesignSettings().typography.primaryTextColor,
-      //             0.9,
-      //         ),
-      //     },
-      // },
-    },
-  },
-});
-
-export type IconTheme = typeof iconTheme;

package/src/lib/Icon/themes/uiCustomization.ts

@@ -1,9 +0,0 @@
-export {};
-// import { CalcStyles, DesignSettings, utils } from '@sbi/styleguide';
-//
-// export const calcStyles: CalcStyles = (designSettings: DesignSettings) => ({
-//     '.MuiSvgIcon-root': {
-//         fill: utils.makeASlightlyDifferentColor(designSettings.typography.secondaryTextColor, 0.1),
-//         color: utils.makeASlightlyDifferentColor(designSettings.typography.secondaryTextColor, 0.1),
-//     },
-// });

package/src/lib/Input/Input.module.scss

@@ -1,97 +0,0 @@
-@import '../styles/style_styleguide_react/_variables';
-
-@mixin component {
-  position: relative;
-  display: flex;
-  align-items: center;
-  // .component .icon conflicts with .sis-scope .app-icon on position
-  .searchIcon.searchIcon {
-    position: absolute;
-    left: 8px;
-    z-index: 1;
-    opacity: 40%;
-    &.large {
-      top: 4px;
-    }
-  }
-  .clearIcon.clearIcon {
-    width: 15px;
-    height: 15px;
-    position: absolute;
-    top: 3px;
-    right: 4px;
-    border-radius: 20px;
-    padding: 4px;
-    &:hover {
-      background-color: $color-gray-2;
-    }
-    &.clearIconHidden {
-      display: none;
-    }
-    &.large {
-      width: 15px;
-      height: 15px;
-      top: 4px;
-      padding: 5px;
-    }
-  }
-  .passwordVisibilityIcon.passwordVisibilityIcon {
-    width: 24px;
-    height: 24px;
-    position: absolute;
-    right: 8px;
-    &.large {
-      width: 24px;
-      height: 24px;
-      top: 5px;
-    }
-  }
-
-  .customIcon {
-    position: absolute;
-    top: 3px;
-    right: 4px;
-
-    &.isLeft {
-      right: 0;
-      left: 8px;
-    }
-    &.large {
-      top: 5px;
-    }
-  }
-
-  .input {
-    border-radius: 4px;
-    outline: none;
-    background: $color-gray-4;
-    line-height: 28px;
-    height: 28px;
-    border: none;
-    text-indent: 8px;
-    width: 100%;
-    &.withLeftIcon {
-      text-indent: 32px;
-    }
-    &::placeholder {
-      color: #b0b5bf;
-    }
-    &:focus {
-      border: 1px solid $color-text;
-    }
-    &.large {
-      height: 34px;
-      line-height: 34px;
-    }
-    &::-ms-reveal {
-      display: none;
-    }
-  }
-}
-
-.component {
-  @include component;
-}
-:global(.sis-scope) .component {
-  @include component;
-}

package/src/lib/Input/Input.test.tsx

@@ -1,177 +0,0 @@
-import React from 'react';
-import { render, fireEvent, screen } from '@testing-library/react';
-import { vi } from 'vitest';
-
-import { Input } from './Input';
-import styles from './Input.module.scss';
-
-import '@testing-library/jest-dom';
-
-describe('Input Component', () => {
-  it('should render correctly with basic props', () => {
-    render(<Input onChange={vi.fn()} placeholder={'Enter text'} />);
-
-    const input = screen.getByPlaceholderText('Enter text');
-
-    expect(input).toBeInTheDocument();
-  });
-
-  it('should handle onChange and updates input value', () => {
-    const onChange = vi.fn();
-    render(<Input onChange={onChange} placeholder={'Enter text'} />);
-
-    const input = screen.getByPlaceholderText('Enter text');
-    fireEvent.change(input, { target: { value: 'test' } });
-
-    expect(onChange).toHaveBeenCalledWith('test');
-    expect(input).toHaveValue('test');
-  });
-
-  it('should clear input when clearable and clear icon is clicked', () => {
-    const onChange = vi.fn();
-    const { container } = render(
-      <Input onChange={onChange} placeholder={'Enter text'} clearable={true} value={'clear me'} />,
-    );
-
-    const clearIcon = container.querySelector('.app-icon.app-icon--general-x');
-    fireEvent.click(clearIcon as Element);
-
-    expect(onChange).toHaveBeenCalledWith('');
-  });
-
-  it('should render input in password mode', () => {
-    render(
-      <Input
-        onChange={vi.fn()}
-        placeholder={'Enter text'}
-        clearable={true}
-        value={'clear me'}
-        password={true}
-      />,
-    );
-
-    const input = screen.getByPlaceholderText('Enter text');
-
-    expect(input).toHaveAttribute('type', 'password');
-  });
-
-  it('should toggle password visibility', () => {
-    const { container } = render(
-      <Input
-        onChange={vi.fn()}
-        placeholder={'Enter text'}
-        clearable={true}
-        value={'clear me'}
-        password={true}
-      />,
-    );
-
-    const input = screen.getByPlaceholderText('Enter text');
-    const toggleIcon = container.querySelector('.app-icon.app-icon--general-show');
-    fireEvent.click(toggleIcon as Element);
-
-    expect(input).toHaveAttribute('type', 'text');
-  });
-
-  it('should render search icon when `search` is true', () => {
-    const { container } = render(
-      <Input onChange={vi.fn()} placeholder={'Enter text'} search={true} />,
-    );
-    const searchIcon = container.querySelector('.app-icon.app-icon--general-search-small');
-
-    expect(searchIcon).toBeInTheDocument();
-  });
-
-  it('should render custom icon when `icon` prop is passed', () => {
-    const { container } = render(
-      <Input
-        onChange={vi.fn()}
-        placeholder={'Enter text'}
-        search={true}
-        icon={{ placement: 'left', name: 'custom-icon' }}
-      />,
-    );
-
-    const customIcon = container.querySelector('.app-icon.app-icon--custom-icon');
-
-    expect(customIcon).toBeInTheDocument();
-  });
-
-  it('should apply className  correctly', () => {
-    const { container } = render(
-      <Input onChange={vi.fn()} placeholder={'Enter text'} className={'custom-class'} />,
-    );
-
-    const wrapper = container.querySelector('.custom-class');
-
-    expect(wrapper).toHaveClass('custom-class');
-  });
-
-  it('should apply inputClassName correctly', () => {
-    render(
-      <Input onChange={vi.fn()} placeholder={'Enter text'} inputClassName={'custom-input-class'} />,
-    );
-
-    const input = screen.getByPlaceholderText('Enter text');
-
-    expect(input).toHaveClass('custom-input-class');
-  });
-
-  it('should handle disabled state correctly', () => {
-    render(<Input onChange={vi.fn()} placeholder={'Enter text'} disabled={true} />);
-    const input = screen.getByPlaceholderText('Enter text');
-
-    expect(input).toBeDisabled();
-  });
-
-  it('should trim input when trimInput is true', () => {
-    const onChange = vi.fn();
-    render(<Input onChange={onChange} placeholder={'Enter text'} trimInput={true} />);
-    const input = screen.getByPlaceholderText('Enter text');
-    fireEvent.change(input, { target: { value: '  trimmed text  ' } });
-
-    expect(onChange).toHaveBeenCalledWith('trimmed text');
-  });
-
-  it('should prevent default behavior on mouse down for the clear icon', () => {
-    const { container } = render(<Input clearable value="test" onChange={vi.fn()} />);
-    const clearIcon = container.querySelector('.app-icon.app-icon--general-x');
-    const mouseDownEvent = new MouseEvent('mousedown', {
-      bubbles: true,
-      cancelable: true,
-    });
-    const preventDefaultSpy = vi.spyOn(mouseDownEvent, 'preventDefault');
-
-    clearIcon?.dispatchEvent(mouseDownEvent);
-
-    expect(preventDefaultSpy).toHaveBeenCalled();
-  });
-
-  it('should prevent default behavior on mouse down for the password visibility icon', () => {
-    const { container } = render(<Input password value="test" onChange={vi.fn()} />);
-    const passwordIcon = container.querySelector('.app-icon.app-icon--general-show');
-    const mouseDownEvent = new MouseEvent('mousedown', {
-      bubbles: true,
-      cancelable: true,
-    });
-    const preventDefaultSpy = vi.spyOn(mouseDownEvent, 'preventDefault');
-
-    (passwordIcon as Element).dispatchEvent(mouseDownEvent);
-
-    expect(preventDefaultSpy).toHaveBeenCalled();
-  });
-
-  it('should apply "withLeftIcon" class when icon is present and placement is left', () => {
-    render(
-      <Input
-        placeholder={'Enter text'}
-        icon={{ name: 'test-icon', placement: 'left' }}
-        onChange={vi.fn()}
-      />,
-    );
-
-    const input = screen.getByPlaceholderText('Enter text');
-
-    expect(input).toHaveClass(styles.withLeftIcon);
-  });
-});

package/src/lib/Input/Input.tsx

@@ -1,134 +0,0 @@
-import React, { useState, useRef, useEffect, MouseEventHandler } from 'react';
-import classnames from 'classnames';
-
-import { DEPRECATED_Icon } from '../DEPRECATED_Icon';
-
-import styles from './Input.module.scss';
-
-export interface InputProps
-  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'small' | 'onChange'> {
-  className?: string;
-  inputClassName?: string;
-  onChange: (value: string) => void;
-  onClicked?: MouseEventHandler;
-  onBlur?: () => void;
-  placeholder?: string;
-  search?: boolean;
-  dataTestId?: string;
-  defaultValue?: string;
-  value?: string;
-  autoFocus?: boolean;
-  clearable?: boolean;
-  password?: boolean;
-  disabled?: boolean;
-  size?: 'small' | 'large';
-  icon?: { name: string; placement?: 'right' | 'left' };
-  trimInput?: boolean;
-  ariaLabel?: React.AriaAttributes['aria-label'];
-}
-
-const Input = (props: InputProps): JSX.Element => {
-  const {
-    className,
-    inputClassName,
-    onChange,
-    onClicked,
-    onBlur = () => {},
-    placeholder,
-    search,
-    dataTestId,
-    defaultValue,
-    value,
-    autoFocus,
-    clearable,
-    password,
-    disabled = false,
-    size,
-    icon,
-    trimInput,
-    ariaLabel = 'input',
-  } = props;
-
-  const [inputValue, setInputValue] = useState(defaultValue || value || '');
-  const [passwordIsVisible, setPasswordIsVisible] = useState(false);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const { name: iconName = '', placement: iconPlacement } = icon || {};
-
-  useEffect(() => {
-    setInputValue(value || '');
-  }, [value]);
-
-  return (
-    <div className={classnames(styles.component, className)}>
-      {search && (
-        <DEPRECATED_Icon
-          className={classnames(styles.searchIcon, {
-            [styles.large]: size === 'large',
-          })}
-          name="general-search-small"
-        />
-      )}
-      <input
-        className={classnames(styles.input, inputClassName, {
-          [styles.withLeftIcon]: search || (icon && iconPlacement === 'left'),
-          [styles.large]: size === 'large',
-        })}
-        placeholder={placeholder}
-        disabled={disabled}
-        onChange={(e) => {
-          const value = trimInput ? e.target.value.trim() : e.target.value;
-          onChange(value);
-          setInputValue(e.target.value);
-        }}
-        onClick={onClicked}
-        onBlur={onBlur}
-        data-testid={dataTestId}
-        defaultValue={defaultValue}
-        value={value ?? inputValue}
-        autoFocus={autoFocus}
-        type={password && !passwordIsVisible ? 'password' : 'text'}
-        ref={inputRef}
-        aria-label={ariaLabel}
-      />
-      {clearable && !password && !icon && (
-        <DEPRECATED_Icon
-          className={classnames(styles.clearIcon, {
-            [styles.clearIconHidden]: inputValue === '',
-            [styles.large]: size === 'large',
-          })}
-          name="general-x"
-          onClick={() => {
-            setInputValue('');
-            onChange('');
-          }}
-          onMouseDown={(e) => e.preventDefault()}
-        />
-      )}
-      {password && (
-        <DEPRECATED_Icon
-          className={classnames(styles.passwordVisibilityIcon, {
-            [styles.large]: size === 'large',
-          })}
-          name={passwordIsVisible ? 'general-unhide' : 'general-show'}
-          onClick={() => {
-            setPasswordIsVisible(!passwordIsVisible);
-          }}
-          onMouseDown={(e) => e.preventDefault()}
-        />
-      )}
-      {icon && !clearable && !password && (
-        <DEPRECATED_Icon
-          className={classnames(styles.customIcon, {
-            [styles.large]: size === 'large',
-            [styles.isLeft]: iconPlacement === 'left',
-          })}
-          name={iconName}
-        />
-      )}
-    </div>
-  );
-};
-
-export default Input;
-export { Input };

package/src/lib/Input/index.ts

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

package/src/lib/LazyLoader/LazyLoader.module.scss

@@ -1,18 +0,0 @@
-// @import '~@sbi/styleguide/src/sass/components/_loader-two-dots.scss';
-
-.loader {
-  display: flex;
-  align-content: center;
-  justify-content: center;
-  align-items: center;
-
-  .caption {
-    margin-top: 50%;
-    word-break: break-word;
-    text-align: center;
-
-    span {
-      position: unset;
-    }
-  }
-}

package/src/lib/LazyLoader/LazyLoader.tsx

@@ -1,42 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-
-import style from './LazyLoader.module.scss';
-
-export type LazyLoaderProps = {
-  className?: string;
-  caption?: string;
-  isLoading?: boolean;
-};
-
-const LazyLoader = (props: LazyLoaderProps): JSX.Element => {
-  const { className = '', caption = '', isLoading = false } = props;
-
-  const hostClasses = classNames(
-    style['loader-two-dots'],
-    {
-      [style['loader-two-dots--inactive']]: !isLoading,
-    },
-    className,
-  );
-
-  const loaderIndicatorClass = classNames(style.loader, style['loader-two-dots-indicator']);
-  const captionClass = classNames(style.caption);
-
-  return (
-    <div className={hostClasses}>
-      {isLoading && (
-        <div data-testid="loader-component" className={loaderIndicatorClass}>
-          {caption && (
-            <div className={captionClass}>
-              <span>{caption}</span>
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default LazyLoader;
-export { LazyLoader };

package/src/lib/LazyLoader/index.ts

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