New link popup icons (#160)

jpuri · web-flow · commit 14e6f02ceaf6 · 2021-06-27T00:29:05.000+05:30
diff --git a/package.json b/package.json
@@ -39,6 +39,7 @@
     "@babel/preset-env": "^7.4.5",
     "@babel/preset-react": "^7.0.0",
     "@rollup/plugin-json": "4.0.1",
+    "@svgr/rollup": "^5.5.0",
     "@types/prosemirror-model": "^1.7.2",
     "@types/prosemirror-view": "^1.11.4",
     "@types/react": "^16.9.29",
diff --git a/packages/core/src/plugins/link/popups/Create.tsx b/packages/core/src/plugins/link/popups/Create.tsx
@@ -1,18 +1,18 @@
-import * as React from 'react';
+import * as React from "react";
 import {
   ChangeEvent,
   FunctionComponent,
   MutableRefObject,
   useState,
-} from 'react';
-import styled from '@emotion/styled';
-import { EditorState } from 'prosemirror-state';
+} from "react";
+import styled from "@emotion/styled";
+import { EditorState } from "prosemirror-state";
 
-import { PrimaryButton, Input, Popup } from 'nib-ui';
+import { ToolbarButton, Input, Popup, Icon } from "nib-ui";
 
-import { EditorStyle } from '../../../types/editor-style';
-import { usePMStateContext } from '../../../context/pm-state/index';
-import { linkPluginKey } from '../plugin';
+import { EditorStyle } from "../../../types/editor-style";
+import { usePMStateContext } from "../../../context/pm-state/index";
+import { linkPluginKey } from "../plugin";
 
 interface CreatePopupProps {
   editorWrapper: MutableRefObject<HTMLDivElement | null>;
@@ -36,7 +36,7 @@ const CreatePopup: FunctionComponent<CreatePopupProps> = ({
   };
 
   const [linkText, setLinkText] = useState(getSelectedText());
-  const [href, setHref] = useState('');
+  const [href, setHref] = useState("");
   const [linkTextRequiredError, setLinkTextRequiredError] = useState(false);
 
   const updateLinkText = (evt: ChangeEvent) => {
@@ -58,7 +58,7 @@ const CreatePopup: FunctionComponent<CreatePopupProps> = ({
     const { $from, $to } = selection;
     dispatch(
       tr
-        .setMeta('show-add-link-toolbar', false)
+        .setMeta("show-add-link-toolbar", false)
         .insertText(linkText, $from.pos, $to.pos)
         .addMark(
           $from.pos,
@@ -71,14 +71,14 @@ const CreatePopup: FunctionComponent<CreatePopupProps> = ({
   };
 
   const handleKeyDown = (evt: KeyboardEvent) => {
-    if (evt.key === 'Enter') {
+    if (evt.key === "Enter") {
       addLink();
     }
   };
 
   const closePopup = () => {
     const { state, dispatch } = pmview;
-    dispatch(state.tr.setMeta('show-add-link-toolbar', false));
+    dispatch(state.tr.setMeta("show-add-link-toolbar", false));
   };
 
   return (
@@ -111,21 +111,23 @@ const CreatePopup: FunctionComponent<CreatePopupProps> = ({
               value={href}
             />
           </InputWrapper>
-          <PrimaryButton onKeyPress={handleKeyDown} onClick={addLink}>
-            Add
-          </PrimaryButton>
-          <PrimaryButton onClick={closePopup}>Cancel</PrimaryButton>
+          <ToolbarButton onKeyPress={handleKeyDown} onClick={addLink}>
+            <Icon name="check" />
+          </ToolbarButton>
+          <ToolbarButton onClick={closePopup}>
+            <Icon name="closeNew" />
+          </ToolbarButton>
         </Wrapper>
       )}
     />
   );
 };
 
 export default {
-  name: 'create_link',
+  name: "create_link",
   getMarker: (editorWrapper: MutableRefObject<HTMLDivElement | null>) =>
     editorWrapper.current &&
-    editorWrapper.current.getElementsByClassName('nib-link-marker')[0],
+    editorWrapper.current.getElementsByClassName("nib-link-marker")[0],
   condition: ({ state }: { state: EditorState }) => {
     const pluginState = linkPluginKey.getState(state);
     return pluginState && pluginState.showAddLinkToolbar;
@@ -144,7 +146,7 @@ const Wrapper = styled.div`
 `;
 
 const InputWrapper = styled.div({
-  '> div:first-of-type': {
+  "> div:first-of-type": {
     marginBottom: 8,
   },
 });
diff --git a/packages/core/src/plugins/link/popups/Edit.tsx b/packages/core/src/plugins/link/popups/Edit.tsx
@@ -1,18 +1,18 @@
-import * as React from 'react';
+import * as React from "react";
 import {
   ChangeEvent,
   FunctionComponent,
   MutableRefObject,
   useState,
-} from 'react';
-import styled from '@emotion/styled';
-import { TextSelection } from 'prosemirror-state';
+} from "react";
+import styled from "@emotion/styled";
+import { TextSelection } from "prosemirror-state";
 
-import { PrimaryButton, Input, Popup, Space, SpaceSize } from 'nib-ui';
+import { ToolbarButton, Input, Popup, Icon } from "nib-ui";
 
-import { EditorStyle } from '../../../types/editor-style';
-import { usePMStateContext } from '../../../context/pm-state/index';
-import { linkPluginKey } from '../plugin';
+import { EditorStyle } from "../../../types/editor-style";
+import { usePMStateContext } from "../../../context/pm-state/index";
+import { linkPluginKey } from "../plugin";
 
 export interface EditPopupProps {
   editorWrapper: MutableRefObject<HTMLDivElement | null>;
@@ -62,7 +62,7 @@ const EditPopup: FunctionComponent<EditPopupProps> = ({
 
   const closePopup = () => {
     const { state, dispatch } = pmview;
-    dispatch(state.tr.setMeta('show-edit-link-toolbar', false));
+    dispatch(state.tr.setMeta("show-edit-link-toolbar", false));
   };
 
   return (
@@ -81,20 +81,23 @@ const EditPopup: FunctionComponent<EditPopupProps> = ({
             }
             defaultValue={link.href}
           />
-          <PrimaryButton onClick={updateLink}>Update</PrimaryButton>
-          <Space size={SpaceSize.l} />
-          <PrimaryButton onClick={unLink}>Unlink</PrimaryButton>
+          <ToolbarButton onClick={updateLink}>
+            <Icon name="check" />
+          </ToolbarButton>
+          <ToolbarButton onClick={unLink}>
+            <Icon name="linkOff" />
+          </ToolbarButton>
         </Wrapper>
       )}
     />
   );
 };
 
 export default {
-  name: 'edit_link',
+  name: "edit_link",
   getMarker: (editorWrapper: MutableRefObject<HTMLDivElement | null>) =>
     editorWrapper.current &&
-    editorWrapper.current.getElementsByClassName('nib-edit-link-marker')[0],
+    editorWrapper.current.getElementsByClassName("nib-edit-link-marker")[0],
   component: EditPopup,
 };
 
diff --git a/packages/docs/styleguide/Logo.js b/packages/docs/styleguide/Logo.js
@@ -1,31 +1,31 @@
 import React from "react";
 import PropTypes from "prop-types";
 import Styled from "rsg-components/Styled";
-import pen from "./pen.svg";
+import Pen from "./pen.svg";
 
 const styles = ({ fontFamily, color }) => ({
   logo: {
     margin: 0,
     fontFamily: fontFamily.base,
     fontSize: 18,
     fontWeight: "normal",
-    color: color.baseBackground
+    color: color.baseBackground,
   },
   image: {
     width: "2.5em",
-    marginRight: 25
+    marginRight: 25,
   },
   link: {
     display: "flex",
     alignItems: "center",
-    cursor: "pointer"
-  }
+    cursor: "pointer",
+  },
 });
 export function LogoRenderer({ classes }) {
   return (
     <h1 className={classes.logo}>
       <a className={classes.link} href="">
-        <img className={classes.image} src={pen} />
+        {/* <Pen className={classes.image} /> */}
         <span style={{ fontSize: 24, marginLeft: 8 }}>Nib</span>
       </a>
     </h1>
@@ -34,7 +34,7 @@ export function LogoRenderer({ classes }) {
 
 LogoRenderer.propTypes = {
   classes: PropTypes.object.isRequired,
-  children: PropTypes.node
+  children: PropTypes.node,
 };
 
 export default Styled(styles)(LogoRenderer);
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -14,10 +14,11 @@
   "author": "Jyoti Puri",
   "homepage": "https://github.com/jpuri/Nib/tree/master/packages/ui/#Readme.md",
   "devDependencies": {
-    "react": "next",
-    "react-dom": "next",
+    "@svgr/webpack": "^5.5.0",
     "emotion-theming": "^10.0.14",
-    "prop-types": "^15.6.2"
+    "prop-types": "^15.6.2",
+    "react": "next",
+    "react-dom": "next"
   },
   "license": "MIT"
 }
diff --git a/packages/ui/src/icons/index.js b/packages/ui/src/icons/index.js
@@ -44,6 +44,9 @@ import Video from "./Video";
 import ViewComment from "./ViewComment";
 import WrapLeft from "./WrapLeft";
 import WrapRight from "./WrapRight";
+import Check from "./svg/check.svg";
+import CloseNew from "./svg/close.svg";
+import LinkOff from "./svg/link_off.svg";
 
 export default {
   add: Add,
@@ -92,4 +95,7 @@ export default {
   viewComment: ViewComment,
   wrapLeft: WrapLeft,
   wrapRight: WrapRight,
+  closeNew: CloseNew,
+  check: Check,
+  linkOff: LinkOff,
 };
diff --git a/packages/ui/src/icons/svg/check.svg b/packages/ui/src/icons/svg/check.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>
diff --git a/packages/ui/src/icons/svg/close.svg b/packages/ui/src/icons/svg/close.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>
diff --git a/packages/ui/src/icons/svg/link_off.svg b/packages/ui/src/icons/svg/link_off.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M14.39 11L16 12.61V11zM17 7h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1 0 1.27-.77 2.37-1.87 2.84l1.4 1.4C21.05 15.36 22 13.79 22 12c0-2.76-2.24-5-5-5zM2 4.27l3.11 3.11C3.29 8.12 2 9.91 2 12c0 2.76 2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1 0-1.59 1.21-2.9 2.76-3.07L8.73 11H8v2h2.73L13 15.27V17h1.73l4.01 4.01 1.41-1.41L3.41 2.86 2 4.27z"/></svg>
diff --git a/packages/ui/yarn-error.log b/packages/ui/yarn-error.log
diff --git a/scripts/rollup.config.js b/scripts/rollup.config.js
diff --git a/styleguide.config.js b/styleguide.config.js
diff --git a/yarn.lock b/yarn.lock
