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

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

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

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

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

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

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

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

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

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

package/lib/components/Shimmer/Shimmer.js.flow

@@ -1,141 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-
-import {
-  borderRadiusCircle,
-  borderRadiusMedium,
-  borderRadiusNone,
-  borderRadiusXSmall,
-} from '../../styles/variables/_border';
-import {size40, sizeFluid} from '../../styles/variables/_size';
-import classify from '../../utils/classify';
-import {appendPx} from '../../utils/string';
-
-import css from './Shimmer.module.css';
-
-
-type ClassNames = $ReadOnly<{wrapper?: string}>;
-
-export const SHIMMER_TYPES = Object.freeze({
-  text: 'text',
-  rounded: 'rounded',
-  circular: 'circular',
-  rectangular: 'rectangular',
-});
-
-export const SHIMMER_TYPE_TO_BORDER_RADIUS_MAP = Object.freeze({
-  text: borderRadiusXSmall,
-  rounded: borderRadiusMedium,
-  circular: borderRadiusCircle,
-  rectangular: borderRadiusNone,
-});
-
-export type ShimmerType = $Values<typeof SHIMMER_TYPES>;
-
-export type ShimmerProps = {
-  classNames?: ClassNames,
-  show?: boolean,
-  type?: ShimmerType,
-  width?: number | string,
-  height?: number | string,
-  borderRadius?: number | string,
-  children?: React.Node,
-};
-
-export type ShimmerWrapperProps = {
-  children?: React.Node,
-};
-
-/**
- * Note(Nishant): ShimmerWrapper is a wrapper component for Shimmer component. This should only be used for Text based Shimmers
- * This solves a very annoying problem with out text components where the display prop is set to flex.
- * Genesis assumes that every element is flexible for simplicity and for text text shimmers to work in use cases
- * where text wraps across multiple lines, we need to wrap the shimmer in a span element.
- * to avoid the misuse where consumers use there own / other block level components, we have this wrapper.
- * This would ensure the layout remains same even when you toggle the shimmer to show your actual content
- * @param {React.Node} children - The children to be rendered
- */
-export const ShimmerWrapper = ({
-  children,
-}: ShimmerWrapperProps): React$Element<'span'> => <span>{children}</span>;
-
-export const Shimmer: React$AbstractComponent<ShimmerProps, HTMLSpanElement> =
-  React.forwardRef<ShimmerProps, HTMLSpanElement>(
-    (
-      {
-        classNames,
-        show = true,
-        type = SHIMMER_TYPES.text,
-        children,
-        width = size40,
-        height = sizeFluid,
-        borderRadius,
-      }: ShimmerProps,
-      ref,
-    ) => {
-      if (!show) {
-        return <>{children}</>;
-      }
-
-      const borderRadiusValue =
-        borderRadius ?? SHIMMER_TYPE_TO_BORDER_RADIUS_MAP[type];
-
-      return (
-        <span
-          ref={ref}
-          data-testid="Shimmer"
-          className={classify(css.wrapper, css[type], classNames?.wrapper)}
-          style={{
-            '--width': appendPx(width),
-            '--height': appendPx(height),
-            '--border-radius': appendPx(borderRadiusValue),
-          }}
-        ></span>
-      );
-    },
-  );
-
-type KPIShimmerClassNames = $ReadOnly<{
-  wrapper?: string,
-  icon?: string,
-  text?: string,
-}>;
-
-export type KPIShimmerProps = {
-  textWidth?: number | string,
-  hasTopContent?: boolean,
-  hasMiddleContent?: boolean,
-  hasBottomContent?: boolean,
-  hasIcon?: boolean,
-  classNames?: KPIShimmerClassNames,
-};
-
-export const KPIShimmer = ({
-  textWidth = 150,
-  hasBottomContent = true,
-  hasIcon = true,
-  hasTopContent = true,
-  hasMiddleContent = true,
-  classNames,
-}: KPIShimmerProps): React.Node => (
-  <div className={classify(css.kpiBox, classNames?.wrapper)}>
-    {hasIcon && (
-      <div className={classify(css.section, css.iconSection, classNames?.icon)}>
-        <Shimmer type="rounded" width={60} height={60}></Shimmer>
-      </div>
-    )}
-
-    <div className={classify(css.section, classNames?.text)}>
-      {hasTopContent && (
-        <Shimmer type="text" width={textWidth} height={15}></Shimmer>
-      )}
-      {hasMiddleContent && (
-        <Shimmer type="text" width={textWidth} height={25}></Shimmer>
-      )}
-      {hasBottomContent && (
-        <Shimmer type="text" width={textWidth} height={15}></Shimmer>
-      )}
-    </div>
-  </div>
-);

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

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