@spaced-out/ui-design-system 0.4.15 → 0.5.0

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';

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

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

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

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

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

package/lib/components/CollapsibleCard/CollapsibleCard.js.flow

@@ -1,146 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-
-import classify from '../../utils/classify';
-import {UnstyledButton} from '../Button';
-import type {IconType} from '../Icon';
-import {Icon} from '../Icon';
-import {Truncate} from '../Truncate';
-
-import css from './CollapsibleCard.module.css';
-
-
-export const COLLAPSIBLE_CARD_SEMANTIC = Object.freeze({
-  neutral: 'neutral',
-  success: 'success',
-  information: 'information',
-  warning: 'warning',
-  danger: 'danger',
-});
-
-type ClassNames = $ReadOnly<{
-  wrapper?: string,
-  title?: string,
-  content?: string,
-}>;
-
-export type CollapsibleCardSemanticType = $Values<
-  typeof COLLAPSIBLE_CARD_SEMANTIC,
->;
-
-export type CollapsibleCardProps = {
-  id?: string,
-  title: React.Node,
-  children: React.Node,
-  classNames?: ClassNames,
-  isOpen?: boolean,
-  headerIconName?: string,
-  headerIconType?: IconType,
-  semantic?: CollapsibleCardSemanticType,
-  onChange?: ?(
-    e: SyntheticEvent<HTMLElement>,
-    isOpen: boolean,
-    id?: string,
-  ) => mixed,
-};
-
-export type CollapsibleCardActionProps = {
-  children: React.Node,
-  className?: string,
-};
-
-export const CollapsibleCardAction = ({
-  children,
-  className,
-}: CollapsibleCardActionProps): React.Node => (
-  <div className={classify(css.actionContainer, className)}>{children}</div>
-);
-
-export type CollapsibleCardContentProps = {
-  children: React.Node,
-  className?: string,
-};
-
-export const CollapsibleCardContent = ({
-  children,
-  className,
-}: CollapsibleCardActionProps): React.Node => (
-  <div className={classify(css.contentContainer, className)}>{children}</div>
-);
-
-export const CollapsibleCard: React$AbstractComponent<
-  CollapsibleCardProps,
-  HTMLDivElement,
-> = React.forwardRef<CollapsibleCardProps, HTMLDivElement>(
-  (
-    {
-      id,
-      isOpen,
-      onChange,
-      classNames,
-      title,
-      children,
-      semantic = 'neutral',
-      headerIconName,
-      headerIconType = 'solid',
-    }: CollapsibleCardProps,
-    ref,
-  ): React.Node => {
-    const [collapsibleCardIsOpen, setCollapsibleCardIsOpen] = React.useState(
-      Boolean(isOpen),
-    );
-
-    React.useEffect(() => {
-      setCollapsibleCardIsOpen(Boolean(isOpen));
-    }, [isOpen]);
-
-    return (
-      <div
-        data-testid="CollapsibleCard"
-        className={classify(css.wrapper, classNames?.wrapper)}
-        ref={ref}
-      >
-        <UnstyledButton
-          className={classify(
-            css.header,
-            {
-              [css.isOpen]: collapsibleCardIsOpen,
-            },
-            classNames?.title,
-          )}
-          onClick={(e) => {
-            onChange?.(e, !collapsibleCardIsOpen, id);
-            setCollapsibleCardIsOpen(!collapsibleCardIsOpen);
-          }}
-        >
-          <div className={css.headerContent}>
-            {!!headerIconName && (
-              <div className={classify(css.iconContainer, css[semantic])}>
-                <Icon
-                  name={headerIconName}
-                  type={headerIconType}
-                  size="small"
-                  className={css[semantic]}
-                />
-              </div>
-            )}
-
-            <Truncate>{title}</Truncate>
-          </div>
-
-          {collapsibleCardIsOpen ? (
-            <Icon name="chevron-up" color="secondary" size="small" />
-          ) : (
-            <Icon name="chevron-down" color="secondary" size="small" />
-          )}
-        </UnstyledButton>
-        {collapsibleCardIsOpen && (
-          <div className={classify(css.content, classNames?.content)}>
-            {children}
-          </div>
-        )}
-      </div>
-    );
-  },
-);

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

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