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

package/lib/hooks/useArbitraryOptionAddition/useArbitraryOptionAddition.js.flow

@@ -1,117 +0,0 @@
-// @flow strict
-
-import type {GroupTitleOption} from '../useFilteredOptions';
-import {useFilteredOptions} from '../useFilteredOptions';
-
-
-export type ArbitraryOption = {
-  key: string,
-  label: string,
-  arbitrary?: boolean,
-  multiArbitrary?: boolean,
-};
-
-export function useArbitraryOptionAddition<V>({
-  searchTerm,
-  options = [],
-  excludedKeys = [],
-  allowArbitraryValues = true,
-  allowMultiArbitraryValues = false,
-  validateArbitraryValue = (value: string): boolean => value.trim() !== '',
-  // $FlowFixMe[incompatible-return] - Object literal is compatible with V due to type constraint
-  makeArbitraryValue = (searchTerm): V => ({
-    key: searchTerm,
-    label: searchTerm,
-    arbitrary: true,
-  }),
-  // $FlowFixMe[incompatible-return] - Object literal is compatible with V due to type constraint
-  makeMultiArbitraryValue = (searchTerm): V => {
-    const regex = /^(?=.*[,\n]).+$/s;
-    if (regex.test(searchTerm)) {
-      // $FlowFixMe - Object literal is compatible with V due to type constraint
-      return {key: searchTerm, label: searchTerm, multiArbitrary: true};
-    }
-  },
-  groupTitleOptions = [],
-  arbitraryGroup = {groupTitle: '', showLineDivider: false, options: []},
-  searchOptionsBy = (option: V, searchTerm: string): boolean => {
-    // $FlowFixMe
-    const {label, key}: {label: string, key: string} = option;
-    return (
-      key.toLowerCase().includes(searchTerm) ||
-      label.toLowerCase().includes(searchTerm)
-    );
-  },
-}: {
-  searchTerm: string,
-  options?: V[],
-  excludedKeys?: string[],
-  allowArbitraryValues?: boolean,
-  allowMultiArbitraryValues?: boolean,
-  validateArbitraryValue?: (string) => boolean,
-  makeArbitraryValue?: (string) => V,
-  makeMultiArbitraryValue?: (string) => V,
-  groupTitleOptions?: GroupTitleOption<V>[],
-  arbitraryGroup?: GroupTitleOption<V>,
-  searchOptionsBy?: (option: V, searchTerm: string) => boolean,
-}): {
-  optionsWithArbitrary: Array<V>,
-  groupTitleOptionsWithArbitrary: Array<GroupTitleOption<V>>,
-} {
-  const trimmedSearchTerm = (searchTerm || '').trim().toLowerCase();
-
-  const {filteredOptions, filteredGroupTitleOptions} = useFilteredOptions({
-    searchTerm: trimmedSearchTerm,
-    options,
-    // $FlowFixMe[incompatible-call]
-    groupTitleOptions,
-    searchOptionsBy,
-  });
-
-  // Find if an arbitrary option should be added
-  const arbitraryOption =
-    allowArbitraryValues &&
-    trimmedSearchTerm &&
-    // $FlowFixMe - Array methods are valid here
-    !filteredOptions.some((option) => option.key === trimmedSearchTerm) &&
-    // $FlowFixMe - Array methods are valid here
-    !filteredGroupTitleOptions.some(
-      (group) =>
-        Array.isArray(group.options) &&
-        // $FlowFixMe- option has key property
-        group.options.some((option) => option.key === trimmedSearchTerm),
-    ) &&
-    !excludedKeys.includes(trimmedSearchTerm) &&
-    validateArbitraryValue(trimmedSearchTerm) &&
-    makeArbitraryValue(trimmedSearchTerm);
-
-  // Find if a multi-arbitrary option should be added
-  const multiArbitraryOption =
-    allowMultiArbitraryValues &&
-    trimmedSearchTerm &&
-    makeMultiArbitraryValue(trimmedSearchTerm);
-
-  // Compose the results
-  let optionsWithArbitrary = filteredOptions;
-  let groupTitleOptionsWithArbitrary = groupTitleOptions;
-
-  if (arbitraryOption) {
-    // $FlowFixMe[incompatible-type] - Array spread is valid here
-    optionsWithArbitrary = [arbitraryOption, ...optionsWithArbitrary];
-    groupTitleOptionsWithArbitrary = [
-      {...arbitraryGroup, options: [arbitraryOption]},
-      ...groupTitleOptionsWithArbitrary,
-    ];
-  }
-
-  if (multiArbitraryOption) {
-    // $FlowFixMe[incompatible-type] - Array spread is valid here
-    optionsWithArbitrary = [multiArbitraryOption, ...optionsWithArbitrary];
-    groupTitleOptionsWithArbitrary = [
-      {...arbitraryGroup, options: [multiArbitraryOption]},
-      ...groupTitleOptionsWithArbitrary,
-    ];
-  }
-  // $FlowFixMe[incompatible-return]
-  return {optionsWithArbitrary, groupTitleOptionsWithArbitrary};
-}

package/lib/hooks/useCopyToClipboard/index.js.flow

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

package/lib/hooks/useCopyToClipboard/useCopyToClipboard.js.flow

@@ -1,31 +0,0 @@
-// @flow strict
-
-import {useState} from 'react';
-
-
-type CopiedValue = string | null;
-type CopyFn = (text: string) => Promise<boolean>; // Return success
-
-export function useCopyToClipboard(): [CopiedValue, CopyFn] {
-  const [copiedText, setCopiedText] = useState<CopiedValue>(null);
-
-  const copy: CopyFn = async (text) => {
-    if (!navigator.clipboard) {
-      console.warn('Clipboard not supported');
-      return false;
-    }
-
-    // Try to save to clipboard then save it in the state if worked
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopiedText(text);
-      return true;
-    } catch (error) {
-      console.warn('Copy failed', error);
-      setCopiedText(null);
-      return false;
-    }
-  };
-
-  return [copiedText, copy];
-}

package/lib/hooks/useDebounce/index.js.flow

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

package/lib/hooks/useDebounce/useDebounce.js.flow

@@ -1,17 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-
-
-export const useDebounce = <T>(value: T, delay: number): T => {
-  const [debouncedValue, setDebouncedValue] = React.useState<T>(value);
-  React.useEffect(() => {
-    const handler = setTimeout(() => {
-      setDebouncedValue(value);
-    }, delay);
-    return () => {
-      clearTimeout(handler);
-    };
-  }, [value, delay]);
-  return debouncedValue;
-};

package/lib/hooks/useFileUpload/index.js.flow

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

package/lib/hooks/useFileUpload/useFileUpload.js.flow

@@ -1,304 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-// $FlowFixMe[untyped-import]
-import {useDropzone} from 'react-dropzone';
-
-import type {
-  FileObject,
-  FileProgress,
-  FileRejection,
-  FileUploadBaseProps,
-} from '../../components/FileUpload';
-import {uuid} from '../../utils/helpers';
-
-// useFileUpload hook returns these props
-export type UseFileUploadReturnProps = {
-  validFiles: Array<FileObject>,
-  rejectedFiles: Array<FileObject>,
-  isDragActive: boolean,
-  shouldAcceptFiles: boolean,
-  getRootProps: (mixed) => mixed,
-  getInputProps: (mixed) => mixed,
-  handleFileClear: (id: string) => mixed,
-  handleClear: () => mixed,
-  moveFileToProgress: (id: string, progress: FileProgress) => mixed,
-  moveFileToSuccess: (id: string, successMessage?: string) => mixed,
-  moveFileToReject: (id: string, rejectReason?: string) => mixed,
-  setShowReUpload: (id: string, showReUpload?: boolean) => mixed,
-};
-
-type State = {
-  validFiles: Array<FileObject>,
-  rejectedFiles: Array<FileObject>,
-};
-
-type Action =
-  | {type: 'ADD_VALID_FILES', files: Array<FileObject>}
-  | {type: 'ADD_REJECTED_FILES', files: Array<FileObject>}
-  | {type: 'REMOVE_FILE', id: string}
-  | {type: 'CLEAR_FILES'}
-  | {type: 'UPDATE_FILE_PROGRESS', id: string, progress: FileProgress}
-  | {type: 'SET_FILE_SUCCESS', id: string, successMessage?: string}
-  | {type: 'SET_FILE_REJECT', id: string, rejectReason?: string}
-  | {type: 'SET_FILE_RE_UPLOAD', id: string, showReUpload?: boolean};
-
-const initialState: State = {
-  validFiles: [],
-  rejectedFiles: [],
-};
-
-const reducer = (state: State, action: Action): State => {
-  switch (action.type) {
-  case 'ADD_VALID_FILES':
-    return {
-      ...state,
-      validFiles: [...state.validFiles, ...action.files],
-    };
-  case 'ADD_REJECTED_FILES':
-    return {
-      ...state,
-      rejectedFiles: [...state.rejectedFiles, ...action.files],
-    };
-  case 'REMOVE_FILE':
-    return {
-      ...state,
-      validFiles: state.validFiles.filter((file) => file.id !== action.id),
-      rejectedFiles: state.rejectedFiles.filter(
-        (file) => file.id !== action.id,
-      ),
-    };
-  case 'CLEAR_FILES':
-    return {
-      validFiles: [],
-      rejectedFiles: [],
-    };
-  case 'UPDATE_FILE_PROGRESS':
-    return {
-      ...state,
-      validFiles: state.validFiles.map((file) =>
-        file.id === action.id
-          ? {
-            ...file,
-            progress: action.progress,
-            showReUpload: false,
-            successMessage: undefined,
-            rejectReason: undefined,
-          }
-          : file,
-      ),
-      rejectedFiles: state.rejectedFiles.map((file) =>
-        file.id === action.id
-          ? {
-            ...file,
-            progress: action.progress,
-            showReUpload: false,
-            successMessage: undefined,
-            rejectReason: undefined,
-          }
-          : file,
-      ),
-    };
-  case 'SET_FILE_RE_UPLOAD':
-    return {
-      ...state,
-      validFiles: state.validFiles.map((file) =>
-        file.id === action.id
-          ? {...file, progress: undefined, showReUpload: action.showReUpload}
-          : file,
-      ),
-      rejectedFiles: state.rejectedFiles.map((file) =>
-        file.id === action.id
-          ? {...file, progress: undefined, showReUpload: action.showReUpload}
-          : file,
-      ),
-    };
-  case 'SET_FILE_SUCCESS': {
-    // Note: When a file is accepted manually we would move a file from rejected files(if found) to valid files first
-    const fileIndex = state.rejectedFiles.findIndex(
-      (file) => file.id === action.id,
-    );
-    let validFiles = [...state.validFiles];
-    const rejectedFiles = [...state.rejectedFiles];
-
-    if (fileIndex !== -1) {
-      const file = rejectedFiles[fileIndex];
-      rejectedFiles.splice(fileIndex, 1);
-      validFiles = [...validFiles, {...file}];
-    }
-
-    validFiles = validFiles.map((file) =>
-      file.id === action.id
-        ? {
-          ...file,
-          success: true,
-          successMessage: action.successMessage,
-          reject: false,
-          rejectReason: undefined,
-          progress: undefined,
-          showReUpload: false,
-        }
-        : file,
-    );
-
-    return {
-      ...state,
-      validFiles,
-      rejectedFiles,
-    };
-  }
-  case 'SET_FILE_REJECT': {
-    // Note: When a file is rejected manually we would move a file from valid files(if found) to rejected files first
-    const fileIndex = state.validFiles.findIndex(
-      (file) => file.id === action.id,
-    );
-    const validFiles = [...state.validFiles];
-    let rejectedFiles = [...state.rejectedFiles];
-
-    if (fileIndex !== -1) {
-      const file = validFiles[fileIndex];
-      validFiles.splice(fileIndex, 1);
-      rejectedFiles = [...rejectedFiles, {...file}];
-    }
-
-    rejectedFiles = rejectedFiles.map((file) =>
-      file.id === action.id
-        ? {
-          ...file,
-          reject: true,
-          rejectReason: action.rejectReason,
-          success: false,
-          successMessage: undefined,
-          progress: undefined,
-          showReUpload: false,
-        }
-        : file,
-    );
-
-    return {
-      ...state,
-      validFiles,
-      rejectedFiles,
-    };
-  }
-
-  default:
-    return state;
-  }
-};
-
-// This is a map of error codes returned by react-dropzone and their corresponding error messages
-const DROPZONE_ERROR_MESSAGES = {
-  'file-too-large': 'File exceeds maximum size',
-  'file-invalid-type': 'Wrong file type',
-  'too-many-files': 'Too many files',
-  'file-too-small': 'File is too small',
-};
-
-export const useFileUpload = ({
-  maxFiles = 1,
-  maxSize,
-  accept,
-  disabled,
-  onValidFilesDrop,
-  onRejectedFilesDrop,
-  onFileClear,
-  onClear,
-}: FileUploadBaseProps): UseFileUploadReturnProps => {
-  const [state, dispatch] = React.useReducer(reducer, initialState);
-
-  // Callbacks for when files are dropped / selected and are valid
-  const handleDropAccepted = (acceptedFiles: Array<File>) => {
-    const validFiles = acceptedFiles.map((file) => ({
-      file,
-      id: uuid(),
-      reject: false,
-      rejectReason: undefined,
-      success: true,
-      successMessage: undefined,
-      progress: undefined,
-      showReUpload: false,
-    }));
-    dispatch({type: 'ADD_VALID_FILES', files: validFiles});
-    onValidFilesDrop?.(validFiles);
-  };
-
-  // Callbacks for when files are dropped / selected and are invalid
-  const handleDropRejected = (fileRejections: Array<FileRejection>) => {
-    const rejectedFiles = fileRejections.map(({file, errors}) => ({
-      file,
-      id: uuid(),
-      reject: true,
-      rejectReason:
-        DROPZONE_ERROR_MESSAGES[errors[0].code] ||
-        'Some error occurred uploading this file',
-      success: false,
-      successMessage: undefined,
-      progress: undefined,
-      showReUpload: false,
-    }));
-    dispatch({type: 'ADD_REJECTED_FILES', files: rejectedFiles});
-    onRejectedFilesDrop?.(rejectedFiles);
-  };
-
-  const handleFileClear = (id: string) => {
-    dispatch({type: 'REMOVE_FILE', id});
-    onFileClear?.(id);
-  };
-
-  const handleClear = () => {
-    dispatch({type: 'CLEAR_FILES'});
-    onClear?.();
-  };
-
-  const moveFileToProgress = (id: string, progress: FileProgress) => {
-    dispatch({type: 'UPDATE_FILE_PROGRESS', id, progress});
-  };
-
-  // Note(Nishant): If the file is found in rejected files, we move it to valid files first in the reducer
-  const moveFileToSuccess = (id: string, successMessage?: string) => {
-    dispatch({type: 'SET_FILE_SUCCESS', id, successMessage});
-  };
-
-  // Note(Nishant): If the file is found in valid files, we move it to rejected files first in the reducer
-  const moveFileToReject = (id: string, rejectReason?: string) => {
-    dispatch({type: 'SET_FILE_REJECT', id, rejectReason});
-  };
-
-  // Note: This is used to show the re-upload button on the file
-  const setShowReUpload = (id: string, showReUpload?: boolean) => {
-    dispatch({type: 'SET_FILE_RE_UPLOAD', id, showReUpload});
-  };
-
-  const totalFiles = state.validFiles.length + state.rejectedFiles.length;
-  const shouldAcceptFiles =
-    !disabled && (maxFiles === 0 || totalFiles < maxFiles);
-
-  // We are using react-dropzone's useDropzone hook to get the drag and drop props
-  const {isDragActive, getRootProps, getInputProps} = useDropzone({
-    maxFiles,
-    multiple: maxFiles > 1 || maxFiles === 0,
-    maxSize,
-    accept,
-    disabled,
-    noClick: !shouldAcceptFiles,
-    noDrag: !shouldAcceptFiles,
-    onDropAccepted: handleDropAccepted,
-    onDropRejected: handleDropRejected,
-  });
-
-  return {
-    validFiles: state.validFiles,
-    rejectedFiles: state.rejectedFiles,
-    shouldAcceptFiles,
-    isDragActive,
-    getRootProps,
-    getInputProps,
-    handleFileClear,
-    handleClear,
-    moveFileToProgress,
-    moveFileToSuccess,
-    moveFileToReject,
-    setShowReUpload,
-  };
-};

package/lib/hooks/useFilteredOptions/index.js.flow

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

package/lib/hooks/useFilteredOptions/useFilteredOptions.js.flow

@@ -1,81 +0,0 @@
-// @flow strict
-import * as React from 'react';
-
-
-export type GroupTitleOption<V> = {
-  groupTitle: React.Node,
-  options?: V[],
-  showLineDivider?: boolean,
-};
-
-// TODO: V should generic with constraints.
-
-export function useFilteredOptions<V>({
-  searchTerm,
-  options = [],
-  excludedKeys = [],
-  groupTitleOptions = [],
-  searchOptionsBy = (option: V, searchTerm: string): boolean => {
-    // $FlowFixMe
-    const {label, key}: {label: string, key: string} = option;
-
-    return (
-      key.toLowerCase().includes(searchTerm) ||
-      (label ? label.toLowerCase().includes(searchTerm) : false)
-    );
-  },
-}: {
-  searchTerm: string,
-  options?: V[],
-  groupTitleOptions?: GroupTitleOption<V>[],
-  excludedKeys?: string[],
-  searchOptionsBy?: (option: V, searchTerm: string) => boolean,
-}): {filteredOptions?: V[], filteredGroupTitleOptions?: GroupTitleOption<V>[]} {
-  // Memoize the filterExcluded function for performance
-  const filterExcluded = React.useCallback(
-    (list?: V[]): V[] =>
-      // $FlowFixMe - list has key property
-      list ? list.filter((option) => !excludedKeys.includes(option.key)) : [],
-    [excludedKeys],
-  );
-
-  return React.useMemo(() => {
-    const trimmedValue = (searchTerm || '').trim().toLowerCase();
-
-    // Initialize filteredOptions as an empty array if options are not provided
-    let filteredOptions: V[] = [];
-    if (options.length) {
-      filteredOptions = filterExcluded(options);
-
-      // Apply search term filtering
-      if (trimmedValue) {
-        filteredOptions = filteredOptions.filter((option) =>
-          searchOptionsBy(option, trimmedValue),
-        );
-      }
-    }
-
-    let filteredGroupTitleOptions: GroupTitleOption<V>[] = [];
-
-    // Process groupTitleOptions if provided
-    if (Array.isArray(groupTitleOptions) && groupTitleOptions.length) {
-      filteredGroupTitleOptions = groupTitleOptions
-        .map((group) => {
-          const filtered = filterExcluded(group.options).filter(
-            (option) => !trimmedValue || searchOptionsBy(option, trimmedValue),
-          );
-          return {...group, options: filtered};
-        })
-        .filter((group) => (group.options ? group.options.length > 0 : false));
-    }
-
-    return {filteredOptions, filteredGroupTitleOptions};
-  }, [
-    searchTerm,
-    options,
-    excludedKeys,
-    groupTitleOptions,
-    searchOptionsBy,
-    filterExcluded,
-  ]);
-}

package/lib/hooks/useInfiniteScroll/index.js.flow

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

package/lib/hooks/useInfiniteScroll/useInfiniteScroll.js.flow

@@ -1,82 +0,0 @@
-// @flow strict
-import * as React from 'react';
-
-
-type InfiniteScrollOptions = {
-  itemSize: number | ((index: number) => number),
-  threshold: number,
-  itemsLength: number,
-  hasNextPage: boolean,
-  loadMoreItems: () => Promise<void>,
-  containerHeight: number,
-  isVariableSizeList?: boolean,
-};
-
-export function useInfiniteScroll({
-  itemSize,
-  threshold,
-  itemsLength,
-  hasNextPage,
-  loadMoreItems,
-  containerHeight,
-  isVariableSizeList,
-}: InfiniteScrollOptions): (scrollData: {
-  scrollOffset: number,
-  scrollDirection: 'forward' | 'backward',
-}) => void {
-  const [isLoading, setIsLoading] = React.useState(false);
-  const loadingRef = React.useRef(false);
-
-  const handleLoadMore = React.useCallback(async () => {
-    if (!hasNextPage || isLoading || loadingRef.current) {
-      return;
-    }
-
-    loadingRef.current = true;
-    setIsLoading(true);
-
-    try {
-      await loadMoreItems();
-    } catch (err) {
-      console.error('Error loading more items:', err);
-    } finally {
-      loadingRef.current = false;
-      setIsLoading(false);
-    }
-  }, [hasNextPage, isLoading, loadMoreItems]);
-
-  return React.useCallback(
-    ({scrollOffset, scrollDirection}) => {
-      if (scrollDirection !== 'forward') {
-        return;
-      }
-
-      let totalSize = 0;
-      if (isVariableSizeList && typeof itemSize === 'function') {
-        for (let i = 0; i < itemsLength; i++) {
-          totalSize += itemSize(i);
-        }
-      } else if (typeof itemSize === 'number') {
-        totalSize = itemsLength * itemSize;
-      }
-
-      if (
-        scrollOffset > totalSize - containerHeight - threshold &&
-        hasNextPage &&
-        !isLoading
-      ) {
-        handleLoadMore();
-      }
-    },
-    [
-      itemSize,
-      threshold,
-      isLoading,
-      itemsLength,
-      hasNextPage,
-      handleLoadMore,
-      containerHeight,
-      isVariableSizeList,
-    ],
-  );
-}

package/lib/hooks/useInputState/index.js.flow

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

package/lib/hooks/useInputState/useInputState.js.flow

@@ -1,28 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-
-
-type ReturnType = [
-  string,
-  (event: SyntheticInputEvent<HTMLInputElement>) => void,
-];
-
-/**
- * Simple Hook to use with input tag. The primary purpose is an abstraction over input onChange property.
- * () => {
- *   const [value, onChange] = useInputState("");
- *
- *   return <Input type="text" value={value} onChange={onChange} />;
- * }
- */
-export const useInputState = (initialState: string = ''): ReturnType => {
-  const [state, setState] = React.useState(initialState);
-
-  const setInputState = React.useCallback(
-    (event) => setState(event && event.target.value),
-    [],
-  );
-
-  return [state, setInputState];
-};

package/lib/hooks/useLockedBody/index.js.flow

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