@bigbinary/neeto-editor 0.2.1 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neeto-editor",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "main": "./index.js",
   "description": "Neeto Editor is the library that drives the rich text experience in all Neeto products built at BigBinary",
   "keywords": [

package/webpack.config.js

@@ -2,7 +2,7 @@ const PeerDepsExternalsPlugin = require("peer-deps-externals-webpack-plugin");
 const path = require("path");
 
 module.exports = {
-  entry: "./src/Editor/index.js",
+  entry: "./lib/index.js",
   module: {
     rules: [
       {
@@ -43,8 +43,9 @@ module.exports = {
   plugins: [new PeerDepsExternalsPlugin()],
   resolve: {
     alias: {
-      common: path.resolve(__dirname, "/src/Common"),
-      hooks: path.resolve(__dirname, "/src/hooks"),
+      common: path.resolve(__dirname, "/lib/components/Common"),
+      hooks: path.resolve(__dirname, "/lib/hooks"),
+      constants: path.resolve(__dirname, "/lib/constants"),
     },
   },
 };

package/webpack.dev.config.js

@@ -2,7 +2,7 @@ const HtmlWebPackPlugin = require("html-webpack-plugin");
 const path = require("path");
 
 module.exports = {
-  entry: "./src/index.js",
+  entry: "./example/index.js",
   devtool:
     process.env.NODE_ENV === "production"
       ? "source-map"
@@ -61,8 +61,9 @@ module.exports = {
   ],
   resolve: {
     alias: {
-      common: path.resolve(__dirname, "/src/Common"),
-      hooks: path.resolve(__dirname, "/src/hooks"),
+      common: path.resolve(__dirname, "/lib/components/Common"),
+      hooks: path.resolve(__dirname, "/lib/hooks"),
+      constants: path.resolve(__dirname, "/lib/constants"),
     },
   },
 };

package/src/App.js

@@ -1,8 +0,0 @@
-import React from "react";
-
-import Example from "./examples";
-import "./index.scss";
-
-export default function App() {
-  return <Example />;
-}

package/src/Common/Avatar.js

@@ -1,168 +0,0 @@
-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

@@ -1,95 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,122 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,59 +0,0 @@
-/** 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

@@ -1,35 +0,0 @@
-/** 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

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

package/src/Common/Input.js

@@ -1,70 +0,0 @@
-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;