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

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

@@ -0,0 +1 @@
+export * from './KPIBox';

package/lib/components/LinearLoader/LinearLoader.d.ts

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import {classify} from '../../utils/classify';
+import css from './LinearLoader.module.css';
+export type LinearLoaderProps = {
+  value: number;
+  size?: 'large' | 'medium' | 'small';
+  className?: string;
+  indeterminate?: boolean;
+};
+export const LinearLoader: React$AbstractComponent<
+  LinearLoaderProps,
+  HTMLDivElement
+> = React.forwardRef<LinearLoaderProps, HTMLDivElement>(
+  (
+    {value, size = 'medium', className, indeterminate}: LinearLoaderProps,
+    ref,
+  ): React.ReactNode => (
+    <div
+      className={classify(
+        css.lineContainer,
+        {
+          [css.large]: size === 'large',
+          [css.medium]: size === 'medium',
+          [css.small]: size === 'small',
+        },
+        className,
+      )}
+      ref={ref}
+    >
+      <div
+        className={classify(css.progressBar, {
+          [css.indeterminate]: indeterminate,
+        })}
+        style={{
+          width: `${value + '%'}`,
+        }}
+        role="progressbar"
+        aria-valuenow={indeterminate ? undefined : value}
+        aria-valuemin="0"
+        aria-valuemax="100"
+      ></div>
+    </div>
+  ),
+);

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

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

package/lib/components/Link/Link.d.ts

@@ -0,0 +1,225 @@
+import {$Values} from 'utility-types';
+import * as React from 'react';
+import type {ColorTypes} from '../../types/typography';
+import {TEXT_COLORS} from '../../types/typography';
+import classify from '../../utils/classify';
+import {ConditionalWrapper} from '../ConditionalWrapper';
+import type {IconSize, IconType} from '../Icon';
+import {Icon, ICON_SIZE} from '../Icon';
+import css from '../../styles/typography.module.css';
+export const LINK_AS = Object.freeze({
+  bodyLarge: 'bodyLarge',
+  bodyMedium: 'bodyMedium',
+  bodySmall: 'bodySmall',
+  buttonTextExtraSmall: 'buttonTextExtraSmall',
+  buttonTextMedium: 'buttonTextMedium',
+  buttonTextSmall: 'buttonTextSmall',
+  formInputMedium: 'formInputMedium',
+  formInputSmall: 'formInputSmall',
+  formLabelMedium: 'formLabelMedium',
+  formLabelSmall: 'formLabelSmall',
+  jumboMedium: 'jumboMedium',
+  subTitleExtraSmall: 'subTitleExtraSmall',
+  subTitleLarge: 'subTitleLarge',
+  subTitleMedium: 'subTitleMedium',
+  subTitleSmall: 'subTitleSmall',
+  titleMedium: 'titleMedium',
+});
+export type LinkAs = $Values<typeof LINK_AS>;
+export const ANCHOR_REL = Object.freeze({
+  alternate: 'alternate',
+  author: 'author',
+  bookmark: 'bookmark',
+  external: 'external',
+  help: 'help',
+  license: 'license',
+  next: 'next',
+  nofollow: 'nofollow',
+  noopener: 'noopener',
+  noreferrer: 'noreferrer',
+  search: 'search',
+  tag: 'tag',
+});
+export type AnchorRel = $Values<typeof ANCHOR_REL>;
+export const ANCHOR_TARGET = Object.freeze({
+  _blank: '_blank',
+  _self: '_self',
+  _parent: '_parent',
+  _top: '_top',
+  framename: 'framename',
+});
+export type AnchorTarget = $Values<typeof ANCHOR_TARGET>;
+export type BaseLinkProps = {
+  children: React.ReactNode;
+  onClick?:
+    | ((arg0: React.SyntheticEvent<HTMLElement>) => unknown)
+    | null
+    | undefined;
+  tabIndex?: number;
+  disabled?: boolean;
+  className?: string;
+  as?: LinkAs;
+  rel?: AnchorRel;
+  target?: AnchorTarget;
+  iconLeftName?: string;
+  iconLeftSize?: IconSize;
+  iconLeftType?: IconType;
+  iconRightName?: string;
+  iconRightSize?: IconSize;
+  iconRightType?: IconType;
+
+  /**
+   * IMPORTANT: If you are using `to` make sure to provide link component from your router
+   * if you want to prevent full page reloads in a Single Page Application (SPA).
+   *
+   * Using `href` in anchor tags causes the browser to navigate to a new URL,
+   * resulting in a full page reload. However, in a Single Page Application (SPA), we aim to provide a seamless
+   * user experience without such reloads.
+   *
+   * To achieve client-side navigation and prevent page reloads, use client-side routing libraries
+   * (e.g., React Router) and their navigation components (e.g., <Link> or <a> with an onClick handler)
+   * to handle navigation within your SPA. These components work without triggering full page reloads
+   * and maintain the SPA's performance and user experience.
+   *
+   */
+  to?: string;
+  href?: string;
+};
+export type LinkProps = BaseLinkProps & {
+  color?: ColorTypes;
+  underline?: boolean;
+
+  /**
+   * Provide your router's link component
+   *
+   * import {Link} from 'src/rerouter';
+   * import {Link as GenesisLink} from '@spaced-out/ui-design-system/lib/components/Link';
+   *
+   * <GenesisLink linkComponent={Link} to="/pages" />
+   */
+  linkComponent?: React.AbstractComponent<
+    BaseLinkProps,
+    HTMLAnchorElement | null | undefined
+  >;
+};
+export const Link: React$AbstractComponent<
+  LinkProps,
+  HTMLAnchorElement | null | undefined
+> = React.forwardRef<LinkProps, HTMLAnchorElement | null | undefined>(
+  (
+    {
+      color = TEXT_COLORS.clickable,
+      children,
+      className,
+      as = 'buttonTextExtraSmall',
+      underline = true,
+      tabIndex = 0,
+      disabled,
+      onClick,
+      linkComponent: LinkComponent = DefaultLink,
+      iconLeftName,
+      iconLeftSize = ICON_SIZE.small,
+      iconLeftType,
+      iconRightName,
+      iconRightSize = ICON_SIZE.small,
+      iconRightType,
+      ...props
+    }: LinkProps,
+    ref,
+  ) => {
+    const linkRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => linkRef.current);
+    React.useEffect(() => {
+      if (disabled) {
+        linkRef.current?.blur();
+      }
+    }, [disabled]);
+
+    const handleClick = (event: React.SyntheticEvent<HTMLElement>) => {
+      if (disabled) {
+        event.preventDefault();
+        return;
+      }
+
+      onClick?.(event);
+    };
+
+    /**
+     * By spec anchor tag wont call onClick on enter key press when the element is focussed
+     * as a workaround we would need to listen to key press event and call onClick
+     * manually, one workaround to avoid this is to have empty href along with onClick
+     * but that would break accessibility
+     */
+    const handleKeyPress = (event) => {
+      if (event.key === 'Enter' && onClick) {
+        handleClick(event);
+      }
+    };
+
+    return (
+      <LinkComponent
+        {...props}
+        tabIndex={disabled ? -1 : tabIndex}
+        ref={linkRef}
+        data-testid="Link"
+        className={classify(
+          css.link,
+          css[as],
+          css[color],
+          {
+            [css.underline]: underline && !(iconLeftName || iconRightName),
+            [css.disabled]: disabled,
+          },
+          className,
+        )}
+        onClick={handleClick}
+        onKeyPress={handleKeyPress}
+      >
+        {!!iconLeftName && (
+          <Icon
+            name={iconLeftName}
+            size={iconLeftSize}
+            type={iconLeftType}
+            className={classify(css[color], {
+              [css.disabled]: disabled,
+            })}
+          />
+        )}
+
+        <ConditionalWrapper
+          condition={Boolean(iconLeftName || iconRightName)}
+          wrapper={(children) => (
+            <span
+              className={classify({
+                [css.underline]: underline,
+              })}
+            >
+              {children}
+            </span>
+          )}
+        >
+          {children}
+        </ConditionalWrapper>
+
+        {!!iconRightName && (
+          <Icon
+            name={iconRightName}
+            size={iconRightSize}
+            type={iconRightType}
+            className={css[color]}
+          />
+        )}
+      </LinkComponent>
+    );
+  },
+);
+const DefaultLink = React.forwardRef<BaseLinkProps, HTMLAnchorElement>(
+  ({children, href, to, ...props}, ref) => {
+    const resolvedHref = to ?? href;
+    return (
+      <a {...props} href={resolvedHref} ref={ref}>
+        {children}
+      </a>
+    );
+  },
+);

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

@@ -0,0 +1 @@
+export * from './Link';

package/lib/components/Menu/Menu.d.ts

@@ -0,0 +1,379 @@
+import {$ReadOnly} from 'utility-types';
+import * as React from 'react';
+import {FixedSizeList} from 'react-window';
+import type {MenuClassNames, MenuLabelTooltip} from '../../types/menu';
+import {classify} from '../../utils/classify';
+import {
+  getFilteredComposeOptionsFromSearchText,
+  getFilteredComposeOptionsResultText,
+  getFilteredGroupTitleOptionsFromSearchText,
+  getFilteredGroupTitleOptionsResultText,
+  getFilteredOptionsFromSearchText,
+  getFilteredOptionsResultText,
+} from '../../utils/menu';
+import type {IconType} from '../Icon/Icon';
+import {SearchInput} from '../SearchInput';
+import {FormLabelSmall} from '../Text';
+import {MenuOptionButton} from './MenuOptionButton';
+import css from './Menu.module.css';
+type ClassNames = MenuClassNames;
+type OptionClassNames = $ReadOnly<{
+  wrapper?: string;
+}>;
+export type Virtualization = $ReadOnly<{
+  enable: boolean;
+  itemHeight?: number;
+  menuHeight?: number;
+}>;
+export type MenuOption = {
+  key: string;
+  classNames?: OptionClassNames;
+  label?: string;
+  secondaryLabel?: string;
+  customComponent?: React.ReactNode;
+  iconLeft?: string;
+  iconLeftType?: IconType;
+  iconRight?: string;
+  iconRightType?: IconType;
+  disabled?: boolean;
+  optionSize?: MenuSizeTypes;
+  optionVariant?: MenuOptionsVariant;
+  keepMenuOpenOnOptionSelect?: boolean;
+  indeterminate?: boolean;
+};
+// Render first available option set
+export type BaseMenuProps = {
+  onSelect?: (
+    option: MenuOption,
+    arg1: React.SyntheticEvent<HTMLElement> | null | undefined,
+  ) => unknown;
+  selectedOption?: MenuOption | null | undefined;
+  optionsVariant?: MenuOptionsVariant;
+  selectedKeys?: Array<string>;
+  classNames?: ClassNames;
+  size?: MenuSizeTypes;
+  width?: string;
+  menuDisabled?: boolean;
+  isFluid?: boolean;
+  // onTabOut is a callback function that is called when
+  // the user navigates outside of the menu using the tab key.
+  onTabOut?: () => unknown;
+  allowSearch?: boolean;
+  // A function that resolves the label for a MenuOption.
+  // It takes a MenuOption as a parameter and returns either a string or a React Node.
+  resolveLabel?: (option: MenuOption) => string | React.ReactNode;
+  // A function that resolves the secondaryLabel for a MenuOption.
+  // It takes a MenuOption as a parameter and returns either a string or a React Node.
+  resolveSecondaryLabel?: (option: MenuOption) => string | React.ReactNode;
+  // When virtualization is enabled, the MenuOptionButtons will be rendered only when they are present in the Menu's viewport
+  virtualization?: Virtualization;
+  header?: React.ReactNode;
+  footer?: React.ReactNode;
+  showResultText?: boolean;
+  staticLabels?: {
+    RESULT?: string;
+    RESULTS?: string;
+    SEARCH_PLACEHOLDER?: string;
+  };
+  showLabelTooltip?: MenuLabelTooltip;
+  allowWrap?: boolean;
+};
+export type MenuOptionTypes = {
+  options?: Array<MenuOption>;
+  composeOptions?: Array<Array<MenuOption>>;
+  groupTitleOptions?: Array<MenuGroupTitleOption>;
+};
+export type MenuSizeTypes = 'medium' | 'small';
+export type MenuOptionsVariant = 'checkbox' | 'radio' | 'normal';
+export type MenuGroupTitleOption = {
+  groupTitle?: React.ReactNode;
+  options?: Array<MenuOption>;
+  showLineDivider?: boolean;
+};
+export type MenuProps = BaseMenuProps & MenuOptionTypes;
+export type RenderOptionProps = MenuProps & {
+  searchText?: string;
+};
+const menuSizeMedium = 276,
+  menuSizeSmall = 228;
+const buttonSizeMedium = 40,
+  buttonSizeSmall = 32;
+
+const RenderOption = ({
+  options,
+  composeOptions,
+  groupTitleOptions,
+  classNames,
+  searchText = '',
+  showResultText = true,
+  staticLabels = {
+    RESULT: 'result',
+    RESULTS: 'results',
+    SEARCH_PLACEHOLDER: 'Search...',
+  },
+  ...restProps
+}: RenderOptionProps): React.ReactNode => {
+  const {
+    allowSearch,
+    size,
+    virtualization = {
+      enable: false,
+      menuHeight: null,
+      itemHeight: null,
+    },
+  } = restProps;
+
+  if (options && Array.isArray(options) && options.length) {
+    const optionsFiltered = !allowSearch
+      ? options
+      : getFilteredOptionsFromSearchText(options, searchText);
+    const finalResultText = !allowSearch
+      ? ''
+      : getFilteredOptionsResultText(optionsFiltered, staticLabels);
+    const {
+      enable: isVirtualizationEnabled,
+      menuHeight,
+      itemHeight,
+    } = virtualization;
+    return (
+      <>
+        {allowSearch && showResultText && (
+          <FormLabelSmall
+            className={css.filterOptionsResultText}
+            color="tertiary"
+          >
+            {finalResultText}
+          </FormLabelSmall>
+        )}
+        {virtualization && isVirtualizationEnabled ? (
+          <FixedSizeList
+            height={
+              menuHeight || (size === 'medium' ? menuSizeMedium : menuSizeSmall)
+            }
+            itemSize={
+              itemHeight ||
+              (size === 'medium' ? buttonSizeMedium : buttonSizeSmall)
+            }
+            itemCount={optionsFiltered.length}
+          >
+            {({index: idx, style}) => {
+              const buttonOption = optionsFiltered[idx];
+              return (
+                <React.Fragment key={buttonOption.key}>
+                  <MenuOptionButton
+                    option={buttonOption}
+                    classNames={classNames}
+                    style={style}
+                    {...restProps}
+                    isLastItem={idx === optionsFiltered.length - 1}
+                  />
+                </React.Fragment>
+              );
+            }}
+          </FixedSizeList>
+        ) : (
+          optionsFiltered.map((option, idx) => (
+            <React.Fragment key={option.key}>
+              <MenuOptionButton
+                option={option}
+                classNames={classNames}
+                {...restProps}
+                isLastItem={idx === optionsFiltered.length - 1}
+              />
+            </React.Fragment>
+          ))
+        )}
+      </>
+    );
+  }
+
+  if (
+    composeOptions &&
+    Array.isArray(composeOptions) &&
+    composeOptions.length
+  ) {
+    const optionsFiltered = !allowSearch
+      ? composeOptions
+      : getFilteredComposeOptionsFromSearchText(composeOptions, searchText);
+    const finalResultText = !allowSearch
+      ? ''
+      : getFilteredComposeOptionsResultText(optionsFiltered, staticLabels);
+    return (
+      <>
+        {allowSearch && showResultText && (
+          <FormLabelSmall
+            className={css.filterOptionsResultText}
+            color="tertiary"
+          >
+            {finalResultText}
+          </FormLabelSmall>
+        )}
+        {optionsFiltered.map(
+          (
+            composeMenuOptions,
+            index, // eslint-disable-next-line react/no-array-index-key
+          ) => (
+            <span key={index} className={css.menuDivider}>
+              {composeMenuOptions.map((option, idx) => (
+                <React.Fragment key={option.key}>
+                  <MenuOptionButton
+                    option={option}
+                    classNames={classNames}
+                    {...restProps}
+                    isLastItem={
+                      index === optionsFiltered.length - 1 &&
+                      idx === composeMenuOptions.length - 1
+                    }
+                  />
+                </React.Fragment>
+              ))}
+            </span>
+          ),
+        )}
+      </>
+    );
+  }
+
+  if (
+    groupTitleOptions &&
+    Array.isArray(groupTitleOptions) &&
+    groupTitleOptions.length
+  ) {
+    const optionsFiltered = !allowSearch
+      ? groupTitleOptions
+      : getFilteredGroupTitleOptionsFromSearchText(
+          groupTitleOptions,
+          searchText,
+        );
+    const finalResultText = !allowSearch
+      ? ''
+      : getFilteredGroupTitleOptionsResultText(optionsFiltered, staticLabels);
+    return (
+      <>
+        {allowSearch && showResultText && (
+          <FormLabelSmall
+            className={css.filterOptionsResultText}
+            color="tertiary"
+          >
+            {finalResultText}
+          </FormLabelSmall>
+        )}
+        {optionsFiltered.map(
+          (
+            optionsGroup,
+            index, // eslint-disable-next-line react/no-array-index-key
+          ) => (
+            <React.Fragment key={index}>
+              {!!optionsGroup.groupTitle && (
+                <div
+                  className={classify(
+                    css.groupTitleWrapper,
+                    classNames?.groupTitle,
+                  )}
+                >
+                  {optionsGroup.groupTitle}
+                </div>
+              )}
+
+              {optionsGroup.options?.map((option, idx) => (
+                <React.Fragment key={option.key}>
+                  <MenuOptionButton
+                    option={option}
+                    classNames={classNames}
+                    {...restProps}
+                    isLastItem={
+                      index === optionsFiltered.length - 1 &&
+                      idx ===
+                        (optionsGroup.options &&
+                          optionsGroup.options.length - 1)
+                    }
+                  />
+                </React.Fragment>
+              ))}
+            </React.Fragment>
+          ),
+        )}
+      </>
+    );
+  }
+
+  return <></>;
+};
+
+export const Menu: React$AbstractComponent<MenuProps, HTMLDivElement> =
+  React.forwardRef<MenuProps, HTMLDivElement>(
+    (props: MenuProps, ref): React.ReactNode => {
+      const {
+        classNames,
+        size = 'medium',
+        width,
+        isFluid = true,
+        allowSearch,
+        virtualization = {
+          enable: false,
+          menuHeight: null,
+          itemHeight: null,
+        },
+        header,
+        footer,
+        staticLabels,
+      } = props;
+      const [searchText, setSearchText] = React.useState('');
+      const {menuHeight} = virtualization;
+      const hasHeader = header ? true : false;
+      const hasFooter = footer ? true : false;
+      return (
+        <div
+          className={classify(
+            css.menuCard,
+            {
+              [css.fluid]: isFluid,
+              [css.medium]: size === 'medium',
+              [css.mediumWithHeader]:
+                size === 'medium' && hasHeader && !hasFooter,
+              [css.mediumWithFooter]:
+                size === 'medium' && !hasHeader && hasFooter,
+              [css.mediumWithHeaderAndFooter]:
+                size === 'medium' && hasFooter && hasHeader,
+              [css.small]: size === 'small',
+              [css.smallWithHeader]:
+                size === 'small' && hasHeader && !hasFooter,
+              [css.smallWithFooter]:
+                size === 'small' && !hasHeader && hasFooter,
+              [css.smallWithHeaderAndFooter]:
+                size === 'small' && hasFooter && hasHeader,
+              [css.menuCardTopPaddingZero]: header,
+              [css.menuCardBottomPaddingZero]: footer,
+            },
+            classNames?.wrapper,
+          )}
+          style={{
+            width,
+            maxHeight: menuHeight ? menuHeight + 'px' : '',
+          }}
+          ref={ref}
+        >
+          {hasHeader && (
+            <div className={classify(css.menuHeader, classNames?.header)}>
+              {header}
+            </div>
+          )}
+          {allowSearch && (
+            <SearchInput
+              value={searchText}
+              onChange={(e) => setSearchText(e.target.value)}
+              onClear={() => setSearchText('')}
+              size={size}
+              placeholder={staticLabels?.SEARCH_PLACEHOLDER ?? 'Search...'}
+            />
+          )}
+          <RenderOption {...props} searchText={searchText} />
+          {hasFooter && (
+            <div className={classify(css.menuFooter, classNames?.footer)}>
+              {footer}
+            </div>
+          )}
+        </div>
+      );
+    },
+  );