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

package/lib/components/RadioButton/RadioButton.d.ts

@@ -1,132 +0,0 @@
-import {$ReadOnly} from 'utility-types';
-import * as React from 'react';
-import type {GroupAlign} from '../../types/common';
-import classify from '../../utils/classify';
-import css from './RadioButton.module.css';
-
-/**
- * Note:
- * Do not wrap Radio in a label. For simplicity's sake, Radio uses an
- * internal label tag to handle click delegation to the hidden input, and
- * nesting labels is a bad idea.
- */
-type ClassNames = $ReadOnly<{
-  wrapper?: string;
-  label?: string;
-  radio?: string;
-}>;
-export type RadioButtonProps = {
-  children?: React.ReactNode;
-  value?: string;
-  disabled?: boolean;
-  focused?: boolean;
-  name?: string;
-  selectedValue?: string;
-  align?: GroupAlign;
-  classNames?: ClassNames;
-  error?: boolean;
-  onChange?: (newValue: string) => unknown;
-  tabIndex?: number;
-  ariaLabel?: string;
-};
-export const RadioButton: React$AbstractComponent<
-  RadioButtonProps,
-  HTMLInputElement
-> = React.forwardRef<RadioButtonProps, HTMLInputElement>(
-  (
-    {
-      children,
-      disabled = false,
-      value = '',
-      focused = false,
-      name = 'radio',
-      selectedValue,
-      onChange,
-      align = 'vertical',
-      classNames,
-      error = false,
-      tabIndex = 0,
-      ariaLabel = '',
-      ...props
-    }: RadioButtonProps,
-    forwardRef,
-  ): React.ReactNode => {
-    const radioInput = React.createRef<HTMLInputElement>();
-    React.useImperativeHandle(forwardRef, () => radioInput.current);
-    const checked = selectedValue === value;
-    React.useEffect(() => {
-      if (radioInput.current && focused) {
-        radioInput.current.focus();
-      }
-    }, [focused]);
-
-    const onWrapClickHandler = () => {
-      radioInput.current?.click();
-    };
-
-    const onChangeHandler = (e) => {
-      if (!disabled) {
-        onChange && onChange(e?.target?.value);
-      }
-    };
-
-    const onKeyDownHandler = (e) => {
-      if (e.key === 'Enter') {
-        onChangeHandler(e);
-      }
-    };
-
-    return (
-      <div
-        className={classify(
-          css.container,
-          {
-            [css.horizontalRadioButton]: align === 'horizontal-fixed',
-            [css.fluidRadioButton]: align === 'horizontal-fluid',
-            [css.containerDisabled]: disabled,
-          },
-          classNames?.wrapper,
-        )}
-        onClick={onWrapClickHandler}
-      >
-        <input
-          type="radio"
-          checked={checked}
-          disabled={disabled}
-          className={classify(
-            css.radio,
-            {
-              [css.unselected]: !checked && !disabled && !error,
-              [css.selected]: checked && !disabled && !error,
-              [css.disabled]: disabled,
-              [css.error]: error && !disabled,
-            },
-            classNames?.radio,
-          )}
-          ref={radioInput}
-          onChange={onChangeHandler}
-          onKeyDown={onKeyDownHandler}
-          tabIndex={disabled ? -1 : tabIndex}
-          name={name}
-          value={value || ''}
-          aria-label={ariaLabel || children}
-          {...props}
-        />
-        {React.Children.count(children) > 0 && (
-          <div
-            color="secondary"
-            className={classify(
-              css.radioLabel,
-              {
-                [css.labelDisabled]: disabled,
-              },
-              classNames?.label,
-            )}
-          >
-            {children}
-          </div>
-        )}
-      </div>
-    );
-  },
-);

package/lib/components/RadioButton/RadioGroup.d.ts

@@ -1,88 +0,0 @@
-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 './RadioGroup.module.css';
-
-/**
- * Note:
- * Do not wrap Radio in a label. For simplicity's sake, Radio uses an
- * internal label tag to handle click delegation to the hidden input, and
- * nesting labels is a bad idea.
- */
-type ClassNames = $ReadOnly<{
-  wrapper?: string;
-  radioGroup?: string;
-  errorText?: string;
-}>;
-export type RadioGroupProps = {
-  align?: GroupAlign;
-  name: string;
-  value?: string;
-  onChange?: (value: string) => unknown;
-  children?: React.ReactNode;
-  classNames?: ClassNames;
-  error?: boolean;
-  errorText?: string;
-};
-export const RadioGroup: React$AbstractComponent<
-  RadioGroupProps,
-  HTMLDivElement
-> = React.forwardRef<RadioGroupProps, HTMLDivElement>(
-  (
-    {
-      align = 'vertical',
-      name,
-      value,
-      onChange,
-      children,
-      classNames,
-      error = false,
-      errorText = '',
-    }: RadioGroupProps,
-    forwardRef,
-  ): React.ReactNode => {
-    const onChangeHandler = (value) => {
-      if (onChange) {
-        onChange(value);
-      }
-    };
-
-    const childrenWithProps = React.Children.map(children, (child) => {
-      if (React.isValidElement(child)) {
-        return React.cloneElement(child, {
-          name,
-          selectedValue: value,
-          onChange: onChangeHandler,
-          align,
-          error,
-        });
-      }
-
-      return child;
-    });
-    return (
-      <div className={classify(css.radioGroupContainer, classNames?.wrapper)}>
-        <div
-          className={classify(
-            {
-              [css.vertical]: align === 'vertical',
-              [css.horizontal]: align === 'horizontal-fixed',
-              [css.horizontalFluid]: align === 'horizontal-fluid',
-            },
-            classNames?.radioGroup,
-          )}
-          ref={forwardRef}
-        >
-          {childrenWithProps}
-        </div>
-        {error && (
-          <BodySmall color="danger" className={classNames?.errorText}>
-            {errorText}
-          </BodySmall>
-        )}
-      </div>
-    );
-  },
-);

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

@@ -1,2 +0,0 @@
-export {RadioButton} from './RadioButton';
-export {RadioGroup} from './RadioGroup';

package/lib/components/RadioTile/RadioTile.d.ts

@@ -1,109 +0,0 @@
-import {$ReadOnly} from 'utility-types';
-import * as React from 'react';
-import type {AlertSemanticType} from '../../types/common';
-import {ALERT_SEMANTIC} from '../../types/common';
-import classify from '../../utils/classify';
-import {ClickableCard} from '../Card';
-import {Chip} from '../Chip';
-import type {IconSize, IconType} from '../Icon';
-import {ICON_SIZE, ICON_TYPE, SemanticIcon} from '../Icon';
-import {RadioButton} from '../RadioButton';
-import {BodyMedium, SubTitleMedium} from '../Text';
-import css from './RadioTile.module.css';
-type ClassNames = $ReadOnly<{
-  wrapper?: string;
-}>;
-export type RadioTileProps = {
-  id: string;
-  classNames?: ClassNames;
-  semantic?: AlertSemanticType;
-  header?: string;
-  description?: string;
-  chipItems?: Array<string>;
-  onTileClick?: (e: React.SyntheticEvent<HTMLElement>, id: string) => void;
-  iconName?: string;
-  iconSize?: IconSize;
-  iconType?: IconType;
-  isSelected?: boolean;
-};
-export const RadioTile: React$AbstractComponent<
-  RadioTileProps,
-  HTMLDivElement
-> = React.forwardRef<RadioTileProps, HTMLDivElement>(
-  (
-    {
-      classNames,
-      id,
-      semantic = ALERT_SEMANTIC.neutral,
-      header,
-      description,
-      chipItems,
-      iconName,
-      iconSize = ICON_SIZE.medium,
-      iconType = ICON_TYPE.solid,
-      onTileClick,
-      isSelected = false,
-      ...props
-    }: RadioTileProps,
-    ref,
-  ) => {
-    const handleTileClick = (e: React.SyntheticEvent<HTMLElement>) => {
-      onTileClick && onTileClick(e, id);
-    };
-
-    return (
-      <ClickableCard
-        {...props}
-        ref={ref}
-        data-testid="RadioTile"
-        classNames={{
-          wrapper: classify(css.wrapper, classNames?.wrapper),
-        }}
-        onClick={handleTileClick}
-      >
-        <div className={css.iconContainer}>
-          {!!iconName && (
-            <SemanticIcon
-              semantic={semantic}
-              name={iconName}
-              size={iconSize}
-              type={iconType}
-            />
-          )}
-        </div>
-        <div className={css.contentContainer}>
-          <div className={css.textContainer}>
-            {!!header && <SubTitleMedium>{header}</SubTitleMedium>}
-            {!!description && (
-              <BodyMedium color="secondary">{description}</BodyMedium>
-            )}
-          </div>
-          {!!chipItems?.length && (
-            <div className={css.chipsContainer}>
-              {chipItems.map(
-                (
-                  item,
-                  index, // eslint-disable-next-line react/no-array-index-key
-                ) => (
-                  <Chip key={index} semantic="primary">
-                    {item}
-                  </Chip>
-                ),
-              )}
-            </div>
-          )}
-        </div>
-        <div className={css.btnContainer}>
-          <RadioButton
-            classNames={{
-              wrapper: css.radioButtonWrapper,
-            }}
-            value={id}
-            selectedValue={isSelected ? id : ''}
-            tabIndex={-1}
-          />
-        </div>
-      </ClickableCard>
-    );
-  },
-);

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

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

package/lib/components/RangeSlider/RangeSlider.d.ts

@@ -1,207 +0,0 @@
-import {$ReadOnly} from 'utility-types';
-import * as React from 'react';
-import {
-  colorFillPrimary,
-  colorGrayLightest,
-  colorTextDisabled,
-} from '../../styles/variables/_color';
-import classify from '../../utils/classify';
-import type {ButtonSize} from '../Button';
-import {Button, BUTTON_SIZE} from '../Button';
-import {Input} from '../Input';
-import {BodySmall} from '../Text';
-import css from './RangeSlider.module.css';
-type ClassNames = $ReadOnly<{
-  wrapper?: string;
-}>;
-export type RangeSliderProps = {
-  min?: number;
-  max?: number;
-  step?: number;
-  value?: number;
-  onChange?: (value: number) => void;
-  // We don't want to send in the event because the icon buttons also modify the value
-  showTicks?: boolean;
-  iconLeftName?: string;
-  btnLeftSize?: ButtonSize;
-  iconRightName?: string;
-  btnRightSize?: ButtonSize;
-  disabled?: boolean;
-  hideLeftBtn?: boolean;
-  hideRightBtn?: boolean;
-  classNames?: ClassNames;
-  ariaLabel?: string;
-  showRange?: boolean;
-  hideValueInput?: boolean;
-};
-export const RangeSlider: React$AbstractComponent<
-  RangeSliderProps,
-  HTMLDivElement
-> = React.forwardRef<RangeSliderProps, HTMLDivElement>(
-  (
-    {
-      classNames,
-      disabled,
-      min = 0,
-      max = 100,
-      step = 1,
-      value = min,
-      onChange,
-      showTicks,
-      iconLeftName = 'minus',
-      btnLeftSize = BUTTON_SIZE.small,
-      iconRightName = 'plus',
-      btnRightSize = BUTTON_SIZE.small,
-      hideLeftBtn,
-      hideRightBtn,
-      ariaLabel = 'Slider',
-      showRange,
-      hideValueInput,
-      ...restInputProps
-    }: RangeSliderProps,
-    ref,
-  ) => {
-    const progress = ((value - min) / (max - min)) * 100;
-    const btnLeftDisabled = disabled || value <= min;
-    const btnRightDisabled = disabled || value >= max;
-    const progressColor = disabled ? colorTextDisabled : colorFillPrimary;
-
-    const handleInputChange = (e: React.SyntheticEvent<HTMLInputElement>) => {
-      let inputValue = parseFloat(e.currentTarget.value);
-
-      // Validate and adjust the value
-      if (isNaN(inputValue) || inputValue < min) {
-        inputValue = min;
-      } else if (inputValue > max) {
-        inputValue = max;
-      } else if (step > 0) {
-        const nearestStep = Math.round(inputValue / step) * step;
-        inputValue = Math.round(nearestStep * 100) / 100; // Adjust to nearest valid step
-      }
-
-      onChange?.(inputValue);
-    };
-
-    const handleChange = (e: React.SyntheticEvent<HTMLInputElement>) => {
-      emitRoundedValue(e.currentTarget.value);
-    };
-
-    const emitRoundedValue = (value: number | string) => {
-      const newValue = parseFloat(value);
-      const roundedValue = Math.round(newValue * 100) / 100; // Rounds to two decimal places
-
-      onChange?.(roundedValue);
-    };
-
-    return (
-      <div
-        ref={ref}
-        data-testid="RangeSlider"
-        className={classify(
-          css.wrapper,
-          {
-            [css.disabled]: disabled,
-          },
-          classNames?.wrapper,
-        )}
-      >
-        {!hideLeftBtn && !showRange && (
-          <Button
-            type="ghost"
-            iconLeftName={iconLeftName}
-            size={btnLeftSize}
-            ariaLabel="Decrease Value"
-            disabled={btnLeftDisabled}
-            onClick={() => emitRoundedValue(value - step)}
-          />
-        )}
-
-        {showRange && (
-          <BodySmall
-            className={css.rangeText}
-            color={disabled ? 'disabled' : 'primary'}
-          >
-            {min}
-          </BodySmall>
-        )}
-
-        <div className={css.sliderContainer}>
-          <input
-            {...restInputProps}
-            type="range"
-            min={min}
-            max={max}
-            step={step}
-            value={value}
-            onChange={handleChange}
-            className={css.slider}
-            list={showTicks ? 'ticks' : undefined}
-            disabled={disabled}
-            aria-label={ariaLabel}
-            style={{
-              background: `linear-gradient(to right, ${progressColor} ${progress}%, ${colorGrayLightest} ${progress}%)`,
-            }}
-          />
-          {showTicks && step > 0 && (
-            <datalist id="ticks" className={css.sliderTicks}>
-              {/*
-           Note(Nishant): Currently, ticks are shown based on the step value.
-           This can be easily extended in the future to support custom tick intervals
-           by allowing user-defined brackets or ranges for tick marks.
-          */}
-              {Array.from(
-                {
-                  length: (max - min) / step + 1,
-                },
-                (_, index) => (
-                  <option
-                    key={index}
-                    value={min + index * step}
-                    className={classify({
-                      [css.disabled]: disabled,
-                    })}
-                  />
-                ),
-              )}
-            </datalist>
-          )}
-        </div>
-
-        {showRange && (
-          <BodySmall
-            className={css.rangeText}
-            color={disabled ? 'disabled' : 'primary'}
-          >
-            {max}
-          </BodySmall>
-        )}
-
-        {!hideRightBtn && !showRange && (
-          <Button
-            type="ghost"
-            iconRightName={iconRightName}
-            size={btnRightSize}
-            ariaLabel="Increase Value"
-            disabled={btnRightDisabled}
-            onClick={() => emitRoundedValue(value + step)}
-          />
-        )}
-
-        {!hideValueInput && (
-          <Input
-            size="small"
-            type="number"
-            value={String(value)}
-            classNames={{
-              wrapper: css.valueInputWrapper,
-            }}
-            disabled={disabled}
-            onChange={handleInputChange}
-            disallowExponents
-            hideNumberSpinner
-          />
-        )}
-      </div>
-    );
-  },
-);

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

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

package/lib/components/Rating/Rating.d.ts

@@ -1,131 +0,0 @@
-import {$ReadOnly, $Values} from 'utility-types';
-import * as React from 'react';
-import invariant from 'invariant';
-import {isArray, isUndefined} from 'lodash';
-import type {ColorTypes} from '../../types/typography';
-import {classify} from '../../utils/classify';
-import {getRatingLabel, RATING_ERRORS, RATINGS} from '../../utils/rating';
-import {UnstyledButton} from '../Button';
-import type {ChipSemanticType} from '../Chip';
-import {Chip, CHIP_SEMANTIC} from '../Chip';
-import {ConditionalWrapper} from '../ConditionalWrapper';
-import {Icon} from '../Icon';
-import {TEXT_COLORS} from '../Text';
-import css from './Rating.module.css';
-export const RATING_SIZE = Object.freeze({
-  small: 'small',
-  medium: 'medium',
-});
-type ClassNames = $ReadOnly<{
-  wrapper?: string;
-  icon?: string;
-  button?: string;
-}>;
-type RatingSize = $Values<typeof RATING_SIZE>;
-export type RatingProps = {
-  size?: RatingSize;
-  start?: number;
-  end?: number;
-  quiet?: boolean;
-  rating?: number;
-  labels?: Array<string>;
-  iconColor?: ColorTypes;
-  onChange?: (
-    rating: number,
-    arg1: React.SyntheticEvent<HTMLElement> | null | undefined,
-  ) => unknown;
-  readOnly?: boolean;
-  hideLabel?: boolean;
-  iconName?: string;
-  classNames?: ClassNames;
-  chipSemantic?: ChipSemanticType;
-};
-export const Rating: React$AbstractComponent<RatingProps, HTMLDivElement> =
-  React.forwardRef<RatingProps, HTMLDivElement>(
-    (
-      {
-        size = 'medium',
-        start = 0,
-        end = 5,
-        quiet,
-        rating = 0,
-        labels = RATINGS,
-        onChange,
-        readOnly,
-        hideLabel,
-        iconName = 'star',
-        iconColor = TEXT_COLORS.favorite,
-        chipSemantic = CHIP_SEMANTIC.warning,
-        classNames,
-      }: RatingProps,
-      ref,
-    ): React.ReactNode => {
-      const [hoverIcon, setHoverIcon] = React.useState<number>(-1);
-      const chipText = getRatingLabel(rating - start, labels);
-      const totalIcons = end - start;
-      invariant(totalIcons, JSON.stringify(RATING_ERRORS.INVALID_RANGE));
-      invariant(
-        isUndefined(labels) || (isArray(labels) && labels.length),
-        JSON.stringify(RATING_ERRORS.INVALID_RATING_LABELS),
-      );
-      return (
-        <div
-          data-testid="Rating"
-          ref={ref}
-          className={classify(css.ratingContainer, classNames?.wrapper)}
-          onBlur={() => !quiet && setHoverIcon(-1)}
-        >
-          <div className={css.stars}>
-            {Array.from({
-              length: totalIcons,
-            }).map((_, index) => {
-              const isHovering = hoverIcon > -1;
-              const iconCount = index + 1;
-              const iconType = (
-                isHovering
-                  ? iconCount <= hoverIcon
-                  : iconCount <= rating - start
-              )
-                ? 'solid'
-                : 'regular';
-              return (
-                <ConditionalWrapper
-                  key={iconCount}
-                  condition={!readOnly}
-                  wrapper={(children) => (
-                    <UnstyledButton
-                      onKeyDown={(e) => {
-                        if (e.key === 'Enter') {
-                          onChange?.(start + iconCount, e);
-                        }
-                      }}
-                      onFocus={() => !quiet && setHoverIcon(iconCount)}
-                      className={classify(css.button, classNames?.button)}
-                      onClick={(e) => onChange?.(start + iconCount, e)}
-                      onMouseEnter={() => !quiet && setHoverIcon(iconCount)}
-                      onMouseLeave={() => !quiet && setHoverIcon(-1)}
-                    >
-                      {children}
-                    </UnstyledButton>
-                  )}
-                >
-                  <Icon
-                    size={size}
-                    name={iconName}
-                    type={iconType}
-                    color={iconColor}
-                    className={classify(css.icon, classNames?.icon)}
-                  />
-                </ConditionalWrapper>
-              );
-            })}
-          </div>
-          {!hideLabel && ( // $FlowFixMe[incompatible-type]
-            <Chip size={size} semantic={chipSemantic}>
-              {chipText}
-            </Chip>
-          )}
-        </div>
-      );
-    },
-  );

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

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