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

package/lib/components/Modal/Modal.tsx

@@ -1,379 +0,0 @@
-import * as React from 'react';
-import {createPortal} from 'react-dom';
-import {
-  FloatingFocusManager,
-  useFloating,
-  useTransitionStyles,
-} from '@floating-ui/react';
-
-import useMountTransition from '../../hooks/useMountTransition';
-import {
-  motionDurationNormal,
-  motionDurationSlow,
-} from '../../styles/variables/_motion';
-import {opacity0, opacity100} from '../../styles/variables/_opacity';
-import {spaceNegHalfFluid} from '../../styles/variables/_space';
-import classify from '../../utils/classify';
-import {uuid} from '../../utils/helpers';
-import {Button} from '../Button/Button';
-import {Truncate} from '../Truncate/Truncate';
-
-import css from './Modal.module.css';
-
-
-type ClassNames = Readonly<{
-  container?: string;
-  content?: string;
-  backdrop?: string;
-}>;
-
-export type UseTransitionStylesProps = {
-  duration?: number | {
-    open: number;
-    close: number;
-  };
-  initial?: {
-    readonly [key: string]: unknown;
-  };
-  open?: {
-    readonly [key: string]: unknown;
-  };
-  close?: {
-    readonly [key: string]: unknown;
-  };
-  common?: {
-    readonly [key: string]: unknown;
-  };
-};
-
-type FooterClassNames = Readonly<{
-  wrapper?: string;
-  actions?: string;
-}>;
-
-export type ModalProps = {
-  classNames?: ClassNames;
-  children?: React.ReactNode;
-  isOpen?: boolean;
-  onClose?: ((arg1: React.SyntheticEvent<HTMLElement>) => unknown) | null | undefined;
-  hideBackdrop?: boolean;
-  tapOutsideToClose?: boolean;
-  allowBackgroundInteraction?: boolean;
-  initialFocus?: number;
-  customAnimation?: UseTransitionStylesProps;
-};
-
-export type ModalSize = 'small' | 'medium' | 'large';
-
-export type BaseModalProps = ((ModalProps) & {
-  size?: ModalSize;
-});
-
-export type ModalHeaderProps = {
-  children?: React.ReactNode;
-  hideCloseBtn?: boolean;
-  onCloseButtonClick?: ((arg1: React.SyntheticEvent<HTMLElement>) => unknown) | null | undefined;
-  className?: string;
-};
-
-export type ModalFooterProps = {
-  children?: React.ReactNode;
-  classNames?: FooterClassNames;
-};
-
-export type ModalBodyProps = {
-  children?: React.ReactNode;
-  className?: string;
-};
-
-const DEFAULT_MODAL_ANIMATION = {
-  duration: {
-    open: parseInt(motionDurationSlow),
-    close: parseInt(motionDurationNormal),
-  },
-  initial: {
-    transform: `translate(${spaceNegHalfFluid}, ${spaceNegHalfFluid}) scale(0.95)`,
-    opacity: opacity0,
-  },
-  open: {
-    transform: `translate(${spaceNegHalfFluid}, ${spaceNegHalfFluid}) scale(1)`,
-    opacity: opacity100,
-  },
-  close: {
-    transform: `translate(${spaceNegHalfFluid}, ${spaceNegHalfFluid}) scale(0.95)`,
-    opacity: opacity0,
-  },
-} as const;
-
-export const ModalHeader = (
-  {
-    children,
-    hideCloseBtn,
-    onCloseButtonClick,
-    className,
-  }: ModalHeaderProps,
-) => (<>
-  {React.Children.count(children) > 0 && (
-    <div className={classify(css.modalHeader, className)}>
-      <div className={css.headerContent}>
-        <Truncate>{children}</Truncate>
-      </div>
-      {!hideCloseBtn && (
-        <Button
-          iconLeftName="xmark"
-          type="ghost"
-          onClick={onCloseButtonClick}
-          ariaLabel="Close Button"
-        ></Button>
-      )}
-    </div>
-  )}
-</>);
-
-export const ModalBody = (
-  {
-    children,
-    className,
-  }: ModalBodyProps,
-) => (<div className={classify(css.modalBody, className)}>{children}</div>);
-
-export const ModalFooter = (
-  {
-    children,
-    classNames,
-  }: ModalFooterProps,
-) => (<>
-  {React.Children.count(children) > 0 && (
-    <div className={classify(css.modalFooter, classNames?.wrapper)}>
-      <div className={classify(css.modalFooterActions, classNames?.actions)}>
-        {children}
-      </div>
-    </div>
-  )}
-</>);
-
-const createPortalRoot = (id: string) => {
-  const modalRoot = document.createElement('div');
-  modalRoot.setAttribute('id', `modal-root-${id}`);
-
-  return modalRoot;
-};
-
-const getModalRoot = (id: string) =>
-  document.getElementById(`modal-root-${id}`);
-
-// @ts-ignore - TS2315 - Type 'NodeList' is not generic.
-function hasChildNode(nodeList: NodeList<HTMLElement>) {
-  for (let i = 0, len = nodeList.length; i < len; i++) {
-    if (nodeList[i].firstChild !== null) {
-      return true;
-    }
-  }
-  return false;
-}
-
-const fixBody = (bodyEl: HTMLBodyElement) => {
-  const body = document.getElementsByTagName('body')[0];
-  if (body && body.classList) {
-    body.classList.add('fixed');
-  }
-  if (bodyEl) {
-    bodyEl.style.overflow = 'hidden';
-  }
-};
-
-const unfixBody = (bodyEl: HTMLBodyElement) => {
-  const body = document.getElementsByTagName('body')[0];
-  if (body && body.classList) {
-    body.classList.remove('fixed');
-  }
-  if (bodyEl) {
-    bodyEl.style.overflow = '';
-  }
-};
-
-const checkAndAddBodyOverflow = (bodyEl: HTMLBodyElement) => {
-  const nodes = document.querySelectorAll('[id^="modal-root"]');
-  let isParentModalPresent = false;
-  if (nodes.length) {
-    isParentModalPresent = hasChildNode(nodes);
-  }
-  if (isParentModalPresent) {
-    fixBody(bodyEl);
-  } else {
-    unfixBody(bodyEl);
-  }
-};
-
-export const Modal = (
-  {
-    classNames,
-    children,
-    isOpen = false,
-    onClose,
-    hideBackdrop = false,
-    tapOutsideToClose = true,
-    initialFocus = -1,
-    customAnimation,
-    allowBackgroundInteraction = false,
-
-    // Size is not set to default for backward compatibility. Don't change if you don't know this.
-    size,
-  }: BaseModalProps,
-) => {
-  const {refs, context} = useFloating({open: isOpen});
-  const {isMounted, styles} = useTransitionStyles(
-    context,
-// @ts-ignore - TS2345 - Argument of type 'UseTransitionStylesProps | { readonly duration: { readonly open: number; readonly close: number; }; readonly initial: { readonly transform: "translate(-50%, -50%) scale(0.95)"; readonly opacity: "0%"; }; readonly open: { ...; }; readonly close: { ...; }; }' is not assignable to parameter of type 'UseTransitionStylesProps | undefined'.
-    customAnimation || DEFAULT_MODAL_ANIMATION,
-  );
-  const modalId = uuid();
-
-  const bodyRef = React.useRef(document.querySelector('body'));
-  const portalRootRef = React.useRef(
-    getModalRoot(modalId) || createPortalRoot(modalId),
-  );
-
-  const isTransitioning = useMountTransition(
-    isOpen,
-    parseInt(motionDurationNormal),
-  );
-
-  // Append portal root on mount
-  React.useEffect(() => {
-    bodyRef.current?.appendChild(portalRootRef.current);
-    const portal = portalRootRef.current;
-    const bodyEl = bodyRef.current;
-
-    return () => {
-      // Clean up the portal when modal component unmounts
-      portal.remove();
-      // Ensure scroll overflow is removed
-      if (bodyEl) {
-        unfixBody(bodyEl);
-      }
-    };
-  }, []);
-
-  // Prevent page scrolling when the modal is open
-  React.useEffect(() => {
-    const updatePageScroll = () => {
-      if (isOpen) {
-        if (bodyRef.current) {
-          fixBody(bodyRef.current);
-        }
-      } else {
-        if (bodyRef.current) {
-          unfixBody(bodyRef.current);
-        }
-      }
-    };
-
-    updatePageScroll();
-  }, [isOpen]);
-
-  // Allow Escape key to dismiss the modal
-  React.useEffect(() => {
-    const onKeyPress = (e: any) => {
-      if (e.key === 'Escape') {
-        tapOutsideToClose && onClose && onClose(e);
-      }
-    };
-
-    if (isOpen) {
-      window.addEventListener('keyup', onKeyPress);
-    }
-
-    return () => {
-      window.removeEventListener('keyup', onKeyPress);
-    };
-  }, [isOpen, onClose]);
-
-  if (!isOpen && !isMounted) {
-    // Check overflow after resetting the DOM for modal. This should always happen after DOM reset
-    // TODO(Nishant): Better way to do this?
-    setTimeout(() => {
-      if (bodyRef && !!bodyRef.current) {
-        checkAndAddBodyOverflow(bodyRef.current);
-      }
-    });
-
-    return null;
-  }
-
-  const onBackdropClick = (e: React.SyntheticEvent<HTMLElement>) => {
-    if (tapOutsideToClose && onClose) {
-      onClose(e);
-    }
-  };
-
-  return createPortal(
-    <FloatingFocusManager context={context} initialFocus={initialFocus}>
-      <div
-        ref={refs.setFloating}
-        aria-hidden={isOpen ? 'false' : 'true'}
-        className={classify(
-          css.modalContainer,
-          {
-            [css.in]: isTransitioning,
-            [css.open]: isOpen,
-          },
-          classNames?.container,
-        )}
-      >
-        {!allowBackgroundInteraction && (
-          <div
-            className={classify(
-              css.backdrop,
-              {
-                [css.darkBackdrop]: !hideBackdrop,
-              },
-              classNames?.backdrop,
-            )}
-            onClick={onBackdropClick}
-            style={{
-              opacity: styles?.opacity,
-              transition: styles?.transition,
-            }}
-          />
-        )}
-
-        {isMounted && (
-          <div
-            className={classify(
-              css.modal,
-              {
-                [css.small]: size === 'small',
-                [css.medium]: size === 'medium',
-                [css.large]: size === 'large',
-              },
-              classNames?.content,
-            )}
-            role="dialog"
-            style={{
-              // Transition styles
-              ...styles,
-            }}
-          >
-            {children}
-          </div>
-        )}
-      </div>
-    </FloatingFocusManager>,
-    portalRootRef.current,
-  );
-};
-
-// FullScreen modal that just calls the Modal component with a wrapper className set which sets the width and height to sizeFluid
-export const FullScreenModal = (
-  {
-    classNames,
-    ...props
-  }: ModalProps,
-) => (<Modal
-  classNames={{
-    ...classNames,
-    content: classify(css.fullscreenModalContainer, classNames?.content),
-  }}
-  {...props}
-/>);

package/lib/components/Modal/index.ts

@@ -1,8 +0,0 @@
-export type {BaseModalProps, ModalBodyProps, ModalFooterProps, ModalHeaderProps, ModalProps} from './Modal';
-export {
-  FullScreenModal,
-  Modal,
-  ModalBody,
-  ModalFooter,
-  ModalHeader,
-} from './Modal';

package/lib/components/Notification/Notification.stories.tsx

@@ -1,132 +0,0 @@
-import * as React from 'react';
-
-import type {NotificationProps} from './Notification';
-import {Notification, NOTIFICATION_SEMANTIC} from './';
-
-import css from './Notification.stories.module.css';
-
-
-const semanticOptions: Array<unknown> = [...Object.values(NOTIFICATION_SEMANTIC)];
-
-export default {
-  tags: ['autodocs'],
-  title: 'Components/Notification',
-  argTypes: {
-    semantic: {
-      options: semanticOptions,
-      description: `Semantic type of Notification.
-        It changes the background color of the notification bar`,
-      control: {
-        type: 'select',
-      },
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: NOTIFICATION_SEMANTIC.success},
-      },
-    },
-    onCloseClick: {
-      name: 'onCloseClick',
-      action: 'Close Click',
-      description: 'Callback function for dismissable alert',
-      type: {summary: '(SyntheticEvent<HTMLElement>) => mixed'},
-    },
-    dismissable: {
-      description: 'Close Icon will appear in right side in case it is true',
-      name: 'dismissable',
-      options: [false, true],
-      control: 'boolean',
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: false},
-      },
-    },
-    selfDismiss: {
-      description: `This prop is valid only in case dismissable is true.
-      It handles whether the dismissal should be handled by the component or it will just pass callback onclick of closeIcon and dismissal will be handled externally`,
-      name: 'selfDismiss',
-      options: [false, true],
-      control: 'boolean',
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: false},
-      },
-    },
-    iconLeftName: {
-      description:
-        'Left icon to be applied to the notification, it internally uses the `Icon` component to render icons',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    iconLeftType: {
-      description:
-        'Type of Left Icon. Type represents 4 unique icon styles :- Solid, Regular, Duotone and Brands',
-      options: ['regular', 'solid', 'duotone', 'brands'],
-      control: {type: 'select'},
-      table: {
-        type: {summary: 'string'},
-        defaultValue: {summary: 'regular'},
-      },
-    },
-    children: {
-      description: 'Pass the notification message text as children',
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    classNames: {
-      description:
-        'Provide an optional className to be applied to the wrapper, text',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {
-          summary: '{wrapper?: string, text?: string}',
-        },
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      subtitle: 'Generates a Notification component',
-      description: {
-        component: `
-\`\`\`js
-import { Notification } from "@spaced-out/ui-design-system/lib/components/Notification";
-\`\`\`
-Use Notification component to show short message of different semantics like - success, warning etc. It will take width of the container.
-        `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/Notification/Notification.jsx',
-    },
-  },
-};
-
-export const _Default = (args: NotificationProps) => (<div className={css.storyContainer}>
-  <Notification {...args}></Notification>
-</div>);
-
-_Default.args = {
-  semantic: NOTIFICATION_SEMANTIC.success,
-  iconLeftName: 'face-party',
-  children: 'The quick brown fox jumps over the lazy dog',
-  dismissable: false,
-};
-
-export const _Dismissable = (args: NotificationProps) => (<div className={css.storyContainer}>
-  <Notification {...args}></Notification>
-</div>);
-
-_Dismissable.args = {
-  semantic: NOTIFICATION_SEMANTIC.success,
-  children: 'The quick brown fox jumps over the lazy dog',
-  iconLeftName: 'face-party',
-  dismissable: true,
-  selfDismiss: false,
-};

package/lib/components/Notification/Notification.tsx

@@ -1,140 +0,0 @@
-import {Flow} from 'flow-to-typescript-codemod';
-
-import * as React from 'react';
-
-import {TEXT_COLORS} from '../../types/typography';
-import {classify} from '../../utils/classify';
-import type {IconType} from '../Icon';
-import {Icon} from '../Icon';
-import {SubTitleSmall} from '../Text';
-
-import css from './Notification.module.css';
-
-
-export const NOTIFICATION_SEMANTIC = Object.freeze({
-  success: 'success',
-  information: 'information',
-  danger: 'danger',
-});
-
-type ClassNames = Readonly<{
-  wrapper?: string;
-  text?: string;
-}>;
-
-export type NotificationSemanticType = typeof NOTIFICATION_SEMANTIC[keyof typeof NOTIFICATION_SEMANTIC];
-
-type BaseNotificationProps = {
-  classNames?: ClassNames;
-  semantic: NotificationSemanticType;
-  iconLeftName?: string;
-  iconLeftType?: IconType;
-  dismissable?: boolean;
-  children?: string;
-  onCloseClick?: ((arg1: React.SyntheticEvent<HTMLElement>) => unknown) | null | undefined;
-};
-
-type NotificationBaseProps = ((BaseNotificationProps) & {
-  classNames?: ClassNames;
-} & ({
-  dismissable: true;
-  onCloseClick?: ((arg1: React.SyntheticEvent<HTMLElement>) => unknown) | null | undefined;
-  selfDismiss?: boolean;
-} | {
-  dismissable?: false;
-}));
-
-export type NotificationProps = ((NotificationBaseProps) & {
-  semantic: NotificationSemanticType;
-});
-
-// Base Notification will not have any state.
-
-const BaseNotification: Flow.AbstractComponent<BaseNotificationProps, HTMLDivElement> = React.forwardRef<HTMLDivElement, BaseNotificationProps>((props: BaseNotificationProps, ref) => {
-  const {
-    classNames,
-    semantic = NOTIFICATION_SEMANTIC.success,
-    iconLeftName,
-    iconLeftType = 'regular',
-    dismissable,
-    children,
-    onCloseClick,
-  } = props;
-  return (
-    <div
-      className={classify(
-        css.baseContainer,
-        {
-          [css.success]: semantic === NOTIFICATION_SEMANTIC.success,
-          [css.information]: semantic === NOTIFICATION_SEMANTIC.information,
-          [css.danger]: semantic === NOTIFICATION_SEMANTIC.danger,
-          [css.dismissable]: dismissable,
-        },
-        classNames?.wrapper,
-      )}
-      ref={ref}
-    >
-      {iconLeftName ? (
-        <Icon
-          name={iconLeftName}
-          color={TEXT_COLORS.inversePrimary}
-          size="small"
-          type={iconLeftType}
-        />
-      ) : null}
-      <SubTitleSmall
-        className={classify(classNames?.text)}
-        color={TEXT_COLORS.inversePrimary}
-      >
-        {children}
-      </SubTitleSmall>
-      {dismissable && (
-        <Icon
-          color={TEXT_COLORS.inversePrimary}
-          name="close"
-          size="small"
-          type="regular"
-          onClick={onCloseClick}
-          className={css.closeIcon}
-        />
-      )}
-    </div>
-  );
-});
-
-export const Notification: Flow.AbstractComponent<NotificationProps, HTMLDivElement> = React.forwardRef<HTMLDivElement, NotificationProps>((props: NotificationProps, ref) => {
-  const {
-    classNames,
-    semantic = NOTIFICATION_SEMANTIC.success,
-    iconLeftName,
-    iconLeftType,
-    dismissable,
-    children,
-// @ts-ignore - TS2339 - Property 'selfDismiss' does not exist on type 'NotificationProps'.
-    selfDismiss = false,
-    onCloseClick,
-  } = props;
-  const [dismissed, setDismissed] = React.useState(false);
-  const closeClickHandler = (e: React.SyntheticEvent<HTMLElement>) => {
-    onCloseClick && onCloseClick(e);
-    selfDismiss && setDismissed(true);
-  };
-
-  return (
-    <>
-      {!dismissed && (
-        <BaseNotification
-          classNames={classNames}
-          iconLeftName={iconLeftName}
-          iconLeftType={iconLeftType}
-          semantic={semantic}
-          dismissable={dismissable}
-          onCloseClick={closeClickHandler}
-          ref={ref}
-        >
-          {children}
-        </BaseNotification>
-      )}
-    </>
-  );
-});

package/lib/components/Notification/index.ts

@@ -1 +0,0 @@
-export {Notification, NOTIFICATION_SEMANTIC} from './Notification';