@licklist/design 0.45.0-dev.0 → 0.46.0

package/src/tiptap-editor/TipTapEditor.tsx

@@ -0,0 +1,111 @@
+import React, { useEffect } from "react";
+import { useEditor, EditorContent } from "@tiptap/react";
+import Bold from "@tiptap/extension-bold";
+import Text from "@tiptap/extension-text";
+import Blockquote from "@tiptap/extension-blockquote";
+import BulletList from "@tiptap/extension-bullet-list";
+import Document from "@tiptap/extension-document";
+import Heading from "@tiptap/extension-heading";
+import History from "@tiptap/extension-history";
+import HorizontalRule from "@tiptap/extension-horizontal-rule";
+import Italic from "@tiptap/extension-italic";
+import ListItem from "@tiptap/extension-list-item";
+import OrderedList from "@tiptap/extension-ordered-list";
+import Paragraph from "@tiptap/extension-paragraph";
+import Strike from "@tiptap/extension-strike";
+import TaskList from "@tiptap/extension-task-list";
+import TaskItem from "@tiptap/extension-task-item";
+import HardBreak from "@tiptap/extension-hard-break";
+import clsx from "clsx";
+
+import { TipTapMenu } from "./TipTapMenu";
+import { EmojiReplacer } from "./TipTapMenu/extensions/EmojiReplacer";
+
+export interface TipTapEditorProps {
+  viewMode: boolean;
+  withEmoji?: boolean;
+  content?: string;
+  onUpdate?: (editorText: string) => void;
+  disabled?: boolean;
+  editorStyle?: React.CSSProperties;
+  className?: string;
+  id?: string;
+}
+
+const DEFAULT_CONTENT = "<p></p>";
+
+const EXTENSIONS = [
+  Blockquote,
+  BulletList,
+  Heading,
+  History,
+  HorizontalRule,
+  Strike,
+  Paragraph,
+  OrderedList,
+  ListItem,
+  Italic,
+  Document,
+  Text,
+  Bold,
+  HardBreak,
+  TaskList,
+  TaskItem.configure({
+    nested: true,
+  }),
+  EmojiReplacer,
+];
+
+export function TipTapEditor({
+  viewMode,
+  withEmoji = false,
+  content,
+  onUpdate,
+  disabled = false,
+  editorStyle,
+  className,
+  id,
+}: TipTapEditorProps) {
+  const editor = useEditor(
+    {
+      extensions: EXTENSIONS,
+      editable: !disabled,
+      content: content || "",
+      onUpdate: ({ editor }) => {
+        onUpdate(editor.getHTML());
+      },
+    },
+    [disabled]
+  );
+
+  useEffect(() => {
+    if (!editor?.commands) return;
+    const html = editor.getHTML();
+    if (html === DEFAULT_CONTENT && content && content !== DEFAULT_CONTENT) {
+      editor?.commands.setContent(content);
+      return;
+    }
+    if (html !== content) {
+      editor?.commands.setContent(content);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [content]);
+
+  return (
+    <div id={id}>
+      {!viewMode && (
+        <TipTapMenu editor={editor} withEmoji={withEmoji} disabled={disabled} />
+      )}
+      <EditorContent
+        name="editor"
+        className={clsx(
+          !viewMode ? "editor editor-with-menu" : "editor-without-menu",
+          disabled && "editor-disabled",
+          className
+        )}
+        style={editorStyle}
+        editor={editor}
+      />
+    </div>
+  );
+}

package/src/tiptap-editor/TipTapMenu/TipTapMenu.stories.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { TipTapMenu } from "./TipTapMenu";
+import { useEditor } from "@tiptap/react";
+import { Meta } from "@storybook/react";
+import TaskList from "@tiptap/extension-task-list";
+import TaskItem from "@tiptap/extension-task-item";
+import Text from "@tiptap/extension-text";
+import Document from "@tiptap/extension-document";
+
+import { EmojiReplacer } from "./extensions/EmojiReplacer";
+
+export default {
+  title: "TipTapEditor/Menu",
+  component: TipTapMenu,
+} as Meta;
+
+
+export const Default = () => {
+  const editor = useEditor({
+    extensions: [
+      Text,
+      Document,
+      TaskList,
+      TaskItem.configure({
+        nested: true,
+      }),
+      EmojiReplacer,
+    ],
+    content: "",
+  })
+
+  return (
+    <TipTapMenu withEmoji editor={editor} />
+  );
+};

package/src/tiptap-editor/TipTapMenu/TipTapMenu.tsx

@@ -0,0 +1,144 @@
+import React from "react";
+import { sample } from "lodash";
+import { Editor } from "@tiptap/react";
+import { Row } from "react-bootstrap";
+import clsx from "clsx";
+
+import { ReactComponent as BoldSvg } from "../../assets/editor/bold.svg";
+import { ReactComponent as ItalicSvg } from "../../assets/editor/italic.svg";
+import { ReactComponent as StrikethroughSvg } from "../../assets/editor/strikethrough.svg";
+import { ReactComponent as TextWrapSvg } from "../../assets/editor/text-wrap.svg";
+import { ReactComponent as FormatClearSvg } from "../../assets/editor/format-clear.svg";
+import { ReactComponent as SepatatorSvg } from "../../assets/editor/separator.svg";
+import { ReactComponent as DoubleQuotesLSvg } from "../../assets/editor/double-quotes-l.svg";
+import { ReactComponent as H1Svg } from "../../assets/editor/h1.svg";
+import { ReactComponent as H2Svg } from "../../assets/editor/h2.svg";
+import { ReactComponent as ParagraphSvg } from "../../assets/editor/paragraph.svg";
+import TipTapMenuItem from "./components/TipTapMenuItem";
+
+interface TipTapMenuPros {
+  editor: Editor;
+  withEmoji?: boolean;
+  disabled?: boolean;
+}
+
+export function TipTapMenu({ editor, withEmoji, disabled }: TipTapMenuPros) {
+  if (!editor) {
+    return null;
+  }
+
+  return (
+    <Row className={clsx("editor-menu", disabled && "editor-menu-disabled")}>
+      <TipTapMenuItem
+        onClick={() => editor.chain().focus().toggleBold().run()}
+        type="Bold"
+        customIcon={<BoldSvg />}
+        isActive={editor.isActive("bold")}
+      />
+      <TipTapMenuItem
+        onClick={() => editor.chain().focus().toggleItalic().run()}
+        type="Italic"
+        customIcon={<ItalicSvg />}
+        isActive={editor.isActive("italic")}
+      />
+      <TipTapMenuItem
+        onClick={() => editor.chain().focus().toggleStrike().run()}
+        type="Strike"
+        customIcon={<StrikethroughSvg />}
+        isActive={editor.isActive("strike")}
+      />
+      {withEmoji && (
+        <>
+          <div className="divider" />
+          <TipTapMenuItem
+            onClick={() =>
+              editor
+                .chain()
+                .focus()
+                .insertEmoji(
+                  sample(["😀", "😁", "😂", "😎", "😍", "😱"]) as string
+                )
+                .run()
+            }
+            type="Emoji"
+            iconName="smile"
+          />
+        </>
+      )}
+      <div className="divider" />
+      <TipTapMenuItem
+        onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
+        type="Heading 1"
+        customIcon={<H1Svg />}
+        isActive={editor.isActive("heading", { level: 1 })}
+      />
+      <TipTapMenuItem
+        onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
+        type="Heading 2"
+        customIcon={<H2Svg />}
+        isActive={editor.isActive("heading", { level: 2 })}
+      />
+      <TipTapMenuItem
+        onClick={() => editor.chain().focus().setParagraph().run()}
+        type="Paragraph"
+        customIcon={<ParagraphSvg />}
+        isActive={editor.isActive("paragraph")}
+      />
+
+      <TipTapMenuItem
+        onClick={() => editor.chain().focus().toggleOrderedList().run()}
+        type="Bullet list"
+        iconName="list"
+        isActive={editor.isActive("bulletList")}
+      />
+      <TipTapMenuItem
+        onClick={() => editor.chain().focus().toggleBulletList().run()}
+        type="Ordered list"
+        iconName="list-ol"
+        isActive={editor.isActive("orderedList")}
+      />
+      <TipTapMenuItem
+        onClick={() => editor.commands.toggleTaskList()}
+        type="Task list"
+        iconName="tasks"
+        isActive={editor.isActive("taskList")}
+      />
+      <div className="divider" />
+      <TipTapMenuItem
+        onClick={() => editor.chain().focus().toggleBlockquote().run()}
+        type="Blockquote"
+        customIcon={<DoubleQuotesLSvg />}
+        isActive={editor.isActive("blockquote")}
+      />
+      <TipTapMenuItem
+        onClick={() => editor.chain().focus().setHorizontalRule().run()}
+        type="Horizontal Rule"
+        customIcon={<SepatatorSvg />}
+      />
+      <div className="divider" />
+      <TipTapMenuItem
+        onClick={() => editor.chain().focus().setHardBreak().run()}
+        type="Hard Break"
+        customIcon={<TextWrapSvg />}
+      />
+      <TipTapMenuItem
+        onClick={() =>
+          editor.chain().focus().unsetAllMarks().clearNodes().run()
+        }
+        type="Clear Format"
+        customIcon={<FormatClearSvg />}
+      />
+      <div className="divider" />
+      <TipTapMenuItem
+        onClick={() => editor.chain().focus().undo().run()}
+        type="Undo"
+        iconName="undo-alt"
+      />
+      <TipTapMenuItem
+        onClick={() => editor.chain().focus().redo().run()}
+        type="Redo"
+        iconName="redo-alt"
+      />
+    </Row>
+  );
+}

package/src/tiptap-editor/TipTapMenu/components/TipTapMenuItem.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { Tooltip, OverlayTrigger } from "react-bootstrap";
+import { useId } from "@react-aria/utils";
+import clsx from "clsx";
+
+import { Icon } from "../../../static";
+
+interface TipTapMenuItemProps {
+  onClick: () => void;
+  type: string;
+  iconName?: string;
+  customIcon?: React.ReactElement;
+  isActive?: boolean;
+}
+
+export const TipTapMenuItem = ({
+  onClick,
+  type,
+  iconName,
+  customIcon,
+  isActive,
+}: TipTapMenuItemProps) => {
+  const toltipId = useId();
+
+  return (
+    <OverlayTrigger
+      placement="top"
+      delay={{ show: 450, hide: 550 }}
+      overlay={<Tooltip id={toltipId}>{type}</Tooltip>}
+    >
+      <div
+        role="button"
+        tabIndex={-1}
+        className={clsx("icon-btn", isActive && "icon-btn-active")}
+        onClick={onClick}
+        onKeyPress={() => {}}
+      >
+        {customIcon || <Icon type={iconName} height="1rem" color="black" />}
+      </div>
+    </OverlayTrigger>
+  );
+};
+
+export default TipTapMenuItem;

package/src/tiptap-editor/TipTapMenu/components/index.ts

@@ -0,0 +1 @@
+export * from "./TipTapMenuItem";

package/src/tiptap-editor/TipTapMenu/extensions/EMOJIS.ts

@@ -0,0 +1,91 @@
+import { joinShortcodes, CompactEmoji } from "emojibase";
+import EMOJIBASE_REGEX from "emojibase-regex";
+import emojis from "emojibase-data/en/compact.json";
+import shortcodes from "emojibase-data/en/shortcodes/emojibase.json";
+import { escapeRegExp } from "lodash";
+
+type Emoji = {
+  emoji: string;
+  shortcode?: string;
+};
+
+/**
+ * Join the English compact emoji dataset with the English shortcodes (e.g., `:grinning:`) into a
+ * single object for easier manipulation.
+ */
+const emojisWithShortcodes = joinShortcodes(emojis as CompactEmoji[], [
+  shortcodes,
+]);
+
+const EMOJI_EMOTICONS: { [emoticon: string]: string } = {};
+const EMOJI_SUGGESTIONS: Emoji[] = [];
+
+const emoticonsForRegex: string[] = [];
+
+/**
+ * Use `forEach()` loop to go through the whole emojis data a single time, instead of using `map()`
+ * twice, one for emoticons (e.g., `:)`), and another for shortcodes (e.g., `:grinning:`).
+ */
+emojisWithShortcodes.forEach(({ unicode, emoticon, shortcodes }) => {
+  /**
+   * Push all available emoticons to an array (escaped for a RegExp), and create a map
+   * for a fast unicode emoji lookup based on the emoticon key.
+   */
+  if (emoticon) {
+    emoticonsForRegex.push(escapeRegExp(emoticon as string));
+    EMOJI_EMOTICONS[emoticon as string] = unicode;
+  }
+
+  /**
+   * Push all available unicode emojis and it's first shortcode to an array to be used with the
+   * emoji suggestion extension.
+   */
+  if (shortcodes) {
+    EMOJI_SUGGESTIONS.push({
+      emoji: unicode,
+      shortcode: `:${shortcodes[0]}:`.toLowerCase(),
+    });
+  }
+});
+
+/**
+ * Join all available emoticons into a unified RegExp, which must match a space character at the
+ * end, so that the the `emojis-replacer` doesn't trigger a replacement when typing `:)`, but only
+ * when typing `:) `.
+ *
+ * Although Emojibase comes with `emojibase-regex/emoticon`, it unfortunately matches emoticons
+ * permutations (i.e., `:)`, `:-)`), which are not part of the emoji dataset, making it impossible
+ * to map emoticon permutations to a unicode emoji. Because of that, we create our own RegExp with
+ * only the main emoticon for each unicode emoji.
+ *
+ * Ends the regex pattern on `$` dollar sign as documented here:
+ * https://github.com/ueberdosis/tiptap/blob/f74f1ac/docs/guide/custom-extensions.md?plain=1#L410
+ */
+const EMOTICON_REGEX = new RegExp(`(?:${emoticonsForRegex.join("|")})\\s$`);
+
+const EMOTICON_REGEX_PASTE = new RegExp(
+  `(?:${emoticonsForRegex.join("|")})`,
+  "g"
+);
+
+/**
+ * Creates a "unicode" RegExp based on Emojibase's regex patterns for matching both emoji and text
+ * presentation characters.
+ *
+ * Ends the regex pattern on `$` dollar sign as documented here:
+ * https://github.com/ueberdosis/tiptap/blob/f74f1ac/docs/guide/custom-extensions.md?plain=1#L410
+ */
+const UNICODE_REGEX = new RegExp(`(?:${EMOJIBASE_REGEX.source})$`);
+
+const UNICODE_REGEX_PASTE = new RegExp(`(?:${EMOJIBASE_REGEX.source})`, "g");
+
+export {
+  EMOJI_EMOTICONS,
+  EMOJI_SUGGESTIONS,
+  EMOTICON_REGEX,
+  EMOTICON_REGEX_PASTE,
+  UNICODE_REGEX,
+  UNICODE_REGEX_PASTE,
+};
+
+export type { Emoji };

package/src/tiptap-editor/TipTapMenu/extensions/EmojiReplacer.ts

@@ -0,0 +1,150 @@
+import { nodeInputRule, PasteRule, Node } from "@tiptap/core";
+
+import {
+  EMOJI_EMOTICONS,
+  EMOTICON_REGEX,
+  EMOTICON_REGEX_PASTE,
+  UNICODE_REGEX,
+  UNICODE_REGEX_PASTE,
+} from "./EMOJIS";
+import { parseTwemoji } from "./utils";
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    emojiReplacer: {
+      insertEmoji: (emoji: string) => ReturnType;
+    };
+  }
+}
+
+const EmojiReplacer = Node.create({
+  name: "emojiReplacer",
+  group: "inline",
+  inline: true,
+  selectable: false,
+  atom: true,
+  addAttributes() {
+    return {
+      emoji: {
+        default: null,
+        parseHTML: (element) => element.children[0]?.getAttribute("alt"),
+        renderHTML: (attributes) => {
+          if (!attributes.emoji) {
+            return {};
+          }
+
+          if (UNICODE_REGEX.test(attributes.emoji)) {
+            return parseTwemoji(attributes.emoji);
+          }
+
+          return parseTwemoji(EMOJI_EMOTICONS[attributes.emoji]);
+        },
+      },
+    };
+  },
+  parseHTML() {
+    return [{ tag: "span[data-emoji-replacer]" }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["span", { "data-emoji-replacer": "" }, ["img", HTMLAttributes]];
+  },
+  renderText({ node }) {
+    return node.attrs.emoji;
+  },
+  addCommands() {
+    return {
+      insertEmoji:
+        (emoji) =>
+        ({ tr, dispatch }) => {
+          const node = this.type.create({ emoji });
+
+          if (dispatch) {
+            tr.replaceRangeWith(tr.selection.from, tr.selection.to, node);
+          }
+
+          return true;
+        },
+    };
+  },
+  addKeyboardShortcuts() {
+    return {
+      Backspace: () =>
+        this.editor.commands.command(({ tr, state }) => {
+          const { empty, anchor } = state.selection;
+
+          if (!empty) {
+            return false;
+          }
+
+          let isBackspaceHandled = false;
+
+          state.doc.nodesBetween(anchor - 1, anchor, (node, pos) => {
+            if (node.type.name === "emojiReplacer") {
+              tr.deleteRange(pos, pos + node.nodeSize);
+              isBackspaceHandled = true;
+              return false;
+            }
+            return false;
+          });
+
+          return isBackspaceHandled;
+        }),
+    };
+  },
+  addInputRules() {
+    return [
+      nodeInputRule({
+        find: EMOTICON_REGEX,
+        type: this.type,
+        getAttributes: (match) => {
+          return {
+            emoji: match[0].trim(),
+          };
+        },
+      }),
+      nodeInputRule({
+        find: UNICODE_REGEX,
+        type: this.type,
+        getAttributes: (match) => {
+          return {
+            emoji: match[0].trim(),
+          };
+        },
+      }),
+    ];
+  },
+  addPasteRules() {
+    return [
+      new PasteRule({
+        find: EMOTICON_REGEX_PASTE,
+        handler: ({ state, range, match }) => {
+          const { tr } = state;
+
+          tr.replaceWith(
+            range.from,
+            range.to,
+            this.type.create({
+              emoji: match[0].trim(),
+            })
+          );
+        },
+      }),
+      new PasteRule({
+        find: UNICODE_REGEX_PASTE,
+        handler: ({ state, range, match }) => {
+          const { tr } = state;
+
+          tr.replaceWith(
+            range.from,
+            range.to,
+            this.type.create({
+              emoji: match[0].trim(),
+            })
+          );
+        },
+      }),
+    ];
+  },
+});
+
+export { EmojiReplacer };

package/src/tiptap-editor/TipTapMenu/extensions/utils.ts

@@ -0,0 +1,14 @@
+import { parse } from "twemoji-parser";
+
+function parseTwemoji(emoji: string) {
+  const [twemoji] = parse(emoji);
+
+  return {
+    src: twemoji.url,
+    alt: twemoji.text,
+    class: "emoji",
+    draggable: "false",
+  };
+}
+
+export { parseTwemoji };

package/src/tiptap-editor/TipTapMenu/index.ts

@@ -0,0 +1 @@
+export * from "./TipTapMenu";

package/src/tiptap-editor/index.ts

@@ -0,0 +1 @@
+export * from "./TipTapEditor";

package/src/typeahead/Typeahead.stories.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import { FormProvider, useForm } from "react-hook-form";
+import { Typeahead } from "./Typeahead";
+
+storiesOf("Typeahead", module).add("Typeahead", () => {
+  const form = useForm();
+  return (
+    <FormProvider {...form}>
+      <Typeahead
+        name="user"
+        isMultipleChoise
+        options={[
+          { id: 1, value: "user1", label: "User1" },
+          { id: 2, value: "user2", label: "User2" },
+          { id: 3, value: "user3", label: "User3" },
+        ]}
+        placeholder="Select"
+        noOptionsMessage="No Options Found"
+      />
+    </FormProvider>
+  );
+});

package/src/typeahead/Typeahead.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import Select, { CSSObjectWithLabel } from "react-select";
+import { Controller, useFormContext } from "react-hook-form";
+
+export type TypeaheadOptions = {
+  id: number | string;
+  value: any;
+  label: string;
+};
+
+export interface TypeaheadProps {
+  options: TypeaheadOptions[];
+  placeholder: string;
+  isRequired?: boolean;
+  name: string;
+  isMultipleChoise?: boolean;
+  noOptionsMessage: string;
+  isInvalid?: boolean;
+}
+
+function Typeahead({
+  options,
+  placeholder,
+  isRequired = false,
+  isMultipleChoise,
+  name = "",
+  noOptionsMessage = "",
+  isInvalid,
+}: TypeaheadProps) {
+  const { control } = useFormContext();
+
+  const getErrorStyle = (): CSSObjectWithLabel =>
+    isInvalid ? { borderColor: "red" } : {};
+
+  return (
+    <>
+      <Controller
+        name={name}
+        control={control}
+        rules={{ required: isRequired }}
+        render={({ field }) => (
+          <Select
+            placeholder={placeholder}
+            value={field.value}
+            isMulti={isMultipleChoise}
+            styles={{
+              control: (base) => ({
+                ...base,
+                ...getErrorStyle(),
+              }),
+            }}
+            onChange={(value) => {
+              field.onChange(value);
+            }}
+            options={options}
+            noOptionsMessage={() => <span>{noOptionsMessage}</span>}
+          />
+        )}
+      />
+    </>
+  );
+}
+
+export { Typeahead };

package/src/typeahead/index.ts

@@ -0,0 +1 @@
+export * from "./Typeahead";