@soul-refiner/design-system 0.0.4 → 0.0.5

package/src/editor/plugins/custom/qa.tsx

@@ -0,0 +1,390 @@
+import React from "react";
+import { createPluginFactory, isEditorReadOnly } from "@udecode/plate";
+import { Comment as IComment, User as IUser } from "@soul-refiner/models";
+import {
+  Check,
+  ChevronDown,
+  ChevronUp,
+  CloseThin,
+  Details,
+  Globe,
+  GroupLarge,
+  Lock,
+  UserSelect,
+} from "@soul-refiner/icons/src";
+import { ELEMENT_QA, ELEMENT_PARAGRAPH } from "../../common";
+
+import { Button, Dropdown } from "../../../actions";
+import { EditorContext } from "../../Editor";
+import { Avatar, IconHeader } from "../../../iconography";
+import { CheckboxInput, PostInput, SearchInput } from "../../../inputs";
+import { Comment, Modal } from "../../../surfaces";
+
+import styles from "./styles/QA.module.scss";
+
+type QAProps = any;
+
+export const QA = ({ attributes, className, children, editor }: QAProps) => {
+  const {
+    id,
+    handleAddComment,
+    handleAddReaction,
+    handleGetComments,
+    handleGetFriends,
+    user,
+  } = React.useContext(EditorContext);
+  const [showAnswers, setShowAnswers] = React.useState(false);
+  const [showFriendsModal, setShowFriendsModal] = React.useState(false);
+  const [answer, setAnswer] = React.useState<Omit<IComment, "id" | "created">>({
+    parentId: id,
+    user,
+    privacy: "public",
+    reactions: [],
+    text: "",
+  });
+  const [comments, setComments] = React.useState<IComment[]>([]);
+  const [friendQuery, setFriendQuery] = React.useState("");
+  const [friends, setFriends] = React.useState<IUser[]>([]);
+  const { ref: DONT_USE, ...htmlAttributes } = attributes;
+
+  const toggleAnswers = () => setShowAnswers((prev) => !prev);
+
+  const handleAnswerChange = (event: React.FormEvent) => {
+    const value = (event.target as HTMLInputElement)?.value;
+    setAnswer((prev) => ({
+      ...prev,
+      text: value,
+    }));
+  };
+
+  const handleAnswerSubmit = (event: React.KeyboardEvent) => {
+    if (event.key === "Enter") {
+      handleAddComment({
+        parentId: id,
+        text: answer.text,
+        user,
+      });
+    }
+  };
+
+  const handlePrivacyChange = (event: React.MouseEvent) => {
+    const value = (event.target as HTMLElement)?.getAttribute("data-value");
+    if (!value) return;
+    switch (value) {
+      case "private":
+        setAnswer((prev) => ({
+          ...prev,
+          privacy: "private",
+        }));
+        return;
+      case "group":
+        setAnswer((prev) => ({
+          ...prev,
+          privacy: "group",
+        }));
+        return;
+      case "friends":
+        if (!Array.isArray(answer.privacy)) {
+          setAnswer((prev) => ({
+            ...prev,
+            privacy: [],
+          }));
+        }
+        setShowFriendsModal(true);
+        return;
+      case "public":
+        setAnswer((prev) => ({
+          ...prev,
+          privacy: "public",
+        }));
+        return;
+    }
+  };
+
+  const handleFriendQuery = (event: React.FormEvent) => {
+    const value = (event.target as HTMLInputElement)?.value;
+    setFriendQuery(value);
+  };
+
+  const handleAddFriend = (friendId: string) => {
+    if (Array.isArray(answer.privacy)) {
+      if (answer.privacy.includes(friendId)) {
+        setAnswer((prev) => ({
+          ...prev,
+          privacy: [...prev.privacy].filter((id) => id !== friendId),
+        }));
+      } else {
+        setAnswer((prev) => ({
+          ...prev,
+          privacy: [...prev.privacy, friendId],
+        }));
+      }
+    }
+  };
+
+  React.useEffect(() => {
+    /**
+     * TODO: DEBOUNCE
+     */
+    if (Array.isArray(answer.privacy)) {
+      handleGetFriends(friendQuery, answer.privacy).then((res) =>
+        setFriends(res)
+      );
+    } else {
+      handleGetFriends(friendQuery).then((res) => setFriends(res));
+    }
+  }, [friendQuery]);
+
+  React.useEffect(() => {
+    if (showAnswers) {
+      handleGetComments(id).then((res) => setComments(res));
+    }
+  }, [showAnswers]);
+
+  const editable = !isEditorReadOnly(editor);
+
+  const triggerProps = {
+    iconSize: 18,
+    size: 34,
+    fill: "var(--colorify-blue-3)",
+    style: {
+      borderRadius: "50%",
+      backgroundColor: "var(--colorify-blue-1)",
+      border: "1px solid var(--colorify-blue-2)",
+      cursor: "pointer",
+    },
+  };
+  const trigger =
+    answer.privacy === "group" ? (
+      <GroupLarge {...triggerProps} />
+    ) : answer.privacy === "public" ? (
+      <Globe {...triggerProps} />
+    ) : answer.privacy === "private" ? (
+      <Lock {...triggerProps} />
+    ) : (
+      <UserSelect {...triggerProps} />
+    );
+
+  return (
+    <div className={`${styles.wrapper} ${className ? className : ""}`}>
+      <div className={styles.childrenWrapper}>{children}</div>
+      <div className={styles.answersWrapper} contentEditable={false}>
+        <div
+          className={styles.showAnswers}
+          onClick={!editable ? toggleAnswers : undefined}
+        >
+          <p>Show answers</p>
+          {showAnswers ? (
+            <ChevronUp size={24} iconSize={12} fill="var(--color-grey-6)" />
+          ) : (
+            <ChevronDown size={24} iconSize={12} fill="var(--color-grey-6)" />
+          )}
+        </div>
+        {showAnswers && comments.length && (
+          <div className={styles.commentWrapper}>
+            {comments.map((comment) => (
+              <Comment
+                key={comment.id}
+                showReplies
+                onReact={() =>
+                  handleAddReaction({
+                    parentId: comment.id,
+                    type: "like",
+                    userId: user.id,
+                  })
+                }
+                onReply={(text) =>
+                  handleAddComment({
+                    parentId: comment.id,
+                    text: text,
+                    user,
+                  })
+                }
+                onShowReplies={() => undefined}
+                {...comment}
+              />
+            ))}
+          </div>
+        )}
+        <div className={styles.inputWrapper}>
+          <Avatar size={40} url={user.avatar} />
+          <PostInput
+            disabled={editable}
+            onChange={handleAnswerChange}
+            onKeyDown={handleAnswerSubmit}
+            placeholder="Write your answer"
+            value={answer.text}
+          />
+          <Dropdown
+            disabled={editable}
+            maintainState={false}
+            open="left"
+            trigger={trigger}
+            onChange={handlePrivacyChange}
+          >
+            <div className={styles.privacyOption} data-value="private">
+              <div
+                className={`${styles.radio} ${
+                  answer.privacy === "private" ? "active" : ""
+                }`}
+              />
+              <div>
+                <div className={styles.privacyTitle}>
+                  <Lock size={16} iconSize={13} />
+                  <p>Private</p>
+                </div>
+                <p>Only you can see your answer</p>
+              </div>
+            </div>
+            <div className={styles.privacyOption} data-value="group">
+              <div
+                className={`${styles.radio} ${
+                  answer.privacy === "group" ? "active" : ""
+                }`}
+              />
+              <div>
+                <div className={styles.privacyTitle}>
+                  <GroupLarge size={16} iconSize={14} />
+                  <p>Group</p>
+                </div>
+                <p>Only your group can see your answer</p>
+              </div>
+            </div>
+            <div className={styles.privacyOption} data-value="friends">
+              <div
+                className={`${styles.radio} ${
+                  Array.isArray(answer.privacy) ? "active" : ""
+                }`}
+              />
+              <div>
+                <div className={styles.privacyTitle}>
+                  <UserSelect size={16} iconSize={14} />
+                  <p>Select Friends</p>
+                </div>
+                <p>Only selected friends can see your answer</p>
+              </div>
+            </div>
+            <div className={styles.privacyOption} data-value="public">
+              <div
+                className={`${styles.radio} ${
+                  answer.privacy === "public" ? "active" : ""
+                }`}
+              />
+              <div>
+                <div className={styles.privacyTitle}>
+                  <Globe size={16} iconSize={15} />
+                  <p>Public</p>
+                </div>
+                <p>Anyone on your public feed can see your answer</p>
+              </div>
+            </div>
+          </Dropdown>
+        </div>
+      </div>
+      <Modal controlledOpen={showFriendsModal}>
+        <Modal.Content
+          header={
+            <IconHeader
+              className={styles.iconHeader}
+              color="purple"
+              icon={<Details fill="var(--colorify-purple-3)" />}
+              title={
+                <span
+                  style={{
+                    color: "var(--color-purple-3)",
+                    fontSize: "20px",
+                    fontWeight: 700,
+                  }}
+                >
+                  Select friends
+                </span>
+              }
+            />
+          }
+          footer={
+            <div className={styles.friendsModalFooter}>
+              <Modal.Dismiss>
+                <Button
+                  buttonType="secondary"
+                  icon={<CloseThin size={24} iconSize={13} />}
+                  onClick={() => {
+                    setShowFriendsModal(false);
+                    setAnswer((prev) => ({
+                      ...prev,
+                      privacy: "public",
+                    }));
+                  }}
+                  shape="rectangular"
+                  uppercase={false}
+                >
+                  Cancel
+                </Button>
+              </Modal.Dismiss>
+              <Modal.Dismiss>
+                <Button
+                  buttonColor="var(--color-blue-3)"
+                  color="var(--color-blue-10)"
+                  icon={<Check size={24} iconSize={16} />}
+                  onClick={() => setShowFriendsModal(false)}
+                  shape="rectangular"
+                  uppercase={false}
+                >
+                  Confirm
+                </Button>
+              </Modal.Dismiss>
+            </div>
+          }
+          setClosed={() => setShowFriendsModal(false)}
+        >
+          <div className={styles.friendsModal} contentEditable={false}>
+            <SearchInput
+              as="div"
+              expanded={true}
+              expandable={false}
+              onChange={handleFriendQuery}
+              placeholder="Search..."
+              value={friendQuery}
+            />
+            <div className={styles.friendsWrapper}>
+              {friends.map((friend) => (
+                <div
+                  className={styles.friend}
+                  key={friend.id}
+                  onClick={() => handleAddFriend(friend.id)}
+                >
+                  <Avatar
+                    presence={friend?.active ? "online" : undefined}
+                    size={40}
+                    title={`${friend.firstName} ${friend.lastName}`}
+                    url={friend.avatar}
+                  />
+                  <CheckboxInput
+                    selected={
+                      Array.isArray(answer.privacy) &&
+                      answer.privacy.includes(friend.id)
+                    }
+                  />
+                </div>
+              ))}
+            </div>
+          </div>
+        </Modal.Content>
+      </Modal>
+    </div>
+  );
+};
+
+export const createQAPlugin = createPluginFactory({
+  key: ELEMENT_QA,
+  type: ELEMENT_QA,
+  isElement: true,
+  component: QA,
+  then: (editor) => ({
+    inject: {
+      props: {
+        classNames: undefined,
+        validTypes: [ELEMENT_PARAGRAPH],
+      },
+    },
+  }),
+});

package/src/editor/plugins/custom/resetBlockType.ts

@@ -0,0 +1,29 @@
+import { isBlockAboveEmpty, isSelectionAtBlockStart } from "@udecode/plate";
+
+import {
+  ELEMENT_BLOCKQUOTE,
+  ELEMENT_PARAGRAPH,
+  ELEMENT_TODO_LI,
+} from "../../common";
+
+const resetBlockTypesCommonRule = {
+  types: [ELEMENT_BLOCKQUOTE, ELEMENT_TODO_LI],
+  defaultType: ELEMENT_PARAGRAPH,
+};
+
+export const resetBlockTypePlugin = {
+  options: {
+    rules: [
+      {
+        ...resetBlockTypesCommonRule,
+        hotkey: "Enter",
+        predicate: isBlockAboveEmpty,
+      },
+      {
+        ...resetBlockTypesCommonRule,
+        hotkey: "Backspace",
+        predicate: isSelectionAtBlockStart,
+      },
+    ],
+  },
+};

package/src/editor/plugins/custom/selectOnBackspace.ts

@@ -0,0 +1,7 @@
+import { ELEMENT_HR, ELEMENT_IMAGE, ELEMENT_MEDIA_EMBED } from "../../common";
+
+export const selectOnBackspace = {
+  options: {
+    query: { allow: [ELEMENT_HR, ELEMENT_IMAGE, ELEMENT_MEDIA_EMBED] },
+  },
+};

package/src/editor/plugins/custom/softBreak.ts

@@ -0,0 +1,20 @@
+import {
+  ELEMENT_BLOCKQUOTE,
+  ELEMENT_CODE_BLOCK,
+  ELEMENT_TD,
+  SoftBreakPlugin,
+} from "@udecode/plate";
+
+export const softBreakPlugin = {
+  options: {
+    rules: [
+      { hotkey: "shift+enter" },
+      {
+        hotkey: "enter",
+        query: {
+          allow: [ELEMENT_CODE_BLOCK, ELEMENT_BLOCKQUOTE, ELEMENT_TD],
+        },
+      },
+    ],
+  },
+};

package/src/editor/plugins/custom/styles/Button.module.scss

@@ -0,0 +1,51 @@
+@use "@soul-refiner/styles/mixins";
+
+.colorpicker {
+  @include mixins.flex($justify: center, $align: center, $gap: 16px);
+  z-index: 5;
+  position: absolute;
+  top: 48px;
+  left: calc(50% - 148px);
+  border-radius: 16px;
+  padding: 8px 16px;
+  box-shadow: 1px 1px 5px #666;
+  background-color: #ffffff;
+}
+
+.buttonWrapper {
+  @include mixins.flex($justify: center, $align: center);
+  position: relative;
+}
+
+.color {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: var(--option-color);
+  cursor: pointer;
+}
+
+.captionWrapper {
+  max-width: 373px;
+  margin: 24px auto !important;
+
+  p {
+    text-align: center;
+    margin-bottom: 25px;
+  }
+
+  input {
+    height: 48px;
+    flex: 1;
+    background: #f2f7fd;
+    border: 0px;
+    border-radius: 4px 0px 0px 4px;
+    padding: 16px 19px;
+    outline: none;
+  }
+
+  input + button {
+    height: 48px;
+    border-radius: 0px 4px 4px 0px !important;
+  }
+}

package/src/editor/plugins/custom/styles/Footnote.module.scss

@@ -0,0 +1,58 @@
+@use "@soul-refiner/styles/mixins";
+
+.inline {
+  vertical-align: super;
+  font-size: smaller;
+  font-weight: 700;
+  text-decoration: underline;
+
+  &:hover {
+    cursor: pointer;
+    color: var(--color-blue-5);
+  }
+}
+
+.floating {
+  @include mixins.flex($align: center, $gap: 4px);
+  position: absolute;
+  left: 0px;
+  z-index: 20 !important;
+  width: auto;
+  background-color: #ffffff;
+  border-radius: 4px;
+  box-shadow: rgb(15 15 15 / 5%) 0 0 0 1px, rgb(15 15 15 / 10%) 0 3px 6px,
+    rgb(15 15 15 / 20%) 0 9px 24px;
+
+  p {
+    min-width: 16px;
+    max-width: 400px;
+    padding: 6px 0px;
+    width: max-content;
+    cursor: text;
+    line-height: 0px;
+  }
+}
+
+.footnotesWrapper {
+  p {
+    counter-increment: footnote_counter_end 1;
+    outline: none;
+
+    & > span:first-of-type {
+      position: relative;
+
+      &::before {
+        position: absolute;
+        content: counter(footnote_counter_end);
+        left: 0px;
+        top: -3px;
+        text-decoration: underline;
+        color: var(--color-blue-5);
+      }
+    }
+
+    & > span:last-of-type {
+      margin-left: 24px;
+    }
+  }
+}

package/src/editor/plugins/custom/styles/Paywall.module.scss

@@ -0,0 +1,67 @@
+@use "@soul-refiner/styles/mixins";
+
+.wrapper {
+  position: relative;
+
+  .below {
+    @include mixins.flex($align: center, $justify: center, $gap: 24px);
+
+    .line {
+      height: 1px;
+      width: 100%;
+      background-color: var(--color-grey-8);
+    }
+
+    button {
+      flex-shrink: 0;
+    }
+  }
+}
+
+.paywall {
+  @include mixins.flex(
+    $gap: 21px,
+    $dir: column,
+    $align: center,
+    $justify: center
+  );
+  padding: 37px;
+  margin-bottom: 72px !important;
+  background-color: var(--bg-color);
+  border-left: 10px solid var(--highlight-color);
+  border-radius: 12px;
+  color: #ffffff;
+  span {
+    color: #ffffff;
+  }
+
+  .switch {
+    @include mixins.font(400, 12px, 12px);
+    color: #ffffff;
+    a {
+      font-weight: 700;
+      color: #ffffff;
+    }
+  }
+}
+
+.colorpicker {
+  @include mixins.flex($justify: center, $align: center, $gap: 16px);
+  position: absolute;
+  bottom: 56px;
+  left: calc(50% - 148px);
+  border-radius: 16px;
+  padding: 8px 16px;
+  box-shadow: 1px 1px 5px #666;
+  background-color: #ffffff;
+}
+
+.color {
+  box-sizing: border-box;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  border-left: 12px solid var(--option-color);
+  background-color: var(--option-color-dark);
+  cursor: pointer;
+}