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

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

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

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

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

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

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

package/lib/components/ScoreBar/ScoreBar.d.ts

@@ -0,0 +1,122 @@
+import {$ReadOnly, $Values} from 'utility-types';
+import * as React from 'react';
+import invariant from 'invariant';
+import clamp from 'lodash/clamp';
+import {
+  colorScoreBarInactive,
+  colorScoreBarLevel1,
+  colorScoreBarLevel2,
+  colorScoreBarLevel3,
+  colorScoreBarLevel4,
+  colorScoreBarLevel5,
+} from '../../styles/variables/_color';
+import {size2, size18} from '../../styles/variables/_size';
+import {classify} from '../../utils/classify';
+import {
+  getColorByScorePercentage,
+  getLabelByScorePercentage,
+  SCORE_BAR_ERRORS,
+} from '../../utils/score-bar';
+import {SubTitleExtraSmall} from '../Text';
+import css from './ScoreBar.module.css';
+export const Direction = Object.freeze({
+  horizontal: 'horizontal',
+  vertical: 'vertical',
+});
+export type ClassNames = $ReadOnly<{
+  container?: string;
+  wrapper?: string;
+  bar?: string;
+  label?: string;
+}>;
+export type ScoreBarDirection = $Values<typeof Direction>;
+export type ScoreBarColorMap = $ReadOnly<Record<string, string>>;
+export type ScoreBarLabelMap = ScoreBarColorMap;
+export type ScoreBarProps = {
+  classNames?: ClassNames;
+  direction?: ScoreBarDirection;
+  colorMap?: ScoreBarColorMap;
+  labelMap?: ScoreBarLabelMap;
+  totalBars?: number;
+  score?: number;
+  withBorder?: boolean;
+};
+const DEFAULT_BARS_COUNT = 5;
+export const DEFAULT_COLOR_MAP: ScoreBarColorMap = {
+  inactive: colorScoreBarInactive,
+  '100': colorScoreBarLevel5,
+  '80': colorScoreBarLevel4,
+  '60': colorScoreBarLevel3,
+  '40': colorScoreBarLevel2,
+  '20': colorScoreBarLevel1,
+};
+export const ScoreBar: React$AbstractComponent<ScoreBarProps, HTMLDivElement> =
+  React.forwardRef<ScoreBarProps, HTMLDivElement>(
+    (
+      {
+        score = 0,
+        colorMap = DEFAULT_COLOR_MAP,
+        totalBars = DEFAULT_BARS_COUNT,
+        direction = 'vertical',
+        classNames,
+        withBorder = false,
+        labelMap,
+      }: ScoreBarProps,
+      ref,
+    ): React.ReactNode => {
+      invariant(
+        totalBars > 0,
+        JSON.stringify(SCORE_BAR_ERRORS.INVALID_BAR_COUNT),
+      );
+      const activeLabel = getLabelByScorePercentage(score, totalBars, labelMap);
+      return (
+        <div
+          ref={ref}
+          data-testid="ScoreBar"
+          className={classify(
+            css.scoreBarWrapper,
+            {
+              [css.scoreBarBorder]: withBorder,
+            },
+            classNames?.wrapper,
+          )}
+        >
+          <div
+            className={classify(css.scoreBarContainer, classNames?.container)}
+            style={{
+              '--direction':
+                direction === Direction.horizontal ? 'row-reverse' : 'column',
+              '--height': direction === Direction.horizontal ? size18 : 'unset',
+              '--width': direction === Direction.vertical ? size18 : 'unset',
+            }}
+          >
+            {[...Array(totalBars).keys()].reverse().map((count) => (
+              <div
+                className={classify(css.bar, classNames?.bar)}
+                style={{
+                  '--background-color': getColorByScorePercentage(
+                    totalBars,
+                    clamp(score, 0, totalBars),
+                    count,
+                    colorMap,
+                  ),
+                  '--height':
+                    direction === Direction.horizontal ? size18 : size2,
+                  '--width': direction === Direction.vertical ? size18 : size2,
+                }}
+                key={count}
+              />
+            ))}
+          </div>
+
+          {activeLabel && (
+            <SubTitleExtraSmall
+              className={classify(css.scoreBarLabel, classNames?.label)}
+            >
+              {activeLabel}
+            </SubTitleExtraSmall>
+          )}
+        </div>
+      );
+    },
+  );

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

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

package/lib/components/SearchInput/SearchInput.d.ts

@@ -0,0 +1,79 @@
+import {$ReadOnly} from 'utility-types';
+import * as React from 'react';
+import classify from '../../utils/classify';
+import {CircularLoader} from '../CircularLoader';
+import type {InputProps} from '../Input';
+import {Input} from '../Input';
+import css from './SearchInput.module.css';
+type ClassNames = $ReadOnly<{
+  wrapper?: string;
+  box?: string;
+  iconLeft?: string;
+}>;
+export type SearchInputProps = InputProps & {
+  classNames?: ClassNames;
+  onClear?: () => void;
+  isLoading?: boolean;
+};
+export const SearchInput: React$AbstractComponent<
+  SearchInputProps,
+  HTMLInputElement
+> = React.forwardRef<SearchInputProps, HTMLInputElement>(
+  (
+    {
+      value,
+      disabled,
+      locked,
+      placeholder = 'Search...',
+      classNames,
+      onClear,
+      isLoading,
+      size,
+      iconLeftName = 'magnifying-glass',
+      ...searchInputProps
+    }: SearchInputProps,
+    ref,
+  ): React.ReactNode => {
+    const handleClearClick = () => {
+      if (value && !(disabled || locked)) {
+        onClear?.();
+      }
+    };
+
+    return (
+      <div className={classify(css.searchInputWrapper, classNames?.wrapper)}>
+        <Input
+          {...searchInputProps}
+          type="text"
+          ref={ref}
+          classNames={{
+            iconRight: value && !(disabled || locked) ? css.clickable : '',
+            iconLeft: value && !disabled ? css.primaryText : '',
+            box: classNames?.box,
+          }}
+          placeholder={placeholder}
+          value={value}
+          disabled={disabled}
+          locked={locked}
+          iconLeftName={iconLeftName}
+          size={size}
+          iconRightName={value && !(disabled || locked) ? 'xmark' : 'fw'}
+          onIconRightClick={handleClearClick}
+        />
+        {isLoading && (
+          <div
+            className={classify(css.loaderContainer, {
+              [css.small]: size === 'small',
+            })}
+          >
+            <CircularLoader
+              colorToken="colorFillPrimary"
+              className={css.loader}
+              size="small"
+            />
+          </div>
+        )}
+      </div>
+    );
+  },
+);

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

@@ -0,0 +1,2 @@
+export type {SearchInputProps} from './SearchInput';
+export {SearchInput} from './SearchInput';

package/lib/components/Separator/Separator.d.ts

@@ -0,0 +1,51 @@
+import {$ReadOnly, $Values} from 'utility-types';
+import * as React from 'react';
+import {size2} from '../../styles/variables/_size';
+import classify from '../../utils/classify';
+import css from './Separator.module.css';
+type ClassNames = $ReadOnly<{
+  wrapper?: string;
+}>;
+export const ORIENTATION = Object.freeze({
+  horizontal: 'horizontal',
+  vertical: 'vertical',
+});
+export type OrientationType = $Values<typeof ORIENTATION>;
+export type SeparatorProps = {
+  classNames?: ClassNames;
+  orientation?: OrientationType;
+  width?: string;
+  height?: string;
+};
+export const Separator: React$AbstractComponent<
+  SeparatorProps,
+  HTMLDivElement
+> = React.forwardRef<SeparatorProps, HTMLDivElement>(
+  (
+    {
+      classNames,
+      orientation = ORIENTATION.vertical,
+      width,
+      height,
+    }: SeparatorProps,
+    ref,
+  ) => {
+    // Dynamically compute width and height based on orientation if not provided
+    const resolvedWidth =
+      width || (orientation === ORIENTATION.vertical ? size2 : 'auto');
+    const resolvedHeight =
+      height || (orientation === ORIENTATION.horizontal ? size2 : 'auto');
+    const style = {
+      '--separator-width': resolvedWidth,
+      '--separator-height': resolvedHeight,
+    };
+    return (
+      <div
+        ref={ref}
+        data-testid="Separator"
+        style={style}
+        className={classify(css.wrapper, classNames?.wrapper)}
+      />
+    );
+  },
+);

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

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