@true-engineering/true-react-common-ui-kit 1.0.1

package/src/components/Modal/Modal.styles.ts

@@ -0,0 +1,308 @@
+import { colors, dimensions } from '../../theme';
+import { rgba } from '../../helpers';
+import { ComponentStyles } from '../../types';
+
+const VERTICAL_OVERLAY_PADDING = 50;
+
+const MODAL_HORIZONTAL_PADDING_L = 40;
+const MODAL_HORIZONTAL_PADDING_M = 36;
+const MODAL_HORIZONTAL_PADDING_S = 26;
+
+export const styles = {
+  root: {},
+
+  fixedPosition: {
+    position: 'fixed',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    zIndex: 999,
+    overflowX: 'hidden',
+    '-webkit-overflow-scrolling': 'touch',
+
+    '& $innerOverlay': {
+      display: 'flex',
+      width: '100%',
+      minHeight: '100%',
+      boxSizing: 'border-box',
+    },
+  },
+
+  innerOverlay: {},
+
+  sideBar: {
+    '& $modal': {
+      borderRadius: 0,
+      margin: 0,
+      minHeight: '100%',
+    },
+  },
+
+  'position-static': {},
+
+  'position-left': {},
+
+  'position-right': {
+    justifyContent: 'flex-end',
+  },
+
+  'position-center': {
+    padding: [VERTICAL_OVERLAY_PADDING, 30],
+  },
+
+  overlay: {
+    backgroundColor: rgba(colors.BORDER_MAIN, 0.5),
+  },
+
+  modal: {
+    backgroundColor: colors.CLASSIC_WHITE,
+    borderRadius: dimensions.BORDER_RADIUS_LARGE,
+    boxShadow: `0 8px 32px -8px ${rgba(
+      colors.FONT_MAIN,
+      0.24,
+    )}, 0 -2px 6px 0 ${rgba(colors.FONT_MAIN, 0.04)}, 0 0 1px 0 ${rgba(
+      colors.FONT_MAIN,
+      0.15,
+    )}`,
+    margin: 'auto',
+    position: 'relative',
+    // do not override this
+    maxWidth: '100%',
+  },
+
+  title: {
+    fontSize: 28,
+    lineHeight: 1.3,
+    marginTop: 0,
+  },
+
+  titleWithCloseButton: {
+    paddingRight: 32,
+  },
+
+  close: {
+    position: 'absolute',
+  },
+
+  content: {},
+
+  footer: {
+    display: 'flex',
+    gap: 12,
+  },
+
+  stickyFooterWrapper: {
+    position: 'sticky',
+    bottom: 0,
+    marginTop: 'auto',
+    zIndex: 1,
+  },
+
+  stickyFooter: {
+    borderTop: [1, 'solid', colors.BORDER_LIGHT],
+    padding: [16, 40],
+    borderBottomLeftRadius: dimensions.BORDER_RADIUS_LARGE,
+    borderBottomRightRadius: dimensions.BORDER_RADIUS_LARGE,
+    backgroundColor: colors.CLASSIC_WHITE,
+  },
+
+  'buttons-left': {
+    justifyContent: 'flex-start',
+  },
+
+  'buttons-center': {
+    justifyContent: 'center',
+  },
+
+  'buttons-right': {
+    justifyContent: 'flex-end',
+  },
+
+  withoutFooter: {},
+
+  withStickyFooter: {
+    display: 'flex',
+    flexDirection: 'column',
+
+    '& $content': {
+      position: 'relative',
+      zIndex: 1,
+    },
+  },
+
+  footerWrapper: {},
+
+  l: {
+    '& $modal': {
+      padding: [36, MODAL_HORIZONTAL_PADDING_L],
+      fontSize: 16,
+      width: 560,
+
+      '&$withStickyFooter': {
+        paddingBottom: 0,
+      },
+    },
+
+    '& $withoutFooter': {
+      paddingBottom: 54,
+    },
+
+    '& $title': {
+      fontSize: 28,
+      marginBottom: 32,
+    },
+
+    '& $close': {
+      right: 27,
+      top: 22,
+    },
+
+    '& $footerWrapper': {
+      paddingTop: 40,
+    },
+
+    '& $stickyFooter': {
+      paddingLeft: MODAL_HORIZONTAL_PADDING_L,
+      paddingRight: MODAL_HORIZONTAL_PADDING_L,
+      marginLeft: -MODAL_HORIZONTAL_PADDING_L,
+      marginRight: -MODAL_HORIZONTAL_PADDING_L,
+    },
+  },
+
+  m: {
+    '& $modal': {
+      padding: [32, MODAL_HORIZONTAL_PADDING_M],
+      width: 480,
+
+      '&$withStickyFooter': {
+        paddingBottom: 0,
+      },
+    },
+
+    '& $withoutFooter': {
+      paddingBottom: 48,
+    },
+
+    '& $title': {
+      fontSize: 24,
+      marginBottom: 28,
+    },
+
+    '& $close': {
+      right: 23,
+      top: 18,
+    },
+
+    '& $footerWrapper': {
+      paddingTop: 36,
+    },
+
+    '& $stickyFooter': {
+      paddingLeft: MODAL_HORIZONTAL_PADDING_M,
+      paddingRight: MODAL_HORIZONTAL_PADDING_M,
+      marginLeft: -MODAL_HORIZONTAL_PADDING_M,
+      marginRight: -MODAL_HORIZONTAL_PADDING_M,
+    },
+  },
+
+  s: {
+    '& $modal': {
+      padding: [24, MODAL_HORIZONTAL_PADDING_S],
+      fontSize: 14,
+      width: 360,
+
+      '&$withStickyFooter': {
+        paddingBottom: 0,
+      },
+    },
+
+    '& $withoutFooter': {
+      paddingBottom: 40,
+    },
+
+    '& $title': {
+      fontSize: 20,
+      marginBottom: 15,
+    },
+
+    '& $close': {
+      right: 14,
+      top: 11,
+    },
+
+    '& $footerWrapper': {
+      paddingTop: 28,
+    },
+
+    '& $stickyFooter': {
+      paddingLeft: MODAL_HORIZONTAL_PADDING_S,
+      paddingRight: MODAL_HORIZONTAL_PADDING_S,
+      marginLeft: -MODAL_HORIZONTAL_PADDING_S,
+      marginRight: -MODAL_HORIZONTAL_PADDING_S,
+    },
+  },
+
+  modalWrapper: {
+    display: 'flex',
+    width: '100%',
+  },
+
+  // TODO: вынести анимацию ?
+  /* ----------- SHOW / HIDE ANIMATION ----------- */
+  animationEnd: {
+    '& $modal': {
+      opacity: 0,
+    },
+
+    '& $position-center $modal': {
+      transform: 'translateY(35px)',
+    },
+
+    '& $position-right $modal': {
+      transform: 'translateX(35px)',
+    },
+
+    '& $position-left $modal': {
+      transform: 'translateX(-35px)',
+    },
+
+    '& $overlay': {
+      opacity: 0,
+    },
+  },
+
+  animationStart: {
+    '& $modal': {
+      opacity: 1,
+      transition: '0.15s ease',
+      transitionProperty: 'transform, opacity',
+    },
+
+    '& $position-center $modal': {
+      transform: 'translateY(0)',
+    },
+
+    '& $position-right $modal': {
+      transform: 'translateX(0)',
+    },
+
+    '& $position-left $modal': {
+      transform: 'translateX(0)',
+    },
+
+    '& $overlay': {
+      opacity: 1,
+      transition: 'opacity 0.2s ease',
+    },
+  },
+
+  'modal-enter': { extend: 'animationEnd' },
+  'modal-enter-active': { extend: 'animationStart' },
+  'modal-exit': { extend: 'animationStart' },
+  'modal-exit-active': { extend: 'animationEnd' },
+
+  tweakCloseButton: {},
+};
+
+export type ModalStyles = ComponentStyles<typeof styles>;

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,210 @@
+import {
+  FC,
+  ReactNode,
+  MouseEvent,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { CSSTransition } from 'react-transition-group';
+import { RemoveScroll } from 'react-remove-scroll';
+import clsx from 'clsx';
+import { useTheme, useTweakStyles } from '../../hooks';
+import { ICommonProps } from '../../types';
+import {
+  isNotEmpty,
+  getTestId,
+  addDataAttributes,
+  addDataTestId,
+} from '../../helpers';
+import { CloseButton } from '../CloseButton';
+
+import { ModalStyles, styles } from './Modal.styles';
+
+export type IModalPosition = 'center' | 'left' | 'right' | 'static';
+
+export interface IModalProps extends ICommonProps {
+  tweakStyles?: ModalStyles;
+  title?: string;
+  size?: 'l' | 'm' | 's';
+  isFooterSticky?: boolean;
+  buttons?: ReactNode[];
+  buttonsAlign?: 'left' | 'center' | 'right';
+  children?: ReactNode | ReactNode[];
+  position?: IModalPosition;
+  hasCloseButton?: boolean;
+  hasOverlay?: boolean;
+  shouldCloseOnOverlayClick?: boolean;
+  shouldCloseOnEsc?: boolean;
+  shouldBlockScroll?: boolean;
+  isOpen?: boolean;
+  zIndex?: number;
+  testId?: string;
+  onEnter?(): void;
+  onClose?(): void;
+  onCompletelyHidden?(): void;
+}
+
+export const Modal: FC<IModalProps> = ({
+  data,
+  tweakStyles,
+  title,
+  size = 'l',
+  isFooterSticky,
+  buttons,
+  buttonsAlign = 'right',
+  hasCloseButton = true,
+  hasOverlay = true,
+  isOpen = false,
+  position = 'center',
+  children,
+  zIndex,
+  testId,
+  shouldCloseOnOverlayClick = true,
+  shouldCloseOnEsc = true,
+  shouldBlockScroll = true,
+  onClose,
+  onCompletelyHidden,
+  onEnter,
+}) => {
+  const { classes, componentStyles } = useTheme('Modal', styles, tweakStyles);
+
+  const tweakCloseButtonStyles = useTweakStyles(
+    componentStyles,
+    tweakStyles,
+    'tweakCloseButton',
+  );
+
+  const [isClickOnOverlay, setIsClickOnOverlay] = useState(false);
+
+  const hasFooter = buttons !== undefined && buttons.length > 0;
+  const overlay = useRef<HTMLDivElement>(null);
+
+  // Клик на оверлее обрабатываем через связку onMouseDown и onMouseUp, т.к. клик
+  // создает ложные срабатывания (баг при старте клика на модалке и отпусканием мышки уже на оверлее)
+  const handleOutsideMouseDown = (event: MouseEvent) => {
+    if (onClose !== undefined && event.target === overlay.current) {
+      setIsClickOnOverlay(true);
+    }
+  };
+
+  const handleOutsideMouseUp = (event: MouseEvent) => {
+    if (onClose === undefined) {
+      return;
+    }
+    if (event.target === overlay.current && isClickOnOverlay) {
+      onClose();
+    }
+    setIsClickOnOverlay(false);
+  };
+
+  const handleEscClose = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.code === 'Escape' && onClose !== undefined) {
+        onClose();
+      }
+    },
+    [onClose],
+  );
+
+  useEffect(() => {
+    if (!shouldCloseOnEsc || onClose === undefined || !isOpen) {
+      return () => null;
+    }
+
+    document.addEventListener('keydown', handleEscClose);
+    return () => document.removeEventListener('keydown', handleEscClose);
+  }, [shouldCloseOnEsc, onClose, isOpen, handleEscClose]);
+
+  return (
+    <CSSTransition
+      in={isOpen}
+      timeout={150}
+      unmountOnExit
+      classNames={{
+        enter: classes['modal-enter'],
+        enterActive: classes['modal-enter-active'],
+        exit: classes['modal-exit'],
+        exitActive: classes['modal-exit-active'],
+      }}
+      onEnter={onEnter}
+      onExited={onCompletelyHidden}
+    >
+      <div className={classes.modalWrapper}>
+        <RemoveScroll enabled={shouldBlockScroll} forwardProps>
+          <div
+            className={clsx(classes.root, classes[size], {
+              [classes.overlay]: position !== 'static' && hasOverlay,
+              [classes.sideBar]: position === 'left' || position === 'right',
+              [classes.fixedPosition]: position !== 'static',
+            })}
+            style={{ zIndex }}
+            {...addDataTestId(testId)}
+            {...addDataAttributes(data)}
+          >
+            <div
+              ref={overlay}
+              className={clsx(
+                classes.innerOverlay,
+                classes[`position-${position}`],
+              )}
+              onMouseDown={
+                shouldCloseOnOverlayClick ? handleOutsideMouseDown : undefined
+              }
+              onMouseUp={
+                shouldCloseOnOverlayClick ? handleOutsideMouseUp : undefined
+              }
+            >
+              <div
+                className={clsx(classes.modal, {
+                  [classes.withoutFooter]: !hasFooter,
+                  [classes.withStickyFooter]: isFooterSticky,
+                })}
+              >
+                {hasCloseButton && (
+                  <div className={classes.close}>
+                    <CloseButton
+                      testId={getTestId(testId, 'close-button')}
+                      tweakStyles={tweakCloseButtonStyles}
+                      onClose={onClose}
+                    />
+                  </div>
+                )}
+                {isNotEmpty(title) && (
+                  <h3
+                    className={clsx(classes.title, {
+                      [classes.titleWithCloseButton]: hasCloseButton,
+                    })}
+                  >
+                    {title}
+                  </h3>
+                )}
+                {isNotEmpty(children) && (
+                  <div className={classes.content}>{children}</div>
+                )}
+                {hasFooter && (
+                  <div
+                    className={clsx(classes.footerWrapper, {
+                      [classes.stickyFooterWrapper]: isFooterSticky,
+                    })}
+                  >
+                    <div
+                      className={clsx(
+                        classes.footer,
+                        classes[`buttons-${buttonsAlign}`],
+                        { [classes.stickyFooter]: isFooterSticky },
+                      )}
+                    >
+                      {buttons.map((button) => button)}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </RemoveScroll>
+      </div>
+    </CSSTransition>
+  );
+};

package/src/components/Modal/index.ts

@@ -0,0 +1,2 @@
+export * from './Modal';
+export type { ModalStyles } from './Modal.styles';

package/src/components/MoreMenu/MoreMenu.stories.tsx

@@ -0,0 +1,46 @@
+import { ComponentStory } from '@storybook/react';
+import { colors } from '../../theme';
+import { MoreMenu } from './MoreMenu';
+
+const menuItems = [
+  { item: 'Печатать билет', onClick: console.log },
+  { item: 'Выписать', onClick: console.log },
+  { item: 'Аннулировать', onClick: console.log, shouldDrawSpacerBelow: true },
+  {
+    item: (() => <div style={{ color: colors.RED_ACTIVE }}>Удалить</div>)(),
+    onClick: console.log,
+  },
+  {
+    item: (() => <div style={{ color: colors.RED_ACTIVE }}>Удалить</div>)(),
+    onClick: console.log,
+  },
+];
+
+export default {
+  title: 'MoreMenu',
+  component: MoreMenu,
+};
+
+const Template: ComponentStory<typeof MoreMenu> = (args) => (
+  <div
+    style={{
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: 600,
+      height: 400,
+    }}
+  >
+    <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
+      <div style={{ flexShrink: 0 }}>Test subject</div>
+      <MoreMenu {...args} items={menuItems} />
+    </div>
+  </div>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  isDisabled: false,
+  hasDefaultStateBackground: true,
+};

package/src/components/MoreMenu/MoreMenu.styles.ts

@@ -0,0 +1,68 @@
+import { colors } from '../../theme';
+import { rgba } from '../../helpers';
+import { ComponentStyles } from '../../types';
+
+export const styles = {
+  root: {
+    position: 'relative',
+  },
+
+  hasCircle: {},
+
+  button: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 32,
+    height: 32,
+    backgroundColor: 'transparent',
+    color: colors.FONT_MEDIUM,
+    padding: 0,
+    borderRadius: '50%',
+    border: 'none',
+    cursor: 'pointer',
+    transition: 'background-color 0.25s ease-in-out',
+
+    '&$hasCircle': {
+      backgroundColor: rgba(colors.GREY_HOVER, 0.5),
+    },
+
+    '&:hover': {
+      backgroundColor: rgba(colors.BORDER_MAIN, 0.5),
+    },
+
+    '&:focus': {
+      backgroundColor: rgba(colors.FONT_DISABLED, 0.2),
+    },
+
+    '&:active, &$active': {
+      backgroundColor: rgba(colors.FONT_DISABLED, 0.5),
+    },
+
+    '&$disabled': {
+      backgroundColor: rgba(colors.GREY_FOCUS, 0.5),
+      color: colors.BORDER_MAIN,
+    },
+  },
+
+  icon: {
+    width: 30,
+    height: 30,
+  },
+
+  active: {},
+
+  disabled: {
+    cursor: 'default',
+  },
+
+  menu: {
+    position: 'absolute',
+    zIndex: 5,
+    top: '100%',
+    right: 0,
+    marginTop: 6,
+  },
+};
+
+export type MoreMenuStyles = ComponentStyles<typeof styles>;