feat(ui): add track changes box

.eslintrc.js

@@ -22,7 +22,7 @@ eslint.rules = {
   'import/no-extraneous-dependencies': [
     'error',
     {
-      devDependencies: ['.storybook/**', 'stories/**'],
+      devDependencies: ['.storybook/**', 'stories/**', '.cz-config.js'],
     },
   ],
   'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],

stories/_helpers.js

+/* eslint-disable react/prop-types */
+
+import React from 'react';
+import styled from 'styled-components';
+
+const DemoWrapper = styled.div`
+  margin-bottom: 24px;
+  border-bottom: 1px solid gray;
+  padding: 12px;
+  display: flex;
+  justify-content: flex-end;
+
+  > span {
+    background: gray;
+    color: white;
+    margin-left: 8px;
+    padding: 4px 8px;
+  }
+`;
+
+const Demo = props => {
+  const { buttonText, children, onClickButton } = props;
+  const noop = () => {};
+
+  return (
+    <>
+      <DemoWrapper>
+        <button onClick={onClickButton || noop} type="button">
+          {buttonText || 'Reset state'}
+        </button>
+        <span>demo purposes only</span>
+      </DemoWrapper>
+
+      {children}
+    </>
+  );
+};
+
+/* eslint-disable import/prefer-default-export */
+export { Demo };

stories/comments/CommentBox.stories.js

-import React, { useState } from 'react'
-import { lorem, name } from 'faker'
-import { range } from 'lodash'
-import styled from 'styled-components'
+import React, { useState } from 'react';
+import { lorem, name } from 'faker';
+import { range } from 'lodash';
 
-import CommentBox from '../../wax-prosemirror-components/src/ui/comments/CommentBox'
+import CommentBox from '../../wax-prosemirror-components/src/ui/comments/CommentBox';
+import { Demo } from '../_helpers';
 
 const commentData = range(5).map(() => ({
   content: lorem.sentences(3),
   displayName: name.findName(),
   timestamp: '3 days ago',
-}))
-
-const Demo = styled.div`
-  margin-bottom: 24px;
-  border-bottom: 1px solid gray;
-  padding: 12px;
-  display: flex;
-  justify-content: flex-end;
-
-  > span {
-    background: gray;
-    color: white;
-    margin-left: 8px;
-    padding: 4px 8px;
-  }
-`
+}));
 
 export const Base = () => {
-  const [active, setActive] = useState(false)
+  const [active, setActive] = useState(false);
 
   return (
-    <>
-      <Demo>
-        <button onClick={() => setActive(false)} type="button">
-          reset state
-        </button>
-        <span>demo purposes only</span>
-      </Demo>
-
+    <Demo onClickButton={() => setActive(false)}>
       <CommentBox
         active={active}
         commentData={commentData}
@@ -45,9 +23,9 @@ export const Base = () => {
         onClickBox={id => setActive(true)}
         onClickResolve={id => console.log('resolve id', id)}
       />
-    </>
-  )
-}
+    </Demo>
+  );
+};
 
 export const NotActive = () => (
   <CommentBox
@@ -56,7 +34,7 @@ export const NotActive = () => (
     onClickBox={id => console.log('set active', id)}
     onClickResolve={id => console.log('resolve id', id)}
   />
-)
+);
 
 export const Active = () => (
   <CommentBox
@@ -66,9 +44,9 @@ export const Active = () => (
     onClickBox={id => console.log('set active', id)}
     onClickResolve={id => console.log('resolve id', id)}
   />
-)
+);
 
 export default {
   component: CommentBox,
   title: 'Comments/Comment Box',
-}
+};

stories/trackChanges/TrackChangesBox.stories.js

+import React, { useState } from 'react';
+import { lorem, name } from 'faker';
+
+import TrackChangesBox from '../../wax-prosemirror-components/src/ui/trackChanges/TrackChangesBox';
+import { Demo } from '../_helpers';
+
+export const Base = () => {
+  const [active, setActive] = useState(false);
+  const makeActive = () => setActive(!active);
+
+  return (
+    <Demo onClickButton={() => setActive(false)}>
+      <TrackChangesBox
+        active={active}
+        displayName={name.findName()}
+        label="add"
+        onClick={makeActive}
+        onClickAccept={() => console.log('accept!')}
+        onClickReject={() => console.log('reject!')}
+        text={lorem.words(7)}
+        timestamp="2 days ago"
+      />
+    </Demo>
+  );
+};
+
+export const NotActive = () => (
+  <TrackChangesBox label="add" text={lorem.words(7)} />
+);
+
+export const Active = () => (
+  <TrackChangesBox
+    active
+    displayName={name.findName()}
+    label="add"
+    onClickAccept={() => console.log('accept!')}
+    onClickReject={() => console.log('reject!')}
+    text={lorem.words(7)}
+    timestamp="2 days ago"
+  />
+);
+
+export default {
+  component: TrackChangesBox,
+  title: 'Track Changes/Track Changes Box',
+};

wax-prosemirror-components/src/icons/icons.js

@@ -3,6 +3,7 @@ import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import {
   faBold,
   faItalic,
+  faCheck,
   faCode,
   faSuperscript,
   faSubscript,
@@ -16,6 +17,7 @@ import {
   faListUl,
   faImage,
   faTable,
+  faTimes,
   faUndo,
   faRedo,
   faOutdent,
@@ -71,4 +73,6 @@ export default {
       </svg>
     </span>
   ),
+  check: <FontAwesomeIcon icon={faCheck} />,
+  times: <FontAwesomeIcon icon={faTimes} />,
 };

wax-prosemirror-components/src/ui/trackChanges/TrackChangesBox.js

+import React from 'react';
+import PropTypes from 'prop-types';
+import styled, { css } from 'styled-components';
+import icons from '../../icons/icons';
+
+const { check, times } = icons;
+
+const activeBorder = css`
+  border-color: gray;
+`;
+
+const Wrapper = styled.div`
+  border: 2px solid transparent;
+  border-radius: 5px;
+  cursor: pointer;
+  padding: 8px 16px;
+  transition: border 0.1s ease-in;
+
+  ${props => props.active && activeBorder}
+
+  &:hover {
+    ${activeBorder}
+  }
+`;
+
+const HeadWrapper = styled.div`
+  display: flex;
+  margin-bottom: 8px;
+`;
+
+const Info = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+`;
+
+const Name = styled.div``;
+
+const Timestamp = styled.div`
+  font-color: gray;
+`;
+
+const Tools = styled.div``;
+
+const ChangeWrapper = styled.div``;
+
+const Label = styled.span`
+  font-weight: bold;
+  margin-right: 4px;
+  text-transform: capitalize;
+
+  &:after {
+    content: ':';
+  }
+`;
+
+const Text = styled.span``;
+
+const Icon = styled.div`
+  border-radius: 3px;
+  display: inline-block;
+  padding: 4px;
+  width: 16px;
+  height: 16px;
+  transition: background 0.1s ease-in;
+
+  &:hover {
+    background: gray;
+  }
+`;
+
+const IconButton = props => {
+  // eslint-disable-next-line react/prop-types
+  const { icon, onClick } = props;
+
+  const handleClick = e => {
+    e.stopPropagation();
+    onClick();
+  };
+
+  return (
+    <Icon onClick={handleClick} type="button">
+      {icon}
+    </Icon>
+  );
+};
+
+const TrackChangesBox = props => {
+  const {
+    active,
+    className,
+    displayName,
+    label,
+    onClick,
+    onClickAccept,
+    onClickReject,
+    text,
+    timestamp,
+  } = props;
+
+  return (
+    <Wrapper active={active} onClick={onClick} className={className}>
+      {active && (
+        <HeadWrapper>
+          <Info>
+            <Name>{displayName}</Name>
+            <Timestamp>{timestamp}</Timestamp>
+          </Info>
+
+          <Tools>
+            <IconButton icon={check} onClick={onClickAccept} />
+            <IconButton icon={times} onClick={onClickReject} />
+          </Tools>
+        </HeadWrapper>
+      )}
+
+      <ChangeWrapper>
+        <Label>{label}</Label>
+        <Text>{text}</Text>
+      </ChangeWrapper>
+    </Wrapper>
+  );
+};
+
+TrackChangesBox.propTypes = {
+  active: PropTypes.bool,
+  displayName: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  onClickAccept: PropTypes.func.isRequired,
+  onClickReject: PropTypes.func.isRequired,
+  text: PropTypes.string.isRequired,
+  timestamp: PropTypes.string.isRequired,
+};
+
+TrackChangesBox.defaultProps = {
+  active: false,
+};
+
+export default TrackChangesBox;