@soul-refiner/design-system 0.0.18 → 0.0.20

package/dist/src/editor/Editor.tsx

@@ -1,327 +0,0 @@
-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/dist/src/editor/common/elements.ts

@@ -1,50 +0,0 @@
-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/dist/src/editor/common/marks.ts

@@ -1,27 +0,0 @@
-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/dist/src/editor/components/MediaDrawer/MediaDrawer.module.scss

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