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

package/lib/components/FileUpload/FileUpload.tsx

@@ -0,0 +1,206 @@
+import {Flow} from 'flow-to-typescript-codemod';
+import * as React from 'react';
+
+import {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) => 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?: {
+    [key: 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: ((arg1: null | FileUploadRef) => unknown) | {
+  current: null | FileUploadRef;
+}) => {
+  const {
+    classNames,
+    label = 'Upload File',
+    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 = '',
+    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
+// @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,
+    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}
+// @ts-ignore - TS2554 - Expected 1 arguments, but got 0.
+        {...getRootProps()}
+        className={classify(
+          css.dropzone,
+          {
+            [css.disabled]: disabled || !shouldAcceptFiles,
+            [css.dragActive]: isDragActive,
+            [css.error]: error,
+          },
+          classNames?.dropZone,
+        )}
+      >
+{ /* @ts-ignore - TS2322 - Type 'unknown' is not assignable to type 'DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>'. | TS2554 - Expected 1 arguments, but got 0. */}
+        <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>
+  );
+};
+
+// @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>'.
+export const FileUpload: Flow.AbstractComponent<FileUploadProps, FileUploadRef> = React.forwardRef<FileUploadProps, FileUploadRef>(FileUploadBase);

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

@@ -0,0 +1,3 @@
+export * from './FileBlock';
+export * from './FileUpload';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FileUpload/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}

package/lib/components/FileUpload/index.ts

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

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

@@ -0,0 +1,30 @@
+import { Flow } from 'flow-to-typescript-codemod';
+import * as React from 'react';
+import type { ClickAwayRefType } from '../../utils';
+import type { ButtonProps, ButtonSize } from '../Button';
+import type { AnchorType, Strategy } from '../ButtonDropdown';
+import type { ElevationType } from '../Tooltip';
+type ClassNames = Readonly<{
+    wrapper?: string;
+    overlayContainer?: string;
+}>;
+export type FilterButtonOverlaySizeTypes = 'medium' | 'small';
+export type NewButtonProps = Flow.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;
+    elevation?: ElevationType;
+    buttonIsFluid?: boolean;
+});
+export declare const FilterButtonOverlay: Flow.AbstractComponent<FilterButtonOverlayProps, HTMLDivElement>;
+export {};
+//# sourceMappingURL=FilterButtonOverlay.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterButtonOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/FilterButtonOverlay/FilterButtonOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAEhD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,aAAa,CAAC;AAGlD,OAAO,KAAK,EAAC,WAAW,EAAE,UAAU,EAAC,MAAM,WAAW,CAAC;AAEvD,OAAO,KAAK,EAAC,UAAU,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE5D,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,YAAY,CAAC;AAM9C,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC,CAAC;AACH,MAAM,MAAM,4BAA4B,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE9D,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;IAClD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC,CAAC;AAEH,MAAM,MAAM,wBAAwB,GAAG,CAAC,CAAC,cAAc,CAAC,GAAG;IACzD,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gBAAgB,CAAC,EAAE,QAAQ,CAAC;IAC5B,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,4BAA4B,CAAC;IACpC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC,CAAC;AAEH,eAAO,MAAM,mBAAmB,EAAE,IAAI,CAAC,iBAAiB,CAAC,wBAAwB,EAAE,cAAc,CA8G/F,CAAC"}

package/lib/components/FilterButtonOverlay/FilterButtonOverlay.js

@@ -40,11 +40,15 @@ 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,
@@ -64,6 +68,7 @@ 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();
@@ -73,9 +78,12 @@ 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,
+      context: context
+      // @ts-ignore - TS2322 - Type 'MutableRefObject<ReferenceType | null> & MutableRefObject<ReferenceType | null>' is not assignable to type 'number | MutableRefObject<HTMLElement | null> | undefined'.
+      ,
       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: {

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

@@ -0,0 +1,300 @@
+import * as React from 'react';
+import type { FilterButtonOverlayProps } from './';
+declare const _default: {
+    tags: string[];
+    title: string;
+    component: import("flow-to-typescript-codemod").Flow.AbstractComponent<FilterButtonOverlayProps, HTMLDivElement>;
+    argTypes: {
+        onClick: {
+            description: string;
+            action: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        classNames: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        iconLeftName: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        iconLeftType: {
+            description: string;
+            options: string[];
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        elevation: {
+            description: string;
+            control: {
+                type: string;
+            };
+            options: unknown[];
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        iconRightName: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        iconRightType: {
+            description: string;
+            options: string[];
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        type: {
+            options: unknown[];
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        actionType: {
+            options: unknown[];
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        buttonSize: {
+            description: string;
+            options: unknown[];
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        disabled: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        isLoading: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        buttonIsFluid: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        buttonLabel: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        ariaLabel: {
+            control: {
+                type: string;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        anchorPosition: {
+            options: unknown[];
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        positionStrategy: {
+            options: unknown[];
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        clickAwayRef: {
+            type: {
+                optional: boolean;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        isFluid: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        size: {
+            description: string;
+            control: {
+                type: string;
+            };
+            options: string[];
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+    };
+    parameters: {
+        docs: {
+            subtitle: string;
+            description: {
+                component: string;
+            };
+        };
+        storySource: {
+            componentPath: string;
+        };
+    };
+};
+export default _default;
+export declare const _FilterButtonOverlay: {
+    (args: FilterButtonOverlayProps): React.JSX.Element;
+    args: {
+        buttonLabel: string;
+        buttonSize: string;
+        iconLeftName: string;
+        type: string;
+        classNames: {
+            overlayContainer: string;
+        };
+    };
+};
+export declare const _FilterButtonOverlayWithAutoClose: {
+    (args: FilterButtonOverlayProps): React.JSX.Element;
+    args: {
+        buttonLabel: string;
+        buttonSize: string;
+        iconLeftName: string;
+        type: string;
+        classNames: {
+            overlayContainer: string;
+        };
+    };
+};
+//# sourceMappingURL=FilterButtonOverlay.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterButtonOverlay.stories.d.ts","sourceRoot":"","sources":["../../../src/components/FilterButtonOverlay/FilterButtonOverlay.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,KAAK,EAAC,wBAAwB,EAAC,MAAM,IAAI,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAejD,wBAyPE;AAYF,eAAO,MAAM,oBAAoB;WAAU,wBAAwB;;;;;;;;;;CAM5D,CAAC;AAYR,eAAO,MAAM,iCAAiC;WAAU,wBAAwB;;;;;;;;;;CAgC/E,CAAC"}