@spaced-out/ui-design-system 0.0.1-alpha.0

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

@@ -0,0 +1,210 @@
+// @flow strict
+
+import * as React from 'react';
+import {
+  // $FlowFixMe[untyped-import]
+  FloatingFocusManager,
+  // $FlowFixMe[untyped-import]
+  useFloating,
+} from '@floating-ui/react-dom-interactions';
+
+import classify from '../../utils/classify';
+import {CloseIcon, Icon} from '../Icon';
+import {
+  BodyMedium,
+  SubTitleExtraSmall,
+  SubTitleSmall,
+  TEXT_COLORS,
+} from '../Text';
+
+import css from './Toast.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string}>;
+
+export const TOAST_SEMANTIC = Object.freeze({
+  success: 'success',
+  information: 'information',
+  warning: 'warning',
+  danger: 'danger',
+});
+
+const TOAST_TITLE_COLOR = {
+  success: TEXT_COLORS.success,
+  information: TEXT_COLORS.information,
+  warning: TEXT_COLORS.warning,
+  danger: TEXT_COLORS.danger,
+};
+
+export type ToastSemanticType = $Values<typeof TOAST_SEMANTIC>;
+
+export type ToastProps = {
+  classNames?: ClassNames,
+  children?: React.Node,
+  time?: string,
+  semantic?: ToastSemanticType,
+  onClose?: () => void,
+  initialFocus?: number,
+};
+
+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,
+};
+
+export const ToastTitle = ({children}: ToastTitleProps): React.Node => children;
+
+export type ToastBodyProps = {
+  children?: React.Node,
+};
+
+export const ToastBody = ({children}: ToastBodyProps): React.Node => children;
+
+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?.name === 'Button' && isLast) {
+        return React.cloneElement(child, {
+          size: 'small',
+          type: 'primary',
+          ...child.props,
+          onClick: buttonClickHandler,
+        });
+      } else if (child?.type?.name === '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;
+};
+
+export const Toast = ({
+  classNames,
+  children,
+  time,
+  semantic = TOAST_SEMANTIC.success,
+  onClose,
+  initialFocus = -1,
+}: ToastProps): React.Node => {
+  const {floating, context} = useFloating();
+
+  const getComp = (comp: string) => {
+    if (children instanceof Array) {
+      const nodes: React.Node[] = [];
+      for (const child of children) {
+        if (child?.type?.name === comp) {
+          nodes.push(child);
+        }
+      }
+      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={floating}
+      >
+        <ToastIcon semantic={semantic} />
+        <div className={css.toastMidSection}>
+          <div className={css.contentWrap}>
+            <div className={css.titleBodyWrap}>
+              <SubTitleSmall color={TOAST_TITLE_COLOR[semantic]}>
+                {getComp('ToastTitle')}
+              </SubTitleSmall>
+              <BodyMedium>{getComp('ToastBody')}</BodyMedium>
+            </div>
+            {time && <SubTitleExtraSmall>{time}</SubTitleExtraSmall>}
+          </div>
+          {footerWithClose}
+        </div>
+        <CloseIcon onClick={onClose} />
+      </div>
+    </FloatingFocusManager>
+  );
+};

package/lib/components/Toast/Toast.module.css

@@ -0,0 +1,52 @@
+@value (spaceNone,spaceXXSmall, spaceSmall, spaceMedium) from '../../styles/variables/_space.css';
+
+@value (size24, size400) from '../../styles/variables/_size.css';
+
+@value (colorBorderPrimary, colorBackgroundTertiary) from '../../styles/variables/_color.css';
+
+@value (borderWidthPrimary, borderRadiusMedium) from '../../styles/variables/_border.css';
+
+.toastContainer {
+  composes: boxShadow1 from '../../styles/shadow.module.css';
+  composes: borderPrimary from '../../styles/border.module.css';
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  padding: spaceMedium;
+  gap: spaceSmall;
+  width: size400;
+  min-width: size400;
+  border-radius: borderRadiusMedium;
+  background: colorBackgroundTertiary;
+}
+
+.toastMidSection {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: spaceNone;
+  gap: spaceMedium;
+}
+
+.contentWrap {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding-top: spaceXXSmall;
+  gap: spaceSmall;
+}
+
+.titleBodyWrap {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: spaceNone;
+  gap: spaceXXSmall;
+}
+
+.toastFooterActions {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: spaceSmall;
+}

package/lib/components/Toast/ToastContainer.js

@@ -0,0 +1,129 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ToastContainer = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactDom = require("react-dom");
+var _hooks = require("../../hooks");
+var _classify = require("../../utils/classify");
+var _ = require("./");
+var _ToastContainerModule = _interopRequireDefault(require("./ToastContainer.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+// $FlowFixMe[untyped-import]
+
+const ADD = 'ADD';
+const REMOVE = 'REMOVE';
+const reducer = (state, action) => {
+  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;
+};
+const ToastContainer = () => {
+  const [data, dispatch] = (0, _react.useReducer)(reducer, []);
+  const toastRef = (0, _react.useRef)(null);
+  const {
+    loaded
+  } = (0, _hooks.useToastPortal)({
+    toastRef
+  });
+  const callback = (actionType, content, options) => {
+    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);
+    }
+  };
+  (0, _react.useEffect)(() => {
+    _.toastManager.subscribe(callback);
+  }, []);
+  const positionMaintainer = () => {
+    const mapper = {};
+    /* $FlowIgnore */
+    data.map(_ref => {
+      let {
+        position,
+        ...rest
+      } = _ref;
+      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(_ref2 => {
+        let {
+          content,
+          id
+        } = _ref2;
+        return (
+          /*#__PURE__*/
+          // $FlowFixMe
+          _react.default.cloneElement(content, {
+            key: id,
+            onClose: () => dispatch({
+              type: REMOVE,
+              data: {
+                id
+              }
+            })
+          })
+        );
+      });
+      return /*#__PURE__*/(0, _jsxRuntime.js)("div", {
+        className: (0, _classify.classify)(_ToastContainerModule.default.toastContainer, _ToastContainerModule.default[position]),
+        children: content
+      }, position.toString());
+    });
+  };
+  if (!toastRef.current) {
+    return null;
+  }
+  return loaded ? /*#__PURE__*/(0, _reactDom.createPortal)(markup(), toastRef.current) : null;
+};
+exports.ToastContainer = ToastContainer;

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/ToastContainer.module.css

@@ -0,0 +1,41 @@
+@value (
+  spaceSmall,
+  spaceMedium, 
+  spaceHalfFluid, 
+  spaceNegHalfFluid
+) from '../../styles/variables/_space.css';
+
+.toastContainer {
+  position: fixed;
+  background: transparent;
+  display: flex;
+  flex-direction: column;
+  gap: spaceSmall;
+}
+.toastContainer.topCenter {
+  top: spaceMedium;
+  left: spaceHalfFluid;
+  transform: translateX(spaceNegHalfFluid);
+}
+.toastContainer.topLeft {
+  top: spaceMedium;
+  left: spaceMedium;
+}
+.toastContainer.topRight {
+  top: spaceMedium;
+  right: spaceMedium;
+}
+.toastContainer.bottomCenter {
+  bottom: spaceMedium;
+  left: spaceHalfFluid;
+  transform: translateX(spaceNegHalfFluid);
+}
+
+.toastContainer.bottomLeft {
+  bottom: spaceMedium;
+  left: spaceMedium;
+}
+.toastContainer.bottomRight {
+  bottom: spaceMedium;
+  right: spaceMedium;
+}

package/lib/components/Toast/ToastManager.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.toastManager = exports.toastApi = exports.POSITIONS = exports.ACTIONS = void 0;
+var _helpers = require("../../utils/helpers");
+
+const DEFAULT_AUTOCLOSE_TIME = 8000; // default auto close time for with autoClose = true (be default true) but timeout not passed.
+
+const POSITIONS = {
+  TOP_CENTER: 'topCenter',
+  TOP_LEFT: 'topLeft',
+  TOP_RIGHT: 'topRight',
+  BOTTOM_LEFT: 'bottomLeft',
+  BOTTOM_RIGHT: 'bottomRight',
+  BOTTOM_CENTER: 'bottomCenter'
+};
+exports.POSITIONS = POSITIONS;
+const ACTIONS = {
+  ADD: 'ADD',
+  REMOVE: 'REMOVE'
+};
+exports.ACTIONS = ACTIONS;
+const defaultOptions = {
+  autoClose: true,
+  timeout: DEFAULT_AUTOCLOSE_TIME,
+  position: POSITIONS.BOTTOM_LEFT
+};
+const toastManager = (() => {
+  let callbackFn;
+  const manager = {
+    subscribe(callback) {
+      callbackFn = callback;
+    },
+    add(content, options) {
+      const mergedOptions = {
+        ...defaultOptions,
+        ...options
+      };
+      const toastId = (0, _helpers.uuid)();
+      callbackFn && callbackFn(ACTIONS.ADD, content, {
+        ...mergedOptions,
+        id: toastId
+      });
+      return toastId;
+    },
+    remove(id) {
+      callbackFn(ACTIONS.REMOVE, null, {
+        id
+      });
+      return true;
+    }
+  };
+  return manager;
+})();
+exports.toastManager = toastManager;
+const toastApi = {
+  show: (content, options) => toastManager.add(content, options),
+  remove: id => toastManager.remove(id)
+};
+exports.toastApi = toastApi;

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),
+};