@sisense/sdk-shared-ui 0.1.0 → 1.26.0

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

@@ -0,0 +1,177 @@
+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

@@ -0,0 +1,134 @@
+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

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

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

@@ -0,0 +1,18 @@
+// @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

@@ -0,0 +1,42 @@
+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

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

package/src/lib/Menu/Confirmation/Confirmation.module.scss

@@ -0,0 +1,48 @@
+$positiveSign: green;
+$negativeSign: red;
+
+$buttonYes: $positiveSign;
+$buttonNo: $negativeSign;
+
+.container {
+  min-width: 245px;
+  max-width: 350px;
+  padding: 12px 18px;
+  font-size: 13px;
+  user-select: none;
+}
+
+.message {
+  margin-top: 10px;
+  overflow: hidden;
+  white-space: pre-line;
+  text-overflow: ellipsis;
+}
+
+.buttons {
+  margin-top: 19px;
+  width: 100%;
+  text-align: right;
+}
+
+.button {
+  height: 25px;
+  width: auto;
+  background: transparent;
+  outline: none;
+  cursor: pointer;
+  border: none;
+
+  &:hover {
+    opacity: 0.7;
+  }
+}
+
+.confirm {
+  color: $buttonYes;
+  margin-right: 20px;
+}
+
+.cancel {
+  color: $buttonNo;
+}

package/src/lib/Menu/Confirmation/Confirmation.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import ClassNames from 'classnames';
+// todo: add translations support
+// import { FormattedMessage } from 'react-intl';
+
+import { styleguideConstants } from '../../constants/styleguideConstants';
+
+import styles from './Confirmation.module.scss';
+// import messages from './translation';
+
+export const Confirmation = ({
+  message,
+  title,
+  onCancel,
+  onConfirm,
+}: {
+  message: string;
+  title: string;
+  onCancel: () => void;
+  onConfirm: () => void;
+}) => {
+  const confirmClasses = ClassNames(styles.button, styles.confirm);
+  const cancelClasses = ClassNames(styles.button, styles.cancel);
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.title}>{title}</div>
+      <div className={ClassNames(styles.message, styleguideConstants.TEXT_SECONDARY)}>
+        {message}
+      </div>
+      <div className={styles.buttons}>
+        <button className={confirmClasses} onClick={onConfirm}>
+          {/* eslint-disable-next-line i18next/no-literal-string */}
+          {/*<FormattedMessage {...messages.yes} />*/}
+          Yes
+        </button>
+        <button className={cancelClasses} onClick={onCancel}>
+          {/* eslint-disable-next-line i18next/no-literal-string */}
+          {/* <FormattedMessage {...messages.no} /> */}
+          No
+        </button>
+      </div>
+    </div>
+  );
+};

package/src/lib/Menu/Confirmation/index.ts

@@ -0,0 +1 @@
+export { Confirmation } from './Confirmation';

package/src/lib/Menu/Confirmation/translation.ts

@@ -0,0 +1,17 @@
+// import { defineMessages } from 'react-intl';
+
+// export default defineMessages({
+//     yes: {
+//         id: 'app.confirmation.yes',
+//         defaultMessage: 'Yes',
+//     },
+//     no: {
+//         id: 'app.confirmation.no',
+//         defaultMessage: 'No',
+//     },
+//     areYouSure: {
+//         id: 'app.confirmation.inline.areYouSure',
+//         defaultMessage: 'Are You Sure?',
+//     },
+// });
+export {};

package/src/lib/Menu/Menu.module.scss

@@ -0,0 +1,178 @@
+@use 'sass:math';
+@import '../styles/sisenseStyleguideReactColors.scss';
+
+$line-height: 18px;
+$item-space: 12px;
+$icon-size: 22px;
+$vertical-diff: math.div($icon-size - $line-height, 2);
+$item-vertical-padding: (math.div($item-space, 2) - $vertical-diff);
+$disabledMenuItemColor: $stepCaption;
+
+.container {
+  min-width: 128px;
+  position: absolute;
+  cursor: pointer;
+  padding: 0px;
+  background: $back;
+  box-shadow: 0px 0px 5px rgba(58, 67, 86, 0.2);
+  border-radius: 4px;
+
+  li {
+    list-style-type: none;
+    line-height: $icon-size;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    padding: $item-vertical-padding 5px;
+    position: relative;
+    transition: background-color 0.3s eaSe;
+    cursor: pointer;
+
+    &.disabled {
+      opacity: 0.5;
+      cursor: default;
+    }
+
+    &.groupHeader {
+      pointer-events: none;
+      font-style: italic;
+      font-weight: 600;
+    }
+
+    &.isDrill {
+      &:hover,
+      &:global(.fakeHover) {
+        background-color: $highlightListItem;
+      }
+    }
+
+    &:hover:not(.disabled) {
+      background-color: $highlightListItem;
+
+      &:after {
+        opacity: 1;
+      }
+    }
+
+    &.separator {
+      border-top: 1px solid #e1e1e1;
+    }
+
+    &.noIcon {
+      padding-left: 16px;
+      padding-right: 16px;
+    }
+
+    &.item.checked {
+      &:after {
+        content: '';
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 2px;
+        background-color: $foreHover;
+      }
+    }
+
+    &.radio {
+      padding-left: 8px;
+      padding-right: 0;
+      line-height: $icon-size;
+      align-items: stretch;
+    }
+
+    &.checkbox {
+      padding-left: 0;
+      padding-right: 0;
+      line-height: $icon-size;
+      align-items: stretch;
+    }
+
+    .icon {
+      margin: 0 10px 0 7px;
+    }
+
+    .itemType {
+      display: flex;
+      width: 100%;
+      margin-right: 1px;
+      white-space: nowrap;
+      // Space icon to end of line
+      :last-child {
+        margin-left: auto;
+      }
+    }
+
+    .nestedType {
+      display: flex;
+      width: 100%;
+
+      .nestedIcon {
+        position: static !important;
+      }
+    }
+
+    .menuItemText {
+      flex-grow: 1;
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+
+.separateGroup {
+  min-width: fit-content;
+}
+
+.itemCheckBox {
+  padding: 0 5px 0 16px;
+  width: 100%;
+}
+
+.itemRadioButton {
+  padding: 0 5px 0 8px;
+  width: 100%;
+}
+
+.scrollbar {
+  cursor: default;
+  > div:first-child {
+    position: relative !important;
+  }
+}
+
+.itemContainer {
+  display: flex;
+  flex-grow: 1;
+}
+
+.inlineConfirmation {
+  font-weight: 600;
+}
+
+.menuItemTooltip {
+  max-width: 180px;
+  overflow-wrap: break-word;
+
+  &:global(.rc-tooltip-placement-left) {
+    max-width: 195px;
+    padding-right: 15px;
+  }
+}
+
+.toggleButtonMenu {
+  pointer-events: none;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 10px;
+}
+
+.loader {
+  height: 25px;
+  position: relative;
+  margin: 0 auto;
+  width: 90%;
+}