@spaced-out/ui-design-system 0.4.15 → 0.5.0

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

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

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

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

package/lib/components/Textarea/Textarea.js.flow

@@ -1,139 +0,0 @@
-// @flow strict
-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: SyntheticInputEvent<HTMLInputElement>,
-    isEnter?: boolean,
-  ) => mixed,
-  onFocus?: (e: SyntheticInputEvent<HTMLInputElement>) => mixed,
-  onBlur?: (e: SyntheticInputEvent<HTMLInputElement>) => mixed,
-  onKeyDown?: (e: SyntheticKeyboardEvent<HTMLInputElement>) => mixed,
-  name?: string,
-  disabled?: boolean,
-  placeholder?: string,
-  locked?: boolean,
-  error?: boolean,
-  errorText?: string,
-  label?: string | React.Node,
-  helperText?: string | React.Node,
-  classNames?: ClassNames,
-  size?: 'medium' | 'small',
-  required?: boolean,
-  textCountLimit?: number,
-  ...
-};
-
-const Textarea_ = (props: TextareaProps, ref): React.Node => {
-  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_,
-): React$AbstractComponent<TextareaProps, HTMLTextAreaElement>);

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

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

package/lib/components/Timeline/Timeline.js.flow

@@ -1,47 +0,0 @@
-// @flow strict
-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.Node,
-  classNames?: ClassNames,
-  orientation?: Orientation,
-};
-
-const Timeline_ = (
-  {classNames, orientation = ORIENTATION.left, children}: TimelineProps,
-  ref,
-): React.Node => {
-  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_,
-): React$AbstractComponent<TimelineProps, HTMLDivElement>);

package/lib/components/Timeline/TimelineItem/TimelineItem.js.flow

@@ -1,127 +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 {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.Node,
-  iconName: string,
-  children: React.Node,
-  iconType?: IconType,
-  iconColor?: ColorTypes,
-  classNames?: ClassNames,
-  description?: React.Node,
-  orientation?: Orientation,
-  parentComponent?: React.Node,
-  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.Node => (
-  <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_): React$AbstractComponent<TimelineItemProps, HTMLDivElement>);

package/lib/components/Timeline/TimelineItem/index.js.flow

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

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

@@ -1,4 +0,0 @@
-// @flow strict
-
-export * from './Timeline';
-export * from './TimelineItem';

package/lib/components/Toast/Toast.js.flow

@@ -1,249 +0,0 @@
-// @flow strict
-
-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.Node,
-  time?: string,
-  semantic?: ToastSemanticType,
-  onClose?: () => void,
-  initialFocus?: number,
-  customIcon?: React.Node,
-  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.Node,
-  className?: string,
-  semantic?: ToastSemanticType,
-};
-
-export const ToastTitle: React$AbstractComponent<
-  ToastTitleProps,
-  HTMLDivElement,
-> = React.forwardRef<ToastTitleProps, HTMLDivElement>(
-  (
-    {children, semantic = '', className, ...props}: ToastTitleProps,
-    ref,
-  ): React.Node => (
-    <div
-      className={classify(css.toastTitle, typography[semantic], className)}
-      {...props}
-      ref={ref}
-    >
-      {children}
-    </div>
-  ),
-);
-
-ToastTitle.displayName = 'ToastTitle';
-
-export type ToastBodyProps = {
-  children?: React.Node,
-  className?: string,
-};
-
-export const ToastBody: React$AbstractComponent<
-  ToastBodyProps,
-  HTMLDivElement,
-> = React.forwardRef<ToastBodyProps, HTMLDivElement>(
-  ({children, className, ...props}: ToastBodyProps, ref): React.Node => (
-    <div className={classify(css.toastBody, className)} {...props} ref={ref}>
-      {children}
-    </div>
-  ),
-);
-
-ToastBody.displayName = 'ToastBody';
-
-export type ToastFooterProps = {
-  children?: React.Node,
-  onClose?: () => void,
-};
-
-export const ToastFooter = ({
-  children,
-  onClose,
-}: ToastFooterProps): React.Node => {
-  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.Node => {
-  const {refs, context} = useFloating({
-    open: true,
-  });
-
-  const getComp = (comp: string) => {
-    const childrenArray = React.Children.toArray(children);
-    if (childrenArray.length) {
-      const nodes: React.Node[] = [];
-      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>
-  );
-};