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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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