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

package/lib/hooks/useCopyToClipboard/useCopyToClipboard.d.ts

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

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

package/lib/hooks/useDebounce/useDebounce.d.ts

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

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

package/lib/hooks/useFileUpload/useFileUpload.d.ts

@@ -1,342 +0,0 @@
-import * as React from 'react';
-// @ts-expect-error[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: (arg0: unknown) => unknown;
-  getInputProps: (arg0: unknown) => unknown;
-  handleFileClear: (id: string) => unknown;
-  handleClear: () => unknown;
-  moveFileToProgress: (id: string, progress: FileProgress) => unknown;
-  moveFileToSuccess: (id: string, successMessage?: string) => unknown;
-  moveFileToReject: (id: string, rejectReason?: string) => unknown;
-  setShowReUpload: (id: string, showReUpload?: boolean) => unknown;
-};
-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.d.ts

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

package/lib/hooks/useFilteredOptions/useFilteredOptions.d.ts

@@ -1,87 +0,0 @@
-import * as React from 'react';
-export type GroupTitleOption<V> = {
-  groupTitle: React.ReactNode;
-  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.d.ts

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

package/lib/hooks/useInfiniteScroll/useInfiniteScroll.d.ts

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

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

package/lib/hooks/useInputState/useInputState.d.ts

@@ -1,22 +0,0 @@
-import * as React from 'react';
-type ReturnType = [
-  string,
-  (event: React.SyntheticEvent<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.d.ts

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

package/lib/hooks/useLockedBody/useLockedBody.d.ts

@@ -1,46 +0,0 @@
-import {useEffect, useLayoutEffect, useState} from 'react';
-type ReturnType = [boolean, (locked: boolean) => void];
-export function useLockedBody(initialLocked: boolean = false): ReturnType {
-  const [locked, setLocked] = useState(initialLocked);
-  // Do the side effect before render
-  useLayoutEffect(() => {
-    if (!locked) {
-      return;
-    }
-
-    // Save initial body style
-    const originalOverflow = document.body?.style.overflow || '';
-    const originalPaddingRight = document.body?.style.paddingRight || '';
-
-    // Lock body scroll
-    if (document.body) {
-      document.body.style.overflow = 'hidden';
-    }
-
-    // Get the scrollBar width
-    // TODO(Nishant): Fetch the scrollBar width from the browser
-    const scrollBarWidth = 0;
-
-    // Avoid width reflow
-    if (!!scrollBarWidth && document.body) {
-      document.body.style.paddingRight = `${scrollBarWidth}px`;
-    }
-
-    return () => {
-      if (document.body) {
-        document.body.style.overflow = originalOverflow;
-      }
-
-      if (!!scrollBarWidth && document.body) {
-        document.body.style.paddingRight = originalPaddingRight;
-      }
-    };
-  }, [locked]);
-  // Update state if initialValue changes
-  useEffect(() => {
-    if (locked !== initialLocked) {
-      setLocked(initialLocked);
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [initialLocked]);
-  return [locked, setLocked];
-}

package/lib/hooks/useModal/index.d.ts

@@ -1 +0,0 @@
-export * from './useModal';

package/lib/hooks/useModal/useModal.d.ts

@@ -1,32 +0,0 @@
-import {useCallback, useState} from 'react';
-import {motionDurationNormal} from '../../styles/variables/_motion';
-export type UseModalExtras = Record<string, any>;
-export type UseModalReturnType = {
-  isOpen: boolean;
-  openModal: (extras?: UseModalExtras) => void;
-  closeModal: () => void;
-  extras: UseModalExtras;
-};
-export const useModal = (): UseModalReturnType => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [extras, setExtras] = useState({});
-  const openModal = useCallback((props: UseModalExtras = {}) => {
-    setExtras(props);
-    setIsOpen(true);
-  }, []);
-
-  const closeModal = () => {
-    setIsOpen(false);
-    // Since the Dialog close uses animation and its duration is motionDurationNormal, we should clear the data after the animation duration for better user experience
-    setTimeout(() => {
-      setExtras({});
-    }, parseInt(motionDurationNormal));
-  };
-
-  return {
-    isOpen,
-    openModal,
-    closeModal,
-    extras,
-  };
-};

package/lib/hooks/useMountTransition/index.d.ts

@@ -1,24 +0,0 @@
-import {useEffect, useState} from 'react';
-
-const useMountTransition = (
-  isMounted: boolean,
-  unmountDelay: number,
-): boolean => {
-  const [isTransitioning, setIsTransitioning] = useState(false);
-  useEffect(() => {
-    let timeoutId;
-
-    if (isMounted && !isTransitioning) {
-      setIsTransitioning(true);
-    } else if (!isMounted && isTransitioning) {
-      timeoutId = setTimeout(() => setIsTransitioning(false), unmountDelay);
-    }
-
-    return () => {
-      clearTimeout(timeoutId);
-    };
-  }, [unmountDelay, isMounted, isTransitioning]);
-  return isTransitioning;
-};
-
-export default useMountTransition;

package/lib/hooks/usePagination/index.d.ts

@@ -1 +0,0 @@
-export * from './usePagination';