@spaced-out/ui-design-system 0.4.13-beta.1 → 0.4.14

package/lib/components/RangeSlider/RangeSlider.js.flow

@@ -0,0 +1,202 @@
+// @flow strict
+
+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: 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: 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.js.flow

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

package/lib/components/Rating/Rating.js

@@ -58,9 +58,7 @@ const Rating = exports.Rating = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     return /*#__PURE__*/React.createElement(_ConditionalWrapper.ConditionalWrapper, {
       key: iconCount,
       condition: !readOnly,
-      wrapper: children => /*#__PURE__*/React.createElement(_Button.UnstyledButton
-      // @ts-ignore - TS2769 - No overload matches this call. | TS7006 - Parameter 'e' implicitly has an 'any' type.
-      , {
+      wrapper: children => /*#__PURE__*/React.createElement(_Button.UnstyledButton, {
         onKeyDown: e => {
           if (e.key === 'Enter') {
             onChange?.(start + iconCount, e);
@@ -72,9 +70,7 @@ const Rating = exports.Rating = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         onMouseEnter: () => !quiet && setHoverIcon(iconCount),
         onMouseLeave: () => !quiet && setHoverIcon(-1)
       }, children)
-    }, /*#__PURE__*/React.createElement(_Icon.Icon
-    // @ts-ignore - TS2769 - No overload matches this call.
-    , {
+    }, /*#__PURE__*/React.createElement(_Icon.Icon, {
       size: size,
       name: iconName,
       type: iconType,
@@ -83,7 +79,7 @@ const Rating = exports.Rating = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }));
   })), !hideLabel &&
   /*#__PURE__*/
-  // @ts-ignore - TS2769 - No overload matches this call.
+  // $FlowFixMe[incompatible-type]
   React.createElement(_Chip.Chip, {
     size: size,
     semantic: chipSemantic

package/lib/components/Rating/Rating.js.flow

@@ -0,0 +1,134 @@
+// @flow strict
+
+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, ?SyntheticEvent<HTMLElement>) => mixed,
+  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.Node => {
+      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.js.flow

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

package/lib/components/ScoreBar/ScoreBar.js

@@ -7,7 +7,7 @@ exports.ScoreBar = exports.Direction = exports.DEFAULT_COLOR_MAP = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _invariant = _interopRequireDefault(require("invariant"));
 var _clamp = _interopRequireDefault(require("lodash/clamp"));
-var _color = require("../../styles/variables/_color");
+var _color = require("../../styles/variables/_color.js");
 var _size = require("../../styles/variables/_size");
 var _classify = require("../../utils/classify");
 var _scoreBar = require("../../utils/score-bar");

package/lib/components/ScoreBar/ScoreBar.js.flow

@@ -0,0 +1,135 @@
+// @flow strict
+
+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.js';
+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<{
+  [key: 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.Node => {
+      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.js.flow

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

package/lib/components/SearchInput/SearchInput.js.flow

@@ -0,0 +1,88 @@
+// @flow strict
+
+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.Node => {
+    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.js.flow

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

package/lib/components/Separator/Separator.js.flow

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

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