@soul-refiner/design-system 0.0.13 → 0.0.15

package/src/editor/Editor.tsx

@@ -0,0 +1,327 @@
+import React from "react";
+import {
+  Comment,
+  Course,
+  CourseContent,
+  Media,
+  User,
+} from "@soul-refiner/models";
+import { createPlugins, Plate, PlateProvider, TElement } from "@udecode/plate";
+import Client from "@soul-refiner/client";
+
+import { plateUI } from "./plateUI";
+import { DEFAULT_CONTENT, editableProps } from "./config";
+import { blocks, inline, marks, utils } from "./plugins";
+
+import { EditorBar } from "../navigation/EditorBar";
+
+import styles from "./Editor.module.scss";
+
+/**********************************************************************
+ *  Types
+ */
+export interface EditorProps extends Course {
+  defaultContent?: TElement[];
+  editable: boolean;
+  handleAddComment: (newComment: {
+    user: User;
+    text: string;
+    parentId: string;
+  }) => void;
+  handleAddReaction: (newReaction: {
+    parentId: string;
+    type: "like" | "dislike";
+    userId: string;
+  }) => void;
+  handleChangeVideo: (video: Partial<Media>) => Promise<Media>;
+  handleCourseChange: (newCourse: Partial<Course>) => void;
+  handleDeleteVideo: (id: string) => void;
+  handleGetComments: (id: string) => Promise<Comment[]>;
+  handleGetFriends: (query: string, selected?: string[]) => Promise<User[]>;
+  handleGetVideos: () => Promise<Media[]>;
+  handleSetVideoSrc: (src: string) => void;
+  handleUploadImage: (dataURL: File) => Promise<string>;
+  handleUploadVideo: (
+    dataURL: File,
+    previous?: Partial<Media>
+  ) => Promise<Media>;
+  pageName: string;
+  user: User;
+}
+
+export interface EditorContextProps
+  extends Omit<EditorProps, "defaultContent"> {
+  availableVideos: Media[];
+  isUserAuthorized: boolean;
+  footnotes: { id: string; text: string }[];
+  handleFootnoteChange: (id: string, text: string) => void;
+  handleFootnoteDelete: (id: string) => void;
+}
+
+/**********************************************************************
+ *  Editor Configuration
+ */
+
+const plugins = createPlugins([...blocks, ...inline, ...marks, ...utils], {
+  components: plateUI,
+});
+
+/**********************************************************************
+ *  Context
+ */
+
+export const EditorContext = React.createContext<EditorContextProps>({
+  availableVideos: [],
+  categories: [],
+  created: "",
+  description: "",
+  editable: false,
+  footnotes: [],
+  handleAddComment: (post) => undefined,
+  handleAddReaction: (newReaction) => undefined,
+  handleChangeVideo: async (video) => ({} as Media),
+  handleCourseChange: (newCourse) => undefined,
+  handleDeleteVideo: (id) => undefined,
+  handleGetComments: async (id) => [],
+  handleGetFriends: async (query) => [],
+  handleGetVideos: async () => [],
+  handleFootnoteChange: (id, text) => undefined,
+  handleFootnoteDelete: (id) => undefined,
+  handleSetVideoSrc: (src) => undefined,
+  handleUploadImage: async (upload: File) => "",
+  handleUploadVideo: async (upload: File) => ({} as Media),
+  hasContent: true,
+  id: "",
+  isUserAuthorized: false,
+  modified: "",
+  outline: [],
+  ownerId: "",
+  pageName: "",
+  plans: [],
+  ratings: [],
+  sampleVideo: "",
+  shortDescription: "",
+  status: "draft",
+  subtitle: "",
+  tags: [],
+  thumbnail: "",
+  title: "",
+  trailerVideo: "",
+  type: "written",
+  user: {} as User,
+});
+
+/**********************************************************************
+ *  Function
+ */
+export const Editor = ({
+  categories,
+  created,
+  defaultContent = DEFAULT_CONTENT,
+  description,
+  editable = true,
+  handleAddComment,
+  handleAddReaction,
+  handleChangeVideo,
+  handleCourseChange,
+  handleDeleteVideo,
+  handleGetComments,
+  handleGetFriends,
+  handleGetVideos,
+  handleSetVideoSrc,
+  handleUploadImage,
+  handleUploadVideo,
+  hasContent,
+  id,
+  modified,
+  outline,
+  ownerId,
+  pageName,
+  plans,
+  ratings,
+  sampleVideo,
+  shortDescription,
+  status,
+  subtitle,
+  tags,
+  thumbnail,
+  title,
+  trailerVideo,
+  type,
+  user,
+}: EditorProps) => {
+  const [saving, setSaving] = React.useState(false);
+  const [errorSaving, setErrorSaving] = React.useState(false);
+  const [footnotes, setFootnotes] = React.useState<
+    { id: string; text: string }[]
+  >([]);
+  const [contentState, setContentState] = React.useState<CourseContent>({
+    courseId: id,
+    created: new Date().toISOString(),
+    nodes: [],
+    status: "draft",
+  });
+  const [availableVideos, setAvailableVideos] = React.useState<Media[]>([]);
+
+  let client: Client;
+
+  const handleChange = (newNodes: TElement[]) => {
+    setContentState((prev) => ({
+      ...prev,
+      created: new Date().toISOString(),
+      nodes: newNodes as any,
+    }));
+  };
+
+  const handleFootnoteChange = (id: string, text: string) => {
+    setFootnotes((prev) => {
+      const index = prev.findIndex((footnote) => footnote.id === id);
+      if (index === -1 && text !== "") {
+        return [...prev, { id, text }];
+      }
+      if (text !== "") {
+        const newFootnotes = prev;
+        newFootnotes.splice(index, 1, { id, text });
+        return newFootnotes;
+      }
+      return prev;
+    });
+  };
+
+  const handleFootnoteDelete = (id: string) => {
+    setFootnotes((prev) => {
+      const index = prev.findIndex((footnote) => footnote.id === id);
+      if (index === -1) return prev;
+      const newFootnotes = prev;
+      prev.splice(index, 1);
+      return newFootnotes;
+    });
+  };
+
+  const isUserAuthorized = React.useMemo(() => {
+    if (user?.id) {
+      /**
+       * TODO: Handle authorization of user to view content;
+       */
+      return true;
+    }
+    return false;
+  }, [user?.id]);
+
+  React.useEffect(() => {
+    client = new Client({ token: "new-token" });
+    const controller = new AbortController();
+
+    (async () => {
+      const content = await client.courses.getContentById(id, {
+        signal: controller.signal,
+      });
+      if (content) setContentState(content.data);
+    })();
+
+    setInterval(async () => {
+      setSaving(true);
+      const save = await client.courses.upsertCourseContent({
+        courseId: id,
+        nodes: contentState?.nodes ?? [],
+      });
+      if (save?.data) {
+        setErrorSaving(false);
+        setSaving(false);
+      } else {
+        setErrorSaving(true);
+        // TODO: Determine what happens after it fails to save
+      }
+    }, 300000);
+
+    handleGetVideos().then((res) => setAvailableVideos(res));
+
+    return () => {
+      controller.abort();
+      client.courses.upsertCourseContent({
+        courseId: id,
+        nodes: contentState?.nodes ?? [],
+      });
+    };
+  }, []);
+
+  // React.useEffect(() => {
+  //   /**
+  //    * Limit the content if user is not authorized to see it
+  //    * TODO: DO THIS ON THE BACKEND
+  //    */
+  //   if (!isUserAuthorized) {
+  //     let paywallOccurance = false;
+  //     setPlateValue(
+  //       (contentState.nodes as unknown as TElement[]).filter((element) => {
+  //         const value = paywallOccurance;
+  //         if (element.type === ELEMENT_PAYWALL) paywallOccurance = true;
+  //         return value;
+  //       })
+  //     );
+  //   }
+  // }, [isUserAuthorized]);
+
+  return (
+    <EditorContext.Provider
+      value={{
+        availableVideos,
+        categories,
+        created,
+        description,
+        editable,
+        footnotes,
+        handleAddComment,
+        handleAddReaction,
+        handleChangeVideo,
+        handleCourseChange,
+        handleDeleteVideo,
+        handleGetComments,
+        handleGetFriends,
+        handleGetVideos,
+        handleFootnoteChange,
+        handleFootnoteDelete,
+        handleSetVideoSrc,
+        handleUploadImage,
+        handleUploadVideo,
+        hasContent,
+        id,
+        isUserAuthorized,
+        modified,
+        ownerId,
+        outline,
+        pageName,
+        plans,
+        ratings,
+        sampleVideo,
+        status,
+        shortDescription,
+        subtitle,
+        tags,
+        title,
+        thumbnail,
+        trailerVideo,
+        type,
+        user,
+      }}
+    >
+      <PlateProvider
+        id="main"
+        initialValue={defaultContent}
+        onChange={handleChange}
+        plugins={plugins}
+      >
+        <EditorBar editable={editable} />
+        <div className={styles.editor}>
+          <Plate
+            id="main"
+            editableProps={{
+              readOnly: !editable,
+              ...editableProps,
+            }}
+          />
+        </div>
+      </PlateProvider>
+    </EditorContext.Provider>
+  );
+};

package/src/editor/common/elements.ts

@@ -0,0 +1,50 @@
+export {
+  ELEMENT_BLOCKQUOTE,
+  ELEMENT_CODE_BLOCK,
+  ELEMENT_CODE_LINE,
+  ELEMENT_CODE_SYNTAX,
+  ELEMENT_DEFAULT,
+  ELEMENT_H1,
+  ELEMENT_H2,
+  ELEMENT_H3,
+  ELEMENT_H4,
+  ELEMENT_H5,
+  ELEMENT_H6,
+  ELEMENT_HR,
+  ELEMENT_IMAGE,
+  ELEMENT_LI,
+  ELEMENT_LIC,
+  ELEMENT_LINK,
+  ELEMENT_MEDIA,
+  ELEMENT_MEDIA_EMBED,
+  ELEMENT_MENTION,
+  ELEMENT_MENTION_INPUT,
+  ELEMENT_OL,
+  ELEMENT_PARAGRAPH,
+  ELEMENT_TABLE,
+  ELEMENT_TD,
+  ELEMENT_TH,
+  ELEMENT_TODO_LI,
+  ELEMENT_TR,
+  ELEMENT_UL,
+} from "@udecode/plate";
+
+export const ELEMENT_AUDIO = "audio";
+export const ELEMENT_BIBLE_QUOTE = "bible-quote";
+export const ELEMENT_BUTTON = "button";
+export const ELEMENT_EXAMPLE = "example";
+export const ELEMENT_FOOTNOTE = "footnote";
+export const ELEMENT_PAYWALL = "paywall";
+export const ELEMENT_POLL = "poll";
+export const ELEMENT_QA = "q-n-a";
+export const ELEMENT_RECIPE = "recipe";
+export const ELEMENT_VIDEO = "video";
+
+export const BUTTON_COMMENT = "button-comment";
+export const BUTTON_GIFT_SUBSCRIPTION = "button-gift-subscription";
+export const BUTTON_LINK = "button-link";
+export const BUTTON_SHARE = "button-share";
+export const BUTTON_SHARE_PAGE = "button-share-page";
+export const BUTTON_SIGNUP = "signup";
+export const BUTTON_SPECIAL_OFFER = "button-special-offer";
+export const BUTTON_SUBSCRIBE = "button-subscribe";

package/src/editor/common/index.ts

@@ -0,0 +1,2 @@
+export * from "./elements";
+export * from "./marks";

package/src/editor/common/marks.ts

@@ -0,0 +1,27 @@
+export {
+  MARK_BG_COLOR,
+  MARK_BOLD,
+  MARK_CODE,
+  MARK_COLOR,
+  MARK_FONT_FAMILY,
+  MARK_FONT_SIZE,
+  MARK_FONT_WEIGHT,
+  MARK_HIGHLIGHT,
+  MARK_ITALIC,
+  MARK_KBD,
+  MARK_SEARCH_HIGHLIGHT,
+  MARK_STRIKETHROUGH,
+  MARK_SUBSCRIPT,
+  MARK_SUPERSCRIPT,
+  MARK_UNDERLINE,
+} from "@udecode/plate";
+
+export const COLORS = [
+  "var(--color-turquoise-5)",
+  "var(--color-green-5)",
+  "var(--color-blue-5)",
+  "var(--color-purple-5)",
+  "var(--color-yellow-5)",
+  "var(--color-orange-5)",
+  "var(--color-red-5)",
+];

package/src/editor/components/MediaDrawer/MediaDrawer.module.scss

@@ -0,0 +1,316 @@
+@use "@soul-refiner/styles/mixins";
+
+.drawer {
+  .mediaName {
+    @include mixins.font(500, 24px, 30px);
+    margin-top: 14px;
+    margin-left: 12px;
+  }
+
+  [class~="icon-header"] {
+    & > * {
+      color: inherit;
+      & > * {
+        color: inherit;
+      }
+    }
+    h5 {
+      font-weight: 700;
+    }
+  }
+
+  [class~="actions-wrapper"] {
+    button:last-of-type > span {
+      color: #ffffff;
+    }
+  }
+
+  .details {
+    h6 {
+      line-height: 24px;
+      font-weight: 700;
+    }
+    p {
+      @include mixins.font(400, 16px, 24px);
+      margin-bottom: 16px;
+      color: var(--color-grey-6);
+    }
+
+    div {
+      margin-bottom: 32px;
+    }
+  }
+
+  .media {
+    width: 100%;
+    [class~="switch"] {
+      width: 350px;
+      border-radius: 8px;
+      background-color: var(--color-grey-9);
+      & > div {
+        border-radius: 8px;
+        color: var(--color-grey-4);
+        &[class~="active"] {
+          font-weight: 700;
+          color: var(--color-blue-3);
+        }
+      }
+    }
+
+    .contentWrapper {
+      width: 100%;
+      margin: 32px 0px;
+
+      & > * {
+        width: 100%;
+      }
+
+      div > div > button {
+        background-color: transparent;
+      }
+
+      div > div > button > span {
+        color: var(--color-purple-5);
+      }
+
+      .select {
+        & > div {
+          padding: 12px 32px 12px 12px;
+          border-radius: 8px;
+          height: fit-content !important;
+          input {
+            width: 333px;
+            height: 24px;
+            padding-right: 24px;
+          }
+        }
+
+        .videoWrapper {
+          max-height: 271px;
+          overflow-y: auto;
+          @include mixins.flex($gap: 12px, $dir: column);
+
+          &::-webkit-scrollbar-track {
+            margin: 25px;
+          }
+
+          .video {
+            @include mixins.flex(
+              $gap: 20px,
+              $align: center,
+              $justify: space-between
+            );
+            width: 100%;
+            position: relative;
+            height: 104px;
+            padding: 16px 24px;
+            border: 1px solid rgba(0, 0, 0, 0.06);
+            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+            border-radius: 8px;
+            cursor: pointer;
+
+            &:hover {
+              border-bottom: 1px solid transparent;
+              background-color: var(--color-grey-9);
+              border-radius: 8px;
+            }
+
+            .thumbnailWrapper {
+              height: 100%;
+              position: relative;
+              img {
+                height: 100%;
+                object-fit: contain;
+                border-radius: 8px;
+              }
+              .duration {
+                @include mixins.font(600, 10px, 15px);
+                display: block;
+                position: absolute;
+                right: 7px;
+                bottom: 5px;
+                color: #ffffff;
+                padding: 4px;
+                border-radius: 4px;
+                background-color: rgba(0, 0, 0, 0.5);
+                letter-spacing: 0.5px;
+              }
+            }
+
+            .selected {
+              width: 22px;
+              height: 22px;
+              box-sizing: border-box;
+              border: 1px solid var(--color-grey-8);
+              border-radius: 50%;
+              flex-shrink: 0;
+              margin-left: auto;
+              background-color: #ffffff;
+
+              &[class~="active"] {
+                border: 5px solid var(--color-blue-3);
+              }
+            }
+
+            .title {
+              @include mixins.font-clamp(2);
+              @include mixins.font(500, 18px, 24px);
+            }
+          }
+        }
+      }
+    }
+
+    .buttonWrapper {
+      @include mixins.flex($align: center, $justify: space-between, $gap: 16px);
+      max-width: 540px;
+      margin: 32px auto 0px;
+
+      button:first-of-type > span {
+        color: #ffffff;
+      }
+
+      & > button:last-of-type {
+        & > span {
+          color: var(--color-red-5);
+        }
+        &:hover {
+          background-color: var(--color-red-5);
+          & > span {
+            color: #ffffff;
+          }
+        }
+
+        &:active {
+          & > span {
+            color: var(--color-red-5);
+          }
+          background-color: #ffffff;
+          border: 1px solid var(--color-grey-7);
+        }
+      }
+      & > button {
+        flex: 1;
+        & > span {
+          font-weight: 600;
+        }
+      }
+
+      .modal {
+        max-width: 484px;
+        padding: 16px;
+
+        p {
+          padding: 16px 16px 24px;
+        }
+      }
+    }
+
+    .replaceModal {
+      button:first-of-type {
+        & > span {
+          color: var(--color-grey-3);
+        }
+        &:hover {
+          background-color: var(--color-grey-10);
+        }
+      }
+
+      button:last-of-type {
+        background-color: var(--color-blue-3);
+        & > span {
+          color: #ffffff;
+        }
+        &:hover {
+          background-color: var(--color-blue-1);
+        }
+        &:active {
+          background-color: #ffffff;
+          border: 1px solid var(--color-blue-3) !important;
+          & > span {
+            color: var(--color-blue-3);
+          }
+        }
+      }
+    }
+
+    .deleteModal {
+      button:first-of-type {
+        & > span {
+          color: var(--color-grey-3);
+        }
+        &:hover {
+          background-color: var(--color-grey-10);
+        }
+      }
+
+      button:last-of-type {
+        background-color: var(--color-red-5);
+        & > span {
+          color: #ffffff;
+        }
+        &:hover {
+          background-color: var(--color-red-6);
+        }
+        &:active {
+          background-color: #ffffff;
+          border: 1px solid var(--color-red-3) !important;
+          & > span {
+            color: var(--color-red-3);
+          }
+        }
+        .disabled {
+          background-color: var(--color-grey-5) !important;
+          & > span {
+            color: var(--color-grey-3) !important;
+          }
+        }
+      }
+    }
+
+    .deleteWrapper {
+      p {
+        padding: 0px 0px 16px !important;
+      }
+
+      input {
+        border: none;
+        outline: none;
+        width: 100%;
+        padding: 10px 20px;
+        background-color: var(--color-blue-10);
+        box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.03);
+        border-radius: 16px;
+        border: 1px solid var(--color-grey-9);
+      }
+    }
+  }
+
+  .thumbnail {
+    width: 100%;
+
+    div > div > button {
+      background-color: transparent;
+    }
+
+    div > div > button > span {
+      color: var(--color-green-5);
+    }
+  }
+
+  .addToPlaylist {
+    [class~="switch"] {
+      width: 350px;
+      border-radius: 8px;
+      background-color: var(--color-grey-9);
+      & > div {
+        border-radius: 8px;
+        color: var(--color-grey-4);
+        &[class~="active"] {
+          font-weight: 700;
+          color: var(--color-blue-3);
+        }
+      }
+    }
+  }
+}