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

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

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

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

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

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

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

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

@@ -0,0 +1,87 @@
+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/useInputState/index.d.ts

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

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

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

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

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

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

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

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

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

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

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