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

package/lib/components/ChatBubble/ChatBubble.js.flow

@@ -1,222 +0,0 @@
-// @flow strict
-
-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.Node>,
-  componentDisplayName: string,
-): ?React.Node | React.Node[] => {
-  const nodes: React.Node[] = [];
-  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.Node,
-};
-
-export const ChatBubble: React$AbstractComponent<
-  ChatBubbleProps,
-  HTMLDivElement,
-> = React.forwardRef<ChatBubbleProps, HTMLDivElement>(
-  ({classNames, orientation = 'left', children}: ChatBubbleProps, ref) => {
-    const isLeftAligned = orientation === 'left';
-
-    const childrenArray: React.Node[] = 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.Node => (
-  <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.Node};
-
-export const ChatContent = ({
-  classNames,
-  children,
-}: ChatContentProps): React.Node => (
-  <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.Node,
-  classNames?: ClassNames,
-};
-
-export const ChatBody = ({
-  withBgColor = true,
-  isLoading,
-  children,
-  loadingText = 'Generating',
-  classNames,
-}: ChatBodyProps): React.Node => (
-  <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.Node};
-
-export const ChatFooter = ({
-  children,
-  classNames,
-}: ChatFooterProps): React.Node => {
-  const childrenArray: React.Node[] = 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.Node,
-  classNames?: ClassNames,
-};
-
-export const ChatFooterRightSlot = ({
-  children,
-  classNames,
-}: ChatFooterRightSlotProps): React.Node => (
-  <div className={classNames?.wrapper}>{children}</div>
-);
-
-ChatFooterRightSlot.displayName = 'ChatFooterRightSlot';
-
-export type ChatFooterLeftSlotProps = {
-  children?: React.Node,
-  classNames?: ClassNames,
-};
-
-export const ChatFooterLeftSlot = ({
-  children,
-  classNames,
-}: ChatFooterLeftSlotProps): React.Node => (
-  <div className={classNames?.wrapper}>{children}</div>
-);
-
-ChatFooterLeftSlot.displayName = 'ChatFooterLeftSlot';

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

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

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

@@ -1,168 +0,0 @@
-// @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.flow

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

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

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

@@ -1,199 +0,0 @@
-// @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';