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

package/lib/hooks/usePagination/usePagination.ts

@@ -1,151 +0,0 @@
-import type {PaginationBaseProps, PaginationItemProps} from '../../components/Pagination';
-import {range} from '../../utils/helpers';
-
-
-export const usePagination = (props: PaginationBaseProps): {
-  items: PaginationItemProps[] | null | undefined;
-} => {
-  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: Array<never> | Array<string> | Array<number | string> = [];
-
-  const handleClick = (event: React.SyntheticEvent<HTMLElement>, value: null | number) => {
-    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: string) => {
-    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(),
-// @ts-ignore - TS7006 - Parameter 'event' implicitly has an 'any' type.
-        onClick: (event) => {
-          handleClick(event, item);
-        },
-        type: 'page',
-        page: item,
-        selected: item === currentPage,
-        disabled,
-      }
-      : {
-        id: idx.toString(),
-// @ts-ignore - TS7006 - Parameter 'event' implicitly has an 'any' type.
-        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 {
-// @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/useReferenceElementWidth/index.ts

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

package/lib/hooks/useReferenceElementWidth/useReferenceElementWidth.ts

@@ -1,19 +0,0 @@
-import * as React from 'react';
-
-import {sizeFluid} from '../../styles/variables/_size';
-
-
-const MIN_FLUID_WIDTH = 160;
-
-export function useReferenceElementWidth(ref?: HTMLElement | null, 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.ts

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

package/lib/hooks/useResizeObserver/useResizeObserver.ts

@@ -1,29 +0,0 @@
-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;
-    }
-
-// @ts-ignore - TS2345 - Argument of type '([entry]: [any]) => void' is not assignable to parameter of type 'ResizeObserverCallback'.
-    const resizeObserver = new ResizeObserver(([entry]: [any]) => {
-      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();
-    };
-  }, []);
-
-  return [ref, height];
-}

package/lib/hooks/useToastPortal/index.ts

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

package/lib/hooks/useToastPortal/useToastPortal.ts

@@ -1,34 +0,0 @@
-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);
-
-// @ts-ignore - TS2345 - Argument of type '() => () => HTMLDivElement' is not assignable to parameter of type 'EffectCallback'.
-  useEffect(() => {
-    const div = document.createElement('div');
-
-// @ts-ignore - TS2540 - Cannot assign to 'style' because it is a read-only property.
-    div.style = `position: fixed; bottom: ${spaceMedium}; left: ${spaceMedium}; z-index: ${elevationToast};`;
-    document.body.prepend(div);
-    toastRef.current = div;
-    setLoaded(true);
-    return () => document.body.removeChild(div);
-  }, []);
-  return {loaded};
-};

package/lib/hooks/useToggle/index.ts

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

package/lib/hooks/useToggle/useToggle.stories.tsx

@@ -1,70 +0,0 @@
-import React from 'react';
-
-import {Button} from '../../components/Button';
-import {BodyLarge} from '../../components/Text';
-
-import {useToggle} from './useToggle';
-
-import css from './useToggle.stories.module.css';
-
-
-export default {
-  tags: ['autodocs'],
-  title: 'Hooks/useToggle',
-  component: useToggle,
-  parameters: {
-    docs: {
-      description: {
-        component: `
-\`\`\`js
-import { useToggle } from "@spaced-out/ui-design-system/lib/hooks/useToggle";
-\`\`\`
-The \`useToggle\` hook is a custom hook that provides a boolean state value and a function to toggle its value between true and false.
-
-### Props Accepted
-- \`initialState\` (optional): The initial state value. Defaults to false.
-
-### Props Returned
-- \`stateValue\`: The current state value.
-- \`toggle\`: A function to toggle the state value.
-
-### Usage
-\`\`\`jsx
-import { useToggle } from './useToggle';
-
-const MyComponent = () => {
-  const [isActive, toggleActive] = useToggle(false);
-
-  return (
-    <div>
-      <button onClick={toggleActive}>
-        Toggle
-      </button>
-      {isActive && <BodyLarge>Active</BodyLarge>}
-    </div>
-  );
-};
-
-export default MyComponent;
-\`\`\`
-          `,
-      },
-    },
-  },
-};
-
-export const Example = (): React.ReactElement<React.ComponentProps<'div'>> => {
-  const [isActive, toggleActive] = useToggle(false);
-
-  return (
-    <div>
-      {}
-{ /* @ts-ignore - TS2769 - No overload matches this call. */}
-      <Button className={css.button} onClick={toggleActive}>
-        Toggle
-      </Button>
-      {isActive && <BodyLarge className={css.text}>Active</BodyLarge>}
-      {!isActive && <BodyLarge className={css.text}>InActive</BodyLarge>}
-    </div>
-  );
-};

package/lib/hooks/useToggle/useToggle.ts

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

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

package/lib/hooks/useWindowSize/useWindowSize.stories.tsx

@@ -1,62 +0,0 @@
-import React from 'react';
-
-import {BodyLarge} from '../../components/Text';
-
-import {useWindowSize} from './useWindowSize';
-
-import css from './useWindowSize.stories.module.css';
-
-
-export default {
-  tags: ['autodocs'],
-  title: 'Hooks/useWindowSize',
-  component: useWindowSize,
-  parameters: {
-    docs: {
-      description: {
-        component: `
-\`\`\`js
-import { useWindowSize } from "@spaced-out/ui-design-system/lib/hooks/useWindowSize";
-\`\`\`
-The \`useWindowSize\` hook is a custom hook that provides the current dimensions of the window as an object with the \`width\` and \`height\` properties.
-
-### Props Returned
-- \`windowSize\`: An object containing the current dimensions of the window.
-
-### Usage
-\`\`\`jsx
-import { useWindowSize } from './useWindowSize';
-
-const MyComponent = () => {
-  const windowSize = useWindowSize();
-
-  return (
-    <div>
-      <BodyLarge>Window Width: {windowSize.width}px</BodyLarge>
-      <BodyLarge>Window Height: {windowSize.height}px</BodyLarge>
-    </div>
-  );
-};
-
-export default MyComponent;
-\`\`\`
-          `,
-      },
-    },
-  },
-};
-
-export const Example = (): React.ReactElement<React.ComponentProps<'div'>> => {
-  const windowSize = useWindowSize();
-
-  return (
-    <div>
-      <BodyLarge className={css.text}>
-        Window Width: {windowSize.width}px
-      </BodyLarge>
-      <BodyLarge className={css.text}>
-        Window Height: {windowSize.height}px
-      </BodyLarge>
-    </div>
-  );
-};

package/lib/hooks/useWindowSize/useWindowSize.ts

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

@@ -1,6 +0,0 @@
-export * from './components';
-export * from './hooks';
-export * from './styles';
-// @ts-ignore - TS2308 - Module './components' has already exported a member named 'Breadcrumbs'. Consider explicitly re-exporting to resolve the ambiguity. | TS2308 - Module './components' has already exported a member named 'Tooltip'. Consider explicitly re-exporting to resolve the ambiguity.
-export * from './types';
-export * from './utils';