Merge branch 'connect-ui' of gitlab.coko.foundation:wax/wax-prosemirror into connect-ui

stories/_helpers.js

@@ -36,5 +36,12 @@ const Demo = props => {
   );
 };
 
-/* eslint-disable import/prefer-default-export */
-export { Demo };
+const Note = styled.p`
+  width: 400px;
+  background: gainsboro;
+  padding: 12px;
+  text-align: justify;
+  border-radius: 4px;
+`;
+
+export { Demo, Note };

stories/link/Link.stories.js

+import React, { useState } from 'react';
+import { random } from 'faker';
+
+import LinkTooltip from '../../wax-prosemirror-components/src/ui/Link/LinkTooltip';
+
+import { Demo, Note } from '../_helpers';
+
+export const Base = () => {
+  const [showRemove, setShowRemove] = useState(false);
+  const [showApply, setShowApply] = useState(false);
+  const [key, setKey] = useState(random.uuid());
+
+  const handleApply = () => {
+    setShowApply(true);
+    setTimeout(() => setShowApply(false), 2000);
+  };
+
+  const handleRemove = () => {
+    handleReset();
+
+    setShowRemove(true);
+    setTimeout(() => setShowRemove(false), 2000);
+  };
+
+  const handleReset = () => {
+    // changing the key will destroy the component and make a new one
+    setKey(random.uuid());
+  };
+
+  return (
+    <Demo onClickButton={handleReset}>
+      <Note>
+        When removing, the whole annotation should go away and the component
+        should be unmounted, so there is no need to reset the tooltip&apos;s
+        internal state.
+      </Note>
+
+      <LinkTooltip
+        onClickApply={handleApply}
+        onClickRemove={handleRemove}
+        key={key}
+        value={null}
+      />
+
+      {showApply && <div>Apply it!</div>}
+      {showRemove && <div>Remove it!</div>}
+    </Demo>
+  );
+};
+
+export const NewLink = () => <LinkTooltip />;
+
+export const ExistingLink = () => (
+  <LinkTooltip value="https://coko.foundation/" />
+);
+
+export default {
+  component: LinkTooltip,
+  title: 'Link/Link Tooltip',
+};

wax-prosemirror-components/src/ui/Link/LinkTooltip.js

+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  background: silver;
+  display: inline-block;
+  padding: 12px;
+
+  a {
+    color: unset;
+    text-decoration: none;
+  }
+`;
+
+const LinkWrapper = styled.div`
+  display: inline-block;
+  width: 250px;
+  margin-right: 12px;
+`;
+
+const Input = styled.input`
+  width: calc(100% - 8px);
+`;
+
+const ButtonGroup = styled.div`
+  display: inline-block;
+`;
+
+const Link = props => {
+  const { className, onClickApply, onClickRemove, value } = props;
+
+  const [editable, setEditable] = useState(!value);
+  const [inputValue, setInputValue] = useState(value || '');
+  const [valueIfCancelled, setValueIfCancelled] = useState('');
+
+  const handleChange = e => {
+    setInputValue(e.target.value);
+  };
+
+  const handleApply = () => {
+    if (inputValue) {
+      onClickApply(inputValue);
+      setEditable(false);
+    }
+  };
+
+  const handleEdit = e => {
+    setEditable(true);
+    setValueIfCancelled(inputValue);
+  };
+
+  const handleCancel = () => {
+    if (valueIfCancelled) {
+      setInputValue(valueIfCancelled);
+      setValueIfCancelled(null);
+      setEditable(false);
+    } else {
+      handleRemove();
+    }
+  };
+
+  const handleRemove = e => {
+    onClickRemove();
+  };
+
+  const handleKeyUp = e => {
+    if (e.keyCode === 13) handleApply(); // enter
+    if (e.keyCode === 27) handleCancel(); // esc
+  };
+
+  return (
+    <Wrapper className={className}>
+      <LinkWrapper>
+        {editable && (
+          <Input
+            onChange={handleChange}
+            onKeyUp={handleKeyUp}
+            value={inputValue}
+          />
+        )}
+
+        {!editable && (
+          <a href={value} rel="noreferrer" target="_blank">
+            {inputValue}
+          </a>
+        )}
+      </LinkWrapper>
+
+      <ButtonGroup>
+        {editable && (
+          <>
+            <button onClick={handleApply} type="button">
+              Apply
+            </button>
+
+            <button onClick={handleCancel} type="button">
+              Cancel
+            </button>
+          </>
+        )}
+
+        {!editable && (
+          <>
+            <button onClick={handleEdit} type="button">
+              Edit
+            </button>
+
+            <button onClick={handleRemove} type="button">
+              Remove
+            </button>
+          </>
+        )}
+      </ButtonGroup>
+    </Wrapper>
+  );
+};
+
+Link.propTypes = {
+  onClickApply: PropTypes.func.isRequired,
+  onClickRemove: PropTypes.func.isRequired,
+  value: PropTypes.string,
+};
+
+Link.defaultProps = {
+  value: null,
+};
+
+export default Link;