@spaced-out/ui-design-system 0.3.45 → 0.3.46

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

@@ -1,30 +0,0 @@
-export {TEXT_COLORS} from '../../types/typography';
-export type {TextProps} from './Text';
-export {
-  BodyLarge,
-  BodyLargeBold,
-  BodyMedium,
-  BodyMediumBold,
-  BodySmall,
-  BodySmallBold,
-  ButtonTextExtraSmall,
-  ButtonTextExtraSmallUnderline,
-  ButtonTextMedium,
-  ButtonTextMediumUnderline,
-  ButtonTextSmall,
-  ButtonTextSmallUnderline,
-  FormInputMedium,
-  FormInputSmall,
-  FormLabelMedium,
-  FormLabelSmall,
-  JumboLarge,
-  JumboMedium,
-  JumboSmall,
-  MenuTextMedium,
-  MenuTextSmall,
-  SubTitleExtraSmall,
-  SubTitleLarge,
-  SubTitleMedium,
-  SubTitleSmall,
-  TitleMedium,
-} from './Text';

package/lib/components/TextTile/TextTile.d.ts

@@ -1,40 +0,0 @@
-import {$ReadOnly} from 'utility-types';
-import * as React from 'react';
-import classify from '../../utils/classify';
-import {Icon, ICON_SIZE, ICON_TYPE} from '../Icon';
-import {BodyLarge, JumboMedium} from '../Text';
-import css from './TextTile.module.css';
-type ClassNames = $ReadOnly<{
-  wrapper?: string;
-  title?: string;
-}>;
-export type TextTileProps = {
-  header?: string;
-  iconName?: string;
-  classNames?: ClassNames;
-  description?: string;
-};
-export const TextTile: React$AbstractComponent<TextTileProps, HTMLDivElement> =
-  React.forwardRef<TextTileProps, HTMLDivElement>(
-    (
-      {header, iconName = 'sparkles', classNames, description}: TextTileProps,
-      ref,
-    ) => (
-      <div
-        ref={ref}
-        data-testid="TextTile"
-        className={classify(css.textTileWrapper, classNames?.wrapper)}
-      >
-        <div className={classify(css.textTileTitle, classNames?.title)}>
-          <Icon
-            size={ICON_SIZE.large}
-            name={iconName}
-            type={ICON_TYPE.solid}
-            className={css.sparkles}
-          />
-          <JumboMedium>{header}</JumboMedium>
-        </div>
-        <BodyLarge>{description}</BodyLarge>
-      </div>
-    ),
-  );

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

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

package/lib/components/Textarea/Textarea.d.ts

@@ -1,132 +0,0 @@
-import {$ReadOnly} from 'utility-types';
-import * as React from 'react';
-import {classify} from '../../utils/classify';
-import {BodySmall, FormLabelSmall} from '../Text';
-import css from './Textarea.module.css';
-type ClassNames = $ReadOnly<{
-  box?: string;
-  textarea?: string;
-}>;
-export type TextareaProps = {
-  value?: string;
-  onChange?: (
-    evt: React.SyntheticEvent<HTMLInputElement>,
-    isEnter?: boolean,
-  ) => unknown;
-  onFocus?: (e: React.SyntheticEvent<HTMLInputElement>) => unknown;
-  onBlur?: (e: React.SyntheticEvent<HTMLInputElement>) => unknown;
-  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => unknown;
-  name?: string;
-  disabled?: boolean;
-  placeholder?: string;
-  locked?: boolean;
-  error?: boolean;
-  errorText?: string;
-  label?: string | React.ReactNode;
-  helperText?: string | React.ReactNode;
-  classNames?: ClassNames;
-  size?: 'medium' | 'small';
-  required?: boolean;
-  textCountLimit?: number;
-};
-
-const Textarea_ = (props: TextareaProps, ref): React.ReactNode => {
-  const {
-    value,
-    onChange,
-    onFocus,
-    onBlur,
-    name,
-    disabled,
-    placeholder,
-    error,
-    locked,
-    errorText,
-    label,
-    helperText,
-    classNames,
-    size = 'medium',
-    required,
-    textCountLimit,
-    ...textareaProps
-  } = props;
-  const [textCountError, setTextCountError] = React.useState(false);
-  React.useEffect(() => {
-    if (textCountLimit) {
-      if (value && value.length > textCountLimit) {
-        setTextCountError(true);
-      } else {
-        setTextCountError(false);
-      }
-    }
-  }, [value]);
-  const controlledTextareaFilled = value !== '';
-  return (
-    <div
-      className={classify(css.wrapper, {
-        [css.filled]: controlledTextareaFilled ?? false,
-        [css.withError]: (error || textCountError) ?? false,
-      })}
-    >
-      {Boolean(label) && (
-        <div className={css.info}>
-          <div className={css.infoContent}>
-            <FormLabelSmall color="secondary">{label ?? ''}</FormLabelSmall>
-            &nbsp;
-            {required && <FormLabelSmall color="danger">{'*'}</FormLabelSmall>}
-          </div>
-          <FormLabelSmall
-            color={error || textCountError ? 'danger' : 'secondary'}
-          >
-            {!!textCountLimit &&
-              ((value && value.length) || 0) + '/' + textCountLimit}
-          </FormLabelSmall>
-        </div>
-      )}
-      <div
-        className={classify(
-          css.box,
-          {
-            [css.inputDisabled]: disabled ?? false,
-            [css.medium]: size === 'medium',
-            [css.small]: size === 'small',
-            [css.locked]: locked,
-          },
-          classNames?.box,
-        )}
-      >
-        <textarea
-          {...textareaProps}
-          disabled={locked || disabled}
-          name={name}
-          ref={ref}
-          placeholder={placeholder}
-          value={value}
-          onChange={onChange}
-          onFocus={onFocus}
-          onBlur={onBlur}
-          className={classNames?.textarea}
-        ></textarea>
-      </div>
-      {(Boolean(helperText) || error) && (
-        <div className={css.info}>
-          <BodySmall
-            color={
-              error && errorText
-                ? 'danger'
-                : disabled
-                ? 'disabled'
-                : 'secondary'
-            }
-          >
-            {error && errorText ? errorText : helperText ?? ''}
-          </BodySmall>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export const Textarea = React.forwardRef<TextareaProps, HTMLTextAreaElement>(
-  Textarea_,
-) as React$AbstractComponent<TextareaProps, HTMLTextAreaElement>;

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

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

package/lib/components/Timeline/Timeline.d.ts

@@ -1,40 +0,0 @@
-import {$ReadOnly, $Values} from 'utility-types';
-import * as React from 'react';
-import {classify} from '../../utils/classify';
-import css from './Timeline.module.css';
-export const ORIENTATION = Object.freeze({
-  left: 'left',
-  right: 'right',
-});
-type ClassNames = $ReadOnly<{
-  wrapper?: string;
-}>;
-export type Orientation = $Values<typeof ORIENTATION>;
-export type TimelineProps = {
-  children: React.ReactNode;
-  classNames?: ClassNames;
-  orientation?: Orientation;
-};
-
-const Timeline_ = (
-  {classNames, orientation = ORIENTATION.left, children}: TimelineProps,
-  ref,
-): React.ReactNode => {
-  const childrenArray = React.Children.toArray(children).filter(Boolean);
-  const timelineItems = childrenArray.map((timelineItem) =>
-    React.cloneElement(timelineItem, {...timelineItem.props, orientation}),
-  );
-  return (
-    <div
-      ref={ref}
-      className={classify(css.timelineWrapper, classNames?.wrapper)}
-      data-testid="Timeline"
-    >
-      {timelineItems}
-    </div>
-  );
-};
-
-export const Timeline = React.forwardRef<TimelineProps, HTMLDivElement>(
-  Timeline_,
-) as React$AbstractComponent<TimelineProps, HTMLDivElement>;

package/lib/components/Timeline/TimelineItem/TimelineItem.d.ts

@@ -1,121 +0,0 @@
-import {$ReadOnly} from 'utility-types';
-import * as React from 'react';
-import type {ColorTypes} from '../../../types/typography';
-import {TEXT_COLORS} from '../../../types/typography';
-import {classify} from '../../../utils/classify';
-import {Card, PADDING_SIZES} from '../../Card';
-import {ConditionalWrapper} from '../../ConditionalWrapper';
-import type {IconType} from '../../Icon';
-import {Icon, ICON_SIZE, ICON_TYPE} from '../../Icon';
-import type {Orientation} from '../Timeline';
-import {ORIENTATION} from '../Timeline';
-import css from '../Timeline.module.css';
-type ClassNames = $ReadOnly<{
-  card?: string;
-  icon?: string;
-  title?: string;
-  wrapper?: string;
-  description?: string;
-}>;
-export type TimelineItemProps = {
-  id?: string;
-  title?: React.ReactNode;
-  iconName: string;
-  children: React.ReactNode;
-  iconType?: IconType;
-  iconColor?: ColorTypes;
-  classNames?: ClassNames;
-  description?: React.ReactNode;
-  orientation?: Orientation;
-  parentComponent?: React.ReactNode;
-  enableCardWrapper?: boolean;
-};
-
-const TimelineItem_ = (
-  {
-    id,
-    title,
-    iconName,
-    iconType = ICON_TYPE.solid,
-    children,
-    iconColor = TEXT_COLORS.information,
-    classNames,
-    description,
-    orientation = ORIENTATION.left,
-    parentComponent,
-    enableCardWrapper = true,
-  }: TimelineItemProps,
-  ref,
-): React.ReactNode => (
-  <div
-    id={id}
-    key={id}
-    data-testid="Timeline-item"
-    className={classify(css.timelineItemWrapper, classNames?.wrapper)}
-    style={{
-      '--align': orientation === 'left' ? 'flex-start' : 'flex-end',
-    }}
-    ref={ref}
-  >
-    {parentComponent}
-    <div
-      style={{
-        '--direction': orientation === 'left' ? 'row' : 'row-reverse',
-      }}
-      className={css.timelineItemContent}
-    >
-      <div className={css.timelineItemIconWrapper}>
-        <Icon
-          name={iconName}
-          type={iconType}
-          size={ICON_SIZE.small}
-          color={iconColor}
-          className={classify(css.timelineItemIcon, classNames?.icon)}
-        />
-        <div className={css.timelineItemBorder}>
-          <div className={css.border} />
-        </div>
-      </div>
-      <div className={css.timelineItemEventDetails}>
-        <div className={css.timelineItemInfo}>
-          <div className={classify(css.timelineItemTitle, classNames?.title)}>
-            {title}
-          </div>
-          {description ? (
-            <div
-              className={classify(
-                css.timelineItemDescription,
-                classNames?.description,
-              )}
-            >
-              {description}
-            </div>
-          ) : null}
-        </div>
-        <ConditionalWrapper
-          condition={enableCardWrapper}
-          wrapper={(children) => (
-            <Card
-              paddingTop={PADDING_SIZES.small}
-              paddingBottom={PADDING_SIZES.small}
-              classNames={{
-                wrapper: classify(
-                  css.timelineItemCardWrapper,
-                  classNames?.card,
-                ),
-              }}
-            >
-              {children}
-            </Card>
-          )}
-        >
-          {children}
-        </ConditionalWrapper>
-      </div>
-    </div>
-  </div>
-);
-
-export const TimelineItem = React.forwardRef<TimelineItemProps, HTMLDivElement>(
-  TimelineItem_,
-) as React$AbstractComponent<TimelineItemProps, HTMLDivElement>;

package/lib/components/Timeline/TimelineItem/index.d.ts

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

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

@@ -1,2 +0,0 @@
-export * from './Timeline';
-export * from './TimelineItem';

package/lib/components/Toast/Toast.d.ts

@@ -1,248 +0,0 @@
-import {$ReadOnly, $Values} from 'utility-types';
-import * as React from 'react';
-import {
-  // $FlowFixMe[untyped-import]
-  FloatingFocusManager, // $FlowFixMe[untyped-import]
-  useFloating,
-} from '@floating-ui/react';
-import classify from '../../utils/classify';
-import {CloseIcon, Icon} from '../Icon';
-import {SubTitleExtraSmall, TEXT_COLORS} from '../Text';
-import typography from '../../styles/typography.module.css';
-import css from './Toast.module.css';
-type ClassNames = $ReadOnly<{
-  wrapper?: string;
-  time?: string;
-}>;
-export const TOAST_SEMANTIC = Object.freeze({
-  success: 'success',
-  information: 'information',
-  warning: 'warning',
-  danger: 'danger',
-  primary: 'primary',
-});
-export type ToastSemanticType = $Values<typeof TOAST_SEMANTIC>;
-export type ToastProps = {
-  classNames?: ClassNames;
-  children?: React.ReactNode;
-  time?: string;
-  semantic?: ToastSemanticType;
-  onClose?: () => void;
-  initialFocus?: number;
-  customIcon?: React.ReactNode;
-  hideCloseIcon?: boolean;
-};
-
-const ToastIcon = ({semantic}: {semantic: ToastSemanticType}) => {
-  switch (semantic) {
-    case 'success':
-      return (
-        <Icon
-          name="circle-check"
-          size="medium"
-          color={TEXT_COLORS.success}
-          type="solid"
-        />
-      );
-
-    case TOAST_SEMANTIC.information:
-      return (
-        <Icon
-          name="circle-info"
-          size="medium"
-          color={TEXT_COLORS.information}
-          type="solid"
-        />
-      );
-
-    case TOAST_SEMANTIC.warning:
-      return (
-        <Icon
-          name="circle-exclamation"
-          size="medium"
-          color={TEXT_COLORS.warning}
-          type="solid"
-        />
-      );
-
-    case TOAST_SEMANTIC.danger:
-      return (
-        <Icon
-          name="shield-exclamation"
-          size="medium"
-          color={TEXT_COLORS.danger}
-          type="solid"
-        />
-      );
-
-    default:
-      return (
-        <Icon
-          color={TEXT_COLORS.neutral}
-          name="face-smile"
-          size="medium"
-          type="solid"
-        />
-      );
-  }
-};
-
-export type ToastTitleProps = {
-  children?: React.ReactNode;
-  className?: string;
-  semantic?: ToastSemanticType;
-};
-export const ToastTitle: React$AbstractComponent<
-  ToastTitleProps,
-  HTMLDivElement
-> = React.forwardRef<ToastTitleProps, HTMLDivElement>(
-  (
-    {children, semantic = '', className, ...props}: ToastTitleProps,
-    ref,
-  ): React.ReactNode => (
-    <div
-      className={classify(css.toastTitle, typography[semantic], className)}
-      {...props}
-      ref={ref}
-    >
-      {children}
-    </div>
-  ),
-);
-ToastTitle.displayName = 'ToastTitle';
-export type ToastBodyProps = {
-  children?: React.ReactNode;
-  className?: string;
-};
-export const ToastBody: React$AbstractComponent<
-  ToastBodyProps,
-  HTMLDivElement
-> = React.forwardRef<ToastBodyProps, HTMLDivElement>(
-  ({children, className, ...props}: ToastBodyProps, ref): React.ReactNode => (
-    <div className={classify(css.toastBody, className)} {...props} ref={ref}>
-      {children}
-    </div>
-  ),
-);
-ToastBody.displayName = 'ToastBody';
-export type ToastFooterProps = {
-  children?: React.ReactNode;
-  onClose?: () => void;
-};
-export const ToastFooter = ({
-  children,
-  onClose,
-}: ToastFooterProps): React.ReactNode => {
-  const arrayChildren = React.Children.toArray(children);
-  const footerActions = React.Children.map(children, (child, index) => {
-    const isLast = index === arrayChildren.length - 1;
-
-    if (React.isValidElement(child)) {
-      const {onClick} = child.props;
-
-      const buttonClickHandler = (e) => {
-        onClose && onClose();
-        onClick && onClick(e);
-      };
-
-      if (child?.type?.displayName === 'Button' && isLast) {
-        return React.cloneElement(child, {
-          size: 'small',
-          type: 'primary',
-          ...child.props,
-          onClick: buttonClickHandler,
-        });
-      } else if (child?.type?.displayName === 'Button') {
-        return React.cloneElement(child, {
-          size: 'small',
-          type: 'tertiary',
-          ...child.props,
-          onClick: buttonClickHandler,
-        });
-      }
-    }
-
-    return child;
-  });
-  return React.Children.count(children) > 0 ? (
-    <div className={css.toastFooterActions}>{footerActions}</div>
-  ) : null;
-};
-ToastFooter.displayName = 'ToastFooter';
-export const Toast = ({
-  classNames,
-  children,
-  time,
-  semantic = TOAST_SEMANTIC.success,
-  onClose,
-  initialFocus = -1,
-  customIcon,
-  hideCloseIcon,
-}: ToastProps): React.ReactNode => {
-  const {refs, context} = useFloating({
-    open: true,
-  });
-
-  const getComp = (comp: string) => {
-    const childrenArray = React.Children.toArray(children);
-
-    if (childrenArray.length) {
-      const nodes: React.ReactNode[] = [];
-
-      for (const child of childrenArray) {
-        if (child?.type?.displayName === comp) {
-          nodes.push(
-            React.cloneElement(child, {
-              semantic,
-            }),
-          );
-        }
-      }
-
-      return nodes.length > 1 ? nodes : nodes[0];
-    }
-
-    return null;
-  };
-
-  const footer = getComp('ToastFooter');
-  // $FlowFixMe
-  const footerWithClose = footer
-    ? React.cloneElement(footer, {
-        onClose,
-      })
-    : null;
-  return (
-    <FloatingFocusManager context={context} initialFocus={initialFocus}>
-      <div
-        className={classify(css.toastContainer, classNames?.wrapper)}
-        ref={refs.setFloating}
-      >
-        {customIcon || <ToastIcon semantic={semantic} />}
-        <div className={css.toastMidSection}>
-          <div className={css.contentWrap}>
-            <div className={css.titleBodyWrap}>
-              {getComp('ToastTitle')}
-              {getComp('ToastBody')}
-            </div>
-            {time && (
-              <SubTitleExtraSmall className={classNames?.time}>
-                {time}
-              </SubTitleExtraSmall>
-            )}
-          </div>
-          {footerWithClose}
-        </div>
-        {!hideCloseIcon && (
-          <CloseIcon
-            classNames={{
-              button: css.closeIcon,
-            }}
-            onClick={onClose}
-            ariaLabel="Close Button"
-          />
-        )}
-      </div>
-    </FloatingFocusManager>
-  );
-};