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

package/lib/components/ErrorMessage/ErrorMessage.d.ts

@@ -1,86 +0,0 @@
-import {$ReadOnly} from 'utility-types';
-import * as React from 'react';
-import classify from '../../utils/classify';
-import {
-  ForbiddenImage,
-  NotFoundImage,
-  ServerErrorImage,
-  UnauthorizedImage,
-} from './ErrorImages';
-import css from './ErrorMessage.module.css';
-type ClassNames = $ReadOnly<{
-  wrapper?: string;
-  image?: string;
-  heading?: string;
-  title?: string;
-  description?: string;
-  children?: string;
-}>;
-export type ErrorMessageProps = {
-  classNames?: ClassNames;
-  children?: React.ReactNode;
-  imageVariant?: 'unauthorized' | 'forbidden' | 'notFound' | 'serverError';
-  title?: React.ReactNode;
-  description?: React.ReactNode;
-  heading?: React.ReactNode;
-  customImageUrl?: string;
-};
-export const ErrorMessage: React$AbstractComponent<
-  ErrorMessageProps,
-  HTMLDivElement
-> = React.forwardRef<ErrorMessageProps, HTMLDivElement>(
-  (
-    {
-      classNames,
-      children,
-      imageVariant,
-      title,
-      description,
-      customImageUrl,
-      heading,
-      ...props
-    }: ErrorMessageProps,
-    ref,
-  ): React.ReactNode => (
-    <div
-      {...props}
-      data-testid="ErrorMessage"
-      className={classify(css.wrapper, classNames?.wrapper)}
-      ref={ref}
-    >
-      {!!imageVariant && !customImageUrl && (
-        <div className={classify(css.image, classNames?.image)}>
-          {imageVariant === 'unauthorized' && <UnauthorizedImage />}
-          {imageVariant === 'forbidden' && <ForbiddenImage />}
-          {imageVariant === 'notFound' && <NotFoundImage />}
-          {imageVariant === 'serverError' && <ServerErrorImage />}
-        </div>
-      )}
-      {customImageUrl && (
-        <img
-          className={classify(css.image, classNames?.image)}
-          src={customImageUrl}
-          alt="Empty State"
-        />
-      )}
-      {!!heading && (
-        <div className={classify(css.heading, classNames?.heading)}>
-          {heading}
-        </div>
-      )}
-      {!!title && (
-        <div className={classify(css.title, classNames?.title)}>{title}</div>
-      )}
-      {!!description && (
-        <div className={classify(css.description, classNames?.description)}>
-          {description}
-        </div>
-      )}
-      {!!children && (
-        <div className={classify(css.childrenWrapper, classNames?.children)}>
-          {children}
-        </div>
-      )}
-    </div>
-  ),
-);

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

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

package/lib/components/FileUpload/FileBlock/FileBlock.d.ts

@@ -1,137 +0,0 @@
-import {$ReadOnly} from 'utility-types';
-import * as React from 'react';
-import classify from '../../../utils/classify';
-import {ClickableIcon, CloseIcon, Icon} from '../../Icon';
-import {LinearLoader} from '../../LinearLoader';
-import {Truncate} from '../../Truncate';
-import type {FileObject} from '../FileUpload';
-import css from '../FileUpload.module.css';
-type ClassNames = $ReadOnly<{
-  wrapper?: string;
-}>;
-export type FileBlockProps = {
-  classNames?: ClassNames;
-  fileObject: FileObject;
-  onFileRefreshClick?: (file: FileObject) => unknown;
-  handleFileClear?: (id: string) => unknown;
-};
-export const FileBlock: React$AbstractComponent<
-  FileBlockProps,
-  HTMLDivElement
-> = React.forwardRef<FileBlockProps, HTMLDivElement>(
-  (
-    {
-      classNames,
-      fileObject,
-      onFileRefreshClick,
-      handleFileClear,
-    }: FileBlockProps,
-    ref,
-  ): React.ReactNode => (
-    <>
-      <div className={classify(css.file, classNames?.wrapper)} ref={ref}>
-        <div className={css.fileInfo}>
-          <div className={css.fileNameBlock}>
-            <div className={css.icon}>
-              <FileStatusIcon fileObject={fileObject} />
-            </div>
-            <div className={css.fileName}>
-              <Truncate>{fileObject.file.name}</Truncate>
-            </div>
-          </div>
-
-          {fileObject.success &&
-            !!fileObject.successMessage &&
-            !fileObject.progress && (
-              <div className={css.fileSuccess}>
-                <Truncate>{fileObject.successMessage}</Truncate>
-              </div>
-            )}
-
-          {fileObject.reject &&
-            !!fileObject.rejectReason &&
-            !fileObject.progress && (
-              <div className={css.fileError}>
-                <Truncate>{fileObject.rejectReason}</Truncate>
-              </div>
-            )}
-
-          {!!fileObject.progress && (
-            <div className={css.progress}>
-              <LinearLoader
-                size="small"
-                value={
-                  fileObject.progress === 'indeterminate'
-                    ? 0
-                    : fileObject.progress
-                }
-                indeterminate={fileObject.progress === 'indeterminate'}
-              ></LinearLoader>
-            </div>
-          )}
-        </div>
-        <div className={css.rightSection}>
-          {fileObject.showReUpload && (
-            <div className={css.rightBlock}>
-              <ClickableIcon
-                name="refresh"
-                size="small"
-                onClick={() => onFileRefreshClick?.(fileObject)}
-              />
-            </div>
-          )}
-
-          <div className={css.rightBlock}>
-            <CloseIcon
-              size="small"
-              onClick={() => handleFileClear?.(fileObject.id)}
-            />
-          </div>
-        </div>
-      </div>
-    </>
-  ),
-);
-
-// This function returns the status of a file
-const getFileStatus = (fileObject: FileObject) => {
-  if (fileObject.progress) {
-    return 'progress';
-  }
-
-  if (fileObject.success) {
-    return 'success';
-  }
-
-  if (fileObject.reject) {
-    return 'error';
-  }
-
-  return 'default';
-};
-
-// This component renders the status icon for a file
-const FileStatusIcon = ({fileObject}: {fileObject: FileObject}) => {
-  const status = getFileStatus(fileObject);
-
-  switch (status) {
-    case 'progress':
-      return <Icon size="small" name="loader" color="tertiary" />;
-
-    case 'success':
-      return <Icon size="small" name="check" color="success" />;
-
-    case 'error':
-      return (
-        <Icon
-          size="small"
-          name="circle-exclamation"
-          color="danger"
-          type="solid"
-        />
-      );
-
-    default:
-      return <Icon size="small" name="check" color="success" />;
-  }
-};

package/lib/components/FileUpload/FileBlock/index.d.ts

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

package/lib/components/FileUpload/FileUpload.d.ts

@@ -1,190 +0,0 @@
-import {$ReadOnly} from 'utility-types';
-import * as React from 'react';
-// @ts-expect-error[untyped-import] -- this should be fixed soon
-import type {UseFileUploadReturnProps} from '../../hooks/useFileUpload';
-import {useFileUpload} from '../../hooks/useFileUpload';
-import classify from '../../utils/classify';
-import {UnstyledButton} from '../Button';
-import {Truncate} from '../Truncate';
-import {FileBlock} from './FileBlock';
-import css from './FileUpload.module.css';
-type ClassNames = $ReadOnly<{
-  wrapper?: string;
-  instruction?: string;
-  secondaryInstruction?: string;
-  dropZone?: string;
-  files?: string;
-}>;
-export type FileProgress = number | 'indeterminate';
-export type FileObject = {
-  file: File;
-  id: string;
-  reject?: boolean;
-  rejectReason?: string;
-  progress?: FileProgress;
-  success?: boolean;
-  successMessage?: string;
-  // This is a flag that is used to show/hide re-upload button
-  showReUpload?: boolean;
-};
-// This is a file error object that is passed to onRejectedFilesDrop callback in useFileUpload hook
-export type FileError = {
-  code: string;
-};
-// This is a file rejection object that is passed to handleDropRejected function in useFileUpload hook
-export type FileRejection = {
-  errors: Array<FileError>;
-  file: File;
-};
-// This is a ref object that is passed to FileUpload component for managing state of a single file
-export type FileUploadRef = {
-  moveFileToProgress: (id: string, progress: FileProgress) => unknown;
-  moveFileToSuccess: (id: string, successMessage?: string) => unknown;
-  moveFileToReject: (id: string, rejectReason?: string) => unknown;
-  setShowReUpload: (id: string, showReUpload?: boolean) => unknown;
-  handleFileClear: (id: string) => unknown;
-  validFiles: Array<FileObject>;
-  rejectedFiles: Array<FileObject>;
-  files: Array<FileObject>;
-};
-// These props are shared between FileUpload component and useFileUpload hook
-export type FileUploadBaseProps = {
-  maxFiles?: number;
-  maxSize?: number;
-  accept?: Record<string, string[]>;
-  disabled?: boolean;
-  // File drop callbacks
-  onValidFilesDrop?: (acceptedFiles: Array<FileObject>) => unknown;
-  onRejectedFilesDrop?: (fileRejections: Array<FileObject>) => unknown;
-  // File clear callbacks
-  onFileClear?: (id: string) => unknown;
-  onClear?: () => unknown;
-};
-export type FileUploadProps = FileUploadBaseProps & {
-  classNames?: ClassNames;
-  label?: React.ReactNode;
-  instruction?: React.ReactNode;
-  draggingInstruction?: React.ReactNode;
-  secondaryInstruction?: React.ReactNode;
-  required?: boolean;
-  handleFileDeletionExternally?: boolean;
-  // File refresh callback
-  onFileRefreshClick?: (file: FileObject) => unknown;
-};
-
-const FileUploadBase = (props: FileUploadProps, ref) => {
-  const {
-    classNames,
-    label = 'Upload File',
-    disabled = false,
-    instruction = 'Drag and drop or click to upload',
-    draggingInstruction = 'Drop here to start uploading..',
-    error = false,
-    required = false,
-    secondaryInstruction = '',
-    maxSize,
-    accept,
-    onValidFilesDrop,
-    onRejectedFilesDrop,
-    onFileClear,
-    onFileRefreshClick,
-    maxFiles = 1,
-    handleFileDeletionExternally,
-  } = props;
-  // Get file upload state from useFileUpload hook
-  const {
-    validFiles,
-    rejectedFiles,
-    isDragActive,
-    getRootProps,
-    shouldAcceptFiles,
-    getInputProps,
-    handleFileClear,
-    moveFileToProgress,
-    moveFileToSuccess,
-    moveFileToReject,
-    setShowReUpload,
-  }: UseFileUploadReturnProps = useFileUpload({
-    maxFiles,
-    maxSize,
-    accept,
-    disabled,
-    onValidFilesDrop,
-    onRejectedFilesDrop,
-    onFileClear,
-  });
-  // Expose file upload actions to parent component
-  React.useImperativeHandle(ref, () => ({
-    moveFileToProgress,
-    moveFileToSuccess,
-    moveFileToReject,
-    handleFileClear,
-    setShowReUpload,
-    validFiles,
-    rejectedFiles,
-    files: [...validFiles, ...rejectedFiles],
-  }));
-  // Merge valid and rejected files
-  const files = [...validFiles, ...rejectedFiles];
-  return (
-    <div className={classify(css.wrapper, classNames?.wrapper)}>
-      {Boolean(label) && (
-        <div className={css.label}>
-          <Truncate>{label}</Truncate>
-          {required && <span className={css.required}>{'*'}</span>}
-        </div>
-      )}
-
-      <UnstyledButton
-        disabled={disabled || !shouldAcceptFiles}
-        {...getRootProps()}
-        className={classify(
-          css.dropzone,
-          {
-            [css.disabled]: disabled || !shouldAcceptFiles,
-            [css.dragActive]: isDragActive,
-            [css.error]: error,
-          },
-          classNames?.dropZone,
-        )}
-      >
-        <input {...getInputProps()} />
-        <div className={classify(css.instruction, classNames?.instruction)}>
-          {isDragActive ? draggingInstruction : instruction}
-        </div>
-        <div
-          className={classify(
-            css.secondaryInstruction,
-            classNames?.secondaryInstruction,
-          )}
-        >
-          {secondaryInstruction}
-        </div>
-      </UnstyledButton>
-
-      {files.length > 0 && (
-        <div className={css.files}>
-          {files.map((fileObject: FileObject) => (
-            <React.Fragment key={fileObject.id}>
-              <FileBlock
-                fileObject={fileObject}
-                onFileRefreshClick={onFileRefreshClick}
-                handleFileClear={
-                  handleFileDeletionExternally ? onFileClear : handleFileClear
-                }
-                classNames={{
-                  wrapper: classNames?.files,
-                }}
-              />
-            </React.Fragment>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export const FileUpload: React.AbstractComponent<
-  FileUploadProps,
-  FileUploadRef
-> = React.forwardRef<FileUploadProps, FileUploadRef>(FileUploadBase);

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

@@ -1,2 +0,0 @@
-export * from './FileBlock';
-export * from './FileUpload';

package/lib/components/FilterButtonOverlay/FilterButtonOverlay.d.ts

@@ -1,130 +0,0 @@
-import {$ReadOnly, $Diff} from 'utility-types';
-import * as React from 'react';
-import {
-  // $FlowFixMe[untyped-import]
-  autoUpdate, // $FlowFixMe[untyped-import]
-  flip, // $FlowFixMe[untyped-import]
-  offset, // $FlowFixMe[untyped-import]
-  shift, // $FlowFixMe[untyped-import]
-  useFloating,
-} from '@floating-ui/react';
-import {sizeFluid} from '../../styles/variables/_size';
-import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
-import type {ClickAwayRefType} from '../../utils';
-import {ClickAway, mergeRefs} from '../../utils';
-import classify from '../../utils/classify';
-import type {ButtonProps, ButtonSize} from '../Button';
-import {Button} from '../Button';
-import type {AnchorType, Strategy} from '../ButtonDropdown';
-import {ANCHOR_POSITION_TYPE, STRATEGY_TYPE} from '../ButtonDropdown';
-import css from './FilterButtonOverlay.module.css';
-type ClassNames = $ReadOnly<{
-  wrapper?: string;
-  overlayContainer?: string;
-}>;
-export type FilterButtonOverlaySizeTypes = 'medium' | 'small';
-export type NewButtonProps = $Diff<
-  ButtonProps,
-  {
-    children?: React.ReactNode;
-  }
->;
-export type FilterButtonOverlayProps = NewButtonProps & {
-  classNames?: ClassNames;
-  children: React.ReactNode;
-  positionStrategy?: Strategy;
-  anchorPosition?: AnchorType;
-  clickAwayRef?: ClickAwayRefType;
-  isFluid?: boolean;
-  size?: FilterButtonOverlaySizeTypes;
-  buttonLabel?: React.ReactNode;
-  buttonSize?: ButtonSize;
-  buttonIsFluid?: boolean;
-};
-export const FilterButtonOverlay: React$AbstractComponent<
-  FilterButtonOverlayProps,
-  HTMLDivElement
-> = React.forwardRef<FilterButtonOverlayProps, HTMLDivElement>(
-  (
-    {
-      classNames,
-      anchorPosition = ANCHOR_POSITION_TYPE.bottomStart,
-      positionStrategy = STRATEGY_TYPE.absolute,
-      clickAwayRef,
-      size,
-      children,
-      isFluid,
-      buttonLabel,
-      buttonIsFluid,
-      buttonSize,
-      ...restProps
-    }: FilterButtonOverlayProps,
-    ref,
-  ) => {
-    const {x, y, refs, strategy} = useFloating({
-      open: true,
-      strategy: positionStrategy,
-      placement: anchorPosition,
-      whileElementsMounted: autoUpdate,
-      middleware: [shift(), flip(), offset(parseInt(spaceXXSmall))],
-    });
-    return (
-      <ClickAway clickAwayRef={clickAwayRef} closeOnEscapeKeypress>
-        {({isOpen, onOpen, boundaryRef, triggerRef}) => (
-          <div
-            data-testid="FilterButtonOverlay"
-            className={classify(
-              {
-                [css.isFluid]: buttonIsFluid,
-              },
-              classNames?.wrapper,
-            )}
-            ref={ref}
-          >
-            <Button
-              {...restProps}
-              ref={mergeRefs([refs.setReference, triggerRef])}
-              onClick={(e) => {
-                e.stopPropagation();
-                onOpen();
-              }}
-              isFluid={buttonIsFluid}
-              size={buttonSize}
-            >
-              {buttonLabel}
-            </Button>
-
-            {isOpen && (
-              <div
-                ref={mergeRefs([refs.setFloating, boundaryRef])}
-                style={{
-                  display: 'flex',
-                  position: strategy,
-                  top: y ?? spaceNone,
-                  left: x ?? spaceNone,
-                  ...(isFluid && {
-                    width: sizeFluid,
-                  }),
-                }}
-              >
-                <div
-                  className={classify(
-                    css.overlayWrapper,
-                    {
-                      [css.fluid]: isFluid,
-                      [css.medium]: size === 'medium',
-                      [css.small]: size === 'small',
-                    },
-                    classNames?.overlayContainer,
-                  )}
-                >
-                  {children}
-                </div>
-              </div>
-            )}
-          </div>
-        )}
-      </ClickAway>
-    );
-  },
-);

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

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

package/lib/components/FocusManager/FocusManager.d.ts

@@ -1,52 +0,0 @@
-import {$ReadOnly} 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 css from './FocusManager.module.css';
-type ClassNames = $ReadOnly<{
-  wrapper?: string;
-}>;
-export type FocusManagerProps = {
-  classNames?: ClassNames;
-  children?: React.ReactNode;
-  initialFocus?: number;
-  returnFocus?: boolean;
-  guards?: boolean;
-  modal?: boolean;
-};
-export const FocusManager = (props: FocusManagerProps): React.ReactNode => {
-  const {refs, context} = useFloating({
-    open: true,
-  });
-  const {
-    classNames,
-    children,
-    initialFocus = -1,
-    returnFocus = true,
-    modal = true,
-    guards = true,
-    ...restFloatingFocusManagerProps
-  } = props;
-  return (
-    <FloatingFocusManager
-      context={context}
-      initialFocus={initialFocus}
-      modal={modal}
-      guards={guards}
-      returnFocus={returnFocus}
-      {...restFloatingFocusManagerProps}
-    >
-      <div
-        ref={refs.setFloating}
-        data-testid="FocusManager"
-        className={classify(css.wrapper, classNames?.wrapper)}
-      >
-        {children}
-      </div>
-    </FloatingFocusManager>
-  );
-};

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

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