@soul-refiner/design-system 0.0.5 → 0.0.7

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

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

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

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

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

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

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

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