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

package/lib/components/FileUpload/FileUpload.tsx

@@ -1,206 +0,0 @@
-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.ts

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

package/lib/components/FilterButtonOverlay/FilterButtonOverlay.stories.tsx

@@ -1,345 +0,0 @@
-import * as React from 'react';
-import {useCallback, useRef} from 'react';
-
-import {BUTTON_ACTION_TYPE, BUTTON_SIZE, BUTTON_TYPES} from '../Button';
-import {ANCHOR_POSITION_TYPE, STRATEGY_TYPE} from '../ButtonDropdown';
-import {SimpleDropdown} from '../Dropdown';
-import {ELEVATION_TYPES} from '../Tooltip';
-
-import type {FilterButtonOverlayProps} from './';
-import {FilterButtonOverlay} from './FilterButtonOverlay';
-
-import css from './FilterButtonOverlay.stories.module.css';
-
-
-const anchorPositionOptions: Array<unknown> = [
-  ...Object.values(ANCHOR_POSITION_TYPE),
-];
-const positionStrategyOptions: Array<unknown> = [...Object.values(STRATEGY_TYPE)];
-const actionTypeOptions: Array<unknown> = [...Object.values(BUTTON_ACTION_TYPE)];
-const buttonTypeOptions: Array<unknown> = [...Object.values(BUTTON_TYPES)];
-const buttonSizeOptions: Array<unknown> = [...Object.values(BUTTON_SIZE)];
-const elevationOptions: Array<unknown> = [...Object.values(ELEVATION_TYPES)];
-
-export default {
-  tags: ['autodocs'],
-  title: 'Components/Filter Button Overlay',
-  component: FilterButtonOverlay,
-  argTypes: {
-    onClick: {
-      description:
-        '**onClick** handler that is applied to the root `<button>` element',
-      action: 'clicked',
-      table: {
-        type: {summary: '(SyntheticEvent<HTMLElement>) => mixed'},
-      },
-    },
-    classNames: {
-      description: 'External classNames to be applied',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {summary: '{wrapper?: string, icon?: string, text?: string}'},
-      },
-    },
-    iconLeftName: {
-      description:
-        'Left icon to be applied to the button, it internally uses the `Icon` component to render icons',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    iconLeftType: {
-      description:
-        'Type of Left Icon. Type represents 4 unique icon styles :- Solid, Regular, Duotone and Brands',
-      options: ['regular', 'solid', 'duotone', 'brands'],
-      control: {type: 'select'},
-      table: {
-        type: {summary: 'string'},
-        defaultValue: {summary: 'regular'},
-      },
-    },
-    elevation: {
-      description:
-        'Elevation level for the dropdown menu. This controls the z-index stacking order. Default is set to "modal" elevation. Use higher elevation levels when rendering the dropdown above other elevated elements like Modal, Toast, etc.',
-      control: {
-        type: 'select',
-      },
-      options: elevationOptions,
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: 'modal'},
-      },
-    },
-    iconRightName: {
-      description:
-        'Right icon to be applied to the button, it internally uses the `Icon` component to render icons',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    iconRightType: {
-      description:
-        'Type of Right Icon. Type represents 4 unique icon styles :- Solid, Regular, Duotone and Brands',
-      options: ['regular', 'solid', 'duotone', 'brands'],
-      control: {type: 'select'},
-      table: {
-        type: {summary: 'string'},
-        defaultValue: {summary: 'regular'},
-      },
-    },
-    type: {
-      options: buttonTypeOptions,
-      description: 'Type of Button. Supported types are listed on the dropdown',
-      control: {
-        type: 'select',
-      },
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: 'primary'},
-      },
-    },
-    actionType: {
-      options: actionTypeOptions,
-      description:
-        'Type of action to perform upon Button click. Supported types are listed on the dropdown',
-      control: {
-        type: 'select',
-      },
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: 'button'},
-      },
-    },
-    buttonSize: {
-      description:
-        'Button supports only two size variants namely small and medium. `small` < `medium`',
-      options: buttonSizeOptions,
-      control: {type: 'select'},
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: 'medium'},
-      },
-    },
-    disabled: {
-      description: 'If **true**, the component is disabled',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: 'false'},
-      },
-    },
-    isLoading: {
-      description:
-        'If **true**, the component would show a circular loader and also preserve the current size of button so that there are no jumps',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-      },
-    },
-    buttonIsFluid: {
-      description:
-        'If **true**, the component would take the container\'s `width`',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-      },
-    },
-    buttonLabel: {
-      description: 'The content of the Button',
-      table: {
-        type: {summary: 'React.Component | string'},
-      },
-    },
-    ariaLabel: {
-      control: {
-        type: 'text',
-      },
-      description:
-        '**aria-label** should be used where Button do not have have discernible text. This would avoid accessibility violations in screen readers',
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    anchorPosition: {
-      options: anchorPositionOptions,
-      description:
-        'Position of Menu relative to its reference element. It can be any one value from the dropdown',
-      control: {
-        type: 'select',
-      },
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: 'bottom-start'},
-      },
-    },
-    positionStrategy: {
-      options: positionStrategyOptions,
-      description:
-        'Position of Menu relative to either its nearest positioned ancestor (absolute) or its nearest containing block- usually the viewport (fixed). It can be any one value from the dropdown',
-      control: {
-        type: 'select',
-      },
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: 'absolute'},
-      },
-    },
-    clickAwayRef: {
-      type: {optional: true},
-      description: 'ref that contains the functions to open or close the child',
-      table: {
-        type: {
-          summary: 'ClickAwayRefType',
-        },
-      },
-    },
-    isFluid: {
-      description:
-        'If **true**, the component would take the container\'s `width`',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-      },
-    },
-    size: {
-      description:
-        'Button supports only two size variants namely small and medium. `small` < `medium`',
-      control: {
-        type: 'radio',
-      },
-      options: ['small', 'medium'],
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: 'medium'},
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      subtitle: 'Generates a FilterButtonOverlay component.',
-      description: {
-        component: `
-\`\`\`js
-import { FilterButtonOverlay } from "@spaced-out/ui-design-system/lib/components/FilterButtonOverlay";
-\`\`\`
-This component serves as a filter wrapper with a button trigger. It uses children to render any type of custom filter content.
-
-
-### Usage:
-
-\`\`\`jsx
-<FilterButtonOverlay buttonLabel="Filters" buttonSize="medium" iconLeftName="bars-filter" type="tertiary">
-  <SimpleDropdown
-    label="Recipient"
-    options={recipientOptions}
-    onChange={onSelected}
-  />
-  <SimpleDropdown
-    label="Send From?"
-    options={sendFromOptions}
-    onChange={onSelected}
-  />
-  <SimpleDropdown
-    label="Sent Status?"
-    options={sentStatusOptions}
-    onChange={onSelected}
-  />
-</FilterButtonOverlay>
-\`\`\`
-        `,
-      },
-    },
-    storySource: {
-      componentPath:
-        '/src/components/FilterButtonOverlay/FilterButtonOverlay.jsx',
-    },
-  },
-};
-
-const convertToOptions = (items: Array<string>) =>
-  items.map((item) => ({
-    key: item,
-    label: item,
-  }));
-
-const recipientOptions = convertToOptions(['Candidate', 'Employees']);
-const sendFromOptions = convertToOptions(['SMS', 'EMAIL', 'Whatsapp']);
-const sentStatusOptions = convertToOptions(['Sent', 'Pending']);
-
-export const _FilterButtonOverlay = (args: FilterButtonOverlayProps) => (<div className={css.container}>
-  <FilterButtonOverlay {...args}>
-    <SimpleDropdown label="Recipient" options={recipientOptions} />
-    <SimpleDropdown label="Send From?" options={sendFromOptions} />
-    <SimpleDropdown label="Sent Status?" options={sentStatusOptions} />
-  </FilterButtonOverlay>
-</div>);
-
-_FilterButtonOverlay.args = {
-  buttonLabel: 'Filters',
-  buttonSize: 'medium',
-  iconLeftName: 'bars-filter',
-  type: 'tertiary',
-  classNames: {
-    overlayContainer: css.overlayContainer,
-  },
-};
-
-export const _FilterButtonOverlayWithAutoClose = (args: FilterButtonOverlayProps) => {
-  const clickAwayRef = useRef(null);
-
-// @ts-ignore - TS2554 - Expected 2 arguments, but got 1.
-  const onSelected = useCallback(() => {
-    if (clickAwayRef.current) {
-// @ts-ignore - TS2339 - Property 'forceClose' does not exist on type 'never'.
-      clickAwayRef.current.forceClose();
-    }
-  });
-
-  return (
-    <div className={css.container}>
-      <FilterButtonOverlay {...args} clickAwayRef={clickAwayRef}>
-        <SimpleDropdown
-          label="Recipient"
-          options={recipientOptions}
-          onChange={onSelected}
-        />
-        <SimpleDropdown
-          label="Send From?"
-          options={sendFromOptions}
-          onChange={onSelected}
-        />
-        <SimpleDropdown
-          label="Sent Status?"
-          options={sentStatusOptions}
-          onChange={onSelected}
-        />
-      </FilterButtonOverlay>
-    </div>
-  );
-};
-
-_FilterButtonOverlayWithAutoClose.args = {
-  buttonLabel: 'Filters',
-  buttonSize: 'medium',
-  iconLeftName: 'bars-filter',
-  type: 'tertiary',
-  classNames: {
-    overlayContainer: css.overlayContainer,
-  },
-};