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

package/lib/components/ChatBubble/ChatBubble.d.ts

@@ -0,0 +1,203 @@
+import {$ReadOnly, $Values} from 'utility-types';
+import * as React from 'react';
+import classify from '../../utils/classify';
+import type {AvatarProps} from '../Avatar';
+import {Avatar} from '../Avatar';
+import {Icon, ICON_SIZE, ICON_TYPE} from '../Icon';
+import type {BaseTooltipProps} from '../Tooltip';
+import {Tooltip} from '../Tooltip';
+import css from './ChatBubble.module.css';
+
+const getNamedComponent = (
+  childrenArray: Array<React.ReactNode>,
+  componentDisplayName: string,
+): (React.ReactNode | null | undefined) | React.ReactNode[] => {
+  const nodes: React.ReactNode[] = [];
+
+  for (const child of childrenArray) {
+    if (
+      // $FlowFixMe
+      child?.type?.displayName === componentDisplayName
+    ) {
+      nodes.push(child);
+    }
+  }
+
+  return nodes.length > 1 ? nodes : nodes[0] || null;
+};
+
+export type ClassNames = $ReadOnly<{
+  wrapper?: string;
+}>;
+export const CHAT_BUBBLE_ORIENTATION = Object.freeze({
+  left: 'left',
+  right: 'right ',
+});
+export type ChatBubbleOrientation = $Values<typeof CHAT_BUBBLE_ORIENTATION>;
+export type ChatBubbleProps = {
+  classNames?: ClassNames;
+  orientation?: ChatBubbleOrientation;
+  children: React.ReactNode;
+};
+export const ChatBubble: React$AbstractComponent<
+  ChatBubbleProps,
+  HTMLDivElement
+> = React.forwardRef<ChatBubbleProps, HTMLDivElement>(
+  ({classNames, orientation = 'left', children}: ChatBubbleProps, ref) => {
+    const isLeftAligned = orientation === 'left';
+    const childrenArray: React.ReactNode[] = React.Children.toArray(children);
+    const anchorComponent = getNamedComponent(childrenArray, 'ChatAnchor');
+    const chatComponent = getNamedComponent(childrenArray, 'ChatContent');
+    return (
+      <div
+        ref={ref}
+        data-testid="ChatBubble"
+        className={classify(
+          css.chatBubbleWrapper,
+          {
+            [css.chatBubbleWrapperRight]: !isLeftAligned,
+          },
+          classNames?.wrapper,
+        )}
+      >
+        {anchorComponent}
+        {chatComponent}
+      </div>
+    );
+  },
+);
+export type ChatAnchorProps = {
+  isAI?: boolean;
+  tooltip?: BaseTooltipProps;
+  classNames?: ClassNames;
+  avatarProps?: AvatarProps;
+};
+export const ChatAnchor = ({
+  isAI = true,
+  tooltip,
+  classNames,
+  avatarProps,
+}: ChatAnchorProps): React.ReactNode => (
+  <div
+    data-testid="ChatAnchor"
+    className={classify(css.chatAnchorWrapper, classNames?.wrapper)}
+  >
+    <Tooltip {...tooltip} hidden={!tooltip}>
+      {isAI ? (
+        <Icon
+          name="sparkle"
+          color="information"
+          type={ICON_TYPE.solid}
+          size={ICON_SIZE.large}
+        />
+      ) : (
+        <Avatar {...avatarProps} />
+      )}
+    </Tooltip>
+  </div>
+);
+ChatAnchor.displayName = 'ChatAnchor';
+export type ChatContentProps = {
+  classNames?: ClassNames;
+  children?: React.ReactNode;
+};
+export const ChatContent = ({
+  classNames,
+  children,
+}: ChatContentProps): React.ReactNode => (
+  <div
+    data-testid="ChatContent"
+    className={classify(css.chatContentWrapper, classNames?.wrapper)}
+  >
+    {children}
+  </div>
+);
+ChatContent.displayName = 'ChatContent';
+export type ChatBodyClassNames = $ReadOnly<{
+  wrapper?: string;
+  loader: string;
+}>;
+export type ChatBodyProps = {
+  withBgColor?: boolean;
+  isLoading?: boolean;
+  loadingText?: string;
+  children?: React.ReactNode;
+  classNames?: ClassNames;
+};
+export const ChatBody = ({
+  withBgColor = true,
+  isLoading,
+  children,
+  loadingText = 'Generating',
+  classNames,
+}: ChatBodyProps): React.ReactNode => (
+  <div
+    data-testid="ChatBody"
+    className={classify(
+      css.chatBodyWrapper,
+      {
+        [css.chatBodyWrapperLoading]: isLoading || !withBgColor,
+        [css.chatBodyWrapperBgColor]: withBgColor,
+      },
+      classNames?.wrapper,
+    )}
+  >
+    {isLoading ? (
+      <div className={classify(css.loadingContainer, classNames?.wrapper)}>
+        <span className={css.loadingText}>{loadingText}</span>
+        <span className={css.loader}>
+          <span className={css.dot} />
+          <span className={css.dot} />
+          <span className={css.dot} />
+        </span>
+      </div>
+    ) : (
+      children
+    )}
+  </div>
+);
+ChatBody.displayName = 'ChatBody';
+export type ChatFooterProps = {
+  classNames?: ClassNames;
+  children?: React.ReactNode;
+};
+export const ChatFooter = ({
+  children,
+  classNames,
+}: ChatFooterProps): React.ReactNode => {
+  const childrenArray: React.ReactNode[] = React.Children.toArray(children);
+  const leftSlot = getNamedComponent(childrenArray, 'ChatFooterLeftSlot');
+  const rightSlot = getNamedComponent(childrenArray, 'ChatFooterRightSlot');
+  return (
+    <div
+      data-testid="ChatFooter"
+      className={classify(css.chatFooterWrapper, classNames?.wrapper)}
+    >
+      {leftSlot}
+      {rightSlot}
+    </div>
+  );
+};
+ChatFooter.displayName = 'ChatFooter';
+export type ChatFooterRightSlotProps = {
+  children?: React.ReactNode;
+  classNames?: ClassNames;
+};
+export const ChatFooterRightSlot = ({
+  children,
+  classNames,
+}: ChatFooterRightSlotProps): React.ReactNode => (
+  <div className={classNames?.wrapper}>{children}</div>
+);
+ChatFooterRightSlot.displayName = 'ChatFooterRightSlot';
+export type ChatFooterLeftSlotProps = {
+  children?: React.ReactNode;
+  classNames?: ClassNames;
+};
+export const ChatFooterLeftSlot = ({
+  children,
+  classNames,
+}: ChatFooterLeftSlotProps): React.ReactNode => (
+  <div className={classNames?.wrapper}>{children}</div>
+);
+ChatFooterLeftSlot.displayName = 'ChatFooterLeftSlot';

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

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

package/lib/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,165 @@
+import {$ReadOnly} from 'utility-types';
+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.ReactNode;
+  checked?: boolean;
+  indeterminate?: boolean;
+  focused?: boolean;
+  disabled?: boolean;
+  error?: boolean;
+  onChange?: (
+    arg0: {
+      value: string;
+      checked: boolean;
+    },
+    arg1: React.SyntheticEvent<HTMLElement> | null | undefined,
+  ) => unknown;
+  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.ReactNode => {
+    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.d.ts

@@ -0,0 +1,113 @@
+import {$ReadOnly} from 'utility-types';
+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.ReactNode;
+  value: string;
+}>;
+export type CheckboxGroupProps = {
+  align?: GroupAlign;
+  disabled?: boolean;
+  name: string;
+  value?: Array<string>;
+  onChange?: (value: Array<string>) => unknown;
+  classNames?: ClassNames;
+  error?: boolean;
+  errorText?: string;
+  children?: React.ReactNode;
+};
+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.ReactNode => {
+    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.d.ts

@@ -0,0 +1,2 @@
+export * from './Checkbox';
+export * from './CheckboxGroup';

package/lib/components/Chip/Chip.d.ts

@@ -0,0 +1,181 @@
+import {$ReadOnly, $Values} from 'utility-types';
+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.ReactNode;
+  disabled?: boolean;
+  showStatusIndicator?: boolean;
+  disableHoverState?: boolean;
+  onClick?:
+    | ((arg0: React.SyntheticEvent<HTMLElement>) => unknown)
+    | null
+    | undefined;
+  onMouseEnter?:
+    | ((arg0: React.SyntheticEvent<HTMLElement>) => unknown)
+    | null
+    | undefined;
+  onMouseLeave?:
+    | ((arg0: React.SyntheticEvent<HTMLElement>) => unknown)
+    | null
+    | undefined;
+};
+export type LargeChipProps = BaseChipProps & {
+  iconName?: string;
+  iconType?: IconType;
+  dismissable?: boolean;
+  onDismiss?:
+    | ((arg0: React.SyntheticEvent<HTMLElement>) => unknown)
+    | null
+    | undefined;
+  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,
+        disableHoverState = !onClick,
+        // There is no reason for hover state to be active when there is no click handler attached
+        ...restProps
+      }: ChipProps,
+      ref,
+    ): React.ReactNode => {
+      /**
+       * 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: React.KeyboardEvent<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,
+            },
+            classNames?.wrapper,
+          )}
+          onClick={onClick}
+          onKeyDown={handleKeyDown}
+          tabIndex={showStatusIndicator || disableHoverState ? 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, classNames?.icon)}
+              name={iconName}
+              type={iconType}
+              size="small"
+            />
+          )}
+          <Truncate>{children}</Truncate>
+
+          {dismissable && size !== 'small' && (
+            <CloseIcon
+              classNames={{
+                icon: css.dismissIcon,
+                button: css.dismissIconWrapper,
+              }}
+              type={iconType}
+              size="small"
+              ariaLabel="Dismiss"
+              onClick={(event) => {
+                event.stopPropagation();
+
+                if (!disabled && onDismiss) {
+                  onDismiss(event);
+                }
+              }}
+            />
+          )}
+        </div>
+      );
+    },
+  );
+Chip.displayName = 'Chip';

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

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