@sisense/sdk-shared-ui 0.1.0 → 1.26.0

package/src/lib/DEPRECATED_Checkbox/DEPRECATED_Checkbox.tsx

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

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

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

@@ -0,0 +1,27 @@
+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.tsx

@@ -3,6 +3,7 @@ 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;
@@ -18,6 +19,7 @@ export type DEPRECATED_IconProps = {
 
 const noop = () => {};
 
+// eslint-disable-next-line @typescript-eslint/naming-convention
 const DEPRECATED_Icon = (props: DEPRECATED_IconProps) => {
   const [isHovered, setIsHovered] = useState(false);
   const {

package/src/lib/DEPRECATED_Toggle/DEPRECATED_Toggle.tsx

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

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

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

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

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

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

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

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

package/src/lib/Dropdown/Dropdown.tsx

@@ -0,0 +1,150 @@
+import React, { forwardRef } from 'react';
+import { ScrollbarProps } from 'react-custom-scrollbars';
+import classNames from 'classnames';
+// import { SLF } from '@sbi/styleguide';
+
+import { Popover } from '../Popover';
+import { Menu, itemTypes } from '../Menu';
+import { DropdownButton } from './DropdownButton';
+
+import { useDropdown } from './hooks';
+import { styleguideConstants } from '../constants/styleguideConstants';
+
+import type { DropdownItem, DropdownInputProps } from './types';
+import type { MenuItemConfig } from '../Menu';
+
+import style from './Dropdown.module.scss';
+
+const noop = () => {};
+
+export type DropdownProps = {
+  bubblePopoverMouseEvents?: boolean;
+  classNameButton?: string;
+  classNameDropdown?: string;
+  classNameSearch?: string;
+  classNameMenu?: string;
+  classNameTooltip?: string;
+  disabled?: boolean;
+  items: DropdownItem[];
+  mask?: boolean;
+  onSelectItem?: (item: MenuItemConfig) => void;
+  popoverOverlayLevel?: number;
+  selectedItemId?: string;
+  selectedShowIcon?: boolean;
+  width?: number;
+  inlineVariant?: boolean;
+  scrollbarProps?: ScrollbarProps;
+  placeholder?: string;
+  placement?: string;
+  zIndex?: number;
+  searchInputProps?: DropdownInputProps;
+  open?: boolean;
+  isLoading?: boolean;
+};
+
+const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
+  (
+    {
+      bubblePopoverMouseEvents = false,
+      items = [],
+      onSelectItem = noop,
+      popoverOverlayLevel = 0,
+      selectedShowIcon = true,
+      mask = true,
+      placeholder = '',
+      placement = 'bottomLeft',
+      disabled = false,
+      selectedItemId,
+      width,
+      scrollbarProps,
+      classNameMenu,
+      inlineVariant,
+      classNameDropdown,
+      classNameButton,
+      classNameSearch,
+      classNameTooltip,
+      zIndex,
+      searchInputProps,
+      open = false,
+      isLoading = false,
+    },
+    ref,
+  ) => {
+    const popoverVerticalOffset = inlineVariant ? 12 : 0;
+    const menuItems = items.map((item) => ({
+      id: item.id,
+      caption: item.caption || item.id,
+      type: itemTypes.ITEM,
+      iconName: item.iconName,
+      iconClass: item.iconClass,
+      selected: item.id === selectedItemId,
+      tooltip: item.tooltip,
+      disabled: item.disabled,
+    }));
+
+    const {
+      isOpen,
+      handlers: { handleOnSelectItem, handleDropdownClick },
+    } = useDropdown(onSelectItem, open, disabled);
+
+    const renderDropdown = () => {
+      const menuClassNames = classNames(
+        style.menu,
+        // SLF.BACK,
+        // SLF.TEXT_PRIMARY,
+        styleguideConstants.SISENSE_NAMESPACE,
+        classNameMenu,
+      );
+
+      return (
+        <Menu
+          items={menuItems}
+          onItemSelected={handleOnSelectItem}
+          className={menuClassNames}
+          width={width}
+          scrollbarProps={scrollbarProps}
+          isLoading={isLoading}
+          classNameTooltip={classNameTooltip}
+        />
+      );
+    };
+
+    return (
+      <div ref={ref} data-testid="popover_container">
+        <Popover
+          zIndex={zIndex}
+          bubbleMouseEvents={bubblePopoverMouseEvents}
+          trigger={['click']}
+          visible={isOpen}
+          placement={placement}
+          overlay={renderDropdown}
+          level={popoverOverlayLevel}
+          onVisibleChange={handleDropdownClick}
+          onRequestClose={handleDropdownClick}
+          align={{ offset: [0, popoverVerticalOffset] }}
+          mask={mask}
+        >
+          <div>
+            <DropdownButton
+              isOpen={isOpen}
+              items={items}
+              selectedShowIcon={selectedShowIcon}
+              placeholder={placeholder}
+              width={width}
+              disabled={disabled}
+              classNameButton={classNameButton}
+              classNameDropdown={classNameDropdown}
+              classNameSearch={classNameSearch}
+              inlineVariant={inlineVariant}
+              searchInputProps={searchInputProps}
+              selectedItemId={selectedItemId}
+            />
+          </div>
+        </Popover>
+      </div>
+    );
+  },
+);
+
+export default Dropdown;
+export { Dropdown };

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

@@ -0,0 +1,49 @@
+@import '../../styles/style_styleguide_react/mixins';
+@import '../../styles/colors.module';
+
+.dropdownButton {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  background: $ATHENS_GRAY;
+  border-radius: 4px;
+  height: 28px;
+  min-width: 192px;
+
+  &.inlineVariant {
+    background: none;
+    height: 18px;
+    border: none;
+    text-indent: 0;
+    min-width: initial;
+    &.open {
+      border: none;
+    }
+  }
+
+  &.open {
+    border: 1px solid $COLOR-TEXT;
+  }
+
+  &.disabled {
+    @include disabled;
+    pointer-events: none;
+  }
+
+  .selectedIcon {
+    flex-shrink: 0;
+  }
+
+  .chosenTitle {
+    margin-left: 12px;
+    flex-grow: 1;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .clickIcon {
+    flex-shrink: 0;
+    margin-right: 2px;
+  }
+}

package/src/lib/Dropdown/DropdownButton/DropdownButton.tsx

@@ -0,0 +1,81 @@
+import React, { FC, useRef } from 'react';
+import classNames from 'classnames';
+
+import { DropdownButtonSearch } from './DropdownButtonSearch';
+import { DropdownButtonBody } from './DropdownButtonBody';
+import { useDropdownButtonSearch } from './hooks';
+
+import type { DropdownItem, DropdownInputProps } from '../types';
+
+import style from './DropdownButton.module.scss';
+
+export type DropdownButtonProps = {
+  items?: DropdownItem[];
+  selectedShowIcon?: boolean;
+  placeholder?: string;
+  disabled?: boolean;
+  selectedItemId?: string;
+  width?: number;
+  inlineVariant?: boolean;
+  classNameDropdown?: string;
+  classNameButton?: string;
+  classNameSearch?: string;
+  searchInputProps?: DropdownInputProps;
+  isOpen?: boolean;
+};
+
+export const DropdownButton: FC<DropdownButtonProps> = ({
+  items = [],
+  selectedShowIcon = true,
+  placeholder = '',
+  disabled,
+  selectedItemId,
+  width,
+  inlineVariant,
+  classNameDropdown,
+  classNameButton,
+  classNameSearch,
+  searchInputProps,
+  isOpen = false,
+}) => {
+  const selectedItem = items.find((item) => item.id === selectedItemId);
+  const ref = useRef(null);
+
+  const {
+    inputProps,
+    handlers: { handleOnSearchInputClick, handleOnSearchInputChange },
+  } = useDropdownButtonSearch(isOpen, selectedItem, searchInputProps, ref);
+
+  const dropDownButtonClasses = classNames(
+    classNameButton,
+    style.dropdownButton,
+    {
+      [style.disabled]: disabled,
+      [style.open]: isOpen,
+      [style.inlineVariant]: inlineVariant,
+    },
+    classNameDropdown,
+  );
+
+  return (
+    <>
+      {searchInputProps && isOpen && !disabled ? (
+        <DropdownButtonSearch
+          ref={ref}
+          width={width}
+          onClick={handleOnSearchInputClick}
+          inputProps={{ ...inputProps, onChange: handleOnSearchInputChange }}
+          className={classNameSearch}
+        />
+      ) : (
+        <DropdownButtonBody
+          selectedItem={selectedItem}
+          width={width}
+          placeholder={placeholder}
+          selectedShowIcon={selectedShowIcon}
+          dropDownButtonClasses={dropDownButtonClasses}
+        />
+      )}
+    </>
+  );
+};