@spaced-out/ui-design-system 0.4.13 → 0.4.15-beta.0

package/lib/components/Input/Input.js.flow

@@ -1,325 +0,0 @@
-// @flow strict
-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: SyntheticInputEvent<HTMLInputElement>,
-  isEnter?: boolean,
-};
-
-export type InputProps = {
-  value?: string,
-  onChange?: (
-    evt: SyntheticInputEvent<HTMLInputElement>,
-    isEnter?: boolean,
-  ) => mixed,
-  classNames?: ClassNames,
-  onFocus?: (e: SyntheticInputEvent<HTMLInputElement>) => mixed,
-  onBlur?: (e: SyntheticInputEvent<HTMLInputElement>) => mixed,
-  onKeyDown?: (e: SyntheticKeyboardEvent<HTMLInputElement>) => mixed,
-  onPaste?: (e: ClipboardEvent) => mixed,
-  onIconRightClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
-  onContainerClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
-  name?: string,
-  disabled?: boolean,
-  placeholder?: string,
-  locked?: boolean,
-  error?: boolean,
-  errorText?: string,
-  label?: string | React.Node,
-  helperText?: string | React.Node,
-  type?: InputType,
-  size?: 'medium' | 'small',
-  iconLeftName?: string,
-  iconLeftType?: IconType,
-  iconRightName?: string,
-  iconRightType?: IconType,
-  required?: boolean,
-  readOnly?: boolean,
-  boxRef?: (?HTMLElement) => mixed,
-  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.Node => {
-  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: SyntheticEvent<HTMLElement>) => {
-    if (locked || disabled) {
-      return;
-    }
-
-    if (type === 'password') {
-      setShowPassword(!showPassword);
-    }
-
-    onIconRightClick && onIconRightClick(e);
-  };
-
-  const handleKeyDown = (e: SyntheticKeyboardEvent<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?: ?(SyntheticEvent<HTMLElement>) => mixed,
-  iconRightName?: string,
-  iconRightType?: IconType,
-  className?: string,
-}): React.Node => {
-  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_,
-): React$AbstractComponent<InputProps, HTMLInputElement>);

package/lib/components/Input/index.js.flow

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

package/lib/components/KPIBox/KPIBox.js.flow

@@ -1,97 +0,0 @@
-// @flow strict
-
-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.Node,
-  middleContent?: React.Node,
-  bottomContent?: React.Node,
-  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.js.flow

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

package/lib/components/LinearLoader/LinearLoader.js.flow

@@ -1,49 +0,0 @@
-// @flow strict
-
-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.Node => (
-    <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.js.flow

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

package/lib/components/Link/Link.js.flow

@@ -1,231 +0,0 @@
-// @flow strict
-
-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.Node,
-  onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
-  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>,
-  ...
-};
-
-export const Link: React$AbstractComponent<LinkProps, ?HTMLAnchorElement> =
-  React.forwardRef<LinkProps, ?HTMLAnchorElement>(
-    (
-      {
-        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: 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>
-    );
-  },
-);