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

package/lib/components/Checkbox/Checkbox.js.flow

@@ -0,0 +1,168 @@
+// @flow strict
+
+import * as React from 'react';
+
+import type {GroupAlign} from '../../types/common';
+import classify from '../../utils/classify';
+import {Icon} from '../Icon';
+
+import css from './Checkbox.module.css';
+
+
+type ClassNames = $ReadOnly<{
+  wrapper?: string,
+  checkboxSquare?: string,
+  label?: string,
+}>;
+
+/*
+  Note: An indeterminate state has a higher priority.
+  If true checkbox would be in an indeterminate state. If indeterminate is false, it will owner checked value.
+*/
+
+export type CheckboxProps = {
+  name?: string,
+  value?: string,
+  children?: React.Node,
+  checked?: boolean,
+  indeterminate?: boolean,
+  focused?: boolean,
+  disabled?: boolean,
+  error?: boolean,
+  onChange?: (
+    {value: string, checked: boolean},
+    ?SyntheticEvent<HTMLElement>,
+  ) => mixed,
+  align?: GroupAlign,
+  classNames?: ClassNames,
+  tabIndex?: number,
+  ariaLabel?: string,
+};
+
+export const Checkbox: React$AbstractComponent<
+  CheckboxProps,
+  HTMLInputElement,
+> = React.forwardRef<CheckboxProps, HTMLInputElement>(
+  (
+    {
+      name = 'checkbox',
+      value = '',
+      children,
+      checked = false,
+      indeterminate = false,
+      focused = false,
+      disabled = false,
+      error = false,
+      onChange,
+      align,
+      classNames,
+      tabIndex = 0,
+      ariaLabel = '',
+    }: CheckboxProps,
+    forwardRef,
+  ): React.Node => {
+    const checkboxInput = React.createRef<HTMLInputElement>();
+    React.useImperativeHandle(forwardRef, () => checkboxInput.current);
+
+    const handleOnClick = (event) => {
+      if (!disabled) {
+        onChange &&
+          onChange(
+            {
+              value,
+              checked: !checked,
+            },
+            event,
+          );
+      }
+    };
+
+    React.useEffect(() => {
+      if (checkboxInput.current && focused) {
+        checkboxInput.current.focus();
+      }
+    }, [focused]);
+
+    React.useEffect(() => {
+      if (checkboxInput.current && indeterminate) {
+        checkboxInput.current.indeterminate = true;
+      }
+      if (checkboxInput.current && !indeterminate) {
+        checkboxInput.current.indeterminate = false;
+      }
+    }, [indeterminate]);
+
+    return (
+      <div
+        data-testid="checkbox"
+        className={classify(
+          css.checkboxContainer,
+          {
+            [css.disabled]: disabled,
+            [css.horizontalCheckbox]: align === 'horizontal-fixed',
+            [css.fluidCheckbox]: align === 'horizontal-fluid',
+          },
+          classNames?.wrapper,
+        )}
+        onClick={handleOnClick}
+      >
+        <span
+          className={classify(
+            css.checkboxSquare,
+            {
+              [css.disabled]: disabled,
+            },
+            classNames?.checkboxSquare,
+          )}
+        >
+          <input
+            tabIndex={disabled ? -1 : tabIndex}
+            type="checkbox"
+            checked={checked}
+            readOnly
+            ref={checkboxInput}
+            className={classify(css.inputCheckbox)}
+            disabled={disabled}
+            name={name}
+            aria-label={ariaLabel || children}
+          />
+          <span
+            className={classify(css.checkboxSquareInner, {
+              [css.enabled]: !disabled && !error,
+              [css.disabled]: disabled,
+              [css.error]: error && !disabled,
+            })}
+          >
+            {indeterminate && (
+              <Icon
+                color={disabled ? 'disabled' : 'inversePrimary'}
+                name="hyphen"
+                size="small"
+                type="regular"
+              />
+            )}
+            {checked && !indeterminate && (
+              <Icon
+                color={disabled ? 'disabled' : 'inversePrimary'}
+                name="check"
+                size="small"
+                type="regular"
+              />
+            )}
+          </span>
+        </span>
+        {React.Children.count(children) > 0 && (
+          <div
+            className={classify(
+              css.checkboxLabel,
+              {[css.labelDisabled]: disabled},
+              classNames?.label,
+            )}
+          >
+            {children}
+          </div>
+        )}
+      </div>
+    );
+  },
+);

package/lib/components/Checkbox/CheckboxGroup.js

@@ -22,7 +22,6 @@ const CheckboxGroup = exports.CheckboxGroup = /*#__PURE__*/React.forwardRef((_re
     errorText = '',
     children
   } = _ref;
-  // @ts-ignore - TS7031 - Binding element 'value' implicitly has an 'any' type. | TS7031 - Binding element 'checked' implicitly has an 'any' type.
   const onChangeHandler = _ref2 => {
     let {
       value,
@@ -44,23 +43,16 @@ const CheckboxGroup = exports.CheckboxGroup = /*#__PURE__*/React.forwardRef((_re
   const childrenWithProps = React.Children.map(children, child => {
     if (/*#__PURE__*/React.isValidElement(child)) {
       const {
-        // @ts-ignore - TS2339 - Property 'value' does not exist on type 'unknown'.
         value,
-        // @ts-ignore - TS2339 - Property 'disabled' does not exist on type 'unknown'.
         disabled: disabledChild,
-        // @ts-ignore - TS2339 - Property 'error' does not exist on type 'unknown'.
         error: errorChild,
-        // @ts-ignore - TS2339 - Property 'onChange' does not exist on type 'unknown'.
         onChange
       } = child.props;
-      // @ts-ignore - TS7019 - Rest parameter 'params' implicitly has an 'any[]' type.
       const childOnChange = function () {
-        // @ts-ignore - TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
         onChangeHandler(...arguments);
         onChange && onChange(...arguments);
       };
       return /*#__PURE__*/React.cloneElement(child, {
-        // @ts-ignore - TS2769 - No overload matches this call.
         name,
         checked: !!checkedList?.includes(value),
         onChange: childOnChange,

package/lib/components/Checkbox/CheckboxGroup.js.flow

@@ -0,0 +1,116 @@
+// @flow strict
+
+import * as React from 'react';
+
+import type {GroupAlign} from '../../types/common';
+import classify from '../../utils/classify';
+import {BodySmall} from '../Text/Text';
+
+import css from './CheckboxGroup.module.css';
+
+
+type ClassNames = $ReadOnly<{
+  wrapper?: string,
+  checkboxGroup?: string,
+  errorText?: string,
+}>;
+export type CheckboxOptions = Array<{
+  label: React.Node,
+  value: string,
+}>;
+
+export type CheckboxGroupProps = {
+  align?: GroupAlign,
+  disabled?: boolean,
+  name: string,
+  value?: Array<string>,
+  onChange?: (value: Array<string>) => mixed,
+  classNames?: ClassNames,
+  error?: boolean,
+  errorText?: string,
+  children?: React.Node,
+};
+
+export const CheckboxGroup: React$AbstractComponent<
+  CheckboxGroupProps,
+  HTMLDivElement,
+> = React.forwardRef<CheckboxGroupProps, HTMLDivElement>(
+  (
+    {
+      align = 'vertical',
+      disabled = false,
+      name,
+      value: checkedList,
+      onChange,
+      classNames,
+      error = false,
+      errorText = '',
+      children,
+    }: CheckboxGroupProps,
+    forwardRef,
+  ): React.Node => {
+    const onChangeHandler = ({value, checked}) => {
+      const checkedListTemp = checkedList ? [...checkedList] : [];
+      if (checked && !checkedListTemp.includes(value)) {
+        checkedListTemp.push(value);
+      } else if (!checked && checkedListTemp.includes(value)) {
+        for (let i = 0; i < checkedListTemp.length; i++) {
+          if (checkedListTemp[i] === value) {
+            checkedListTemp.splice(i, 1);
+            break;
+          }
+        }
+      }
+      onChange && onChange(checkedListTemp);
+    };
+
+    const childrenWithProps = React.Children.map(children, (child) => {
+      if (React.isValidElement(child)) {
+        const {
+          value,
+          disabled: disabledChild,
+          error: errorChild,
+          onChange,
+        } = child.props;
+        const childOnChange = (...params) => {
+          onChangeHandler(...params);
+          onChange && onChange(...params);
+        };
+        return React.cloneElement(child, {
+          name,
+          checked: !!checkedList?.includes(value),
+          onChange: childOnChange,
+          align,
+          error: errorChild || error,
+          disabled: disabledChild || disabled,
+        });
+      }
+      return child;
+    });
+
+    return (
+      <div
+        className={classify(css.checkboxGroupContainer, classNames?.wrapper)}
+      >
+        <div
+          className={classify(
+            {
+              [css.vertical]: align === 'vertical',
+              [css.horizontal]: align === 'horizontal-fixed',
+              [css.horizontalFluid]: align === 'horizontal-fluid',
+            },
+            classNames?.checkboxGroup,
+          )}
+          ref={forwardRef}
+        >
+          {childrenWithProps}
+        </div>
+        {error && (
+          <BodySmall className={classify(classNames?.errorText)} color="danger">
+            {errorText}
+          </BodySmall>
+        )}
+      </div>
+    );
+  },
+);

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

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

package/lib/components/Chip/Chip.js

@@ -25,24 +25,19 @@ const Chip = exports.Chip = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     classNames,
     semantic = 'primary',
-    // @ts-ignore - TS2322 - Type '"medium"' is not assignable to type '"large" | "small"'.
     size = 'medium',
     children,
-    // @ts-ignore - TS2339 - Property 'iconName' does not exist on type 'ChipProps'.
     iconName = '',
-    // @ts-ignore - TS2339 - Property 'iconType' does not exist on type 'ChipProps'.
     iconType = 'regular',
     showStatusIndicator,
-    // @ts-ignore - TS2339 - Property 'dismissable' does not exist on type 'ChipProps'.
     dismissable = false,
-    // @ts-ignore - TS2339 - Property 'onDismiss' does not exist on type 'ChipProps'.
     onDismiss = () => null,
     onClick,
     disabled,
     line = 1,
     wordBreak,
-    // There is no reason for hover state to be active when there is no click handler attached
     disableHoverState = !onClick,
+    // There is no reason for hover state to be active when there is no click handler attached
     ...restProps
   } = _ref;
   /**
@@ -82,16 +77,13 @@ const Chip = exports.Chip = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       [_ChipModule.default.danger]: semantic === CHIP_SEMANTIC.danger,
       [_ChipModule.default.secondary]: semantic === CHIP_SEMANTIC.secondary,
       [_ChipModule.default.large]: size === 'large',
-      // @ts-ignore - TS2367 - This condition will always return 'false' since the types '"large" | "small"' and '"medium"' have no overlap.
       [_ChipModule.default.medium]: size === 'medium',
       [_ChipModule.default.small]: size === 'small',
       [_ChipModule.default.dismissable]: dismissable,
       [_ChipModule.default.withIcon]: !!iconName && size !== 'small',
       [_ChipModule.default.disabled]: disabled,
       [_ChipModule.default.noHoverState]: showStatusIndicator || disableHoverState || disabled
-    }, classNames?.wrapper)
-    // @ts-ignore - TS2322 - Type '((arg1: SyntheticEvent<HTMLElement, Event>) => unknown) | null | undefined' is not assignable to type 'MouseEventHandler<HTMLDivElement> | undefined'.
-    ,
+    }, classNames?.wrapper),
     onClick: onClick,
     onKeyDown: handleKeyDown,
     tabIndex: showStatusIndicator || disableHoverState || disabled ? undefined : 0,

package/lib/components/Chip/Chip.js.flow

@@ -0,0 +1,199 @@
+// @flow strict
+
+import * as React from 'react';
+
+import {classify} from '../../utils/classify';
+import type {IconType} from '../Icon';
+import {CloseIcon, Icon} from '../Icon';
+import {StatusIndicator} from '../StatusIndicator';
+import {Truncate} from '../Truncate';
+
+import css from './Chip.module.css';
+
+
+type ClassNames = $ReadOnly<{
+  wrapper?: string,
+  icon?: string,
+  statusIndicator?: string,
+}>;
+
+export const CHIP_SEMANTIC = Object.freeze({
+  primary: 'primary',
+  information: 'information',
+  success: 'success',
+  warning: 'warning',
+  danger: 'danger',
+  secondary: 'secondary',
+});
+
+export type ChipSemanticType = $Values<typeof CHIP_SEMANTIC>;
+
+export type BaseChipProps = {
+  classNames?: ClassNames,
+  semantic?: ChipSemanticType,
+  children: React.Node,
+  disabled?: boolean,
+  showStatusIndicator?: boolean,
+  disableHoverState?: boolean,
+  line?: number,
+  wordBreak?: string,
+  onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+  onMouseEnter?: ?(SyntheticEvent<HTMLElement>) => mixed,
+  onMouseLeave?: ?(SyntheticEvent<HTMLElement>) => mixed,
+};
+
+export type LargeChipProps = {
+  ...BaseChipProps,
+  iconName?: string,
+  iconType?: IconType,
+  dismissable?: boolean,
+  onDismiss?: ?(SyntheticEvent<HTMLElement>) => mixed,
+  size?: 'large',
+};
+
+export type MediumChipProps = {
+  ...LargeChipProps,
+  size?: 'medium',
+};
+
+export type SmallChipProps = {
+  ...BaseChipProps,
+  size?: 'small',
+};
+
+export type ChipProps = LargeChipProps | MediumChipProps | SmallChipProps;
+
+export const Chip: React$AbstractComponent<ChipProps, HTMLDivElement> =
+  React.forwardRef<ChipProps, HTMLDivElement>(
+    (
+      {
+        classNames,
+        semantic = 'primary',
+        size = 'medium',
+        children,
+        iconName = '',
+        iconType = 'regular',
+        showStatusIndicator,
+        dismissable = false,
+        onDismiss = () => null,
+        onClick,
+        disabled,
+        line = 1,
+        wordBreak,
+        disableHoverState = !onClick, // There is no reason for hover state to be active when there is no click handler attached
+        ...restProps
+      }: ChipProps,
+      ref,
+    ): React.Node => {
+      /**
+       * Note (Nishant): Why we are using a `div` to render a onclick element instead of a `button`?
+       *
+       * Rendering the `Chip` component as a button directly would have been ideal, as it would
+       * have naturally handled interactivity and accessibility for clickable chips(which has an onClick). However,
+       * the `Chip` component includes a `CloseIcon`, which itself is a button. Nesting a `<button>`
+       * inside another `<button>` is semantically incorrect and would lead to improper HTML structure.
+       *
+       * Instead, we use a `<div>` with `role="button"` to maintain proper semantic behavior and
+       * avoid nesting buttons. While `role="button"` provides the appropriate semantics, it does
+       * not automatically handle keyboard interactions. Therefore, we manually handle `Enter`
+       * and `Space` key events to ensure the component is fully accessible and keyboard-compliant.
+       *
+       * Although this method might seem less conventional, it simplifies implementation and ensures
+       * backward compatibility while adhering to accessibility standards.
+       */
+      const handleKeyDown = (event: SyntheticKeyboardEvent<HTMLElement>) => {
+        const {key} = event;
+        if (key === 'Enter' || key === ' ') {
+          event.preventDefault(); // Prevent default action for Enter and Space keys
+          onClick?.(event);
+        }
+      };
+
+      return (
+        <div
+          data-testid="Chip"
+          {...restProps}
+          ref={ref}
+          className={classify(
+            css.chipWrapper,
+            {
+              [css.primary]: semantic === CHIP_SEMANTIC.primary,
+              [css.information]: semantic === CHIP_SEMANTIC.information,
+              [css.success]: semantic === CHIP_SEMANTIC.success,
+              [css.warning]: semantic === CHIP_SEMANTIC.warning,
+              [css.danger]: semantic === CHIP_SEMANTIC.danger,
+              [css.secondary]: semantic === CHIP_SEMANTIC.secondary,
+              [css.large]: size === 'large',
+              [css.medium]: size === 'medium',
+              [css.small]: size === 'small',
+              [css.dismissable]: dismissable,
+              [css.withIcon]: !!iconName && size !== 'small',
+              [css.disabled]: disabled,
+              [css.noHoverState]:
+                showStatusIndicator || disableHoverState || disabled,
+            },
+            classNames?.wrapper,
+          )}
+          onClick={onClick}
+          onKeyDown={handleKeyDown}
+          tabIndex={
+            showStatusIndicator || disableHoverState || disabled ? undefined : 0
+          }
+          role={showStatusIndicator || disableHoverState ? undefined : 'button'}
+        >
+          {showStatusIndicator && size !== 'small' && (
+            <StatusIndicator
+              status={semantic}
+              classNames={{
+                wrapper: classify(
+                  css.statusIndicatorBlock,
+                  classNames?.statusIndicator,
+                ),
+              }}
+              disabled={disabled}
+            />
+          )}
+
+          {iconName && size !== 'small' && (
+            <Icon
+              className={classify(
+                css.chipIcon,
+                {[css.alignTop]: line > 1},
+                classNames?.icon,
+              )}
+              name={iconName}
+              type={iconType}
+              size="small"
+            />
+          )}
+          <Truncate line={line} wordBreak={wordBreak}>
+            {children}
+          </Truncate>
+
+          {dismissable && size !== 'small' && (
+            <CloseIcon
+              classNames={{
+                icon: css.dismissIcon,
+                button: classify(
+                  {[css.alignTop]: line > 1},
+                  css.dismissIconWrapper,
+                ),
+              }}
+              type={iconType}
+              size="small"
+              ariaLabel="Dismiss"
+              disabled={disabled}
+              onClick={(event) => {
+                event.stopPropagation();
+                if (!disabled && onDismiss) {
+                  onDismiss(event);
+                }
+              }}
+            />
+          )}
+        </div>
+      );
+    },
+  );
+
+Chip.displayName = 'Chip';

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

@@ -0,0 +1,4 @@
+// @flow strict
+
+export type {ChipProps, ChipSemanticType} from './Chip';
+export {Chip, CHIP_SEMANTIC} from './Chip';

package/lib/components/CircularLoader/CircularLoader.js.flow

@@ -0,0 +1,58 @@
+// @flow strict
+
+import * as React from 'react';
+
+import * as COLORS from '../../styles/variables/_color';
+import classify from '../../utils/classify';
+
+import css from './CircularLoader.module.css';
+
+
+export type CircularLoaderProps = {
+  size?: 'large' | 'medium' | 'small',
+  className?: string,
+  ariaLabel?: string,
+  // TODO: update it to permissible colors
+  colorToken?: $Keys<typeof COLORS>,
+};
+
+export const CircularLoader: React$AbstractComponent<
+  CircularLoaderProps,
+  HTMLDivElement,
+> = React.forwardRef<CircularLoaderProps, HTMLDivElement>(
+  (
+    {
+      size = 'medium',
+      className,
+      colorToken = 'colorTextClickable',
+      ariaLabel = 'Loading',
+    }: CircularLoaderProps,
+    ref,
+  ): React.Node => (
+    <div
+      className={classify(
+        css.container,
+        {
+          [css.mediumContainer]: size === 'medium',
+          [css.smallContainer]: size === 'small',
+        },
+        className,
+      )}
+      ref={ref}
+      aria-label={ariaLabel}
+      role="alert"
+      aria-busy="true"
+    >
+      <div className={css.spinLoader} aria-hidden="true">
+        <div
+          className={css.outerCircle}
+          style={{'--color': COLORS[colorToken]}}
+        ></div>
+        <div
+          className={css.ellipse}
+          style={{'--color': COLORS[colorToken]}}
+        ></div>
+      </div>
+    </div>
+  ),
+);

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

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