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

package/lib/hooks/useInputState/useInputState.stories.tsx

@@ -1,62 +0,0 @@
-import * as React from 'react';
-
-import {Input} from '../../components/Input';
-import {BodyLarge} from '../../components/Text';
-
-import {useInputState} from './useInputState';
-
-import css from './useInputState.stories.module.css';
-
-
-export default {
-  tags: ['autodocs'],
-  title: 'Hooks/useInputState',
-  component: useInputState,
-  parameters: {
-    docs: {
-      description: {
-        component: `
-\`\`\`js
-import { useInputState } from "@spaced-out/ui-design-system/lib/hooks/useInputState";
-\`\`\`
-The \`useInputState\` hook is a simple hook that provides state management for input elements.
-It abstracts the onChange property of the input and returns the current value and a callback function to update it.
-
-### Return Type
-- An array with two elements:
-  - \`value\`: The current value of the input.
-  - \`onChange\`: A callback function to handle changes in the input value.
-
-### Usage
-\`\`\`jsx
-import { useInputState } from './useInputState';
-
-const MyComponent = () => {
-  const [value, onChange] = useInputState('');
-
-  return (
-    <div className={css.container}>
-      <Input type="text" value={value} onChange={onChange} />
-      <BodyLarge>Value: {value}</BodyLarge>
-    </div>
-  );
-};
-
-export default MyComponent;
-\`\`\`
-        `,
-      },
-    },
-  },
-};
-
-export const Example = () => {
-  const [value, onChange] = useInputState('');
-
-  return (
-    <div className={css.container}>
-      <Input type="text" value={value} onChange={onChange} />
-      <BodyLarge className={css.value}>Value: {value}</BodyLarge>
-    </div>
-  );
-};

package/lib/hooks/useInputState/useInputState.ts

@@ -1,24 +0,0 @@
-import * as React from 'react';
-
-
-type ReturnType = [string, (event: React.ChangeEvent<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(
-// @ts-ignore - TS7006 - Parameter 'event' implicitly has an 'any' type.
-    (event) => setState(event && event.target.value),
-    [],
-  );
-
-  return [state, setInputState];
-};

package/lib/hooks/useLockedBody/index.ts

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

package/lib/hooks/useLockedBody/useLockedBody.stories.tsx

@@ -1,71 +0,0 @@
-import React from 'react';
-
-import {Button} from '../../components/Button';
-
-import {useLockedBody} from './useLockedBody';
-
-import css from './useLockedBody.stories.module.css';
-
-
-export default {
-  tags: ['autodocs'],
-  title: 'Hooks/useLockedBody',
-  component: useLockedBody,
-  parameters: {
-    docs: {
-      description: {
-        component: `
-\`\`\`js
-import { useLockedBody } from "@spaced-out/ui-design-system/lib/hooks/useLockedBody";
-\`\`\`
-The \`useLockedBody\` hook is a custom hook that allows locking and unlocking the scroll of the document's body.
-It prevents the user from scrolling the page by setting the overflow and padding-right styles of the body element.
-
-### Return Type
-- An array with two elements:
-  - \`locked\`: A boolean indicating whether the body scroll is locked or not.
-  - \`setLocked\`: A function to toggle the locked state.
-
-### Usage
-\`\`\`jsx
-import { useLockedBody } from './useLockedBody';
-
-const MyComponent = () => {
-  const [locked, setLocked] = useLockedBody(false);
-
-  const toggleLock = () => {
-    setLocked(!locked);
-  };
-
-  return (
-    <div className={css.container}>
-      <Button onClick={toggleLock}>
-        {locked ? 'Unlock Scroll' : 'Lock Scroll'}
-      </Button>
-    </div>
-  );
-};
-
-export default MyComponent;
-\`\`\`
-        `,
-      },
-    },
-  },
-};
-
-export const Example = (): React.ReactElement<React.ComponentProps<'div'>> => {
-  const [locked, setLocked] = useLockedBody(false);
-
-  const toggleLock = () => {
-    setLocked(!locked);
-  };
-
-  return (
-    <div className={css.container}>
-      <Button onClick={toggleLock}>
-        {locked ? 'Unlock Scroll' : 'Lock Scroll'}
-      </Button>
-    </div>
-  );
-};

package/lib/hooks/useLockedBody/useLockedBody.ts

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

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

package/lib/hooks/useModal/useModal.stories.tsx

@@ -1,134 +0,0 @@
-import React from 'react';
-
-import {Button} from '../../components/Button';
-import {BasicDialog} from '../../components/Dialog';
-
-import type {UseModalExtras} from './useModal';
-import {useModal} from './useModal';
-
-
-export default {
-  tags: ['autodocs'],
-  title: 'Hooks/useModal',
-  component: useModal,
-  parameters: {
-    docs: {
-      description: {
-        component: `
-\`\`\`js
-import { useModal } from "@spaced-out/ui-design-system/lib/hooks/useModal";
-\`\`\`
-The \`useModal\` hook is a simple hook that provides state management for Modal(Dialog) when triggered from hooks (non-components).
-You can provide all the additional details in extras as shown in the example to invoke Modal(Dialog).
-\n**Note:** You don't need this hook if you are using Dialog from a component.
-
-### Return Type
-- An Object with four elements:
-  - \`isOpen\`: The current value of if the Dialog is open.
-  - \`openModal\`: A callback function to perform open action on the Dialog with additional info which you can pass as params (title, description, ...).
-  - \`closeModal\`: A callback function to perform close action on the Dialog.
-  - \`extras\`: This is an object when the calling hook can set additional information and handlers as required for a particular use case. Refer the example for better understanding.
-
-### Usage
-\`\`\`jsx
-import { useModal } from './useModal';
-
-const useIntermediateExampleHook = (
-    openModal: (extras?: UseModalExtras) => void,
-    closeModal: () => void,
-  ): ({handleClick: () => void}) => {
-    const onConfirmClick = () => {
-      console.error('onConfirmClick handler called');
-      closeModal();
-    };
-    const handleClick = () => {
-      openModal({
-        title: 'Dialog title',
-        description: 'Dialog description',
-        cancelText: 'Cancel',
-        confirmText: 'Confirm',
-        semantic: 'danger',
-        onConfirmClick,
-      });
-      console.error('some action in click handler useIntermediateExampleHook');
-    };
-    return {handleClick};
-  };
-
-export const MyComponent = (): React$Element<'div'> => {
-    const { isOpen, openModal, closeModal, extras } = useModal();
-    const { handleClick } = useIntermediateExampleHook(openModal, closeModal);
-    return (
-      <div>
-        <Button type="primary" onClick={handleClick}>
-          Open Dialog
-        </Button>
-        <BasicDialog
-          initialFocus={1}
-          onClose={closeModal}
-          semantic={extras.semantic}
-          isOpen={isOpen}
-          heading={extras.title}
-          body={extras.description}
-          confirmText={extras.confirmText}
-          abortText={extras.cancelText}
-          handleConfirm={extras.onConfirmClick}
-          handleAbort={closeModal}
-        />
-      </div>
-    );
-  };
-
-
-export default MyComponent;
-\`\`\`
-        `,
-      },
-    },
-  },
-};
-
-const useIntermediateExampleHook = (openModal: (extras?: UseModalExtras) => void, closeModal: () => void): {
-  handleClick: () => void;
-} => {
-  const onConfirmClick = () => {
-    console.error('onConfirmClick handler called');
-    closeModal();
-  };
-  const handleClick = () => {
-    openModal({
-      title: 'Dialog title - useModal',
-      description: 'Dialog description - useModal',
-      cancelText: 'Cancel',
-      confirmText: 'Confirm',
-      semantic: 'danger',
-      onConfirmClick,
-    });
-    console.error('some action in click handler useIntermediateExampleHook');
-  };
-  return {handleClick};
-};
-
-export const Example = (): React.ReactElement<React.ComponentProps<'div'>> => {
-  const { isOpen, openModal, closeModal, extras } = useModal();
-  const { handleClick } = useIntermediateExampleHook(openModal, closeModal);
-  return (
-    <div>
-      <Button type="primary" onClick={handleClick}>
-        Open Dialog
-      </Button>
-      <BasicDialog
-        initialFocus={1}
-        onClose={closeModal}
-        semantic={extras.semantic}
-        isOpen={isOpen}
-        heading={extras.title}
-        body={extras.description}
-        confirmText={extras.confirmText}
-        abortText={extras.cancelText}
-        handleConfirm={extras.onConfirmClick}
-        handleAbort={closeModal}
-      />
-    </div>
-  );
-};

package/lib/hooks/useModal/useModal.ts

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

@@ -1,25 +0,0 @@
-import {useEffect, useState} from 'react';
-
-
-const useMountTransition = (isMounted: boolean, unmountDelay: number): boolean => {
-  const [isTransitioning, setIsTransitioning] = useState(false);
-
-  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);
-    } else if (!isMounted && isTransitioning) {
-      timeoutId = setTimeout(() => setIsTransitioning(false), unmountDelay);
-    }
-    return () => {
-// @ts-ignore - TS7005 - Variable 'timeoutId' implicitly has an 'any' type.
-      clearTimeout(timeoutId);
-    };
-  }, [unmountDelay, isMounted, isTransitioning]);
-
-  return isTransitioning;
-};
-
-export default useMountTransition;

package/lib/hooks/useMountTransition/useMountTransition.stories.tsx

@@ -1,64 +0,0 @@
-import React from 'react';
-
-import {BodyLarge} from '../../components/Text';
-
-import useMountTransition from './';
-
-import css from './useMountTransition.stories.module.css';
-
-
-export default {
-  tags: ['autodocs'],
-  title: 'Hooks/useMountTransition',
-  component: useMountTransition,
-  parameters: {
-    docs: {
-      description: {
-        component: `
-\`\`\`js
-import { useMountTransition } from "@spaced-out/ui-design-system/lib/hooks/useMountTransition";
-\`\`\`
-The \`useMountTransition\` hook is a custom hook that tracks the mount and unmount transitions of a component.
-
-### Props Accepted
-- \`isMounted\`: A boolean value indicating whether the component is mounted or not.
-- \`unmountDelay\`: The delay in milliseconds before transitioning from mounted to unmounted state.
-
-### Return Value
-- \`isTransitioning\`: A boolean value indicating whether the component is currently transitioning.
-
-### Usage
-\`\`\`jsx
-import useMountTransition from './useMountTransition';
-
-const MyComponent = () => {
-  const isMounted = ...; // Some value indicating whether the component is mounted or not
-  const unmountDelay = ...; // Delay before transitioning from mounted to unmounted state
-
-  const isTransitioning = useMountTransition(isMounted, unmountDelay);
-
-  useEffect(() => {
-    // Perform any additional actions during transition
-    if (isTransitioning) {
-      // ...
-    }
-  }, [isTransitioning]);
-
-  return (
-    <div className={\`${css.container} \${isTransitioning ? css.transitioning : ''}\`}>
-      <BodyLarge>Component content</BodyLarge>
-    </div>
-  );
-};
-
-export default MyComponent;
-\`\`\`
-        `,
-      },
-    },
-  },
-};
-
-export const Example = (): React.ReactElement<React.ComponentProps<'div'>> => (<div>
-  <BodyLarge>Usage documented above</BodyLarge>
-</div>);

package/lib/hooks/usePagination/index.ts

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

package/lib/hooks/usePagination/usePagination.stories.tsx

@@ -1,72 +0,0 @@
-import React from 'react';
-
-import {Pagination} from '../../components/Pagination';
-
-import {usePagination} from './usePagination';
-
-import css from './usePagination.stories.module.css';
-
-
-export default {
-  tags: ['autodocs'],
-  title: 'Hooks/usePagination',
-  component: usePagination,
-  parameters: {
-    docs: {
-      description: {
-        component: `
-\`\`\`js
-import { usePagination } from "@spaced-out/ui-design-system/lib/hooks/usePagination";
-\`\`\`
-The \`usePagination\` hook is a custom hook that provides pagination functionality.
-It generates a list of pagination items based on the provided props, including
-the current page, total number of pages, and various display options.
-
-### Props Accepted
-- \`boundaryCount\` (optional): The number of pages to display at the beginning and end of the pagination. Defaults to 1.
-- \`totalPages\` (optional): The total number of pages. Defaults to 1.
-- \`disabled\` (optional): If set to \`true\`, the pagination functionality is disabled.
-- \`hideNextButton\` (optional): If set to \`true\`, the next button is hidden.
-- \`hidePrevButton\` (optional): If set to \`true\`, the previous button is hidden.
-- \`onChange\` (optional): A callback function called when a pagination item is clicked. Receives the selected page number and the event object.
-- \`currentPage\` (optional): The currently selected page. Defaults to 1.
-- \`showFirstButton\` (optional): If set to \`true\`, the first button is shown.
-- \`showLastButton\` (optional): If set to \`true\`, the last button is shown.
-- \`siblingCount\` (optional): The number of sibling pages to display before and after the current page. Defaults to 1.
-- \`style\` (optional): The style of the pagination. Can be 'primary' or 'secondary'. Defaults to 'primary'.
-
-### Props Returned
-- \`items\`: An array of pagination items with associated props.
-
-### Usage
-\`\`\`jsx
-import { usePagination } from './usePagination';
-
-const MyComponent = () => {
-  const { items } = usePagination({
-    boundaryCount: 1,
-    totalPages: 10,
-    disabled: false,
-    hideNextButton: false,
-    hidePrevButton: false,
-    onChange: (selectedPage, event) => {
-    },
-    currentPage: 1,
-    showFirstButton: false,
-    showLastButton: false,
-    siblingCount: 1,
-    style: 'primary',
-  });
-};
-
-export default MyComponent;
-\`\`\`
-          `,
-      },
-    },
-  },
-};
-
-export const Example = (): React.ReactElement<React.ComponentProps<'div'>> => (<div className={css.pagination}>
-  <Pagination currentPage={10} totalPages={20}></Pagination>
-</div>);