@spaced-out/ui-design-system 0.3.38 → 0.3.39-beta.0

package/lib/components/Button/Button.d.ts

@@ -0,0 +1,288 @@
+import {$ReadOnly, $Values, $Keys} from 'utility-types';
+import * as React from 'react';
+import {classify} from '../../utils/classify';
+import {CircularLoader} from '../CircularLoader';
+import type {IconType} from '../Icon';
+import {Icon} from '../Icon';
+import {Truncate} from '../Truncate';
+import css from './Button.module.css';
+type ClassNames = $ReadOnly<{
+  wrapper?: string;
+  icon?: string;
+  text?: string;
+}>;
+
+/**
+ * Note(Nishant): Although Button supports gradient as a type, its not currently customizable really.
+ * This only supports pre-defined gradient that moves from left to right.
+ * If someone wants to add more gradients, the expectation is that they would add it through a wrapper className.
+ *
+ * We could have taken an extra prop to take in the Gradient colors but that should not be encouraged
+ * as it would add an additional overhead on the component to figure out exact color values from string tokens
+ * and since this is rarely used type anyway, it should be avoided.
+ */
+export const BUTTON_TYPES = Object.freeze({
+  primary: 'primary',
+  secondary: 'secondary',
+  tertiary: 'tertiary',
+  ghost: 'ghost',
+  danger: 'danger',
+  gradient: 'gradient',
+});
+export const BUTTON_ACTION_TYPE = Object.freeze({
+  button: 'button',
+  submit: 'submit',
+  reset: 'reset',
+});
+export const BUTTON_SIZE = Object.freeze({
+  small: 'small',
+  medium: 'medium',
+});
+export type ButtonType = $Values<typeof BUTTON_TYPES>;
+export type ButtonActionType = $Values<typeof BUTTON_ACTION_TYPE>;
+export type ButtonSize = $Keys<typeof BUTTON_SIZE>;
+export type BaseButtonProps = {
+  children?: React.ReactNode;
+  disabled?: unknown;
+  actionType?: ButtonActionType;
+  onClick?:
+    | ((arg0: React.SyntheticEvent<HTMLElement>) => unknown)
+    | null
+    | undefined;
+  ariaLabel?: string;
+  tabIndex?: number;
+  isLoading?: boolean;
+  role?: string;
+};
+export type UnstyledButtonProps = BaseButtonProps & {
+  className?: string;
+};
+export type ButtonProps = BaseButtonProps & {
+  classNames?: ClassNames;
+  iconLeftName?: string;
+  iconLeftType?: IconType;
+  iconRightName?: string;
+  iconRightType?: IconType;
+  type?: ButtonType;
+  isFluid?: boolean;
+  size?: ButtonSize;
+};
+const ButtonTypeToIconColorMap = {
+  primary: 'inversePrimary',
+  secondary: 'clickable',
+  tertiary: 'primary',
+  ghost: 'primary',
+  danger: 'inversePrimary',
+  gradient: 'inversePrimary',
+};
+const ButtonTypeToLoaderColorMap = {
+  primary: 'colorTextInversePrimary',
+  secondary: 'colorTextClickable',
+  tertiary: 'colorTextPrimary',
+  ghost: 'colorTextPrimary',
+  danger: 'colorTextInversePrimary',
+  gradient: 'colorTextInversePrimary',
+};
+export const UnstyledButton: React$AbstractComponent<
+  UnstyledButtonProps,
+  HTMLButtonElement
+> = React.forwardRef<UnstyledButtonProps, HTMLButtonElement>(
+  (
+    {
+      disabled,
+      onClick,
+      className,
+      ariaLabel,
+      actionType,
+      tabIndex = 0,
+      isLoading,
+      role = 'button',
+      ...props
+    }: UnstyledButtonProps,
+    ref,
+  ) => (
+    <button
+      {...props}
+      {...(ariaLabel
+        ? {
+            'aria-label': ariaLabel,
+          }
+        : {})}
+      className={className}
+      ref={ref}
+      role={role}
+      disabled={disabled}
+      tabIndex={disabled ? -1 : tabIndex}
+      type={actionType}
+      onClick={(event) => {
+        if (disabled || isLoading) {
+          event.preventDefault();
+        } else if (onClick) {
+          onClick(event);
+        }
+      }}
+    />
+  ),
+);
+export const Button: React$AbstractComponent<ButtonProps, HTMLButtonElement> =
+  React.forwardRef<ButtonProps, HTMLButtonElement>(
+    (
+      {
+        classNames,
+        children,
+        iconLeftName = '',
+        iconLeftType = 'regular',
+        iconRightName = '',
+        iconRightType = 'regular',
+        type = 'primary',
+        isFluid = false,
+        disabled = false,
+        actionType = 'button',
+        size = 'medium',
+        isLoading,
+        ...props
+      }: ButtonProps,
+      ref,
+    ) => (
+      <UnstyledButton
+        {...props}
+        actionType={actionType}
+        disabled={disabled}
+        isLoading={isLoading}
+        className={classify(
+          css.button,
+          {
+            [css.primary]: type === 'primary',
+            [css.secondary]: type === 'secondary',
+            [css.tertiary]: type === 'tertiary',
+            [css.ghost]: type === 'ghost',
+            [css.danger]: type === 'danger',
+            [css.gradient]: type === 'gradient',
+            [css.disabled]: disabled,
+            [css.small]: size === 'small',
+            [css.medium]: size === 'medium',
+            [css.isFluid]: isFluid === true,
+            [css.withIconLeft]: !!iconLeftName,
+            [css.withIconRight]: !!iconRightName,
+            [css.withBothIcon]: !!(iconLeftName && iconRightName),
+            [css.onlyIcon]: (iconLeftName || iconRightName) && !children,
+          },
+          classNames?.wrapper,
+        )}
+        ref={ref}
+      >
+        <div className={css.buttonRow}>
+          {/* Has no icon, only child */}
+          {!(iconLeftName || iconRightName) ? (
+            <div className={classify(css.textContainer, classNames?.text)}>
+              {isLoading && (
+                <div className={css.loader}>
+                  <CircularLoader
+                    size={size}
+                    colorToken={
+                      disabled
+                        ? 'colorTextDisabled'
+                        : ButtonTypeToLoaderColorMap[type]
+                    }
+                  />
+                </div>
+              )}
+              <Truncate
+                className={classify({
+                  [css.hidden]: isLoading,
+                })}
+              >
+                {children}
+              </Truncate>
+            </div> // has icon, but no child
+          ) : children == null ? (
+            <>
+              {isLoading && (
+                <div className={css.loader}>
+                  <CircularLoader
+                    size={size}
+                    colorToken={
+                      disabled
+                        ? 'colorTextDisabled'
+                        : ButtonTypeToLoaderColorMap[type]
+                    }
+                  />
+                </div>
+              )}
+              <Icon
+                name={iconLeftName || iconRightName}
+                color={disabled ? 'disabled' : ButtonTypeToIconColorMap[type]}
+                size={size === 'medium' ? 'medium' : 'small'}
+                type={iconLeftName ? iconLeftType : iconRightType}
+                className={classify(
+                  {
+                    [css.hidden]: isLoading,
+                  },
+                  classNames?.icon,
+                )}
+              />
+            </> // has icon _and_ child
+          ) : (
+            (iconLeftName || iconRightName) && (
+              <>
+                {iconLeftName && (
+                  <Icon
+                    name={iconLeftName}
+                    color={
+                      disabled ? 'disabled' : ButtonTypeToIconColorMap[type]
+                    }
+                    size={size === 'medium' ? 'medium' : 'small'}
+                    type={iconLeftType}
+                    className={classify(
+                      {
+                        [css.hidden]: isLoading,
+                      },
+                      classNames?.icon,
+                    )}
+                  />
+                )}
+                <div className={classify(css.textContainer, classNames?.text)}>
+                  {isLoading && (
+                    <div className={css.loader}>
+                      <CircularLoader
+                        size={size}
+                        colorToken={
+                          disabled
+                            ? 'colorTextDisabled'
+                            : ButtonTypeToLoaderColorMap[type]
+                        }
+                      />
+                    </div>
+                  )}
+                  <Truncate
+                    className={classify({
+                      [css.hidden]: isLoading,
+                    })}
+                  >
+                    {children}
+                  </Truncate>
+                </div>
+                {iconRightName && (
+                  <Icon
+                    name={iconRightName}
+                    color={
+                      disabled ? 'disabled' : ButtonTypeToIconColorMap[type]
+                    }
+                    size={size === 'medium' ? 'medium' : 'small'}
+                    type={iconRightType}
+                    className={classify(
+                      {
+                        [css.hidden]: isLoading,
+                      },
+                      classNames?.icon,
+                    )}
+                  />
+                )}
+              </>
+            )
+          )}
+        </div>
+      </UnstyledButton>
+    ),
+  );
+Button.name = Button.displayName = 'Button';

package/lib/components/Button/index.d.ts

@@ -0,0 +1,14 @@
+export type {
+  ButtonActionType,
+  ButtonProps,
+  ButtonSize,
+  ButtonType,
+  UnstyledButtonProps,
+} from './Button';
+export {
+  Button,
+  BUTTON_ACTION_TYPE,
+  BUTTON_SIZE,
+  BUTTON_TYPES,
+  UnstyledButton,
+} from './Button';

package/lib/components/ButtonDropdown/ButtonDropdown.d.ts

@@ -0,0 +1,192 @@
+import {$Values, $ReadOnly} from 'utility-types';
+import * as React from 'react';
+import {
+  // $FlowFixMe[untyped-import]
+  autoUpdate, // $FlowFixMe[untyped-import]
+  flip, // $FlowFixMe[untyped-import]
+  offset, // $FlowFixMe[untyped-import]
+  shift, // $FlowFixMe[untyped-import]
+  useFloating,
+} from '@floating-ui/react';
+import {sizeFluid} from '../../styles/variables/_size';
+import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
+import {classify} from '../../utils/classify';
+import type {ClickAwayRefType} from '../../utils/click-away';
+import {ClickAway} from '../../utils/click-away';
+import {mergeRefs} from '../../utils/merge-refs';
+import type {ButtonProps} from '../Button';
+import {Button} from '../Button';
+import {ConditionalWrapper} from '../ConditionalWrapper';
+import type {MenuOption, MenuProps} from '../Menu';
+import {Menu} from '../Menu';
+import type {BaseTooltipProps} from '../Tooltip';
+import {Tooltip} from '../Tooltip';
+import css from './ButtonDropdown.module.css';
+export const ANCHOR_POSITION_TYPE = Object.freeze({
+  top: 'top',
+  topStart: 'top-start',
+  topEnd: 'top-end',
+  bottom: 'bottom',
+  bottomStart: 'bottom-start',
+  bottomEnd: 'bottom-end',
+});
+export const STRATEGY_TYPE = Object.freeze({
+  absolute: 'absolute',
+  fixed: 'fixed',
+});
+export type AnchorType = $Values<typeof ANCHOR_POSITION_TYPE>;
+export type Strategy = $Values<typeof STRATEGY_TYPE>;
+type ClassNames = $ReadOnly<{
+  buttonWrapper?: string;
+  dropdownContainer?: string;
+  buttonIcon?: string;
+}>;
+export type ButtonDropdownProps = ButtonProps & {
+  classNames?: ClassNames;
+  menu?: MenuProps;
+  positionStrategy?: Strategy;
+  anchorPosition?: AnchorType;
+  onOptionSelect?: (
+    option: MenuOption,
+    arg1: React.SyntheticEvent<HTMLElement> | null | undefined,
+  ) => unknown;
+  onMenuOpen?: () => unknown;
+  onMenuClose?: () => unknown;
+  tooltip?: BaseTooltipProps;
+  clickAwayRef?: ClickAwayRefType;
+};
+export const ButtonDropdown: React$AbstractComponent<
+  ButtonDropdownProps,
+  HTMLDivElement
+> = React.forwardRef<ButtonDropdownProps, HTMLDivElement>(
+  (
+    {
+      anchorPosition = 'bottom-start',
+      positionStrategy = STRATEGY_TYPE.absolute,
+      size = 'medium',
+      onOptionSelect,
+      menu,
+      classNames,
+      disabled,
+      onMenuOpen,
+      onMenuClose,
+      children,
+      iconRightName,
+      iconRightType = 'solid',
+      isFluid,
+      tooltip,
+      onClick,
+      clickAwayRef,
+      ...restButtonProps
+    }: ButtonDropdownProps,
+    forwardRef,
+  ) => {
+    const menuBtnRef = React.useRef(null);
+    const [isMenuOpen, setIsMenuOpen] = React.useState(false);
+    React.useImperativeHandle(forwardRef, () => menuBtnRef.current);
+    const {x, y, refs, strategy} = useFloating({
+      open: true,
+      strategy: positionStrategy,
+      placement: anchorPosition,
+      whileElementsMounted: autoUpdate,
+      middleware: [shift(), flip(), offset(parseInt(spaceXXSmall))],
+    });
+
+    const onMenuToggle = (isOpen: boolean) => {
+      if (isOpen) {
+        onMenuOpen?.();
+        setIsMenuOpen(true);
+      } else {
+        onMenuClose?.();
+        setIsMenuOpen(false);
+      }
+    };
+
+    return (
+      <ClickAway onChange={onMenuToggle} clickAwayRef={clickAwayRef}>
+        {({isOpen, onOpen, clickAway, boundaryRef, triggerRef}) => (
+          <div
+            data-testid="ButtonDropdown"
+            className={classify(
+              css.buttonDropdownContainer,
+              {
+                [css.isFluid]: isFluid === true,
+              },
+              classNames?.dropdownContainer,
+            )}
+            ref={menuBtnRef}
+          >
+            <ConditionalWrapper
+              condition={Boolean(tooltip)}
+              wrapper={(children) => (
+                <Tooltip
+                  {...tooltip}
+                  hidden={isMenuOpen ? true : tooltip?.hidden}
+                >
+                  {children}
+                </Tooltip>
+              )}
+            >
+              <Button
+                {...restButtonProps}
+                iconRightName={
+                  children
+                    ? iconRightName || (isOpen ? 'caret-up' : 'caret-down')
+                    : iconRightName
+                }
+                iconRightType={iconRightType}
+                disabled={disabled}
+                size={size}
+                ref={mergeRefs([refs.setReference, triggerRef])}
+                onClick={(e) => {
+                  onClick?.(e);
+                  e.stopPropagation();
+                  onOpen();
+                }}
+                isFluid={isFluid}
+                classNames={{
+                  wrapper: classNames?.buttonWrapper,
+                  icon: classNames?.buttonIcon,
+                }}
+              >
+                {children}
+              </Button>
+            </ConditionalWrapper>
+
+            {isOpen && menu && (
+              <div
+                ref={mergeRefs([refs.setFloating, boundaryRef])}
+                style={{
+                  display: 'flex',
+                  position: strategy,
+                  top: y ?? spaceNone,
+                  left: x ?? spaceNone,
+                  ...(isFluid && {
+                    width: sizeFluid,
+                  }),
+                }}
+              >
+                <Menu
+                  {...menu}
+                  onSelect={(option, e) => {
+                    onOptionSelect && onOptionSelect(option, e);
+
+                    if (
+                      // option.keepMenuOpenOnOptionSelect - to allow the menu persist its open stat upon option selection in normal variant
+                      !option.keepMenuOpenOnOptionSelect &&
+                      (!menu.optionsVariant || menu.optionsVariant === 'normal')
+                    ) {
+                      clickAway();
+                    }
+                  }}
+                  size={menu.size || size}
+                  onTabOut={clickAway}
+                />
+              </div>
+            )}
+          </div>
+        )}
+      </ClickAway>
+    );
+  },
+);

package/lib/components/ButtonDropdown/SimpleButtonDropdown.d.ts

@@ -0,0 +1,148 @@
+import {$ReadOnly} from 'utility-types';
+import * as React from 'react';
+import type {MenuClassNames, MenuLabelTooltip} from '../../types/menu';
+import type {ClickAwayRefType} from '../../utils/click-away';
+import {
+  getButtonLabelFromSelectedKeys,
+  getSelectedKeysFromSelectedOption,
+} from '../../utils/menu';
+import type {ButtonProps} from '../Button';
+import type {MenuOption, MenuOptionsVariant, Virtualization} from '../Menu';
+import type {BaseTooltipProps} from '../Tooltip';
+import type {AnchorType} from './ButtonDropdown';
+import {ButtonDropdown} from './ButtonDropdown';
+type ClassNames = $ReadOnly<{
+  buttonWrapper?: string;
+  dropdownContainer?: string;
+  buttonIcon?: string;
+}>;
+export type SimpleButtonDropdownRef = {
+  selectedKeys?: Array<string>;
+};
+export type SimpleButtonDropdownProps = ButtonProps & {
+  classNames?: ClassNames;
+  anchorPosition?: AnchorType;
+  tooltip?: BaseTooltipProps;
+  // Menu props
+  options?: Array<MenuOption>;
+  optionsVariant?: MenuOptionsVariant;
+  allowSearch?: boolean;
+  selectedKeys?: Array<string>;
+  menuVirtualization?: Virtualization;
+  header?: React.ReactNode;
+  footer?: React.ReactNode;
+  menuClassNames?: MenuClassNames;
+  showLabelTooltip?: MenuLabelTooltip;
+  allowWrap?: boolean;
+  // events
+  onOptionSelect?: (
+    option: MenuOption,
+    arg1: React.SyntheticEvent<HTMLElement> | null | undefined,
+  ) => unknown;
+  onMenuOpen?: () => unknown;
+  onMenuClose?: () => unknown;
+  // Resolvers
+  resolveLabel?: (option: MenuOption) => string | React.ReactNode;
+  resolveSecondaryLabel?: (option: MenuOption) => string | React.ReactNode;
+  clickAwayRef?: ClickAwayRefType;
+};
+
+const SimpleButtonDropdownBase = (props: SimpleButtonDropdownProps, ref) => {
+  const {
+    size = 'medium',
+    classNames,
+    anchorPosition,
+    options,
+    optionsVariant,
+    allowSearch,
+    selectedKeys,
+    onOptionSelect,
+    onMenuOpen,
+    onMenuClose,
+    resolveLabel,
+    resolveSecondaryLabel,
+    children,
+    isFluid,
+    menuVirtualization,
+    header,
+    footer,
+    menuClassNames,
+    showLabelTooltip,
+    allowWrap = false,
+    clickAwayRef,
+    ...buttonProps
+  } = props;
+  const [btnText, setBtnText] = React.useState('');
+  const [buttonDropdownSelectedKeys, setButtonDropdownSelectedKeys] =
+    React.useState(selectedKeys);
+  React.useEffect(() => {
+    const newBtnText = getButtonLabelFromSelectedKeys(selectedKeys, children);
+    setButtonDropdownSelectedKeys(selectedKeys);
+    setBtnText(newBtnText);
+  }, [selectedKeys]);
+
+  const handleOptionChange = (selectedOption: MenuOption, e) => {
+    e?.stopPropagation();
+    let newSelectedKeys = [];
+
+    if (optionsVariant === 'checkbox') {
+      newSelectedKeys = getSelectedKeysFromSelectedOption(
+        selectedOption,
+        buttonDropdownSelectedKeys,
+      );
+    } else {
+      newSelectedKeys = [selectedOption.key];
+    }
+
+    const newBtnText = getButtonLabelFromSelectedKeys(
+      newSelectedKeys,
+      children,
+    );
+    setButtonDropdownSelectedKeys(newSelectedKeys);
+    setBtnText(newBtnText);
+    setTimeout(() => {
+      onOptionSelect?.(selectedOption, e);
+    });
+  };
+
+  React.useImperativeHandle(ref, () => ({
+    selectedKeys: buttonDropdownSelectedKeys,
+  }));
+  return (
+    <ButtonDropdown
+      {...buttonProps}
+      anchorPosition={anchorPosition}
+      classNames={classNames}
+      size={size}
+      onOptionSelect={handleOptionChange}
+      onMenuOpen={onMenuOpen}
+      onMenuClose={onMenuClose}
+      clickAwayRef={clickAwayRef}
+      menu={{
+        isFluid,
+        options,
+        selectedKeys: buttonDropdownSelectedKeys,
+        optionsVariant,
+        allowSearch,
+        resolveLabel,
+        resolveSecondaryLabel,
+        size,
+        virtualization: menuVirtualization,
+        header,
+        footer,
+        classNames: menuClassNames,
+        showLabelTooltip,
+        allowWrap,
+      }}
+    >
+      {optionsVariant === 'checkbox' ? btnText : children}
+    </ButtonDropdown>
+  );
+};
+
+export const SimpleButtonDropdown: React.AbstractComponent<
+  SimpleButtonDropdownProps,
+  SimpleButtonDropdownRef
+> = React.forwardRef<SimpleButtonDropdownProps, SimpleButtonDropdownRef>(
+  SimpleButtonDropdownBase,
+);

package/lib/components/ButtonDropdown/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ButtonDropdown';
+export * from './SimpleButtonDropdown';