@bigbinary/neeto-editor 0.1.15 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neeto-editor",
-  "version": "0.1.15",
+  "version": "0.2.1",
   "main": "./index.js",
   "description": "Neeto Editor is the library that drives the rich text experience in all Neeto products built at BigBinary",
   "keywords": [
@@ -12,26 +12,40 @@
   "author": "BigBinary",
   "license": "MIT",
   "dependencies": {
+    "@bigbinary/neeto-icons": "^1.8.6",
     "@risingstack/react-easy-state": "^6.3.0",
     "@tailwindcss/typography": "^0.4.0",
+    "@tippyjs/react": "^4.2.6",
     "@tiptap/extension-bubble-menu": "^2.0.0-beta.18",
     "@tiptap/extension-code-block-lowlight": "^2.0.0-beta.24",
+    "@tiptap/extension-color": "^2.0.0-beta.3",
+    "@tiptap/extension-document": "^2.0.0-beta.15",
     "@tiptap/extension-dropcursor": "^2.0.0-beta.13",
     "@tiptap/extension-highlight": "^2.0.0-beta.13",
     "@tiptap/extension-image": "^2.0.0-beta.13",
     "@tiptap/extension-link": "^2.0.0-beta.18",
+    "@tiptap/extension-mention": "^2.0.0-beta.80",
     "@tiptap/extension-placeholder": "^2.0.0-beta.18",
+    "@tiptap/extension-text-style": "^2.0.0-beta.17",
     "@tiptap/extension-typography": "^2.0.0-beta.11",
+    "@tiptap/extension-underline": "^2.0.0-beta.21",
     "@tiptap/react": "^2.0.0-beta.37",
     "@tiptap/starter-kit": "^2.0.0-beta.57",
     "@tiptap/suggestion": "^2.0.0-beta.55",
-    "@uppy/core": "^1.18.1",
-    "@uppy/react": "^1.11.8",
-    "@uppy/xhr-upload": "^1.7.2",
+    "@uppy/core": "^2.1.2",
+    "@uppy/react": "^2.1.1",
+    "@uppy/url": "^2.0.4",
+    "@uppy/xhr-upload": "^2.0.5",
     "classnames": "^2.3.1",
+    "lodash.isempty": "^4.4.0",
+    "lodash.isplainobject": "^4.0.6",
     "lowlight": "^1.20.0",
     "peer-deps-externals-webpack-plugin": "1.0.4",
+    "react-hotkeys-hook": "^3.4.4",
     "react-icons": "^4.2.0",
+    "react-outside-click-handler": "^1.3.0",
+    "react-popper": "^2.2.5",
+    "react-router-dom": "^6.0.2",
     "tippy.js": "^6.3.1"
   },
   "devDependencies": {

package/src/App.js

@@ -1,31 +1,8 @@
-import React, { Component } from "react";
-import Editor from "./Editor/index";
-import "./index.scss";
-
-export default class App extends Component {
-  ref = React.createRef();
+import React from "react";
 
-  getHTML = () => {
-    return this.ref.current.editor.getHTML();
-  };
+import Example from "./examples";
+import "./index.scss";
 
-  render() {
-    return (
-      <div style={{ width: 720, margin: "48px auto" }}>
-        <div className="flex justify-end">
-          <button
-            className="px-3 py-1 text-sm font-medium border border-gray-200 rounded shadow-sm"
-            onClick={() => {
-              // eslint-disable-next-line no-console
-              console.log(this.getHTML());
-            }}
-          >
-            Print output to console
-          </button>
-        </div>
-        <hr className="my-2 border-gray-100" />
-        <Editor ref={this.ref} />
-      </div>
-    );
-  }
+export default function App() {
+  return <Example />;
 }

package/src/Common/Avatar.js

@@ -0,0 +1,168 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import classNames from "classnames";
+
+const SIZE = {
+  small: 24,
+  medium: 32,
+  large: 40,
+  xlarge: 64,
+};
+
+const STATUS = {
+  online: "online",
+  idle: "idle",
+  offline: "offline",
+};
+
+const COLORS = [
+  "#E5E7EB",
+  "#FECACA",
+  "#FDE68A",
+  "#A7F3D0",
+  "#BFDBFE",
+  "#C7D2FE",
+  "#DDD6FE",
+  "#FBCFE8",
+];
+
+function Avatar({
+  size,
+  user,
+  isSquare,
+  status,
+  onClick,
+  className,
+  ...otherProps
+}) {
+  const [loaded, setLoaded] = useState(false);
+
+  const { name = "", imageUrl } = user;
+
+  const isMedium = size === "medium";
+  const isLarge = size === "large";
+  const isXLarge = size === "xlarge";
+
+  const getInitials = (fullName) => {
+    const allNames = fullName.trim().split(" ");
+    const initials = allNames.reduce((acc, curr, index) => {
+      if (index === 0 || index === allNames.length - 1) {
+        acc = `${acc}${curr.charAt(0).toUpperCase()}`;
+      }
+      return acc;
+    }, "");
+    return initials;
+  };
+
+  const avatarString = getInitials(name);
+
+  const getRandomBackgroundColor = () => {
+    const charCode =
+      (avatarString.charCodeAt(0) || 0) + (avatarString.charCodeAt(1) || 0);
+    const bgColor = COLORS[(charCode % 65) % COLORS.length] || COLORS[0];
+    return bgColor;
+  };
+
+  const imageContainerStyle = {
+    height: SIZE[size],
+    width: SIZE[size],
+    backgroundColor: getRandomBackgroundColor(),
+  };
+
+  const imageClasses = classNames("neeto-ui-avatar", {
+    "neeto-ui-avatar--medium": isMedium,
+    "neeto-ui-avatar--large": isLarge,
+    "neeto-ui-avatar--xlarge": isXLarge,
+    "neeto-ui-avatar--round": !isSquare,
+    hidden: !loaded,
+  });
+
+  const placeholderClasses = classNames("neeto-ui-avatar__text", {
+    "neeto-ui-avatar__text-medium": isMedium,
+    "neeto-ui-avatar__text-large": isLarge,
+    "neeto-ui-avatar__text-xlarge": isXLarge,
+  });
+
+  // TODO: Remove 'v2' prefix.
+  const statusClasses = classNames("neeto-ui-avatar__status", `${status}`, {
+    "neeto-ui-avatar__status-medium": isMedium,
+    "neeto-ui-avatar__status-large": isLarge,
+    "neeto-ui-avatar__status-xlarge": isXLarge,
+    "neeto-ui-avatar__status-square": isSquare,
+  });
+
+  const Indicator = () =>
+    status === undefined || status === null ? (
+      React.Fragment
+    ) : (
+      <span className={statusClasses} />
+    );
+
+  const ImagePlaceholder = () => (
+    <span className={placeholderClasses}>{avatarString}</span>
+  );
+
+  const shouldDisplayInitials = avatarString && !imageUrl && !loaded;
+
+  return (
+    <div
+      onClick={onClick}
+      style={imageContainerStyle}
+      className={classNames(
+        "neeto-ui-avatar--container",
+        {
+          "neeto-ui-avatar--container-round": !isSquare,
+        },
+        className
+      )}
+      {...otherProps}
+    >
+      <Indicator />
+      {shouldDisplayInitials ? (
+        <ImagePlaceholder />
+      ) : (
+        <img
+          className={imageClasses}
+          onLoad={() => setLoaded(true)}
+          onError={() => setLoaded(false)}
+          src={imageUrl}
+          alt={`avatar-${avatarString}`}
+        />
+      )}
+    </div>
+  );
+}
+
+Avatar.defaultProps = {
+  size: "medium",
+  user: {
+    imageUrl: "",
+    name: "",
+  },
+  isSquare: false,
+  onClick: () => {},
+  status: null,
+};
+
+Avatar.propTypes = {
+  /**
+   * Specify the dimension for avatar component.
+   */
+  size: PropTypes.oneOf(Object.keys(SIZE)),
+  user: PropTypes.shape({
+    imageUrl: PropTypes.string,
+    name: PropTypes.string,
+  }),
+  isSquare: PropTypes.bool,
+  onClick: PropTypes.func,
+  /**
+   * Specify the status of the user if needed in avatar component.
+   */
+  status: PropTypes.oneOf(Object.keys(STATUS)),
+  /**
+   * Specify custom className to be applied on the Avatar Container
+   */
+  className: PropTypes.string,
+};
+
+export default Avatar;

package/src/Common/Button.js

@@ -0,0 +1,95 @@
+import React from "react";
+import classnames from "classnames";
+import { Link } from "react-router-dom";
+import ToolTip from "common/ToolTip";
+
+const noop = () => {};
+const BUTTON_STYLES = {
+  primary: "primary",
+  secondary: "secondary",
+  danger: "danger",
+  text: "text",
+  link: "link",
+};
+const BUTTON_SIZES = { large: "large", default: "default" };
+const ICON_POSITIONS = { left: "left", right: "right" };
+
+const Button = React.forwardRef((props, ref) => {
+  let {
+    icon = null,
+    iconPosition = "right",
+    iconSize = 16,
+    label = "",
+    loading = false,
+    onClick = noop,
+    to = null,
+    type = "button",
+    style = "primary",
+    fullWidth = false,
+    className = "",
+    disabled = false,
+    size = null,
+    href = null,
+    tooltipProps = null,
+    ...otherProps
+  } = props;
+
+  const handleClick = (e) => {
+    if (!loading && !disabled) {
+      onClick(e);
+    }
+  };
+
+  let Parent, elementSpecificProps;
+  if (to) {
+    Parent = Link;
+    elementSpecificProps = { to };
+  } else if (href) {
+    Parent = "a";
+    elementSpecificProps = { href };
+  } else {
+    Parent = "button";
+    elementSpecificProps = {
+      type,
+    };
+  }
+
+  let Icon =
+    typeof icon == "string"
+      ? () => <i className={classnames("neeto-ui-btn__icon", [icon])} />
+      : icon || React.Fragment;
+
+  const spinnerMarginSide =
+    iconPosition == "left" ? "marginRight" : "marginLeft";
+
+  return (
+    <ToolTip {...tooltipProps} disabled={!tooltipProps}>
+      <Parent
+        ref={ref}
+        onClick={handleClick}
+        className={classnames("neeto-ui-btn", [className], {
+          "neeto-ui-btn--style-primary": style === BUTTON_STYLES.primary,
+          "neeto-ui-btn--style-secondary": style === BUTTON_STYLES.secondary,
+          "neeto-ui-btn--style-danger": style === BUTTON_STYLES.danger,
+          "neeto-ui-btn--style-text": style === BUTTON_STYLES.text,
+          "neeto-ui-btn--style-link": style === BUTTON_STYLES.link,
+          "neeto-ui-btn--size-large": size === BUTTON_SIZES.large,
+          "neeto-ui-btn--width-full": fullWidth,
+          "neeto-ui-btn--icon-left": iconPosition == ICON_POSITIONS.left,
+          "neeto-ui-btn--icon-only": !label,
+          disabled: disabled,
+        })}
+        disabled={disabled}
+        {...elementSpecificProps}
+        {...otherProps}
+      >
+        {label && <span>{label}</span>}
+        {icon ? (
+          <Icon key="2" size={iconSize} className="neeto-ui-btn__icon" />
+        ) : null}
+      </Parent>
+    </ToolTip>
+  );
+});
+
+export default Button;

package/src/Common/CodeBlock.js

@@ -0,0 +1,11 @@
+import React from "react";
+
+const CodeBlock = ({ children }) => {
+  return (
+    <div className="flex-1 p-3 mx-3 my-2 codeblock__container">
+      <pre>{children}</pre>
+    </div>
+  );
+};
+
+export default CodeBlock;

package/src/Common/Description.js

@@ -0,0 +1,8 @@
+import React from "react";
+import classNames from "classnames";
+
+const Description = ({ children, className }) => {
+  return <p className={classNames({ [className]: className })}>{children}</p>;
+};
+
+export default Description;

package/src/Common/Dropdown/index.js

@@ -0,0 +1,122 @@
+import React, { useState, useEffect } from "react";
+import classnames from "classnames";
+import { usePopper } from "react-popper";
+import { Down } from "@bigbinary/neeto-icons";
+import { useHotkeys } from "react-hotkeys-hook";
+import OutsideClickHandler from "react-outside-click-handler";
+
+import { hyphenize } from "../../utils/common";
+
+const noop = () => {};
+
+const Dropdown = ({
+  icon,
+  label,
+  isOpen,
+  onClose = noop,
+  ulProps,
+  position,
+  children,
+  autoWidth,
+  className,
+  buttonStyle = "primary",
+  buttonProps,
+  customTarget,
+  disabled = false,
+  closeOnEsc = true,
+  closeOnSelect = true,
+  closeOnOutsideClick = true,
+  dropdownModifiers = [],
+  ...otherProps
+}) => {
+  const Target = customTarget;
+  const isControlled = !(isOpen === undefined || isOpen === null);
+
+  const [visible, setVisibility] = useState(false);
+  const [reference, setReference] = useState(null);
+  const [popper, setPopper] = useState(null);
+
+  const { styles, attributes } = usePopper(reference, popper, {
+    placement: position || "bottom-end",
+    modifiers: dropdownModifiers,
+  });
+
+  const onPopupClose = () => {
+    if (!isControlled) setVisibility(false);
+    onClose();
+  };
+
+  const handlePopperClick = () => {
+    closeOnSelect && onPopupClose();
+  };
+
+  const handleButtonClick = () => {
+    setVisibility(!visible);
+  };
+
+  closeOnEsc && useHotkeys("esc", onPopupClose);
+
+  if (!isControlled) {
+    buttonProps = {
+      ...buttonProps,
+      onClick: () => {
+        handleButtonClick();
+      },
+    };
+  }
+
+  useEffect(() => {
+    isControlled && setVisibility(isOpen);
+  }, [isOpen]);
+
+  return (
+    <OutsideClickHandler
+      useCapture={true}
+      onOutsideClick={() => {
+        closeOnOutsideClick && onPopupClose();
+      }}
+    >
+      <div
+        className={classnames("neeto-ui-dropdown__wrapper h-full", {
+          "neeto-ui-dropdown__wrapper--auto-width": autoWidth,
+          [className]: className,
+        })}
+        {...otherProps}
+      >
+        {customTarget ? (
+          <div
+            ref={setReference}
+            onClick={handleButtonClick}
+            className="h-full"
+          >
+            <Target />
+          </div>
+        ) : (
+          <div>
+            {label}
+            <Down />
+          </div>
+        )}
+        {visible && (
+          <ul
+            className="neeto-ui-dropdown__popup"
+            ref={setPopper}
+            onClick={handlePopperClick}
+            data-cy={`${hyphenize(label)}-dropdown-container`}
+            {...ulProps}
+            style={{
+              display: "block",
+              ...styles.offset,
+              ...styles.popper,
+            }}
+            {...attributes.popper}
+          >
+            {children}
+          </ul>
+        )}
+      </div>
+    </OutsideClickHandler>
+  );
+};
+
+export default Dropdown;

package/src/Common/Heading.js

@@ -0,0 +1,13 @@
+import React from "react";
+import classNames from "classnames";
+
+const Heading = ({ children, type = "main" }) => {
+  const className = classNames({
+    "mb-3 mt-14 text-3xl font-extrabold": type === "main",
+    "mb-1 mt-8 text-xl font-bold": type === "sub",
+  });
+
+  return <h1 className={className}>{children}</h1>;
+};
+
+export default Heading;

package/src/Common/HighlightText.js

@@ -0,0 +1,7 @@
+import React from "react";
+
+const HighlightText = ({ children }) => (
+  <span className="px-1 font-mono bg-gray-100">{children}</span>
+);
+
+export default HighlightText;

package/src/Common/Icons/HashtagFilled.js

@@ -0,0 +1,59 @@
+/** Icons generated by create-react-icons. Don't edit this file directly. **/
+import React from "react";
+import PropTypes from "prop-types";
+
+export function HashtagFilled(props) {
+  const { size, color, bgColor, ...other } = props;
+  return (
+    <svg viewBox="0 0 24 24" fill="none" height={size} width={size} {...other}>
+      <path
+        d="M21 7V17C21 19.209 19.209 21 17 21H7C4.791 21 3 19.209 3 17V7C3 4.791 4.791 3 7 3H17C19.209 3 21 4.791 21 7Z"
+        fill={bgColor}
+        stroke={bgColor}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M10 8V16"
+        stroke={color}
+        strokeWidth="1.389"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M14 8V16"
+        stroke={color}
+        strokeWidth="1.389"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M8 14H16"
+        stroke={color}
+        strokeWidth="1.389"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M8 10H16"
+        stroke={color}
+        strokeWidth="1.389"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+HashtagFilled.defaultProps = {
+  color: "white",
+  bgColor: "#68737D",
+  size: 24,
+};
+
+HashtagFilled.propTypes = {
+  color: PropTypes.string,
+  bgColor: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};

package/src/Common/Icons/TextColor.js

@@ -0,0 +1,35 @@
+/** Icons generated by create-react-icons. Don't edit this file directly. **/
+import React from "react";
+import PropTypes from "prop-types";
+
+export function TextColor(props) {
+  const { size, color, underlineColor, ...other } = props;
+  return (
+    <svg viewBox="0 0 24 24" fill="none" height={size} width={size} {...other}>
+      <path
+        d="M21 20H3"
+        stroke={underlineColor || color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M17.3125 15L12.1562 4L7 15M8.03125 12.8H16.2812"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+TextColor.defaultProps = {
+  color: "currentColor",
+  size: 24,
+};
+
+TextColor.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};

package/src/Common/Icons/index.js

@@ -0,0 +1,2 @@
+export * from "./TextColor";
+export * from "./HashtagFilled";

package/src/Common/Input.js

@@ -0,0 +1,70 @@
+import React from "react";
+import classnames from "classnames";
+
+import Label from "./Label";
+import { hyphenize } from "../utils/common";
+
+const Input = React.forwardRef((props, ref) => {
+  const {
+    id,
+    size = "small",
+    type = "text",
+    label,
+    error = null,
+    suffix = null,
+    prefix = null,
+    disabled = false,
+    helpText = "",
+    className = "",
+    nakedInput = false,
+    contentSize = null,
+    required = false,
+    ...otherProps
+  } = props;
+
+  return (
+    <div className={classnames(["neeto-ui-input__wrapper", className])}>
+      {label && (
+        <Label
+          required={required}
+          data-cy={`${hyphenize(label)}-input-label`}
+          htmlFor={id}
+        >
+          {label}
+        </Label>
+      )}
+      <div
+        className={classnames("neeto-ui-input", {
+          "neeto-ui-input--naked": !!nakedInput,
+          "neeto-ui-input--error": !!error,
+          "neeto-ui-input--disabled": !!disabled,
+          "neeto-ui-input--small": size === "small",
+        })}
+      >
+        {prefix && <div className="neeto-ui-input__prefix">{prefix}</div>}
+        <input
+          ref={ref}
+          type={type}
+          disabled={disabled}
+          size={contentSize}
+          required={required}
+          aria-invalid={!!error}
+          data-cy={"input-field"}
+          {...otherProps}
+        />
+        {suffix && <div className="neeto-ui-input__suffix">{suffix}</div>}
+      </div>
+      {!!error && (
+        <p
+          data-cy={`${hyphenize(label)}-input-error`}
+          className="neeto-ui-input__error"
+        >
+          {error}
+        </p>
+      )}
+      {helpText && <p className="neeto-ui-input__help-text">{helpText}</p>}
+    </div>
+  );
+});
+
+export default Input;