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

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

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

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

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

@@ -0,0 +1,98 @@
+// @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,
+  textContainer?: 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={classify(css.textContainer, classNames?.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

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

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

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

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

package/lib/components/Link/Link.js

@@ -62,24 +62,19 @@ const Link = exports.Link = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     tabIndex = 0,
     disabled,
     onClick,
-    // @ts-ignore - TS2322 - Type 'ForwardRefExoticComponent<BaseLinkProps & RefAttributes<HTMLAnchorElement>>' is not assignable to type 'AbstractComponent<BaseLinkProps, HTMLAnchorElement | null | undefined>'.
     linkComponent: LinkComponent = DefaultLink,
     iconLeftName,
-    // @ts-ignore - TS2322 - Type 'string' is not assignable to type '"large" | "medium" | "small"'.
     iconLeftSize = _Icon.ICON_SIZE.small,
     iconLeftType,
     iconRightName,
-    // @ts-ignore - TS2322 - Type 'string' is not assignable to type '"large" | "medium" | "small"'.
     iconRightSize = _Icon.ICON_SIZE.small,
     iconRightType,
     ...props
   } = _ref;
   const linkRef = React.useRef(null);
-  // @ts-ignore - TS2322 - Type 'null' is not assignable to type 'HTMLAnchorElement | undefined'.
   React.useImperativeHandle(ref, () => linkRef.current);
   React.useEffect(() => {
     if (disabled) {
-      // @ts-ignore - TS2339 - Property 'blur' does not exist on type 'never'.
       linkRef.current?.blur();
     }
   }, [disabled]);
@@ -110,9 +105,7 @@ const Link = exports.Link = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       [_typographyModule.default.underline]: underline && !(iconLeftName || iconRightName),
       [_typographyModule.default.disabled]: disabled
     }, className),
-    onClick: handleClick
-    // @ts-ignore - TS2769 - No overload matches this call.
-    ,
+    onClick: handleClick,
     onKeyPress: handleKeyPress
   }), !!iconLeftName && /*#__PURE__*/React.createElement(_Icon.Icon, {
     name: iconLeftName,
@@ -143,12 +136,8 @@ const DefaultLink = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     ...props
   } = _ref2;
   const resolvedHref = to ?? href;
-  return (
-    /*#__PURE__*/
-    // @ts-ignore - TS2322 - Type '{ children: ReactNode; href: string | undefined; ref: ForwardedRef<HTMLAnchorElement>; onClick?: ((arg1: SyntheticEvent<HTMLElement, Event>) => unknown) | null | undefined; ... 11 more ...; iconRightType?: "regular" | ... 3 more ... | undefined; }' is not assignable to type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>'.
-    React.createElement("a", _extends({}, props, {
-      href: resolvedHref,
-      ref: ref
-    }), children)
-  );
+  return /*#__PURE__*/React.createElement("a", _extends({}, props, {
+    href: resolvedHref,
+    ref: ref
+  }), children);
 });