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

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

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

package/lib/components/Panel/Panel.js.flow

@@ -1,181 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-
-import useMountTransition from '../../hooks/useMountTransition';
-import {
-  motionDurationNormal,
-  motionDurationSlow,
-} from '../../styles/variables/_motion';
-import {
-  spaceFluid,
-  spaceNegFluid,
-  spaceNone,
-} from '../../styles/variables/_space';
-import classify from '../../utils/classify';
-import {Button} from '../Button';
-import type {ModalProps} from '../Modal';
-import {Modal} from '../Modal';
-import {Truncate} from '../Truncate';
-
-import css from './Panel.module.css';
-
-
-export type PanelSize = 'small' | 'medium' | 'large';
-export type PanelAnchor = 'left' | 'right';
-
-export type PanelHeaderProps = {
-  children?: React.Node,
-  hideCloseBtn?: boolean,
-  onCloseButtonClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
-  className?: string,
-  size?: 'medium' | 'small',
-};
-
-type FooterClassNames = $ReadOnly<{
-  wrapper?: string,
-  actions?: string,
-}>;
-
-export type PanelFooterProps = {
-  children?: React.Node,
-  classNames?: FooterClassNames,
-};
-
-export type PanelBodyProps = {
-  children?: React.Node,
-  className?: string,
-};
-
-export type PanelProps = {
-  ...ModalProps,
-  allowBackgroundInteraction?: boolean,
-  size?: PanelSize,
-  anchor?: PanelAnchor,
-};
-
-const getDefaultPanelAnimation = (anchor: PanelAnchor) => ({
-  // Configure both open and close durations:
-  duration: {
-    open: parseInt(motionDurationSlow),
-    close: parseInt(motionDurationNormal),
-  },
-  initial: {
-    transform: `translateX(${anchor === 'right' ? spaceFluid : spaceNegFluid})`,
-  },
-  open: {
-    transform: `translateX(${spaceNone})`,
-  },
-  close: {
-    transform: `translateX(${anchor === 'right' ? spaceFluid : spaceNegFluid})`,
-  },
-});
-
-export const PanelHeader = ({
-  children,
-  hideCloseBtn,
-  onCloseButtonClick,
-  className,
-  size,
-}: PanelHeaderProps): React.Node => (
-  <>
-    {React.Children.count(children) > 0 && (
-      <div className={classify(css.panelHeader, className)}>
-        <div className={css.headerContent}>
-          <Truncate>{children}</Truncate>
-        </div>
-        {!hideCloseBtn && (
-          <Button
-            iconLeftName="xmark"
-            type="ghost"
-            onClick={onCloseButtonClick}
-            ariaLabel="Close Button"
-            size={size}
-          ></Button>
-        )}
-      </div>
-    )}
-  </>
-);
-
-export const PanelBody: React$AbstractComponent<
-  PanelBodyProps,
-  HTMLDivElement,
-> = React.forwardRef<PanelBodyProps, HTMLDivElement>(
-  ({children, className}: PanelBodyProps, ref): React.Node => (
-    <div ref={ref} className={classify(css.panelBody, className)}>
-      {children}
-    </div>
-  ),
-);
-
-export const PanelFooter = ({
-  children,
-  classNames,
-}: PanelFooterProps): React.Node => (
-  <>
-    {React.Children.count(children) > 0 && (
-      <div className={classify(css.panelFooter, classNames?.wrapper)}>
-        <div className={classify(css.panelFooterActions, classNames?.actions)}>
-          {children}
-        </div>
-      </div>
-    )}
-  </>
-);
-
-export const Panel = ({
-  children,
-  isOpen = false,
-  size = 'medium',
-  anchor = 'left',
-  onClose,
-  hideBackdrop = true,
-  classNames,
-  customAnimation,
-  tapOutsideToClose = true,
-  allowBackgroundInteraction,
-  ...restPanelProps
-}: PanelProps): React.Node => {
-  const isTransitioning = useMountTransition(
-    isOpen,
-    parseInt(motionDurationNormal),
-  );
-
-  const defaultPanelAnimation = getDefaultPanelAnimation(anchor);
-
-  return (
-    <Modal
-      isOpen={isOpen}
-      onClose={onClose}
-      hideBackdrop={hideBackdrop}
-      tapOutsideToClose={allowBackgroundInteraction ? false : tapOutsideToClose}
-      allowBackgroundInteraction={allowBackgroundInteraction}
-      {...restPanelProps}
-      classNames={{
-        container: classify(
-          css.panelContainer,
-          {
-            [css.in]: isTransitioning,
-            [css.open]: isOpen,
-          },
-          classNames?.container,
-        ),
-        content: classify(
-          css.panel,
-          css[anchor],
-          {
-            [css.medium]: size === 'medium',
-            [css.small]: size === 'small',
-            [css.large]: size === 'large',
-          },
-          classNames?.content,
-        ),
-        backdrop: classify(classNames?.backdrop),
-      }}
-      customAnimation={customAnimation || defaultPanelAnimation}
-    >
-      {children}
-    </Modal>
-  );
-};

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

@@ -1,10 +0,0 @@
-//@flow strict
-export type {
-  PanelAnchor,
-  PanelBodyProps,
-  PanelFooterProps,
-  PanelHeaderProps,
-  PanelProps,
-  PanelSize,
-} from './Panel';
-export {Panel, PanelBody, PanelFooter, PanelHeader} from './Panel';

package/lib/components/ProgressDonut/ProgressDonut.js.flow

@@ -1,111 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-
-import * as COLORS from '../../styles/variables/_color';
-import classify from '../../utils/classify';
-import {BodyLargeBold} from '../Text';
-
-import css from './ProgressDonut.module.css';
-
-
-const STROKE_WIDTH = 8;
-const MIN_PERCENTAGE = 0;
-const DIVISOR_TWO = 2;
-const MAX_PERCENTAGE = 100;
-const SUCCESS_THRESHOLD = 80;
-const LARGE_DONUT_SIZE = 72;
-const INFO_THRESHOLD = 50;
-const WARNING_THRESHOLD = 30;
-
-type ClassNames = $ReadOnly<{
-  wrapper?: string,
-}>;
-
-export type ProgressDonutProps = {
-  classNames?: ClassNames,
-  color?: $Keys<typeof COLORS>,
-  percentage: number,
-};
-
-const getProgressDonutColor = (percentage: number): string => {
-  if (percentage >= SUCCESS_THRESHOLD) {
-    return COLORS.colorSuccess;
-  } else if (percentage >= INFO_THRESHOLD && percentage < SUCCESS_THRESHOLD) {
-    return COLORS.colorInformation;
-  } else if (percentage >= WARNING_THRESHOLD && percentage < INFO_THRESHOLD) {
-    return COLORS.colorWarning;
-  } else {
-    return COLORS.colorDanger;
-  }
-};
-
-export const ProgressDonut: React$AbstractComponent<
-  ProgressDonutProps,
-  HTMLDivElement,
-> = React.forwardRef<ProgressDonutProps, HTMLDivElement>(
-  ({classNames, percentage = 0, color = ''}: ProgressDonutProps, ref) => {
-    const donutPercentage = React.useMemo(
-      () => Math.min(Math.max(percentage, MIN_PERCENTAGE), MAX_PERCENTAGE),
-      [percentage],
-    );
-    const donutColor = React.useMemo(
-      () => getProgressDonutColor(donutPercentage),
-      [donutPercentage],
-    );
-
-    const radius = React.useMemo(
-      () => (LARGE_DONUT_SIZE - STROKE_WIDTH) / DIVISOR_TWO,
-      [LARGE_DONUT_SIZE],
-    );
-    const circumference = React.useMemo(
-      () => DIVISOR_TWO * Math.PI * radius,
-      [radius],
-    );
-    const offset = React.useMemo(
-      () => circumference - (donutPercentage / MAX_PERCENTAGE) * circumference,
-      [circumference, donutPercentage],
-    );
-
-    return (
-      <div
-        ref={ref}
-        data-testid="ProgressDonut"
-        className={classify(css.wrapper, classNames?.wrapper)}
-      >
-        <div className={css.donutChart}>
-          <svg
-            width={LARGE_DONUT_SIZE}
-            height={LARGE_DONUT_SIZE}
-            viewBox={`0 0 ${LARGE_DONUT_SIZE} ${LARGE_DONUT_SIZE}`}
-            className={css.donutChartSvg}
-          >
-            <circle
-              className={css.donutChartBackground}
-              cx={LARGE_DONUT_SIZE / DIVISOR_TWO}
-              cy={LARGE_DONUT_SIZE / DIVISOR_TWO}
-              r={radius}
-              strokeWidth={STROKE_WIDTH}
-            />
-            <circle
-              className={css.donutChartForeground}
-              cx={LARGE_DONUT_SIZE / DIVISOR_TWO}
-              cy={LARGE_DONUT_SIZE / DIVISOR_TWO}
-              r={radius}
-              strokeWidth={STROKE_WIDTH}
-              strokeDasharray={circumference}
-              strokeDashoffset={
-                donutPercentage === MIN_PERCENTAGE ? circumference : offset
-              }
-              stroke={COLORS[color] || donutColor}
-              strokeLinecap="round"
-            />
-          </svg>
-          <BodyLargeBold className={css.donutChartPercentage}>
-            {`${donutPercentage}%`}
-          </BodyLargeBold>
-        </div>
-      </div>
-    );
-  },
-);

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

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

package/lib/components/PromptChip/PromptChip.js.flow

@@ -1,166 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-
-import type {ColorTypes} from '../../types/typography';
-import {TEXT_COLORS} from '../../types/typography';
-import {classify} from '../../utils/classify';
-import {ConditionalWrapper} from '../ConditionalWrapper';
-import type {IconType} from '../Icon';
-import {CloseIcon, Icon, ICON_SIZE, ICON_TYPE} from '../Icon';
-import type {BaseTooltipProps} from '../Tooltip';
-import {Tooltip} from '../Tooltip';
-
-import css from './PromptChip.module.css';
-
-
-type ClassNames = $ReadOnly<{
-  icon?: string,
-  wrapper?: string,
-  children?: string,
-  container?: string,
-}>;
-
-export const PROMPT_CHIP_TYPE = Object.freeze({
-  primary: 'primary',
-  secondary: 'secondary',
-});
-
-export type PromptChipType = $Values<typeof PROMPT_CHIP_TYPE>;
-export type PromptChipProps = {
-  classNames?: ClassNames,
-  ...
-    | {
-        onDismiss?: ?(SyntheticEvent<HTMLElement>) => mixed,
-        dismissable: true,
-        selfDismiss?: boolean,
-      }
-    | {dismissable?: false},
-  type?: PromptChipType,
-  onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
-  iconName?: string,
-  iconType?: IconType,
-  children?: React.Node,
-  iconColor?: ColorTypes,
-  rightSlot?: React.Node,
-  showInfoIcon?: boolean,
-  infoIconTooltip?: BaseTooltipProps,
-};
-
-export const PromptChip: React$AbstractComponent<
-  PromptChipProps,
-  HTMLDivElement,
-> = React.forwardRef<PromptChipProps, HTMLDivElement>(
-  (props: PromptChipProps, ref): React.Node => {
-    const {
-      type = PROMPT_CHIP_TYPE.primary,
-      onClick,
-      iconType = ICON_TYPE.solid,
-      iconName = 'lightbulb',
-      children,
-      iconColor,
-      rightSlot,
-      onDismiss,
-      classNames,
-      dismissable,
-      selfDismiss,
-      showInfoIcon,
-      infoIconTooltip,
-    } = props;
-    const [dismissed, setDismissed] = React.useState(false);
-    const closeClickHandler = (e) => {
-      e.stopPropagation();
-      onDismiss?.(e);
-      selfDismiss && setDismissed(true);
-    };
-
-    return (
-      <>
-        {!dismissed && (
-          <div
-            ref={ref}
-            data-testid="Prompt-Chip"
-            className={classify(
-              css.promptChipWrapper,
-              {
-                [css.primary]: type === PROMPT_CHIP_TYPE.primary,
-                [css.secondary]: type === PROMPT_CHIP_TYPE.secondary,
-              },
-              classNames?.wrapper,
-            )}
-            onClick={(event) => {
-              onClick?.(event);
-            }}
-            tabIndex={onClick ? 0 : undefined}
-            role="button"
-          >
-            <div
-              className={classify(
-                css.promptChipContainer,
-                {
-                  [css.promptChipContainerHover]: !!onClick,
-                },
-                classNames?.container,
-              )}
-            >
-              <div className={css.leftSection}>
-                <Icon
-                  size={ICON_SIZE.small}
-                  name={iconName}
-                  type={iconType}
-                  color={iconColor}
-                  className={classify(
-                    {
-                      [css.chipIconDefaultColor]: !iconColor,
-                    },
-                    classNames?.icon,
-                  )}
-                />
-                {!!children && (
-                  <div
-                    className={classify(
-                      css.childrenWrapper,
-                      classNames?.children,
-                    )}
-                  >
-                    {children}
-                  </div>
-                )}
-              </div>
-              <div className={css.rightSection}>
-                {rightSlot ? rightSlot : null}
-                {!!showInfoIcon && (
-                  <ConditionalWrapper
-                    condition={
-                      infoIconTooltip &&
-                      typeof infoIconTooltip === 'object' &&
-                      Object.keys(infoIconTooltip).length > 0
-                    }
-                    wrapper={(children) => (
-                      <Tooltip {...infoIconTooltip}>{children}</Tooltip>
-                    )}
-                  >
-                    <Icon
-                      size={ICON_SIZE.small}
-                      name="info-circle"
-                      color={TEXT_COLORS.primary}
-                      className={classNames?.icon}
-                    />
-                  </ConditionalWrapper>
-                )}
-                {!!dismissable && (
-                  <CloseIcon
-                    size={ICON_SIZE.small}
-                    onClick={closeClickHandler}
-                    ariaLabel="Dismiss"
-                    className={css.dismissIcon}
-                  />
-                )}
-              </div>
-            </div>
-          </div>
-        )}
-      </>
-    );
-  },
-);

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

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

package/lib/components/PromptInput/PromptInput.js.flow

@@ -1,194 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-
-import {size200} from '../../styles/variables/_size';
-import classify from '../../utils/classify';
-import {Button, BUTTON_TYPES} from '../Button';
-import type {IconType} from '../Icon';
-import {ICON_TYPE} from '../Icon';
-import {BodySmallBold, FormLabelSmall} from '../Text';
-import {Textarea} from '../Textarea';
-
-import css from './PromptInput.module.css';
-
-
-const CONSTANTS = {
-  DEFAULT_INPUT_PLACEHOLDER: 'Ask me anything',
-  INPUT_NAME: 'prompt-textarea',
-  BUTTON_TEXT: 'Generate',
-  BUTTON_ICON: 'sparkles',
-  BUTTON_ARIA_LABEL: 'Prompt Button',
-  TEXT_AREA_ROWS: 1,
-};
-
-type ClassNames = $ReadOnly<{
-  wrapper?: string,
-  inputBox?: string,
-  textarea?: string,
-  buttonWrapper?: string,
-  buttonIcon?: string,
-  buttonText?: string,
-}>;
-
-export type PromptInputProps = {
-  // textArea Props
-  value?: string,
-  onInputChange?: (
-    evt: SyntheticInputEvent<HTMLInputElement>,
-    isEnter?: boolean,
-  ) => mixed,
-  onInputFocus?: (e: SyntheticInputEvent<HTMLInputElement>) => mixed,
-  onInputBlur?: (e: SyntheticInputEvent<HTMLInputElement>) => mixed,
-  onInputKeyDown?: (e: SyntheticKeyboardEvent<HTMLInputElement>) => mixed,
-  inputName?: string,
-  inputDisabled?: boolean,
-  inputPlaceholder?: string,
-  inputLocked?: boolean,
-  inputError?: boolean,
-  inputErrorText?: string,
-
-  // Common props
-  helperContent?: React.Node,
-  textCountLimit?: number,
-  classNames?: ClassNames,
-  withPadding?: boolean,
-
-  // Button Props
-  buttonText?: string,
-  buttonDisabled?: boolean,
-  onButtonClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
-  buttonAriaLabel?: string,
-  isButtonLoading?: boolean,
-  buttonIconLeftName?: string,
-  buttonIconLeftType?: IconType,
-};
-
-export const PromptInput: React$AbstractComponent<
-  PromptInputProps,
-  HTMLDivElement,
-> = React.forwardRef<PromptInputProps, HTMLDivElement>(
-  (
-    {
-      value,
-      onInputChange,
-      onInputFocus,
-      onInputBlur,
-      onInputKeyDown,
-      inputName = CONSTANTS.INPUT_NAME,
-      inputDisabled,
-      inputPlaceholder = CONSTANTS.DEFAULT_INPUT_PLACEHOLDER,
-      inputLocked,
-      inputError,
-      inputErrorText,
-
-      helperContent,
-      textCountLimit,
-      classNames,
-      withPadding = true,
-
-      buttonText = CONSTANTS.BUTTON_TEXT,
-      buttonDisabled,
-      onButtonClick,
-      buttonAriaLabel = CONSTANTS.BUTTON_ARIA_LABEL,
-      isButtonLoading,
-      buttonIconLeftName = CONSTANTS.BUTTON_ICON,
-      buttonIconLeftType = ICON_TYPE.solid,
-    }: PromptInputProps,
-    ref,
-  ) => {
-    const textareaRef = React.useRef(null);
-
-    const handleInput = () => {
-      const textarea = textareaRef.current;
-      if (textarea) {
-        textarea.style.height = 'auto'; // Reset height to auto to shrink
-        if (textarea.scrollHeight > parseInt(size200)) {
-          textarea.style.height = size200; // Limit height to size200
-          textarea.style.overflowY = 'auto';
-        } else {
-          textarea.style.height = `${textarea.scrollHeight}px`; // Adjust to content height
-          textarea.style.overflowY = 'hidden';
-        }
-      }
-    };
-
-    // Reset height on value change
-    React.useEffect(() => {
-      handleInput();
-    }, [value]);
-
-    const textCountError = React.useMemo(() => {
-      const charCount = value ? value.length : 0;
-      return textCountLimit != null && charCount > textCountLimit;
-    }, [value, textCountLimit]);
-
-    return (
-      <div
-        ref={ref}
-        data-testid="PromptInput"
-        className={classify(
-          css.wrapper,
-          {[css.styledPromptContainer]: withPadding},
-          classNames?.wrapper,
-        )}
-      >
-        <div className={css.inputActionWrapper}>
-          <Textarea
-            classNames={{
-              box: classify(css.promptInputBox, classNames?.inputBox),
-              textarea: classify(css.textarea, classNames?.textarea),
-            }}
-            ref={textareaRef}
-            value={value}
-            onChange={onInputChange}
-            onFocus={onInputFocus}
-            onBlur={onInputBlur}
-            onKeyDown={onInputKeyDown}
-            name={inputName}
-            disabled={inputDisabled}
-            placeholder={inputPlaceholder}
-            locked={inputLocked}
-            error={inputError || textCountError}
-            errorText={inputErrorText}
-            rows={CONSTANTS.TEXT_AREA_ROWS}
-          ></Textarea>
-          <Button
-            iconLeftName={buttonIconLeftName}
-            iconLeftType={buttonIconLeftType}
-            onClick={onButtonClick}
-            type={BUTTON_TYPES.gradient}
-            disabled={buttonDisabled}
-            ariaLabel={buttonAriaLabel}
-            isLoading={isButtonLoading}
-            classNames={{
-              wrapper: classify(css.actionButton, classNames?.buttonWrapper),
-              icon: classNames?.buttonIcon,
-              text: classNames?.buttonText,
-            }}
-          >
-            {buttonText}
-          </Button>
-        </div>
-        {(!!helperContent || !!textCountLimit) && (
-          <div className={css.secondaryRow}>
-            {typeof helperContent === 'string' ? (
-              <BodySmallBold color={inputDisabled ? 'disabled' : 'secondary'}>
-                {helperContent}
-              </BodySmallBold>
-            ) : (
-              helperContent
-            )}
-            <FormLabelSmall
-              color={inputError || textCountError ? 'danger' : 'secondary'}
-              className={css.textCounter}
-            >
-              {!!textCountLimit &&
-                ((value && value.length) || 0) + '/' + textCountLimit}
-            </FormLabelSmall>
-          </div>
-        )}
-      </div>
-    );
-  },
-);

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

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