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

package/lib/components/Toast/Toast.js.flow

@@ -0,0 +1,249 @@
+// @flow strict
+
+import * as React from 'react';
+import {
+  // $FlowFixMe[untyped-import]
+  FloatingFocusManager,
+  // $FlowFixMe[untyped-import]
+  useFloating,
+} from '@floating-ui/react';
+
+import classify from '../../utils/classify';
+import {CloseIcon, Icon} from '../Icon';
+import {SubTitleExtraSmall, TEXT_COLORS} from '../Text';
+
+import typography from '../../styles/typography.module.css';
+import css from './Toast.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string, time?: string}>;
+
+export const TOAST_SEMANTIC = Object.freeze({
+  success: 'success',
+  information: 'information',
+  warning: 'warning',
+  danger: 'danger',
+  primary: 'primary',
+});
+
+export type ToastSemanticType = $Values<typeof TOAST_SEMANTIC>;
+
+export type ToastProps = {
+  classNames?: ClassNames,
+  children?: React.Node,
+  time?: string,
+  semantic?: ToastSemanticType,
+  onClose?: () => void,
+  initialFocus?: number,
+  customIcon?: React.Node,
+  hideCloseIcon?: boolean,
+};
+
+const ToastIcon = ({semantic}: {semantic: ToastSemanticType}) => {
+  switch (semantic) {
+  case 'success':
+    return (
+      <Icon
+        name="circle-check"
+        size="medium"
+        color={TEXT_COLORS.success}
+        type="solid"
+      />
+    );
+
+  case TOAST_SEMANTIC.information:
+    return (
+      <Icon
+        name="circle-info"
+        size="medium"
+        color={TEXT_COLORS.information}
+        type="solid"
+      />
+    );
+
+  case TOAST_SEMANTIC.warning:
+    return (
+      <Icon
+        name="circle-exclamation"
+        size="medium"
+        color={TEXT_COLORS.warning}
+        type="solid"
+      />
+    );
+
+  case TOAST_SEMANTIC.danger:
+    return (
+      <Icon
+        name="shield-exclamation"
+        size="medium"
+        color={TEXT_COLORS.danger}
+        type="solid"
+      />
+    );
+
+  default:
+    return (
+      <Icon
+        color={TEXT_COLORS.neutral}
+        name="face-smile"
+        size="medium"
+        type="solid"
+      />
+    );
+  }
+};
+
+export type ToastTitleProps = {
+  children?: React.Node,
+  className?: string,
+  semantic?: ToastSemanticType,
+};
+
+export const ToastTitle: React$AbstractComponent<
+  ToastTitleProps,
+  HTMLDivElement,
+> = React.forwardRef<ToastTitleProps, HTMLDivElement>(
+  (
+    {children, semantic = '', className, ...props}: ToastTitleProps,
+    ref,
+  ): React.Node => (
+    <div
+      className={classify(css.toastTitle, typography[semantic], className)}
+      {...props}
+      ref={ref}
+    >
+      {children}
+    </div>
+  ),
+);
+
+ToastTitle.displayName = 'ToastTitle';
+
+export type ToastBodyProps = {
+  children?: React.Node,
+  className?: string,
+};
+
+export const ToastBody: React$AbstractComponent<
+  ToastBodyProps,
+  HTMLDivElement,
+> = React.forwardRef<ToastBodyProps, HTMLDivElement>(
+  ({children, className, ...props}: ToastBodyProps, ref): React.Node => (
+    <div className={classify(css.toastBody, className)} {...props} ref={ref}>
+      {children}
+    </div>
+  ),
+);
+
+ToastBody.displayName = 'ToastBody';
+
+export type ToastFooterProps = {
+  children?: React.Node,
+  onClose?: () => void,
+};
+
+export const ToastFooter = ({
+  children,
+  onClose,
+}: ToastFooterProps): React.Node => {
+  const arrayChildren = React.Children.toArray(children);
+  const footerActions = React.Children.map(children, (child, index) => {
+    const isLast = index === arrayChildren.length - 1;
+    if (React.isValidElement(child)) {
+      const {onClick} = child.props;
+
+      const buttonClickHandler = (e) => {
+        onClose && onClose();
+        onClick && onClick(e);
+      };
+
+      if (child?.type?.displayName === 'Button' && isLast) {
+        return React.cloneElement(child, {
+          size: 'small',
+          type: 'primary',
+          ...child.props,
+          onClick: buttonClickHandler,
+        });
+      } else if (child?.type?.displayName === 'Button') {
+        return React.cloneElement(child, {
+          size: 'small',
+          type: 'tertiary',
+          ...child.props,
+          onClick: buttonClickHandler,
+        });
+      }
+    }
+    return child;
+  });
+
+  return React.Children.count(children) > 0 ? (
+    <div className={css.toastFooterActions}>{footerActions}</div>
+  ) : null;
+};
+
+ToastFooter.displayName = 'ToastFooter';
+
+export const Toast = ({
+  classNames,
+  children,
+  time,
+  semantic = TOAST_SEMANTIC.success,
+  onClose,
+  initialFocus = -1,
+  customIcon,
+  hideCloseIcon,
+}: ToastProps): React.Node => {
+  const {refs, context} = useFloating({
+    open: true,
+  });
+
+  const getComp = (comp: string) => {
+    const childrenArray = React.Children.toArray(children);
+    if (childrenArray.length) {
+      const nodes: React.Node[] = [];
+      for (const child of childrenArray) {
+        if (child?.type?.displayName === comp) {
+          nodes.push(React.cloneElement(child, {semantic}));
+        }
+      }
+      return nodes.length > 1 ? nodes : nodes[0];
+    }
+    return null;
+  };
+
+  const footer = getComp('ToastFooter');
+  // $FlowFixMe
+  const footerWithClose = footer ? React.cloneElement(footer, {onClose}) : null;
+
+  return (
+    <FloatingFocusManager context={context} initialFocus={initialFocus}>
+      <div
+        className={classify(css.toastContainer, classNames?.wrapper)}
+        ref={refs.setFloating}
+      >
+        {customIcon || <ToastIcon semantic={semantic} />}
+        <div className={css.toastMidSection}>
+          <div className={css.contentWrap}>
+            <div className={css.titleBodyWrap}>
+              {getComp('ToastTitle')}
+              {getComp('ToastBody')}
+            </div>
+            {time && (
+              <SubTitleExtraSmall className={classNames?.time}>
+                {time}
+              </SubTitleExtraSmall>
+            )}
+          </div>
+          {footerWithClose}
+        </div>
+        {!hideCloseIcon && (
+          <CloseIcon
+            classNames={{button: css.closeIcon}}
+            onClick={onClose}
+            ariaLabel="Close Button"
+          />
+        )}
+      </div>
+    </FloatingFocusManager>
+  );
+};

package/lib/components/Toast/ToastContainer.js

@@ -12,6 +12,7 @@ var _ = require("./");
 var _ToastContainerModule = _interopRequireDefault(require("./ToastContainer.module.css"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+// $FlowFixMe[untyped-import]
 const ADD = 'ADD';
 const REMOVE = 'REMOVE';
 const reducer = (state, action) => {
@@ -20,7 +21,8 @@ const reducer = (state, action) => {
     data
   } = action;
   if (type === ADD) {
-    if (state.filter(i => i.uniqueCode && i.uniqueCode === data.uniqueCode).length) {
+    if (/* $FlowIgnore */
+    state.filter(i => i.uniqueCode && i.uniqueCode === data.uniqueCode).length) {
       return state;
     }
     return [...state, data];
@@ -72,6 +74,7 @@ const ToastContainer = () => {
   }, []);
   const positionMaintainer = () => {
     const mapper = {};
+    /* $FlowIgnore */
     data.map(_ref => {
       let {
         position,
@@ -96,7 +99,7 @@ const ToastContainer = () => {
         } = _ref2;
         return (
           /*#__PURE__*/
-          // @ts-ignore - TS2769 - No overload matches this call.
+          // $FlowFixMe
           _react.default.cloneElement(content, {
             key: id,
             onClose: () => dispatch({

package/lib/components/Toast/ToastContainer.js.flow

@@ -0,0 +1,125 @@
+// @flow strict
+
+import React, {useEffect, useReducer, useRef} from 'react';
+// $FlowFixMe[untyped-import]
+import {createPortal} from 'react-dom';
+import type {actionTypes, contentTypes, optionTypes} from 'src/types/toast';
+
+import {useToastPortal} from '../../hooks';
+import {classify} from '../../utils/classify';
+
+import {toastManager} from './';
+
+import css from './ToastContainer.module.css';
+
+
+const ADD = 'ADD';
+const REMOVE = 'REMOVE';
+
+type stateTypes = {
+  ...optionTypes,
+  content?: contentTypes,
+};
+
+type MapperValues = {
+  ...optionTypes,
+  content: contentTypes,
+};
+
+type Actions = {
+  type: actionTypes,
+  data: stateTypes,
+};
+
+const reducer = (state: stateTypes[], action: Actions) => {
+  const {type, data} = action;
+
+  if (type === ADD) {
+    if (
+      /* $FlowIgnore */
+      state.filter((i) => i.uniqueCode && i.uniqueCode === data.uniqueCode)
+        .length
+    ) {
+      return state;
+    }
+
+    return [...state, data];
+  } else if (type === REMOVE) {
+    return state.filter((i) => i.id !== data.id);
+  }
+  return state;
+};
+
+export const ToastContainer = (): null | React$Portal => {
+  const [data, dispatch] = useReducer(reducer, []);
+  const toastRef = useRef<HTMLDivElement | null>(null);
+
+  const {loaded} = useToastPortal({toastRef});
+
+  const callback = (
+    actionType: actionTypes,
+    content: contentTypes,
+    options: optionTypes,
+  ) => {
+    if (actionType === ADD) {
+      dispatch({type: ADD, data: {content, ...options, key: `${options.id}`}});
+    }
+    if (actionType === REMOVE) {
+      dispatch({type: REMOVE, data: {id: options.id}});
+    }
+
+    if (options.autoClose) {
+      window.setTimeout(() => {
+        dispatch({type: REMOVE, data: {id: options.id}});
+      }, options.timeout);
+    }
+  };
+
+  useEffect(() => {
+    toastManager.subscribe(callback);
+  }, []);
+
+  const positionMaintainer = () => {
+    const mapper = {};
+    /* $FlowIgnore */
+    data.map(({position, ...rest}: optionTypes) => {
+      if (position) {
+        if (!mapper[position]) {
+          mapper[position] = [];
+        }
+        mapper[position].push(rest);
+      }
+    });
+
+    return mapper;
+  };
+
+  const markup = () => {
+    const mapper = positionMaintainer();
+
+    return Object.keys(mapper).map((position) => {
+      const content = mapper[position].map(({content, id}: MapperValues) =>
+        // $FlowFixMe
+        React.cloneElement(content, {
+          key: id,
+          onClose: () => dispatch({type: REMOVE, data: {id}}),
+        }),
+      );
+
+      return (
+        <div
+          key={position.toString()}
+          className={classify(css.toastContainer, css[position])}
+        >
+          {content}
+        </div>
+      );
+    });
+  };
+
+  if (!toastRef.current) {
+    return null;
+  }
+
+  return loaded ? createPortal(markup(), toastRef.current) : null;
+};

package/lib/components/Toast/ToastManager.js

@@ -27,7 +27,6 @@ const defaultOptions = {
 const toastManager = exports.toastManager = (() => {
   let callbackFn;
   const manager = {
-    // @ts-ignore - TS2355 - A function whose declared type is neither 'void' nor 'any' must return a value.
     subscribe(callback) {
       callbackFn = callback;
     },

package/lib/components/Toast/ToastManager.js.flow

@@ -0,0 +1,67 @@
+// @flow strict
+
+import type {
+  callbackFuncTypes,
+  contentTypes,
+  ToastOptions,
+} from '../../types/toast';
+import {uuid} from '../../utils/helpers';
+
+
+const DEFAULT_AUTOCLOSE_TIME = 8000; // default auto close time for with autoClose = true (be default true) but timeout not passed.
+
+export const POSITIONS = {
+  TOP_CENTER: 'topCenter',
+  TOP_LEFT: 'topLeft',
+  TOP_RIGHT: 'topRight',
+  BOTTOM_LEFT: 'bottomLeft',
+  BOTTOM_RIGHT: 'bottomRight',
+  BOTTOM_CENTER: 'bottomCenter',
+};
+
+export const ACTIONS = {
+  ADD: 'ADD',
+  REMOVE: 'REMOVE',
+};
+
+const defaultOptions: ToastOptions = {
+  autoClose: true,
+  timeout: DEFAULT_AUTOCLOSE_TIME,
+  position: POSITIONS.BOTTOM_LEFT,
+};
+
+export const toastManager: {
+  add(content: contentTypes, options?: ToastOptions): string,
+  remove(id: string): boolean,
+  subscribe(callback: callbackFuncTypes): void,
+  ...
+} = (() => {
+  let callbackFn: callbackFuncTypes;
+
+  const manager = {
+    subscribe(callback: callbackFuncTypes): void {
+      callbackFn = callback;
+    },
+
+    add(content: contentTypes, options?: ToastOptions): string {
+      const mergedOptions = {...defaultOptions, ...options};
+      const toastId = uuid();
+      callbackFn &&
+        callbackFn(ACTIONS.ADD, content, {...mergedOptions, id: toastId});
+      return toastId;
+    },
+
+    remove(id: string) {
+      callbackFn(ACTIONS.REMOVE, null, {id});
+      return true;
+    },
+  };
+
+  return manager;
+})();
+
+export const toastApi = {
+  show: (content: contentTypes, options?: ToastOptions): string =>
+    toastManager.add(content, options),
+  remove: (id: string): boolean => toastManager.remove(id),
+};

package/lib/components/Toast/index.js.flow

@@ -0,0 +1,12 @@
+// @flow strict
+
+export type {ToastProps, ToastSemanticType} from './Toast';
+export {
+  Toast,
+  TOAST_SEMANTIC,
+  ToastBody,
+  ToastFooter,
+  ToastTitle,
+} from './Toast';
+export {ToastContainer} from './ToastContainer';
+export {toastApi, toastManager} from './ToastManager';

package/lib/components/Toggle/Toggle.js

@@ -32,7 +32,6 @@ const Toggle = exports.Toggle = /*#__PURE__*/React.forwardRef((_ref, forwardRef)
     ...props
   } = _ref;
   const toggleInput = /*#__PURE__*/React.createRef();
-  // @ts-ignore - TS2322 - Type 'HTMLInputElement | null' is not assignable to type 'HTMLInputElement'.
   React.useImperativeHandle(forwardRef, () => toggleInput.current);
   const handleOnChange = () => {
     if (!disabled) {

package/lib/components/Toggle/Toggle.js.flow

@@ -0,0 +1,113 @@
+// @flow strict
+
+import * as React from 'react';
+
+import classify from '../../utils/classify';
+
+import css from './Toggle.module.css';
+
+/**
+ * Note:
+ * Do not wrap Toggle in a label. For simplicity's sake, Toggle uses an
+ * internal label tag to handle click delegation to the hidden input, and
+ * nesting labels is a bad idea.
+ */
+
+type ClassNames = $ReadOnly<{wrapper?: string, label?: string}>;
+
+export type ToggleProps = {
+  name?: string,
+  classNames?: ClassNames,
+  children?: React.Node,
+  checked?: boolean,
+  onChange?: ({value: string, checked: boolean}) => mixed,
+  disabled?: boolean,
+  focused?: boolean,
+  value?: string,
+  ariaLabel?: string,
+  labelPosition?: 'left' | 'right',
+};
+
+export const Toggle: React$AbstractComponent<ToggleProps, HTMLInputElement> =
+  React.forwardRef<ToggleProps, HTMLInputElement>(
+    (
+      {
+        name = 'toggle',
+        value = '',
+        classNames,
+        children,
+        disabled,
+        checked,
+        focused,
+        onChange,
+        ariaLabel,
+        labelPosition = 'right',
+        ...props
+      }: ToggleProps,
+      forwardRef,
+    ): React.Node => {
+      const toggleInput = React.createRef<HTMLInputElement>();
+      React.useImperativeHandle(forwardRef, () => toggleInput.current);
+      const handleOnChange = () => {
+        if (!disabled) {
+          onChange &&
+            onChange({
+              value,
+              checked: !checked,
+            });
+        }
+      };
+
+      const onWrapClickHandler = (e) => {
+        e.nativeEvent.stopImmediatePropagation();
+        toggleInput.current?.click();
+      };
+
+      React.useEffect(() => {
+        if (toggleInput.current && focused) {
+          toggleInput.current.focus();
+        }
+      }, [focused]);
+      return (
+        <div
+          className={classify(
+            css.container,
+            {
+              [css.disabled]: disabled,
+            },
+            classNames?.wrapper,
+          )}
+          onClick={onWrapClickHandler}
+        >
+          {labelPosition === 'left' && React.Children.count(children) > 0 && (
+            <div className={classify(css.toggleLabel, classNames?.label)}>
+              {children}
+            </div>
+          )}
+          <span className={css.toggleWrap}>
+            <input
+              type="checkbox"
+              name={name}
+              value={value}
+              checked={checked}
+              onChange={handleOnChange}
+              ref={toggleInput}
+              disabled={disabled}
+              aria-label={ariaLabel || children}
+              {...props}
+            />
+            <span
+              className={classify(css.toggle, {
+                [css.disabledButton]: disabled,
+              })}
+            />
+          </span>
+          {labelPosition === 'right' && React.Children.count(children) > 0 && (
+            <div className={classify(css.toggleLabel, classNames?.label)}>
+              {children}
+            </div>
+          )}
+        </div>
+      );
+    },
+  );

package/lib/components/Toggle/index.js.flow

@@ -0,0 +1,2 @@
+//@flow strict
+export * from './Toggle';