Initial commit

client/src/components/User/User.jsx

@@ -0,0 +1,109 @@
+import initials from 'initials';
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import styles from './User.module.css';
+
+const SIZES = {
+  TINY: 'tiny',
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large',
+};
+
+// TODO: move to styles
+const STYLES = {
+  tiny: {
+    fontSize: '10px',
+    fontWeight: '400',
+    height: '20px',
+    padding: '5.5px 0px 4.5px',
+    width: '20px',
+  },
+  small: {
+    fontSize: '12px',
+    fontWeight: '400',
+    height: '24px',
+    lineHeight: '20px',
+    padding: '2px 0px',
+    width: '24px',
+  },
+  medium: {
+    fontSize: '14px',
+    fontWeight: '500',
+    height: '32px',
+    padding: '10px 0',
+    width: '32px',
+  },
+  large: {
+    fontSize: '14px',
+    fontWeight: '500',
+    height: '36px',
+    padding: '12px 0 10px',
+    width: '36px',
+  },
+};
+
+const COLORS = [
+  '#2ecc71', // Emerald
+  '#3498db', // Peter river
+  '#8e44ad', // Wisteria
+  '#e67e22', // Carrot
+  '#e74c3c', // Alizarin
+  '#1abc9c', // Turquoise
+  '#2c3e50', // Midnight blue
+];
+
+const getColor = (name) => {
+  let sum = 0;
+  for (let i = 0; i < name.length; i += 1) {
+    sum += name.charCodeAt(i);
+  }
+
+  return COLORS[sum % COLORS.length];
+};
+
+const User = React.memo(({
+  name, avatar, size, isDisabled, onClick,
+}) => {
+  const style = {
+    ...STYLES[size],
+    background: avatar ? `url("${avatar}")` : getColor(name),
+  };
+
+  const contentNode = (
+    <span
+      title={name}
+      className={classNames(styles.wrapper, onClick && styles.hoverable)}
+      style={style}
+    >
+      {!avatar && <span className={styles.initials}>{initials(name)}</span>}
+    </span>
+  );
+
+  return onClick ? (
+    <button type="button" disabled={isDisabled} className={styles.button} onClick={onClick}>
+      {contentNode}
+    </button>
+  ) : (
+    contentNode
+  );
+});
+
+User.propTypes = {
+  name: PropTypes.string.isRequired,
+  avatar: PropTypes.string,
+  size: PropTypes.oneOf(Object.values(SIZES)),
+  isDisabled: PropTypes.bool,
+  onClick: PropTypes.func,
+};
+
+User.defaultProps = {
+  avatar: undefined,
+  size: SIZES.MEDIUM,
+  isDisabled: false,
+  onClick: undefined,
+};
+
+export default User;

client/src/components/User/User.module.css

@@ -0,0 +1,31 @@
+.button {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  display: inline-block;
+  outline: none;
+  padding: 0;
+}
+
+.hoverable:hover {
+  opacity: 0.75;
+}
+
+.wrapper {
+  background-position: center center !important;
+  background-repeat: no-repeat !important;
+  background-size: cover !important;
+  border: none;
+  border-radius: 50%;
+  color: #fff;
+  display: inline-block;
+  line-height: 1;
+  outline: none;
+  text-align: center;
+  vertical-align: top;
+}
+
+.initials {
+  margin: 0 auto;
+  text-transform: capitalize;
+}

client/src/components/User/index.js

@@ -0,0 +1,3 @@
+import User from './User';
+
+export default User;