@onewelcome/react-lib-components 0.1.0-alpha → 0.1.3-alpha

package/src/hooks/useWrapper.ts

@@ -10,13 +10,18 @@ export const useWrapper = (value?: string, placeholder?: string, type?: InputTyp
   const [hasFocus, setHasFocus] = useState(false);
 
   useEffect(() => {
-    if (value?.length || placeholder || type === 'datetime-local' || type === 'time') {
+    if (
+      (value?.length && value.length > 0) ||
+      placeholder ||
+      type === 'datetime-local' ||
+      type === 'time'
+    ) {
       setFloatingLabelActive(true);
     }
   }, []);
 
   useEffect(() => {
-    if (value?.length || hasFocus) {
+    if ((value?.length && value.length > 0) || hasFocus) {
       setFloatingLabelActive(true);
     } else if (!placeholder && !hasFocus && type !== 'datetime-local' && type !== 'time') {
       setFloatingLabelActive(false);

package/src/index.ts

@@ -4,14 +4,22 @@ export { Typography } from './Typography/Typography';
 export { Button } from './Button/Button';
 export { Link } from './Link/Link';
 export { IconButton } from './Button/IconButton';
-
+export {
+  Pagination,
+  Props as PaginationProps,
+  PageChangeLabels,
+  PaginationTranslations,
+  PageSize,
+} from './Pagination/Pagination';
 export { Icon, Icons } from './Icon/Icon';
 
-export { Dialog } from './Dialog/Dialog';
-export { Modal } from './Modal/Modal';
-export { ModalActions } from './Modal/ModalActions/ModalActions';
-export { ModalContent } from './Modal/ModalContent/ModalContent';
-export { ModalHeader } from './Modal/ModalHeader/ModalHeader';
+export { Dialog } from './Notifications/Dialog/Dialog';
+export { Modal } from './Notifications/Modal/Modal';
+export { ModalActions } from './Notifications/Modal/ModalActions/ModalActions';
+export { ModalContent } from './Notifications/Modal/ModalContent/ModalContent';
+export { ModalHeader } from './Notifications/Modal/ModalHeader/ModalHeader';
+export { DiscardChangesModal } from './Notifications/DiscardChangesModal/DiscardChangesModal';
+export { TextEllipsis, Props as TextEllipsisProps } from './TextEllipsis/TextEllipsis';
 export { Tooltip } from './Tooltip/Tooltip';
 export { Tiles } from './Tiles/Tiles';
 export { Tile } from './Tiles/Tile';
@@ -19,8 +27,12 @@ export { ContextMenu } from './ContextMenu/ContextMenu';
 export { ContextMenuItem } from './ContextMenu/ContextMenuItem';
 export { Breadcrumbs } from './Breadcrumbs/Breadcrumbs';
 
-export { SnackbarProvider } from './Snackbar/SnackbarProvider/SnackbarProvider';
-export { useSnackbar } from './Snackbar/useSnackbar';
+export { SnackbarProvider } from './Notifications/Snackbar/SnackbarProvider/SnackbarProvider';
+export { useSnackbar } from './Notifications/Snackbar/useSnackbar';
+
+export { useRepeater } from './hooks/useRepeater';
+
+export { generateID } from './util/helper';
 
 /** Form components */
 export { Form } from './Form/Form';

package/src/interfaces.ts

@@ -1,15 +1,5 @@
-import React from 'react';
+export type DataAttributeKey = `data-${string}`;
 
-/**
- * By default typescript does not allow data-* attributes on HTMLAttributes interface. We extend the default React.HTMLAttributes interface here and add the dataAttribute possibility into it.
- * An example of this can be found in Checkbox.tsx. We assign wrapperProps to the HTMLAttributes interface below, and are now able to add a test-id inside of Checkbox.test.tsx on line 77.
- */
-type DataAttributeKey = `data-${string}`;
-
-export interface HTMLProps<T> extends React.HTMLProps<T> {
-  [dataAttribute: DataAttributeKey]: any;
-}
-
-export interface HTMLAttributes<T> extends React.HTMLAttributes<T> {
+export interface KeyValuePair {
   [dataAttribute: DataAttributeKey]: any;
 }

package/src/util/helper.test.tsx

@@ -1,4 +1,4 @@
-import { generateID } from './helper';
+import { generateID, filterProps } from './helper';
 
 /* Generate an ID of 20 characters with a string woven in */
 
@@ -13,3 +13,40 @@ describe('generateID should correctly generate IDs in the correct way', () => {
     expect(ID2.length).toBe(20);
   });
 });
+
+describe('filterprops should return the correct object', () => {
+  it('gives back the props we told it to filter', () => {
+    const propsObject = {
+      'data-filter': true,
+      'data-test': false,
+      'aria-hidden': false,
+      'aria-expanded': true,
+      title: 'test',
+      className: 'example-classname',
+    };
+
+    const returnedPropsObject = filterProps(propsObject, /^data-/);
+
+    expect(returnedPropsObject).toStrictEqual({ 'data-filter': true, 'data-test': false });
+  });
+
+  it('gives back the propsObject without the props we told it to filter', () => {
+    const propsObject = {
+      'data-filter': true,
+      'data-test': false,
+      'aria-hidden': false,
+      'aria-expanded': true,
+      title: 'test',
+      className: 'example-classname',
+    };
+
+    const returnedPropsObject = filterProps(propsObject, /^data-/, false);
+
+    expect(returnedPropsObject).toStrictEqual({
+      'aria-hidden': false,
+      'aria-expanded': true,
+      title: 'test',
+      className: 'example-classname',
+    });
+  });
+});

package/src/util/helper.tsx

@@ -1,3 +1,5 @@
+type KeyValuePair = { [key: string]: unknown };
+
 export const generateID = (length = 15, stringToWeaveIn?: string) => {
   /** We will make sure to mesh the generate id and name property together to basically create a unique ID */
   let hashCharacters = [
@@ -78,3 +80,22 @@ export const generateID = (length = 15, stringToWeaveIn?: string) => {
 
   return id.slice(0, length);
 };
+
+export const filterProps = (props: any, regexPattern: RegExp, returnFiltered: boolean = true) => {
+  if (returnFiltered) {
+    return Object.keys(props).reduce((acc: KeyValuePair, key) => {
+      if (regexPattern.test(key)) {
+        acc[key] = props[key];
+      }
+
+      return acc;
+    }, {});
+  } else {
+    return Object.entries(props)
+      .filter(([key]) => !regexPattern.test(key))
+      .reduce(
+        (prevObj, currKeyValPair) => ({ ...prevObj, [currKeyValPair[0]]: currKeyValPair[1] }),
+        {}
+      );
+  }
+};

package/dist/BaseModal/BaseModal.d.ts

@@ -1,16 +0,0 @@
-import React, { HTMLAttributes } from 'react';
-export interface Props extends HTMLAttributes<HTMLDivElement> {
-    id: string;
-    children: React.ReactNode;
-    open: boolean;
-    onClose?: (event?: React.MouseEvent<HTMLElement>) => unknown;
-    className?: string;
-    containerClassName?: string;
-    labelledby?: string;
-    describedby?: string;
-    disableEscapeKeyDown?: boolean;
-    disableBackdrop?: boolean;
-    zIndex?: number;
-}
-export declare const useSetBodyScroll: (open: boolean) => void;
-export declare const BaseModal: ({ id, children, open, onClose, className, containerClassName, labelledby, describedby, disableEscapeKeyDown, disableBackdrop, zIndex, ...restProps }: Props) => JSX.Element;

package/dist/BaseModal/BaseModalActions/BaseModalActions.d.ts

@@ -1,5 +0,0 @@
-import React, { HTMLAttributes } from 'react';
-export interface Props extends HTMLAttributes<HTMLElement> {
-    children?: React.ReactNode;
-}
-export declare const BaseModalActions: ({ children, className, ...restProps }: Props) => JSX.Element;

package/dist/BaseModal/BaseModalContent/BaseModalContent.d.ts

@@ -1,8 +0,0 @@
-import React, { HTMLAttributes } from 'react';
-export interface Props extends HTMLAttributes<HTMLDivElement> {
-    id?: string;
-    children: React.ReactNode;
-    className?: string;
-    disableAutoFocus?: boolean;
-}
-export declare const BaseModalContent: ({ id, children, className, disableAutoFocus, ...restProps }: Props) => JSX.Element;

package/dist/BaseModal/BaseModalHeader/BaseModalHeader.d.ts

@@ -1,8 +0,0 @@
-import React, { HTMLAttributes } from 'react';
-export interface Props extends HTMLAttributes<HTMLElement> {
-    id: string;
-    title: string;
-    children?: React.ReactNode;
-    onClose: (event: React.MouseEvent<HTMLButtonElement>) => void;
-}
-export declare const BaseModalHeader: ({ id, title, children, onClose, ...restProps }: Props) => JSX.Element;

package/dist/Dialog/Dialog.d.ts

@@ -1,18 +0,0 @@
-import React, { HTMLAttributes } from 'react';
-import { Props as ButtonProps } from '../Button/Button';
-export interface Props extends HTMLAttributes<HTMLDivElement> {
-    id: string;
-    open: boolean;
-    children: React.ReactNode;
-    alignActions: 'left' | 'right';
-    onClose: () => void;
-    title: string;
-    primaryAction: Action;
-    secondaryAction?: Action;
-    zIndex?: number;
-}
-export interface Action extends Omit<ButtonProps, 'variant' | 'ref'> {
-    label: string;
-    onClick: (event?: React.MouseEvent<HTMLButtonElement>) => unknown;
-}
-export declare const Dialog: ({ id, open, children, alignActions, onClose, title, primaryAction, secondaryAction, zIndex, ...restProps }: Props) => JSX.Element;

package/dist/Dialog/DialogActions/DialogActions.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-import { Props as BaseModalActionsProps } from '../../BaseModal/BaseModalActions/BaseModalActions';
-export interface Props extends BaseModalActionsProps {
-    align: 'left' | 'right';
-}
-export declare const DialogActions: ({ children, align, ...restProps }: Props) => JSX.Element;

package/dist/Dialog/DialogTitle/DialogTitle.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-export interface Props {
-    id: string;
-    title: string;
-}
-export declare const DialogTitle: ({ id, title }: Props) => JSX.Element;

package/src/BaseModal/BaseModal.tsx

@@ -1,113 +0,0 @@
-import React, { HTMLAttributes, useEffect, useRef } from 'react';
-import classes from './BaseModal.module.scss';
-import { labelId, descriptionId } from './BaseModalContext';
-
-const SCROLL_PROPERTY_NAME = 'overflow';
-const SCROLL_PROPERTY_VALUE = 'hidden';
-
-export interface Props extends HTMLAttributes<HTMLDivElement> {
-  id: string;
-  children: React.ReactNode;
-  open: boolean;
-  onClose?: (event?: React.MouseEvent<HTMLElement>) => unknown;
-  className?: string;
-  containerClassName?: string;
-  labelledby?: string;
-  describedby?: string;
-  disableEscapeKeyDown?: boolean;
-  disableBackdrop?: boolean;
-  zIndex?: number;
-}
-
-const useBackdropOnCloseClick = (
-  disableBackdrop: boolean,
-  onClose?: (event?: React.MouseEvent<HTMLElement>) => unknown
-) => {
-  const backdropRef = useRef<HTMLDivElement>(null);
-  const onBackdropClick = () => onClose && onClose();
-
-  useEffect(() => {
-    !disableBackdrop && backdropRef.current?.addEventListener('click', onBackdropClick);
-    return () => {
-      !disableBackdrop && backdropRef.current?.removeEventListener('click', onBackdropClick);
-    };
-  }, []);
-
-  return {
-    backdropRef,
-  };
-};
-
-export const useSetBodyScroll = (open: boolean) => {
-  const hideBodyScroll = () => {
-    document.body.style[SCROLL_PROPERTY_NAME] = SCROLL_PROPERTY_VALUE;
-  };
-
-  const showBodyScroll = () => {
-    const allModalsClosed =
-      document.querySelectorAll('[role=dialog][data-hidden=false]').length === 0;
-    if (allModalsClosed) {
-      document.body.style.removeProperty(SCROLL_PROPERTY_NAME);
-    }
-  };
-
-  useEffect(() => {
-    if (open) {
-      hideBodyScroll();
-    } else {
-      showBodyScroll();
-    }
-  }, [open]);
-};
-
-export const BaseModal = ({
-  id,
-  children,
-  open,
-  onClose,
-  className = '',
-  containerClassName = '',
-  labelledby,
-  describedby,
-  disableEscapeKeyDown = false,
-  disableBackdrop = false,
-  zIndex,
-  ...restProps
-}: Props) => {
-  const { backdropRef } = useBackdropOnCloseClick(disableBackdrop, onClose);
-  useSetBodyScroll(open);
-
-  const handleEscKeyPress = (event: React.KeyboardEvent<HTMLDivElement>) => {
-    if (!disableEscapeKeyDown && event.key === 'Escape') {
-      event.stopPropagation();
-      onClose && onClose();
-    }
-  };
-
-  return (
-    <div
-      {...restProps}
-      id={id}
-      className={`${classes['modal']} ${open && classes['visible']} ${className}`}
-      role="dialog"
-      aria-modal="true"
-      aria-labelledby={labelledby || labelId(id)}
-      aria-describedby={describedby || descriptionId(id)}
-      aria-hidden={!open}
-      tabIndex={-1}
-      data-hidden={!open}
-      onKeyDown={handleEscKeyPress}
-      style={{ zIndex }}
-    >
-      <div ref={backdropRef} className={classes['backdrop']}></div>
-      {open && (
-        <div
-          style={{ zIndex: zIndex && zIndex + 1 }}
-          className={`${classes['container']} ${containerClassName}`}
-        >
-          {children}
-        </div>
-      )}
-    </div>
-  );
-};

package/src/BaseModal/BaseModalActions/BaseModalActions.test.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import { BaseModalActions } from './BaseModalActions';
-import { render } from '@testing-library/react';
-
-describe('BaseModalActions', () => {
-  it('renders without crashing', () => {
-    const children = 'Content';
-    const classNames = ['class1', 'class2'];
-    const { container } = render(
-      <BaseModalActions className={classNames.join(' ')}>{children}</BaseModalActions>
-    );
-
-    const dialogActionsContainer = container.children[0];
-    expect(dialogActionsContainer).toHaveClass('actions', classNames[0], classNames[1]);
-    expect(dialogActionsContainer).toHaveTextContent(children);
-  });
-});

package/src/BaseModal/BaseModalActions/BaseModalActions.tsx

@@ -1,14 +0,0 @@
-import React, { HTMLAttributes } from 'react';
-import classes from './BaseModalActions.module.scss';
-
-export interface Props extends HTMLAttributes<HTMLElement> {
-  children?: React.ReactNode;
-}
-
-export const BaseModalActions = ({ children, className = '', ...restProps }: Props) => {
-  return (
-    <footer {...restProps} className={`${classes['actions']} ${className}`}>
-      {children}
-    </footer>
-  );
-};

package/src/BaseModal/BaseModalContent/BaseModalContent.tsx

@@ -1,35 +0,0 @@
-import React, { HTMLAttributes, useEffect, useRef } from 'react';
-import classes from './BaseModalContent.module.scss';
-
-export interface Props extends HTMLAttributes<HTMLDivElement> {
-  id?: string;
-  children: React.ReactNode;
-  className?: string;
-  disableAutoFocus?: boolean;
-}
-
-export const BaseModalContent = ({
-  id,
-  children,
-  className = '',
-  disableAutoFocus = false,
-  ...restProps
-}: Props) => {
-  const contentRef = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    !disableAutoFocus && contentRef.current?.focus();
-  }, []);
-
-  /**tabIndex is set to be able to do focus on that element which we need for catching keyDown events */
-  return (
-    <div
-      {...restProps}
-      ref={contentRef}
-      id={id}
-      className={`${classes['content']} ${className}`}
-      tabIndex={-1}
-    >
-      {children}
-    </div>
-  );
-};

package/src/BaseModal/BaseModalHeader/BaseModalHeader.tsx

@@ -1,28 +0,0 @@
-import React, { HTMLAttributes } from 'react';
-import classes from './BaseModalHeader.module.scss';
-import { IconButton } from '../../Button/IconButton';
-import { Icon, Icons } from '../../Icon/Icon';
-import { Typography } from '../../Typography/Typography';
-
-export interface Props extends HTMLAttributes<HTMLElement> {
-  id: string;
-  title: string;
-  children?: React.ReactNode;
-  onClose: (event: React.MouseEvent<HTMLButtonElement>) => void;
-}
-
-export const BaseModalHeader = ({ id, title, children, onClose, ...restProps }: Props) => {
-  return (
-    <header {...restProps} className={classes['header']}>
-      <div className={classes['headline']}>
-        <Typography id={id} className={classes['title']} tag="h1" variant="h4">
-          {title}
-        </Typography>
-        <IconButton onClick={onClose} className={classes['closeBtn']} title="close modal">
-          <Icon icon={Icons.Times} />
-        </IconButton>
-      </div>
-      {children}
-    </header>
-  );
-};

package/src/Dialog/Dialog.tsx

@@ -1,96 +0,0 @@
-import React, { HTMLAttributes } from 'react';
-import { BaseModal } from '../BaseModal/BaseModal';
-import { BaseModalContent } from '../BaseModal/BaseModalContent/BaseModalContent';
-import { DialogActions } from './DialogActions/DialogActions';
-import classes from './Dialog.module.scss';
-import { DialogTitle } from './DialogTitle/DialogTitle';
-import { Button, Props as ButtonProps } from '../Button/Button';
-import { labelId, descriptionId } from '../BaseModal/BaseModalContext';
-
-export interface Props extends HTMLAttributes<HTMLDivElement> {
-  id: string;
-  open: boolean;
-  children: React.ReactNode;
-  alignActions: 'left' | 'right';
-  onClose: () => void;
-  title: string;
-  primaryAction: Action;
-  secondaryAction?: Action;
-  zIndex?: number;
-}
-
-export interface Action extends Omit<ButtonProps, 'variant' | 'ref'> {
-  label: string;
-  onClick: (event?: React.MouseEvent<HTMLButtonElement>) => unknown;
-}
-
-export const Dialog = ({
-  id,
-  open,
-  children,
-  alignActions,
-  onClose,
-  title,
-  primaryAction,
-  secondaryAction,
-  zIndex,
-  ...restProps
-}: Props) => {
-  const { label: primaryLabel, ...restOfPrimaryAction } = primaryAction;
-  const PrimaryButton = (
-    <Button key="primary" {...restOfPrimaryAction}>
-      {primaryLabel}
-    </Button>
-  );
-  const TertiaryButton =
-    secondaryAction &&
-    (function () {
-      const { label: secondaryLabel, ...restOfSecondaryAction } = secondaryAction;
-      return (
-        <Button key="tertiary" variant="text" {...restOfSecondaryAction}>
-          {secondaryLabel}
-        </Button>
-      );
-    })();
-
-  const onHiddenInputKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    /** It has to be here because then we will need to check if user doesn't click tab to select action button and want to do another action then primary one? */
-    if (event.key === 'Enter') {
-      primaryAction.onClick();
-    }
-  };
-
-  return (
-    <BaseModal
-      {...restProps}
-      id={id}
-      className={classes['dialog']}
-      containerClassName={classes['container']}
-      open={open}
-      disableBackdrop
-      onClose={onClose}
-      zIndex={zIndex}
-    >
-      <DialogTitle id={labelId(id)} title={title} />
-      <BaseModalContent id={descriptionId(id)} className={classes['content']} disableAutoFocus>
-        {children}
-      </BaseModalContent>
-      <DialogActions align={alignActions}>
-        {alignActions === 'left'
-          ? [PrimaryButton, TertiaryButton]
-          : [TertiaryButton, PrimaryButton]}
-      </DialogActions>
-      <input
-        autoFocus
-        style={{
-          position: 'absolute',
-          width: 0,
-          height: 0,
-          opacity: 0,
-        }}
-        tabIndex={-1}
-        onKeyPress={onHiddenInputKeyPress}
-      />
-    </BaseModal>
-  );
-};

package/src/Dialog/DialogActions/DialogActions.test.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import { DialogActions, Props } from './DialogActions';
-import { render } from '@testing-library/react';
-
-const initParams: Props = {
-  align: 'right',
-  children: 'Content',
-};
-
-describe('DialogActions', () => {
-  it('renders without crashing', () => {
-    const { container } = render(<DialogActions {...initParams} />);
-
-    const dialogActionsContainer = container.children[0];
-    expect(dialogActionsContainer).toHaveClass('actions');
-    expect(dialogActionsContainer).toHaveTextContent(initParams.children as string);
-  });
-
-  it('should align items to left', () => {
-    const { container } = render(<DialogActions {...initParams} align="left" />);
-
-    const dialogActionsContainer = container.children[0];
-    expect(dialogActionsContainer).toHaveClass('actions', 'left');
-  });
-});

package/src/Dialog/DialogActions/DialogActions.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import {
-  BaseModalActions,
-  Props as BaseModalActionsProps,
-} from '../../BaseModal/BaseModalActions/BaseModalActions';
-import classes from './DialogActions.module.scss';
-
-export interface Props extends BaseModalActionsProps {
-  align: 'left' | 'right';
-}
-
-export const DialogActions = ({ children, align, ...restProps }: Props) => {
-  return (
-    <BaseModalActions
-      {...restProps}
-      className={`${classes['actions']}${align === 'left' ? ' ' + classes['left'] : ''}`}
-    >
-      {children}
-    </BaseModalActions>
-  );
-};

package/src/Dialog/DialogTitle/DialogTitle.test.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import { DialogTitle, Props } from './DialogTitle';
-import { render, getByText } from '@testing-library/react';
-
-const initParams: Props = {
-  id: 'dialog-label',
-  title: 'Example title',
-};
-
-describe('DialogActions', () => {
-  it('renders without crashing', () => {
-    const { container } = render(<DialogTitle {...initParams} />);
-
-    const dialogTitleContainer = container.children[0];
-    expect(dialogTitleContainer).toHaveClass('header');
-    expect(getByText(container, initParams.title));
-  });
-});

package/src/Dialog/DialogTitle/DialogTitle.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import { Typography } from '../../Typography/Typography';
-import classes from './DialogTitle.module.scss';
-
-export interface Props {
-  id: string;
-  title: string;
-}
-
-export const DialogTitle = ({ id, title }: Props) => {
-  return (
-    <header className={classes['header']}>
-      <Typography id={id} className={classes['title']} tag="h1" variant="h4">
-        {title}
-      </Typography>
-    </header>
-  );
-};