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

package/lib/components/ErrorMessage/ErrorMessage.js.flow

@@ -1,95 +0,0 @@
-// @flow strict
-
-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.Node,
-  imageVariant?: 'unauthorized' | 'forbidden' | 'notFound' | 'serverError',
-  title?: React.Node,
-  description?: React.Node,
-  heading?: React.Node,
-  customImageUrl?: string,
-  ...
-};
-
-export const ErrorMessage: React$AbstractComponent<
-  ErrorMessageProps,
-  HTMLDivElement,
-> = React.forwardRef<ErrorMessageProps, HTMLDivElement>(
-  (
-    {
-      classNames,
-      children,
-      imageVariant,
-      title,
-      description,
-      customImageUrl,
-      heading,
-      ...props
-    }: ErrorMessageProps,
-    ref,
-  ): React.Node => (
-    <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.js.flow

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

package/lib/components/FileUpload/FileBlock/FileBlock.js.flow

@@ -1,139 +0,0 @@
-// @flow strict
-
-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) => mixed,
-  handleFileClear?: (id: string) => mixed,
-};
-
-export const FileBlock: React$AbstractComponent<
-  FileBlockProps,
-  HTMLDivElement,
-> = React.forwardRef<FileBlockProps, HTMLDivElement>(
-  (
-    {
-      classNames,
-      fileObject,
-      onFileRefreshClick,
-      handleFileClear,
-    }: FileBlockProps,
-    ref,
-  ): React.Node => (
-    <>
-      <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.js.flow

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

package/lib/components/FileUpload/FileUpload.js.flow

@@ -1,212 +0,0 @@
-// @flow strict
-import * as React from 'react';
-
-// $FlowFixMe[untyped-import] -- this should be fixed soon
-import {
-  type UseFileUploadReturnProps,
-  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) => mixed,
-  moveFileToSuccess: (id: string, successMessage?: string) => mixed,
-  moveFileToReject: (id: string, rejectReason?: string) => mixed,
-  setShowReUpload: (id: string, showReUpload?: boolean) => mixed,
-  handleFileClear: (id: string) => mixed,
-  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?: {[string]: string[]},
-  disabled?: boolean,
-
-  // File drop callbacks
-  onValidFilesDrop?: (acceptedFiles: Array<FileObject>) => mixed,
-  onRejectedFilesDrop?: (fileRejections: Array<FileObject>) => mixed,
-
-  // File clear callbacks
-  onFileClear?: (id: string) => mixed,
-  onClear?: () => mixed,
-};
-
-export type FileUploadProps = {
-  ...FileUploadBaseProps,
-
-  classNames?: ClassNames,
-  label?: React.Node,
-  instruction?: React.Node,
-  draggingInstruction?: React.Node,
-  secondaryInstruction?: React.Node,
-  required?: boolean,
-  handleFileDeletionExternally?: boolean,
-
-  // File refresh callback
-  onFileRefreshClick?: (file: FileObject) => mixed,
-};
-
-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.js.flow

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

package/lib/components/FilterButtonOverlay/FilterButtonOverlay.js.flow

@@ -1,166 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-import {
-  // $FlowFixMe[untyped-import]
-  autoUpdate,
-  // $FlowFixMe[untyped-import]
-  flip,
-  // $FlowFixMe[untyped-import]
-  FloatingFocusManager,
-  // $FlowFixMe[untyped-import]
-  FloatingPortal,
-  // $FlowFixMe[untyped-import]
-  offset,
-  // $FlowFixMe[untyped-import]
-  shift,
-  // $FlowFixMe[untyped-import]
-  useFloating,
-} from '@floating-ui/react';
-
-import {useReferenceElementWidth} from '../../hooks';
-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 type {ElevationType} from '../Tooltip';
-import {getElevationValue} from '../Tooltip';
-
-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.Node}>;
-
-export type FilterButtonOverlayProps = {
-  ...NewButtonProps,
-  classNames?: ClassNames,
-  children: React.Node,
-  positionStrategy?: Strategy,
-  anchorPosition?: AnchorType,
-  clickAwayRef?: ClickAwayRefType,
-  isFluid?: boolean,
-  size?: FilterButtonOverlaySizeTypes,
-  buttonLabel?: React.Node,
-  buttonSize?: ButtonSize,
-  elevation?: ElevationType,
-  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 = 'medium',
-      children,
-      isFluid,
-      buttonLabel,
-      buttonIsFluid,
-      buttonSize,
-      elevation = 'modal',
-      ...restProps
-    }: FilterButtonOverlayProps,
-    ref,
-  ) => {
-    const {x, y, refs, strategy, context} = useFloating({
-      open: true,
-      strategy: positionStrategy,
-      placement: anchorPosition,
-      whileElementsMounted: autoUpdate,
-      middleware: [shift(), flip(), offset(parseInt(spaceXXSmall))],
-    });
-
-    const dropdownWidth = useReferenceElementWidth(refs.reference?.current);
-
-    return (
-      <ClickAway
-        clickAwayRef={clickAwayRef}
-        closeOnEscapeKeypress
-        containsNestedFloatingPortals
-      >
-        {({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 && (
-              <FloatingPortal>
-                <FloatingFocusManager
-                  modal={false}
-                  context={context}
-                  initialFocus={refs.reference}
-                >
-                  <div
-                    ref={mergeRefs([refs.setFloating, boundaryRef])}
-                    className={css.overlayContainer}
-                    style={{
-                      display: 'flex',
-                      position: strategy,
-                      top: y ?? spaceNone,
-                      left: x ?? spaceNone,
-                      /* NOTE(Sharad): The FloatingPortal renders the menu outside the normal DOM structure,
-                       so its parent is effectively the <body> element. This means the menu
-                       would otherwise default to the body's width. To support fluid width,
-                       we must manually set the dropdown width here; otherwise, it uses a fixed width.
-                       Also, Only treat menu as non-fluid if isFluid is strictly false, since default is true in menu and undefined means fluid. */
-                      ...(isFluid !== false && {
-                        '--dropdown-width': dropdownWidth,
-                      }),
-                      '--menu-elevation': getElevationValue(elevation),
-                    }}
-                  >
-                    <div
-                      className={classify(
-                        css.overlayWrapper,
-                        {
-                          [css.fluid]: isFluid,
-                          [css.small]: size === 'small',
-                          [css.medium]: size === 'medium',
-                        },
-                        classNames?.overlayContainer,
-                      )}
-                    >
-                      {children}
-                    </div>
-                  </div>
-                </FloatingFocusManager>
-              </FloatingPortal>
-            )}
-          </div>
-        )}
-      </ClickAway>
-    );
-  },
-);

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

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

package/lib/components/FocusManager/FocusManager.js.flow

@@ -1,57 +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 css from './FocusManager.module.css';
-
-
-type ClassNames = $ReadOnly<{wrapper?: string}>;
-
-export type FocusManagerProps = {
-  classNames?: ClassNames,
-  children?: React.Node,
-  initialFocus?: number,
-  returnFocus?: boolean,
-  guards?: boolean,
-  modal?: boolean,
-};
-
-export const FocusManager = (props: FocusManagerProps): React.Node => {
-  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.js.flow

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