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

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

@@ -0,0 +1,95 @@
+// @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

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

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

@@ -0,0 +1,139 @@
+// @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

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

package/lib/components/FileUpload/FileUpload.js

@@ -13,7 +13,7 @@ var _FileBlock = require("./FileBlock");
 var _FileUploadModule = _interopRequireDefault(require("./FileUpload.module.css"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } // $FlowFixMe[untyped-import] -- this should be fixed soon
 // This is a file error object that is passed to onRejectedFilesDrop callback in useFileUpload hook
 
 // This is a file rejection object that is passed to handleDropRejected function in useFileUpload hook
@@ -29,7 +29,6 @@ const FileUploadBase = (props, ref) => {
     disabled = false,
     instruction = 'Drag and drop or click to upload',
     draggingInstruction = 'Drop here to start uploading..',
-    // @ts-ignore - TS2339 - Property 'error' does not exist on type 'FileUploadProps'.
     error = false,
     required = false,
     secondaryInstruction = '',
@@ -67,7 +66,6 @@ const FileUploadBase = (props, ref) => {
   });
 
   // Expose file upload actions to parent component
-  // @ts-ignore - TS2345 - Argument of type '{ current: FileUploadRef | null; } | ((arg1: FileUploadRef | null) => unknown)' is not assignable to parameter of type 'Ref<FileUploadRef> | undefined'.
   React.useImperativeHandle(ref, () => ({
     moveFileToProgress,
     moveFileToSuccess,
@@ -89,7 +87,6 @@ const FileUploadBase = (props, ref) => {
     className: _FileUploadModule.default.required
   }, '*')), /*#__PURE__*/React.createElement(_Button.UnstyledButton, _extends({
     disabled: disabled || !shouldAcceptFiles
-    // @ts-ignore - TS2554 - Expected 1 arguments, but got 0.
   }, getRootProps(), {
     className: (0, _classify.default)(_FileUploadModule.default.dropzone, {
       [_FileUploadModule.default.disabled]: disabled || !shouldAcceptFiles,
@@ -113,6 +110,4 @@ const FileUploadBase = (props, ref) => {
     }
   })))));
 };
-
-// @ts-ignore - TS2322 - Type 'ForwardRefExoticComponent<FileUploadRef & RefAttributes<FileUploadProps>>' is not assignable to type 'AbstractComponent<FileUploadProps, FileUploadRef>'. | TS2345 - Argument of type '(props: FileUploadProps, ref: { current: null | FileUploadRef; } | ((arg1: null | FileUploadRef) => unknown)) => React.JSX.Element' is not assignable to parameter of type 'ForwardRefRenderFunction<FileUploadProps, FileUploadRef>'.
 const FileUpload = exports.FileUpload = /*#__PURE__*/React.forwardRef(FileUploadBase);

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

@@ -0,0 +1,212 @@
+// @flow strict
+import * as React from 'react';
+
+// $FlowFixMe[untyped-import] -- this should be fixed soon
+import {
+  useFileUpload,
+  type UseFileUploadReturnProps,
+} 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

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

package/lib/components/FilterButtonOverlay/FilterButtonOverlay.js

@@ -40,15 +40,11 @@ const FilterButtonOverlay = exports.FilterButtonOverlay = /*#__PURE__*/React.for
     context
   } = (0, _react2.useFloating)({
     open: true,
-    // @ts-ignore - TS2322 - Type 'string' is not assignable to type 'Strategy | undefined'.
     strategy: positionStrategy,
-    // @ts-ignore - TS2322 - Type 'string' is not assignable to type 'Placement | undefined'.
     placement: anchorPosition,
     whileElementsMounted: _react2.autoUpdate,
     middleware: [(0, _react2.shift)(), (0, _react2.flip)(), (0, _react2.offset)(parseInt(_space.spaceXXSmall))]
   });
-
-  // @ts-ignore - TS2345 - Argument of type '(ReferenceType & ReferenceType) | null' is not assignable to parameter of type 'HTMLElement | null | undefined'.
   const dropdownWidth = (0, _hooks.useReferenceElementWidth)(refs.reference?.current);
   return /*#__PURE__*/React.createElement(_utils.ClickAway, {
     clickAwayRef: clickAwayRef,
@@ -68,7 +64,6 @@ const FilterButtonOverlay = exports.FilterButtonOverlay = /*#__PURE__*/React.for
       }, classNames?.wrapper),
       ref: ref
     }, /*#__PURE__*/React.createElement(_Button.Button, _extends({}, restProps, {
-      // @ts-ignore - TS2322 - Type '((node: ReferenceType | null) => void) & ((node: ReferenceType | null) => void)' is not assignable to type '{ current: HTMLElement | null | undefined; }'.
       ref: (0, _utils.mergeRefs)([refs.setReference, triggerRef]),
       onClick: e => {
         e.stopPropagation();
@@ -78,12 +73,9 @@ const FilterButtonOverlay = exports.FilterButtonOverlay = /*#__PURE__*/React.for
       size: buttonSize
     }), buttonLabel), isOpen && /*#__PURE__*/React.createElement(_react2.FloatingPortal, null, /*#__PURE__*/React.createElement(_react2.FloatingFocusManager, {
       modal: false,
-      context: context
-      // @ts-ignore - TS2322 - Type 'MutableRefObject<ReferenceType | null> & MutableRefObject<ReferenceType | null>' is not assignable to type 'number | MutableRefObject<HTMLElement | null> | undefined'.
-      ,
+      context: context,
       initialFocus: refs.reference
     }, /*#__PURE__*/React.createElement("div", {
-      // @ts-ignore - TS2322 - Type '((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void)' is not assignable to type '{ current: HTMLElement | null | undefined; }'.
       ref: (0, _utils.mergeRefs)([refs.setFloating, boundaryRef]),
       className: _FilterButtonOverlayModule.default.overlayContainer,
       style: {