@corva/ui 0.38.0-5 → 0.38.0-6

package/src/components/ColorPicker/PaletteChromePicker/PaletteChromePicker.js

@@ -0,0 +1,167 @@
+import { useState, useLayoutEffect, forwardRef } from 'react';
+import { ChromePicker } from 'react-color';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import { makeStyles, IconButton, Tooltip } from '@material-ui/core';
+import PaletteIcon from '@material-ui/icons/Palette';
+import ColorizeIcon from '@material-ui/icons/Colorize';
+
+import Palette from './Palette';
+
+const COLOR_PICK_MODE = {
+  PALETTE: 'PALETTE',
+  CHROME_PICKER: 'CHROME_PICKER',
+};
+
+const chromePickerStyles = {
+  default: {
+    picker: {
+      width: '100%',
+      boxShadow: 'none',
+    },
+    body: {
+      backgroundColor: '#3b3b3b',
+      padding: '16px 16px 0',
+    },
+    color: {
+      width: '32px',
+      height: '32px',
+      marginRight: '16px',
+      borderRadius: '2px',
+    },
+    swatch: {
+      marginTop: 0,
+      width: '100%',
+      height: '100%',
+      borderRadius: 0,
+      position: 'relative',
+      overflow: 'hidden',
+    },
+    toggles: {
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'space-between',
+    },
+    Alpha: {
+      checkboard: {
+        display: 'none',
+      },
+      gradient: {
+        borderRadius: '5px',
+      },
+    },
+  },
+};
+
+const useStyles = makeStyles({
+  container: {
+    backgroundColor: '#3b3b3b',
+    boxShadow: '0px 3px 10px rgba(0, 0, 0, 0.4)',
+    width: '250px',
+    paddingBottom: '8px',
+    borderRadius: '4px',
+
+    '& input': {
+      border: '1px solid #616161 !important',
+      backgroundColor: '#3b3b3b',
+      color: '#fff !important',
+      boxShadow: 'none !important',
+      outline: 'none',
+    },
+
+    '& svg:not(.MuiSvgIcon-root)': {
+      fill: '#bdbdbd !important',
+    },
+  },
+  chomePickerPalette: {
+    margin: '0 8px',
+    paddingTop: '8px',
+  },
+  buttonsContainer: {
+    display: 'flex',
+    justifyContent: 'center',
+    marginTop: '8px',
+  },
+  iconButton: {
+    padding: '8px',
+    '&:hover': {
+      backgroundColor: '#333333',
+    },
+    '&:hover $icon': {
+      color: '#fff',
+    },
+  },
+  icon: { color: '#bdbdbd', fontSize: '24px' },
+  iconActive: { color: '#fff' },
+  tooltip: {
+    background: '#414141',
+    color: '#fff',
+    boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.12)',
+    borderRadius: '4px',
+    opacity: 1,
+    fontSize: '11px',
+  },
+});
+
+const PaletteChromePicker = forwardRef(
+  ({ color, onChange, onSizeChange, enableTransparencyPalette }, ref) => {
+    const classes = useStyles();
+    const [pickMode, setPickMode] = useState(COLOR_PICK_MODE.PALETTE);
+
+    useLayoutEffect(onSizeChange, [pickMode]);
+
+    return (
+      <div className={classes.container} ref={ref}>
+        {pickMode === COLOR_PICK_MODE.PALETTE && (
+          <Palette
+            className={classes.chomePickerPalette}
+            color={color}
+            onChange={onChange}
+            enableTransparencyPalette={enableTransparencyPalette}
+          />
+        )}
+        {pickMode === COLOR_PICK_MODE.CHROME_PICKER && (
+          <ChromePicker styles={chromePickerStyles} color={color} onChange={onChange} />
+        )}
+        <div className={classes.buttonsContainer}>
+          <Tooltip title="Palette" classes={{ tooltip: classes.tooltip }}>
+            <IconButton
+              className={classes.iconButton}
+              onClick={() => setPickMode(COLOR_PICK_MODE.PALETTE)}
+            >
+              <PaletteIcon
+                className={classNames(classes.icon, {
+                  [classes.iconActive]: pickMode === COLOR_PICK_MODE.PALETTE,
+                })}
+                fontSize="small"
+              />
+            </IconButton>
+          </Tooltip>
+          <Tooltip title="Pick your own" classes={{ tooltip: classes.tooltip }}>
+            <IconButton
+              className={classes.iconButton}
+              onClick={() => setPickMode(COLOR_PICK_MODE.CHROME_PICKER)}
+            >
+              <ColorizeIcon
+                className={classNames(classes.icon, {
+                  [classes.iconActive]: pickMode === COLOR_PICK_MODE.CHROME_PICKER,
+                })}
+                fontSize="small"
+              />
+            </IconButton>
+          </Tooltip>
+        </div>
+      </div>
+    );
+  }
+);
+
+PaletteChromePicker.propTypes = {
+  color: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  onSizeChange: PropTypes.func.isRequired,
+  enableTransparencyPalette: PropTypes.bool.isRequired,
+};
+
+export default PaletteChromePicker;

package/src/components/ColorPicker/PaletteChromePicker/index.js

@@ -0,0 +1 @@
+export { default } from './PaletteChromePicker';

package/src/components/ColorPicker/index.js

@@ -0,0 +1 @@
+export { default } from './ColorPicker';

package/src/components/Comment/CommentIcon/BadgeIcon.js

@@ -0,0 +1,19 @@
+import { memo } from 'react';
+
+function BadgeIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M13.0997 14.0765L13.1233 14.0918L13.1484 14.1043C13.1626 14.1114 13.1765 14.1192 13.1989 14.1321C13.2006 14.1331 13.2025 14.1342 13.2045 14.1354C13.224 14.1467 13.257 14.1657 13.2912 14.1829C13.3832 14.2288 13.503 14.2714 13.6577 14.2714C13.6609 14.2714 13.6644 14.2714 13.668 14.2714C13.7169 14.2715 13.7976 14.2716 13.8828 14.2574C13.9865 14.2401 14.0774 14.2063 14.167 14.1614L14.1949 14.1475L14.2208 14.1303C14.5074 13.9391 14.7291 13.6225 14.7291 13.1999V4.91423C14.7291 3.15237 13.3053 1.72852 11.5434 1.72852H4.40056C2.6387 1.72852 1.21484 3.15237 1.21484 4.91423V8.85709C1.21484 10.6189 2.6387 12.0428 4.40056 12.0428H9.96679L13.0997 14.0765Z"
+        fill="#03BCD4"
+        stroke="#212121"
+      />
+      <path
+        d="M10.4 7.6H8.6V9.4C8.6 9.73 8.33 10 8 10C7.67 10 7.4 9.73 7.4 9.4V7.6H5.6C5.27 7.6 5 7.33 5 7C5 6.67 5.27 6.4 5.6 6.4H7.4V4.6C7.4 4.27 7.67 4 8 4C8.33 4 8.6 4.27 8.6 4.6V6.4H10.4C10.73 6.4 11 6.67 11 7C11 7.33 10.73 7.6 10.4 7.6Z"
+        fill="#212121"
+      />
+    </svg>
+  );
+}
+
+export default memo(BadgeIcon);

package/src/components/Comment/CommentIcon/CommentIcon.stories.js

@@ -0,0 +1,26 @@
+/* eslint-disable react/prop-types */
+import { Grid } from '@material-ui/core';
+// In case you update the component src path,
+// please also update the GitHub source link at the bottom
+import CommentIcon from '~/components/Comment/CommentIcon';
+
+import starImage from '~/../storybook/assets/star.png';
+
+export const Defult = props => (
+  <Grid container>
+    <Grid item>
+      <CommentIcon displayName="Twenty Four" imgSrc={starImage} {...props} />
+    </Grid>
+  </Grid>
+);
+
+Defult.storyName = 'CommentIcon';
+
+export default {
+  title: 'Components/CommentIcon',
+  component: CommentIcon,
+  parameters: {
+    sourceLink:
+      'https://github.dev/corva-ai/corva-ui/blob/develop/src/components/Comment/CommentIcon/index.js',
+  },
+};

package/src/components/Comment/CommentIcon/index.js

@@ -0,0 +1,60 @@
+import PropTypes from 'prop-types';
+
+import { Badge, IconButton, Tooltip, makeStyles } from '@material-ui/core';
+
+import Avatar from '../../Avatar';
+
+import BadgeIcon from './BadgeIcon';
+
+const useStyles = makeStyles(theme => ({
+  icon: {
+    padding: 0,
+    '&:hover': {
+      '& .MuiBadge-root .MuiBadge-badge svg path': {
+        '&:first-of-type': { fill: theme.palette.primary.light },
+      },
+      '& .MuiAvatar-root': {
+        outline: `1px solid ${theme.palette.primary.light}`,
+      },
+    },
+    marginTop: 4,
+  },
+  badge: {
+    top: 2,
+    right: 6,
+    '&:hover': {
+      '& svg path': { '&:first-of-type': { fill: theme.palette.primary.light } },
+    },
+  },
+  tooltip: {
+    marginTop: 8,
+  },
+}));
+
+const CommentIcon = ({ displayName, imgSrc, size }) => {
+  const classes = useStyles();
+
+  return (
+    <Tooltip title="Comment" placement="bottom" classes={{ tooltip: classes.tooltip }}>
+      <IconButton classes={{ root: classes.icon }}>
+        <Badge classes={{ badge: classes.badge }} badgeContent={<BadgeIcon />}>
+          <Avatar displayName={displayName} size={size} imgSrc={imgSrc} />
+        </Badge>
+      </IconButton>
+    </Tooltip>
+  );
+};
+
+CommentIcon.propTypes = {
+  displayName: PropTypes.string,
+  imgSrc: PropTypes.string,
+  size: PropTypes.number,
+};
+
+CommentIcon.defaultProps = {
+  displayName: false,
+  imgSrc: undefined,
+  size: 24,
+};
+
+export default CommentIcon;

package/src/components/Comment/index.js

@@ -0,0 +1,394 @@
+/* eslint-disable react/prop-types */
+import { createRef, PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import moment from 'moment';
+import { get, noop, includes } from 'lodash';
+import classNames from 'classnames';
+import { withStyles } from '@material-ui/core/styles';
+
+import Typography from '@material-ui/core/Typography';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+import grey from '@material-ui/core/colors/grey';
+
+import CommentWrapper from '~components/CommentWrapper';
+import CommentLoader from '~components/CommentLoader';
+import CommentInput from '~components/CommentInput';
+import Avatar from '~components/Avatar';
+import Attachment from '~components/Attachment';
+import IconButton from '~components/IconButton';
+import ConfirmationDialog from '~components/ConfirmationDialog';
+import UserCardPopover from '~components/UserCardPopover';
+
+import { formatMentionText } from '~components/UserMention/utils';
+
+import { isNativeDetected } from '~/utils/mobileDetect';
+
+import { deleteFeedItemComment } from '../../clients/jsonApi';
+
+import utils from '~utils/main';
+
+import styles from './styles.css';
+
+const PAGE_NAME = 'comment';
+
+const CREATED_AT_FORMAT = 'MM/DD/YY HH:mm';
+const CREATED_AT_FORMAT_NATIVE = 'MM/DD HH:mm';
+
+const style = {
+  chatAvatarWrapper: {
+    paddingTop: 2,
+    position: 'absolute',
+    top: 6,
+    left: 0,
+  },
+  commentInfoContainer: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    width: '100%',
+    paddingTop: 5,
+  },
+  userNameWrapper: { overflow: 'hidden' },
+  infoContainer: {
+    display: 'inline-block',
+    verticalAlign: 'top',
+    width: '100%',
+    paddingLeft: 33,
+  },
+};
+
+const muiStyles = theme => ({
+  commentWrapper: { width: 'calc(100% - 10px)' },
+  timeRoot: {
+    color: grey[700],
+    float: 'right',
+    marginRight: 5,
+    marginLeft: 10,
+    fontSize: '10px',
+  },
+  textRoot: {
+    marginTop: 5,
+    color: '#CCC',
+    fontWeight: 'normal',
+    fontSize: '14px',
+  },
+  iconButtonRoot: {
+    float: 'right',
+    visibility: 'hidden',
+    color: theme.palette.primary.text7,
+  },
+  userName: {
+    fontSize: '12px',
+    fontWeight: 'bold',
+  },
+});
+
+class Comment extends PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      actionsMenuAnchorEl: null,
+      isLoading: false,
+      isEditing: false,
+      openDeleteDialog: false,
+    };
+    this.inputEl = createRef();
+    this.commentEl = createRef();
+  }
+
+  componentDidMount() {
+    if (this.props.showOnMount) {
+      this.showIntoView();
+    }
+  }
+
+  get isCurrentUserCommentCreator() {
+    return Number(get(this.props.comment, ['user', 'id'])) === Number(this.props.currentUser.id);
+  }
+
+  deleteComment = async (feedItemId, commentId) => {
+    let commentResponse;
+
+    try {
+      commentResponse = await deleteFeedItemComment(feedItemId, commentId);
+    } catch (e) {
+      console.error(e);
+    }
+
+    return commentResponse;
+  };
+
+  showIntoView = () => {
+    this.props.handleShowOnMount();
+    this.commentEl.current.scrollIntoView({ block: 'end' });
+  };
+
+  handleToggleActionsMenu = event => {
+    const currentT = event.currentTarget;
+    this.setState(({ actionsMenuAnchorEl }) => ({
+      actionsMenuAnchorEl: actionsMenuAnchorEl ? null : currentT,
+    }));
+  };
+
+  handleKeyDown = event => {
+    if (event.keyCode === 27) {
+      this.setState({
+        isEditing: false,
+      });
+    }
+    document.removeEventListener('keydown', this.handleKeyDown, false);
+  };
+
+  handleEditMenuItem = () => {
+    document.addEventListener('keydown', this.handleKeyDown, false);
+    this.setState(
+      {
+        isEditing: true,
+      },
+      () => {
+        if (this.inputEl.current) this.inputEl.current.focus();
+      }
+    );
+  };
+
+  // TODO: move to one prop, not multiple
+  getEditCommentProps = () => {
+    const { comment } = this.props;
+    const editCommentId = comment.id;
+    const editComment = comment.body;
+    const editAttachment = comment.attachment;
+    const editFeedItemId = comment.feed_activity_id;
+    return {
+      editFeedItemId,
+      editCommentId,
+      editComment,
+      editAttachment,
+    };
+  };
+
+  onEditFinish = () => {
+    this.setState({ isEditing: false, isLoading: false });
+  };
+
+  handleDeleteMenuItem = () => {
+    this.setState({ openDeleteDialog: true });
+  };
+
+  handleDelete = async () => {
+    const { id } = this.props.comment;
+    const feedItemId = this.props.comment.feed_activity_id;
+
+    this.setState({ isLoading: true });
+
+    const response = await this.deleteComment(feedItemId, id);
+
+    this.setState({ isLoading: false, openDeleteDialog: false });
+    if (response) this.props.handleDeleteCallback(id);
+  };
+
+  renderMenuIcon() {
+    const showEdit = this.isCurrentUserCommentCreator;
+
+    const showDelete =
+      this.isCurrentUserCommentCreator || includes(this.props.comment.allowed_actions, 'destroy');
+
+    if (!(showDelete || showEdit)) return null;
+
+    return (
+      <div className={styles.cCommentMenu}>
+        <IconButton
+          data-testid={`${PAGE_NAME}_menuButton`}
+          aria-label="Actions"
+          aria-owns={this.state.actionsMenuAnchorEl ? 'c-comment__actions-menu' : undefined}
+          aria-haspopup="true"
+          className={this.props.classes.iconButtonRoot}
+          size="small"
+          onClick={this.handleToggleActionsMenu}
+        >
+          <MoreVertIcon />
+        </IconButton>
+
+        <Menu
+          id="c-comment__actions-menu"
+          anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+          transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+          anchorEl={this.state.actionsMenuAnchorEl}
+          open={!!this.state.actionsMenuAnchorEl}
+          onClick={this.handleToggleActionsMenu}
+        >
+          {showEdit && (
+            <MenuItem data-testid={`${PAGE_NAME}_editMenuItem`} onClick={this.handleEditMenuItem}>
+              Edit
+            </MenuItem>
+          )}
+
+          {showDelete && (
+            <MenuItem
+              data-testid={`${PAGE_NAME}_deleteMenuItem`}
+              onClick={this.handleDeleteMenuItem}
+            >
+              Delete
+            </MenuItem>
+          )}
+        </Menu>
+      </div>
+    );
+  }
+
+  render() {
+    const { isLoading, isEditing } = this.state;
+
+    if (isLoading) {
+      const { spaceAround } = this.props;
+      return <CommentLoader spaceAround={spaceAround} />;
+    }
+
+    const { comment, classes, spaceAround, isNative, patchCommentCallback, companyId } = this.props;
+
+    if (isEditing) {
+      return (
+        <CommentInput
+          inputRef={this.inputEl}
+          postComment={noop}
+          exitEditMode={this.onEditFinish}
+          setIsEditting={() => this.setState({ isLoading: true })}
+          patchCommentCallback={patchCommentCallback}
+          companyId={companyId}
+          currentUser={this.props.currentUser}
+          {...this.getEditCommentProps()}
+        />
+      );
+    }
+
+    const userFullName = utils.getUserFullName(comment.user);
+
+    const format = isNative ? CREATED_AT_FORMAT_NATIVE : CREATED_AT_FORMAT;
+    const time = moment(comment.created_at).format(format);
+
+    const attachmentUrl = comment?.attachment?.signed_url || comment?.attachment?.url;
+    const attachmentSize = get(comment, ['attachment', 'size']);
+
+    return (
+      <div
+        data-testid={`${PAGE_NAME}_commentItem_${comment.body}`}
+        className={classNames(styles.cComment, { [styles.cCommentNative]: isNative })}
+        ref={this.commentEl}
+      >
+        <CommentWrapper spaceAround={spaceAround} className={this.props.classes.commentWrapper}>
+          <div style={style.chatAvatarWrapper}>
+            {isNative ? (
+              <Avatar
+                size={24}
+                displayName={userFullName}
+                imgSrc={get(comment, ['user', 'profile_photo'])}
+                className={this.props.classes.avatar}
+              />
+            ) : (
+              <UserCardPopover user={comment.user} currentUser={this.props.currentUser}>
+                <Avatar
+                  size={24}
+                  displayName={userFullName}
+                  imgSrc={get(comment, ['user', 'profile_photo'])}
+                  className={this.props.classes.avatar}
+                />
+              </UserCardPopover>
+            )}
+          </div>
+
+          <div style={style.infoContainer}>
+            <div>
+              <div style={style.commentInfoContainer}>
+                <div style={style.userNameWrapper}>
+                  <Typography
+                    data-testid={`${PAGE_NAME}_userName`}
+                    variant="subtitle2"
+                    noWrap
+                    className={classes.userName}
+                  >
+                    {userFullName}
+                  </Typography>
+                </div>
+
+                <div style={style.timeWrapper}>
+                  <Typography
+                    data-testid={`${PAGE_NAME}_addTime`}
+                    variant="caption"
+                    classes={{ root: classes.timeRoot }}
+                  >
+                    {time}
+                  </Typography>
+                </div>
+              </div>
+            </div>
+
+            <div className={styles.cCommentBody}>
+              {this.renderMenuIcon()}
+              <Typography
+                data-testid={`${PAGE_NAME}_commentMessage`}
+                variant="body1"
+                classes={{ root: classes.textRoot }}
+              >
+                {formatMentionText(
+                  comment.body,
+                  comment.mentioned_users,
+                  isNative,
+                  '#00bcd4',
+                  this.props.currentUser
+                )}
+              </Typography>
+
+              {attachmentUrl && (
+                <Attachment
+                  attachmentUrl={attachmentUrl}
+                  attachmentSize={attachmentSize}
+                  size="small"
+                />
+              )}
+            </div>
+          </div>
+        </CommentWrapper>
+
+        {this.state.openDeleteDialog && (
+          <ConfirmationDialog
+            open={this.state.openDeleteDialog}
+            text="Do you really want to delete comment?"
+            handleClose={() => this.setState({ openDeleteDialog: false })}
+            handleOk={this.handleDelete}
+            okText="Delete"
+          />
+        )}
+      </div>
+    );
+  }
+}
+
+Comment.propTypes = {
+  comment: PropTypes.shape({}).isRequired,
+  showOnMount: PropTypes.bool,
+  spaceAround: PropTypes.bool,
+  handleShowOnMount: PropTypes.func,
+  handleEdit: PropTypes.func,
+  handleDeleteCallback: PropTypes.func.isRequired,
+  patchCommentCallback: PropTypes.func.isRequired,
+  companyId: PropTypes.number,
+  currentUser: PropTypes.shape(),
+
+  classes: PropTypes.shape({}).isRequired,
+  isNative: PropTypes.bool,
+};
+
+Comment.defaultProps = {
+  showOnMount: false,
+  spaceAround: false,
+  handleShowOnMount: noop,
+  handleEdit: noop,
+  companyId: null,
+
+  isNative: isNativeDetected,
+
+  currentUser: {},
+};
+
+export default withStyles(muiStyles)(Comment);

package/src/components/Comment/styles.css

@@ -0,0 +1,19 @@
+.cComment {
+  display: flex;
+  align-items: flex-start;
+}
+
+.cCommentBody {
+  position: relative;
+}
+
+.cCommentNative .cCommentMenu button,
+.cComment:hover .cCommentMenu button {
+  visibility: visible;
+}
+
+.cCommentMenu {
+  position: absolute;
+  right: -30px;
+  top: -12px;
+}