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

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

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

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

package/lib/hooks/useInputState/useInputState.js

@@ -17,9 +17,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 const useInputState = function () {
   let initialState = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   const [state, setState] = React.useState(initialState);
-  const setInputState = React.useCallback(
-  // @ts-ignore - TS7006 - Parameter 'event' implicitly has an 'any' type.
-  event => setState(event && event.target.value), []);
+  const setInputState = React.useCallback(event => setState(event && event.target.value), []);
   return [state, setInputState];
 };
 exports.useInputState = useInputState;

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

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

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

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

@@ -0,0 +1,55 @@
+// @flow strict
+
+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.js.flow

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

package/lib/hooks/useModal/useModal.js.flow

@@ -0,0 +1,39 @@
+// @flow strict
+
+import {useCallback, useState} from 'react';
+
+import {motionDurationNormal} from '../../styles/variables/_motion';
+
+
+export type UseModalExtras = {
+  // TODO(Ashwini): Add type for extras
+  // $FlowFixMe
+  [key: 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.js

@@ -8,7 +8,6 @@ var _react = require("react");
 const useMountTransition = (isMounted, unmountDelay) => {
   const [isTransitioning, setIsTransitioning] = (0, _react.useState)(false);
   (0, _react.useEffect)(() => {
-    // @ts-ignore - TS7034 - Variable 'timeoutId' implicitly has type 'any' in some locations where its type cannot be determined.
     let timeoutId;
     if (isMounted && !isTransitioning) {
       setIsTransitioning(true);
@@ -16,7 +15,6 @@ const useMountTransition = (isMounted, unmountDelay) => {
       timeoutId = setTimeout(() => setIsTransitioning(false), unmountDelay);
     }
     return () => {
-      // @ts-ignore - TS7005 - Variable 'timeoutId' implicitly has an 'any' type.
       clearTimeout(timeoutId);
     };
   }, [unmountDelay, isMounted, isTransitioning]);

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

@@ -0,0 +1,27 @@
+// @flow strict
+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.js.flow

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

package/lib/hooks/usePagination/usePagination.js

@@ -78,7 +78,6 @@ const usePagination = props => {
   // Convert the basic item list to contain PaginationItem props objects
   const items = itemList.map((item, idx) => typeof item === 'number' ? {
     id: idx.toString(),
-    // @ts-ignore - TS7006 - Parameter 'event' implicitly has an 'any' type.
     onClick: event => {
       handleClick(event, item);
     },
@@ -88,7 +87,6 @@ const usePagination = props => {
     disabled
   } : {
     id: idx.toString(),
-    // @ts-ignore - TS7006 - Parameter 'event' implicitly has an 'any' type.
     onClick: event => {
       handleClick(event, buttonPage(item));
     },
@@ -98,7 +96,6 @@ const usePagination = props => {
     disabled: disabled || item.indexOf('ellipsis') === -1 && (item === 'next' || item === 'last' ? currentPage >= totalPages : currentPage <= 1)
   });
   return {
-    // @ts-ignore - TS2322 - Type '{ id: string; onClick: (event: any) => void; type: string; page: number | null; selected: boolean; disabled: boolean; }[]' is not assignable to type 'PaginationItemProps[]'.
     items
   };
 };

package/lib/hooks/usePagination/usePagination.js.flow

@@ -0,0 +1,155 @@
+// @flow strict
+
+import type {
+  PaginationBaseProps,
+  PaginationItemProps,
+} from '../../components/Pagination';
+import {range} from '../../utils/helpers';
+
+
+export const usePagination = (
+  props: PaginationBaseProps,
+): {
+  items: ?(PaginationItemProps[]),
+} => {
+  const {
+    boundaryCount = 1,
+    totalPages = 1,
+    disabled = false,
+    hideNextButton = false,
+    hidePrevButton = false,
+    onChange: handleChange,
+    currentPage = 1,
+    showFirstButton = false,
+    showLastButton = false,
+    siblingCount = 1,
+    style = 'primary',
+  } = props;
+
+  let itemList = [];
+
+  const handleClick = (event, value) => {
+    if (handleChange) {
+      handleChange(value, event);
+    }
+  };
+
+  const startPages = range(1, Math.min(boundaryCount, totalPages));
+  const endPages = range(
+    Math.max(totalPages - boundaryCount + 1, boundaryCount + 1),
+    totalPages,
+  );
+
+  const siblingsStart = Math.max(
+    Math.min(
+      // Natural start
+      currentPage - siblingCount,
+      // Lower boundary when currentPage is high
+      totalPages - boundaryCount - siblingCount * 2 - 1,
+    ),
+    // Greater than startPages
+    boundaryCount + 2,
+  );
+
+  const siblingsEnd = Math.min(
+    Math.max(
+      // Natural end
+      currentPage + siblingCount,
+      // Upper boundary when currentPage is low
+      boundaryCount + siblingCount * 2 + 2,
+    ),
+    // Less than endPages
+    endPages.length > 0 ? endPages[0] - 2 : totalPages - 1,
+  );
+
+  // Basic list of items to render
+  // For primary style: itemList = ['first', 'previous', 1, 'start-ellipsis', 4, 5, 6, 'end-ellipsis', 10, 'next', 'last']
+  // For secondary style: itemList = ['first', 'previous', 'next', 'last']
+  if (style === 'primary') {
+    itemList = [
+      ...(showFirstButton ? ['first'] : []),
+      ...(hidePrevButton ? [] : ['previous']),
+      ...startPages,
+
+      // Start ellipsis
+      // eslint-disable-next-line no-nested-ternary
+      ...(siblingsStart > boundaryCount + 2
+        ? ['start-ellipsis']
+        : boundaryCount + 1 < totalPages - boundaryCount
+          ? [boundaryCount + 1]
+          : []),
+
+      // Sibling pages
+      ...range(siblingsStart, siblingsEnd),
+
+      // End ellipsis
+      // eslint-disable-next-line no-nested-ternary
+      ...(siblingsEnd < totalPages - boundaryCount - 1
+        ? ['end-ellipsis']
+        : totalPages - boundaryCount > boundaryCount
+          ? [totalPages - boundaryCount]
+          : []),
+
+      ...endPages,
+      ...(hideNextButton ? [] : ['next']),
+      ...(showLastButton ? ['last'] : []),
+    ];
+  } else if (style === 'secondary') {
+    itemList = [
+      ...(showFirstButton ? ['first'] : []),
+      ...(hidePrevButton ? [] : ['previous']),
+      ...(hideNextButton ? [] : ['next']),
+      ...(showLastButton ? ['last'] : []),
+    ];
+  }
+
+  // Map the button type to its page number
+  const buttonPage = (type) => {
+    switch (type) {
+    case 'first':
+      return 1;
+    case 'previous':
+      return currentPage - 1;
+    case 'next':
+      return currentPage + 1;
+    case 'last':
+      return totalPages;
+    default:
+      return null;
+    }
+  };
+
+  // Convert the basic item list to contain PaginationItem props objects
+  const items = itemList.map((item, idx) =>
+    typeof item === 'number'
+      ? {
+        id: idx.toString(),
+        onClick: (event) => {
+          handleClick(event, item);
+        },
+        type: 'page',
+        page: item,
+        selected: item === currentPage,
+        disabled,
+      }
+      : {
+        id: idx.toString(),
+        onClick: (event) => {
+          handleClick(event, buttonPage(item));
+        },
+        type: item,
+        page: buttonPage(item),
+        selected: false,
+        disabled:
+            disabled ||
+            (item.indexOf('ellipsis') === -1 &&
+              (item === 'next' || item === 'last'
+                ? currentPage >= totalPages
+                : currentPage <= 1)),
+      },
+  );
+
+  return {
+    items,
+  };
+};

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

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

package/lib/hooks/useReferenceElementWidth/useReferenceElementWidth.js.flow

@@ -0,0 +1,23 @@
+// @flow strict
+import * as React from 'react';
+
+import {sizeFluid} from '../../styles/variables/_size';
+
+
+const MIN_FLUID_WIDTH = 160;
+
+export function useReferenceElementWidth(
+  ref: ?HTMLElement,
+  minWidth: number = MIN_FLUID_WIDTH,
+): string {
+  const [width, setWidth] = React.useState(sizeFluid);
+
+  const refWidth = ref?.offsetWidth;
+  React.useLayoutEffect(() => {
+    if (refWidth) {
+      setWidth(Math.max(refWidth, minWidth) + 'px');
+    }
+  }, [refWidth, minWidth]);
+
+  return width;
+}

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

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

package/lib/hooks/useResizeObserver/useResizeObserver.js

@@ -14,14 +14,11 @@ function useResizeObserver() {
     if (!node) {
       return;
     }
-
-    // @ts-ignore - TS2345 - Argument of type '([entry]: [any]) => void' is not assignable to parameter of type 'ResizeObserverCallback'.
     const resizeObserver = new ResizeObserver(_ref => {
       let [entry] = _ref;
       setHeight(entry.contentRect.height);
     });
     resizeObserver.observe(node);
-    // @ts-ignore - TS2339 - Property 'getBoundingClientRect' does not exist on type 'never'.
     setHeight(node.getBoundingClientRect().height);
     return () => {
       resizeObserver.disconnect();

package/lib/hooks/useResizeObserver/useResizeObserver.js.flow

@@ -0,0 +1,28 @@
+// @flow strict
+import * as React from 'react';
+
+
+export function useResizeObserver(): [React.Ref<'div'>, number] {
+  const ref = React.useRef(null);
+  const [height, setHeight] = React.useState(0);
+
+  React.useEffect(() => {
+    const node = ref.current;
+    if (!node) {
+      return;
+    }
+
+    const resizeObserver = new ResizeObserver(([entry]) => {
+      setHeight(entry.contentRect.height);
+    });
+
+    resizeObserver.observe(node);
+    setHeight(node.getBoundingClientRect().height);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+
+  return [ref, height];
+}

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

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

package/lib/hooks/useToastPortal/useToastPortal.js

@@ -12,16 +12,16 @@ const useToastPortal = _ref => {
     toastRef
   } = _ref;
   const [loaded, setLoaded] = (0, _react.useState)(false);
-
-  // @ts-ignore - TS2345 - Argument of type '() => () => HTMLDivElement' is not assignable to parameter of type 'EffectCallback'.
   (0, _react.useEffect)(() => {
     const div = document.createElement('div');
 
-    // @ts-ignore - TS2540 - Cannot assign to 'style' because it is a read-only property.
+    // $FlowFixMe[incompatible-type];
     div.style = `position: fixed; bottom: ${_space.spaceMedium}; left: ${_space.spaceMedium}; z-index: ${_elevation.elevationToast};`;
+    /* $FlowIgnore */
     document.body.prepend(div);
     toastRef.current = div;
     setLoaded(true);
+    /* $FlowIgnore */
     return () => document.body.removeChild(div);
   }, []);
   return {

package/lib/hooks/useToastPortal/useToastPortal.js.flow

@@ -0,0 +1,30 @@
+// @flow strict
+import {useEffect, useState} from 'react';
+
+import {elevationToast} from '../../styles/variables/_elevation';
+import {spaceMedium} from '../../styles/variables/_space';
+
+
+type UseToastPortal = {
+  toastRef: {current: HTMLDivElement | null},
+};
+
+export const useToastPortal = ({
+  toastRef,
+}: UseToastPortal): {loaded: boolean} => {
+  const [loaded, setLoaded] = useState(false);
+
+  useEffect(() => {
+    const div = document.createElement('div');
+
+    // $FlowFixMe[incompatible-type];
+    div.style = `position: fixed; bottom: ${spaceMedium}; left: ${spaceMedium}; z-index: ${elevationToast};`;
+    /* $FlowIgnore */
+    document.body.prepend(div);
+    toastRef.current = div;
+    setLoaded(true);
+    /* $FlowIgnore */
+    return () => document.body.removeChild(div);
+  }, []);
+  return {loaded};
+};

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

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

package/lib/hooks/useToggle/useToggle.js.flow

@@ -0,0 +1,17 @@
+// @flow strict
+
+import {useCallback, useState} from 'react';
+
+
+export function useToggle(
+  initialState: boolean = false,
+): [boolean, (newValue: boolean) => void] {
+  // Initialize the state
+  const [stateValue, setStateValue] = useState(initialState);
+
+  // Define and memorize toggle function in case we pass down the component,
+  // This function change the boolean value to it's opposite value
+  const toggle = useCallback(() => setStateValue((state) => !state), []);
+
+  return [stateValue, toggle];
+}

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

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

package/lib/hooks/useWindowSize/useWindowSize.js.flow

@@ -0,0 +1,41 @@
+// @flow strict
+
+import {useEffect, useState} from 'react';
+import {throttle} from 'lodash';
+
+
+type WindowSize = {
+  width: number,
+  height: number,
+};
+
+const THROTTLE_DURATION = 200;
+
+export function useWindowSize(): WindowSize {
+  const [windowSize, setWindowSize] = useState<WindowSize>({
+    width: typeof window !== 'undefined' ? window.innerWidth : 0,
+    height: typeof window !== 'undefined' ? window.innerHeight : 0,
+  });
+
+  useEffect(() => {
+    const updateSize = throttle(() => {
+      const {innerWidth, innerHeight} = window;
+      setWindowSize((prevSize) => {
+        if (prevSize.width !== innerWidth || prevSize.height !== innerHeight) {
+          return {width: innerWidth, height: innerHeight};
+        }
+        return prevSize;
+      });
+    }, THROTTLE_DURATION);
+
+    window.addEventListener('resize', updateSize);
+    updateSize();
+
+    return () => {
+      window.removeEventListener('resize', updateSize);
+      updateSize.cancel();
+    };
+  }, []);
+
+  return windowSize;
+}

package/lib/index.js.flow

@@ -0,0 +1,7 @@
+// @flow strict
+
+export * from './components';
+export * from './hooks';
+export * from './styles';
+export * from './types';
+export * from './utils';