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

package/lib/components/Modal/Modal.js

@@ -0,0 +1,121 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Modal = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _reactDom = require("react-dom");
+var _reactDomInteractions = require("@floating-ui/react-dom-interactions");
+var _useMountTransition = _interopRequireDefault(require("../../hooks/useMountTransition"));
+var _motion = require("../../styles/variables/_motion");
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _ModalModule = _interopRequireDefault(require("./Modal.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 createPortalRoot = () => {
+  const modalRoot = document.createElement('div');
+  modalRoot.setAttribute('id', 'modal-root');
+  return modalRoot;
+};
+const Modal = _ref => {
+  let {
+    classNames,
+    children,
+    isOpen = false,
+    onClose,
+    showBackdrop = false,
+    removeWhenClosed = true,
+    tapOutsideToClose = true,
+    initialFocus = -1
+  } = _ref;
+  const {
+    floating,
+    context
+  } = (0, _reactDomInteractions.useFloating)();
+  const bodyRef = React.useRef(document.querySelector('body'));
+  const portalRootRef = React.useRef(document.getElementById('modal-root') || createPortalRoot());
+  const isTransitioning = (0, _useMountTransition.default)(isOpen, parseInt(_motion.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) {
+        bodyEl.style.overflow = '';
+      }
+    };
+  }, []);
+
+  // Prevent page scrolling when the modal is open
+  React.useEffect(() => {
+    const updatePageScroll = () => {
+      if (isOpen) {
+        if (bodyRef.current) {
+          bodyRef.current.style.overflow = 'hidden';
+        }
+      } else {
+        if (bodyRef.current) {
+          bodyRef.current.style.overflow = '';
+        }
+      }
+    };
+    updatePageScroll();
+  }, [isOpen]);
+
+  // Allow Escape key to dismiss the modal
+  React.useEffect(() => {
+    const onKeyPress = e => {
+      if (e.key === 'Escape') {
+        tapOutsideToClose && onClose && onClose(e);
+      }
+    };
+    if (isOpen) {
+      window.addEventListener('keyup', onKeyPress);
+    }
+    return () => {
+      window.removeEventListener('keyup', onKeyPress);
+    };
+  }, [isOpen, onClose]);
+  if (!isTransitioning && removeWhenClosed && !isOpen) {
+    return null;
+  }
+  const onBackdropClick = e => {
+    if (tapOutsideToClose && onClose) {
+      onClose(e);
+    }
+  };
+  return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/(0, _jsxRuntime.js)(_reactDomInteractions.FloatingFocusManager, {
+    context: context,
+    initialFocus: initialFocus,
+    children: /*#__PURE__*/(0, _jsxRuntime.jss)("div", {
+      ref: floating,
+      "aria-hidden": isOpen ? 'false' : 'true',
+      className: (0, _classify.default)(_ModalModule.default.modalContainer, {
+        [_ModalModule.default.in]: isTransitioning,
+        [_ModalModule.default.open]: isOpen
+      }, classNames?.container),
+      children: [/*#__PURE__*/(0, _jsxRuntime.js)("div", {
+        className: (0, _classify.default)(_ModalModule.default.backdrop, {
+          [_ModalModule.default.darkBackdrop]: showBackdrop
+        }, classNames?.backdrop),
+        onClick: onBackdropClick
+      }), /*#__PURE__*/(0, _jsxRuntime.js)("div", {
+        className: (0, _classify.default)(_ModalModule.default.modal, classNames?.content),
+        role: "dialog",
+        children: children
+      })]
+    })
+  }), portalRootRef.current);
+};
+exports.Modal = Modal;

package/lib/components/Modal/Modal.js.flow

@@ -0,0 +1,157 @@
+// @flow strict
+
+import * as React from 'react';
+// $FlowFixMe[untyped-import]
+import {createPortal} from 'react-dom';
+import {
+  // $FlowFixMe[untyped-import]
+  FloatingFocusManager,
+  // $FlowFixMe[untyped-import]
+  useFloating,
+} from '@floating-ui/react-dom-interactions';
+
+import useMountTransition from '../../hooks/useMountTransition';
+import {motionDurationNormal} from '../../styles/variables/_motion';
+import classify from '../../utils/classify';
+
+import css from './Modal.module.css';
+
+
+type ClassNames = $ReadOnly<{
+  container?: string,
+  content?: string,
+  backdrop?: string,
+}>;
+
+export type ModalProps = {
+  classNames?: ClassNames,
+  children?: React.Node,
+  isOpen?: boolean,
+  onClose?: ?(SyntheticEvent<HTMLElement>) => mixed,
+  showBackdrop?: boolean,
+  removeWhenClosed?: boolean,
+  tapOutsideToClose?: boolean,
+  initialFocus?: number,
+};
+
+const createPortalRoot = () => {
+  const modalRoot = document.createElement('div');
+  modalRoot.setAttribute('id', 'modal-root');
+
+  return modalRoot;
+};
+
+export const Modal = ({
+  classNames,
+  children,
+  isOpen = false,
+  onClose,
+  showBackdrop = false,
+  removeWhenClosed = true,
+  tapOutsideToClose = true,
+  initialFocus = -1,
+}: ModalProps): React.Node => {
+  const {floating, context} = useFloating();
+
+  const bodyRef = React.useRef(document.querySelector('body'));
+  const portalRootRef = React.useRef(
+    document.getElementById('modal-root') || createPortalRoot(),
+  );
+
+  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) {
+        bodyEl.style.overflow = '';
+      }
+    };
+  }, []);
+
+  // Prevent page scrolling when the modal is open
+  React.useEffect(() => {
+    const updatePageScroll = () => {
+      if (isOpen) {
+        if (bodyRef.current) {
+          bodyRef.current.style.overflow = 'hidden';
+        }
+      } else {
+        if (bodyRef.current) {
+          bodyRef.current.style.overflow = '';
+        }
+      }
+    };
+
+    updatePageScroll();
+  }, [isOpen]);
+
+  // Allow Escape key to dismiss the modal
+  React.useEffect(() => {
+    const onKeyPress = (e) => {
+      if (e.key === 'Escape') {
+        tapOutsideToClose && onClose && onClose(e);
+      }
+    };
+
+    if (isOpen) {
+      window.addEventListener('keyup', onKeyPress);
+    }
+
+    return () => {
+      window.removeEventListener('keyup', onKeyPress);
+    };
+  }, [isOpen, onClose]);
+
+  if (!isTransitioning && removeWhenClosed && !isOpen) {
+    return null;
+  }
+
+  const onBackdropClick = (e: SyntheticEvent<HTMLElement>) => {
+    if (tapOutsideToClose && onClose) {
+      onClose(e);
+    }
+  };
+
+  return createPortal(
+    <FloatingFocusManager context={context} initialFocus={initialFocus}>
+      <div
+        ref={floating}
+        aria-hidden={isOpen ? 'false' : 'true'}
+        className={classify(
+          css.modalContainer,
+          {
+            [css.in]: isTransitioning,
+            [css.open]: isOpen,
+          },
+          classNames?.container,
+        )}
+      >
+        <div
+          className={classify(
+            css.backdrop,
+            {
+              [css.darkBackdrop]: showBackdrop,
+            },
+            classNames?.backdrop,
+          )}
+          onClick={onBackdropClick}
+        />
+        <div className={classify(css.modal, classNames?.content)} role="dialog">
+          {children}
+        </div>
+      </div>
+    </FloatingFocusManager>,
+    portalRootRef.current,
+  );
+};

package/lib/components/Modal/Modal.module.css

@@ -0,0 +1,62 @@
+@value (colorBackgroundTertiary, colorBackdropFill) from '../../styles/variables/_color.css';
+@value (spaceNone, spaceXXSmall, spaceHalfFluid, spaceNegHalfFluid) from '../../styles/variables/_space.css';
+@value (sizeFluid) from '../../styles/variables/_size.css';
+@value (elevationNone, elevationModal, elevationBackdrop) from '../../styles/variables/_elevation.css';
+@value (opacity100, opacity0) from '../../styles/variables/_opacity.css';
+@value (motionDurationNormal, motionEaseInEaseOut) from '../../styles/variables/_motion.css';
+
+.modalContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.modal {
+  position: fixed;
+  top: spaceHalfFluid;
+  transform: translateY(spaceNegHalfFluid) scale(0.95);
+  opacity: opacity0;
+  composes: boxShadow4 from '../../styles/shadow.module.css';
+  display: flex;
+  max-height: sizeFluid;
+  flex-flow: column;
+  background: colorBackgroundTertiary;
+  overflow: auto;
+  z-index: elevationModal;
+  transition: opacity motionDurationNormal, transform motionDurationNormal;
+}
+
+.modalContainer.open.in .modal {
+  opacity: opacity100;
+  transform: translateY(spaceNegHalfFluid) scale(1);
+}
+
+.backdrop {
+  display: flex;
+  flex-flow: column;
+  visibility: hidden;
+  opacity: opacity0;
+  background-color: transparent;
+  backdrop-filter: blur(spaceNone);
+  width: sizeFluid;
+  height: sizeFluid;
+  top: spaceNone;
+  left: spaceNone;
+  position: fixed;
+  pointer-events: none;
+  z-index: elevationNone;
+  transition: visibility motionDurationNormal,
+    backdrop-filter motionDurationNormal;
+}
+
+.modalContainer.open.in .backdrop {
+  visibility: visible;
+  opacity: opacity100;
+  pointer-events: auto;
+  z-index: elevationBackdrop;
+}
+
+.modalContainer.open.in .darkBackdrop {
+  backdrop-filter: blur(spaceXXSmall);
+  background-color: colorBackdropFill;
+}

package/lib/components/Modal/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Modal", {
+  enumerable: true,
+  get: function () {
+    return _Modal.Modal;
+  }
+});
+var _Modal = require("./Modal.js");

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

@@ -0,0 +1,3 @@
+//@flow strict
+export type {ModalProps} from './Modal.js';
+export {Modal} from './Modal.js';

package/lib/components/Notification/Notification.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Notification = exports.NOTIFICATION_SEMANTIC = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _typography = require("../../types/typography");
+var _classify = require("../../utils/classify");
+var _Icon = require("../Icon");
+var _Text = require("../Text");
+var _NotificationModule = _interopRequireDefault(require("./Notification.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; }
+
+const NOTIFICATION_SEMANTIC = Object.freeze({
+  success: 'success',
+  information: 'information',
+  danger: 'danger'
+});
+exports.NOTIFICATION_SEMANTIC = NOTIFICATION_SEMANTIC;
+// Base Notification will not have any state.
+
+const BaseNotification = props => {
+  const {
+    classNames,
+    semantic = NOTIFICATION_SEMANTIC.success,
+    iconLeftName,
+    iconLeftType = 'regular',
+    dismissable,
+    children,
+    onCloseClick
+  } = props;
+  return /*#__PURE__*/(0, _jsxRuntime.jss)("div", {
+    className: (0, _classify.classify)(_NotificationModule.default.baseContainer, {
+      [_NotificationModule.default.success]: semantic === NOTIFICATION_SEMANTIC.success,
+      [_NotificationModule.default.information]: semantic === NOTIFICATION_SEMANTIC.information,
+      [_NotificationModule.default.danger]: semantic === NOTIFICATION_SEMANTIC.danger
+    }, classNames?.wrapper),
+    children: [iconLeftName ? /*#__PURE__*/(0, _jsxRuntime.js)(_Icon.Icon, {
+      name: iconLeftName,
+      color: _typography.TEXT_COLORS.inversePrimary,
+      size: "small",
+      type: iconLeftType
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.js)(_Text.SubTitleSmall, {
+      className: (0, _classify.classify)(classNames?.text),
+      color: _typography.TEXT_COLORS.inversePrimary,
+      children: children
+    }), dismissable && /*#__PURE__*/(0, _jsxRuntime.js)(_Icon.Icon, {
+      color: _typography.TEXT_COLORS.inversePrimary,
+      name: "close",
+      size: "small",
+      type: "regular",
+      onClick: onCloseClick,
+      className: _NotificationModule.default.closeIcon
+    })]
+  });
+};
+const Notification = props => {
+  const {
+    classNames,
+    semantic = NOTIFICATION_SEMANTIC.success,
+    iconLeftName,
+    iconLeftType,
+    dismissable,
+    children,
+    selfDismiss = false,
+    onCloseClick
+  } = props;
+  const [dismissed, setDismissed] = React.useState(false);
+  const closeClickHandler = e => {
+    onCloseClick && onCloseClick(e);
+    selfDismiss && setDismissed(true);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.js)(_jsxRuntime.Fragment, {
+    children: !dismissed && /*#__PURE__*/(0, _jsxRuntime.js)(BaseNotification, {
+      classNames: classNames,
+      iconLeftName: iconLeftName,
+      iconLeftType: iconLeftType,
+      semantic: semantic,
+      dismissable: dismissable,
+      onCloseClick: closeClickHandler,
+      children: children
+    })
+  });
+};
+exports.Notification = Notification;

package/lib/components/Notification/Notification.js.flow

@@ -0,0 +1,136 @@
+// @flow strict
+
+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 = $Values<typeof NOTIFICATION_SEMANTIC>;
+
+type BaseNotificationProps = {
+  classNames?: ClassNames,
+  semantic: NotificationSemanticType,
+  iconLeftName?: string,
+  iconLeftType?: IconType,
+  dismissable?: boolean,
+  children?: string,
+  onCloseClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+};
+
+// Base Notification will not have any state.
+
+const BaseNotification = (props: BaseNotificationProps): React.Node => {
+  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,
+        },
+        classNames?.wrapper,
+      )}
+    >
+      {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>
+  );
+};
+
+type NotificationBaseProps = {
+  ...BaseNotificationProps,
+  classNames?: ClassNames,
+  ...
+    | {
+        dismissable: true,
+        onCloseClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+        selfDismiss?: boolean,
+      }
+    | {dismissable?: false},
+};
+
+export type NotificationProps = {
+  ...NotificationBaseProps,
+  semantic: NotificationSemanticType,
+};
+
+export const Notification = (props: NotificationProps): React.Node => {
+  const {
+    classNames,
+    semantic = NOTIFICATION_SEMANTIC.success,
+    iconLeftName,
+    iconLeftType,
+    dismissable,
+    children,
+    selfDismiss = false,
+    onCloseClick,
+  } = props;
+  const [dismissed, setDismissed] = React.useState(false);
+  const closeClickHandler = (e) => {
+    onCloseClick && onCloseClick(e);
+    selfDismiss && setDismissed(true);
+  };
+
+  return (
+    <>
+      {!dismissed && (
+        <BaseNotification
+          classNames={classNames}
+          iconLeftName={iconLeftName}
+          iconLeftType={iconLeftType}
+          semantic={semantic}
+          dismissable={dismissable}
+          onCloseClick={closeClickHandler}
+        >
+          {children}
+        </BaseNotification>
+      )}
+    </>
+  );
+};

package/lib/components/Notification/Notification.module.css

@@ -0,0 +1,54 @@
+@value (borderRadiusXSmall) from '../../styles/variables/_border.css';
+@value (colorFillPrimary,
+  colorTextPrimary,
+  colorSuccess,
+  colorInformation,
+  colorDanger
+) from '../../styles/variables/_color.css';
+
+@value (
+  spaceXSmall,
+  spaceSmall,
+  spaceLarge
+) from '../../styles/variables/_space.css';
+
+@value (
+  size34,
+  sizeFluid
+) from '../../styles/variables/_size.css';
+
+.baseContainer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: spaceXSmall;
+  width: sizeFluid;
+  min-height: size34;
+  position: relative;
+  padding: spaceXSmall spaceLarge spaceXSmall spaceSmall;
+  word-break: normal;
+  overflow-wrap: anywhere;
+}
+
+.content {
+  display: flex;
+}
+
+.success {
+  background-color: colorSuccess;
+}
+
+.information {
+  background-color: colorInformation;
+}
+
+.danger {
+  background-color: colorDanger;
+}
+
+.closeIcon {
+  cursor: pointer;
+  position: absolute;
+  right: spaceSmall;
+}

package/lib/components/Notification/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "NOTIFICATION_SEMANTIC", {
+  enumerable: true,
+  get: function () {
+    return _Notification.NOTIFICATION_SEMANTIC;
+  }
+});
+Object.defineProperty(exports, "Notification", {
+  enumerable: true,
+  get: function () {
+    return _Notification.Notification;
+  }
+});
+var _Notification = require("./Notification");

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

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