@spaced-out/ui-design-system 0.3.45 → 0.3.46

package/lib/components/Input/Input.d.ts

@@ -1,327 +0,0 @@
-import {$ReadOnly, $Values} from 'utility-types';
-import * as React from 'react';
-import {classify} from '../../utils/classify';
-import type {IconType} from '../Icon';
-import {Icon} from '../Icon';
-import {BodySmall, FormLabelSmall} from '../Text';
-import css from './Input.module.css';
-type ClassNames = $ReadOnly<{
-  box?: string;
-  iconLeft?: string;
-  iconRight?: string;
-  wrapper?: string;
-}>;
-export const EXPONENT_CHARACTER_LIST = ['E', 'e'];
-export const INPUT_TYPES = Object.freeze({
-  text: 'text',
-  number: 'number',
-  password: 'password',
-  email: 'email',
-  tel: 'tel',
-  url: 'url',
-  date: 'date',
-  'datetime-local': 'datetime-local',
-  time: 'time',
-  week: 'week',
-  month: 'month',
-  color: 'color',
-  search: 'search',
-});
-export type InputType = $Values<typeof INPUT_TYPES>;
-export type InputOnChangeParamsType = {
-  evt: React.SyntheticEvent<HTMLInputElement>;
-  isEnter?: boolean;
-};
-export type InputProps = {
-  value?: string;
-  onChange?: (
-    evt: React.SyntheticEvent<HTMLInputElement>,
-    isEnter?: boolean,
-  ) => unknown;
-  classNames?: ClassNames;
-  onFocus?: (e: React.SyntheticEvent<HTMLInputElement>) => unknown;
-  onBlur?: (e: React.SyntheticEvent<HTMLInputElement>) => unknown;
-  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => unknown;
-  onPaste?: (e: ClipboardEvent) => unknown;
-  onIconRightClick?:
-    | ((arg0: React.SyntheticEvent<HTMLElement>) => unknown)
-    | null
-    | undefined;
-  onContainerClick?:
-    | ((arg0: React.SyntheticEvent<HTMLElement>) => unknown)
-    | null
-    | undefined;
-  name?: string;
-  disabled?: boolean;
-  placeholder?: string;
-  locked?: boolean;
-  error?: boolean;
-  errorText?: string;
-  label?: string | React.ReactNode;
-  helperText?: string | React.ReactNode;
-  type?: InputType;
-  size?: 'medium' | 'small';
-  iconLeftName?: string;
-  iconLeftType?: IconType;
-  iconRightName?: string;
-  iconRightType?: IconType;
-  required?: boolean;
-  readOnly?: boolean;
-  boxRef?: (arg0: HTMLElement | null | undefined) => unknown;
-  minLength?: string;
-  maxLength?: string;
-  pattern?: string;
-  min?: string;
-  max?: string;
-  autoComplete?: string;
-
-  /* Note(Nishant): Restricts typing `e` and `E` in the number input when
-  set to true. We have baked this condition in the keydown handler itself so
-  this would restrict and not show these exponent characters when typed
-  **/
-  disallowExponents?: boolean;
-
-  /** The step attribute is a number that specifies the granularity that the value must adhere to, or the special value any.
-   * Only values which are equal to the basis for stepping (min if specified, value otherwise, and an
-   * appropriate default value if neither of those is provided) are valid. */
-  step?: string;
-  hideNumberSpinner?: boolean;
-  hidePasswordToggleIcon?: boolean;
-};
-
-const Input_ = (props: InputProps, ref): React.ReactNode => {
-  const {
-    value,
-    type,
-    onChange,
-    onFocus,
-    onBlur,
-    onIconRightClick,
-    onContainerClick,
-    name,
-    disabled,
-    placeholder,
-    error,
-    locked,
-    errorText,
-    label,
-    helperText,
-    classNames,
-    size = 'medium',
-    iconLeftName = '',
-    iconLeftType = 'regular',
-    iconRightName = '',
-    iconRightType = 'regular',
-    required,
-    readOnly,
-    boxRef,
-    onKeyDown,
-    disallowExponents,
-    hideNumberSpinner,
-    hidePasswordToggleIcon,
-    ...inputProps
-  } = props;
-  const [showPassword, setShowPassword] = React.useState(false);
-  const controlledInputFilled = value !== '';
-
-  const handleRightIconClick = (e: React.SyntheticEvent<HTMLElement>) => {
-    if (locked || disabled) {
-      return;
-    }
-
-    if (type === 'password') {
-      setShowPassword(!showPassword);
-    }
-
-    onIconRightClick && onIconRightClick(e);
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (type === INPUT_TYPES.number && disallowExponents) {
-      if (EXPONENT_CHARACTER_LIST.includes(e.key)) {
-        e.preventDefault();
-      }
-    }
-
-    onKeyDown?.(e);
-  };
-
-  return (
-    <div
-      className={classify(
-        css.wrapper,
-        {
-          [css.filled]: controlledInputFilled ?? false,
-          [css.withError]: error ?? false,
-        },
-        classNames?.wrapper,
-      )}
-    >
-      {Boolean(label) && (
-        <div className={css.info}>
-          <div className={css.infoContent}>
-            <FormLabelSmall color="secondary">{label ?? ''}</FormLabelSmall>
-            &nbsp;
-            {required && <FormLabelSmall color="danger">{'*'}</FormLabelSmall>}
-          </div>
-        </div>
-      )}
-      <div
-        className={classify(
-          css.box,
-          {
-            [css.inputDisabled]: disabled ?? false,
-            [css.medium]: size === 'medium',
-            [css.small]: size === 'small',
-            [css.locked]: locked,
-            [css.color]: type === 'color',
-            [css.hideNumberSpinner]: hideNumberSpinner,
-          },
-          classNames?.box,
-        )}
-        onClick={!(disabled || locked) ? onContainerClick : null}
-        ref={boxRef}
-      >
-        {iconLeftName && (
-          <Icon
-            className={classify(classNames?.iconLeft)}
-            name={iconLeftName}
-            color={disabled ? 'disabled' : 'secondary'}
-            size="small"
-            type={iconLeftType}
-          />
-        )}
-        <input
-          {...inputProps}
-          disabled={locked || disabled}
-          name={name}
-          ref={ref}
-          placeholder={placeholder}
-          value={value}
-          onChange={onChange}
-          onFocus={onFocus}
-          onBlur={onBlur}
-          type={showPassword ? 'text' : type}
-          readOnly={readOnly && 'readOnly'}
-          onKeyDown={handleKeyDown}
-        />
-        {type === 'color' && (
-          <div
-            className={classify(css.colorText, css[size], {
-              [css.hasValue]: value,
-            })}
-          >
-            {value ? value : placeholder}
-          </div>
-        )}
-        <RightInputIcon
-          isEmail={type === 'email'}
-          isPassword={type === 'password'}
-          showPassword={showPassword}
-          showPasswordToggleIcon={!hidePasswordToggleIcon}
-          isLocked={locked}
-          isDisabled={disabled}
-          onClick={handleRightIconClick}
-          iconRightName={iconRightName}
-          iconRightType={iconRightType}
-          className={classNames?.iconRight}
-        />
-      </div>
-      {(Boolean(helperText) || error) && (
-        <div className={css.info}>
-          {error && errorText ? (
-            <BodySmall color="danger">{errorText}</BodySmall>
-          ) : typeof helperText === 'string' ? (
-            <BodySmall color={disabled ? 'disabled' : 'secondary'}>
-              {helperText}
-            </BodySmall>
-          ) : (
-            helperText
-          )}
-        </div>
-      )}
-    </div>
-  );
-};
-
-const RightInputIcon = ({
-  isEmail,
-  isPassword,
-  showPassword,
-  showPasswordToggleIcon,
-  isLocked,
-  isDisabled,
-  iconRightName,
-  iconRightType,
-  ...rightIconProps
-}: {
-  isEmail?: boolean;
-  isPassword?: boolean;
-  showPassword?: boolean;
-  showPasswordToggleIcon?: boolean;
-  isLocked?: boolean;
-  isDisabled?: boolean;
-  onClick?:
-    | ((arg0: React.SyntheticEvent<HTMLElement>) => unknown)
-    | null
-    | undefined;
-  iconRightName?: string;
-  iconRightType?: IconType;
-  className?: string;
-}): React.ReactNode => {
-  if (isLocked) {
-    return (
-      <Icon
-        name="lock"
-        color={isDisabled ? 'disabled' : 'secondary'}
-        size="small"
-        {...rightIconProps}
-      />
-    );
-  }
-
-  if (isEmail) {
-    return (
-      <Icon
-        name="at"
-        color={isDisabled ? 'disabled' : 'secondary'}
-        size="small"
-        type={iconRightType}
-        {...rightIconProps}
-      />
-    );
-  }
-
-  if (isPassword && showPasswordToggleIcon) {
-    return (
-      <Icon
-        name={showPassword ? 'eye-slash' : 'eye'}
-        color={isDisabled ? 'disabled' : 'secondary'}
-        size="small"
-        type={iconRightType}
-        {...rightIconProps}
-        className={classify(css.rightClickableIcon, {
-          [css.disabled]: isDisabled || isLocked,
-        })}
-      />
-    );
-  }
-
-  if (iconRightName) {
-    return (
-      <Icon
-        name={iconRightName || ''}
-        color={isDisabled ? 'disabled' : 'secondary'}
-        size="small"
-        type={iconRightType}
-        {...rightIconProps}
-      />
-    );
-  }
-
-  return <></>;
-};
-
-export const Input = React.forwardRef<InputProps, HTMLInputElement>(
-  Input_,
-) as React$AbstractComponent<InputProps, HTMLInputElement>;

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

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

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

@@ -1,89 +0,0 @@
-import {$ReadOnly} from 'utility-types';
-import * as React from 'react';
-import type {AlertSemanticType} from '../../types/common';
-import classify from '../../utils/classify';
-import type {IconSize, IconType} from '../Icon';
-import {SemanticIcon} from '../Icon';
-import css from './KPIBox.module.css';
-type ClassNames = $ReadOnly<{
-  wrapper?: string;
-  topFoldContent?: string;
-  middleFoldContent?: string;
-  bottomFoldContent?: string;
-}>;
-export type KPIBoxProps = {
-  classNames?: ClassNames;
-  semantic?: AlertSemanticType;
-  topContent?: React.ReactNode;
-  middleContent?: React.ReactNode;
-  bottomContent?: React.ReactNode;
-  iconName?: string;
-  iconSize?: IconSize;
-  iconType?: IconType;
-};
-export const KPIBox: React$AbstractComponent<KPIBoxProps, HTMLDivElement> =
-  React.forwardRef<KPIBoxProps, HTMLDivElement>(
-    (
-      {
-        classNames,
-        semantic = 'neutral',
-        topContent,
-        middleContent,
-        bottomContent,
-        iconName,
-        iconSize = 'large',
-        iconType = 'solid',
-        ...props
-      }: KPIBoxProps,
-      ref,
-    ) => (
-      <div
-        {...props}
-        ref={ref}
-        data-testid="KPIBox"
-        className={classify(css.wrapper, classNames?.wrapper)}
-      >
-        {!!iconName && (
-          <SemanticIcon
-            semantic={semantic}
-            name={iconName}
-            size={iconSize}
-            type={iconType}
-          />
-        )}
-
-        <div className={css.textContainer}>
-          {!!topContent && (
-            <div
-              className={classify(
-                css.topFoldContent,
-                classNames?.topFoldContent,
-              )}
-            >
-              {topContent}
-            </div>
-          )}
-          {!!middleContent && (
-            <div
-              className={classify(
-                css.middleFoldContent,
-                classNames?.middleFoldContent,
-              )}
-            >
-              {middleContent}
-            </div>
-          )}
-          {!!bottomContent && (
-            <div
-              className={classify(
-                css.bottomFoldContent,
-                classNames?.bottomFoldContent,
-              )}
-            >
-              {bottomContent}
-            </div>
-          )}
-        </div>
-      </div>
-    ),
-  );

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

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

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

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

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

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

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

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